` full-bleed — đúng hiệu ứng cần, chỉ cần đổi
MÀU và chữ, không cần kỹ thuật "trồi lên .section-content" như
desktop nữa vì mobile ĐÚNG LÀ muốn full-bleed).
-------------------------------------------------------------------------- */
.tl-cau-chuyen .tl-story-final-cta { background: var(--slc-orange-text); }
.tl-cau-chuyen .tl-story-final-cta .section-content {
background: none !important;
border-radius: 0;
padding-left: 18px;
padding-right: 18px;
}
.tl-cau-chuyen .tl-story-final-cta .row { text-align: center; row-gap: 14px; }
.tl-cau-chuyen .tl-story-final-cta h2 { color: #fff; }
.tl-cau-chuyen .tl-story-final-cta p { color: #fff; font-size: 15px; }
.tl-cau-chuyen .tl-band-lienhe p { color: #fff; font-size: 14px; opacity: .9; }
/* Icon dùng thuộc tính trình bày `stroke="#EB500E"` ngay trên thẻ SVG gốc
(id=131, không phải class CSS) — CSS `stroke` luôn thắng thuộc tính
trình bày, nhắm rộng vào mọi thẻ hình học bên trong cho chắc. */
.tl-cau-chuyen .tl-story-final-cta .icon-box svg * { stroke: #fff !important; }
.tl-cau-chuyen .tl-story-final-cta .button {
background: #fff !important;
color: var(--slc-orange-text) !important;
min-height: 46px;
font-size: 15px;
}
}
/* =============================================================================
ĐIỆN THOẠI THẬT — ≤549px: BÁM SÁT mobile-mockup-cau-chuyen-v2.png
4T nghiệm thu 27/08 trên LIVE: khối @media(max-width:849px) ở trên dồn dọc
AN TOÀN nhưng SAI mockup — mockup thật giữ bố cục ngang/2-cột ở nhiều khối,
chỉ co tỉ lệ theo màn hẹp chứ không dồn dọc toàn bộ. 4T yêu cầu CHỈ SỬA
TRONG KHỐI NÀY (≤549px) — không đụng khối 849px ở trên (vẫn phục vụ dải
550–849 nguyên trạng) và không đụng header/footer/desktop.
Mọi rule dưới đây ghi đè đúng rule cùng tên ở khối 849px bên trên (thắng
nhờ đứng SAU trong file, cùng độ đặc — trừ nơi ghi rõ cần độ đặc cao hơn).
============================================================================= */
@media (max-width: 549px) {
/* -----------------------------------------------------------------------------
0. GUTTER 16px — mockup xin gutter hẹp hơn khối 849px phía trên (18px→16px).
[phục vụ] phần tử: Row | khối: toàn trang
[trang] cau-chuyen
[mockup] mobile-mockup-cau-chuyen-v2.png
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .row { max-width: calc(100% - 32px); }
/* ⛔ PHÁT HIỆN MỚI (vòng nghiệm thu live thứ 2, đo DOM sống): mỗi `[section]`
TỰ MANG padding-left/right 30px MẶC ĐỊNH của Flatsome — thuộc tính
`padding__sm` của panel chỉ ghi đè phần DỌC (đúng quy luật đã ghi ở tiêu đề
khối), không đụng NGANG. Cộng thêm 15px mặc định của `.col` bọc ngoài,
tổng lề trái/phải THẬT trước khi sửa là 46px — gấp gần 3 lần gutter 16px
yêu cầu. Đây là NGUYÊN NHÂN GỐC của "card quá hẹp/ảnh dải hẹp" ở mọi khối
bên dưới (hero, thẻ nổi bật, thẻ thư viện) — không phải do tỉ lệ % sai.
Xoá phần NGANG, giữ nguyên phần DỌC panel đã đặt cho từng section. */
.tl-cau-chuyen .page-wrapper section.section { padding-left: 0 !important; padding-right: 0 !important; }
/* -----------------------------------------------------------------------------
1. HERO — ĐÍNH CHÍNH VÒNG 5: 4T CẤM hẳn bố cục 2 cột ở mobile (đã thử 3
vòng, cột chữ luôn dưới 200px vì phải chia đôi bề ngang với ảnh — không
cách nào cho H1 đạt tối thiểu 300px mà vẫn giữ 2 cột cạnh nhau trong màn
358px). Đổi hẳn sang DỒN DỌC: chữ TRỌN BỀ NGANG phía trên, ảnh TRỌN BỀ
NGANG phía dưới (tỉ lệ 4:3, không kéo giãn/không cắt quá tay — "đầy đủ"
như 4T yêu cầu).
[phục vụ] phần tử: Row/Column/Image | khối: .tl-story-hero
[trang] cau-chuyen
[mockup] mobile-mockup-cau-chuyen-v2.png
[lý do vượt panel] Panel Col chỉ có `span__sm="12"` (dồn dọc, ĐÚNG THỨ cần
lần này) hoặc số nguyên /12 cố định cho 2 cột ngang — không có
lựa chọn "ngang nhưng linh hoạt %". Dồn dọc là behavior GỐC của
panel khi bỏ span__sm tuỳ biến, không cần ép flex-basis nữa.
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-story-hero { padding-top: 18px; padding-bottom: 14px; }
.tl-cau-chuyen .page-wrapper .tl-story-hero .row {
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 0;
}
.tl-cau-chuyen .page-wrapper .tl-story-hero-content {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
padding-right: 0;
margin-bottom: 14px;
}
.tl-cau-chuyen .page-wrapper .tl-story-hero-media {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
margin: 0;
padding: 0 !important;
align-self: auto !important;
}
.tl-cau-chuyen .page-wrapper .tl-story-hero-media .col-inner,
.tl-cau-chuyen .page-wrapper .tl-story-hero-img,
.tl-cau-chuyen .page-wrapper .tl-story-hero-img .img-inner { height: auto; }
.tl-cau-chuyen .page-wrapper .tl-story-hero-img img {
max-height: none !important;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--slc-r);
}
.tl-cau-chuyen .page-wrapper .tl-nhan-section p { font-size: 11px; margin-bottom: 6px; }
/* Cột chữ giờ TRỌN BỀ NGANG (~358px) — H1 đủ chỗ cho cỡ chữ lớn hơn hẳn mà
vẫn ra đúng khoảng 3 dòng (đo sống trước khi chốt số, xem ghi chú cuối
khối này nếu cần chỉnh lại). */
.tl-cau-chuyen .page-wrapper .tl-hero-h1 h1 { margin-bottom: 10px; font-size: clamp(25px, 7.4vw, 28px); line-height: 1.2; }
.tl-cau-chuyen .page-wrapper .tl-story-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) p {
font-size: 15px;
line-height: 1.5;
margin-bottom: 6px;
}
.tl-cau-chuyen .page-wrapper .tl-story-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) p:last-child { margin-bottom: 0; }
/* -----------------------------------------------------------------------------
2. HAI THẺ "CÂU CHUYỆN NỔI BẬT" — ngang, ảnh/play trái ~44%, chữ phải ~56%.
[phục vụ] phần tử: row_inner/col_inner + Banner | khối: .tl-story-noibat
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-story-noibat { margin-bottom: 12px; }
.tl-cau-chuyen .page-wrapper .tl-story-noibat:last-child { margin-bottom: 0; }
.tl-cau-chuyen .page-wrapper .tl-story-noibat .row_inner,
.tl-cau-chuyen .page-wrapper .tl-story-noibat .row.align-stretch {
display: flex;
flex-wrap: nowrap;
}
.tl-cau-chuyen .page-wrapper .tl-noibat-media {
flex: 0 0 44%;
width: 44%;
max-width: 44%;
padding: 0 !important;
}
.tl-cau-chuyen .page-wrapper .tl-noibat-content {
flex: 0 0 56%;
width: 56%;
max-width: 56%;
padding: 12px 14px;
}
.tl-cau-chuyen .page-wrapper .tl-noibat-media .banner {
aspect-ratio: auto;
height: 100% !important;
}
/* Vòng 4: 4T xin tăng cỡ chữ + nút play lên hẳn — 14.5/12.5px trước đó đọc
được nhưng nhỏ hơn mockup rõ rệt. */
.tl-cau-chuyen .page-wrapper .tl-noibat-title h3 { font-size: 18px; line-height: 1.25; margin-bottom: 4px; }
.tl-cau-chuyen .page-wrapper .tl-noibat-desc p { font-size: 13.5px; line-height: 1.4; margin-bottom: 6px; }
.tl-cau-chuyen .page-wrapper .tl-noibat-banner .open-video {
width: 46px !important; height: 46px !important;
max-width: 46px !important; max-height: 46px !important;
}
.tl-cau-chuyen .page-wrapper .tl-noibat-banner .tl-duration-badge p { font-size: 10.5px; padding: 3px 7px; }
/* -----------------------------------------------------------------------------
3. THANH TAB — vòng 5: 4T xin RÕ số đo — mỗi tab `flex:0 0 145px` cố định
(không phải `auto` co theo nội dung như vòng 4, lý do mục 3-4 bị hụt
hẳn ra ngoài vùng nhìn ban đầu vì các tab TRƯỚC quá hẹp/không đều, mắt
không nhận ra còn thẻ để cuộn tới). 145px cố định cho cả 4 tab bằng
nhau, nhãn tối đa 2 dòng (line-clamp), icon 36px.
[phục vụ] phần tử: tabgroup | khối: .tl-lib-tabs
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-lib-tabs .nav {
display: flex;
flex-wrap: nowrap;
grid-template-columns: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
border-radius: 16px;
padding: 10px;
gap: 8px;
justify-content: flex-start;
}
.tl-cau-chuyen .page-wrapper .tl-lib-tabs .nav::-webkit-scrollbar { display: none; }
.tl-cau-chuyen .page-wrapper .tl-lib-tabs .nav li.tab {
flex: 0 0 145px;
width: 145px;
min-width: 145px;
max-width: 145px;
display: flex;
justify-content: center;
scroll-snap-align: start;
}
.tl-cau-chuyen .page-wrapper .tl-lib-tabs .nav a {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 4px 2px;
width: 100%;
}
.tl-cau-chuyen .page-wrapper .tl-lib-tabs .nav li.tab.active { background: #fdece4; border-radius: 12px; }
.tl-cau-chuyen .page-wrapper .tl-tab-txt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tl-cau-chuyen .page-wrapper .tl-tab-ic { width: 36px; height: 36px; }
.tl-cau-chuyen .page-wrapper .tl-tab-txt { font-size: 13px; line-height: 1.2; white-space: normal; }
/* -----------------------------------------------------------------------------
4. LƯỚI THẺ CÂU CHUYỆN — CHỈ 3 thẻ mỗi tab (mockup không cuộn dài), ngang
ảnh 44% trái / chữ 56% phải, KHÔNG cắt "..." — nới đủ rộng cho tiêu đề
trọn vẹn, card cao theo đúng nội dung.
[lý do vượt panel] `[blog_posts]` không có tuỳ chọn "hiện tối đa N trên
mobile" — ẩn bằng `nth-child` là cách CSS-only duy nhất, không
đụng tới danh sách bài (nội dung ngoài phạm vi 2 file CSS).
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-card-story .col:nth-child(n+4) { display: none; }
.tl-cau-chuyen .page-wrapper .tl-card-story .col { padding: 0 0 10px; }
/* ⛔ ĐÍNH CHÍNH vòng 4: 4T xin RÕ số đo — cao ~120px, ảnh 45%, tiêu đề 18px,
mô tả 14px, vẫn clamp 2 dòng (không ellipsis SỚM — nghĩa là clamp phải xảy
ra ở tràn dòng thứ 3 trở đi, không phải do cột quá hẹp cắt ngay dòng 1 như
lỗi vòng 1). Bỏ nút "Đọc câu chuyện" khỏi thẻ mobile để dồn hết chỗ cho
tiêu đề/mô tả trong ngân sách chiều cao 120px — link "Xem thêm câu chuyện"
chung ở cuối danh sách đã đủ lối vào bài. */
.tl-cau-chuyen .page-wrapper .tl-card-story .box { display: flex; align-items: stretch; min-height: 120px; }
.tl-cau-chuyen .page-wrapper .tl-card-story .box-image {
flex: 0 0 45%;
width: 45%;
padding-top: 0 !important;
align-self: stretch;
}
.tl-cau-chuyen .page-wrapper .tl-card-story .box-image .image-cover { height: 100%; padding-top: 0 !important; }
.tl-cau-chuyen .page-wrapper .tl-card-story .box-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tl-cau-chuyen .page-wrapper .tl-card-story .tl-benh-badge { font-size: 9px; padding: 3px 6px; top: 6px; left: 6px; }
.tl-cau-chuyen .page-wrapper .tl-card-story .box-text { flex: 1 1 auto; min-width: 0; }
.tl-cau-chuyen .page-wrapper .tl-card-story .box-text-inner {
padding: 10px 12px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.tl-cau-chuyen .page-wrapper .tl-card-story .post-title a {
font-size: 18px;
line-height: 1.22;
min-height: calc(18px * 1.22 * 2);
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tl-cau-chuyen .page-wrapper .tl-card-story .from_the_blog_excerpt {
font-size: 14px;
line-height: 1.32;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(14px * 1.32 * 2);
margin-top: 4px;
}
.tl-cau-chuyen .page-wrapper .tl-card-story .button { display: none; }
.tl-cau-chuyen .page-wrapper .tl-story-library .button { font-size: 14px; padding: 6px 0 !important; }
/* -----------------------------------------------------------------------------
5a. "GIÁ TRỊ" — LƯỚI 2×2 thật (không phải 1 cột), icon CAM viền mảnh.
[phục vụ] phần tử: Row/Featured Box | khối: .tl-story-values
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-story-values .row {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 0;
column-gap: 0;
}
.tl-cau-chuyen .page-wrapper .tl-story-values .col {
width: auto;
max-width: none;
flex: none;
padding: 8px 0;
position: relative;
}
.tl-cau-chuyen .page-wrapper .tl-story-values .col:nth-child(odd) { padding-right: 10px; }
.tl-cau-chuyen .page-wrapper .tl-story-values .col:nth-child(even) { padding-left: 10px; }
.tl-cau-chuyen .page-wrapper .tl-story-values .col:not(:nth-last-child(-n+2))::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--slc-border);
}
.tl-cau-chuyen .page-wrapper .tl-story-values .col:nth-child(odd)::before {
content: "";
position: absolute;
top: 6px; bottom: 6px; right: 0;
width: 1px;
background: var(--slc-border);
}
/* ⛔ ĐÍNH CHÍNH vòng 5: 4T xin icon 42px NGANG + toàn khối ~270px thay ~512px
đo được. Icon-box vốn ĐÃ `display:flex;flex-direction:row` sẵn (Flatsome
tự làm đúng với `pos="left"` của featured_box, không cần CSS ép) — cỡ CHỮ
mới là thứ đẩy chiều cao vọt lên: mô tả 14px trong cột chữ chỉ ~110px
(nửa lưới trừ icon 46+đệm) vỡ tới 6-7 dòng. Hạ hẳn cỡ chữ + giảm icon nhẹ
xuống 42px đúng số 4T cho, đổi margin-bottom (dư thừa cho layout ngang)
sang margin-right cho đúng khoảng cách ngang. */
.tl-cau-chuyen .page-wrapper .tl-story-values .icon-box-img { max-width: 42px; margin-bottom: 0; margin-right: 10px; flex: none; }
.tl-cau-chuyen .page-wrapper .tl-story-values .icon-box-img svg * { stroke: var(--slc-orange) !important; fill: none !important; }
.tl-cau-chuyen .page-wrapper .tl-story-values .icon-box-text { min-width: 0; }
.tl-cau-chuyen .page-wrapper .tl-story-values strong { font-size: 12.5px; line-height: 1.2; }
.tl-cau-chuyen .page-wrapper .tl-story-values p { font-size: 11px; line-height: 1.25; margin-top: 2px; }
/* -----------------------------------------------------------------------------
5b. CTA CUỐI — thẻ NGANG gọn (icon+tiêu đề một hàng, nút+liên hệ hàng dưới),
nền GRADIENT cam — KHÔNG còn khối cao chiếm cả màn hình.
[phục vụ] phần tử: Row/Column | khối: .tl-story-final-cta
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-story-final-cta {
background: linear-gradient(135deg, var(--slc-orange) 0%, var(--slc-orange-text) 100%);
}
/* ⛔ ĐÍNH CHÍNH vòng 3: bản trước xếp icon+tiêu đề MỘT hàng rồi nút+liên hệ
MỘT hàng RIÊNG full-width bên dưới ⇒ cộng dồn quá 300px. Mockup là một
BĂNG THẤP ~120px: icon nhỏ bên trái, khối chữ (tiêu đề+mô tả) chiếm giữa,
nút đứng NGAY BÊN PHẢI cùng hàng với khối chữ (không xuống dòng riêng) —
chỉ dòng liên hệ Zalo/WhatsApp (phụ, không bắt buộc theo mockup) mới lùi
xuống dưới cùng, cỡ chữ rất nhỏ. */
/* ⛔ ĐÍNH CHÍNH vòng 4: 4T xin RÕ ~100px — vòng 3 (218px) còn xếp mô tả riêng
một dòng và nút+liên hệ cũng riêng dòng. Bỏ hẳn mô tả (`` phụ trong
col2) — chỉ giữ "2 dòng nội dung" đúng nghĩa đen là tiêu đề 2 dòng; ghép
NÚT và DÒNG HOTLINE vào chung MỘT hàng (chính col3 trở thành flex row) thay
vì để hotline xuống dòng riêng — hotline dài nên phải `ellipsis` một dòng. */
/* ⛔ ĐÍNH CHÍNH vòng 5-b: thử "nội dung trái + CTA phải MỘT hàng" trước —
đo ra 116px, NHƯNG cột tiêu đề khi đó chỉ còn ~54% (nút chiếm 46%) nên
"Bạn đang chuẩn bị sang Singapore điều trị?" (43 ký tự) bị cắt còn "Bạn
đang / chuẩn bị…" — RÕ RÀNG tệ hơn, đúng kiểu lỗi 4T đã nhiều lần bắt.
Quay lại NHÁNH DỰ PHÒNG 4T cho phép: tiêu đề TRỌN BỀ NGANG (đọc đủ 2 dòng
thật, không cắt) trên hàng 1 cùng icon, nút+hotline chung MỘT hàng riêng
bên dưới — tổng 130–155px, đổi lấy tiêu đề đọc được trọn vẹn. */
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .section-content { padding: 12px 16px; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .row {
flex-wrap: wrap;
align-items: center;
row-gap: 8px;
column-gap: 10px;
text-align: left;
}
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .col:nth-child(1) { flex: 0 0 24px; max-width: 24px; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .col:nth-child(2) { flex: 1 1 0; min-width: 0; max-width: none; text-align: left; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .col:nth-child(2) p { display: none; }
/* ⚠ `.col` KHÔNG phải nơi chứa nút/hotline trực tiếp — Flatsome luôn bọc
thêm MỘT lớp `.col-inner` giữa `.col` và nội dung thật. Đặt `display:flex`
lên `.col` chỉ biến `.col-inner` (đứa con DUY NHẤT) thành 1 flex-item, còn
BÊN TRONG `.col-inner` nút/hotline vẫn xếp dọc bình thường — bắt được qua
đo trực tiếp ở vòng 4 (band.y luôn khác btn.y dù mọi thuộc tính flex ở
`.col` đã đúng). Phải đặt flex ở đúng `.col-inner`. */
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .col:nth-child(3) {
flex: 1 1 100%;
max-width: 100%;
padding: 0 !important;
}
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .col:nth-child(3) > .col-inner {
text-align: left;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
}
.tl-cau-chuyen .page-wrapper .tl-band-lienhe { flex: 1 1 0; min-width: 0; width: auto; max-width: none; order: 2; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .icon-box-img { max-width: 24px; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta h2 {
font-size: 14.5px;
line-height: 1.25;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tl-cau-chuyen .page-wrapper .tl-band-lienhe p {
font-size: 10px;
margin: 0;
opacity: .85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ⚠ `width:auto` không thắng — Flatsome tự cho nút `width:100%` ở màn hẹp
(mặc định responsive riêng của `.button`, không phải rule của mình). Ép
`!important` để nút chỉ rộng theo chữ, không chiếm hết hàng — đúng ý "băng
thấp" thay vì viên thuốc to chiếm gần trọn bề ngang thẻ. */
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .button {
flex: 0 0 auto;
display: inline-flex !important;
width: auto !important;
min-height: 32px !important;
font-size: 12px;
padding: 0 12px !important;
white-space: nowrap;
}
} /* ==== HẾT @media (max-width: 549px) ==== */
/* =============================================================================
VÒNG BỔ SUNG (28/08/2026) — 4T soi 2 ảnh chụp mobile, xin sửa 3 chỗ:
(1) 2 khung tab (cam/trắng) cao lệch nhau, (2) 4 icon-box "giá trị" đổi
icon-trên/chữ-dưới thay vì icon-trái/chữ-phải, (3) dải CTA cuối quay lại
nền nhạt GIỐNG DESKTOP thay vì nền cam/gradient một phiên trước tự đổi,
chỉ giữ nút, bỏ dòng Zalo, nút căn giữa.
⛔ CHỈ THÂN TRANG, không đụng header/footer. Mọi rule trong
@media(max-width:549px) — desktop ≥850px không đổi (không có selector nào
trùng ngoài phạm vi media query này).
============================================================================= */
@media (max-width: 549px) {
/* -----------------------------------------------------------------------------
1. THANH TAB — 4 khung cao BẰNG NHAU (trước: 79px/64px lệch nhau vì tab có
nhãn 2 dòng cao hơn tab nhãn 1 dòng, dù bề rộng đã đều 145px sẵn).
[phục vụ] phần tử: tabgroup | khối: .tl-lib-tabs
[mockup] ảnh chụp LIVE 4T gửi 28/08 — khung nền cam (tab active) thấp/hẹp
hơn khung trắng bên cạnh.
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-lib-tabs .nav li.tab { min-height: 80px; }
.tl-cau-chuyen .page-wrapper .tl-lib-tabs .nav a { justify-content: center; height: 100%; }
/* -----------------------------------------------------------------------------
2. 4 Ô "GIÁ TRỊ" — ICON TRÊN, CHỮ DƯỚI, CĂN GIỮA
[phục vụ] phần tử: Icon Box (featured_box) | khối: .tl-story-values
[trang] cau-chuyen
[mockup] 4T xin icon-box theo cấu trúc "icon ở trên, chữ ở dưới", chữ và
icon căn giữa, khung cân đối — khác cấu trúc icon-trái/chữ-phải
hiện có.
[lý do vượt panel] Panel `[featured_box]` có ô `Icon Position` (left/top/
right) NHƯNG đó là thuộc tính GLOBAL của shortcode, đổi ở panel
sẽ đổi LUÔN desktop (4T dặn không được ảnh hưởng desktop, mà
desktop ĐANG dùng icon-trái, đo ở 715/716-719 vòng trước). Nên
chỉ đổi flex-direction bằng CSS, giới hạn trong khổ ≤549.
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-story-values .icon-box {
flex-direction: column;
align-items: center;
text-align: center;
}
.tl-cau-chuyen .page-wrapper .tl-story-values .icon-box-img {
margin-right: 0;
margin-bottom: 8px;
}
.tl-cau-chuyen .page-wrapper .tl-story-values .icon-box-text { text-align: center; }
.tl-cau-chuyen .page-wrapper .tl-story-values strong,
.tl-cau-chuyen .page-wrapper .tl-story-values p { text-align: center; }
/* -----------------------------------------------------------------------------
3. DẢI CTA CUỐI — QUAY VỀ NỀN NHẠT GIỐNG DESKTOP, CHỈ GIỮ NÚT
[phục vụ] phần tử: Section/Column/Button | khối: .tl-story-final-cta
[trang] cau-chuyen
[mockup] 4T xin nền mobile GIỐNG desktop (`#fdf1ea` nhạt, không phải
gradient cam/chữ trắng một vòng trước tự đổi — xem khối "5b CTA
CUỐI" phía trên); và ở hàng nút, CHỈ giữ nút "LIÊN HỆ TƯ VẤN
NGAY", bỏ dòng "Zalo Việt Nam: …", nút CĂN GIỮA khung.
[lý do vượt panel] Nền/màu chữ đặt bằng panel Section (desktop) rồi bị CSS
vòng trước ghi đè `!important` ở khổ ≤849/≤549 — phải đè lại
cũng bằng `!important` (cùng đặc hiệu, tệp đứng SAU thắng).
⚠ Không xoá dòng Zalo khỏi shortcode — chỉ ẩn bằng CSS ở khổ hẹp (desktop/
tablet vẫn thấy), và số này đã có sẵn ở footer nên ẩn trên mobile không
làm mất thông tin liên hệ nào của trang.
⚠ Số bg nút `#ce4c09` là màu ĐO THẬT trên desktop (không phải token `--slc-
orange-text` #c4400a — gần nhưng không trùng; đây là màu mặc định của
`.button` toàn site, không định nghĩa ở tệp trang này nên không có biến
để gọi lại, ghi thẳng số đo cho chắc ăn khớp pixel).
-------------------------------------------------------------------------- */
.tl-cau-chuyen .page-wrapper .tl-story-final-cta { background: none !important; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .section-content {
background: #fdf1ea !important;
border-radius: 16px !important;
}
.tl-cau-chuyen .page-wrapper .tl-story-final-cta h2 { color: var(--slc-navy) !important; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .icon-box svg * { stroke: #EB500E !important; }
.tl-cau-chuyen .page-wrapper .tl-band-lienhe { display: none !important; }
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .col:nth-child(3) > .col-inner {
justify-content: center;
}
.tl-cau-chuyen .page-wrapper .tl-story-final-cta .button {
background: #ce4c09 !important;
color: #fff !important;
}
}