` thường. Nó chỉ co lại
đúng theo nội dung trên desktop vì khi đó nút còn là ITEM của
`.col-inner` (flex-column) — `align-self:center` khiến flexbox tính lại
theo kích thước nội dung. Mobile `.col-inner` KHÔNG phải flex (quy tắc đó
cũng chỉ nằm trong `@media(min-width:850px)`), nên `align-self` vô nghĩa
và nút quay về hành vi khối mặc định. `width:fit-content` mới là thứ ép
co theo nội dung trong CẢ HAI ngữ cảnh — không phụ thuộc cha có phải flex
hay không. */
.tl-trang-chu .page-wrapper .tl-review-block > .col-inner > .button,
.tl-trang-chu .page-wrapper .tl-story-block > .col-inner > .button {
align-self: center;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 850px) {
/* -----------------------------------------------------------------------------
2. CONTAINER — rộng hơn mặc định Flatsome nhưng vẫn có khoảng thở
[phục vụ] phần tử: Row/Column | khối: bề rộng container toàn trang
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 4 — nới rộng hơn mặc định Flatsome mà vẫn có khoảng thở
Flatsome đang để `.container,.row{max-width:1170px}` (site_width 1200).
Brief muốn nới dần theo khổ màn hình.
⚠ Chỉ đè `.row` KHI đã bọc trong .tl-trang-chu — không đụng .row toàn site.
-------------------------------------------------------------------------- */
/* ⛔ KHÔNG mở breakpoint 1366/1440/1600. Luật III.4.3-3 chỉ cho hệ Flatsome
549/849/850, và linter mục (6) chặn mốc lạ — mốc lạ đẻ ra vùng mà rule của
hai bên áp chéo nhau.
`clamp()` cho đúng dải brief muốn mà không cần mốc nào:
1200px → 1120 · 1366px → 1229 · 1440px → 1296 · ≥1600px → 1380
(brief xin lần lượt 1120–1160 · 1240–1280 · 1280–1320 · 1360–1380) */
/* ⛔ ĐỪNG dùng clamp() với SÀN px ở đây. clamp(1120px, …) giữ sàn 1120px cả ở
khổ 850–1120px ⇒ hàng rộng hơn màn hình và tràn phải — chặng 5 bắt được
15px tràn ở khổ 1024 ngày 19/08, đúng lúc padding section vừa bị gỡ nên
không còn gì che. `min()` không có sàn nên tự co theo màn hình.
1024px → 952 · 1200px → 1116 · 1366px → 1270 · ≥1484px → 1380 */
/* ⛔ ĐÃ GỠ 19/08/2026 — bề ngang nay dùng chung `--tl-be-ngang` (00-tokens.css),
áp ở 10-base.css cho cả header · thân trang · footer của 6 trang.
Công thức cũ `min(93vw,1380)` thật ra LỆCH brief của chính trang chủ ở 2 khổ:
1200 ra 1116 (brief xin 1120–1160) và 1440 ra 1339 (brief xin 1280–1320).
Công thức chung thoả cả hai brief ở cả 5 khổ. */
/* (luật row lồng cũng đã chuyển lên 10-base.css) */
/* -----------------------------------------------------------------------------
3. NHỊP SECTION — compact, không phải landing page
[phục vụ] phần tử: Section | khối: nhịp dọc giữa và trong section
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 5 + 18 — trang phải compact, không phải landing page
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-section > .section-content { padding: 0; }
.tl-trang-chu .page-wrapper .tl-section {
padding-top: 32px;
padding-bottom: 32px;
/* ⚠ Flatsome bọc trang trong `.row-main` RỒI mỗi `.section` lại thêm 30px
padding hai bên — cộng dồn ~90px, làm dải nội dung hụt hẳn một nấc so với
con số brief xin (đo 19/08: viewport 1200px chỉ còn 1030px nội dung).
`.row-main` đã giới hạn bề rộng nên padding đó thừa; gỡ thì dải nội dung
đúng bằng max-width ở mục 2. */
padding-left: 0;
padding-right: 0;
}
/* Section mở đầu và hai section "nặng" thở rộng hơn một nhịp */
.tl-trang-chu .page-wrapper .tl-hero,
.tl-trang-chu .page-wrapper .tl-trust-section,
.tl-trang-chu .page-wrapper .tl-knowledge-section {
padding-top: 42px;
padding-bottom: 42px;
}
/* Nhịp dọc trong section: heading → lưới → CTA */
.tl-trang-chu .page-wrapper .tl-section h2 { margin-bottom: 18px; }
.tl-trang-chu .page-wrapper .tl-section p { margin-bottom: 10px; }
.tl-trang-chu .page-wrapper .tl-section .row + .row { margin-top: 20px; }
.tl-trang-chu .page-wrapper .tl-section .button { margin-bottom: 0; }
/* -----------------------------------------------------------------------------
4. TYPOGRAPHY DESKTOP
[phục vụ] phần tử: Text/heading | khối: thang chữ desktop
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 6 — panel không có ô nào đặt thang chữ cho riêng một trang
-------------------------------------------------------------------------- */
/* Đặt trên .page-wrapper chứ không lặp lại bộ chọn trần `.tl-trang-chu`
(linter mục 7 bắt trùng) — chữ vẫn kế thừa xuống toàn trang. */
.tl-trang-chu .page-wrapper §PW§ { font-size: 14px; line-height: 1.6; color: var(--tl-text); }
.tl-trang-chu .page-wrapper h1, .tl-trang-chu h2, .tl-trang-chu h3 { color: var(--tl-navy); }
.tl-trang-chu .page-wrapper h1 {
font-size: clamp(32px, 2.4vw, 40px);
line-height: 1.15;
font-weight: 800;
margin-bottom: 12px;
}
.tl-trang-chu .page-wrapper h2 {
font-size: 24px;
line-height: 1.25;
font-weight: 800;
}
.tl-trang-chu .page-wrapper .tl-trust-section h2,
.tl-trang-chu .page-wrapper .tl-knowledge-section h2 { font-size: 26px; }
.tl-trang-chu .page-wrapper h3 {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
margin-bottom: 8px;
}
.tl-trang-chu .page-wrapper .tl-caption p { font-size: 12px; font-weight: 600; line-height: 1.35; }
/* -----------------------------------------------------------------------------
5. NGÔN NGỮ THẺ DÙNG CHUNG
[phục vụ] phần tử: Column/Text | khối: mọi thẻ trên trang
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 13 — một ngôn ngữ hình khối chung cho 4 loại thẻ khác nhau
Một khai báo cho MỌI thẻ của trang — brief mục 13.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-service-grid > .col > .col-inner,
.tl-trang-chu .page-wrapper .tl-card-baiviet .box,
.tl-trang-chu .page-wrapper .tl-card-cta {
background: var(--tl-white);
border: 1px solid var(--tl-border);
border-radius: var(--tl-r);
box-shadow: var(--tl-card-shadow);
transition: transform .2s ease, border-color .2s ease;
}
.tl-trang-chu .page-wrapper .tl-service-grid > .col > .col-inner:hover,
.tl-trang-chu .page-wrapper .tl-card-baiviet .box:hover {
transform: translateY(-2px);
border-color: #d3d8e3;
}
/* -----------------------------------------------------------------------------
6. NÚT — brief mục 9
[phục vụ] phần tử: Button | khối: mọi nút trong trang
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 9 — panel Button không đặt được chiều cao và bảng màu riêng theo trang
⚠ Bọc trong .tl-trang-chu nên KHÔNG đụng .button toàn site.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .button {
height: 42px;
min-height: 0;
padding: 0 20px;
border-radius: var(--tl-r);
font-size: 13px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease, color .2s ease,
border-color .2s ease, transform .2s ease;
}
.tl-trang-chu .page-wrapper .button.primary:not(.is-outline) {
background-color: var(--tl-orange-chu);
border-color: var(--tl-orange-chu);
color: var(--tl-white);
}
.tl-trang-chu .page-wrapper .button.primary:not(.is-outline):hover {
background-color: var(--tl-orange-hover);
border-color: var(--tl-orange-hover);
transform: translateY(-1px);
}
.tl-trang-chu .page-wrapper .button.is-outline {
background: var(--tl-white);
color: var(--tl-orange-chu); /* CHỮ ⇒ cần 4,5:1 */
border: 1px solid var(--tl-orange); /* VIỀN ⇒ đồ hoạ, 3:1 là đủ */
}
.tl-trang-chu .page-wrapper .button.is-outline:hover {
background: var(--tl-orange-chu); /* chữ trắng nằm trên ⇒ nền phải đậm */
color: var(--tl-white);
transform: translateY(-1px);
}
/* Thẻ CTA: nền/viền/bo đã khai chung ở mục 3 — đây chỉ thêm đệm và cỡ chữ. */
/* -----------------------------------------------------------------------------
7. HERO — brief mục 8
[phục vụ] phần tử: Row/Column/Image/Text | khối: khối hero
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 8 — lưới 2 cột tỉ lệ .85/1.35 và thẻ CTA nổi, panel không có grid
Flatsome dựng cột bằng flex; ép grid ở ĐÂY để tỉ lệ đúng brief mà không
phải đổi span trong panel.
-------------------------------------------------------------------------- */
/* Ảnh hero phủ kín cột, không méo */
/* ⛔ ĐỪNG đặt `max-height` cho ảnh hero. Brief xin hero cao 280–330px, nhưng
headline thật dài 3 câu nên cột CHỮ cao 470–572px; chặn ảnh ở 330px thì hai
cột lệch nhau 126–228px và để hở một mảng TRỐNG lớn bên phải (đo 19/08).
Cho ảnh cao 100% để nó bám đúng chiều cao cột chữ — `object-fit:cover` lo
phần cắt nên ảnh không méo. */
/* Thẻ liên hệ nổi — brief mục 8 */
/* -----------------------------------------------------------------------------
8. SECTION "TÔI CÓ THỂ ĐỒNG HÀNH…" — 5 thẻ dịch vụ, brief mục 10
[phục vụ] phần tử: Row/Column | khối: 5 thẻ dịch vụ
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 10 — lưới 5 cột đều; span nguyên của Flatsome không chia hết cho 5
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-service-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.tl-trang-chu .page-wrapper .tl-service-grid > .col {
width: 100%;
max-width: none;
flex: none;
padding: 0;
}
/* ⚠ brief 26/08 B: khối này TRẮNG TUYỆT ĐỐI — thẻ chỉ có viền rất nhạt,
KHÔNG shadow. Vì vậy tách khỏi luật thẻ dùng chung ở mục 3 (thẻ đó có
`box-shadow`), chứ không sửa luật chung — ba khối kia vẫn cần shadow. */
.tl-trang-chu .page-wrapper .tl-service-grid > .col > .col-inner {
border-color: #E5E7EB;
box-shadow: none;
}
.tl-trang-chu .page-wrapper .tl-service-grid > .col > .col-inner {
height: 100%;
padding: 18px;
min-height: 195px;
}
/* Flatsome ghi `width:46px` NỘI TUYẾN lên .icon-box-img. Dùng `max-width`
(thuộc tính KHÁC) để kẹp lại — không phải tranh chấp nên không cần
!important, đúng yêu cầu brief mục 20. */
.tl-trang-chu .page-wrapper .tl-service-grid .icon-box-img { max-width: 44px; }
/* ⛔ ĐỪNG đè `fill` của vòng tròn bằng CSS nữa. Bộ icon giao 26/08 mang sẵn
`fill="#0B2458"` — đúng mã brief yêu cầu. Luật cũ đè thành var(--tl-navy)
= rgb(7,27,70), lệch màu mà nhìn mắt không ra. */
.tl-trang-chu .page-wrapper .tl-service-grid h3 {
font-size: 13px;
line-height: 1.4;
font-weight: 800;
color: var(--tl-navy);
margin-bottom: 8px;
}
/* Số thứ tự "1."/"2."… tô cam CHỈ ở mobile (mục ≤549 phía dưới ghi đè lại
thành cam) — mặc định giữ NGUYÊN màu navy như desktop trước giờ, không tự
ý đổi màu desktop dù cùng dùng chung thẻ `.tl-cam` đã duyệt. */
.tl-trang-chu .page-wrapper .tl-service-grid h3 .tl-cam { color: inherit; }
.tl-trang-chu .page-wrapper .tl-service-grid .tl-cham-tron p {
font-size: 12.5px;
line-height: 1.55;
margin-bottom: 6px;
color: var(--tl-text);
}
/* -----------------------------------------------------------------------------
9. SECTION QUY TRÌNH / VIDEO — brief 26/08 (tin nhắn 2): GỘP video+chữ+5 thẻ
[phục vụ] phần tử: Row/Column | khối: khối video-chữ + 5 thumbnail — MỘT hàng
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] spec/mockup/trang-chu.jpg — đo pixel: khối video-chữ ≈ 463px,
mỗi thẻ ảnh ≈ 135px, trong dải 1199px ⇒ tỉ lệ ~3,4fr : 5×1fr.
[lý do vượt panel] panel chỉ chia cột theo bội số nguyên của 12 (span 1-12);
tỉ lệ 3,4:1:1:1:1:1 không có tổ hợp span nguyên nào khớp. Bên
trong khối video-chữ vẫn dùng ĐÚNG span panel (5:7, `row_inner`)
vì tỉ lệ đó CHIA HẾT 12 — chỉ hàng ngoài mới cần CSS Grid.
-------------------------------------------------------------------------- */
/* SỬA 26/08 (phiên 3): 4T — chiều cao khối video-chữ và 5 thẻ ảnh phải BẰNG
NHAU. `align-items:start` (bản gốc) để mỗi cột cao theo nội dung riêng —
khối video-chữ cao hơn hẳn 5 thẻ ảnh vuông. Đổi sang `stretch` + lấp đầy
`.col-inner` bằng CSS (panel `padding`/`border_radius` của `[col]` ĐÃ THỬ
và KHÔNG render — chỉ `bg_color` và (`border`+`border_color`+`border_radius`
đi CÙNG NHAU) mới ra style thật; panel bỏ qua các thuộc tính còn lại). */
.tl-trang-chu .page-wrapper .tl-media-row {
display: grid;
grid-template-columns: 3.4fr repeat(5, 1fr);
gap: 16px;
align-items: stretch;
}
.tl-trang-chu .page-wrapper .tl-media-row > .col {
width: 100%; max-width: none; flex: none; padding: 0;
}
.tl-trang-chu .page-wrapper .tl-media-main > .col-inner {
height: 100%;
border-radius: 12px;
padding: 18px;
}
.tl-trang-chu .page-wrapper .tl-media-chip > .col-inner {
height: 100%;
display: flex;
flex-direction: column;
}
/* `![]()
` KHÔNG phải con trực tiếp của `.col-inner` — Flatsome bọc thêm
`.img > .img-inner > img`. `flex:1` đặt thẳng lên `img` không có tác dụng
(nó không phải flex item của `.col-inner`); phải kéo dài CẢ CHUỖI 3 lớp. */
.tl-trang-chu .page-wrapper .tl-media-chip .img {
flex: 1;
min-height: 0;
display: flex;
}
.tl-trang-chu .page-wrapper .tl-media-chip .img-inner {
flex: 1;
min-height: 0;
}
.tl-trang-chu .page-wrapper .tl-media-chip img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--tl-r);
}
.tl-trang-chu .page-wrapper .tl-media-main h2 { font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.tl-trang-chu .page-wrapper .tl-media-main p { font-size: 12.5px; line-height: 1.5; }
.tl-trang-chu .page-wrapper .tl-media-main .button { font-size: 10.5px; padding: 0 12px; min-height: 34px; }
/* Nút "XEM VIDEO QUY TRÌNH" — 4T: màu xanh than giống chữ "Toàn Lộc" ở logo,
không phải cam mặc định của `color="primary"`. */
.tl-trang-chu .page-wrapper .tl-btn-navy.button {
background: var(--tl-navy);
border-color: var(--tl-navy);
color: #fff;
}
.tl-trang-chu .page-wrapper .tl-btn-navy.button:hover {
background: var(--tl-navy-2);
border-color: var(--tl-navy-2);
}
/* ⛔ Luật `aspect-ratio:16/9` CŨ đã gỡ — xung đột với luật mới ở trên
(ảnh co giãn lấp đầy chiều cao khi hàng stretch, không giữ tỉ lệ cố định
nữa). Bo góc chuyển sang luật mới bên dưới. */
.tl-trang-chu .page-wrapper .tl-media-chip .tl-caption p { margin-top: 6px; text-align: center; }
/* -----------------------------------------------------------------------------
10. SECTION GỘP: REVIEW + STORY + WHY — brief 26/08 (tin nhắn 3)
[phục vụ] phần tử: Row/Column | khối: review + story + why gộp một section,
MỘT HÀNG DUY NHẤT trên desktop
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] spec/mockup/trang-chu.jpg — đo pixel: 3 khối ~47%/20%/27% dải
nội dung. Giữ nguyên tỉ lệ 1.4/.85/1.05 grid cũ (≈42/26/32%) vì
đã khớp gần đúng, không cần đo lại từ đầu.
[lý do vượt panel] panel chỉ có span nguyên/12 — tỉ lệ đo được không chia
hết 12 ở cấp NGOÀI; cấp TRONG (video:chữ 5:7, icon 4×span-3)
CHIA HẾT 12 nên vẫn dùng đúng span panel, không cần CSS.
-------------------------------------------------------------------------- */
/* SỬA 27/08 (phiên 4): 4T — tách hàng "Người bệnh & gia đình" ra RIÊNG một
hàng có nền màu bo góc; hàng "Câu chuyện" + "Tại sao" xuống hàng dưới, nền
trắng (nền trang, không tô gì thêm). Hàng 1 chỉ có 1 cột nên không cần
grid; hàng 2 còn lại 2 cột story:reason, giữ NGUYÊN tỉ lệ .85:1.05 đã đo
từ bản 3 cột cũ (bỏ phần 1.4fr của review, tỉ lệ hai phần còn lại không đổi). */
/* SỬA 27/08 (phiên 8): bản trước ép `min-height:192px` cứng cho khung
video+chữ, đo tay ở 900-1440px — 4T báo vẫn lệch ở khổ máy thật. Đúng: số
192px chỉ đúng TẠI khổ đo, hàng icon đổi chiều cao theo bề ngang cột (chữ
nhãn xuống dòng khác nhau tuỳ khổ màn), số cứng không theo kịp.
ĐỔI HẲN CÁCH LÀM — bỏ số cứng, để chính CSS Grid tự đo và tự khớp:
`display:contents` trên `.col`/`.col-inner` "tháo khung" hai lớp bọc
ngoài của UX Builder, đưa tiêu đề/khung video+chữ/nút (cột 1) và tiêu đề/
hàng icon (cột 2) thành Ô LƯỚI THẬT của CHÍNH `.tl-trust-row-2`, xếp vào 3
hàng lưới tường minh. Ô lưới mặc định `align-items:stretch` — Grid tự đo
ô nào cao nhất trong HÀNG 2 (khung video+chữ so hàng icon) rồi kéo ô còn
lại khớp bằng, ĐÚNG ở MỌI bề ngang, không cần đo tay lần nào nữa. */
.tl-trang-chu .page-wrapper .tl-trust-section > .section-content > .row.tl-trust-row-2 {
display: grid;
grid-template-columns: .85fr 1.05fr;
grid-template-rows: auto 1fr auto;
column-gap: 20px;
align-items: stretch;
}
.tl-trang-chu .page-wrapper .tl-trust-row-2 > .col,
.tl-trang-chu .page-wrapper .tl-trust-row-2 > .col > .col-inner {
display: contents;
}
.tl-trang-chu .page-wrapper .tl-story-block > .col-inner > .text { grid-column: 1; grid-row: 1; }
.tl-trang-chu .page-wrapper .tl-story-card { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.tl-trang-chu .page-wrapper .tl-story-block > .col-inner > .button { grid-column: 1; grid-row: 3; margin-top: 14px; }
.tl-trang-chu .page-wrapper .tl-reason-block > .col-inner > .text { grid-column: 2; grid-row: 1; }
.tl-trang-chu .page-wrapper .tl-ly-do { grid-column: 2; grid-row: 2; }
.tl-trang-chu .page-wrapper .tl-trust-section > .section-content > .row > .col {
width: 100%; max-width: none; flex: none; padding: 0;
}
.tl-trang-chu .page-wrapper .tl-trust-section h2 {
font-size: 18px;
font-weight: 800;
color: var(--tl-navy);
text-align: center;
margin-bottom: 14px;
}
/* 5 mục MỘT HÀNG: 2 video (span 3) + 3 trích dẫn mini (span 2) — tổng
3+3+2+2+2=12, đúng bố cục `spec/mockup/trang-chu.jpg`.
⛔ SỬA 09/09: span panel MỘT MÌNH không còn đủ. Hai lần thay đổi trước đã
phá cách xếp này mà không ai chỉnh lại phần desktop:
• 27/08 — tách khối ra `[row]` riêng để có nền xanh bo góc ⇒ `.tl-review-
block` từ `span=5` thành `span=12`, nhưng span BÊN TRONG vẫn là
3/3/2/2/2 ⇒ 5 thẻ chỉ lấp NỬA hàng, bỏ trống ~600px bên phải.
• 07/09 — tách 2 thẻ video ra `[row_inner]` riêng cho bản mobile ⇒ desktop
thành HAI dòng, trích dẫn trên video dưới, ngược thứ tự ảnh mẫu.
⚠ CHỐT 09/09 (4T): không dựng 5 thẻ rời nhau, mà chia **HAI VÙNG** — 2
video là một vùng, 3 phản hồi người bệnh là một vùng. Markup đã sẵn đúng
hai bọc cho việc này (`.tl-review-video-row` và `.tl-review-row`, tách ra
từ 07/09), nên chỉ cần đặt mỗi bọc vào một ô lưới thay vì tháo chúng ra.
Tỉ lệ 1fr/1fr = đúng tỉ lệ span gốc (2 video ×3 = 6/12, 3 trích dẫn ×2 =
6/12). Khe GIỮA hai vùng (28px) rộng hơn khe trong vùng (14px) để mắt đọc
ra hai nhóm, không phải năm thẻ rời. Mobile không đụng — mọi luật ở đây
nằm trong khối `@media (min-width: 850px)`. */
.tl-trang-chu .page-wrapper .tl-review-video-row,
.tl-trang-chu .page-wrapper .tl-review-row {
display: flex;
gap: 14px;
align-items: stretch;
grid-row: 2;
/* ⛔ `[row_inner]` render ra `.row`, mà `.row` của Flatsome mang
`margin: 0 -15px` (cơ chế bù đệm 15px của `.col`). Đã zero đệm `.col` ở
dưới nên margin âm này không còn gì để bù — nó kéo hai vùng THÒ RA 15px
khỏi lề panel (đo: thẻ đầu cách mép panel 9px thay vì 24px). Cùng bẫy đã
trả giá ở dải cam kết trang Tôi có thể giúp gì. */
margin: 0;
}
.tl-trang-chu .page-wrapper .tl-review-video-row { grid-column: 1; }
.tl-trang-chu .page-wrapper .tl-review-row { grid-column: 2; }
/* SỬA 26/08 (phiên 3): 4T — mỗi mục trong "Người bệnh", video "Câu chuyện",
4 mục "Tại sao" đều phải NỔI thành khối trắng bo viền trên nền section
xanh than mờ. Panel `[col_inner]` chỉ render `bg_color` và
(`border`+`border_color`+`border_radius` đi CÙNG NHAU qua lớp phủ
`.is-border`) — ĐÃ đặt ở panel (shortcode). `padding` panel KHÔNG render
(đã thử, xác nhận bằng cách đọc HTML thật) nên đệm trong đặt ở đây. */
.tl-trang-chu .page-wrapper .tl-review-video > .col-inner,
.tl-trang-chu .page-wrapper .tl-quote-mini > .col-inner {
height: 100%;
position: relative; /* để .is-border phủ đúng khung, không lệch ra ngoài */
}
.tl-trang-chu .page-wrapper .tl-review-video > .col-inner { padding: 10px; }
.tl-trang-chu .page-wrapper .tl-quote-mini > .col-inner {
padding: 14px 12px;
display: flex;
align-items: center;
}
/* SỬA 26/08 (phiên 2): mockup — chữ NAVY (không phải xám), KHÔNG nghiêng,
nhỏ và DÀY DÒNG hơn (đặc chữ hơn, ít khoảng trắng dọc). */
.tl-trang-chu .page-wrapper .tl-quote-mini p {
position: relative;
padding-top: 16px;
font-size: 11px;
line-height: 1.3;
color: var(--tl-navy);
font-style: normal;
font-weight: 500;
}
.tl-trang-chu .page-wrapper .tl-quote-mini p::before {
content: "\201C";
position: absolute;
top: -8px;
left: 0;
font-size: 24px;
font-style: normal;
font-weight: 800;
color: var(--tl-orange);
line-height: 1;
}
.tl-trang-chu .page-wrapper .tl-story-block p { font-size: 13px; line-height: 1.6; color: var(--tl-muted); }
/* Khối video+chữ của "Câu chuyện của tôi" nổi thành MỘT thẻ trắng bo viền —
`[row_inner]` KHÔNG render `bg`/`border_color`/`padding` panel (đã thử,
chỉ `v_align="stretch"` ra `.align-stretch` thật) nên toàn bộ giao diện
thẻ này đặt bằng CSS. Chiều cao nay do Ô LƯỚI của `.tl-trust-row-2` quyết
định (xem SỬA 27/08 phiên 8 ở trên) — không đặt `min-height` cứng ở đây
nữa, để tránh lệch khi hàng icon bên cạnh đổi chiều cao theo bề ngang. */
.tl-trang-chu .page-wrapper .tl-story-card {
background: #fff;
border: 1px solid #E5E9F0;
border-radius: 10px;
padding: 10px;
}
/* SỬA 27/08 (phiên 12): 4T chỉ ra viền khung video-chữ SÁT vào 4 khung icon
bên cạnh, muốn khe hở bằng đúng khe giữa các icon (8px).
⛔ `.tl-story-card` LÀ MỘT `.row` của Flatsome — mang sẵn
`margin-left:-15px; margin-right:-15px` (cơ chế bù trừ padding cột con mặc
định của Flatsome). Vì `.tl-story-card` là item TRỰC TIẾP của lưới
`.tl-trust-row-2` (không phải nằm trong `.container` thật của Flatsome),
margin âm không có gì bù lại — nó chỉ đơn thuần làm khung TRÀN RA 15px mỗi
bên. Đo trực tiếp: khung rộng 577px trong khi cột lưới chỉ có 547px, cạnh
phải tràn tới 624 trong khi tiêu đề "CÂU CHUYỆN CỦA TÔI" ở trên dừng tại
609 — đúng phần tràn đó ăn vào khe 20px với cột icon, còn dư đúng −6px
(chồng nhẹ lên khung icon đầu tiên).
⇒ Chỉ ép `margin-right: 0` — CHỪA margin-left để không đụng độ rộng khung
video bên trong (chưa ai phàn nàn cạnh trái). Cạnh phải sau khi ép khớp
ĐÚNG với tiêu đề phía trên (609px) và để lại khe ~8-9px với khung icon đầu
tiên — bằng khe giữa các icon với nhau. */
.tl-trang-chu .page-wrapper .tl-story-card { margin-right: 0; }
/* SỬA 27/08 (phiên 9): 4T chỉ ra viền ảnh video KHÔNG chạm đáy khung, lệch
hẳn so với viền 4 khung icon bên cạnh. Đo trực tiếp: `.col` (Flatsome)
luôn mang sẵn `padding-bottom:30px` — gutter mặc định phòng khi cột PHẢI
XUỐNG DÒNG ở màn hẹp, áp cho MỌI cột kể cả khi không hề xuống dòng.
Trước đây thẻ chỉ cao 145px nên 30px này ẩn trong sai số không ai để ý;
nay thẻ đã cao bằng khung icon (SỬA phiên 8), 30px trống lộ hẳn ra dưới
ảnh. Ép về 0 — CHỈ bottom, giữ nguyên padding trái/phải 15px (đó là
khoảng cách NGANG giữa cột video và cột chữ, không đụng tới). */
.tl-trang-chu .page-wrapper .tl-story-card > .col { padding-bottom: 0; }
.tl-trang-chu .page-wrapper .tl-story-card > .col > .col-inner { height: 100%; }
.tl-trang-chu .page-wrapper .tl-story-card .tl-story-banner { height: 100%; padding-top: 0 !important; }
.tl-trang-chu .page-wrapper .tl-story-card .tl-story-banner .banner-inner { position: absolute; inset: 0; }
/* SỬA 27/08 (phiên 6): chữ cột phải "CÂU CHUYỆN CỦA TÔI" dính sát mép trên,
để trống hẳn một khoảng dưới — vì `.col-inner` cao 100% (dòng trên) nhưng
nội dung bên trong vẫn nằm theo flow thường (top). Cột này là cột DUY
NHẤT trong `.tl-story-card` không chứa `.tl-story-banner` — khoá bằng
`:last-child`, đừng đụng cột video (cột video tự lo cao 100% bằng banner
tuyệt đối, canh giữa vào đó là hỏng khung ảnh). */
.tl-trang-chu .page-wrapper .tl-story-card > .col:last-child > .col-inner {
display: flex;
align-items: center;
}
/* 4 mục "Tại sao" — icon to hơn (48px nguồn hiển thị 60px) + mỗi mục nổi
thành khối trắng bo viền, thay vì chữ tràn ngang trên nền trong suốt.
⚠ Cỡ hiển thị THẬT KHÔNG đặt ở đây — `.tl-ly-do-the .icon-box-img` và
`.tl-reason-block .icon-box-img` cùng đặc tả trùng nhau (`tl-ly-do-the`
nằm bên trong `tl-reason-block`), cùng độ đặc tả 4 lớp, nên rule nào đứng
SAU trong tệp thắng — đó là `.tl-reason-block .icon-box-img` (SỬA 26/08
phiên 2, xem dưới). Sửa cỡ icon thì sửa Ở ĐÓ, sửa ở đây là vô tác dụng. */
.tl-trang-chu .page-wrapper .tl-ly-do-the > .col-inner {
height: 100%;
position: relative;
}
/* SỬA 27/08 (phiên 8): hàng icon nay có thể cao HƠN nội dung tự nhiên của
nó (Grid kéo bằng khung video+chữ bên cột kia — xem `.tl-trust-row-2` ở
trên). Canh giữa icon+chữ theo chiều dọc để phần dư chia đều trên/dưới
trong MỖI thẻ, không dồn hết xuống đáy trông như thẻ "rỗng phần dưới". */
.tl-trang-chu .page-wrapper .tl-ly-do-the .icon-box {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
/* SỬA 27/08 (phiên 5): "bo góc bị cạnh vuông nền trắng" — panel `[col_inner]`
chỉ vẽ bo góc qua lớp phủ `.is-border` (border+radius, TRONG SUỐT ở giữa),
còn nền trắng thật (`bg_color`) nằm ở CHÍNH `.col-inner`, luôn vuông 100%
(đã đo: `border-radius:0px` trên `.col-inner`, `10px` trên `.is-border` —
HAI lớp khác nhau, layer nào cũng không đụng tới nền của layer kia). Kết
quả: 4 góc thẻ trắng lộ hình vuông bên dưới đường viền cong, chỉ mờ vì nền
`.tl-trust-row-1` gần trắng. Bo tận gốc bằng cách bo TRỰC TIẾP `.col-inner`
— bo trùng bán kính viền (10px) để đường viền và nền khớp nhau tuyệt đối. */
.tl-trang-chu .page-wrapper .tl-review-video > .col-inner,
.tl-trang-chu .page-wrapper .tl-quote-mini > .col-inner,
.tl-trang-chu .page-wrapper .tl-ly-do-the > .col-inner {
border-radius: 10px;
overflow: hidden;
}
/* Cột "Người bệnh" (hàng 1, vẫn flex-column bình thường) cao đẩy CTA xuống
đáy. Cột "Câu chuyện"/"Tại sao" (hàng 2) đã chuyển sang Ô LƯỚI thật ở
trên (`display:contents` + `grid-row`) — KHÔNG được liệt vào đây nữa, kẻo
`display:flex` ở quy tắc này (đứng SAU, cùng độ đặc tả) đè mất
`display:contents`, phá vỡ toàn bộ cách xếp lưới vừa dựng. */
.tl-trang-chu .page-wrapper .tl-review-block > .col-inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
column-gap: 28px;
height: 100%;
}
/* Tiêu đề h2 và nút CTA trải hết hàng; 5 thẻ nằm chung hàng lưới thứ 2. */
.tl-trang-chu .page-wrapper .tl-review-block > .col-inner > .text { grid-column: 1 / -1; grid-row: 1; }
/* ⛔ ĐO ĐƯỢC: chia đều trong vùng KHÔNG chỉ là `flex:1`. Lớp span của
Flatsome (`.large-3`/`.large-2`) mang `max-width: 25%`/`16.6%` — kẹp thẻ co
lại còn 74px/33px khi đổi cơ chế xếp (đã đo trên live). Phải trung hoà cả
`max-width`, `width` và đệm ngang của `.col`; khe nay do `gap` lo. */
.tl-trang-chu .page-wrapper .tl-review-video,
.tl-trang-chu .page-wrapper .tl-quote-mini {
flex: 1 1 0;
min-width: 0;
max-width: none;
width: auto;
padding: 0;
}
.tl-trang-chu .page-wrapper .tl-review-block > .col-inner > .button {
grid-column: 1 / -1;
grid-row: 3;
/* ⚠ SỬA 09/09: 4T — nút dính sát khung thẻ phía trên (đo được khe = 0px).
`margin-top: auto` là tàn dư từ thời `.col-inner` còn là flex-column
(dùng để đẩy nút xuống đáy); trong lưới, ô hàng 3 co đúng bằng chiều cao
nút nên `auto` giải ra 0 — không đẩy được gì, chỉ làm người đọc tưởng đã
có khoảng cách. Thay bằng khe thật.
⛔ Không dùng `row-gap` của lưới: nó sẽ nới CẢ khe tiêu đề ↔ hàng thẻ,
chỗ đang vừa mắt. */
margin-top: 22px;
}
/* SỬA 26/08 (phiên 2): icon 34px "quá nhỏ/mảnh" theo 4T — icon nguồn đã đổi
sang bộ 2 tông navy/cam 48px (§36), hiển thị to hơn hẳn; nhãn thu gọn cỡ
chữ + bớt đệm ngang để 4 cụm nằm ngang không vỡ dòng dài.
SỬA 27/08 (phiên 6): 4T vẫn thấy nhỏ — 44px → 68px. Icon 4 "bắt tay" trừu
tượng không rõ nghĩa (đã ghi nhận từ trước) nay thay hẳn bằng la bàn hai
tông màu (cùng file .svg, chỉ đổi nội dung, không đổi ID/đường dẫn). Cả 4
icon vẽ lại nét đậm hơn + đúng màu thương hiệu `--tl-navy`/`--tl-cam`
(trước lệch nhẹ #0B2458/#F05A24). */
.tl-trang-chu .page-wrapper .tl-reason-block .icon-box-img { max-width: 68px; margin-bottom: 8px; }
.tl-trang-chu .page-wrapper .tl-reason-block p { font-size: 11px; line-height: 1.35; padding: 0 2px; }
/* SỬA 27/08 (phiên 10): 4T chỉ ra viền ĐÁY khung video "Câu chuyện của tôi"
vẫn không thẳng hàng với viền đáy 4 khung icon bên cạnh — ĐÚNG CÙNG BỆNH đã
vá cho `.tl-story-card > .col` ở phiên 9, nhưng lần này nằm ở phía BÊN KIA:
`.tl-ly-do-the` (từng ô icon) vẫn giữ nguyên `padding-bottom: 30px` mặc định
của Flatsome. Đo trực tiếp: `.tl-ly-do-the` được Grid kéo cao đúng 191px
(khớp khung video), nhưng 30px đệm đáy đó ăn vào phần content-box, nên
`.col-inner` bên trong (đang có `height:100%` — dòng 775) chỉ còn 191−30=
161px. Viền của `.col-inner` (bo góc + nền trắng, dòng 800) vì vậy dừng cao
hơn viền khung video đúng 30px — chính là điều 4T thấy trên ảnh mẫu.
Ép về 0 — CHỈ bottom, giữ nguyên trái/phải 4px (khoảng cách NGANG giữa 4 ô
icon, không đụng tới). */
.tl-trang-chu .page-wrapper .tl-ly-do > .col { padding-left: 4px; padding-right: 4px; padding-bottom: 0; }
/* -----------------------------------------------------------------------------
11. KIẾN THỨC & CHIA SẺ — brief mục 14
[phục vụ] phần tử: Blog Posts/Button | khối: tab lọc + lưới bài viết
[trang] trang-chu — CHỈ trang chủ, tệp không nạp ở trang khác
[mockup] ⚠ brief 19/08 KHÔNG kèm ảnh tham chiếu; 4T chốt làm theo số trong brief
[lý do vượt panel] brief mục 14 — tab dạng viên thuốc và lưới 3 cột
-------------------------------------------------------------------------- */
/* SỬA 26/08 (phiên 3): 4T — 4 tab dời vào CHUNG một hàng với lưới bài viết
và thẻ CTA (trước là hàng riêng, canh giữa, dạng viên thuốc nằm ngang).
Nay là CỘT HẸP xếp DỌC 4 nút, cao bằng lưới bài viết bên cạnh nhờ
`.tl-blog-grid{align-items:stretch}` đã có sẵn từ §35. */
.tl-trang-chu .page-wrapper .tl-card-baiviet {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.tl-trang-chu .page-wrapper .tl-card-baiviet > .col {
width: 100%; max-width: none; flex: none; padding: 0;
}
.tl-trang-chu .page-wrapper .tl-card-baiviet .box-image img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--tl-r) var(--tl-r) 0 0;
}
/* ⛔ ĐOẠN TRÍCH ĐÃ TẮT Ở PANEL (`excerpt="false"`), 26/08. Flatsome gắn cho nó
class `show-on-hover` ⇒ **vô hình nhưng VẪN CHIẾM CHỖ**: 39px ở desktop và
60px ở mobile. Đó chính là "mảng trắng lớn dưới tiêu đề" — không phải ảnh
hỏng. Mọi phép kiểm ảnh đều báo ĐẠT vì ảnh có tải thật.
⚠ Bật lại `excerpt="true"` là mảng trắng quay lại NGAY, trừ khi cũng gỡ
`show-on-hover`. Và hiện đoạn trích của các bài vẫn là chữ mồi kiểm thử. */
.tl-trang-chu .page-wrapper .tl-card-baiviet .box-text { padding: 12px 14px 14px; }
.tl-trang-chu .page-wrapper .tl-card-baiviet .post-title {
font-size: 14px;
line-height: 1.4;
font-weight: 700;
color: var(--tl-navy);
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Blog Posts + Banner | khối: khối Kiến thức, brief 26/08 (3)
[trang] trang-chu
[mockup] spec/mockup/trang-chu.jpg — hàng mini-list (2 cột × 2 dòng, ảnh
vuông nhỏ bên trái tiêu đề) + thẻ CTA ảnh bên phải, không phải
3 thẻ lớn như bản cũ.
[lý do vượt panel] `.tl-card-baiviet` mặc định là lưới 3 thẻ lớn (luật
phía trên) — cần MỘT biến thể khác cho cùng shortcode, panel
không có tuỳ chọn "kiểu mini". Thêm class `.tl-card-mini` để
ghi đè riêng, không đụng vào bản 3-thẻ-lớn (dùng lại ở kien-thuc.txt).
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-card-baiviet.tl-card-mini {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
}
/* SỬA 27/08 (phiên 11): 4T chỉ ra lưới 4 bài KHÔNG chạm đáy hàng — đỉnh trùng
với thẻ CTA (cả hai đều top:0 trong `.tl-blog-grid` đã stretch),
nhưng ĐÁY thì thiếu 12px. Khác nguyên nhân với hai bản vá padding-bottom
trước đó: cột kia đã có `height:100%` xuyên suốt tới tận nội dung
(`.tl-kt-cta .col-inner` + `.tl-kt-banner`) — CỘT LƯỚI BÀI VIẾT THÌ CHƯA, nó dừng lại ở
đúng chiều cao 2 hàng thẻ tự nhiên (168px) trong khi cột được `.col`
stretch lên 180px. Vá bằng đúng cách hai cột kia đã dùng: `height:100%`
xuyên hai lớp `.col-inner` → `.tl-card-baiviet`.
⛔ Riêng lưới này phải gỡ THÊM một lớp: `.row` của Flatsome có ::before/
::after clear float; đổi `.row` sang `display:grid` biến hai pseudo đó
thành HAI Ô LƯỚI THẬT (đã đo: `grid-template-rows` ra 3 track, track thứ 3
cao 0px) — không gỡ thì 12px sẽ chia cho khe giữa hàng-2↔hàng-ma (vô hình),
không phải khe hàng-1↔hàng-2 (chỗ mắt nhìn thấy). */
/* ⚠ SỬA 03/09: 4T bỏ HẲN cột 4 nút chuyên mục (`.tl-category-tabs`) khỏi
`.tl-blog-grid`. Hàng nay còn 2 cột: lưới bài viết (span 8) + thẻ CTA
(span 4). Mọi luật của `.tl-category-tabs` đã gỡ (phần tử không còn).
⛔ Cột lưới bài viết TRƯỚC ĐÂY nhắm bằng `:nth-child(2)` — bỏ một cột là
chỉ số trượt sang thẻ CTA. Nay cột đó mang class thật `.tl-kt-list`
(đặt ở `uxb/pages/trang-chu.txt`); đừng quay lại dùng chỉ số. */
.tl-trang-chu .page-wrapper .tl-blog-grid > .tl-kt-list > .col-inner { height: 100%; }
.tl-trang-chu .page-wrapper .tl-card-baiviet.tl-card-mini {
height: 100%;
align-content: space-between;
}
.tl-trang-chu .page-wrapper .tl-card-baiviet.tl-card-mini::before,
.tl-trang-chu .page-wrapper .tl-card-baiviet.tl-card-mini::after { display: none; }
/* ⚠ SỬA 03/09: bỏ cột tab ⇒ cột lưới bài nới 6/12 → 8/12 (640 → 859px), mỗi
thẻ rộng 310 → 419px. Ảnh 72px + tiêu đề 12.5px vốn cân ở khổ cũ nay đọc ra
là thẻ RỖNG. Phóng theo đúng tỉ lệ nới (×1,35): ảnh 96px, tiêu đề 14px. */
.tl-trang-chu .page-wrapper .tl-card-mini .box {
display: grid;
grid-template-columns: 96px 1fr;
column-gap: 16px;
align-items: center;
}
/* ⛔ ĐỪNG dựa vào cơ chế "padding-top %" của `.image-cover` bên trong
`display:grid` — đo thật: `.box-image` co về 0×0 (padding-top tính theo %
BỀ RỘNG mà bề rộng lại phụ thuộc chính nó trong ngữ cảnh grid, vòng lặp
không giải được nên trình duyệt bỏ qua, ra 0). Cùng họ lỗi với §31.1
(thumbnail phụ thuộc flatsome.css) — khắc bằng cách TỰ ĐỨNG được: kích
thước CỐ ĐỊNH, không qua `.image-cover`. */
.tl-trang-chu .page-wrapper .tl-card-mini .box-image {
width: 96px;
height: 96px;
position: relative;
overflow: hidden;
}
.tl-trang-chu .page-wrapper .tl-card-mini .box-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--tl-r);
}
.tl-trang-chu .page-wrapper .tl-card-mini .box-text { padding: 0; text-align: left; }
.tl-trang-chu .page-wrapper .tl-card-mini .post-title {
font-size: 14px;
line-height: 1.4;
-webkit-line-clamp: 2;
}
/* Gạch `.is-divider` 30×2px Flatsome tự chèn dưới mỗi tiêu đề — ở thẻ mini
(không có đoạn trích) nó treo lơ lửng giữa khoảng trống, đọc ra như lỗi. */
.tl-trang-chu .page-wrapper .tl-card-mini .is-divider { display: none; }
/* ⚠ SỬA 03/09: 4T — bấm dấu `+` và dòng "XEM THÊM TẤT CẢ BÀI VIẾT" không ăn.
Nguyên nhân đo được: `[ux_banner link=]` render một lớp phủ `a.fill
.banner-link` trải kín banner, NHƯNG lớp chữ (`.banner-layers > .text`) có
`z-index:10` nằm ĐÈ LÊN nó ⇒ `elementFromPoint` tại tâm icon/chữ trả về
`I.icon-plus`/`P`, không lọt tới thẻ `a` (chỉ bấm vào VÙNG NỀN mới ăn).
⛔ Không vá bằng `pointer-events:none` trên lớp chữ — như thế chữ vẫn không
phải link (không focus được bằng bàn phím, không có con trỏ tay). Sửa tận
gốc: bọc `` quanh icon và dòng chữ trong nội dung
banner (whitelist III.2 cho phép ``), giữ nguyên link phủ toàn banner.
CSS chỉ trung hoà màu link mặc định và nới vùng chạm. */
.tl-trang-chu .page-wrapper .tl-kt-banner .text a {
display: inline-block;
color: inherit;
text-decoration: none;
}
.tl-trang-chu .page-wrapper .tl-kt-banner .text a:hover,
.tl-trang-chu .page-wrapper .tl-kt-banner .text a:focus-visible { color: inherit; }
/* Tiêu đề NGẮN chỉ tràn 1 dòng thì vùng chạm của link co theo, có thể chỉ
còn ~18px cao — dưới sàn 44px. Ép link con LUÔN đủ cao bất kể chữ dài hay
ngắn, không đổi cách hiển thị (line-clamp vẫn 2 dòng khi chữ dài). */
.tl-trang-chu .page-wrapper .tl-card-mini .post-title a {
display: flex;
align-items: center;
min-height: 44px;
}
/* Thẻ CTA ảnh bên phải — lấp đầy chiều cao lưới mini bên trái.
⛔ ĐỪNG đặt `height="100%"` ở panel banner — cơ chế height của Flatsome
là "padding-top hack" (dùng cho TỈ LỆ ảnh cố định), nên height="100%" ra
`padding-top:100%` = HÌNH VUÔNG theo bề NGANG của chính nó, không phải
"cao bằng cột cha". Kết quả thật: một khối xanh vuông to, chữ/icon bị đẩy
lệch mất dạng. Panel đặt `height="260px"` (một số cụ thể) để cơ chế đó ra
đúng nghĩa "cao 260px"; còn LẤP ĐẦY CỘT thì làm bằng CSS tuyệt đối ở đây —
ghi đè `padding-top` về 0 rồi absolute-fill `.banner-inner`. */
/* Flatsome KHÔNG mặc định `align-items:stretch` cho `.row` — thiếu dòng này
thì cột phải chỉ cao bằng nội dung CỦA CHÍNH NÓ (rỗng ⇒ ~30px), không cao
theo cột trái (lưới mini 2 hàng ~160px), dù CSS bên dưới có ép height:100%
cỡ nào cũng vô ích vì .row (gốc chuỗi %) không hề cao hơn nội dung nó. */
/* ⛔ ĐỪNG đặt `height:100%` lên chính `.tl-kt-cta` (.col) — nó là flex ITEM
của `.row` mà `.row` cao theo NỘI DUNG (không có chiều cao cố định), nên
`100%` không giải được và trình duyệt coi như một giá trị CÓ (dù nhỏ),
VÔ HIỆU HOÁ tư cách "auto" cần để `align-items:stretch` kéo dài nó — đo
thật: cột trái 198px, cột phải chỉ 60px dù đã bật stretch. Bỏ hẳn
height:100% ở CHÍNH `.col`, để nó ở "auto" thì stretch mới kéo được;
`.col-inner` bên trong lúc đó mới nhận `height:100%` HỢP LỆ (100% của một
`.col` đã có chiều cao CỤ THỂ sau khi bị kéo dài). */
.tl-trang-chu .page-wrapper .tl-blog-grid { align-items: stretch; }
.tl-trang-chu .page-wrapper .tl-kt-cta .col-inner { height: 100%; }
.tl-trang-chu .page-wrapper .tl-kt-banner { height: 100% !important; padding-top: 0 !important; }
.tl-trang-chu .page-wrapper .tl-kt-banner .banner-inner { position: absolute; inset: 0; }
.tl-trang-chu .page-wrapper .tl-kt-cta .text-box-content { color: #fff; text-align: center; }
.tl-trang-chu .page-wrapper .tl-kt-cta h3 { margin-bottom: 8px; color: #fff; }
.tl-trang-chu .page-wrapper .tl-kt-cta h3 .icon-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 2px solid #fff;
border-radius: 50%;
font-size: 16px;
}
.tl-trang-chu .page-wrapper .tl-kt-cta p {
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.5;
color: #fff;
margin: 0;
}
/* Tab đầu tô đậm (`style="solid"`) — panel đã lo màu/nền, CSS chỉ chỉnh cỡ
cho khớp các tab viền outline bên cạnh (nút solid mặc định cao hơn). */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Header Builder — nút CTA trên thanh header
[trang] trang-chu
[mockup] ⚠ brief KHÔNG kèm ảnh tham chiếu
[lý do vượt panel] Bảng màu mới chỉ áp cho NỘI DUNG (bọc trong .page-wrapper),
nên nút CTA ở header giữ #CE4C09 của toàn site trong khi nút trong
nội dung là #F05A24 — HAI TÔNG CAM TRÊN CÙNG MỘT MÀN HÌNH.
⚠ Đánh đổi: header trang chủ nay khác header trang trong. Hai màu cạnh nhau
cùng màn hình dễ thấy hơn nhiều so với khác biệt giữa hai trang.
-------------------------------------------------------------------------- */
.tl-trang-chu #header .button.primary:not(.is-outline) {
/* ⚠ Chữ TRẮNG nằm trên nền này ⇒ nền phải đạt 4,5:1. #F05A24 chỉ 3,39:1.
#C4400A cùng hue, 5,14:1 — và nó chỉ chênh #CE4C09 của header các trang
khác một chút, nên hai header vẫn nhìn như cùng một hệ. */
background-color: #c4400a;
border-color: #f05a24;
}
.tl-trang-chu #header .button.primary:not(.is-outline):hover {
background-color: #ae3908; /* #D94C18 với chữ trắng chỉ 4,20:1 */
border-color: #d94c18;
}
} /* ← hết @media (min-width: 850px) */
/* =============================================================================
MOBILE + TABLET — ≤849px. Dựng 19/08/2026 theo brief mobile.
⚠ Brief đề nghị mốc 991 / 767 / 480. Dự án CHỈ cho 549 / 849 / 850
(III.4.3-3; mốc lạ đẻ ra vùng mà rule hai bên áp chéo). Ánh xạ:
brief 991 + 767 → ≤849 · brief 480 → ≤549
Phủ đủ 320 · 360 · 375 · 390 · 414 · 430 · 480 · 768.
⛔ HAI QUYẾT ĐỊNH CŨ BỊ ĐẢO NGƯỢC — 4T chốt 19/08 sau khi được trình bày:
· QĐ-M2 "trang chủ giữ H1 22px" → nay 27–31px theo brief.
· QĐ-M3 "CTA đủ nhãn trên header, header 70px" → nay header 62px,
CTA rời thanh header vào drawer (đổi ở Customizer, áp CẢ SITE).
============================================================================= */
@media (max-width: 849px) {
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Section | khối: lề ngang và nhịp dọc
[trang] trang-chu
[mockup] ⚠ brief mobile KHÔNG kèm ảnh tham chiếu
[lý do vượt panel] Panel Section có padding riêng cho mobile nhưng chỉ đặt
được chiều DỌC; lề NGANG do Flatsome ấn định 30px, không có ô nào.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-section { padding-left: 16px; padding-right: 16px; }
.tl-trang-chu .page-wrapper .tl-section h2 { margin-bottom: 16px; }
.tl-trang-chu .page-wrapper .tl-section .row + .row { margin-top: 16px; }
/* ⛔ Nút "XEM VIDEO QUY TRÌNH" bị CẮT CHỮ trên mobile — đo thật: cột chữ của
row_inner (span 7/12) chỉ ~150px ở 375px màn hình (video vẫn giữ tỉ lệ
5:7 side-by-side, không stack dọc), mà nút "white-space:nowrap" mặc định
của Flatsome cần ~180px+ cho chữ "XEM VIDEO QUY TRÌNH" ở 14px. Cho phép
xuống dòng thay vì ép hẹp video/chữ lại (video quá hẹp thì mất tác dụng). */
.tl-trang-chu .page-wrapper .tl-media-main .tl-btn-navy.button {
white-space: nowrap;
height: auto;
min-height: 36px;
padding: 0 10px;
font-size: 9.5px;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text/heading | khối: thang chữ mobile
[trang] trang-chu
[lý do vượt panel] ⛔ H1 phải đặt TƯỜNG MINH, đừng trông vào panel
`font_size__sm`: đo 19/08 thấy nó in `#text-x{font-size:1.25rem}`
KHÔNG bó trong media query nào ⇒ wrapper 20px ở MỌI khổ, rồi h1
nhân theo thang em của Flatsome (1,4em ≤549 ra 28px, nhưng 1,7em
ở 550–849 ra **34px** chiếm 66% màn hình tablet).
Clamp cho đúng dải brief mà không phụ thuộc thang em:
320px→27 · 390px→29 · ≥414px→31.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper { font-size: 14px; line-height: 1.6; }
.tl-trang-chu .page-wrapper h2 { font-size: 21px; line-height: 1.25; }
.tl-trang-chu .page-wrapper .tl-trust-section h2 { font-size: 19px; }
.tl-trang-chu .page-wrapper h3 { font-size: 17px; line-height: 1.35; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Button | khối: vùng chạm mọi nút
[trang] trang-chu
[lý do vượt panel] Panel Button không tách kích thước theo thiết bị.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .button {
min-height: 44px;
height: auto;
padding: 0 18px;
font-size: 14px;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column/Image/Text | khối: hero
[trang] trang-chu
[lý do vượt panel] Brief xin thứ tự Tiêu đề → Mô tả → CTA → Ảnh, nhưng trong
DOM thẻ CTA và nút nằm SAU ảnh (cùng cột với ảnh ở desktop).
Panel không có ô đổi thứ tự theo thiết bị.
⚠ `order` tách thứ tự NHÌN khỏi thứ tự DOM. Ở đây chỉ đẩy ẢNH xuống dưới
khối CTA — ảnh là minh hoạ, không mang thông tin đọc, nên trình đọc màn
hình gặp nó sau vẫn không mất mạch. Đừng dùng cách này cho khối CHỮ.
-------------------------------------------------------------------------- */
/* Thẻ CTA nay là khối thường nằm TRƯỚC ảnh ⇒ gỡ hết phần kéo-đè của desktop */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Row/Column | khối: section gộp Review + Story + Why
[trang] trang-chu
[lý do vượt panel] Lưới 3 cột desktop phải rã hoàn toàn; panel không có ô
nào cho khoảng cách giữa các khối sau khi dồn.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-trust-section > .section-content > .row > .col + .col {
margin-top: 24px;
}
.tl-trang-chu .page-wrapper .tl-quote-mini p { font-size: 13px; line-height: 1.5; }
/* SỬA 27/08 (phiên 6): đồng bộ tỉ lệ phóng to với bản desktop (68px) — giữ
nguyên tỉ lệ mobile/desktop cũ (30/44 ≈ 0,68) → 30px → 46px. */
.tl-trang-chu .page-wrapper .tl-reason-block .icon-box-img { max-width: 46px; }
.tl-trang-chu .page-wrapper .tl-reason-block p { font-size: 13px; line-height: 1.4; }
/* SỬA 27/08 (phiên 4): hộp "Người bệnh" nay có thêm 24px đệm ngang riêng
(`.tl-trust-row-1`, cộng dồn với 28px đệm của section) nên nút dài nhất
"XEM THÊM CÂU CHUYỆN NGƯỜI BỆNH" hết vừa — đo trực tiếp scrollWidth 272px
so với khung 265px, lệch 7px, chữ bị cắt phía dưới viền trái. 13px đo lại
còn 262px, đủ khoảng trống. Nút "XEM CHI TIẾT CÂU CHUYỆN" ngắn hơn, không
cần đổi.
⚠ Selector PHẢI là `> .col-inner > .button` (con TRỰC TIẾP) — `.tl-review-
block .button` (hậu duệ bất kỳ) vô tình vợt luôn 2 nút play tròn rỗng chữ
trong `.tl-review-video` (`[video_button]` nằm sâu bên trong), khiến
audit-mobile báo "2 nút gãy" giả — đã bắt bằng cách chạy lại QA sau khi vá. */
.tl-trang-chu .page-wrapper .tl-review-block > .col-inner > .button { font-size: 13px; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Button | khối: hàng tab lọc chuyên mục
[trang] trang-chu
[lý do vượt panel] Đo trước: 4 tab vỡ thành **4 DÒNG** ở khổ 320–430px.
Panel không có ô nào cho cuộn ngang.
⚠ `overflow-x` đặt trên CHÍNH hàng tab, không đặt trên body — che lỗi tràn
bằng overflow toàn trang là đúng thứ brief mục 22 cấm.
-------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Blog Posts | khối: thẻ bài viết
[trang] trang-chu
[lý do vượt panel] Brief xin bố cục ẢNH TRÁI | CHỮ PHẢI để 3 bài không thành
3 khối cao ngất. Panel [blog_posts] không có kiểu này.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-card-baiviet .box {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
align-items: start;
padding: 10px;
}
.tl-trang-chu .page-wrapper .tl-card-baiviet .box-image { width: 110px; }
.tl-trang-chu .page-wrapper .tl-card-baiviet .box-image img {
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--tl-r);
}
.tl-trang-chu .page-wrapper .tl-card-baiviet .box-text { padding: 0; text-align: left; }
.tl-trang-chu .page-wrapper .tl-card-baiviet .post-title { font-size: 14px; line-height: 1.4; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column | khối: đệm đáy cột — toàn trang
[trang] trang-chu
[lý do vượt panel] `padding-bottom: 30px` là mặc định của MỌI `.col` trong
Flatsome; panel Column không có ô đổi nó theo thiết bị.
Đo 20/08 ở 375px: trang có **36 cột × 30px = 1.080px** đệm đáy — 15% chiều
dài cả trang. Ở desktop khoảng đó chia đều cho nhiều cột nằm cạnh nhau nên
không thấy; xuống mobile mọi thứ dồn MỘT cột nên nó cộng dồn theo chiều dọc.
⚠ KHÔNG đặt 0: khi dồn dọc thì chính đệm này là khe ngăn giữa hai khối. 12px
đủ tách mà không phí; cột CUỐI mỗi hàng thì bỏ hẳn vì đã có khe của `.row`.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .section .col { padding-bottom: 12px; }
.tl-trang-chu .page-wrapper .section .row > .col:last-child { padding-bottom: 0; }
} /* ← hết @media (max-width: 849px) */
/* =============================================================================
MÁY NHỎ — ≤549px (brief gọi là 480px)
============================================================================= */
@media (max-width: 549px) {
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column | khối: 5 thẻ dịch vụ — bố cục ICON | CHỮ
[trang] trang-chu
[lý do vượt panel] Panel không đổi được cách xếp bên trong cột.
⚠ CHỈ ở ≤549, nơi thẻ chiếm TRỌN bề ngang. Từ 550–849 Flatsome xếp thẻ
3 cột (medium-4), cột chữ chỉ còn ~180px — bố cục icon-trái ở đó CHẬT
hơn bố cục dọc, nên để nguyên.
Đo trước: mỗi thẻ cao 302–363px × 5 ⇒ riêng khối này hơn 1.500px.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-service-grid > .col > .col-inner {
display: grid;
grid-template-columns: 46px 1fr;
column-gap: 12px;
align-items: start;
min-height: 0;
padding: 15px 16px;
}
.tl-trang-chu .page-wrapper .tl-service-grid .icon-box {
grid-column: 1;
grid-row: 1 / span 2;
margin: 0;
}
.tl-trang-chu .page-wrapper .tl-service-grid .icon-box-img { max-width: 38px; }
.tl-trang-chu .page-wrapper .tl-service-grid > .col > .col-inner > .text { grid-column: 2; }
.tl-trang-chu .page-wrapper .tl-service-grid h3 { font-size: 14px; margin-bottom: 6px; }
.tl-trang-chu .page-wrapper .tl-service-grid .tl-cham-tron p { font-size: 13px; line-height: 1.5; }
/* Thẻ bài viết và ảnh hero co thêm một nấc ở máy nhỏ */
.tl-trang-chu .page-wrapper .tl-card-baiviet .box { grid-template-columns: 96px 1fr; }
.tl-trang-chu .page-wrapper .tl-card-baiviet .box-image { width: 96px; }
} /* ← hết @media (max-width: 549px) */
/* =============================================================================
NHIỆM VỤ RIÊNG 28/08/2026 — TỐI ƯU MOBILE CHỈ TRANG CHỦ (≤767px)
Phạm vi CHỐT: KHÔNG đụng header/footer (phiên khác), KHÔNG đụng hero
`.tl-hero` (phiên 3 vừa thay ảnh). Mọi rule dưới đây nằm TRONG
`@media(max-width:767px)`, không ảnh hưởng desktop.
Nghiệm thu live 360/390/430px theo yêu cầu 4T — xem chi tiết từng cụm.
============================================================================= */
@media (max-width: 767px) {
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Section | khối: nhịp dọc toàn trang
[trang] trang-chu
[lý do vượt panel] Panel Section chỉ có MỘT mức "padding__sm" (28px) áp
cho mọi khổ ≤549 lẫn 550-849 — không tách riêng được mốc 32px
4T yêu cầu cho dải điện thoại.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-companion-section,
.tl-trang-chu .page-wrapper .tl-media-section,
.tl-trang-chu .page-wrapper .tl-trust-section,
.tl-trang-chu .page-wrapper .tl-knowledge-section {
padding-top: 32px;
padding-bottom: 32px;
}
/* "5 bước": tiêu đề section cách nội dung 20px (spec riêng mục này, khác mức
16px chung của `.tl-section h2` ở khối ≤849px phía trên). */
.tl-trang-chu .page-wrapper .tl-companion-section h2 { margin-bottom: 20px; }
/* "5 bước": icon đang 38px (đặt ở khối ≤549 phía trên) — 4T yêu cầu 28-32px.
Đặt Ở ĐÂY (sau khối ≤549 trong tệp, cùng độ đặc tả) để LUÔN thắng ở mọi
khổ ≤767, khỏi phải sửa hai chỗ khi đổi số. */
.tl-trang-chu .page-wrapper .tl-service-grid .icon-box-img { max-width: 30px; }
/* "5 bước": khoảng cách giữa 5 thẻ = 16px (đè `padding-bottom:12px` chung
của mọi `.col` trong section, khối ≤849px phía trên). */
.tl-trang-chu .page-wrapper .tl-service-grid > .col { padding-bottom: 16px; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column/Image | khối: 5 ảnh minh hoạ "video quy trình"
[trang] trang-chu
[lý do vượt panel] Panel Column không có ô đổi lưới theo thiết bị.
⛔ SỬA LẦN 2 (28/08, sau khi 4T nghiệm thu live 390px): bản ĐẦU cho 1 cột
full-width — kéo TOÀN TRANG cao thêm ~1.400px (7.1k thay vì 5.7k), đẩy
phần lớn nội dung xa khỏi màn hình đầu. Ảnh dùng `loading="lazy"` mặc
định của WordPress — cuộn thật (không đợi ép tải như script kiểm) tới
những item nằm quá xa thì ảnh CHƯA TẢI XONG, lộ nền cam mặc định của
Flatsome cho MỌI banner (`rgb(206,76,9)`, đo trực tiếp trên `.tl-kt-
banner` — không phải lỗi ảnh, là màu NỀN LÓT của Flatsome trước khi ảnh
phủ lên) — đúng hiện tượng "khối cam rỗng" 4T mô tả. Về lại lưới **2
cột** (đúng yêu cầu lần này) để cắt PHÂN NỬA chiều cao khối này, kéo mọi
thứ phía dưới lên gần màn hình đầu hơn.
⚠ Đổi cách dựng tỉ lệ ảnh: bỏ `height:100%` trên `![]()
` (phụ thuộc chiều
cao phần tử cha `.img-inner` mà cha đó KHÔNG có chiều cao tường minh
ngoài `@media(min-width:850px)` — vòng lặp phụ thuộc, giòn). Chuyển
sang khuôn bo góc chuẩn: `.img-inner` có `aspect-ratio` + `position:
relative`, `![]()
` phủ `position:absolute;inset:0`. Cách này KHÔNG phụ
thuộc chiều cao phần tử cha, không bao giờ co về 0. */
/* ⚠ KHÔNG chuyển `.tl-media-row` sang `display:grid` — hàng này còn chứa
`.tl-media-main` (khối video quy trình, span="3"→full-width mobile) làm
ANH EM CÙNG CẤP với 5 `.tl-media-chip`, grid trên row sẽ ép LUÔN cả khối
đó vào lưới 2 cột. Giữ `.tl-media-row` là flex-wrap sẵn có của Flatsome.
⛔ ĐÃ THỬ `flex-basis:50%` + `column-gap:12px` riêng, KẾT QUẢ HỎNG: đo
trực tiếp — mỗi thẻ vẫn đúng 179px (=50% của 358px, khớp) nhưng CHỈ 1
thẻ mỗi hàng, thẻ sau tự xuống dòng! Khác GRID (`fr` tự trừ gap trước
khi chia), flexbox KHÔNG tự trừ `gap` khỏi `%` — tổng 2 thẻ + gap =
179+12+179 = 370px > 358px (bề ngang hàng), vượt 12px nên flex-wrap
đẩy thẻ 2 xuống dòng mới. Phải tự trừ bằng `calc()`.
`gap` vẫn giữ để đặt khoảng cách thật giữa mọi phần tử con của
`.tl-media-row` (kể cả giữa `.tl-media-main` và hàng thẻ đầu) — chỉ riêng
BỀ NGANG của từng thẻ phải tự trừ nửa gap bằng `calc()` như trên. */
.tl-trang-chu .page-wrapper .tl-media-row { gap: 12px; }
.tl-trang-chu .page-wrapper .tl-media-chip {
flex: 0 0 calc(50% - 6px);
max-width: calc(50% - 6px);
margin-bottom: 0;
}
.tl-trang-chu .page-wrapper .tl-media-chip .img-inner {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--tl-r);
background-color: var(--tl-xam-nen);
}
.tl-trang-chu .page-wrapper .tl-media-chip img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Banner (video) | khối: video quy trình + 2 video "Người
bệnh" + video "Câu chuyện"
[trang] trang-chu
[lý do vượt panel] Panel `[ux_banner] height="90px"/"120px"` là SỐ PX CỐ
ĐỊNH, không tự đổi theo bề ngang.
⛔ SỬA LẦN 3 (nghiệm thu 390px lần 3): bản `aspect-ratio:16/9` (lần 2) vẫn
còn quá cao trên mạng thật — 4T vẫn thấy "khung video xám rỗng" ở cả 3
khối này khi ảnh tải chậm hơn tốc độ cuộn thật của người dùng (script
kiểm tự ép tải hết trước khi đo nên không bao giờ bắt được độ trễ này).
Gốc rễ THẬT tìm được qua đo trực tiếp: cả 3 `[ux_banner bg="…"]` đang
truyền `bg_size="cover"` — đây là tên thuộc tính Flatsome dùng để CHỌN
CỠ ẢNH ĐÃ ĐĂNG KÝ trong WordPress (như `image_size` của `[ux_image]`),
KHÔNG PHẢI thuộc tính CSS `background-size`; "cover" không khớp cỡ nào
nên Flatsome fallback sang ẢNH GỐC ĐẦY ĐỦ (1200-1280px, đo được tới
~634KB dồn cho 5 banner) thay vì cỡ nhỏ máy chủ đã có sẵn — do đó ảnh
tải chậm hẳn trên mạng di động thật dù không hề "lỗi". Đã sửa TẬN GỐC
trong `trang-chu.txt`: đổi `bg_size="cover"` → `bg_size="large"` (đúng
giá trị MẶC ĐỊNH có sẵn của chính shortcode này) cho cả 5 banner không
phải hero — cắt còn ≤1024px/cạnh, KHÔNG đổi cách hiển thị phủ khung vì
hiệu ứng "cover" thật ra do CSS `.banner-bg img{object-fit:cover}` của
theme lo, tách biệt hoàn toàn khỏi `bg_size` (đọc thẳng mã nguồn
`ux_banner.php` + `commons/background-image.php` để xác nhận, không
đoán). Việc này giảm tải THẬT cho cả desktop lẫn mobile, không ảnh
hưởng hình ảnh hiển thị ở khổ nào.
⚠ Dù đã nhẹ tải hơn, 4T yêu cầu RÕ: không dùng placeholder cao/lớn cho
phần tử chưa chắc kịp tải trên mạng thật. Chọn phương án ô vuông NHỎ CỐ
ĐỊNH (không phải bỏ hẳn khung — vẫn giữ ảnh thật khi tải xong, chỉ
không bao giờ chiếm diện tích lớn dù đang tải hay lỡ tải chậm): quy
trình 88×88px (khối chính, cạnh nút "XEM VIDEO QUY TRÌNH"), 2 video
"Người bệnh" + video "Câu chuyện" 56×56px (khối phụ, nằm trên caption/
nút). Cả hai đều dưới ngưỡng "box >100×70px không nội dung" 4T đặt ra,
ở MỌI trạng thái tải — không phụ thuộc ảnh đã tải xong hay chưa. */
.tl-trang-chu .page-wrapper .tl-process-video,
.tl-trang-chu .page-wrapper .tl-review-banner,
.tl-trang-chu .page-wrapper .tl-story-banner {
padding-top: 0 !important;
aspect-ratio: 1 / 1;
background-color: var(--tl-xam-nen);
margin-left: auto;
margin-right: auto;
flex: 0 0 auto;
}
.tl-trang-chu .page-wrapper .tl-process-video {
height: 88px !important;
width: 88px !important;
max-width: 88px;
}
.tl-trang-chu .page-wrapper .tl-review-banner,
.tl-trang-chu .page-wrapper .tl-story-banner {
height: 56px !important;
width: 56px !important;
max-width: 56px;
}
/* Icon play (`[video_button]`) đặt size="70"/"55" bên panel — co container
xuống 88/56px thì icon áp sát viền là DỤNG Ý (khối nhỏ đọc như "nút phát",
không phải "ảnh bìa"), không phải tràn lỗi. */
/* ⛔ SỬA LẦN 2 rồi LẦN 3: giữ NGUYÊN 2 cột (span__sm="6" mặc định của
Flatsome) cho 2 thẻ "Người bệnh" — chỉ khung ảnh co nhỏ ở trên, khoảng
cách dọc giữa 2 hàng thẻ vẫn cần giữ. */
.tl-trang-chu .page-wrapper .tl-review-video { margin-bottom: 12px; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column | khối: 4 thẻ "Tại sao chọn đồng hành"
[trang] trang-chu
[lý do vượt panel] ⛔ SỬA LẦN 2 (28/08): cùng lý do trên — về lại lưới
2×2 mặc định (span__sm="6") để giảm chiều cao, thay vì ép 1 cột.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-ly-do-the {
margin-bottom: 12px;
}
/* 2×2: hàng CUỐI là 2 thẻ cuối cùng, không phải chỉ mỗi thẻ cuối (`:last-
child`) — nếu chỉ bỏ margin ở thẻ 4, thẻ 3 (cùng hàng) vẫn dư 12px lệch. */
.tl-trang-chu .page-wrapper .tl-ly-do-the:nth-last-child(-n+2) { margin-bottom: 0; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Button | khối: tab lọc chuyên mục — "Kiến thức"
[trang] trang-chu
[lý do vượt panel] Khối ≤849px phía trên dựng rail cuộn ngang
(overflow-x:auto) — ĐÚNG để tránh tràn trang, nhưng 4T chỉ ra
CHỈ rail thật sự cần swipe mới nên làm vậy; tab lọc chỉ có 4
nút, gói gọn vừa 2 hàng x 2 cột, không cần bắt cuộn.
⚠ Đổi HẲN từ rail sang chip 2 hàng: bỏ `overflow-x`, cho `flex-wrap:wrap`,
mỗi nút chiếm ~50% bề ngang.
⚠ Đo `scrollWidth` thật của 2 nhãn dài nhất ("CÂU CHUYỆN NGƯỜI BỆNH" ·
"ĐỜI SỐNG TẠI SINGAPORE") ở cỡ chữ 12px, `white-space:nowrap`: vừa đúng
một dòng ở 390/430px (ô ~175-195px) nhưng THIẾU đúng 5px ở 360px (ô chỉ
160px, chữ cần 165px) — `text-overflow:ellipsis` sẽ cắt mất vài ký tự
cuối ở khổ hẹp nhất. Cho phép xuống dòng (`white-space:normal`) thay vì
ellipsis: nhãn dài xuống 2 dòng vẫn đọc trọn vẹn ở MỌI khổ, không cần vá
riêng cho từng breakpoint. */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column | khối: gutter 16px cho hàng tab/bài viết/CTA
[trang] trang-chu
[lý do vượt panel] `.col` mặc định Flatsome mang 15px đệm trái/phải riêng
— cộng với 16px đệm của section thành 31px, rộng hơn hẳn 16px
gutter 4T yêu cầu cho khối Kiến thức khi đã xếp dọc 1 cột.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-blog-grid > .col {
padding-left: 0;
padding-right: 0;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Banner CTA | khối: "Xem thêm tất cả bài viết" cuối
Knowledge
[trang] trang-chu
[lý do vượt panel] Panel đặt `height="260px"` cố định — đúng cho khối
LẤP ĐẦY CỘT trên desktop (xem chú thích dòng ~966 trong khối
`@media(min-width:850px)`, KHÔNG áp dụng dưới 850px), nhưng
trên mobile nó biến 260px thành một khối rất cao, đúng loại
"khoảng trống lớn khi ảnh chưa tải/lỗi" 4T mô tả là "block
nâu lớn không nội dung".
⛔ SỬA LẦN 3: `bg_size` của banner này cũng đã vá tận gốc (xem chú thích
cụm video phía trên — cùng lỗi `bg_size="cover"`), nhưng 4T yêu cầu RÕ
bỏ HẲN phụ thuộc ảnh cho khối này trên mobile, không chỉ giảm tải:
chuyển thành thẻ CTA ĐẶC MÀU, ẩn hẳn lớp ảnh nền (`.banner-bg`), co
cao xuống 96px (đủ cho icon "+" và 2 dòng chữ, không còn là khối chờ
ảnh). Màu đặc lấy đúng giá trị nền của `bg_overlay` đang đặt trong
panel (`rgba(7,26,77,.55)` phủ lên ảnh) — bỏ ảnh mà vẫn giữ màu navy
thương hiệu, không rơi về màu cam mặc định của Flatsome. */
.tl-trang-chu .page-wrapper .tl-kt-banner {
height: 96px !important;
padding-top: 0 !important;
background-color: rgb(7, 26, 77);
}
.tl-trang-chu .page-wrapper .tl-kt-banner .banner-bg {
display: none;
}
.tl-trang-chu .page-wrapper .tl-kt-cta h3 {
margin-bottom: 4px;
}
.tl-trang-chu .page-wrapper .tl-kt-cta h3 .icon-plus {
width: 28px;
height: 28px;
font-size: 13px;
}
.tl-trang-chu .page-wrapper .tl-kt-cta p {
font-size: 11px;
line-height: 1.3;
}
} /* ← hết @media (max-width: 767px), NHIỆM VỤ RIÊNG 28/08/2026 */
/* =============================================================================
BỔ SUNG 26/08/2026 — bám ảnh mẫu Toàn Lộc Singapore
Ảnh hero và ảnh tư vấn mới đã nạp vào Thư viện (id 188, 189).
============================================================================= */
/* SỬA 27/08 (phiên 10): section "CTA cuối" (.tl-cta-cuoi, banner navy "BẠN
CẦN THÊM THÔNG TIN...") đã bị 4T yêu cầu GỠ HẲN khỏi trang chủ — xem
`uxb/pages/trang-chu.txt`. Bộ quy tắc từng phục vụ nó xoá theo, tránh để
CSS chết không ai còn dùng. */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text | khối: nhãn "CÂU CHUYỆN MINH HOẠ" (.tl-nhan-minhhoa)
[trang] trang-chu
[mockup] ⚠ brief 26/08 §4 yêu cầu ghi rõ trích dẫn là MINH HOẠ
[lý do vượt panel] Nhãn nhỏ chữ hoa giãn ký tự — panel Text không có ô nào.
⚠ Nhãn này KHÔNG phải trang trí. Ba trích dẫn phía trên trước đây gán danh
tính ("– Chú N.", "– Cô K.", "– Anh P.") và hai video ghi tên người bệnh,
đọc như lời chứng thực THẬT. Đã gỡ danh tính; nhãn này nói rõ phần còn lại
là minh hoạ biên tập, đúng yêu cầu brief §4.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper .tl-nhan-minhhoa p {
margin: 4px 0 10px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tl-muted);
}
@media (min-width: 850px) {
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text | khối: H1 hero
[trang] trang-chu
[mockup] ⚠ brief 26/08 §2 — H1 ba cụm chữ hoa
[lý do vượt panel] Cỡ H1 chưa đặt trong Customizer (CLAUDE.md 10.3).
⚠ Ở 1366px H1 35px trong cột 50% xuống **7 dòng**, đẩy đoạn dẫn và thẻ CTA
xuống thấp. 32px giữ đúng ba cụm mà bớt được một dòng.
-------------------------------------------------------------------------- */
/* 26/08 — MẬT ĐỘ HERO: 525px → 452px ở 1366.
⚠ Chiều cao hero KHÔNG do H1 quyết định, dù H1 chiếm 325px. Row là grid
`align-items: stretch`, nên chiều cao hàng = cột CAO NHẤT = cột ẢNH (437px,
do tỉ lệ 16:9 của ảnh ở bề rộng ~748px). Cột chữ chỉ 417px.
→ Đo thật: hạ H1 32→30px thì hero ĐỨNG YÊN 525px. Phải chặn ảnh mới bớt được.
28px làm H1 rớt từ 9 xuống 7 dòng (325→225px) — bước nhảy nằm giữa 29 và 28. */
/* ⛔ ĐỪNG đặt đệm hero bằng CSS class: Flatsome in ra `#section_xxx{padding:…}`
— ID thắng class, luật ở đây CHẾT ÂM THẦM (đo ra vẫn 32px trong khi CSS ghi
26px). Đệm hero đặt ở PANEL: `[section … padding="26px"]`. */
/* `object-position` phải kéo lên trên: cắt 16:9 xuống 2.08:1 mà để `center` là
mất đỉnh đầu. 28% giữ trọn khuôn mặt — đã soi ảnh chụp ở 340/360/380/400. */
} /* ← hết @media (min-width: 850px) */
/* =============================================================================
NHIỆM VỤ RIÊNG 28/08/2026 (vòng 2) — TRANG CHỦ MOBILE THẬT, ≤549px
[phạm vi CHỐT theo yêu cầu 4T]
· CHỈ trong @media (max-width:549px) — không đụng header/footer, không
đụng bất kỳ rule nào ở ≥850px (khối ngay trên vẫn để nguyên, trống).
· Khối 550–849px (≤767/≤849 phía trên, của phiên "NHIỆM VỤ RIÊNG 28/08"
trước) GIỮ NGUYÊN — không sửa, không xoá. Khối này chỉ THẮNG ở ≤549 vì
nằm SAU trong tệp (cùng độ đặc tả selector thì rule sau thắng).
[mockup] BẮT BUỘC — mobile-mockup-trang-chu-v2.png (4T gửi 28/08, vòng 2).
⚠ Bản trước (≤767, phiên đầu 28/08) ưu tiên "nhẹ tải, khung ảnh cố định
nhỏ" — ĐÚNG cho mục tiêu lúc đó nhưng KHÔNG khớp mockup này (hero còn
ảnh 3 cột rời, 5 bước còn bullet dài, video 88px quá nhỏ, kiến thức là
thanh navy đặc không ảnh). Khối này XÂY LẠI 6 mục theo đúng mockup, chỉ
hiệu lực ≤549 — máy tính bảng 550-767 vẫn dùng bản nhẹ tải cũ, đúng ý
"không đụng 550-849" của 4T.
============================================================================= */
/* ⛔ ĐÃ ĐẢO NGƯỢC 29/08 — trước đây khối chữ này bị ẩn mặc định vì ảnh hero
desktop (id 363) là ẢNH GHÉP CÓ SẴN CHỮ NƯỚNG TRONG ẢNH; hiện chữ HTML lên
nữa là chồng hai lớp chữ.
Nay 4T thay toàn bộ ảnh demo/AI bằng ẢNH CHỤP THẬT ⇒ ảnh 363 là ảnh SẠCH,
không còn chữ nào trong ảnh. Giữ `display:none` là hero desktop MẤT TRẮNG
tiêu đề H1 (đã bắt được trước khi đẩy, không phải sau khi 4T báo).
⇒ Hiện khối chữ ở MỌI khổ. Lợi thêm: H1 quay lại là CHỮ HTML THẬT (đọc được
bằng trình đọc màn hình, Google index được) thay vì pixel trong ảnh. */
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay {
display: block !important;
position: absolute !important;
left: max(24px, calc((100vw - var(--tl-be-ngang)) / 2)) !important;
top: 50% !important;
transform: translateY(-50%);
width: min(46%, 620px) !important;
max-width: min(46%, 620px) !important;
}
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay .text-box-content,
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay .text-inner { text-align: left !important; }
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay h1 {
font-size: clamp(22px, 2.1vw, 30px);
line-height: 1.24;
font-weight: 800;
color: var(--tl-navy);
margin: 0 0 12px;
}
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay h1 .tl-cam { color: var(--tl-orange); }
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay p {
font-size: clamp(13px, 1.05vw, 15px);
line-height: 1.55;
color: #4F5769;
margin: 0 0 18px;
}
/* Lớp sáng bên trái để chữ navy đọc được trên ảnh chụp thật — cùng kỹ thuật
đã dùng cho hero ≤549 (mục dưới) và hero trang Kiến thức. Ảnh thật có nền
phố/toà nhà nên không tự cho nền sạch như ảnh ghép cũ. */
.tl-trang-chu .page-wrapper .tl-hero-banner .banner-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.92) 38%,
rgba(255,255,255,.55) 52%,
rgba(255,255,255,0) 66%);
pointer-events: none;
}
.tl-trang-chu .page-wrapper .tl-hero-banner .banner-layers { position: absolute; inset: 0; z-index: 2; }
.tl-trang-chu .page-wrapper .tl-hero-mobile-cta.button {
background: var(--tl-orange);
color: #fff;
min-height: 48px !important;
padding: 0 22px;
margin: 0;
}
/* ⛔ SỬA 09/09: 4T báo «phần NGƯỜI BỆNH & GIA ĐÌNH NÓI GÌ VỀ TÔI đã bị mất
một số nội dung ở desktop». Đúng: nhãn vai trò («Người bệnh», «Gia đình bệnh
nhân») từng bị ẩn MẶC ĐỊNH ở đây vì lúc dựng chỉ làm cho ≤549 ⇒ desktop mất
hẳn phần ghi nguồn của trích dẫn, còn trơ câu nói không biết của ai.
Nay bỏ luật ẩn và đưa toàn bộ kiểu của nhãn ra DÙNG CHUNG mọi khổ (khối
≤549 đã gỡ bản trùng, tránh hai định nghĩa cho cùng một selector). */
.tl-trang-chu .page-wrapper .tl-quote-who {
display: flex !important;
align-items: center;
gap: 10px;
margin: 14px 0 0 !important;
padding: 0 !important;
font-size: 12.5px;
font-weight: 700;
color: var(--tl-muted);
}
.tl-trang-chu .page-wrapper .tl-quote-who::before { content: none !important; }
.tl-trang-chu .page-wrapper .tl-quote-who .icon-user {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--tl-navy), #1c3a72);
color: #fff;
font-size: 19px;
flex: 0 0 auto;
}
.tl-trang-chu .page-wrapper .tl-review-dots { display: none !important; }
/* ⛔ SÓT 28/08, 4T bắt được 29/08: thẻ "Kiến thức" bản mobile là khối THỨ TƯ
chỉ dựng cho ≤549 — nhưng lúc đó tôi chỉ nhớ ẩn mặc định cho 3 khối trên,
quên đúng khối này ⇒ desktop hiện nguyên một khối 1289×956px ở cuối trang
(đo trực tiếp ở 1440px). Cùng một mẫu lỗi đã tự bắt được ở `.tl-hero-
mobile-overlay`, lần này lọt lưới vì không chạy lại ảnh chụp desktop sau
khi thêm khối. */
.tl-trang-chu .page-wrapper .tl-kt-mobile-card { display: none !important; }
/* ⛔ Ảnh 5 bước là khối CHỈ CÓ Ở MOBILE (4T xin 09/09). Ẩn mặc định ở đây,
chỉ bật lại trong khối ≤549 — đúng bài học đã trả giá hai lần: quên luật ẩn
mặc định là khối mobile rò xuống cuối trang desktop mà không ai thấy. */
.tl-trang-chu .page-wrapper .tl-buoc-anh-tc { display: none !important; }
@media (max-width: 549px) {
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay { display: block !important; }
/* -----------------------------------------------------------------------------
0. NỀN CHỮ — body ≥15px, title 20-24px, gutter 16px, khe section 24-32px
[lý do vượt panel] Panel không có ô cỡ chữ theo khổ máy; đây là yêu cầu
SỐ CỤ THỂ của 4T (mục 6), không suy ra từ mockup.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper { font-size: 15px; line-height: 1.6; }
.tl-trang-chu .page-wrapper h2 { font-size: 22px; line-height: 1.3; }
.tl-trang-chu .page-wrapper .tl-trust-section h2 { font-size: 20px; }
.tl-trang-chu .page-wrapper .tl-section { padding-left: 16px; padding-right: 16px; }
/* =============================================================================
1. HERO — ảnh liền mạch full-width, chữ nổi bên trái, người bên phải
[lý do vượt panel] `[ux_banner bg]` chỉ nhận MỘT ảnh — bản duyệt (id 363)
đã CÓ CHỮ NƯỚNG SẴN (dùng cho ≥768px). Overlay chữ sống thêm một
lớp nữa lên ẢNH ĐÃ CÓ CHỮ sẽ chồng hai lớp chữ ⇒ đổi hẳn ảnh nền
sang id 188 (ảnh gốc SẠCH, chưa nướng chữ — cùng một tấm hình,
đã có sẵn trong Media, dùng làm nền cho bản `[ux_banner]` overlay
cũ trước đây) CHỈ ở ≤549, giữ nguyên id 363 ở mọi khổ khác.
-------------------------------------------------------------------------- */
/* ⛔ SỬA VÒNG CUỐI, LẦN 3 (28/08): 4T đổi yêu cầu — hero phải CAO ~400px, đủ
chỗ cho tiêu đề lớn + đoạn mô tả ĐẦY ĐỦ + CTA 48px, người hiện từ đầu tới
tay.
⛔ BẪY THẬT ĐÃ ĐO: từ khoá `right` (=100%) KHÔNG bám mép ảnh êm như tưởng —
dò bằng cách quét `background-position-x` từ 40% đến 100% trên CHÍNH phần
tử live (không phải mô phỏng bằng Python) thì 40–85% đều cho đầu người
NGUYÊN VẸN, nhưng 90% bắt đầu hụt đỉnh đầu và 100% ("right") mất hẳn phần
trên khuôn mặt — tính tay theo tỉ lệ ảnh (cover, không crop dọc ở 400px)
ra đúng khoảng KHÁC với thực tế render, nên bỏ hẳn cách tính, CHỐT bằng số
đã tự kiểm chứng trực tiếp trên live: 80%.
⚠ SỬA 09/09: 4T — «đẩy ảnh sang bên để nhìn rõ 2 người, không bị chữ và màu
trắng mờ che khuất». Đây chính là điều bản vá 08/09 phía dưới đã tự nhận là
KHÔNG tránh được «ở khung này» — lối ra là đổi KHUNG, không phải sửa tiếp
lớp phủ. Đo thật: ảnh 1600×900 trong khung 360×400 ⇒ cover ăn theo chiều cao
(scale 0,4444), phóng ra 711px rồi cắt ngang còn 360px ⇒ mỗi X% mở một cửa
sổ rộng 810px trên ảnh gốc. Hai vợ chồng nằm ở src x 950–1290.
X=80% (cũ) → cửa sổ 632–1442: cặp đôi rơi vào 39–81% khung, mà hộp chữ
phủ 16–232px ⇒ mặt người chồng nằm ĐÚNG dưới dòng chữ.
X=66% (mới) → cửa sổ 521–1331: cặp đôi dịch sang 190–342px, cả hai khuôn
mặt thoát khỏi dòng chữ VÀ khỏi vùng gradient còn đục.
⛔ Không hạ thấp hơn nữa: dưới ~61% thì mép phải khung cắt vào người vợ
(src 1290 + bề rộng cửa sổ). Đã kiểm 360/390/430px đều còn trọn. */
.tl-trang-chu .page-wrapper .tl-hero-banner {
aspect-ratio: auto;
height: 400px !important;
padding-top: 0 !important;
background: url("https://toanlocsingapore.com/wp-content/uploads/2026/08/hero-toan-loc-singapore-v2-that.jpg") 66% center / cover no-repeat;
}
.tl-trang-chu .page-wrapper .tl-hero-banner .banner-bg img { display: none; }
/* ⛔ SỬA 07/09/2026 (4T báo qua ảnh chụp thật, xem trong Zalo): gradient bản
cũ (đặc tới 52%, tan hết ở 62%) đã che TRẮNG NGƯỜI CHỒNG — anh đứng ở đúng
vùng ~52–62% nên vẫn dính gradient ở opacity .55→0, nhìn như ảnh bị tẩy
trắng nửa người. Thu hẹp & dốc nhanh hơn: đặc tới 24%, tan hết ở 46% — kiểm
trực tiếp trên live (bơm CSS thử qua DevTools, không suy luận toạ độ), thấy
người chồng hiện NGUYÊN VẸN, chữ "SONG TẠI SINGAPORE" + đoạn mô tả vẫn đọc
rõ vì nằm sát mép trái, trong vùng còn đặc nhất. */
/* ⛔ SỬA 08/09 — đoạn mô tả mới (dài gấp ~3 lần bản cũ) tràn ra ngoài vùng
gradient cũ (tan hết ở 46%) nên chữ nằm trên nền ảnh tối. Đo pixel ảnh chụp
live theo CỘT: nền chỉ đủ sáng (≥210) tới x≈96px, từ x≈116 trở đi tụt còn
173→101 ⇒ tương phản chỉ 3,2–4,1:1, dưới ngưỡng AA 4,5.
Nới gradient theo chiều NGANG thì lặp lại đúng lỗi 07/09 (tẩy trắng người
chồng). Nên nới ngang VỪA PHẢI rồi CẮT THEO CHIỀU DỌC bằng `mask-image`:
lớp phủ chỉ sống ở dải TRÊN (nơi có chữ), tan hết trước khi xuống tới thân
người — thứ 4T đã chê lần trước.
(Câu cũ ở đây ghi «đầu người vẫn dính phủ nhẹ, không tránh được» — HẾT ĐÚNG
từ 09/09: dời khung ảnh về X=66% thì đầu người ra hẳn ngoài vùng phủ, không
phải đụng tới gradient nữa. Xem chú thích ở luật background phía trên.) */
.tl-trang-chu .page-wrapper .tl-hero-banner .banner-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(255,255,255,.97) 0%,
rgba(255,255,255,.92) 34%,
rgba(255,255,255,.5) 52%,
rgba(255,255,255,0) 66%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 78%);
mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 78%);
pointer-events: none;
}
.tl-trang-chu .page-wrapper .tl-hero-banner .banner-layers { position: absolute; inset: 0; }
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay {
position: absolute !important;
left: 16px !important;
top: 28px !important;
/* ⛔ PHẢI reset transform. Luật áp-mọi-khổ (dòng ~1559) canh giữa dọc bằng
`top:50% + translateY(-50%)`. Khối này chỉ đè `top`, KHÔNG đè `transform`
⇒ khối chữ vẫn bị kéo lên nửa chiều cao CHÍNH NÓ. Với đoạn văn ngắn cũ
thì lệch ít nên không ai để ý; đoạn văn mới (08/09) dài gấp ~3 lần nên
kéo lên 125px, đẩy nguyên H1 ra ngoài mép trên banner và bị cắt sạch
(đo được `overlayTop = -97px`, đã thấy trên ảnh chụp live). */
transform: none !important;
width: 60% !important;
max-width: 60% !important;
}
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay .text-box-content,
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay .text-inner { text-align: left !important; }
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay h1 {
font-size: 20px;
line-height: 1.22;
font-weight: 800;
color: var(--tl-navy);
margin: 0 0 10px;
}
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay h1 .tl-cam { color: var(--tl-orange); }
.tl-trang-chu .page-wrapper .tl-hero-mobile-overlay p {
font-size: 13.5px;
line-height: 1.5;
color: #4F5769;
margin: 0 0 18px;
}
.tl-trang-chu .page-wrapper .tl-hero-mobile-cta.button {
background: var(--tl-orange);
color: #fff;
min-height: 48px !important;
font-size: 13px !important;
padding: 0 18px;
margin: 0;
}
/* Bản chữ nướng sẵn (ảnh id 363, dùng ≥550px) phải TẮT hẳn ở ≤549 — nếu
không sẽ hiện đúng lúc `banner-bg img{display:none}` ở trên đã ẩn nó rồi,
nên thật ra không cần thêm gì — ghi chú lại để lần sau khỏi nghi ngờ. */
/* =============================================================================
2. 5 BƯỚC — thẻ ngang mỏng, icon navy 64px (tròn sẵn trong SVG), rút gọn
mô tả, mũi tên phải, KHÔNG bullet, KHÔNG nút "XEM CHI TIẾT"
[lý do vượt panel] Panel không có "rút gọn theo khổ máy" — dùng 2 khối
[ux_text] song song (đã thêm ở shortcode), ẩn/hiện bằng CSS.
-------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Section | khối: thứ tự 5 section của trang
[trang] trang-chu
[lý do vượt panel] UX Builder xếp section theo THỨ TỰ TRONG NỘI DUNG, một
thứ tự duy nhất cho mọi khổ màn — không có ô "đảo thứ tự ở
mobile". Đổi thứ tự trong shortcode sẽ đổi luôn cả desktop.
⚠ SỬA 09/09: 4T — «phần NẾU CẦN SANG SINGAPORE… chuyển lên ngay dưới banner,
chỉ sửa mobile, không ảnh hưởng desktop». Dựng bằng `order` của Flexbox:
biến `.col-inner` bọc 5 section thành cột flex CHỈ ở ≤549 rồi đánh số lại.
⛔ Phải khai `order` cho CẢ NĂM section, không chỉ section cần dời — mặc
định `order:0`, nên nếu chỉ đặt số cho một cái thì bốn cái kia vẫn đứng
chung một bậc và giữ nguyên thứ tự DOM tương đối, ra kết quả nửa vời.
-------------------------------------------------------------------------- */
.tl-trang-chu .page-wrapper > .row-main > .col > .col-inner {
display: flex;
flex-direction: column;
}
.tl-trang-chu .page-wrapper .tl-hero { order: 1; }
.tl-trang-chu .page-wrapper .tl-media-section { order: 2; }
.tl-trang-chu .page-wrapper .tl-companion-section { order: 3; }
.tl-trang-chu .page-wrapper .tl-trust-section { order: 4; }
.tl-trang-chu .page-wrapper .tl-knowledge-section { order: 5; }
.tl-trang-chu .page-wrapper .tl-service-grid { display: block; }
.tl-trang-chu .page-wrapper .tl-service-grid > .col {
padding: 0 !important;
margin-bottom: 10px;
}
/* ⛔ SỬA VÒNG CUỐI, LẦN 2: 4T vẫn đo vòng tròn ~48px dù tôi đã đặt
`icon-box-img:74px` — bắt được nguyên nhân THẬT bằng cách đo riêng
`