/* =============================================================================
   40-page-toi-co-the-giup-gi.css — DỰNG LẠI TOÀN BỘ 27/08/2026
   Theo brief "phiên 3 — dựng lại trang /toi-co-the-giup-gi/" kèm bộ ảnh + icon
   thật (help-hero/before/arrival/treatment/living/aftercare + help-icons.svg).

   🔒 PHẠM VI — hai lớp cô lập, giữ nguyên quy ước cũ:
      1. TỆP chỉ nạp khi slug = toi-co-the-giup-gi (functions.php).
      2. MỌI bộ chọn bọc thêm `.tl-toi-co-the-giup-gi` (lớp <body> tự động).
      ⇒ Không luật nào ở đây chạm Trang chủ, Về tôi, hay trang khác.

   ⛔ BẢN CŨ (19–20/08) DỰNG HERO 2 CỘT + THẺ BƯỚC ĐÓNG KHUNG CẢ HÀNG — brief
   27/08 đổi hẳn kiểu: hero thành BANNER ẢNH NỀN + chữ nổi (như trang chủ), thẻ
   bước KHÔNG còn viền/nền phủ cả hàng (ảnh + chữ giữa để trần trên nền trắng),
   chỉ cột kết quả bên phải mới có nền pastel. Xoá sạch phần hero/thẻ bước cũ.
============================================================================= */

/* -----------------------------------------------------------------------------
   0. BIẾN MÀU RIÊNG TRANG — áp mọi khổ
   [mockup]   4T cho hex trực tiếp: navy #061d4c, cam #f15b2a (khác token toàn
              site --tl-navy #010f38 / --tl-cam #eb500e) — brief 27/08 dòng 1.
   [lý do vượt panel]  Customizer chỉ có 2 ô màu; trang này cần thêm 5 màu pastel
              riêng cho 5 giai đoạn.
   ⚠ Đặt trên `.page-wrapper`, KHÔNG trên <body>: header/footer nằm NGOÀI
     .page-wrapper và dùng chung toàn site, không được lây màu riêng trang này.
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .page-wrapper {
	--tl-navy: #061d4c;
	--tl-cam: #f15b2a;
	--tl-cam-chu: #c8460f;         /* cam CHỮ đậm hơn — #f15b2a trên trắng chỉ ~3,1:1, dưới 4,5:1 cần cho chữ nhỏ */
	--tl-cam-hover: #d94e1e;
	--tl-r: 10px;
	--tl-r-sm: 8px;

	/* ⛔ ĐÃ ĐO LẠI TRÊN ẢNH MẪU GỐC (27/08, lần 2): nền mỗi card KHÔNG phải
	   pastel bão hoà (#fdeee6 cũ đo ra rgb 253,238,230 — ĐẬM hơn mẫu rất nhiều).
	   Lấy mẫu pixel trực tiếp trong card 1/2 của ảnh gốc: card cam
	   rgb(251,247,246), card xanh rgb(243,247,252) — chỉ lệch khỏi trắng
	   thuần 2–4 kênh màu. Đây mới là "RẤT NHẸ" đúng nghĩa. */
	--p1-bg: #fbf7f6; --p1-line: #f3e3dc; --p1-dot: var(--tl-cam);
	--p2-bg: #f5f7fc; --p2-line: #dde6f5; --p2-dot: #2f6fd6;
	--p3-bg: #f5faf7; --p3-line: #dcefe2; --p3-dot: #1f9d54;
	--p4-bg: #f8f6fb; --p4-line: #ebe3f6; --p4-dot: #7b4fd1;
	--p5-bg: #fbf9f1; --p5-line: #f2ead0; --p5-dot: #c99a12;
}

.tl-toi-co-the-giup-gi .tl-ht-buoc-1 { --p-bg: var(--p1-bg); --p-line: var(--p1-line); --p-dot: var(--p1-dot); }
.tl-toi-co-the-giup-gi .tl-ht-buoc-2 { --p-bg: var(--p2-bg); --p-line: var(--p2-line); --p-dot: var(--p2-dot); }
.tl-toi-co-the-giup-gi .tl-ht-buoc-3 { --p-bg: var(--p3-bg); --p-line: var(--p3-line); --p-dot: var(--p3-dot); }
.tl-toi-co-the-giup-gi .tl-ht-buoc-4 { --p-bg: var(--p4-bg); --p-line: var(--p4-line); --p-dot: var(--p4-dot); }
.tl-toi-co-the-giup-gi .tl-ht-buoc-5 { --p-bg: var(--p5-bg); --p-line: var(--p5-line); --p-dot: var(--p5-dot); }

/* -----------------------------------------------------------------------------
   0b. GIẤU PSEUDO DỌN FLOAT CỦA FLATSOME — áp mọi khổ (kế thừa bài học 19/08:
   `.row::after` rơi vào ô lưới khi hàng bị grid-hoá, cộng dư một row-gap).
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .tl-buoc-chitiet::before,
.tl-toi-co-the-giup-gi .tl-buoc-chitiet::after,
.tl-toi-co-the-giup-gi .tl-timeline::after,
.tl-toi-co-the-giup-gi .tl-ht-trust-grid::before,
.tl-toi-co-the-giup-gi .tl-ht-trust-grid::after,
.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row::before,
.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row::after { display: none; }

/* -----------------------------------------------------------------------------
   0c. NEO #buoc-N — cuộn mượt, KHÔNG JavaScript
   -------------------------------------------------------------------------- */
html:has(body.tl-toi-co-the-giup-gi) { scroll-behavior: smooth; }
.tl-toi-co-the-giup-gi .tl-ht-buoc { scroll-margin-top: 64px; }
@media (prefers-reduced-motion: reduce) {
	html:has(body.tl-toi-co-the-giup-gi) { scroll-behavior: auto; }
}

