/* =============================================================================
   40-page-ve-toi.css — STYLE DESKTOP RIÊNG TRANG "VỀ TÔI"
   Dựng 20/08/2026 theo brief "chỉnh style desktop trang VỀ TÔI".

   🔒 PHẠM VI — hai lớp cô lập:
      1. TỆP chỉ nạp khi slug = ve-toi (functions.php, luật III.11).
      2. MỌI bộ chọn còn bọc trong `tl-ve-toi` — lớp child theme gắn lên <body>.
      ⇒ Không luật nào ở đây chạm 5 trang kia, WooCommerce hay bài viết.

   📌 Brief xin wrapper `.tl-about-page`. KHÔNG tạo thêm: dự án đã có sẵn
      `body.tl-ve-toi` tự động. Thêm class thứ hai cùng việc là hai chỗ phải nhớ.

   📐 DESKTOP-ONLY: mọi luật bố cục nằm trong @media (min-width: 850px).
      Mobile đã chốt riêng (spec/quyet-dinh-mobile.md) và KHÔNG bị đụng.
      Ngoại lệ CỐ Ý: MÀU áp mọi khổ — màu không phải bố cục.

   ♻️ DÙNG LẠI, KHÔNG VIẾT LẠI (brief §1 · §5 · §28):
      · header · footer · nút CTA → global, tệp này không đụng một dòng;
      · bề ngang dải nội dung → `--tl-be-ngang` ở 00-tokens.css (mục 24);
      · `.tl-checklist` · `.tl-quote-navy` · `.tl-quote-cam` · `.tl-moc`
        → 30-components.css, ở đây chỉ đè phần khác biệt của trang.

   ⚠ CHỖ BRIEF TỰ CHỎI NHAU — đã chọn số cụ thể hơn:
      §29 xin khoảng cách giữa section 20–24px, nhưng §11 xin section "hành
      trình" padding 20/24 và §19 xin "cuộc sống" padding 24. Hai điều đó không
      cùng đúng được: hai section liền nhau, mỗi bên 20–24px padding thì khe hở
      là 40–48px chứ không thể 20–24px.
      ⇒ Lấy số của §11/§19 (cụ thể hơn). Khe hở còn ~40–44px, giảm một nửa so
        với 80px hiện tại. Muốn đúng 20–24px thì padding mỗi section phải xuống
        ~11px và dải nền của 3 section có màu sẽ bó sát chữ.
============================================================================= */

/* -----------------------------------------------------------------------------
   1. BẢNG MÀU — áp MỌI KHỔ (màu không phải bố cục)
   ⛔ Đặt trên `.page-wrapper`, KHÔNG trên <body>: header và footer nằm ngoài
      .page-wrapper và dùng chung toàn site.
   [phục vụ]  toàn trang | khối: biến màu và hình khối
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Customizer chỉ có 2 ô màu; brief §3 cần 11 biến
   ⚠ `--tl-navy` TRÙNG TÊN token toàn site (#010f38); trong phạm vi trang này
     nó thành #071B46. Cố ý, để đồng bộ với Trang chủ và trang Hành trình.
   ⚠ Cam dùng cho CHỮ NHỎ lấy bản đậm hơn cùng hue (#C4400A = token
     --tl-cam-chu có sẵn): #F05A24 chỉ đạt 3,39:1, chữ 13px cần 4,5:1.
     Lý lẽ đầy đủ ở CLAUDE.md 22.5.
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper {
	--tl-navy: #071b46;
	--tl-navy-2: #102b5c;
	--tl-orange: #f05a24;          /* ĐỒ HOẠ: icon, vạch, viền, nút */
	--tl-orange-chu: #c4400a;      /* CHỮ nhỏ — 4,93:1 trên trắng */
	--tl-orange-hover: #d94c18;
	--tl-text: #172033;
	--tl-muted: #687083;
	--tl-border: #e6e9ef;
	--tl-bg-soft: #f7f9fc;
	--tl-orange-soft: #fff8f4;
	--tl-white: #fff;

	--tl-r: 6px;                   /* bo góc thống nhất — brief §10/§15/§23 */
	--tl-r-card: 8px;              /* riêng khối niềm tin — brief §16 */
}

/* =============================================================================
   TỪ ĐÂY TRỞ XUỐNG: CHỈ DESKTOP (≥850px)
============================================================================= */
@media (min-width: 850px) {

/* -----------------------------------------------------------------------------
   0. BỀ NGANG TRANG — ĐÃ GỠ override 26/08, trả lại `--tl-be-ngang` DÙNG CHUNG
   [trang]    ve-toi
   ⚠ 4T PHẢN HỒI 27/08: "bề rộng trang này VÀ TẤT CẢ các trang, bài viết lấy
     theo bề rộng của header và footer." Đo lại: header/footer/5 trang kia/bài
     viết đơn ĐỀU đã dùng chung `--tl-be-ngang` (00-tokens.css, trần 1360px) —
     đúng một dải khớp nhau tuyệt đối ở mọi khổ (§24 "một công thức cho cả
     site"). Override "gần full viewport" thêm ở đây hôm 26/08 (đáp ứng phản
     hồi RIÊNG cho ve-toi lúc đó) hoá ra lại làm ĐÚNG TRANG NÀY lệch khỏi phần
     còn lại — 5 trang kia và bài viết chưa từng lệch. Gỡ hẳn, không thay bằng
     luật khác: ve-toi quay về dùng `--tl-be-ngang` y hệt mọi trang, không cần
     CSS riêng cho mục này nữa. */

/* -----------------------------------------------------------------------------
   2. NHỊP DỌC — trang phải đọc liền mạch như một câu chuyện
   [phục vụ]  phần tử: Section | khối: mọi section (.tl-vt-sec)
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Padding TRÊN/DƯỚI đã chỉnh ở panel (40→20–24px). Phần
              còn lại đây lo là khe hở CUỐI TRANG, thứ panel không với tới:
              brief §28 đòi CTA cuối nối thẳng footer, đo được đang hở 60px.
   ⚠ Đã ĐOÁN SAI HAI LẦN chỗ sinh ra khe 30px trước footer: không phải
     `margin-bottom` của section (đo ra 0), cũng không phải `padding-bottom`
     của `.col` bọc ngoài (cũng 0). Đi ngược chuỗi cha con mới ra: nó nằm trên
     CHÍNH `.page-wrapper`, và Flatsome đặt bằng bộ chọn **ID** `#content`.
   ⛔ Vì vậy `.tl-ve-toi .page-wrapper{padding-bottom:0}` KHÔNG ăn — class không
     bao giờ thắng ID. Phải nêu đích danh ID để lên 1-1-0. Vẫn không cần
     `!important`. Cùng họ lỗi "luật nằm đó rành rành mà không ăn" với
     `.row.row-small` hoà specificity ở mục 24.4.
   -------------------------------------------------------------------------- */
/* ⚠ HAI chỗ, không phải một — đã sửa hụt một vòng vì THAY vế này cho vế kia
   thay vì thêm cả hai. Đo lại sau mỗi lần sửa mới lộ ra:
     · `#content.page-wrapper`  30px  ← Flatsome đặt bằng ID
     · `.row-main > .col`       30px  ← padding-bottom mặc định của mọi .col
   Gỡ một cái thì cái kia trám vào, và con số đo được vẫn y nguyên 30px —
   đúng kiểu làm người sửa tưởng luật của mình không ăn. */
.tl-ve-toi #content.page-wrapper { padding-bottom: 0; }
.tl-ve-toi .page-wrapper > .row-main > .col { padding-bottom: 0; }

/* -----------------------------------------------------------------------------
   3. BREADCRUMB — có mặt, không giành nhìn với H1 (brief §6)
   [phục vụ]  phần tử: Text (rank_math_breadcrumb) | khối: .tl-breadcrumb
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Breadcrumb do Rank Math in ra, không có phần tử panel nào.
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-breadcrumb,
.tl-ve-toi .tl-breadcrumb a {
	font-size: 12px;
	line-height: 1.4;
	color: var(--tl-muted);
}

.tl-ve-toi .tl-breadcrumb a { color: var(--tl-orange-chu); }

/* Icon nhà nhỏ trước "Trang chủ" (mockup) — Rank Math không có tuỳ chọn icon,
   nên chèn bằng nền SVG ::before trên chính đường dẫn breadcrumb. */
.tl-ve-toi .tl-breadcrumb .rank-math-breadcrumb > p::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 5px;
	vertical-align: -1px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4400A' 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");
}

/* -----------------------------------------------------------------------------
   4. HERO — ảnh nền phủ TRỌN section (thật, không phải cột riêng), chữ + thẻ
      trích dẫn nổi trên ảnh — bám mockup `spec/mockup/trang-ve-toi.jpg`
   [phục vụ]  phần tử: Section (bg=62) + Row + Column | khối: .tl-vt-hero
   [trang]    ve-toi
   [mockup]   ✅ trang-ve-toi.jpg — dải hero cao ~242px/853 khổ mockup
   [lý do vượt panel]  Panel Section có `bg`/`bg_pos`/`height` nên KHÔNG cần
              CSS cho chính ảnh nền (đã dùng `[section bg="62" bg_size="full"
              bg_pos="80% 34%" height="420px"]` — Luật 1 giữ nguyên). CSS ở đây
              chỉ lo hai việc panel không với tới: (a) chữ đọc được trên ảnh
              (panel không tô màu riêng cho chữ theo từng ảnh nền), (b) vị trí
              thẻ trích dẫn nổi lên góc dưới-phải (panel Col không "ghim" một
              phần tử vào góc của cột).
   ⚠ ĐÃ BỎ khối 2 cột ảnh/chữ riêng biệt của bản 20/08 (không có mockup lúc đó
     nên đoán sai cấu trúc): mockup thật là MỘT ảnh nền phủ suốt hero, không
     phải cột trái nền trắng + cột phải chứa ảnh.
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-vt-hero { position: relative; }

/* ⚠ 4T PHẢN HỒI 26/08 (vòng 2): thẻ trích dẫn nổi lên GẦN ĐỈNH thay vì đáy.
   Nguyên nhân: Flatsome tự gắn class "relative" cho `.section-content`
   (`<div class="section-content relative">`) — nó trở thành containing block
   GẦN NHẤT cho `position:absolute` thay vì `.tl-vt-hero`, mà chiều cao thật
   của `.section-content` chỉ bằng nội dung (row `v_align="middle"` không kéo
   giãn), NGẮN hơn 420px của section. Ép về `static` để absolute "xuyên" lên
   đúng `.tl-vt-hero` (còn `position:relative`, cao đúng 420px = ảnh nền). */
.tl-ve-toi .tl-vt-hero > .section-content { position: static !important; }

.tl-ve-toi .tl-vt-cuocsong > .section-content > .row::before,
.tl-ve-toi .tl-vt-cuocsong > .section-content > .row::after,
.tl-ve-toi .tl-vt-loinhan > .section-content > .row::before,
.tl-ve-toi .tl-vt-loinhan > .section-content > .row::after,
.tl-ve-toi .tl-vt-niemtin > .section-content > .row::before,
.tl-ve-toi .tl-vt-niemtin > .section-content > .row::after { display: none; }

/* Cột hero dùng ĐÚNG span panel (8/4) — không cần grid override nữa vì
   không còn ảnh phải "lấp đầy" cột như bản 20/08. */
.tl-ve-toi .tl-vt-hero-content { padding: 0 20px; }

/* Nhãn "VỀ TÔI" */
.tl-ve-toi .tl-vt-hero .tl-nhan-section p {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tl-orange);
}

/* ⚠ H1 phải đặt cỡ TUYỆT ĐỐI: `font_size__sm="1.16"` của [ux_text] in ra
   `#text-x{font-size:1.16rem}` KHÔNG bó trong media query nào (bẫy 9), rồi
   Flatsome nhân theo thang em. Bộ chọn nhắm <h1>, rule panel nhắm wrapper ⇒
   không chọi nhau. 1200→30 · 1366→32,1 · 1440→33,8 · 1600→37,6 · ≥1660→39 */
.tl-ve-toi .tl-vt-hero .tl-hero-h1 h1 {
	font-size: clamp(30px, 2.35vw, 39px);
	line-height: 1.15;
	font-weight: 800;
	color: var(--tl-navy);
	margin-bottom: 12px;
	text-shadow: 0 1px 12px rgba(255, 255, 255, .35);
}

.tl-ve-toi .tl-vt-hero .tl-hero-h1 .tl-cam { color: var(--tl-orange); }

.tl-ve-toi .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) p {
	font-size: 13.5px;
	line-height: 1.6;
	max-width: 430px;
	color: var(--tl-text);
	margin-bottom: 6px;
	text-shadow: 0 1px 10px rgba(255, 255, 255, .5);
}

/* -----------------------------------------------------------------------------
   5. THẺ TRÍCH DẪN NỔI TRÊN ẢNH (mockup: thẻ navy ~200×140, góc dưới-phải hero)
   [phục vụ]  phần tử: Column + Text | khối: .tl-vt-hero-quote, .tl-quote-navy
   [trang]    ve-toi
   [mockup]   ✅ trang-ve-toi.jpg
   [lý do vượt panel]  Panel Col không "ghim" một phần tử vào một góc cụ thể
              trong khi cột vẫn tham gia flex bình thường — đó là việc của
              flexbox tự viết.
   -------------------------------------------------------------------------- */
/* ⚠ 4T PHẢN HỒI 26/08: `height:100%` trên cột KHÔNG có gì để tính phần trăm —
   row dùng `v_align="middle"` nên `.col` chỉ cao bằng NỘI DUNG của nó, không
   bằng cả row. Flex `align-items:flex-end` vì vậy vô nghĩa, thẻ trôi lên giữa
   ảnh thay vì ghim đáy. Bỏ hẳn flex, ghim thẳng bằng `position:absolute`
   vào SECTION (đã `position:relative` ở mục 4) — không phụ thuộc chiều cao
   cột nữa, luôn đúng góc dưới-phải bất kể nội dung cột dài ngắn.
   ⚠ VÒNG 2: sau khi ép `.section-content` về static, thẻ vẫn trôi lên giữa —
   dò bằng `offsetParent` mới ra containing block THẬT là `.col-inner`
   (flatsome.css: `.col-inner{position:relative}`, không `!important`), và nó
   CAO 0px vì phần tử con duy nhất (chính thẻ trích dẫn) đã bị rút khỏi dòng
   chảy bởi `position:absolute` — `bottom:24px` neo vào một hộp cao 0 thì
   ra một điểm gần như tuỳ tiện, không phải đáy ảnh thật. Ép luôn `.col-inner`
   về static — không cần `!important` vì luật gốc của Flatsome không có. */
.tl-ve-toi .tl-vt-hero-quote { padding: 0; position: static; }
.tl-ve-toi .tl-vt-hero-quote .col-inner { padding: 0; position: static; }

.tl-ve-toi .tl-vt-hero-quote .tl-quote-navy {
	position: absolute;
	right: max(20px, 3.5%);
	bottom: 24px;
	margin: 0;
	width: 230px;
	max-width: calc(100% - 40px);
	padding: 20px;
	border-radius: var(--tl-r);
	background: var(--tl-navy);
	color: #fff;
	box-shadow: 0 10px 30px rgba(7, 27, 70, .25);
	z-index: 2;
}

.tl-ve-toi .tl-vt-hero-quote .tl-quote-navy::before {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 4px;
	color: var(--tl-orange);
}

.tl-ve-toi .tl-vt-hero-quote .tl-quote-navy p {
	font-size: 13px;
	line-height: 1.65;
	margin-bottom: 0;
}

.tl-ve-toi .tl-vt-hero-quote .tl-quote-navy .tl-quote-ten {
	margin-top: 9px;
	font-size: 14px;
	font-style: italic;
	text-align: right;
}

/* -----------------------------------------------------------------------------
   6. HÀNH TRÌNH 5 GIAI ĐOẠN (brief §11–§15)
   [phục vụ]  phần tử: Row + Icon Box + Image | khối: .tl-moc
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  (a) vạch ngang NỐI 5 icon — panel không nối hai phần tử;
              (b) khoá tỉ lệ ảnh 5 giai đoạn — panel Image không có aspect-ratio.

   ĐO TRƯỚC KHI SỬA (1366px): **vạch nối lệch tâm icon 57px** — vạch ở y=962
   còn tâm icon ở y=1019. Hai nguyên nhân cộng lại:
     · hộp icon cao **74,8px** chứ không phải 64 — SVG nội tuyến mặc định
       `display:inline` nên hộp ăn thêm phần chân chữ của dòng (bẫy 17);
     · icon-box bắt đầu 20px dưới đỉnh hàng.
   ⇒ Khoá icon đúng 48×48 `display:block`, rồi đặt vạch theo TÂM THẬT của icon.
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-vt-hanhtrinh h2 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--tl-navy);
	margin-bottom: 0;
}

.tl-ve-toi .tl-vt-hanhtrinh .row:first-child { margin-bottom: 14px; }

.tl-ve-toi .tl-moc > .col { padding-left: 6px; padding-right: 6px; }

.tl-ve-toi .tl-moc .col-inner { padding-top: 0; }

.tl-ve-toi .tl-moc .icon-box {
	margin: 0 auto 10px;
	width: 48px;
}

.tl-ve-toi .tl-moc .icon-box-img,
.tl-ve-toi .tl-moc .icon,
.tl-ve-toi .tl-moc .icon-inner,
.tl-ve-toi .tl-moc .icon svg {
	display: block;
	width: 48px;
	height: 48px;
}

/* Vạch nối: 5 cột đều nhau ⇒ tâm icon ở 10% · 30% · 50% · 70% · 90%.
   top = 24px = nửa icon 48px, tính từ đỉnh hàng (đã gỡ 20px lệch ở trên). */
.tl-ve-toi .tl-moc::before {
	top: 24px;
	left: 10%;
	right: 10%;
	background: #cad2df;
}

.tl-ve-toi .tl-moc h3 {
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--tl-navy);
	margin-bottom: 0;
}

.tl-ve-toi .tl-moc .tl-moc-nam p {
	margin: 3px 0 0;
	font-size: 12px;
	font-weight: 800;
	color: var(--tl-orange-chu);
}

.tl-ve-toi .tl-moc .text:not(.tl-moc-nam) p {
	font-size: 12px;
	line-height: 1.55;
	color: var(--tl-text);
	margin-bottom: 0;
}

/* Năm ảnh CÙNG một khuôn, đáy thẳng hàng (brief §15).
   ⛔ ĐÃ TỪNG GHI `margin-top: 12px` Ở ĐÂY — TỰ PHÁ CHÍNH CƠ CHẾ Ở TRÊN.
   `.tl-moc .col-inner > *:last-child { margin-top: auto }` (30-components) đẩy
   ảnh xuống đáy cột, nhưng selector `.tl-ve-toi .tl-moc .img` có CÙNG độ đặc
   hiệu (0,3,0) và tệp trang nạp SAU 30-components ⇒ `12px` cố định thắng,
   `auto` không bao giờ chạy. Kết quả: ảnh bám sát đáy đoạn mô tả — hàng nào mô
   tả dài (56px) thì ảnh cao hơn hàng mô tả ngắn (37px) đúng phần chênh đó.
   Đo 27/08 @1366: ảnh hàng 1 đáy y=1022, bốn ảnh còn lại đáy y=1040 — lệch 18px.
   Xoá `margin-top` khỏi luật này để nhường lại cho `auto` — không đặt `0`, vì
   `0` cũng cùng độ đặc hiệu và vẫn đè y hệt `12px` đã đè. */
.tl-ve-toi .tl-moc .img { margin-bottom: 0; width: 100%; }

.tl-ve-toi .tl-moc img {
	display: block;
	width: 100%;
	aspect-ratio: 1.35 / 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--tl-r);
}

/* -----------------------------------------------------------------------------
   7. NIỀM TIN | ĐIỀU AGENCY KHÔNG CÓ (brief §16–§18)
   [phục vụ]  phần tử: Row + Column | khối: .tl-khoi-niem-tin, .tl-khoi-agency
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Brief §16 xin hai cột lệch tỉ lệ .9fr/1.1fr — nấc span
              của Flatsome không có 0,9/1,1; và panel Col không đặt được viền
              bao CẢ HÀNG.
   ⛔ KHÔNG dùng gradient (brief §16 nói thẳng) — nền phẳng + viền mảnh.
   -------------------------------------------------------------------------- */
/* ⛔ ĐẢO NGƯỢC quyết định 26/08 (4T yêu cầu lại 27/08, kèm ảnh mẫu):
   26/08 từng gỡ card/viền vì mockup lúc đó là "hai cột trắng chảy trên nền
   section". Ảnh mẫu mới cho thấy MỖI CỘT một khung riêng, bo góc, viền màu
   khác nhau (trái ấm/cam, phải lạnh/xanh) — không phải một khung bọc cả hàng.
   Vẫn giữ lưới hai cột lệch tỉ lệ ở ROW; khung màu đặt ở COL-INNER của từng
   cột (bên dưới), không đụng lại rule này. */
.tl-ve-toi .tl-vt-niemtin > .section-content > .row {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 0 48px;
	align-items: start;
}

.tl-ve-toi .tl-vt-niemtin > .section-content > .row > .col {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
}

/* [phục vụ] Text (ux_text) | khối: tiêu đề 2 cột niềm tin/agency, CĂN GIỮA
   [lý do vượt panel] Panel `text_align="center"` đặt trên DIV bọc (`.text`),
   không phải trực tiếp trên `<h2>`. Dòng dưới từng ép `text-align: left` ngay
   trên `<h2>` — độ đặc hiệu phần tử+lớp cao hơn giá trị kế thừa từ div bọc nên
   nó thắng, kéo tiêu đề lệch trái dù panel đã chọn "center". 27/08: 4T xác
   nhận muốn CĂN GIỮA (đúng như panel đặt sẵn) — đổi lại. */
.tl-ve-toi .tl-vt-niemtin h2 {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tl-navy);
	margin-bottom: 16px;
	text-align: center;
}

.tl-ve-toi .tl-khoi-agency h2 { color: var(--tl-orange-chu); }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Column | khối: khung màu bo góc quanh MỖI cột
              (.tl-khoi-niem-tin, .tl-khoi-agency)
   [trang]    ve-toi
   [mockup]   ảnh mẫu 4T gửi 27/08 — hai thẻ riêng, viền màu khác nhau, bo góc
   [lý do vượt panel]  Panel Col đặt được border/bg cho MỘT cột, nhưng đặt lặp
              6 giá trị giống hệt hai lần thì đổi màu sau phải sửa 2 chỗ; và
              30-components.css đã có sẵn `padding: 0` cho .col-inner của hai
              class này (dùng chung, dù thực tế chỉ trang này gọi) — phải nêu
              đặc hiệu cao hơn (.tl-ve-toi + hai lớp) mới đè được, không phải
              !important.
   ⚠ Không dùng gradient (đúng luật brief §16 cũ vẫn còn hiệu lực).
   Màu KHÔNG bịa mới — lấy lại từ chính bảng màu đang dùng trong dự án:
     trái  viền/nền cam nhạt  → cùng tông --tl-cam / --tl-cam-nhat đã có ở
           00-tokens.css và ở .tl-quote-cam ngay cột phải bên dưới;
     phải  viền/nền xanh nhạt → #eef3fb đã dùng cho .tl-o-xanh-duong (30-components,
           trang kien-thuc) và rgb(47,111,214) là màu bước 2 trong hành trình ở
           trang toi-co-the-giup-gi — tái dùng để không đẻ thêm một mã màu mới.
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-khoi-niem-tin .col-inner,
.tl-ve-toi .tl-khoi-agency .col-inner {
	height: 100%;
	padding: 26px 24px;
	border-radius: 10px;
}

.tl-ve-toi .tl-khoi-niem-tin .col-inner {
	border: 1px solid rgba(235, 80, 14, .28);
	background: var(--tl-cam-nhat);
}

.tl-ve-toi .tl-khoi-agency .col-inner {
	border: 1px solid rgba(47, 111, 214, .28);
	background: #eef3fb;
}

/* Mỗi niềm tin: icon TRÁI, nội dung PHẢI — brief §17 */
.tl-ve-toi .tl-khoi-niem-tin .icon-box { margin-bottom: 13px; }
.tl-ve-toi .tl-khoi-niem-tin .icon-box:last-child { margin-bottom: 0; }

.tl-ve-toi .tl-khoi-niem-tin .icon-box-img,
.tl-ve-toi .tl-khoi-niem-tin .icon,
.tl-ve-toi .tl-khoi-niem-tin .icon-inner,
.tl-ve-toi .tl-khoi-niem-tin .icon svg {
	display: block;
	width: 40px;
	height: 40px;
}

.tl-ve-toi .tl-khoi-niem-tin .icon-box p {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--tl-text);
	margin-bottom: 0;
}

.tl-ve-toi .tl-khoi-niem-tin .icon-box strong {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	font-weight: 800;
	color: var(--tl-navy);
}

.tl-ve-toi .tl-khoi-agency .tl-checklist p {
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 7px;
	padding-left: 22px;
}

.tl-ve-toi .tl-khoi-agency .tl-checklist p::before {
	color: var(--tl-orange);
	font-weight: 700;
}

/* Khối phát biểu cuối cột phải — brief §18 */
.tl-ve-toi .tl-khoi-agency .tl-quote-cam {
	margin-top: 14px;
	padding: 12px 16px;
	border: 1px solid rgba(240, 90, 36, .35);
	border-left: 1px solid rgba(240, 90, 36, .35);
	border-radius: var(--tl-r);
	background: rgba(255, 255, 255, .65);
}

.tl-ve-toi .tl-khoi-agency .tl-quote-cam::before {
	font-size: 22px;
	line-height: 1;
	margin-bottom: 2px;
}