/* -----------------------------------------------------------------------------
   0d2. LỀ NGANG SECTION — trả lại 30px mỗi bên mà Flatsome mặc định ăn
   [lý do vượt panel]  Panel Section chỉ in `padding TRÊN/DƯỚI` (giá trị người
              dùng gõ); `padding: … 30px` HAI BÊN là baseline CỐ ĐỊNH của
              `.section` theme cha, không liên quan gì tới ô panel.
   ⚠ Đo được: `.row` của trang này x=98 trong khi header-inner x=68 — lệch
     đúng 30px. Trang `kien-thuc` đã có sẵn luật y hệt (`.page-wrapper .section
     {padding-left:0;padding-right:0}`) — áp lại đúng công thức đó thì `.row`
     mới thẳng mép với header/footer (đều dùng `--tl-be-ngang`).
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .page-wrapper .section { padding-left: 0; padding-right: 0; }

/* -----------------------------------------------------------------------------
   0d. BREADCRUMB — nay nằm TRONG hero (mục 1), đây chỉ còn vùng chạm link
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .tl-breadcrumb a {
	display: inline-block;
	padding: 10px 0;
	margin: -10px 0;
}

/* =============================================================================
   1. HERO — banner ảnh nền + hai lớp chữ nổi (giống kỹ thuật trang chủ)
   [phục vụ]  phần tử: ux_banner + text_box | khối: .tl-ht-hero-banner
   [mockup]   4T: "background ảnh hero full ngang trong container… người đàn ông
              ở phải, quote card navy bo góc bên phải". Không dùng layout 2 cột
              cũ (ảnh 1 cột riêng) — ảnh giờ là NỀN của cả banner, chữ nổi lên.
   [lý do vượt panel]  [ux_banner] có bg/height nhưng không có "hai khối chữ nổi
              độc lập" — đó là [text_box] con, mỗi cái tự position_x/y riêng.
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .tl-ht-hero-banner,
.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-inner,
.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-bg,
.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-bg img { border-radius: var(--tl-r); }
.tl-toi-co-the-giup-gi .tl-ht-hero-banner { overflow: hidden; position: relative; }

/* ⛔ SỬA LẦN 4 (27/08): 4T chụp lại live — "chữ ma" KHÔNG phải do overlay
   position_x/y (đã sửa ở lần 3), mà do TRÙNG với `.logo-tagline` header vốn
   đã in sẵn "Đồng hành cùng người Việt…" dưới logo trên MỌI trang. Lần 3 lại
   thêm một [ux_text] tagline gần-giống-hệt NGAY SAU header, cộng với breadcrumb
   chữ đầy đủ "Trang chủ › …" bên dưới ⇒ 3 dòng xám na ná nhau xếp chồng ngay
   đầu hero — chứ không phải một phần tử bị nhân bản trong DOM.
   Xử lý: bỏ hẳn [ux_text] tagline riêng của trang (header đã có rồi, không
   lặp lại). Breadcrumb rút gọn còn DUY NHẤT icon nhà nhỏ, ẩn hết chữ. */
.tl-toi-co-the-giup-gi .tl-ht-pretag { background: #fff; }
.tl-toi-co-the-giup-gi .tl-ht-hero-crumb .rank-math-breadcrumb > p {
	display: flex;
	align-items: center;
	margin: 0;
}
.tl-toi-co-the-giup-gi .tl-ht-hero-crumb .rank-math-breadcrumb .separator,
.tl-toi-co-the-giup-gi .tl-ht-hero-crumb .rank-math-breadcrumb .last {
	display: none;
}
.tl-toi-co-the-giup-gi .tl-ht-hero-crumb .rank-math-breadcrumb > p > a {
	display: inline-block;
	width: 14px;
	height: 14px;
	overflow: hidden;
	text-indent: -999px;
	opacity: .55;
	background: no-repeat center / 13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061d4c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1H9v-6h6v6h2.5a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E");
}

.tl-toi-co-the-giup-gi .tl-ht-hero { margin-top: 0; }

/* Lớp phủ nhẹ bên trái để chữ navy/cam luôn đọc được trên ảnh trời sáng. */
.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.5) 26%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 60%);
}

/* H1 — ảnh mẫu chữ NHỎ và NÉN hơn hẳn bản trước (không phải khối chữ to choán
   nửa banner). Khoá cỡ theo px cố định, KHÔNG dùng vw — mẫu giữ nguyên một cỡ
   dù đo ở khổ màn nào, không phóng to theo bề rộng viewport. */
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox,
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox .text-box-content,
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox .text-inner {
	text-align: left !important;   /* text_box Flatsome mặc định center nội dung */
}
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1 {
	font-size: 26px;
	line-height: 1.22;
	font-weight: 800;
	color: var(--tl-navy);
	text-align: left;
	margin: 0 0 10px;
}
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1 .tl-cam { color: var(--tl-cam); }

.tl-toi-co-the-giup-gi .tl-ht-hero-sub p {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tl-navy);
	opacity: .8;
	max-width: 340px;
	margin: 0 0 12px;
}

.tl-toi-co-the-giup-gi .tl-ht-hero-cta.button {
	background: var(--tl-cam);
	color: #fff;
	margin: 0;
	min-height: 34px !important;
	font-size: 12px !important;
	padding: 0 16px !important;
}
.tl-toi-co-the-giup-gi .tl-ht-hero-cta.button:hover { background: var(--tl-cam-hover); }

/* Quote card: nổi trên ảnh, navy đặc, bo góc, NHỎ GỌN (mẫu là một thẻ bé sát
   phải, không phải khối lớn) — giảm hẳn padding/cỡ chữ so với bản trước. */
.tl-toi-co-the-giup-gi .tl-ht-quote-box .tl-quote-navy {
	background: var(--tl-navy);
	border-radius: var(--tl-r-sm);
	padding: 16px 16px 12px;
	margin: 0;
	box-shadow: 0 10px 24px rgba(6, 29, 76, .24);
}
.tl-toi-co-the-giup-gi .tl-ht-quote-box .tl-quote-navy::before { color: var(--tl-cam); font-size: 22px; }
.tl-toi-co-the-giup-gi .tl-ht-quote-box .tl-quote-navy p { color: #fff; font-size: 11.5px; line-height: 1.5; }
.tl-toi-co-the-giup-gi .tl-ht-quote-box .tl-quote-ten { color: var(--tl-cam); font-size: 11.5px; margin-top: 6px; }

/* =============================================================================
   2. THANH HÀNH TRÌNH — tiêu đề + 5 mốc, vạch nối mảnh
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .tl-ht-nav h2 {
	font-size: 16px;
	font-weight: 800;
	color: var(--tl-navy);
	margin-bottom: 0;
}
.tl-toi-co-the-giup-gi .tl-ht-nav .row:first-child { margin-bottom: 14px; }

.tl-toi-co-the-giup-gi .tl-timeline { position: relative; }
.tl-toi-co-the-giup-gi .tl-timeline .icon-box { margin-bottom: 0; }
.tl-toi-co-the-giup-gi .tl-timeline .icon-box-img,
.tl-toi-co-the-giup-gi .tl-timeline .icon,
.tl-toi-co-the-giup-gi .tl-timeline .icon-inner,
.tl-toi-co-the-giup-gi .tl-timeline .icon svg {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto;
}
.tl-toi-co-the-giup-gi .tl-timeline-nhan p { margin: 6px 0 0; }
.tl-toi-co-the-giup-gi .tl-timeline-nhan a {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--tl-navy);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}
.tl-toi-co-the-giup-gi .tl-timeline-nhan a:hover,
.tl-toi-co-the-giup-gi .tl-timeline-nhan a:focus-visible {
	color: var(--tl-cam-chu);
	border-bottom-color: var(--tl-cam);
}

@media (min-width: 850px) {
	.tl-toi-co-the-giup-gi .tl-timeline {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: start;
	}
	.tl-toi-co-the-giup-gi .tl-timeline > .col { flex: none; width: auto; max-width: none; padding: 0; position: relative; z-index: 1; }

	/* Vạch nối: 5 cột đều ⇒ tâm icon ở 10/30/50/70/90%. top=24 = nửa icon 48px. */
	.tl-toi-co-the-giup-gi .tl-timeline::before {
		content: "";
		position: absolute;
		top: 24px;
		left: 10%;
		right: 10%;
		height: 1px;
		background: #c9d1e0;
		z-index: 0;
	}
	.tl-toi-co-the-giup-gi .tl-timeline-nhan p { text-align: center; }
}