.tl-ve-toi .tl-khoi-agency .tl-quote-cam p {
	font-size: 12.5px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--tl-navy);
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   8. CUỘC SỐNG HIỆN TẠI — video | nội dung | trích dẫn (brief §19–§22)
   [phục vụ]  phần tử: Row + Column | khối: .tl-vt-cuocsong
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Brief §19 xin 1.05fr/1.25fr/.8fr — không nấc span nào ra
              được ba tỉ lệ đó; và panel Image không có aspect-ratio 16/9.
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-vt-cuocsong > .section-content > .row {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, .8fr);
	gap: 0 24px;
	align-items: center;
}

.tl-ve-toi .tl-vt-cuocsong > .section-content > .row > .col {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
}

.tl-ve-toi .tl-vt-cuocsong h2 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tl-navy);
	margin-bottom: 12px;
}

.tl-ve-toi .tl-vt-cuocsong .tl-checklist p {
	font-size: 13px;
	line-height: 1.55;
	margin-bottom: 7px;
	padding-left: 22px;
}

.tl-ve-toi .tl-vt-cuocsong .tl-checklist p::before { color: var(--tl-orange); }

/* Video UX Builder THẬT — [ux_banner bg="85" container_width="full-width"]
   [text_box position_x="50" position_y="50"][video_button][/text_box][/ux_banner].
   Không đặt `height` ⇒ Flatsome tự cao theo tỉ lệ ảnh gốc (ảnh 1280×720 =
   16:9, cơ chế `height-fix is-invisible` có sẵn trong ux_banner.php).
   ⚠ 4T PHẢN HỒI 26/08: bản trước KHÔNG có `container_width="full-width"` ⇒
   `banner-layers` bị Flatsome tự thêm class `.container` (bó theo `site_width`
   Customizer 1170px, xem CLAUDE.md §33.1 — đúng bẫy tương tự đã gặp ở hero).
   Cũng đã bọc `video_button` trong `[text_box]` TƯỜNG MINH của chính mình
   thay vì để Flatsome tự đoán — không phụ thuộc nhánh "else" ẩn trong
   ux_banner.php nữa. */
.tl-ve-toi .tl-vt-video-real { border-radius: var(--tl-r); overflow: hidden; }
.tl-ve-toi .tl-vt-video-real img.bg { object-fit: cover; }

/* Nút play tròn TRẮNG giữa ảnh — đúng mẫu, KHÔNG phải viền/nền cam mặc định
   của `.is-outline` (ăn theo màu primary = cam toàn site). Ép tường minh +
   `!important` và kích thước cố định px: đây là nút UX Builder thật, không
   kiểm soát được thứ tự nạp CSS lõi của chính Flatsome cho nó. */
.tl-ve-toi .tl-vt-video-real .open-video {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 60px !important;
	height: 60px !important;
	max-width: 60px !important;
	max-height: 60px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: none !important;
	color: var(--tl-navy) !important;
	box-shadow: 0 6px 20px rgba(7, 27, 70, .35);
}

.tl-ve-toi .tl-vt-video-real .open-video i { margin-left: 3px; }

.tl-ve-toi .tl-vt-video-real .open-video:hover {
	background: var(--tl-orange) !important;
	color: #fff !important;
}

/* Thẻ trích dẫn cột phải: nền TRẮNG có viền, không phải navy (brief §22) */
.tl-ve-toi .tl-vt-cuocsong .tl-quote-navy {
	background: var(--tl-white);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	padding: 18px;
	margin-bottom: 0;
}

.tl-ve-toi .tl-vt-cuocsong .tl-quote-navy::before {
	font-size: 26px;
	line-height: 1;
	margin-bottom: 2px;
	color: var(--tl-orange);
}

.tl-ve-toi .tl-vt-cuocsong .tl-quote-navy p {
	font-size: 13px;
	line-height: 1.65;
	font-weight: 600;
	color: var(--tl-navy);
	margin-bottom: 0;
}

.tl-ve-toi .tl-vt-cuocsong .tl-quote-navy .tl-quote-ten {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	text-align: right;
	color: var(--tl-muted);
}

/* -----------------------------------------------------------------------------
   9. GALLERY 4 KHOẢNH KHẮC (brief §23)
   [phục vụ]  phần tử: Row + Image + Text | khối: .tl-vt-khoanhkhac
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Khoá tỉ lệ ảnh 1.6/1 cho cả 4 — panel Image không có
              aspect-ratio, và 4 cột span="3" cho khe 30px chứ không phải 12px.
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-vt-khoanhkhac h2 {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tl-navy);
	margin-bottom: 0;
}

.tl-ve-toi .tl-vt-khoanhkhac .row:first-child { margin-bottom: 14px; }

.tl-ve-toi .tl-vt-khoanhkhac .row:last-child {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.tl-ve-toi .tl-vt-khoanhkhac .row:last-child::before,
.tl-ve-toi .tl-vt-khoanhkhac .row:last-child::after { display: none; }

.tl-ve-toi .tl-vt-khoanhkhac .row:last-child > .col {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
}

.tl-ve-toi .tl-vt-khoanhkhac .img { margin-bottom: 0; width: 100%; }

.tl-ve-toi .tl-vt-khoanhkhac img {
	display: block;
	width: 100%;
	aspect-ratio: 1.6 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 5px;
	transition: transform .25s ease;
}

.tl-ve-toi .tl-vt-khoanhkhac .tl-caption p {
	margin: 5px 0 0;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tl-text);
}

/* -----------------------------------------------------------------------------
   10. CTA CUỐI — video | lời nhắn | liên hệ (brief §24–§27)
   [phục vụ]  phần tử: Row + Column | khối: .tl-vt-loinhan
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Brief §24 xin ba cột .85/1.25/1 và `gap: 0` với vạch dọc
              ngăn cột — panel Col không có nấc tỉ lệ đó, cũng không kẻ được
              vạch giữa hai cột.
   -------------------------------------------------------------------------- */
/* ⛔ ĐẢO NGƯỢC ghi chú cũ (27/08, 4T gửi ảnh mẫu): trước ghi "nền trắng phẳng,
   KHÔNG card/viền" — nay 4T xin khung màu bo góc.
   ⚠ Thử nền kem trước, 4T phản hồi ngay: "nền màu xanh chứ không phải cam" —
   đổi sang xanh, LẤY LẠI đúng #eef3fb đang dùng cho khung ".tl-khoi-agency"
   ngay phía trên (mục 7 file này), không bịa màu mới, để hai khung xanh trên
   cùng trang nhất quán với nhau. Section này đã tự co theo `--tl-be-ngang`
   (đo: width 1213px @1366, bằng site) nên đặt màu/bo góc thẳng lên `.section`,
   padding panel sẵn có (20px 30px) trở thành khoảng đệm bên trong khung. */
.tl-ve-toi .tl-vt-loinhan {
	background: #eef3fb;
	border-radius: 16px;
}

.tl-ve-toi .tl-vt-loinhan > .section-content > .row {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 0 28px;
	align-items: center;
}

.tl-ve-toi .tl-vt-loinhan > .section-content > .row > .col {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
}

.tl-ve-toi .tl-vt-loinhan > .section-content > .row > .col:nth-child(2) > .col-inner,
.tl-ve-toi .tl-vt-loinhan > .section-content > .row > .col:nth-child(3) > .col-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tl-ve-toi .tl-vt-loinhan h2 {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tl-navy);
	margin-bottom: 8px;
}

.tl-ve-toi .tl-vt-loinhan p {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--tl-text);
	margin-bottom: 12px;
}

.tl-ve-toi .tl-vt-loinhan .button {
	margin-bottom: 0;
	align-self: flex-start;
	min-height: 38px;
	font-size: 11.5px;
}

/* ⚠ Đổi nền khung sang xanh (#eef3fb) làm nút viền cam "XEM VIDEO…" tụt còn
   4,41:1 — dưới ngưỡng AA 4,5:1 (chữ rgb(196,72,9) là màu cam viền MẶC ĐỊNH
   của Flatsome cho nút primary is-outline, dùng site-wide nên KHÔNG sửa biến
   toàn cục). Ép riêng trong phạm vi khung này bằng `--tl-cam-chu` — token cam
   ĐẬM sẵn có của dự án dùng đúng cho chữ trên nền sáng — đạt 4,61:1. */
.tl-ve-toi .tl-vt-loinhan .button.primary.is-outline {
	color: var(--tl-cam-chu);
	border-color: var(--tl-cam-chu);
}

/* -----------------------------------------------------------------------------
   11. HOVER — rất nhẹ, đúng brief §32
   [phục vụ]  phần tử: Image + Button | khối: gallery, nút CTA
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Panel Image có `image_hover` nhưng theo nấc riêng của
              Flatsome (zoom mạnh), không ra được 1.015.
   ⛔ Không zoom mạnh: đây là ảnh đời thật của một người bệnh, không phải ảnh
      sản phẩm.
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-vt-khoanhkhac .img:hover img { transform: scale(1.015); }
.tl-ve-toi .page-wrapper .button:hover { transform: translateY(-1px); }

}   /* ==== HẾT @media (min-width: 850px) ==== */

/* =============================================================================
   ══════════════  PHẦN MOBILE  ══════════════
   Dựng 20/08/2026 theo brief "tối ưu STYLE CSS mobile trang VỀ TÔI".

   ⚠ GHÉP HAI PHIÊN: phần trên (≥850px) do một phiên khác viết cùng ngày và
     KHÔNG bị đụng một dòng nào. Hai khối media không giao nhau
     (min-850 ↔ max-849) nên thứ tự không quan trọng.
     Bảng màu ở đầu tệp áp mọi khổ ⇒ phần này DÙNG LẠI biến, không khai lại.

   📌 Brief xin scope `.tl-about-page` và mốc 991/767/480. Dùng cái sẵn có:
      · `.tl-ve-toi` — lớp body tự động theo slug (linter mục 8 cũng đòi vậy);
      · mốc 549/849/850 — luật III.4.3-3, linter mục 6 chặn mốc lạ.
        brief 991+767 → ≤849 · brief 480 → ≤549.
      · brief §36 cho phép mở thêm mốc 360px. KHÔNG mở — linter chặn, và
        `clamp()` co mượt còn phủ 320 tốt hơn một mốc cứng.
      Đã đo đủ 320 · 360 · 375 · 390 · 414 · 430 · 480 · 768.
============================================================================= */

@media (max-width: 849px) {

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Section | khối: lề ngang + nhịp dọc toàn trang
   [trang]    ve-toi
   [mockup]   ⚠ brief mobile KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Panel Section chỉ đặt được padding DỌC; lề NGANG do
              Flatsome ấn định, không có ô nào.
   `clamp` thay cho mốc 360px: 320→12,8px · 375→15px · ≥400→16px.
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-sec {
	padding-left: 18px;
	padding-right: 18px;
}
/* Bề ngang dải nội dung dùng chung `--tl-be-ngang` cho CẢ site — ở 390px chỉ
   ra ~11,7px mỗi bên, dưới sàn 16–20px 4T giao riêng cho trang này (mockup
   v2). Ghi đè trong phạm vi `.tl-ve-toi` + mobile, 5 trang kia không đổi. */
.tl-ve-toi .page-wrapper .row { max-width: calc(100% - 36px); }
/* ⛔ Bẫy tìm ra ở cau-chuyen.css (row lồng trong row của `[blog_posts]` bị trừ
   bì 36px HAI LẦN) — trang này không có `[blog_posts]` nên chưa lộ, nhưng
   chặn phòng ngừa cho khớp đúng cơ chế `10-base.css` đã dùng cho site-wide. */
.tl-ve-toi .page-wrapper .row .row { max-width: none; }
.tl-ve-toi .page-wrapper .tl-vt-hero .row { max-width: none; }  /* hero tự lo lề riêng, xem khối hero bên dưới */

.tl-ve-toi .page-wrapper .tl-vt-hero { padding-top: 0; padding-bottom: 0; }
.tl-ve-toi .page-wrapper .tl-vt-hanhtrinh { padding-top: 28px; padding-bottom: 28px; }
/* Cam kết / video / gallery / CTA cuối — padding 32px, theo đúng thang 8/12/16/24/32. */
.tl-ve-toi .page-wrapper .tl-vt-niemtin,
.tl-ve-toi .page-wrapper .tl-vt-cuocsong,
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac,
.tl-ve-toi .page-wrapper .tl-vt-loinhan { padding-top: 32px; padding-bottom: 32px; }

.tl-ve-toi .page-wrapper .tl-vt-sec h2 { margin-bottom: 16px; }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Text/Heading | khối: thang chữ mobile
   [trang]    ve-toi
   [mockup]   mobile-mockup-ve-toi-v2.png — 4T giao sàn cụ thể (27/08, "v2"):
              H1 30–32px · H2 22–24px · body tối thiểu 15–16px. Thang cũ (H1
              27–31 · H2 21 · body 13,5–14) THẤP HƠN sàn mới ở cả ba bậc.
   [lý do vượt panel]  ⛔ H1 phải đặt TƯỜNG MINH. Panel `font_size__sm="1.16"`
              trên trang này KHÔNG bó trong media query nào ⇒ wrapper 18,56px ở
              MỌI khổ, h1 nhân theo thang em Flatsome và ra **32px ở dải
              550–849**. Đo được ở 768 trước khi sửa. `clamp` cho đúng dải brief
              mà không phụ thuộc thang em.
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper { font-size: 15px; line-height: 1.55; }

.tl-ve-toi .page-wrapper .tl-hero-h1 h1 {
	font-size: clamp(30px, 8.4vw, 32px);
	line-height: 1.16;
	margin-bottom: 14px;
}

.tl-ve-toi .page-wrapper h2 { font-size: clamp(22px, 5.9vw, 24px); line-height: 1.25; }
.tl-ve-toi .page-wrapper h3 { font-size: 17px; line-height: 1.35; }
.tl-ve-toi .page-wrapper .tl-nhan-section p { font-size: 12px; margin-bottom: 8px; letter-spacing: .04em; }
.tl-ve-toi .page-wrapper .tl-breadcrumb { font-size: 12px; line-height: 1.4; }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Button | khối: vùng chạm
   [lý do vượt panel]  Panel Button không tách kích thước theo thiết bị.
   WCAG 2.5.8: cạnh ngắn ≥ 44px.
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .button {
	min-height: 46px;
	height: auto;
	padding: 0 18px;
	font-size: 14.5px;
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Section/Column/Text | khối: hero — ảnh nền full chiều
              ngang; ở mobile 2 cột dồn dọc TRÊN CÙNG một ảnh nền cao hơn
   [mockup]   mobile-mockup-ve-toi-v2.png — ảnh hero PHẢI thấy rõ (không phải
              mảng trắng), chữ trắng nổi trên lớp phủ navy đồng đều toàn ảnh.
   [lý do vượt panel]  Panel `bg_pos` không có biến thể `__sm`; ảnh dồn dọc thì
              vùng chữ cần lùi tiêu điểm ảnh về phía sáng bên trái, và cần
              một lớp phủ nhẹ đảm bảo đọc được bất kể ảnh nằm dưới là gì.
   ⛔ SỬA LẠI 27/08 (v2): bản trước phủ TRẮNG đậm dần từ trái (82%→10%) khiến
      ảnh gần như vô hình — đúng lỗi "card trắng" đã gặp ở trang chủ (CLAUDE.md
      §30). Đổi sang phủ NAVY MỜ ĐỀU (không có gradient hướng) — ảnh vẫn hiện
      rõ qua lớp phủ, chữ chuyển sang TRẮNG để đọc được trên nền tối thay vì
      trông cậy vào vùng "sáng" của ảnh (vốn không đoán trước được sẽ rơi
      đúng chỗ chữ hay không tuỳ ảnh nào được thay).
   -------------------------------------------------------------------------- */
/* ⚠ `height="420px"` của panel in ra `min-height` bằng bộ chọn ID — class
   thường KHÔNG thắng nổi (CLAUDE.md 26.2). `!important` thắng được vì luật gốc
   không `!important`, bất kể specificity thấp hơn. */
.tl-ve-toi .page-wrapper .tl-vt-hero {
	position: relative;
	min-height: 400px !important;
	padding-top: 32px;
	padding-bottom: 26px;
	display: flex;
	align-items: flex-end;
}

.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg img.bg {
	object-position: 68% 30% !important;
}

.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 27, 70, .38) 0%, rgba(7, 27, 70, .72) 100%);
	z-index: 1;
}

.tl-ve-toi .page-wrapper .tl-vt-hero .row { width: 100%; }

.tl-ve-toi .page-wrapper .tl-vt-hero-content { padding: 0; }
/* ⛔ THÊM 09/09/2026: khối 549-849px này chưa từng giới hạn bề rộng cột chữ
   H1 — 4T báo "chữ che mặt" ở khổ ~550-800px (điện thoại lớn/phablet, ngoài
   phạm vi khối ≤549 đã sửa hôm trước). Không có max-width nào ở đây ⇒ cột
   chữ tràn gần hết banner, đè thẳng lên mặt (object-position 68% đặt mặt
   khá giữa khung). Đã kiểm trực tiếp trên live ở 3 mốc 550/600/849px: 48%
   là mức hẹp nhất còn đọc được mà không chạm mặt ở cả ba mốc. */
.tl-ve-toi .page-wrapper .tl-vt-hero-content { max-width: 48%; }

.tl-ve-toi .page-wrapper .tl-vt-hero .tl-nhan-section p { color: #ffd9c2; }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 { color: #fff; }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 .tl-cam { color: var(--tl-orange); }

.tl-ve-toi .page-wrapper .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) p {
	font-size: 15px;
	line-height: 1.55;
	margin-bottom: 7px;
	max-width: none;
	color: rgba(255, 255, 255, .92);
}

.tl-ve-toi .page-wrapper .tl-vt-hero-quote {
	display: block;
	height: auto;
	padding: 0;
	margin-top: 16px;
}

.tl-ve-toi .page-wrapper .tl-vt-hero-quote .col-inner { padding-bottom: 0; }

.tl-ve-toi .page-wrapper .tl-vt-hero-quote .tl-quote-navy {
	/* Desktop ghim `position:absolute` — mobile phải trả về flow bình thường,
	   nếu không thẻ sẽ nổi đè lên ảnh/khối bên dưới thay vì xếp dọc. */
	position: static;
	margin: 0;
	width: 100%;
	max-width: none;
	padding: 16px 18px;
}

.tl-ve-toi .page-wrapper .tl-vt-hero-quote .tl-quote-navy p { font-size: 14px; line-height: 1.55; }
.tl-ve-toi .page-wrapper .tl-vt-hero-quote .tl-quote-ten { font-size: 14px; }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Featured Box + Text | khối: "Tôi tin vào" — thẻ nền màu
              xen kẽ, xếp chồng full-width
   [trang]    ve-toi
   [mockup]   mobile-mockup-ve-toi-v2.png — mỗi mục "TÔI TIN VÀO" là MỘT thẻ bo
              góc, nền màu nhạt xen kẽ (xanh-xám / cam-nhạt), không còn là danh
              sách icon+chữ trần trên nền trắng như bản trước.
   [lý do vượt panel]  `[featured_box]` không có `bg`/`border_radius`; nền +
              bo góc phải viết CSS trên chính `.icon-box` mà Flatsome render ra.
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	padding: 14px 16px;
	border-radius: var(--tl-r);
	background: #f2f5fa;
}
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box:nth-of-type(even) { background: #fdf1ea; }
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box:last-child { margin-bottom: 0; }
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box .icon-box-text { padding: 0; }

.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box-img { max-width: 36px; margin: 0; flex: none; }

.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box p,
.tl-ve-toi .page-wrapper .tl-khoi-agency p { font-size: 15px; line-height: 1.55; }

.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box strong { font-size: 15.5px; line-height: 1.35; }

.tl-ve-toi .page-wrapper .tl-khoi-agency h2 { font-size: 18px; line-height: 1.35; }
.tl-ve-toi .page-wrapper .tl-khoi-agency { margin-top: 28px; }
.tl-ve-toi .page-wrapper .tl-checklist p { margin-bottom: 10px; line-height: 1.55; }

.tl-ve-toi .page-wrapper .tl-quote-cam { padding: 14px 16px; margin-top: 14px; }
.tl-ve-toi .page-wrapper .tl-quote-cam p { font-size: 15px; line-height: 1.55; }
.tl-ve-toi .page-wrapper .tl-quote-cam::before { font-size: 22px; }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Image/Column | khối: "Cuộc sống hiện tại" và "Lời nhắn"
   [mockup]   mobile-mockup-ve-toi-v2.png — video/ảnh 16:9 LỚN, không bị nén
              xuống dưới sàn brief.
   [lý do vượt panel]  Panel không đặt được tỉ lệ khung ảnh; `image_size` chỉ
              chọn TỆP, không quyết định khung hiển thị.
   ⚠ Vạch ngăn cột ở desktop là `border-left`. Dồn dọc thì vạch dọc treo lơ
      lửng giữa trang ⇒ đổi thành `border-top`.
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-video-real {
	/* v2: nới trần 240→300px — dải nội dung mobile giờ rộng hơn (gutter 18px
	   thay vì 12–16), banner 16:9 ở ~320px bề ngang đã cao ~180px, còn nhiều
	   dư địa trước khi chạm trần mới. */
	max-height: 300px;
	border-radius: var(--tl-r);
	overflow: hidden;
	/* Nền trung tính LUÔN có sẵn dưới ảnh nền — không lộ mảng màu lạ khi ảnh
	   còn đang tải hoặc tải chậm trên mạng yếu. */
	background: #eef0f4;
}

/* ⚠ Hai khối này là 3 cột `span 4/5/3` KHÔNG có `span__md` ⇒ ở dải 550–849 chúng
   vẫn đứng cạnh nhau, cột thứ ba chỉ còn ~192px. Nút CTA trong đó rộng 114px
   trong khi chữ `nowrap` cần 158px ⇒ **chữ tràn RA NGOÀI màn hình 12px** ở 768
   (kiem-vo bắt được, mắt nhìn ảnh chụp cũng thấy chữ thò khỏi nền cam).
   Dồn dọc từ 849 trở xuống, đúng thứ brief §19/§30 xin. */
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col,
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col {
	flex-basis: 100%;
	max-width: 100%;
	border-left: 0;
	padding-bottom: 0;
}

.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col + .col,
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col + .col {
	border-top: 1px solid var(--tl-border);
	margin-top: 18px;
	padding-top: 18px;
}

.tl-ve-toi .page-wrapper .tl-vt-cuocsong h2,
.tl-ve-toi .page-wrapper .tl-vt-loinhan h2 { font-size: 19px; }
.tl-ve-toi .page-wrapper .tl-vt-cuocsong p,
.tl-ve-toi .page-wrapper .tl-vt-loinhan p { font-size: 15px; line-height: 1.55; }
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-checklist p { margin-bottom: 8px; }

.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-quote-navy { padding: 18px 20px; }
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-quote-navy p { font-size: 15px; line-height: 1.55; }

/* CTA cuối trang "LIÊN HỆ TƯ VẤN NGAY" — rộng hết cột, dễ bấm (brief v2:
   "CTA rộng, dễ bấm"), thay vì chỉ rộng theo chữ như mặc định panel. */
.tl-ve-toi .page-wrapper .tl-vt-loinhan .button {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Row/Image | khối: "Khoảnh khắc" — lưới ảnh
   [lý do vượt panel]  `span__sm="6"` đã cho 2 cột, nhưng khe hở giữa ảnh và
              tỉ lệ khung thì panel không có ô.
   Giữ 2 CỘT ở mọi khổ điện thoại — brief §26. Một cột thì 4 ảnh chiếm gần
   1.400px, đẩy CTA ra khỏi tầm với. ⚠ 4T chốt lại 27/08: ảnh đổi từ 1:1 sang
   4:3 (đồng bộ tỉ lệ với ảnh timeline), gap card 12–16px.
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .row:last-child { margin-left: -8px; margin-right: -8px; }
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .row:last-child > .col { padding: 0 8px 16px; }

.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .img {
	background: #eef0f4;
	border-radius: var(--tl-r);
	overflow: hidden;
}
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var(--tl-r);
}
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .tl-caption p { font-size: 14px; line-height: 1.45; }

}   /* ==== HẾT @media (max-width: 849px) ==== */

/* =============================================================================
   ĐIỆN THOẠI — ≤549px: TIMELINE DỌC
   Brief §14–§16: hành trình phải đọc như MỘT câu chuyện theo thời gian, không
   phải 5 thẻ sản phẩm. Ở 2 cột (mặc định `span__sm="6"`) mắt đọc ngang rồi
   xuống — sai thứ tự thời gian.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Row/Column/Featured Box/Image | khối: .tl-moc — timeline
   [trang]    ve-toi
   [mockup]   mobile-mockup-ve-toi-v2.png — mỗi mốc là MỘT THẺ bo góc viền
              mỏng, ảnh bên TRÁI (cố định ~104px) + tiêu đề/năm/mô tả bên PHẢI,
              xếp chồng full-width, cách nhau 14px. KHÔNG còn icon tròn nhỏ hay
              đường kẻ dọc nối các mốc (mockup không vẽ) — icon chỉ còn dùng ở
              desktop, ẩn hẳn ở mobile.
   ⛔ THAY HẲN bản v1 (27/08 "nhiệm vụ mobile riêng": icon 32px trái + đường
      nối dọc + nội dung dồn margin-left). Bản đó đúng brief số đo lúc ấy
      nhưng KHÔNG khớp mockup v2 — 4T đổi hẳn hướng thiết kế timeline.
   [lý do vượt panel]  Panel Column không có "ảnh cố định một cột, chữ chiếm
              cột còn lại, cao theo NỘI DUNG chữ" — dùng CSS Grid đặt tường
              minh từng phần tử con vào đúng ô, thay vì dựa vào thứ tự DOM
              (ảnh `[ux_image]` là phần tử CUỐI trong mã nguồn, sau chữ).
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-moc { display: block; }

.tl-ve-toi .page-wrapper .tl-moc > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
	margin-bottom: 14px;
}
.tl-ve-toi .page-wrapper .tl-moc > .col:last-child { margin-bottom: 0; }

.tl-ve-toi .page-wrapper .tl-moc > .col > .col-inner {
	display: grid;
	grid-template-columns: 92px 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 12px;
	align-items: start;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: none;
	text-align: left;
}

/* Icon tròn chỉ có ý nghĩa trong bố cục desktop (icon-trên-đầu-cột) — mockup
   mobile không vẽ, ẩn để không chiếm ô lưới thứ nhất một cách vô ích. */