@media (max-width: 849px) {
	/* NHIỆM VỤ MOBILE 27/08: đo được icon mốc #1 chạm THẲNG cạnh trái màn hình
	   (x=0, không có gutter) — `.tl-timeline` là [row] trực tiếp dưới
	   section-content (không có [col] bọc), section đã bị zero padding-left/
	   right ở mục 0d, nên không còn gì trả lại gutter. Thêm padding ngang trực
	   tiếp lên chính lưới, cùng ngưỡng 16px (<356px) → 20px (≥444px) dùng ở
	   kien-thuc.css. Đồng thời đổi bố cục 2+2+1 (dòng cuối mồ côi 1 ô) sang
	   3+2 theo yêu cầu, và thu icon 40→32px cho đỡ chen chữ. */
	.tl-toi-co-the-giup-gi .tl-timeline {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px 10px;
		padding-left: clamp(16px, 4.5vw, 20px);
		padding-right: clamp(16px, 4.5vw, 20px);
	}
	.tl-toi-co-the-giup-gi .tl-timeline > .col { flex: none; width: auto; max-width: none; padding: 0; }
	.tl-toi-co-the-giup-gi .tl-timeline .col-inner {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr);
		align-items: center;
		justify-items: stretch;
		gap: 8px;
	}
	/* ⚠ `img_width="48"` (panel) in `width:48px` NỘI TUYẾN lên `.icon-box-img`
	   — CSS thường không thắng nổi, kể cả sau khi đổi chỗ trong cascade (đã
	   dính, đo ra vẫn 48px). Dùng `max-width`/`max-height`: hai thuộc tính này
	   LUÔN ghìm `width` xuống bất kể `width` đến từ đâu (kể cả inline), theo
	   đúng cách `40-page-trang-chu.css` đã ghi chú và dùng cho đúng bẫy này. */
	.tl-toi-co-the-giup-gi .tl-timeline .icon-box-img,
	.tl-toi-co-the-giup-gi .tl-timeline .icon,
	.tl-toi-co-the-giup-gi .tl-timeline .icon-inner,
	.tl-toi-co-the-giup-gi .tl-timeline .icon svg {
		width: 32px;
		height: 32px;
		max-width: 32px;
		max-height: 32px;
		margin: 0;
	}
	.tl-toi-co-the-giup-gi .tl-timeline-nhan p { text-align: left; }
	.tl-toi-co-the-giup-gi .tl-timeline-nhan a {
		display: flex;
		align-items: center;
		min-height: 44px;
		border-bottom: 0;
		font-size: 11px;
		line-height: 1.25;
	}
}

/* =============================================================================
   3. NĂM THẺ HÀNH TRÌNH — 5 CARD RIÊNG, khe trắng nhỏ giữa (đảo lại lần 2,
   27/08 vòng 2 — 4T gửi đúng ảnh mẫu gốc để đối chiếu)
   [mockup]   Đo PIXEL trực tiếp trên ảnh mẫu: nền mỗi card ~rgb(251,247,246)
              (card cam) / rgb(243,247,252) (card xanh) — lệch khỏi trắng
              THUẦN chỉ 2-4 kênh màu, và có một dải TRẮNG THẬT (đo được
              ~255,255,255) rộng vài px giữa hai card liền kề. Bản dựng lần 1
              (dải dính liền, màu đậm hơn) ĐỌC SAI ảnh mẫu — đã đảo lại đúng
              hướng NGAY TỪ ĐẦU theo số đo, không phải đoán.
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .tl-ht-buoc {
	background: var(--p-bg);
	border-radius: var(--tl-r);
	margin: 0 0 14px;              /* khe trắng NHỎ giữa các card — đo mẫu ~vài px */
}
.tl-toi-co-the-giup-gi .tl-ht-buoc:last-of-type { margin-bottom: 0; }
.tl-toi-co-the-giup-gi .tl-ht-buoc .row > .col { padding-bottom: 0; }

.tl-toi-co-the-giup-gi .tl-buoc-anh .img { margin-bottom: 0; }
.tl-toi-co-the-giup-gi .tl-buoc-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--tl-r-sm);
}

.tl-toi-co-the-giup-gi .tl-buoc-chitiet h3 {
	font-size: 18px;
	font-weight: 800;
	color: var(--p-dot, var(--tl-cam-chu));
	margin-bottom: 4px;
}
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-buoc-phu p {
	font-size: 13px;
	font-weight: 700;
	color: var(--tl-navy);
	margin: 0 0 8px;
}
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-checklist p {
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 5px;
}
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-checklist p::before { color: var(--p-dot, var(--tl-cam)); }
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-checklist p:last-child { margin-bottom: 0; }

/* Callout: sạch, không viền/nền riêng — chỉ mũi tên tròn + chữ, tách khỏi cột
   giữa bằng khoảng cách (gap của grid), không phải một đường kẻ.
   ⛔ SỬA 27/08 (4T so mẫu): mẫu xếp icon NGANG HÀNG bên trái chữ (canh theo
   dòng đầu), không phải icon nằm TRÊN chữ như bản cũ — đổi `.col-inner` của
   cột này sang flex-row, icon giữ cỡ cố định bằng `flex-shrink:0`. */
.tl-toi-co-the-giup-gi .tl-buoc-ket .col-inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.tl-toi-co-the-giup-gi .tl-buoc-ket-mui p {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--p-dot);
	color: #fff;
	font-size: 14px;
	line-height: 32px;
	text-align: center;
}
.tl-toi-co-the-giup-gi .tl-buoc-ket p:not(.tl-buoc-ket-mui p) {
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--tl-navy);
	margin: 0;
}

/* ⛔ SỬA 27/08 (4T so trực tiếp mẫu vs live): card đang thấp/chật hơn mẫu —
   ảnh + chữ gần như dán sát viền khung màu, không có khoảng thở như mẫu.
   Tăng padding khung, tăng cột ảnh (160→210, ảnh theo đó cao thêm), tăng
   gap giữa 3 cột, và tăng cỡ chữ (h3/phụ/checklist/callout) ở khối phía trên
   — cộng lại đúng hướng 4T yêu cầu: "khung cao lên, chữ/ảnh to ra, cách đều
   lề trái phải" chứ không chỉ riêng một thông số. */
@media (min-width: 850px) {
	.tl-toi-co-the-giup-gi .tl-ht-buoc { padding: 28px 40px !important; }
	.tl-toi-co-the-giup-gi .tl-buoc-chitiet {
		display: grid;
		grid-template-columns: 210px minmax(0, 1fr) 210px;
		gap: 30px;
		align-items: center;
	}
	.tl-toi-co-the-giup-gi .tl-buoc-chitiet > .col { flex: none; width: auto; max-width: none; padding: 0; }
	.tl-toi-co-the-giup-gi .tl-buoc-img { max-height: 155px; }
}