.tl-ve-toi .page-wrapper .tl-moc .icon-box { display: none; }

/* ⛔ ĐÍNH CHÍNH (vòng nghiệm thu đầu, phát hiện qua ảnh chụp — tiêu đề ĐÈ lên
   mô tả): mỗi `[ux_text]` render ra MỘT `<div class="text …">` BỌC NGOÀI thẻ
   thật (h3/p) — grid item THẬT SỰ là cái div bọc đó, không phải h3/p bên
   trong nó. Đặt `grid-row` trên `h3`/`p` KHÔNG có tác dụng gì (chúng không
   phải con TRỰC TIẾP của `.col-inner`) — CSS Grid chỉ định vị được CON TRỰC
   TIẾP. Bản đầu vô tình đặt CẢ div-bọc-h3 lẫn div-bọc-mô-tả cùng vào
   `grid-row:3` qua chung một selector `.text:not(.tl-moc-nam)` ⇒ chồng nhau.
   Sửa: dùng `:has()` để trỏ ĐÚNG vào div bọc ngoài (con trực tiếp thật). */
.tl-ve-toi .page-wrapper .tl-moc > .col > .col-inner > .text:has(h3) { grid-column: 2; grid-row: 1; }
.tl-ve-toi .page-wrapper .tl-moc > .col > .col-inner > .text.tl-moc-nam { grid-column: 2; grid-row: 2; }
.tl-ve-toi .page-wrapper .tl-moc > .col > .col-inner > .text:not(.tl-moc-nam):not(:has(h3)) { grid-column: 2; grid-row: 3; }

/* Ảnh mốc — cột 1, tỉ lệ 4:3 cố định (không stretch theo chiều cao chữ: đã
   thử `height:100%` xuyên `.img > img` nhưng grid track `auto` không cho ra
   chiều cao xác định để "100%" bám vào ⇒ ảnh co về kích thước tự nhiên, để lại
   khoảng xám thừa bên dưới — bắt được qua ảnh chụp, không phải qua số đo).
   Ghim đầu cột 1 (`align-self:start`), card có thể có khoảng trống dưới ảnh
   nếu mô tả dài hơn 4:3×92px — chấp nhận, còn hơn cơ chế "100%" không chắc ăn. */
.tl-ve-toi .page-wrapper .tl-moc .img {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	margin: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #eef0f4;
	border-radius: calc(var(--tl-r) - 4px);
	overflow: hidden;
}
.tl-ve-toi .page-wrapper .tl-moc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tl-ve-toi .page-wrapper .tl-moc h3 {
	font-size: 17px;
	line-height: 1.3;
	margin: 0 0 3px;
}
/* ⚠ CHỖ LỆCH SÀN v2 "body ≥15–16px", có căn cứ: nhãn năm là chữ PHỤ (mốc
   thời gian), không phải khối văn bản nội dung — cùng lý lẽ đã áp dụng cho
   `.tl-nhan-section`/caption trong dự án (CLAUDE.md §24.6). Mô tả chính giữ
   14,5px, sát sàn nhất có thể trong khung thẻ rộng ~226px mà không vỡ dòng. */
.tl-ve-toi .page-wrapper .tl-moc .tl-moc-nam p {
	font-size: 13px;
	line-height: 1.4;
	margin: 0 0 4px;
	/* ⛔ ĐÍNH CHÍNH (bám mockup v2): nhãn năm màu CAM trong mockup, không phải
	   xám — đổi từ `--tl-muted` sang `--tl-orange-chu` (đủ tương phản chữ). */
	color: var(--tl-orange-chu);
	font-weight: 600;
}
.tl-ve-toi .page-wrapper .tl-moc .text:not(.tl-moc-nam) p {
	font-size: 14.5px;
	line-height: 1.45;
	margin: 0;
}

}   /* ==== HẾT @media (max-width: 549px) ==== */

/* =============================================================================
   ĐIỆN THOẠI THẬT — ≤549px, VÒNG 2: bám mobile-mockup-ve-toi-v2.png sát hơn.
   4T nghiệm thu 27/08: audit lại toàn trang so với mockup, CHỈ SỬA TRONG
   KHỐI NÀY (≤549px) — không đụng khối 849px phía trên (dải 550–849 giữ
   nguyên) và không đụng header/footer/desktop.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   HERO — chữ trên nền TRẮNG (không phải ảnh phủ tối), ảnh lộ rõ bên phải.
   [phục vụ]  phần tử: Section (bg) | khối: .tl-vt-hero
   [mockup]   mobile-mockup-ve-toi-v2.png — mockup không phủ tối lên ảnh; chữ
              nằm trên nền TRẮNG THẬT, ảnh (người + skyline) đứng riêng bên
              phải, ranh giới RÕ chứ không mờ dần như gradient cũ.
   [lý do vượt panel]  Section chỉ có MỘT ảnh nền full-bleed (không tách được
              "nửa trắng, nửa ảnh" bằng hai phần tử) — dùng lớp phủ trắng ĐẶC
              cho nửa trái rồi chuyển nhanh sang trong suốt, thay vì gradient
              mờ dần đều khắp ảnh (đã dùng ở vòng trước, đúng hướng "che mờ"
              nhưng sai hướng "ranh giới rõ" 4T vừa yêu cầu).
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-hero {
	min-height: 340px !important;
	padding-top: 24px;
	padding-bottom: 20px;
}
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg img.bg {
	object-position: 85% 32% !important;
}
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	background: linear-gradient(90deg, #fff 0%, #fff 52%, rgba(255, 255, 255, 0) 68%);
}
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-nhan-section p { color: var(--tl-orange-chu); }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 { color: var(--tl-navy); }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 .tl-cam { color: var(--tl-orange-chu); }
.tl-ve-toi .page-wrapper .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) p {
	color: var(--tl-muted);
}
/* ⛔ ĐÍNH CHÍNH: 58% quá hẹp cho H1 dài (đo pixel mockup: "BỆNH NHÂN UNG THƯ
   PHỔI." cần cột rộng, tỉ lệ ước ~62-64% so với ảnh). Nới lên 64% — H1 vẫn
   xuống dòng NHIỀU HƠN mockup (không tránh được ở khổ điện thoại thật khi giữ
   đúng sàn 28-32px của yêu cầu), nhưng đọc được, không vỡ chữ-một-dòng. */
.tl-ve-toi .page-wrapper .tl-vt-hero-content { max-width: 64%; }
.tl-ve-toi .page-wrapper .tl-hero-h1 h1 { font-size: clamp(26px, 7.4vw, 30px); }

/* Thẻ trích dẫn — kéo LÊN đè nhẹ mép dưới ảnh bằng margin âm (không dùng lại
   `position:absolute` — chuỗi containing-block 3 tầng đã cần ép ở desktop
   (mục 5 tệp này) là kỹ thuật DỄ VỠ khi mang sang mobile). Margin âm đơn giản
   hơn, không phụ thuộc containing block, vẫn cho cảm giác "đè lên ảnh". */
.tl-ve-toi .page-wrapper .tl-vt-hero-quote { margin-top: -34px; }
.tl-ve-toi .page-wrapper .tl-vt-hero-quote .tl-quote-navy {
	max-width: 78%;
	margin-left: auto;
	box-shadow: 0 10px 24px rgba(7, 27, 70, .18);
}

/* -----------------------------------------------------------------------------
   CAM KẾT — icon + tiêu đề đổi màu THEO nền thẻ (cam trên nền đào, navy trên
   nền xanh-xám) — đúng cặp màu mockup, không chỉ đổi nền suông.
   [phục vụ]  phần tử: Featured Box | khối: .tl-khoi-niem-tin
   [mockup]   mobile-mockup-ve-toi-v2.png
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box:nth-of-type(even) strong { color: var(--tl-orange-chu); }
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box:nth-of-type(even) .icon-box-img svg * { stroke: var(--tl-orange-chu) !important; }
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box:nth-of-type(odd) .icon-box-img svg * { stroke: var(--tl-navy) !important; }

/* -----------------------------------------------------------------------------
   "CUỘC SỐNG HIỆN TẠI TẠI SINGAPORE" — NGANG (video trái ~38%, checklist phải
   ~62%), không dồn dọc như khối 849px phía trên đã ép (đúng cho dải 550–849
   tránh chữ tràn nút — nhưng mockup thật ở ≤549 lại giữ ngang).
   [phục vụ]  phần tử: Row/Column | khối: .tl-vt-cuocsong
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row {
	flex-wrap: wrap;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(1) {
	flex-basis: 38%;
	max-width: 38%;
	border-left: 0;
	padding-bottom: 0;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(2) {
	flex-basis: 62%;
	max-width: 62%;
	border-left: 0;
	padding-bottom: 0;
	padding-left: 12px;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(3) {
	flex-basis: 100%;
	max-width: 100%;
	border-left: 0;
	border-top: 1px solid var(--tl-border);
	margin-top: 14px;
	padding-top: 14px;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong h2 { font-size: 16px; line-height: 1.3; margin-bottom: 6px; }
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-checklist p { font-size: 12.5px; line-height: 1.4; margin-bottom: 5px; }
.tl-ve-toi .page-wrapper .tl-vt-video-real { max-height: none; aspect-ratio: 3 / 4; }

}   /* ==== HẾT @media (max-width: 549px) — vòng 2 ==== */

/* =============================================================================
   TỪ 849px TRỞ XUỐNG — chỉ vá đúng chỗ vỡ, KHÔNG dựng lại bản mobile
   (bản mobile của trang này đã chốt riêng ở spec/quyet-dinh-mobile.md)
============================================================================= */
@media (max-width: 849px) {

/* -----------------------------------------------------------------------------
   12. NÚT CTA CUỐI — cho nhãn xuống dòng ở dải máy tính bảng
   [phục vụ]  phần tử: Button | khối: .tl-vt-loinhan
   [trang]    ve-toi
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Panel Button không có ô "cho chữ xuống dòng"; Flatsome
              đặt cứng `white-space: nowrap` cho nhãn nút.

   ⚠ ĐO Ở 768px: nhãn «LIÊN HỆ TƯ VẤN NGAY» rộng 157,5px, cộng icon và đệm thì
     vượt cột thứ ba (span="3" ⇒ 25% ≈ 172px) và TRÀN PHẢI 12px. Đây lại là
     vùng 550–849 — panel dùng span desktop, mà CSS desktop bắt đầu từ 850 nên
     không luật nào chỉnh tỉ lệ (CLAUDE.md 25.4).
   ⛔ Không thu cỡ chữ nút xuống dưới 11px và không cắt bớt nhãn: đây là CTA
      chính của trang, và nội dung là thứ 4T đã chốt (brief §38).
   -------------------------------------------------------------------------- */
.tl-ve-toi .tl-vt-loinhan .button {
	white-space: normal;
	padding-left: 12px;
	padding-right: 12px;
	line-height: 1.3;
}

.tl-ve-toi .tl-vt-loinhan .button span { white-space: normal; }

}   /* ==== HẾT @media (max-width: 849px) ==== */

/* =============================================================================
   ĐIỆN THOẠI THẬT — ≤549px, VÒNG 3: nghiệm thu live 4T (28/08) — "rất xa
   mobile-mockup-ve-toi-v2.png". Chỉ sửa TRONG KHỐI NÀY (≤549px) — không đụng
   khối 849px phía trên, không đụng header/footer/desktop (≥850px).
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   1. HERO — ĐÍNH CHÍNH: vòng 2 hé lộ ảnh quá hẹp (52→68%, chỉ 16% bề ngang)
      và object-position 85% rơi đúng vào profile nghiêng, mất mặt/thân. Nới
      vùng hé lộ lên gần một nửa, lùi tiêu điểm để khung hình rộng hơn bắt
      được cả mặt lẫn thân trên (không chỉ một lát cắt hẹp).
   [phục vụ]  phần tử: Section (bg) | khối: .tl-vt-hero
   [mockup]   mobile-mockup-ve-toi-v2.png
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg img.bg { object-position: 68% 30% !important; }
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	background: linear-gradient(90deg, #fff 0%, #fff 48%, rgba(255, 255, 255, 0) 66%);
}
.tl-ve-toi .page-wrapper .tl-vt-hero-content { max-width: 52%; }
.tl-ve-toi .page-wrapper .tl-hero-h1 h1 { font-size: clamp(23px, 6.6vw, 26px); }

/* -----------------------------------------------------------------------------
   2. "HÀNH TRÌNH CỦA TÔI" — SỬA: 4T yêu cầu hiện ĐỦ 5/5 mốc ở mobile — bỏ
      hẳn kiểu cắt 3/5 + nhãn "xem thêm" (nhãn đó vốn chỉ là generated
      content trang trí, bấm vào không mở gì — không phải nút thật). Bỏ luôn
      selector `nth-child(n+4)` lẫn nhãn giả, hiện đủ nội dung thật đã có.
   [phục vụ]  phần tử: Row/Column/Image | khối: .tl-moc
   -------------------------------------------------------------------------- */