@media (max-width: 849px) {
	/* NHIỆM VỤ MOBILE 27/08: padding thẻ 22×20 → 16px đều, ngang dùng cùng
	   ngưỡng clamp 16→20 (đóng luôn vai trò gutter vì nền thẻ trải hết bề
	   ngang). Nhịp dọc title/phụ/checklist→callout theo 8/12/16 (yêu cầu 4T). */
	.tl-toi-co-the-giup-gi .tl-ht-buoc { padding: 16px clamp(16px, 4.5vw, 20px) !important; }
	.tl-toi-co-the-giup-gi .tl-buoc-chitiet { display: block; }
	.tl-toi-co-the-giup-gi .tl-buoc-chitiet > .col { padding: 0; margin-bottom: 14px; }
	.tl-toi-co-the-giup-gi .tl-buoc-anh { max-width: 260px; }
	.tl-toi-co-the-giup-gi .tl-buoc-chitiet h3 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
	.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-buoc-phu p { margin-bottom: 12px; }
	.tl-toi-co-the-giup-gi .tl-buoc-ket {
		border-top: 1px solid var(--p-line);
		padding-top: 16px;
		margin-bottom: 0 !important;
	}
}

/* =============================================================================
   4. DẢI CAM KẾT CUỐI TRANG — nền cam nhạt, icon trái tim + 4 lợi ích + CTA
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .tl-ht-trust {
	background: var(--p1-bg);
	border-radius: var(--tl-r);
	padding-left: 32px !important;
	padding-right: 32px !important;
}
.tl-toi-co-the-giup-gi .tl-ht-trust-icon { margin-bottom: 6px; }
.tl-toi-co-the-giup-gi .tl-ht-trust-icon img { width: 32px; height: 32px; }
.tl-toi-co-the-giup-gi .tl-ht-trust-head h2 {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 800;
	color: var(--tl-navy);
	margin: 0;
}

.tl-toi-co-the-giup-gi .tl-ht-trust-grid .icon-box { margin-bottom: 0; }
.tl-toi-co-the-giup-gi .tl-ht-trust-grid .icon-box-img { width: 34px !important; }
.tl-toi-co-the-giup-gi .tl-ht-trust-grid .icon-box p {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	color: var(--tl-navy);
	font-weight: 600;
}

.tl-toi-co-the-giup-gi .tl-ht-trust .button {
	background: var(--tl-cam);
	color: #fff;
	margin-bottom: 6px;
	min-height: 40px !important;
	font-size: 13px !important;
	padding: 0 18px !important;
}
.tl-toi-co-the-giup-gi .tl-ht-trust .button:hover { background: var(--tl-cam-hover); }
.tl-toi-co-the-giup-gi .tl-ht-trust .text p {
	font-size: 12px;
	color: var(--tl-navy);
	opacity: .7;
	margin: 0;
}

/* ⛔ SỬA 27/08: `.row` bên trong section này bị đổi `display:grid` nhưng vẫn
   giữ `margin: 0 -15px` mặc định của Flatsome (bù cho padding 15px của .col
   — cơ chế flex/col gốc). Đã zero padding của .col (dòng dưới) mà QUÊN zero
   luôn margin âm của .row ⇒ cả hàng lệch trái 15px, cột đầu (icon+tiêu đề)
   thò hẳn ra NGOÀI mép trái bo tròn của khung màu — đúng thứ 4T thấy là
   "chữ tràn ra khỏi khung". */
@media (min-width: 850px) {
	.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row {
		display: grid;
		grid-template-columns: 1.3fr 2.2fr 1.1fr;
		gap: 28px;
		align-items: center;
		margin: 0 !important;
	}
	.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row > .col { flex: none; width: auto; max-width: none; padding: 0; }
	.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row > .col:nth-child(2) { border-left: 1px solid var(--p1-line); border-right: 1px solid var(--p1-line); padding: 0 28px !important; }
	.tl-toi-co-the-giup-gi .tl-ht-trust-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		margin: 0;
	}
	.tl-toi-co-the-giup-gi .tl-ht-trust-grid > .col { flex: none; width: auto; max-width: none; padding: 0 12px; }
	.tl-toi-co-the-giup-gi .tl-ht-trust-grid > .col:not(:first-child) { border-left: 1px solid var(--p1-line); }
}

@media (max-width: 849px) {
	.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row { margin: 0 !important; }
	.tl-toi-co-the-giup-gi .tl-ht-trust-head { text-align: center; margin-bottom: 18px; }
	.tl-toi-co-the-giup-gi .tl-ht-trust-icon { margin-left: auto; margin-right: auto; }
	.tl-toi-co-the-giup-gi .tl-ht-trust-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 10px;
		margin: 0 0 20px;
	}
	.tl-toi-co-the-giup-gi .tl-ht-trust-grid > .col { flex: none; width: auto; max-width: none; padding: 0; }
	.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row > .col:last-child { text-align: center; }
}