/* ⛔ ĐÍNH CHÍNH: cột ảnh timeline đang cố định 92px (dựng ở vòng trước theo
   brief số đo tuyệt đối, KHÔNG theo mockup này) — 4T nay xin đích danh 46%
   theo mockup v2, đổi sang tỉ lệ phần trăm thay số cứng. */
.tl-ve-toi .page-wrapper .tl-moc > .col > .col-inner { grid-template-columns: 46% 1fr; }

/* -----------------------------------------------------------------------------
   3. "TÔI TIN VÀO..." — ép cao tối thiểu ~100px/thẻ (icon-box vốn đã
      `display:flex` ngang sẵn — chỉ cần khoá chiều cao, không phải dựng lại
      hướng ngang từ đầu).
   [phục vụ]  phần tử: Featured Box | khối: .tl-khoi-niem-tin
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box { min-height: 100px; align-items: center; }
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box-img { max-width: 40px; }

/* -----------------------------------------------------------------------------
   4. "ĐIỀU TÔI MANG THEO KHI ĐỒNG HÀNH" — HIỆN Ở MOBILE (đổi 28/08).
      Trước đây khối này bị `display:none` ở mobile vì mockup mobile không vẽ
      nó. 4T (28/08) đã thay toàn bộ nội dung khối — nay là phần giới thiệu
      trải nghiệm/cách đồng hành, đáng hiện với người xem trên điện thoại —
      và yêu cầu đích danh "hiện luôn trên cả điện thoại". Khối này CHƯA từng
      được căn cho khổ hẹp (vì luôn bị ẩn), nên phải đặt lại cỡ chữ/đệm ở đây;
      desktop ≥850px không đụng tới.
   [phục vụ]  phần tử: Column | khối: .tl-khoi-agency
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-khoi-agency { display: block; }
/* ⚠ Đệm ngang phải là 0 để chữ THẲNG HÀNG với các khối khác trên cùng trang:
   khối anh em `.tl-khoi-niem-tin` đo được `padding:0` ở mobile (nền thẻ chỉ
   có ở desktop). Đặt 14px như vòng đầu làm khối này thụt vào ~30px so với
   phần còn lại — thấy rõ khi so mép chữ với checklist "Cuộc sống hiện tại". */
.tl-ve-toi .page-wrapper .tl-khoi-agency > .col-inner { padding: 0; margin-top: 18px; }
.tl-ve-toi .page-wrapper .tl-khoi-agency h2 {
	font-size: 16px;
	line-height: 1.3;
	margin-bottom: 10px;
}
.tl-ve-toi .page-wrapper .tl-khoi-agency .tl-checklist p {
	font-size: 13.5px;
	line-height: 1.5;
	margin-bottom: 8px;
}
.tl-ve-toi .page-wrapper .tl-khoi-agency .tl-quote-cam p { font-size: 13px; line-height: 1.5; }

/* -----------------------------------------------------------------------------
   5. "CUỘC SỐNG HIỆN TẠI" — ĐÍNH CHÍNH: video đo được chỉ 91×121px dù cột
      cha rộng 121px — `.col` mặc định Flatsome ăn 15px đệm mỗi bên (30px)
      NGAY TRONG cột đã hẹp sẵn 38%, cùng họ lỗi "section 30px" đã bắt ở
      cau-chuyen.css, lần này là `.col` chứ không phải `.section`. Bỏ đệm,
      video lấp đầy đúng 38% cột.
   [phục vụ]  phần tử: Column/Banner | khối: .tl-vt-cuocsong
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(1) { padding: 0 !important; }
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-vt-video-real { width: 100%; aspect-ratio: 1 / 1; }
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-quote-navy { padding: 12px 14px; }
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-quote-navy p { font-size: 13px; }

/* -----------------------------------------------------------------------------
   6. "MỘT VÀI KHOẢNH KHẮC" — CHỈ 2/4 ảnh, ngang, to rõ (không phải 4 ô nhỏ).
   [phục vụ]  phần tử: Row/Image | khối: .tl-vt-khoanhkhac
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .row:last-child > .col:nth-child(n+3) { display: none; }
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .row:last-child > .col { width: 50%; flex-basis: 50%; max-width: 50%; }
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac img { aspect-ratio: 1 / 1; }
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .tl-caption p { font-size: 14px; }

/* -----------------------------------------------------------------------------
   7. KHỐI CUỐI ("Lời nhắn từ tôi") — rút gọn thành băng thấp: video nhỏ gọn
      bên trái, chữ+nút bên phải, bỏ hẳn cột thứ 3 (nội dung trùng lặp ý
      "sẵn sàng lắng nghe" — giữ MỘT nút liên hệ duy nhất cho gọn, không phải
      xoá thông tin, chỉ ẩn cột lặp ý ở khổ hẹp).
   [phục vụ]  phần tử: Row/Column | khối: .tl-vt-loinhan
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row { flex-wrap: nowrap; align-items: center; gap: 10px; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(1) {
	flex: 0 0 32%;
	max-width: 32%;
	padding: 0 !important;
	border: 0;
}
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(2) {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(3) { display: none; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan .tl-vt-video-real { aspect-ratio: 1 / 1; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan h2 { font-size: 15px; line-height: 1.25; margin-bottom: 4px; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan p { font-size: 12.5px; line-height: 1.35; margin-bottom: 6px; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan .button { min-height: 38px; font-size: 12.5px; padding: 0 14px; }

}   /* ==== HẾT @media (max-width: 549px) — vòng 3 ==== */

/* =============================================================================
   ĐIỆN THOẠI THẬT — ≤549px, VÒNG 4: nghiệm thu live 4T (28/08) vòng 2 — timeline
   + gallery đã đúng hướng, các khối còn lại vẫn lệch. Chỉ sửa TRONG KHỐI NÀY
   (≤549px) — không đụng khối 849px/vòng 2/vòng 3 phía trên (đã đúng phần nào
   thì giữ, chỉ ghi đè đúng chỗ còn sai), không đụng header/footer/desktop.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   1. HERO — ĐÍNH CHÍNH LẦN 3: 4T chỉ đích danh kỹ thuật — object-position
      "right center" (100% 50%, không phải một điểm lưng chừng như 68% 30%
      đã thử), cột chữ 54%. Ảnh nguồn có người đứng lệch phải nên "right
      center" cho khung nhìn rộng nhất có thể ôm trọn người, không cắt qua
      mặt như các điểm giữa đã thử.
   [phục vụ]  phần tử: Section (bg) | khối: .tl-vt-hero
   [mockup]   mobile-mockup-ve-toi-v2.png
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg img.bg { object-position: 77% 30% !important; }
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	background: linear-gradient(90deg, #fff 0%, #fff 46%, rgba(255, 255, 255, 0) 56%);
}
.tl-ve-toi .page-wrapper .tl-vt-hero-content { max-width: 54%; }
/* H1 gộp CẢ hai câu (navy + span cam) trong MỘT thẻ — 4T xin rõ tổng 3-4
   dòng. Ở cột 54% (~193px), "BỆNH NHÂN UNG THƯ PHỔI." (23 ký tự) cần cỡ chữ
   nhỏ hơn nhiều mức H1 thông thường mới vừa — đo sống để chốt số cuối, đây
   là ước tính khởi điểm. */
.tl-ve-toi .page-wrapper .tl-hero-h1 h1 { font-size: clamp(12px, 3.4vw, 13px); line-height: 1.3; }

/* -----------------------------------------------------------------------------
   2. TIMELINE 3 THẺ — ảnh 44%/content 56% (từ 46/54), min-height 150px, gộp
      TIÊU ĐỀ + NĂM trên cùng một hàng thay vì 2 hàng riêng (đỡ "chia dọc").
   [phục vụ]  phần tử: Row/Column | khối: .tl-moc
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-moc > .col > .col-inner {
	grid-template-columns: 44% 1fr;
	min-height: 150px;
	align-items: center;
}
.tl-ve-toi .page-wrapper .tl-moc .img { grid-row: 1 / -1; align-self: stretch; height: 100%; }
.tl-ve-toi .page-wrapper .tl-moc img { height: 100%; }
/* "không chia dọc quá nhiều" — KHÔNG thể gộp tiêu đề+năm chung một dòng CSS
   (hai div `.text` riêng biệt, không cùng flex container, ép `display:flex`
   lên từng div chỉ ảnh hưởng con của CHÍNH nó chứ không gộp được HAI div
   thành một hàng — thử rồi bỏ vì gây chồng ô lưới). Nén khoảng cách DỌC giữa
   3 khối xuống tối thiểu thay vì gộp dòng — đạt cùng mục đích "đỡ rời rạc". */
.tl-ve-toi .page-wrapper .tl-moc h3 { margin-bottom: 0; }
.tl-ve-toi .page-wrapper .tl-moc .tl-moc-nam p { margin: 0 0 2px; }

/* -----------------------------------------------------------------------------
   3. "TÔI TIN VÀO..." — icon 48px (từ 40px), canh trái rõ (bỏ vertical-center
      thừa khiến icon trôi giữa khung cao).
   [phục vụ]  phần tử: Featured Box | khối: .tl-khoi-niem-tin
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box {
	min-height: 112px;
	align-items: flex-start;
	padding: 14px 16px;
}
.tl-ve-toi .page-wrapper .tl-khoi-niem-tin .icon-box-img { max-width: 48px; margin-top: 2px; }

/* -----------------------------------------------------------------------------
   4. "CUỘC SỐNG HIỆN TẠI" — video rộng 46% (từ 38%), tỉ lệ vuông thay vì bị
      đệm ăn hẹp.
   [phục vụ]  phần tử: Column/Banner | khối: .tl-vt-cuocsong
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(1) {
	flex-basis: 46%;
	max-width: 46%;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(2) {
	flex-basis: 54%;
	max-width: 54%;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-vt-video-real .open-video {
	width: 40px !important; height: 40px !important;
	max-width: 40px !important; max-height: 40px !important;
}

/* -----------------------------------------------------------------------------
   5. GALLERY — tỉ lệ 16:9 (từ 1:1), caption 13px, mỗi ảnh đúng 50%.
   [phục vụ]  phần tử: Row/Image | khối: .tl-vt-khoanhkhac
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac img { aspect-ratio: 16 / 9; }
.tl-ve-toi .page-wrapper .tl-vt-khoanhkhac .tl-caption p { font-size: 13px; }

/* -----------------------------------------------------------------------------
   6. KHỐI CUỐI — SỬA VÒNG 6 (28/08): 4T so trực tiếp với desktop — khung
      MÀU NAVY của vòng 4/5 là TỰ BỊA, desktop thật sự dùng nền xanh nhạt
      `#eef3fb` (dòng ~693 file này, `.tl-vt-loinhan{background:#eef3fb;
      border-radius:16px}`, KHÔNG scoped media nên áp mọi khổ — mobile chỉ
      GHI ĐÈ SAI thành navy). Bo góc "biến mất" trên mobile không phải vì
      border-radius bị gỡ (vẫn 16px, kế thừa từ luật desktop) mà vì khung
      tràn ĐÚNG BẰNG bề ngang màn hình (full-bleed do luật section chung của
      trang) — bo góc vẫn tồn tại, chỉ là nó rơi ra NGOÀI vùng nhìn thấy vì
      không có khoảng trắng nào hai bên để lộ đường cong ra. Sửa CẢ HAI:
      trả đúng màu + đúng chữ (navy/tối trên nền sáng, giống desktop) VÀ
      chừa lề 16px hai bên để bo góc thật sự lộ ra.
      Video (bg=87) đã ẩn từ vòng 4 vì hết chỗ khi còn 2 cột — nay dồn một
      cột duy nhất, chỗ dư ra dùng để gộp cả 2 đoạn chữ (thông điệp chính +
      dòng hỗ trợ) rồi một nút CAM NẰM NGANG, HẾT BỀ NGANG, ngay dưới chữ —
      đúng yêu cầu "nút nằm ngang ở dưới chữ trong khung". */
.tl-ve-toi .page-wrapper .tl-vt-loinhan {
	background: #eef3fb !important;
	border-radius: 16px !important;
	margin-left: 16px !important;
	margin-right: 16px !important;
	overflow: hidden;
}
/* ⛔ SỬA TIẾP: chữ/nút chạm sát lề khung — `.section-content` đo được
   `padding:0px` (panel Section chỉ in padding TRÊN/DƯỚI, không có ngang —
   đúng bẫy đã ghi nhiều lần trong dự án), mà lúc dồn 2 cột thành 1 cột đầy
   đủ bề ngang (bước 6 phía trên) tôi cũng đã zero nốt padding của `.col`
   để tránh cộng dồn lệch — hoá ra zero cả hai lớp thành 0 padding thật.
   Đặt lại đúng MỘT lớp, trên `.row`, đủ 16px hai bên. */
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row {
	display: block !important;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 10px;
	padding: 0 16px;
}
/* ⛔ SỬA 29/08 — TRẢ LẠI VIDEO Ở MOBILE. Vòng 4 từng ẩn cột video ("hết chỗ
   khi còn 2 cột", xem chú thích trên) — hồi đó khối này tên "LỜI NHẮN TỪ TÔI",
   video chỉ là ảnh trang trí và đã có nút dẫn sang trang khác để xem.
   Nay 4T đổi khối thành "CÂU CHUYỆN CỦA TÔI", gỡ nút dẫn đi và yêu cầu xem
   video NGAY TẠI ĐÂY ⇒ giữ `display:none` là mobile có tiêu đề hứa một câu
   chuyện mà không có gì để xem. Hàng đã là MỘT cột (row `display:block`,
   dòng ~1520) nên video xếp trên cùng, đủ bề ngang — không còn "hết chỗ". */
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(1) {
	display: block !important;
	flex: none;
	width: 100%;
	max-width: 100%;
	margin: 0 0 12px !important;
	padding: 0 !important;
}
/* Ghi đè `aspect-ratio: 1/1` của khối ≤549 vòng 3 (dòng ~1398) — ô vuông hợp
   lúc video nằm cạnh chữ ở 2 cột, còn khi trải hết bề ngang thì 16:9 mới đúng
   khuôn hình video và không đẩy chữ xuống quá sâu. */
.tl-ve-toi .page-wrapper .tl-vt-loinhan .tl-vt-video-real {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
}
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(2) {
	display: block !important;
	flex: none;
	max-width: 100%;
	width: 100%;
	min-width: 0;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(2) .button { display: none; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(3) {
	display: block !important;
	flex: none;
	max-width: 100%;
	width: 100%;
	min-width: 0;
	border: 0 !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(3) h2 { display: none; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan h2 { color: var(--tl-navy); font-size: 17px; line-height: 1.3; }
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(2) p {
	color: var(--tl-text);
	font-size: 13.5px;
	line-height: 1.55;
}
.tl-ve-toi .page-wrapper .tl-vt-loinhan > .section-content > .row > .col:nth-child(3) p {
	color: var(--tl-text);
	font-size: 12.5px;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 10px;
}
.tl-ve-toi .page-wrapper .tl-vt-loinhan .col:nth-child(3) .button {
	display: flex !important;
	width: 100%;
	background: var(--tl-orange) !important;
	border-color: var(--tl-orange) !important;
	color: #fff !important;
	min-height: 44px;
	font-size: 13px;
	padding: 0 14px;
	white-space: normal;
}

/* -----------------------------------------------------------------------------
   7. "CUỘC SỐNG HIỆN TẠI" — SỬA VÒNG 6: video và chữ NẰM CẠNH NHAU (46%/54%,
      luật vòng 5 phía trên) nhưng đo thật lộ ra `align-items:center` kế thừa
      từ desktop canh GIỮA theo chiều dọc — video vuông chỉ cao 146px trong
      khi cột chữ (4 dòng checklist) cao tới 405px, nên video bị đẩy xuống
      ~120px so với đỉnh cột chữ, đọc như "video lệch, trôi vào khoảng trống"
      — đúng thứ 4T thấy trong ảnh chụp live, dù về mặt kỹ thuật không phải
      hai khối chồng lên nhau thật.
      Bỏ hẳn cách nằm cạnh nhau: xếp DỌC — video HẾT BỀ NGANG lên trên, chữ
      hết bề ngang xuống dưới, đúng yêu cầu "video lên trên, chữ ở dưới".
   [phục vụ]  phần tử: Row/Column | khối: .tl-vt-cuocsong
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row {
	display: block !important;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(1) {
	flex-basis: 100% !important;
	max-width: 100% !important;
	width: 100%;
	margin-bottom: 14px;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong > .section-content > .row > .col:nth-child(2) {
	flex-basis: 100% !important;
	max-width: 100% !important;
	width: 100%;
	padding-left: 0 !important;
}
.tl-ve-toi .page-wrapper .tl-vt-cuocsong .tl-vt-video-real {
	aspect-ratio: 16 / 9;
	width: 100%;
}

}   /* ==== HẾT @media (max-width: 549px) — vòng 4 ==== */

/* =============================================================================
   ĐIỆN THOẠI THẬT — ≤549px, VÒNG 5: nghiệm thu live 4T (28/08) vòng 3 — hero
   vẫn chỉ thấy cận mặt (không thấy Marina Bay + dáng ngồi), timeline lộ
   khoảng trống xám dưới ảnh. Chỉ sửa TRONG KHỐI NÀY (≤549px), không đụng
   khối vòng 2/3/4 phía trên trừ nơi ghi đè có chủ đích, không đụng
   header/footer/desktop.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   1. HERO — ĐỔI KIẾN TRÚC: 4T xin H1 rộng ~75% ở trên/trái NHƯNG vẫn phải
      thấy trọn Marina Bay + dáng người bên phải. Hai yêu cầu này KHÔNG thể
      cùng thoả bằng kỹ thuật "cột chữ hẹp + cửa sổ hé lộ ảnh" đã dùng 4 vòng
      trước — cột chữ càng rộng thì cửa sổ hé lộ ảnh càng hẹp, buộc phải zoom
      sâu vào đúng một điểm (mặt) mới lấp đầy khung, không còn chỗ cho toàn
      cảnh. Chuyển hẳn sang kiến trúc khác: ảnh phủ TOÀN BỘ chiều ngang banner
      (100%, không còn "cửa sổ hé lộ" hẹp), chữ TRẮNG nổi trên lớp phủ tối mờ
      dần từ trái — ảnh vì vậy hiện đủ cả khung cảnh (Marina Bay lẫn người)
      thay vì chỉ một lát cắt hẹp, đổi lại màu chữ (đã đổi từ navy/cam ở các
      vòng trước) — đây là đánh đổi kỹ thuật bắt buộc, không phải thẩm mỹ tuỳ
      tiện, ghi lại rõ để 4T nắm.
   [phục vụ]  phần tử: Section (bg) | khối: .tl-vt-hero
   [mockup]   mobile-mockup-ve-toi-v2.png
   -------------------------------------------------------------------------- */
/* ⛔ ĐÍNH CHÍNH ngay trong vòng 5: bản đầu để `.section-bg` cao BẰNG section —
   mà section giờ cao theo TOÀN BỘ nội dung (H1 + cả đoạn văn dài phủ lên
   ảnh) nên section cao tới 695px đo được, ảnh bị kéo giãn theo tỉ lệ đó và
   ZOOM CÒN SÂU HƠN cả 4 vòng trước (cửa sổ hiệu dụng chỉ ~15% ảnh gốc). Sửa
   đúng gốc: cắt banner ảnh CỐ ĐỊNH cao 250px ở ĐẦU section (không kéo dài
   theo hết nội dung), CHỈ nhãn+H1 nổi trên banner đó; đoạn văn dài đẩy XUỐNG
   nền TRẮNG RIÊNG bên dưới banner (không đè lên ảnh — đúng ý "quote dưới
   hero" 4T yêu cầu, áp dụng luôn cho cả đoạn văn không riêng gì quote). */
.tl-ve-toi .page-wrapper .tl-vt-hero { min-height: 0 !important; padding: 0 !important; }
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg {
	position: absolute;
	top: 0; left: 0; right: 0;
	bottom: auto;
	height: 250px;
}
/* ⛔ SỬA 09/09/2026, ĐÍNH CHÍNH NGAY SAU: 4T báo ở khổ ~428px chữ H1 vẫn
   chạm mặt dù cột đã hẹp 58% (xem sửa 08/09) — thử đẩy object-position-x
   78%→50% (dịch người sang phải, chừa chỗ cho chữ). NHƯNG 50% lại cắt mất
   nửa mặt ở khổ hẹp hơn (360-375px, banner cao cố định 250px nên khổ càng
   hẹp thì "cửa sổ" ngang càng thu, cắt sâu hơn vào người) — 4T báo lại ngay.
   Đã kiểm lại CẢ BỐN mốc 360/375/428/549px trực tiếp trên live: 65% là điểm
   cân bằng duy nhất vừa giữ mặt trọn vẹn (không cắt ở 360px) vừa đủ xa chữ
   (không chạm ở 428px). Giữ nguyên trục dọc (32%) và toàn bộ phần còn lại. */
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg img.bg { object-position: 65% 32% !important; height: 100%; }
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	background: linear-gradient(90deg, rgba(7, 27, 70, .68) 0%, rgba(7, 27, 70, .42) 55%, rgba(7, 27, 70, .12) 100%);
}
.tl-ve-toi .page-wrapper .tl-vt-hero .row { position: relative; z-index: 2; }
/* ⛔ ĐÍNH CHÍNH ngay trong vòng 5: `padding:22px 0 0` xoá LUÔN đệm ngang gốc
   của `.col` (Flatsome mặc định `0 15px`) — chữ dán sát mép trái, mất hẳn
   ký tự đầu mỗi dòng ("TÔI"→"ÔI", "NHÂN"→"HÂN", "PHỔI"→"HỔI", bắt được qua
   ảnh chụp). Trả lại đệm trái đúng bằng gutter trang (18px). */
.tl-ve-toi .page-wrapper .tl-vt-hero-content { max-width: 75%; padding: 22px 18px 0 18px; }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-nhan-section p { color: #ffd9c2; }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 { color: #fff; }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 .tl-cam { color: var(--tl-orange); }
/* Cột 75% đủ rộng để giữ cỡ chữ H1 lớn hơn hẳn các vòng trước mà vẫn ra
   khoảng 3-4 dòng. */
.tl-ve-toi .page-wrapper .tl-hero-h1 h1 { font-size: clamp(22px, 6.4vw, 25px); line-height: 1.22; margin-bottom: 6px; }

/* Đoạn văn — nền TRẮNG RIÊNG, ĐẨY XUỐNG dưới banner 250px (không phụ thuộc
   đo pixel chính xác: cứ cho margin-top đủ lớn để chắc chắn đã qua khỏi ảnh,
   nền trắng của chính nó che nốt phần overlap nếu H1 ngắn hơn dự kiến). */
.tl-ve-toi .page-wrapper .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) {
	background: #fff;
	margin: 14px -18px 0;
	padding: 14px 18px 4px;
	position: relative;
}
.tl-ve-toi .page-wrapper .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) p {
	color: var(--tl-muted);
}

/* Thẻ trích dẫn — nằm HẲN dưới hero trên nền trắng, không đè ảnh nữa. */
.tl-ve-toi .page-wrapper .tl-vt-hero-quote {
	margin: 0 -18px;
	padding: 0 18px 16px;
	background: #fff;
	position: relative;
	z-index: 2;
}
.tl-ve-toi .page-wrapper .tl-vt-hero-quote .tl-quote-navy { max-width: 100%; margin-left: 0; }

/* -----------------------------------------------------------------------------
   2. TIMELINE — ĐÍNH CHÍNH: ảnh chỉ cao 90px trong khung 148px (khoảng trống
      xám 58px bên dưới, đúng như 4T mô tả "có placeholder dưới") — nguyên
      nhân là `aspect-ratio:4/3` của khối gốc (mục dựng lần đầu) VẪN ĐANG
      thắng `height:100%` mới thêm ở vòng 4 (aspect-ratio quyết định chiều
      cao trước, height:100% không thắng được khi cả hai cùng khai trên một
      thẻ). Ép bỏ hẳn aspect-ratio ở khổ này bằng `!important`. Ảnh cũng nới
      44%→46% đúng số 4T nhắc lại.
   [phục vụ]  phần tử: Row/Column | khối: .tl-moc
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-moc > .col > .col-inner { grid-template-columns: 46% 1fr; }
/* ⛔ ĐÍNH CHÍNH ngay trong vòng 5: sửa `.img`+`img` vẫn còn khoảng trống 54px
   dưới ảnh — đo DOM mới thấy có MỘT LỚP BỌC ẨN `.img-inner.dark` xen giữa
   `.img` (148px, đã giãn đúng) và `<img>` — height:100% trên `<img>` bám vào
   `.img-inner` chứ không phải `.img`, mà `.img-inner` chưa từng được đặt
   height:100% ở khối nào ⇒ nó tự co về 94px theo ảnh gốc, kéo `<img>` co
   theo. Cùng họ lỗi "thiếu một khâu trong chuỗi bọc" đã gặp ở hero
   cau-chuyen.css — thêm đúng khâu còn thiếu. */
.tl-ve-toi .page-wrapper .tl-moc .img { aspect-ratio: auto !important; height: 100%; }
.tl-ve-toi .page-wrapper .tl-moc .img-inner { height: 100%; }
.tl-ve-toi .page-wrapper .tl-moc img { aspect-ratio: auto !important; height: 100%; }

}   /* ==== HẾT @media (max-width: 549px) — vòng 5 ==== */

/* =============================================================================
   ĐIỆN THOẠI THẬT — ≤549px, VÒNG 6: nghiệm thu live 4T (28/08) vòng 4 — hero
   vẫn là "card nhỏ 323×250" thay vì banner full-bleed; timeline #2 và
   gallery #2 crop lệch (mất mặt / chỉ thấy trời). Chỉ sửa TRONG KHỐI NÀY
   (≤549px), không đụng header/footer/desktop.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   1. HERO — ĐÍNH CHÍNH: banner đo được chỉ RỘNG 324px (không phải full-bleed
      390px) — `.section-bg{left:0;right:0}` tính theo `.section-content` ĐÃ
      BỊ THU HẸP bởi gutter trang (18px mỗi bên) từ tổ tiên, không phải theo
      viewport thật. Dùng kỹ thuật "phá khung" kinh điển (`left:50%;
      width:100vw; margin-left:-50vw`) để banner tràn đúng mép màn hình bất
      kể ancestor bị thu hẹp bao nhiêu. Đồng thời tăng cao 250→330px,
      object-position CHUYỂN HẲN sang "right center" (100% 50%, đúng yêu cầu
      kỹ thuật 4T chỉ định), cột chữ 75%→70%, cỡ chữ 22-25px→21-22px,
      line-height 1.22→1.12.
   [phục vụ]  phần tử: Section (bg) | khối: .tl-vt-hero
   [mockup]   mobile-mockup-ve-toi-v2.png
   -------------------------------------------------------------------------- */
/* ⛔ ĐÍNH CHÍNH ngay trong vòng 6: `margin-left:-50vw` KHÔNG phá được khung —
   `.tl-vt-hero` (section) có `position:relative` (bắt buộc để ảnh nền tuyệt
   đối định vị được), nên nó chính là containing block của `left:50%`, MÀ
   containing block đó chỉ rộng 324px (đã bị gutter trang ăn vào), không
   phải viewport 390px. `left:50%` vì vậy tính ra 50% của 324, không phải
   50% của 390 — ảnh trồi hẳn sang phải, đo được x=195 thay vì x=0 (bắt qua
   ảnh chụp: banner chỉ hiện nửa bên phải, nửa trái trống trắng). Dùng
   `transform:translateX()` thay `margin-left` — transform % tính theo
   CHÍNH kích thước phần tử (width:100vw) chứ không theo containing block,
   nên không bị ăn theo bề rộng đã hẹp của section. */
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg {
	left: 50% !important;
	right: auto !important;
	width: 100vw !important;
	margin-left: 0 !important;
	transform: translateX(-50%);
	height: 330px;
}
/* ⛔ ĐẢO LẠI 08/09/2026: 4T xem lại, xin RÕ mobile phải là ẢNH ĐỨNG MỘT MÌNH,
   áo khoác đen — CHÍNH ảnh id=62 (`hero-ve-toi-that.jpg`) đang dùng cho
   desktop, không phải ảnh id=188 (hero trang chủ, người ngồi + Marina Bay)
   đã đổi sang ở "vòng 7" trước đây. Đảo lại: bỏ ẩn `<img class="bg">`, xoá
   `background-image` trỏ ảnh 188 — mobile quay về DÙNG THẲNG ảnh 62 giống
   desktop, qua `object-position` (khối bên dưới, mốc 549px) thay vì CSS
   background riêng. Tệp ảnh cũ (188) và lo ngại tỉ lệ dẹt của ảnh 62 vẫn
   đúng về mặt kỹ thuật (xem lịch sử git nếu cần đối chiếu) — nhưng đây là
   yêu cầu RÕ RÀNG mới nhất của 4T, ưu tiên hơn quyết định "vòng 7". */
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	background: linear-gradient(90deg, rgba(7, 27, 70, .58) 0%, rgba(7, 27, 70, .28) 55%, rgba(7, 27, 70, .05) 100%);
}
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	background: linear-gradient(90deg, rgba(7, 27, 70, .58) 0%, rgba(7, 27, 70, .28) 55%, rgba(7, 27, 70, .05) 100%);
}
.tl-ve-toi .page-wrapper .tl-vt-hero-content { max-width: 70%; padding-top: 20px; }
.tl-ve-toi .page-wrapper .tl-hero-h1 h1 { font-size: clamp(21px, 5.8vw, 22px); line-height: 1.12; }