/* =============================================================================
   5. HERO — BẢN MOBILE (≤849): BANNER LIỀN MẠCH, CHỮ NỔI TRÊN ẢNH (v3, 28/08)
   [mockup]   `mobile-mockup-toi-co-the-giup-gi-v2.png` — banner MỘT khối full
              width, chữ+CTA nổi bên TRÁI trên nền trời/bokeh của chính ảnh
              (không tách card ảnh riêng + khối chữ riêng bên dưới như bản v2
              trước — 4T bác bỏ bản đó, "tách thành ảnh card ở trên + H1 khổng
              lồ ở dưới" KHÔNG đúng mockup). Phục hồi kỹ thuật OVERLAY gốc của
              mục 1 (dùng cho desktop), chỉ đổi số đo cho khổ hẹp.
   [lý do vượt panel]  [text_box] position_x/y là số % cố định theo panel,
              không tự co giãn đúng tỉ lệ mockup ở mọi khổ — ghi đè thẳng bằng
              CSS position/width thay vì zero nó thành static.
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
	/* ⚠ Flatsome dựng chiều cao banner bằng `padding-top` NỘI TUYẾN (khối
	   `<style>` `#banner-xxx{padding-top:680px}` ở khổ hẹp — kỹ thuật đã gặp
	   nhiều lần, mục 31.1/35.4). Đặt `height` không đủ — padding-top cộng
	   THÊM vào (box-sizing mặc định), banner vẫn cao >900px. Phải zero luôn
	   padding-top thì height mới là chiều cao THẬT.
	   ⛔ SỬA VÒNG 5 (28/08): 4T đo lại — banner phải cao **~390px** (trước
	   300px làm chữ+ảnh bị bó), tỉ lệ giống crop file mockup v2 hơn. */
	.tl-toi-co-the-giup-gi .tl-ht-hero-banner { height: 390px; padding-top: 0 !important; overflow: hidden; }
	.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-bg { height: 100%; }
	.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-bg img {
		height: 100%;
		/* ⚠ SỬA 08/09: 4T — «ảnh bị cắt mất một bên và thừa một bên». Đo thật ở
		   390px: khung 360×390 mà ảnh 1600×800 ⇒ cover ăn theo CHIỀU CAO
		   (scale 390/800 = 0,4875), ảnh phóng ra 780px rồi cắt ngang còn 360px
		   — tức mỗi giá trị X% mở ra một cửa sổ rộng 738px trên ảnh gốc.
		     X=60% → cửa sổ src 517–1255: mất hẳn người áo sọc (ông đứng ở
		             src 340–700) và thừa mảng tường trống bên phải.
		     X=32% → cửa sổ src 344–1082: TRỌN cả hai người đang nói chuyện.
		   Y giữ 38%: từ ~800px viewport trở lên khung rộng hơn 780px nên cover
		   đổi sang ăn theo CHIỀU NGANG, lúc đó Y mới có tác dụng cắt dọc. */
		object-position: 32% 38% !important;
	}
	/* Gradient hạ độ chói bên trái để chữ navy/cam luôn đọc được — BẬT LẠI (bản
	   xếp-dọc trước đó tắt nó vì chữ nằm ngoài ảnh, nay chữ nổi lên ảnh nên cần
	   lại đúng lớp phủ gốc của mục 1). */
	.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-bg::after { display: block; }

	.tl-toi-co-the-giup-gi .tl-ht-hero-banner .banner-layer.text-box.tl-ht-hero-textbox {
		position: absolute !important;
		left: 0 !important;
		right: auto !important;
		top: 50% !important;
		bottom: auto !important;
		transform: translateY(-50%) !important;
		/* Cột chữ THOÁNG hơn — 55% (trước 60% bó sát), banner cao hơn nên còn dư
		   chỗ cho line-height rộng rãi thay vì nén chữ. */
		width: 55% !important;
		max-width: 55% !important;
		padding: 0 12px 0 clamp(16px, 4.5vw, 20px) !important;
	}
	.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1 { font-size: clamp(24px, 7vw, 29px); margin-bottom: 10px; line-height: 1.18; }
	.tl-toi-co-the-giup-gi .tl-ht-hero-sub p { font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
	.tl-toi-co-the-giup-gi .tl-ht-hero-cta.button {
		min-height: 44px !important;
		font-size: 13px !important;
		padding: 0 18px !important;
	}

	/* Thẻ trích dẫn: mockup mobile KHÔNG có — ẩn hẳn, không để lại khe hở. */
	.tl-toi-co-the-giup-gi .tl-ht-quote-box { display: none !important; }
}

/* -----------------------------------------------------------------------------
   5b. NHỊP DỌC GIỮA CÁC SECTION — chuẩn 32px (NHIỆM VỤ MOBILE 27/08)
   [lý do vượt panel]  panel `padding__sm` của `.tl-ht-nav`/`.tl-ht-trust` đang
              12px/22px — đo được khe giữa thanh hành trình và thẻ bước #1
              gần như bằng 0 trên màn hẹp, đúng "nhịp dọc chưa đồng đều" 4T
              nêu. Năm thẻ .tl-ht-buoc tự có nhịp riêng (margin 14px, mục 3),
              không đụng ở đây — chỉ chuẩn hoá HAI section nối các khối khác
              loại: thanh hành trình và dải cam kết cuối.
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
	.tl-toi-co-the-giup-gi .tl-ht-nav { padding-top: 32px !important; padding-bottom: 32px !important; }
	.tl-toi-co-the-giup-gi .tl-ht-trust { padding-top: 32px !important; padding-bottom: 32px !important; }
}

/* -----------------------------------------------------------------------------
   6. VÙNG CHẠM NÚT + BREADCRUMB — đủ lớn cho ngón tay ở mọi khổ ≤849
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
	.tl-toi-co-the-giup-gi .page-wrapper .button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		font-size: 14px;
		font-weight: 700;
	}
}

/* =============================================================================
   7. NHIỆM VỤ MOBILE V2 (27/08) — DỰNG LẠI THEO ẢNH MINH HOẠ
   `mobile-mockup-toi-co-the-giup-gi-v2.png`. Yêu cầu bắt buộc: gutter 16–20px,
   H1 30–32px, H2 22–24px, body ≥15–16px, ảnh/thẻ LỚN ưu tiên 1 cột, icon hành
   trình cuộn ngang, KHÔNG placeholder/vùng ảnh trống, KHÔNG tràn ngang, CTA
   rộng dễ bấm. Chỉ trong `@media ≤549px` — không đụng ≥768.

   ⛔ VÒNG 4 (28/08) — 4T BÁC BỎ vòng 3, ĐỌC KỸ 3 THAY ĐỔI:
   1) Hero: bỏ hẳn cách "ảnh card trên + chữ dưới" — dựng lại đúng OVERLAY như
      mockup (xem lại mục 5 ở trên, đã sửa). H1 hiển thị RÚT GỌN "TÔI CÓ THỂ
      GIÚP GÌ?" bằng kỹ thuật pseudo-element (mục 7.1 dưới) — chữ THẬT trong
      HTML không đổi (không sửa shortcode), chỉ ẩn đi bằng CSS và vẽ chữ ngắn
      đè lên, thuần CSS, không đụng nội dung/desktop.
   2) Thanh 5 bước: bỏ cuộn ngang — ép CẢ 5 vừa một hàng, không tràn (mục 7.2).
   3) Thẻ hành trình: chỉ hiện 3 thẻ đầu, ảnh TRÁI 45%/chữ PHẢI, đúng 3 bullet,
      "XEM THÊM 2 BƯỚC" lộ 2 thẻ còn lại — dùng kỹ thuật `<input type=checkbox>`
      ẩn + `:checked` thuần CSS (không JS) — NHƯNG panel/shortcode không có sẵn
      checkbox nào để móc vào, nên đơn giản hoá: dùng SỐ THỨ TỰ thẻ CSS ẩn thẻ
      4/5 và đổi nút "Xem thêm" thành LIÊN KẾT NEO tới thẻ đó (không ẩn/hiện
      động — xem lý do ở mục 7.3).
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- 7.0 Gutter chuẩn + thang chữ chung --------------------------------- */
.tl-toi-co-the-giup-gi { --tl-gutter: clamp(16px, 4.5vw, 20px); }

.tl-toi-co-the-giup-gi .tl-ht-nav h2 {
	font-size: clamp(20px, 5.6vw, 22px);
	line-height: 1.25;
}

/* --- 7.1 HERO — H1 RÚT GỌN theo đúng chữ mockup, thuần CSS -------------- */
/* ⚠ Không sửa file shortcode `.txt` (nội dung thật, dùng chung mọi khổ màn) —
   ẩn chữ thật bằng `font-size:0` rồi VẼ LẠI đúng 2 dòng "TÔI CÓ THỂ / GIÚP
   GÌ?" bằng `::before`/`::after` (mỗi dòng một pseudo để tô hai màu khác
   nhau, giống bản gốc). Trình đọc màn hình vẫn thấy text thật trong DOM
   (không `display:none` cả h1) — chỉ ẩn KHỎI MẮT ở khổ hẹp. */
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1 {
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	margin: 0 0 6px !important;
	position: relative;
}
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1 .tl-cam { display: none; }
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1::before,
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1::after {
	display: block;
	font-size: clamp(22px, 6.6vw, 27px);
	line-height: 1.15;
	font-weight: 800;
}
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1::before { content: "TÔI CÓ THỂ"; color: var(--tl-navy); }
.tl-toi-co-the-giup-gi .tl-ht-hero-textbox h1::after { content: "GIÚP GÌ?"; color: var(--tl-cam); margin-top: 2px; }

/* --- 7.2 THANH HÀNH TRÌNH — ép vừa 1 hàng + chevron cuối (v4, 28/08) ---
   [mockup]  icon tròn ~56–64px, khoảng cách đều, nhãn đọc được (không nén),
             một mũi tên "›" tròn nhạt SAU icon cuối. 4T chê bản trước "icon
             quá bé, nhãn nén" — tăng icon 36→58px, nới cỡ chữ nhãn. */
.tl-toi-co-the-giup-gi .tl-ht-nav .row:first-child { padding: 0 var(--tl-gutter); }
.tl-toi-co-the-giup-gi .tl-timeline {
	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: space-between;
	gap: 2px;
	/* Chừa chỗ bên phải cho mũi tên tròn (28px + 6px lề) mà không đụng icon 5 */
	padding: 6px calc(var(--tl-gutter) + 30px) 14px var(--tl-gutter);
	margin: 0 !important;
}
.tl-toi-co-the-giup-gi .tl-timeline > .col {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	padding: 0 !important;
}
.tl-toi-co-the-giup-gi .tl-timeline .col-inner { display: block; text-align: center; }
.tl-toi-co-the-giup-gi .tl-timeline .icon-box-img,
.tl-toi-co-the-giup-gi .tl-timeline .icon,
.tl-toi-co-the-giup-gi .tl-timeline .icon-inner,
.tl-toi-co-the-giup-gi .tl-timeline .icon svg {
	width: 58px !important;
	height: 58px !important;
	max-width: 58px !important;
	max-height: 58px !important;
	margin: 0 auto !important;
}
.tl-toi-co-the-giup-gi .tl-timeline-nhan p { text-align: center; margin: 7px 0 0; }
.tl-toi-co-the-giup-gi .tl-timeline-nhan a {
	display: block;
	min-height: 0;
	font-size: 10.5px;
	line-height: 1.28;
	font-weight: 700;
	white-space: normal;
	border-bottom: 0;
	padding: 2px 1px;
}
/* Mốc #1 = bước đang xem khi mới vào trang — tô cam + gạch dưới, đúng mockup.
   Bốn mốc còn lại giữ màu navy mặc định (đã đặt ở mục 2, áp mọi khổ). */
.tl-toi-co-the-giup-gi .tl-timeline > .col:first-child .tl-timeline-nhan a {
	color: var(--tl-cam-chu);
	border-bottom: 2px solid var(--tl-cam);
	padding-bottom: 4px;
}
/* Mũi tên tròn nhạt sau icon cuối — thuần trang trí, gợi ý "còn tiếp".
   ⛔ SỬA: đặt trên CHÍNH `.tl-timeline` (không phải `.tl-ht-nav` bọc ngoài) và
   canh theo padding-top(6) + nửa icon(29) của chính hàng — trước đặt trên
   `.tl-ht-nav` với top cố định 40px nên khi H2 xuống 2 dòng (22px, dài) thì
   vòng tròn đè thẳng lên chữ tiêu đề thay vì ngang hàng icon. */