/* ⛔ ĐÍNH CHÍNH: đo được đoạn văn bắt đầu ở y=421 trong khi banner kết thúc ở
   y=508 (330px từ đỉnh 178) — hụt 87px, đoạn văn vẫn đè lên góc dưới-phải
   ảnh (thấy rõ vệt trắng cắt vào ảnh trên ảnh chụp). Margin-top thật cần là
   khoảng cách còn thiếu (87px) CỘNG mức đã có (24px). */
.tl-ve-toi .page-wrapper .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) {
	margin-top: 111px;
}

/* -----------------------------------------------------------------------------
   2. TIMELINE — ảnh #2 (và nói chung cả bộ) mất mặt vì `object-position`
      MẶC ĐỊNH là 50% 50% (giữa khung) trong khi người trong ảnh nguồn đứng
      LỆCH PHẢI — cắt theo khung dọc hẹp (134×148) từ ảnh gốc NGANG (300×210)
      thì cắt giữa lại rơi đúng vào mép mặt. Lệch object-position sang phải.
   [phục vụ]  phần tử: Image | khối: .tl-moc
   -------------------------------------------------------------------------- */
.tl-ve-toi .page-wrapper .tl-moc img { object-position: 72% center; }

/* -----------------------------------------------------------------------------
   3. GALLERY #2 — ĐẢO LẠI 09/09/2026 (4T báo "chưa đúng ảnh đang chạy bộ"):
      khối "vòng 7" từng ẩn `<img>` thật + phủ ảnh id=79 (hai vợ chồng, KHÔNG
      liên quan "chạy bộ") vì lúc đó ảnh id=77 CHỈ LÀ skyline/bờ vịnh, không
      người. Ảnh id=77 SAU ĐÓ đã được 4T thay bằng ảnh thật (người chạy bộ
      trên phố, xem media library — đã kiểm hash file trực tiếp, không suy
      đoán), nhưng khối ẩn+phủ này vẫn còn active nên vẫn che mất ảnh ĐÚNG
      bằng ảnh THAY THẾ đã lỗi thời của vòng 7. Gỡ hẳn khối này — quay về
      dùng thẳng `<img>` thật (đã đúng ảnh chạy bộ), giống desktop (desktop
      chưa từng bị vá bằng khối này). */

}   /* ==== HẾT @media (max-width: 549px) — vòng 6 ==== */

/* =============================================================================
   ĐIỆN THOẠI THẬT — ≤549px, VÒNG 7 (đã lỗi thời một phần, xem ĐÍNH CHÍNH
   08/09/2026 ngay dưới): nguyên bản khối này tinh chỉnh cho ảnh id=188
   (Marina Bay + người NGỒI, đã đổi khỏi site 07-08/09/2026 — xem
   40-page-ve-toi.css lịch sử git "Về tôi mobile: đảo lại ảnh hero"). Giữ
   nguyên phần "đổi phủ NAVY → TRẮNG" (vẫn đúng, không phụ thuộc ảnh nào),
   chỉ phần bề rộng cột H1 (88%) là tính riêng cho bố cục ảnh 188 — đã sửa.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   1. HERO — TÁCH RIÊNG bề rộng của (nhãn+H1) khỏi bề rộng của ĐOẠN VĂN — hai
      khối này trước dùng CHUNG `.tl-vt-hero-content{max-width}` nên đoạn văn
      bị bó hẹp theo đúng % dành cho H1. Giờ: nhãn+H1 neo 55% (đủ hẹp để giữ
      trên vùng phủ, đủ rộng để giảm dòng nhờ cỡ chữ nhỏ hơn — 18-19px thay
      21-22px), đoạn văn thả TRỌN BỀ NGANG (đã đứng trên nền trắng riêng dưới
      banner từ vòng 5, không còn đè lên ảnh nên rộng bao nhiêu cũng an toàn).
      Đổi phủ NAVY MỜ → TRẮNG MỜ (đúng yêu cầu "không đè khó đọc lên người" —
      giờ ảnh đúng người rồi, phủ trắng nhẹ đủ đọc chữ tối mà không làm mờ
      hẳn người như phủ navy đậm trước đó), chữ quay lại tối màu (navy/cam)
      cho hợp phủ trắng.
   [phục vụ]  phần tử: Section (bg) + Text | khối: .tl-vt-hero
   [mockup]   mobile-mockup-ve-toi-v2.png
   -------------------------------------------------------------------------- */
/* ⛔ ĐÍNH CHÍNH 08/09/2026: 4T báo "chữ che mất mặt người" sau khi ảnh đổi
   lại về id=62 (đứng một mình, áo khoác đen). Cột 88% từng đúng cho ảnh 188
   (người NGỒI sát mép phải, object-position 78% đặt hẳn người ra rìa khung
   nên cột rộng vẫn không đè mặt) — ảnh 62 với CÙNG con số object-position
   78% lại cho khuôn mặt nằm gần giữa khung hơn (bố cục đứng, không ngồi),
   nên cột 88% chờm thẳng lên mặt. Đã kiểm trực tiếp trên live (bơm CSS qua
   DevTools trước, không suy luận toạ độ): hẹp về 58% thì mặt hiện rõ hoàn
   toàn, H1 xuống 6 dòng (thay vì 4-5 như bản 88%) — đánh đổi chấp nhận được,
   ưu tiên đúng yêu cầu "nhìn rõ mặt". Gradient trắng thu hẹp lại theo đúng
   tỉ lệ (cột hẹp hơn thì vùng cần phủ đặc cũng hẹp lại, không cần lan xa
   86% như bản cũ nữa). */
.tl-ve-toi .page-wrapper .tl-vt-hero > .section-bg::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .1) 62%);
}
.tl-ve-toi .page-wrapper .tl-vt-hero-content { max-width: none; }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-nhan-section,
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 { max-width: 58%; }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-nhan-section p { color: var(--tl-orange-chu); }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 { color: var(--tl-navy); }
.tl-ve-toi .page-wrapper .tl-vt-hero .tl-hero-h1 h1 .tl-cam { color: var(--tl-orange-chu); }
.tl-ve-toi .page-wrapper .tl-hero-h1 h1 { font-size: clamp(18px, 5vw, 19px); line-height: 1.1; }

/* Đoạn văn — trọn bề ngang (đã đứng trên nền trắng riêng, không cần % nữa),
   nới cỡ chữ nhẹ để dễ đọc hơn ở bề ngang rộng hơn. */
.tl-ve-toi .page-wrapper .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) {
	max-width: none;
}
.tl-ve-toi .page-wrapper .tl-vt-hero-content .text:not(.tl-hero-h1):not(.tl-nhan-section) p {
	font-size: 15.5px;
	line-height: 1.5;
}

}   /* ==== HẾT @media (max-width: 549px) — vòng 7 ==== */

/* =============================================================================
   7. NÚT PLAY CỦA VIDEO Ở KHỐI "CÂU CHUYỆN CỦA TÔI" — KHỔ < 850 (29/08)
   [phục vụ]  phần tử: Video Button | khối: .tl-vt-loinhan .tl-vt-video-real
   [lý do vượt panel]  `[video_button]` không có ô định kiểu; nút do Flatsome
              render sẵn class `.button.icon.circle.is-outline`.
   ⛔ Luật vẽ nút thành VÒNG TRÒN TRẮNG 60px nằm trong khối
      `@media (min-width: 850px)` (mở ở dòng 67) ⇒ CHỈ CÓ TÁC DỤNG Ở DESKTOP.
      Dưới 850 nút rơi về mặc định `.is-outline` của Flatsome, rồi bị luật
      `.tl-vt-loinhan .button{width:100%}` (khối ≤849) kéo dài thành VIÊN
      THUỐC CAM 400×46 (ở 768) và 172×38 (ở 390) — đo bằng CDP
      `CSS.getMatchedStylesForNode`, không phải suy đoán.
   ⚠ Lỗi này CÓ TỪ TRƯỚC ở dải 550–849 (video vốn vẫn hiện ở đó), chỉ là
      không ai thấy vì ở ≤549 video bị ẩn. Nay bật video lại cho mobile thì
      nó lộ ra ở cả hai dải ⇒ vá cho TRỌN dải <850, không riêng ≤549.
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
	.tl-ve-toi .page-wrapper .tl-vt-loinhan .tl-vt-video-real .open-video {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 56px !important;
		height: 56px !important;
		min-width: 56px !important;
		max-width: 56px !important;
		min-height: 56px !important;
		max-height: 56px !important;
		padding: 0 !important;
		border-radius: 50% !important;
		background: #fff !important;
		border: none !important;
		color: var(--tl-navy) !important;
		box-shadow: 0 6px 20px rgba(7, 27, 70, .35);
	}
	.tl-ve-toi .page-wrapper .tl-vt-loinhan .tl-vt-video-real .open-video i { margin-left: 3px; }
}