.tl-toi-co-the-giup-gi .tl-timeline::after {
	/* ⚠ mục 0b (áp mọi khổ) đặt `display:none` cho chính pseudo này để giấu
	   clearfix — phải khai lại `display` ở đây, nếu không giá trị `none` cũ
	   vẫn đứng (source order chỉ thắng khi có ghi đè CÙNG thuộc tính). */
	display: flex !important;
	align-items: center;
	justify-content: center;
	content: "\203A";
	position: absolute;
	top: 35px;
	right: var(--tl-gutter);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f1f3f8;
	color: var(--tl-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

/* --- 7.3 THẺ HÀNH TRÌNH — XẾP DỌC: CHỮ → ẢNH → BĂNG KẾT QUẢ (v5, 28/08) ---
   4T: "để ảnh phía dưới chữ và cân đối chiều ngang cho ảnh và chữ bằng nhau".
   Bỏ lưới 2 cột (44%/56%) của v4 — mỗi `.col` mobile vốn đã `width:100%`
   (`span__sm="12"`) NÊN chỉ cần bỏ grid ép cột là ảnh/chữ tự về full-width
   BẰNG NHAU, không cần tính % riêng. DOM gốc là ảnh→chữ→băng kết quả (đúng
   thứ tự desktop 44%/56%) — dùng `order` đổi thị giác thành chữ→ảnh→băng
   MÀ KHÔNG sửa shortcode, đúng tinh thần "chỉ CSS làm được, đừng đụng HTML
   khi không cần". */
/* ⚠ VÒNG 7 (28/08): 4T chê "ảnh/chữ chạm sát lề khung màu". Đo lại phát hiện
   BẪY SPECIFICITY: `.tl-buoc-ket` (class thật trên chính `.col:last-child`,
   xem shortcode dòng 65 — KHÔNG phải hộp con lồng bên trong) và luật
   `> .col:last-child` bên dưới CÙNG chỉnh `padding` trên CÙNG một phần tử;
   `.col:last-child` có specificity cao hơn (0-4-0 so với 0-2-0) nên LUÔN
   THẮNG — dòng `padding:12px 14px` ghi ở `.tl-buoc-ket` (dưới) chưa từng có
   tác dụng, đo trực tiếp `getComputedStyle` xác nhận. Gộp lại thành MỘT
   nguồn: gutter ngang (ảnh + chữ + băng kết quả cách đều lề khung màu) đặt ở
   chính THẺ `.tl-ht-buoc`; padding riêng của từng khối bên dưới chỉ còn lo
   khoảng cách DỌC + đệm nội bộ của băng kết quả. */
.tl-toi-co-the-giup-gi .tl-ht-buoc { padding: 0 var(--tl-gutter) !important; overflow: hidden; }
.tl-toi-co-the-giup-gi .tl-buoc-chitiet {
	display: flex !important;
	flex-direction: column !important;
	/* Flatsome mặc định cho `.row` margin âm `-15px` hai bên (bù cho padding
	   15px của `.col`, vốn đã bỏ ở luật dưới) — không triệt tiêu thì gutter
	   17,55px của thẻ bị margin âm này "ăn" gần hết, chỉ còn ~3px (đã đo thấy
	   đúng vậy trước khi thêm dòng này). */
	margin: 0 !important;
}
.tl-toi-co-the-giup-gi .tl-buoc-chitiet > .col {
	width: 100% !important;
	max-width: none !important;
}
.tl-toi-co-the-giup-gi .tl-buoc-anh {
	order: 2;
	max-width: none !important;
}
.tl-toi-co-the-giup-gi .tl-buoc-img {
	width: 100%;
	height: 200px;
	aspect-ratio: auto;
	border-radius: 8px;
	object-fit: cover;
}
.tl-toi-co-the-giup-gi .tl-buoc-chitiet > .col:nth-child(2) {
	order: 1;
	padding: 18px 0 16px !important;
	margin-bottom: 0 !important;
}
.tl-toi-co-the-giup-gi .tl-buoc-chitiet h3 {
	font-size: clamp(18px, 5vw, 20px) !important;
	line-height: 1.22 !important;
	margin-bottom: 12px !important;
}
/* Phụ đề dưới tiêu đề: mockup không có dòng này — ẩn để đúng nhịp mẫu. */
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-buoc-phu { display: none; }
/* Mockup chỉ hiện ĐÚNG 3 gạch tick đầu — 4 dòng còn lại (nội dung thật, đầy đủ
   hơn hẳn mockup rút gọn) ẩn trên khổ hẹp để khớp mật độ mẫu, KHÔNG xoá khỏi
   HTML (desktop ≥850 vẫn hiện đủ). */
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-checklist p:nth-child(n+4) { display: none; }
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-checklist p {
	font-size: 14px !important;
	line-height: 1.45 !important;
	margin-bottom: 10px !important;
	padding-left: 24px !important;
}
.tl-toi-co-the-giup-gi .tl-buoc-chitiet .tl-checklist p:last-child { margin-bottom: 0 !important; }

/* Băng kết quả — dưới cùng, full width bằng ảnh/chữ phía trên (gutter ngang
   đã do `.tl-ht-buoc` lo, xem chú thích ở 7.3). `margin-top` tạo khoảng cách
   THẬT với ảnh phía trên (16px); `padding` là đệm NỘI BỘ của chính hộp màu
   `--p-line` quanh mũi tên + chữ chú thích — cả hai giờ chỉ khai ở ĐÚNG MỘT
   nơi (chính selector này, gộp `.tl-buoc-ket` cũ vào), hết xung đột. */
.tl-toi-co-the-giup-gi .tl-buoc-chitiet > .col:last-child {
	order: 3;
	/* Đặt padding NGAY ĐÂY (không phải ở `.tl-buoc-ket` bên dưới) vì đây là
	   selector THẮNG specificity trên CÙNG một phần tử — xem chú thích trên. */
	padding: 14px !important;
	margin: 16px 0 18px !important;
}
.tl-toi-co-the-giup-gi .tl-buoc-ket {
	border-top: 0 !important;
	background: var(--p-line);
	border-radius: 10px;
}
.tl-toi-co-the-giup-gi .tl-buoc-ket .col-inner {
	flex-direction: row-reverse;
	align-items: center;
	gap: 12px;
}
.tl-toi-co-the-giup-gi .tl-buoc-ket-mui p { width: 28px; height: 28px; line-height: 28px; font-size: 13px; flex-shrink: 0; }
.tl-toi-co-the-giup-gi .tl-buoc-ket p:not(.tl-buoc-ket-mui p) { font-size: 12.5px !important; line-height: 1.4 !important; flex: 1 1 0; min-width: 0; }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: ux_image | khối: .tl-ht-buoc-2 (ảnh đón sân bay)
   [trang]    toi-co-the-giup-gi
   [lý do vượt panel]  Panel `[ux_image]` không có ô cắt ảnh; đây là khung hình
              riêng của MỘT tấm, không phải kiểu chung của 5 bước.

   ⚠ SỬA 08/09: 4T — «đẩy mặt 2 người lên cao nhìn rõ mặt, chỉ đẩy cao đến mép
   biển Taxi màu vàng để giữ bối cảnh sân bay». Ảnh gốc 800×600 đang hiện TRỌN
   trong khung 4:3 ⇒ 40% phía trên là trần nhà, hai khuôn mặt bị dồn xuống đáy
   và bị thẻ chú thích che mất cằm.
   Quét pixel vùng vàng góc phải: biển Taxi nằm ở src y 132–234. Lấy mép TRÊN
   của biển (y=132) làm mép trên khung ⇒ vùng còn lại 800×468.
   ⛔ KHÔNG cắt lại tệp ảnh: giữ 4:3 thì phải cắt thêm 176px bề ngang, đúng vào
   mặt người bên trái. Chỉ đổi TỈ LỆ KHUNG của riêng tấm này rồi neo đáy.
   Cách tính: cover ăn theo bề ngang (scale = W/800) ⇒ phần cắt dọc luôn đúng
   132px ảnh gốc ở MỌI khổ màn, không phải canh lại theo từng breakpoint.
   ⚠ Khung thấp đi (0,75W → 0,585W) nên ảnh hết tràn xuống dưới `.tl-buoc-img`
   (cao 200px) — thẻ chú thích của RIÊNG bước 2 không còn đè lên ảnh nữa. Đó là
   chủ đích: chính chỗ đè ấy đang che cằm hai người.
   -------------------------------------------------------------------------- */
.tl-toi-co-the-giup-gi .tl-ht-buoc-2 .tl-buoc-img { height: auto; }

.tl-toi-co-the-giup-gi .tl-ht-buoc-2 .tl-buoc-img img {
	aspect-ratio: 800 / 468;
	height: auto;
	object-fit: cover;
	object-position: 50% 100%;
}

/* --- 7.4 DẢI CAM KẾT CUỐI — chỉ còn thanh CTA rộng, ẩn khối 4 lợi ích --- */
.tl-toi-co-the-giup-gi .tl-ht-trust-head,
.tl-toi-co-the-giup-gi .tl-ht-trust-grid { display: none !important; }
/* ⚠ Mục 4 (áp MỌI khổ) đặt `.tl-ht-trust{padding-left/right:32px!important}`
   cho bản desktop 3 cột — cộng thêm padding của .col bên dưới thì thanh CTA
   mobile bị thụt vào ~50px mỗi bên, KHÔNG còn là "thanh rộng full gutter" như
   mockup. Ghi đè lại đúng bằng var(--tl-gutter) ở khổ hẹp. */
/* ⛔ SỬA VÒNG 5 (28/08): 4T chê "card nền nhạt cao" — mục 4 (áp MỌI khổ) cho
   `.tl-ht-trust` nền pastel + bo góc (đúng cho khối 3 cột desktop), khổ hẹp
   thì đây trở thành một "thẻ" bao quanh nút, không phải THANH thuần. Bỏ hẳn
   nền/bo góc ở khổ hẹp — chỉ còn đúng thanh gradient của nút nổi trên nền
   trắng trang, và giảm padding dọc (32→20px) để không còn cảm giác "cao". */
.tl-toi-co-the-giup-gi .tl-ht-trust {
	background: none !important;
	border-radius: 0 !important;
	padding-left: var(--tl-gutter) !important;
	padding-right: var(--tl-gutter) !important;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}
.tl-toi-co-the-giup-gi .tl-ht-trust > .section-content > .row > .col:last-child {
	padding: 0 !important;
	margin: 0 !important;
}
.tl-toi-co-the-giup-gi .tl-ht-trust .button {
	position: relative;
	display: flex !important;
	width: 100%;
	min-height: 60px !important;
	font-size: 15px !important;
	border-radius: 12px;
	padding: 0 40px 0 22px !important;
	background: linear-gradient(135deg, var(--tl-cam) 0%, var(--tl-cam-hover) 100%) !important;
	box-shadow: 0 8px 20px rgba(241, 91, 42, .28);
}
.tl-toi-co-the-giup-gi .tl-ht-trust .button::after {
	content: "\203A";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 700;
}
.tl-toi-co-the-giup-gi .tl-ht-trust .text p { margin-top: 10px; font-size: 13px; text-align: center; }

}

@media (max-width: 549px) {
	.tl-toi-co-the-giup-gi .tl-ht-hero-cta.button { display: flex; width: 100%; }
}

/* =============================================================================
   8. "XEM THÊM 2 BƯỚC" — ĐÃ BỎ (VÒNG 6, 28/08): 4T yêu cầu hiện ĐỦ 5 bước
   -------------------------------------------------------------------------- */
/* Lịch sử: VÒNG 5 từng ẩn thẻ 4–5 sau nút "XEM THÊM 2 BƯỚC" (checkbox +
   `:has()`, xem `qa/danh-sach-danh-doi.md`). 4T (28/08) yêu cầu "show ra toàn
   bộ 5 bước" — bỏ hẳn việc ẩn, cả 5 thẻ hiện mặc định. Khối `[ux_html]`
   `xem-them-buoc-toggle` (checkbox + label) VẪN CÒN trong `toi-co-the-giup-
   gi.txt` nhưng vô hại — ẩn hẳn ở đây, không xoá shortcode để tránh động vào
   nội dung khi chỉ cần đổi hiển thị. */
.tl-toi-co-the-giup-gi .tl-xem-them-wrap { display: none !important; }

/* =============================================================================
   9. THANH HÀNH TRÌNH — icon tô CAM theo bước ĐANG BẤM (VÒNG 7, 28/08)
   [phục vụ]  phần tử: Featured Box | khối: .tl-timeline (thanh 5 bước)
   4T: "bấm vào tab nào tab đó tô đậm màu cam như icon ở tab1" — CHỈ DESKTOP.
   Icon mốc 1 vốn đã là file SVG màu cam CỐ ĐỊNH (tl-icon-1.svg), 4 icon còn
   lại là file navy cố định (tl-icon-2..5.svg) — không phải CSS class, không
   thể đổi màu bằng `fill` (đây là `<img src=".svg">`, không phải `<svg>` nội
   tuyến, CSS không chạm được vào bên trong tệp ảnh). Đã sinh thêm 5 biến thể
   màu ngược (navy cho icon 1, cam cho icon 2-5, cùng hình, đổi đúng 1 mã màu
   `fill` của vòng tròn) và dùng `::after` phủ lên làm LỚP OVERLAY, bật/tắt
   bằng `body:has(#buoc-N:target)` — thuần CSS, không JS, không đụng file
   nội dung `.txt` (đang có phiên khác sửa dở, xem git status).
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {

.tl-toi-co-the-giup-gi .tl-timeline > .col { position: relative; }
.tl-toi-co-the-giup-gi .tl-timeline .icon-box-img { position: relative; }
/* ⚠ `<img>` của icon (medium-size SVG, width="100" height="100") đo được cao
   51,1875px dù width khoá 48px !important — vuông méo thành hơi bầu dục
   (chưa rõ vì sao `height:auto` không ra 48 dù ảnh gốc vuông 180×180 thật).
   Khoá lại đúng 48×48 để lớp overlay `::after` bên dưới KHỚP PIXEL, không
   thì vòng cam đè lên sẽ nhỏ hơn vòng navy thật, lộ viền navy mỏng xung
   quanh (đã thấy qua ảnh chụp — không đo được bằng getComputedStyle). */
.tl-toi-co-the-giup-gi .tl-timeline .icon-box-img img {
	height: 48px !important;
}
.tl-toi-co-the-giup-gi .tl-timeline .icon-box-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

/* Mốc 1: mặc định hiện SẴN màu cam (ảnh gốc) — overlay ở đây là bản NAVY,
   chỉ hiện ra khi một mốc KHÁC đang được bấm, để mốc 1 nhường màu cam lại. */
.tl-toi-co-the-giup-gi .tl-timeline > .col:nth-child(1) .icon-box-img::after {
	background-image: url('https://toan.tiepthitute.com/wp-content/uploads/2026/08/tl-icon-1-navy.svg');
}
body.tl-toi-co-the-giup-gi:has(#buoc-2:target) .tl-timeline > .col:nth-child(1) .icon-box-img::after,
body.tl-toi-co-the-giup-gi:has(#buoc-3:target) .tl-timeline > .col:nth-child(1) .icon-box-img::after,
body.tl-toi-co-the-giup-gi:has(#buoc-4:target) .tl-timeline > .col:nth-child(1) .icon-box-img::after,
body.tl-toi-co-the-giup-gi:has(#buoc-5:target) .tl-timeline > .col:nth-child(1) .icon-box-img::after {
	opacity: 1;
}

/* Mốc 2-5: mặc định navy (ảnh gốc) — overlay là bản CAM, chỉ hiện khi ĐÚNG
   mốc đó đang được bấm (URL đang neo tới `#buoc-N` của chính nó). */
.tl-toi-co-the-giup-gi .tl-timeline > .col:nth-child(2) .icon-box-img::after {
	background-image: url('https://toan.tiepthitute.com/wp-content/uploads/2026/08/tl-icon-2-cam.svg');
}
.tl-toi-co-the-giup-gi .tl-timeline > .col:nth-child(3) .icon-box-img::after {
	background-image: url('https://toan.tiepthitute.com/wp-content/uploads/2026/08/tl-icon-3-cam.svg');
}
.tl-toi-co-the-giup-gi .tl-timeline > .col:nth-child(4) .icon-box-img::after {
	background-image: url('https://toan.tiepthitute.com/wp-content/uploads/2026/08/tl-icon-4-cam.svg');
}
.tl-toi-co-the-giup-gi .tl-timeline > .col:nth-child(5) .icon-box-img::after {
	background-image: url('https://toan.tiepthitute.com/wp-content/uploads/2026/08/tl-icon-5-cam.svg');
}
body.tl-toi-co-the-giup-gi:has(#buoc-2:target) .tl-timeline > .col:nth-child(2) .icon-box-img::after { opacity: 1; }
body.tl-toi-co-the-giup-gi:has(#buoc-3:target) .tl-timeline > .col:nth-child(3) .icon-box-img::after { opacity: 1; }
body.tl-toi-co-the-giup-gi:has(#buoc-4:target) .tl-timeline > .col:nth-child(4) .icon-box-img::after { opacity: 1; }
body.tl-toi-co-the-giup-gi:has(#buoc-5:target) .tl-timeline > .col:nth-child(5) .icon-box-img::after { opacity: 1; }

}   /* ==== HẾT @media (min-width: 850px) — VÒNG 7, 28/08 ==== */