/* =============================================================================
   40-page-kien-thuc.css — STYLE DESKTOP TRANG "KIẾN THỨC". Dựng 20/08/2026.

   🔒 PHẠM VI — hai lớp cô lập:
      1. TỆP chỉ nạp khi slug = kien-thuc (functions.php, luật III.11).
      2. MỌI bộ chọn bọc trong `.tl-kien-thuc` — lớp body child theme tự gắn.

   📌 Brief xin wrapper `.tl-knowledge-page`. KHÔNG tạo thêm: `body.tl-kien-thuc`
      đã có sẵn và TỰ ĐỘNG; linter mục 8 cũng đòi đúng lớp `tl-<slug>`.

   📐 CHỈ DESKTOP: mọi luật bố cục nằm trong @media (min-width: 850px).
      Mobile trang này chưa làm — để nguyên, không đụng.

   ⛔ BỐN CLASS DÙNG CHUNG VỚI TRANG KHÁC — mọi luật chạm chúng BẮT BUỘC bọc
      `.tl-kien-thuc`, tuyệt đối không sửa trần:
        `.tl-card-baiviet` → còn dùng ở TRANG CHỦ
        `.tl-quote-navy`   → còn dùng ở ve-toi và toi-co-the-giup-gi
        `.tl-band-cta`     → còn dùng ở cau-chuyen và toi-co-the-giup-gi
        `.tl-card-rank` · `.tl-chu-de` · `.tl-o-*` → nằm ở 30-components

   ♻️ DÙNG LẠI, KHÔNG VIẾT LẠI:
      · header · footer · nút → global;
      · BỀ NGANG DẢI đã đúng brief §4 sẵn nhờ `--tl-be-ngang` (00-tokens, mục 24):
        1200→1128 · 1280→1190 · 1366→1243 · 1440→1289 · 1600→1360.
        Brief xin 1120–1160 / 1240–1280 / ~1280 / tối đa 1360 ⇒ khớp, bỏ qua.

   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu — mọi con số lấy thẳng từ chữ brief.
============================================================================= */

/* -----------------------------------------------------------------------------
   BẢNG MÀU — áp MỌI KHỔ (màu không phải bố cục)
   [phục vụ]  toàn trang | khối: biến màu
   [lý do vượt panel]  Customizer chỉ có 2 ô màu; brief §3 cần 11 biến.
   ⛔ Đặ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.
   ⚠ `--tl-orange-chu` đậm hơn `#F05A24` vì chữ nhỏ 9–11px cần 4,5:1 mới đạt AA;
     `#F05A24` chỉ đạt 3,39:1 (đã đo, CLAUDE.md 22.5).
   -------------------------------------------------------------------------- */
.tl-kien-thuc .page-wrapper {
	/* ⚠ 4T chốt ĐÚNG hai mã này 27/08 (khớp icon SVG mới `#061d4c`/`#f15b2a`) —
	   khác token site-wide `#010F38`/`#EB500E` một chút, giữ nguyên theo yêu cầu
	   riêng cho trang này thay vì làm tròn về token chung. */
	--tl-navy: #061d4c;
	--tl-navy-2: #10305c;
	--tl-orange: #f15b2a;
	--tl-orange-chu: #c4400a;
	--tl-orange-hover: #d94c18;
	--tl-text: #172033;
	--tl-muted: #687083;
	--tl-border: #e6e9ef;
	--tl-bg-soft: #f7f9fc;
	--tl-orange-soft: #fff8f3;
	--tl-white: #fff;
	--tl-r: 5px;
}

/* -----------------------------------------------------------------------------
   TAGLINE HEADER — mockup có 2 dòng nhỏ dưới logo, bản live đang TẮT
   [phục vụ]  phần tử: Header (ngoài .page-wrapper) | khối: .logo-tagline
   [trang]    kien-thuc — NHƯNG bật `site_logo_slogan` là theme_mod DÙNG CHUNG
   ⚠ 4T PHẢN HỒI 27/08 (vòng 3): "chỉ chỉnh scope Kiến thức", nhưng cơ chế bật
     tagline (`get_theme_mod('site_logo_slogan')` trong
     template-parts/header/partials/element-logo.php) là MỘT CÔNG TẮC DÙNG
     CHUNG — không có cách bật RIÊNG cho một trang. Đã bật công tắc (dữ liệu,
     không phải file CSS) vì đó là nội dung THẬT đã có sẵn (`blogdescription`),
     không phải bịa thêm. Phần CSS căn chỉnh dưới đây CHỈ áp khi
     `body.tl-kien-thuc` — 5 trang kia đang có cùng lỗi tràn/đè breadcrumb
     (`.logo-tagline` không giới hạn bề rộng nên vỡ 4 dòng, cao 72px trong khi
     header chỉ cao 56px) nhưng KHÔNG được vá ở đây vì đó là file
     `20-header.css` — ngoài phạm vi được giao, và đang có phiên khác sửa dở.
     Đã báo 4T ở cuối báo cáo, không tự ý đụng.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .logo-tagline {
	max-width: 230px;
	margin: 1px 0 0;
	padding: 0;
	font-size: 10.5px;
	font-style: normal;
	line-height: 1.25;
	color: #687083;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 850px) {

/* -----------------------------------------------------------------------------
   0. GỠ CLEARFIX CỦA `.row` TRƯỚC KHI ĐỔI SANG LƯỚI
   [lý do vượt panel]  `.row` của Flatsome có ::before/::after clear float. Khi
              `.row` thành LƯỚI, hai pseudo đó biến thành hai Ô LƯỚI THẬT — đẻ
              ra hàng trống và đẩy mọi thứ xuống. Đã trả giá ở trang Câu chuyện.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row::before,
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row::after,
.tl-kien-thuc .tl-chu-de::before,
.tl-kien-thuc .tl-chu-de::after,
.tl-kien-thuc .tl-card-baiviet::before,
.tl-kien-thuc .tl-card-baiviet::after,
.tl-kien-thuc .tl-card-rank::before,
.tl-kien-thuc .tl-card-rank::after,
.tl-kien-thuc .tl-knowledge-values > .section-content > .row::before,
.tl-kien-thuc .tl-knowledge-values > .section-content > .row::after,
.tl-kien-thuc .tl-band-cta > .section-content > .row::before,
.tl-kien-thuc .tl-band-cta > .section-content > .row::after { display: none; }

/* Footer phải NỐI SÁT dải CTA (brief §26). Khe hở không đến từ margin section
   (đo ra 0) mà từ `padding-bottom: 30px` mặc định của `.col` cộng padding đáy
   của `#content`. Cùng bẫy đã ghi ở ve-toi và cau-chuyen. */
.tl-kien-thuc #content.page-wrapper { padding-bottom: 0; }
.tl-kien-thuc .page-wrapper > .row-main > .col { padding-bottom: 0; }
.tl-kien-thuc .page-wrapper .section:last-child .col { padding-bottom: 0; }

/* -----------------------------------------------------------------------------
   0b. BREADCRUMB — nhỏ, sát lề trái, không kéo khe hở đầu trang
   [phục vụ]  phần tử: Section/Column/Text | khối: .tl-breadcrumb
   [trang]    kien-thuc
   ⚠ 4T PHẢN HỒI 27/08 (vòng 3): đo được section breadcrumb cao TỚI 100px cho
     đúng MỘT dòng chữ ~16px — cùng bẫy `.col{padding-bottom:30px}` mặc định
     của Flatsome (đã biết ở footer/CTA, nhưng section ĐẦU trang thì chưa vá).
     Cộng dồn với padding hero phía dưới ra khoảng hở đầu trang lớn hơn hẳn
     mockup. Gỡ padding-bottom thừa + thêm icon nhà nhỏ trước "Trang chủ"
     (đúng mẫu, cùng kỹ thuật đã dùng ở trang Về tôi §38). */
.tl-kien-thuc .page-wrapper .section:first-child .col { padding-bottom: 0; }

.tl-kien-thuc .tl-breadcrumb,
.tl-kien-thuc .tl-breadcrumb a {
	font-size: 11px;
	line-height: 1.4;
	color: #8a92a3;
}

.tl-kien-thuc .tl-breadcrumb a { color: var(--tl-orange-chu); }

.tl-kien-thuc .tl-breadcrumb .rank-math-breadcrumb > p::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: 4px;
	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");
}

/* -----------------------------------------------------------------------------
   1. HERO (brief §7 · §8 · §10 · §11)
   [phục vụ]  phần tử: Row/Column/Image/Text | khối: hero
   [lý do vượt panel]  Panel Column chỉ cho span nguyên phần 12. Bố cục đang là
              7/5 — tức chữ RỘNG HƠN ảnh, ngược hẳn brief §7 (.82fr/1.18fr ≈
              41/59). Không span nào ra đúng tỉ lệ đó mà vẫn giữ `span__sm`.
   Đo trước khi sửa: hero cao 570–611px; brief §7 xin 330–390px.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: 0 30px;
	align-items: stretch;
}

.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

.tl-kien-thuc .tl-knowledge-hero-content { align-self: center; }

.tl-kien-thuc .tl-knowledge-hero-content .tl-hero-h1 h1 {
	font-size: clamp(31px, 2.4vw, 39px);
	line-height: 1.14;
	font-weight: 800;
	color: var(--tl-navy);
	margin-bottom: 12px;
}

.tl-kien-thuc .tl-knowledge-hero-content .text:not(.tl-hero-h1) p {
	font-size: 13.5px;
	line-height: 1.6;
	max-width: 470px;
	margin-bottom: 8px;
}

/* --- khối "MỤC TIÊU CỦA CHÚNG TÔI" (brief §9) --------------------------------
   [lý do vượt panel]  `pos="left"` cho icon bên trái, nhưng bề rộng cột icon,
              nền, viền và bo góc thì panel Featured Box không có ô nào. */
.tl-kien-thuc .tl-khung-muc-tieu {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 12px;
	align-items: center;
	margin: 14px 0 0;
	padding: 14px 16px;
	background: var(--tl-orange-soft);
	border: 1px solid #f3e7df;
	border-radius: 6px;
}

.tl-kien-thuc .tl-khung-muc-tieu .icon-box-img {
	width: 36px;
	max-width: 36px;
	margin: 0;
}

.tl-kien-thuc .tl-khung-muc-tieu .icon-box-text { padding: 0; }

.tl-kien-thuc .tl-khung-muc-tieu p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--tl-navy);
}

.tl-kien-thuc .tl-khung-muc-tieu strong {
	display: block;
	margin-bottom: 2px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tl-orange-chu);
}

/* --- ảnh hero + quote đè lên (brief §10 · §11) -------------------------------
   [lý do vượt panel]  Panel không xếp chồng được hai phần tử anh em. Quote hiện
              nằm DƯỚI ảnh (đo: position relative) — brief xin nó đè lên mép
              phải ảnh. */
.tl-kien-thuc .tl-knowledge-hero-media > .col-inner {
	position: relative;
	height: 100%;
}

.tl-kien-thuc .tl-knowledge-hero-media .img,
.tl-kien-thuc .tl-knowledge-hero-media .img-inner { height: 100%; margin-bottom: 0; }

.tl-kien-thuc .tl-knowledge-hero-media img {
	width: 100%;
	height: 100%;
	min-height: 330px;
	max-height: 390px;
	object-fit: cover;
	/* ⚠ Ảnh có nhân vật + bàn làm việc. `center` cắt mất laptop và tư liệu ở
	   khung dẹt. 38% kéo khung nhìn sang trái, giữ cả người lẫn bàn, đồng thời
	   chừa nửa phải trống cho thẻ quote đè lên mà KHÔNG che mặt.
	   → CẦN NGƯỜI NHÌN LẠI khi thay ảnh thật (mục 5 báo cáo). */
	object-position: 38% center;
	border-radius: var(--tl-r);
}

/* ⛔ SỬA 29/08 — ĐỔI SANG MÉP TRÁI. Trước đây thẻ neo `right:28px`, đè đúng
   lên MÀN HÌNH CT (phần nội dung chính của ảnh: phim chụp + ngón tay đang
   chỉ vào tổn thương). 4T yêu cầu chuyển hẳn sang trái, đặt vào vùng CÁI
   BÌNH NƯỚC — đó là mảng ít thông tin nhất trong khung, che vào không mất gì.
   ⚠ CHỈ desktop (khối này nằm trong `@media min-width:850`); mobile giữ
   nguyên bố cục cũ như 4T dặn. */
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy {
	position: absolute;
	left: 28px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 230px;
	margin: 0;
	padding: 20px;
	background: var(--tl-navy);
	border-radius: 6px;
	color: var(--tl-white);
}

.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy p {
	font-size: 13px;
	line-height: 1.65;
	color: var(--tl-white);
	margin: 0;
}

.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy .tl-quote-ten {
	margin-top: 8px;
	font-size: 13.5px;
	font-style: italic;
	text-align: right;
}

/* -----------------------------------------------------------------------------
   2. CHỦ ĐỀ KIẾN THỨC — 6 thẻ ngang (brief §12 · §13)
   [phục vụ]  phần tử: Row/Featured Box | khối: .tl-chu-de
   [lý do vượt panel]  `span="2"` (panel) đã cho 6 cột, nhưng CAO BẰNG NHAU,
              viền, gạch cam dưới tiêu đề và trạng thái rê chuột thì không có ô nào.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-topic-section h2 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 800;
	text-align: center;
	color: var(--tl-navy);
	margin-bottom: 14px;
}

.tl-kien-thuc .tl-chu-de {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.tl-kien-thuc .tl-chu-de > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

.tl-kien-thuc .tl-chu-de .icon-box {
	height: 100%;
	min-height: 130px;
	margin: 0;
	padding: 16px 10px 14px;
	background: var(--tl-white);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	text-align: center;
	transition: border-color .2s ease;
}

.tl-kien-thuc .tl-chu-de .icon-box-img {
	width: 42px;
	max-width: 42px;
	margin: 0 auto 10px;
}

.tl-kien-thuc .tl-chu-de .icon-box-img svg { transition: color .2s ease; }

.tl-kien-thuc .tl-chu-de p {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 800;
	color: var(--tl-navy);
}

/* gạch cam nhỏ dưới tiêu đề — brief §13 */
.tl-kien-thuc .tl-chu-de .icon-box-text::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin: 9px auto 0;
	background: var(--tl-orange);
	opacity: .5;
	transition: opacity .2s ease;
}

/* ⛔ Rê chuột KHÔNG tô cam cả thẻ (brief §31) — chỉ viền đậm lên và gạch rõ hơn */
.tl-kien-thuc .tl-chu-de .icon-box:hover { border-color: rgba(7, 27, 70, .18); }
.tl-kien-thuc .tl-chu-de .icon-box:hover .icon-box-text::after { opacity: 1; }
.tl-kien-thuc .tl-chu-de .icon-box:hover .icon-box-img svg { color: var(--tl-orange); }

/* -----------------------------------------------------------------------------
   3. ĐẦU SECTION — tiêu đề trái, "Xem tất cả bài viết" phải (brief §14 · §29)
   [phục vụ]  phần tử: Column/Text | khối: .tl-latest-posts · .tl-featured-posts
   [lý do vượt panel]  Bốn phần tử (h2 · phụ đề · liên kết · lưới bài) là anh em
              phẳng trong MỘT cột; panel không xếp được hai cái đầu sang trái và
              cái thứ ba sang phải cùng một hàng. Đặt ô lưới tường minh.
   -------------------------------------------------------------------------- */
/* ⚠ `:first-child` KHÔNG được bỏ. Section "bài mới nhất" có HAI hàng: hàng đầu
   chứa tiêu đề + lưới bài, hàng sau chỉ có nút "Xem thêm". Không bó lại thì nút
   cũng thành ô lưới cột `1fr` và bị kéo dài hết dải — đã thấy trên ảnh chụp. */
.tl-kien-thuc .tl-latest-posts > .section-content > .row:first-child > .col > .col-inner,
.tl-kien-thuc .tl-featured-posts > .section-content > .row:first-child > .col > .col-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	column-gap: 20px;
}

.tl-kien-thuc .tl-latest-posts h2,
.tl-kien-thuc .tl-featured-posts h2 {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 3px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--tl-navy);
}

.tl-kien-thuc .tl-latest-posts .tl-phu-de,
.tl-kien-thuc .tl-featured-posts .tl-phu-de { grid-column: 1; grid-row: 2; }

.tl-kien-thuc .tl-phu-de p {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--tl-muted);
}

.tl-kien-thuc .tl-section-more {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
}

.tl-kien-thuc .tl-section-more p { margin: 0; }

/* ⛔ Là LIÊN KẾT, không phải nút (brief §29) */
.tl-kien-thuc .tl-section-more a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--tl-orange-chu);
}

.tl-kien-thuc .tl-section-more a::after { content: "→"; font-weight: 700; }
.tl-kien-thuc .tl-section-more a:hover { color: var(--tl-orange-hover); }

.tl-kien-thuc .tl-card-baiviet,
.tl-kien-thuc .tl-card-rank { grid-column: 1 / -1; margin-top: 12px; }

/* -----------------------------------------------------------------------------
   4. BÀI VIẾT MỚI NHẤT — lưới 3 cột (brief §15 → §18, đổi lại 04/09/2026)
   [phục vụ]  phần tử: Blog Posts | khối: .tl-card-baiviet
   [lý do vượt panel]  `columns="3"` (panel) cho 3 cột nhưng KHÔNG cho cao
              bằng nhau — cùng lý do đã đo cho bản 6 cột trước đây.
   ⛔ Bọc `.tl-kien-thuc`: `.tl-card-baiviet` CÒN DÙNG Ở TRANG CHỦ.
   -------------------------------------------------------------------------- */
/* ⚠ 3 CỘT — 4T chốt 04/09/2026, gửi ảnh mẫu rõ 3 thẻ một hàng, ĐẢO LẠI quyết
   định trước đó (từng đổi 3→6 vì "3 cột làm section cao 1.100px", xem lịch sử
   git). 6 bài ÷ 3 = 2 hàng đầy, không mồ côi — vẫn giữ nguyên tinh thần "chỉ
   6·3·2 cột mới chia hết 6 bài" đã lập luận khi chọn 6 cột.
   ⇒ Section cao hơn bản 6 cột là ĐÁNH ĐỔI ĐÃ CHẤP NHẬN (đúng yêu cầu 4T), giữ
     lại kỹ thuật THẺ co mượt (clamp khe/lề/tiêu đề) từ bản 6 cột — vẫn đúng
     cho bản 3 cột, không phải viết lại. */
.tl-kien-thuc .tl-card-baiviet {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(7px, .73vw, 10px);
}

.tl-kien-thuc .tl-card-baiviet > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

.tl-kien-thuc .tl-card-baiviet > .col > .col-inner,
.tl-kien-thuc .tl-card-baiviet .box { height: 100%; }

.tl-kien-thuc .tl-card-baiviet .box {
	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--tl-white);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.tl-kien-thuc .tl-card-baiviet .box:hover {
	border-color: rgba(7, 27, 70, .16);
	box-shadow: 0 4px 12px rgba(10, 30, 70, .04);
}

.tl-kien-thuc .tl-card-baiviet .box-image { width: 100%; }
.tl-kien-thuc .tl-card-baiviet .box-image img { object-fit: cover; transition: transform .25s ease; }
.tl-kien-thuc .tl-card-baiviet .box:hover .box-image img { transform: scale(1.015); }

/* ⚠ `.box-text` của Flatsome là `position:relative` ⇒ nó mới là gốc định vị của
   badge. Không trả về `static` thì badge rơi xuống vùng chữ. */
.tl-kien-thuc .tl-card-baiviet .box-text { position: static; }

.tl-kien-thuc .tl-card-baiviet .box-text {
	display: flex;
	flex: 1;
	padding: clamp(7px, .66vw, 9px) clamp(7px, .66vw, 9px) clamp(8px, .73vw, 10px);
	text-align: left;
}

.tl-kien-thuc .tl-card-baiviet .box-text-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
}

.tl-kien-thuc .tl-card-baiviet .post-title {
	order: 1;
	margin-bottom: 5px;
	/* 1024 → 11,5px · 1366 → 12,5px. Sàn 11,5 là đáy brief §28 cho tiêu đề thẻ;
	   KHÔNG hạ thấp hơn để cứu số cột. */
	font-size: clamp(11.5px, .92vw, 12.5px);
	line-height: 1.4;
	font-weight: 800;
}

.tl-kien-thuc .tl-card-baiviet .post-title a { color: var(--tl-navy); }

/* ⚠ `show-on-hover` để `opacity:0` — trích dẫn vô hình tới khi rê chuột. Trên
   thư viện kiến thức thì đó là mất luôn phần dẫn dắt người đọc.
   ⛔ `visibility` phải bó trong khối đang hiện, đừng đặt trần: thuộc tính này
      DI TRUYỀN và sẽ bỏ ẩn cả những khối Flatsome đang giấu. */
.tl-kien-thuc .tl-card-baiviet .from_the_blog_excerpt {
	order: 2;
	opacity: 1;
	visibility: visible;
	max-height: none;
	margin-bottom: 0;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--tl-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* `.is-divider` là phần tử CÓ SẴN giữa tiêu đề và trích dẫn — đổi thành hàng
   meta ở đáy thẻ, KHÔNG thêm phần tử nào vào DOM. */
.tl-kien-thuc .tl-card-baiviet .is-divider {
	order: 3;
	width: auto;
	height: auto;
	max-width: none;
	margin: auto 0 0;
	padding-top: 7px;
	background: none;
	font-size: 9px;
	line-height: 1.3;
	color: var(--tl-muted);
}

.tl-kien-thuc .tl-card-baiviet .is-divider::after { content: "Đọc bài →"; }

/* ⚠ Lớp phủ trải liên kết ra CẢ THẺ, neo vào liên kết TIÊU ĐỀ (gốc định vị gần
   nhất là `.box`). Không có nó thì hàng meta nhìn như liên kết mà bấm không ăn. */
.tl-kien-thuc .tl-card-baiviet .post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tl-kien-thuc .tl-card-baiviet .box:hover .is-divider { color: var(--tl-orange-chu); }

/* badge chuyên mục góc trên-trái ảnh — mockup: NỀN CAM ĐẶC, CHỮ TRẮNG (không
   phải nền trắng/chữ cam như bản cũ đoán khi chưa có ảnh mẫu) */
.tl-kien-thuc .tl-card-baiviet .cat-label {
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 2;
	margin: 0;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--tl-orange);
	color: var(--tl-white);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.3;
	opacity: 1;
}

/* Hàng "X phút đọc · ngày đăng" — chèn qua hook `flatsome_blog_post_after`
   (functions.php), thay cho "Đọc bài →" giả trên `.is-divider`. Cả thẻ đã có
   lớp phủ liên kết (`.post-title a::after`) nên không cần chữ mời bấm riêng. */
.tl-kien-thuc .tl-card-baiviet .is-divider,
.tl-kien-thuc .tl-card-rank .is-divider { display: none; }

.tl-kien-thuc .tl-card-baiviet .tl-meta-hang,
.tl-kien-thuc .tl-card-rank .tl-meta-hang {
	order: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: auto 0 0;
	padding-top: 7px;
	font-size: 9px;
	line-height: 1.3;
	color: var(--tl-muted);
}

.tl-kien-thuc .tl-card-rank .tl-meta-hang { order: 3; padding-top: 6px; font-size: 9.5px; }

/* Trang này KHÔNG có ngày ở lưới "mới biên" (đúng mẫu — chỉ "X phút đọc") */
.tl-kien-thuc .tl-card-rank .tl-meta-ngay { display: none; }

.tl-kien-thuc .tl-meta-phut::before,
.tl-kien-thuc .tl-meta-ngay::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 3px;
	vertical-align: -1px;
	background: no-repeat center / contain;
}

.tl-kien-thuc .tl-meta-phut,
.tl-kien-thuc .tl-meta-ngay { display: inline-flex; align-items: center; white-space: nowrap; }

.tl-kien-thuc .tl-meta-phut::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687083' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

.tl-kien-thuc .tl-meta-ngay::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687083' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
}

/* --- nút "Xem thêm bài viết" (brief §19) ---------------------------------- */
.tl-kien-thuc .tl-latest-posts .button {
	min-height: 38px;
	height: 38px;
	padding: 0 22px;
	margin: 18px 0 0;
	background: var(--tl-white);
	border: 1px solid rgba(240, 90, 36, .55);
	border-radius: var(--tl-r);
	color: var(--tl-orange-chu);
	font-size: 11.5px;
	font-weight: 700;
}

.tl-kien-thuc .tl-latest-posts .button:hover {
	background: var(--tl-white);
	border-color: var(--tl-orange);
	color: var(--tl-orange-hover);
}

/* -----------------------------------------------------------------------------
   5. BÀI VIẾT XEM NHIỀU — 5 thẻ, đánh số 01–05 (brief §20 · §21)
   [phục vụ]  phần tử: Blog Posts | khối: .tl-card-rank
   [lý do vượt panel]  Số thứ tự do CSS counter ở 30-components sinh ra (quyết
              định 3.7-3: gõ tay thì đổi thứ tự bài là số sai hết). Ở đây chỉ
              chỉnh HÌNH DẠNG con số cho đúng brief §21: ô vuông 32px nền cam.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-card-rank {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}

.tl-kien-thuc .tl-card-rank > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

.tl-kien-thuc .tl-card-rank > .col > .col-inner,
.tl-kien-thuc .tl-card-rank .box { height: 100%; }

.tl-kien-thuc .tl-card-rank .box {
	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--tl-white);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.tl-kien-thuc .tl-card-rank .box:hover {
	border-color: rgba(7, 27, 70, .16);
	box-shadow: 0 4px 12px rgba(10, 30, 70, .04);
}

/* ⚠ Bắt buộc như lưới trên: `.box` thành flex-column thì `.box-image` không còn
   giãn ngang, bề rộng suy từ con — mà con lấy chiều cao từ `padding-top` theo
   PHẦN TRĂM BỀ RỘNG. Vòng luẩn quẩn ⇒ 0×0, ảnh biến mất và thẻ chỉ còn 79px.
   Đã dính đúng lỗi này ở lần chạy đầu vì quên chép sang khối này. */
.tl-kien-thuc .tl-card-rank .box-image { width: 100%; }

.tl-kien-thuc .tl-card-rank .box-image img { object-fit: cover; }

.tl-kien-thuc .tl-card-rank .box-image::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 0;
	background: var(--tl-orange);
	color: var(--tl-white);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

.tl-kien-thuc .tl-card-rank .box-text {
	position: static;
	display: flex;
	flex: 1;
	padding: 10px 10px 11px;
	text-align: left;
}

.tl-kien-thuc .tl-card-rank .box-text-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
}

.tl-kien-thuc .tl-card-rank .post-title {
	order: 1;
	margin-bottom: 0;
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 800;
}

.tl-kien-thuc .tl-card-rank .post-title a { color: var(--tl-navy); }

.tl-kien-thuc .tl-card-rank .post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tl-kien-thuc .tl-card-rank .is-divider {
	order: 2;
	width: auto;
	height: auto;
	max-width: none;
	margin: auto 0 0;
	padding-top: 7px;
	background: none;
	font-size: 9.5px;
	line-height: 1.3;
	color: var(--tl-muted);
}

.tl-kien-thuc .tl-card-rank .is-divider::after { content: "Đọc bài →"; }
.tl-kien-thuc .tl-card-rank .box:hover .is-divider { color: var(--tl-orange-chu); }

/* -----------------------------------------------------------------------------
   6. KIẾN THỨC NỔI BẬT — 4 giá trị (brief §22)
   [phục vụ]  phần tử: Row/Featured Box | khối: .tl-o-cam · .tl-o-xanh-* · .tl-o-vang
   [lý do vượt panel]  `pos="left"` cho icon bên trái; bề rộng cột icon 46px,
              viền và bo góc thì panel không có ô nào.
   ⛔ Giữ nền tint rất nhạt sẵn có ở 30-components, KHÔNG biến thành thẻ đổ bóng.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-knowledge-values h2 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 800;
	text-align: center;
	color: var(--tl-navy);
	margin-bottom: 14px;
}

.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

/* ⚠ Cùng lý do: section này cũng có hai hàng — hàng đầu là tiêu đề, hàng sau là
   4 giá trị. Không bó `:last-child` thì tiêu đề "KIẾN THỨC NỔI BẬT" bị đóng
   khung viền như một thẻ. */
/* ⛔ ĐÍNH CHÍNH 27/08 (vòng 4) — vòng 2 ĐO SAI: lấy thẳng số đo trên ảnh mockup
   GỐC (853px) làm số cho khổ LIVE (1440px), quên nhân hệ số quy đổi 1,688
   (1440/853). Đo lại đúng cách bằng `im.getpixel()` dò biên màu nền tint:
   card cao NATIVE 80px → quy đổi 80×1,688 ≈ **135px**, KHÔNG PHẢI ~75px như
   vòng 2 tưởng. Bản "siết" ở vòng 2 vì vậy đi NGƯỢC hướng — kéo card từ 145px
   (đã khá gần 135px thật) xuống còn nhỏ hơn cả mục tiêu đúng, ra đúng cảm
   giác "chữ/icon bé tí" 4T vừa chỉ ra. Trả lại kích thước gần bản gốc, chỉ
   giữ lại phần bỏ viền (viền là chi tiết đúng — mockup gần như không viền). */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner {
	height: 100%;
	padding: 16px 18px;
	border: none;
	border-radius: var(--tl-r);
}

.tl-kien-thuc .tl-knowledge-values .icon-box {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	align-items: center;
	margin: 0;
}

.tl-kien-thuc .tl-knowledge-values .icon-box-img {
	width: 40px;
	max-width: 40px;
	margin: 0;
}

.tl-kien-thuc .tl-knowledge-values .icon-box-text { padding: 0; }

.tl-kien-thuc .tl-knowledge-values p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--tl-text);
}

.tl-kien-thuc .tl-knowledge-values strong {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tl-navy);
}

/* -----------------------------------------------------------------------------
   7. DẢI CTA CUỐI (brief §23 → §25)
   [phục vụ]  phần tử: Row/Column | khối: .tl-band-cta
   [lý do vượt panel]  Brief xin 1.2fr/.8fr với cột icon riêng 54px. Bố cục là
              3 cột span 1/6/5 — không span nào ra được tỉ lệ đó.
   ⛔ MỌI luật ở đây bọc `.tl-kien-thuc`: `.tl-band-cta` còn dùng ở 2 trang khác.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-band-cta > .section-content > .row {
	display: grid;
	grid-template-columns: 54px minmax(0, 1.2fr) minmax(0, .8fr);
	gap: 0 14px;
	align-items: center;
	margin: 0;
}

.tl-kien-thuc .tl-band-cta > .section-content > .row > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

/* ⚠ 4T PHẢN HỒI 27/08 (vòng 2): mockup là MỘT THANH NÔNG (~68px thật đo được
   qua mẫu màu), không phải dải cao. Section padding đã hạ ở panel (§28.2
   below); ở đây hạ icon/nút/khoảng cách để nội dung không tự đẩy hàng cao ra. */
.tl-kien-thuc .tl-band-cta .icon-box { margin: 0; }
.tl-kien-thuc .tl-band-cta .icon-box-img { width: 34px; max-width: 34px; margin: 0; }

.tl-kien-thuc .tl-band-cta h2 {
	margin-bottom: 2px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--tl-navy);
}

.tl-kien-thuc .tl-band-cta .text:not(.tl-band-lienhe) p {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
}

.tl-kien-thuc .tl-band-cta .button {
	min-height: 36px;
	height: 36px;
	padding: 0 20px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	border-radius: var(--tl-r);
}

.tl-kien-thuc .tl-band-cta .tl-band-lienhe p {
	margin: 5px 0 0;
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
	color: var(--tl-navy);
}

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

/* =============================================================================
   ══════════════  PHẦN MOBILE (≤849px)  ══════════════
   Dựng 20/08/2026. Khối desktop ở trên KHÔNG bị đụng — hai khối media không
   giao nhau (min-850 ↔ max-849). Bảng màu ở đầu tệp áp mọi khổ, dùng lại.

   Đo trước khi sửa ở 375px: trang **8.602px** — dài nhất trong 6 trang.
   Ba khối chiếm 63%: bài mới nhất 2.634 · xem nhiều 1.654 · giá trị 1.112.
   ⛔ Mốc chỉ 549/849/850 (luật III.4.3-3).
============================================================================= */

@media (max-width: 849px) {

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Section | khối: lề ngang toàn trang
   [trang]    kien-thuc
   [lý do vượt panel]  Panel Section chỉ đặt được padding DỌC; 30px lề NGANG là
              mặc định của `.section` trong Flatsome, không có ô nào.
              Cùng cách đã dùng cho trang Liên hệ (gọn thêm 60px vùng nội dung).
   -------------------------------------------------------------------------- */
.tl-kien-thuc .page-wrapper .section { padding-left: 0; padding-right: 0; }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Text/Heading | khối: thang chữ mobile
   [trang]    kien-thuc
   [lý do vượt panel]  ⛔ H1 phải đặt TƯỜNG MINH bằng `clamp`. Panel
              `font_size__sm="1.16"` KHÔNG bó trong media query nào (M10 của
              spec/quyet-dinh-mobile.md) ⇒ wrapper cố định ở mọi khổ rồi h1 nhân
              theo thang em Flatsome, ra **32px ở dải 550–849**. Đo được ở 768.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .page-wrapper { font-size: 14px; line-height: 1.6; }

.tl-kien-thuc .tl-hero-h1 h1 {
	font-size: clamp(27px, 7.4vw, 31px);
	line-height: 1.14;
	margin-bottom: 12px;
}

.tl-kien-thuc .page-wrapper h2 { font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
.tl-kien-thuc .tl-phu-de p { margin: -4px 0 12px; font-size: 12px; color: var(--tl-muted); }
.tl-kien-thuc .tl-breadcrumb { font-size: 11.5px; line-height: 1.4; }

.tl-kien-thuc .page-wrapper .button {
	min-height: 44px;
	height: auto;
	padding: 0 18px;
	font-size: 13.5px;
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Column/Image/Text | khối: HERO
   [trang]    kien-thuc
   [lý do vượt panel]  Panel không nối được hai phần tử anh em thành một khối
              (ảnh bo góc trên, trích dẫn bo góc dưới, không khe hở), cũng không
              đặt được chiều cao khung ảnh.
   ⛔ KHÔNG giữ quote đè lên ảnh như desktop: ở 375px thẻ 230px sẽ phủ gần hết
      bề ngang ảnh và che mặt người. Xếp dọc, nối liền thành một khối.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-knowledge-hero-content .text:not(.tl-hero-h1) p {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 8px;
	max-width: none;
}

.tl-kien-thuc .tl-knowledge-hero-media img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	/* ⚠ Khung dẹt 190px: `center` cắt mất bàn làm việc. 38% giữ cả người lẫn bàn.
	   → CẦN NGƯỜI NHÌN LẠI khi thay ảnh thật. */
	object-position: 38% center;
	border-radius: var(--tl-r) var(--tl-r) 0 0;
	margin-bottom: 0;
}

.tl-kien-thuc .tl-knowledge-hero-media .img,
.tl-kien-thuc .tl-knowledge-hero-media .img-inner { margin-bottom: 0; }

.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy {
	position: static;
	width: auto;
	transform: none;
	margin: 0 0 14px;
	padding: 14px 16px;
	border-radius: 0 0 var(--tl-r) var(--tl-r);
}

.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy p { font-size: 13px; line-height: 1.6; }
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-ten { font-size: 13px; }

.tl-kien-thuc .tl-khung-muc-tieu {
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 10px;
	/* `center` đẩy icon xuống ngang thân chữ, tách rời khỏi nhãn "MỤC TIÊU…"
	   phía trên — nhìn như hai khối rời. `start` cho icon thẳng hàng với nhãn. */
	align-items: start;
	margin: 12px 0 0;
	padding: 12px 14px;
	background: var(--tl-orange-soft);
	border: 1px solid #f3e7df;
	border-radius: 6px;
}

.tl-kien-thuc .tl-khung-muc-tieu .icon-box-img { width: 32px; max-width: 32px; margin: 0; }
.tl-kien-thuc .tl-khung-muc-tieu .icon-box-text { padding: 0; }
.tl-kien-thuc .tl-khung-muc-tieu p { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 600; }

.tl-kien-thuc .tl-khung-muc-tieu strong {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tl-orange-chu);
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Featured Box | khối: 6 thẻ chủ đề
   [trang]    kien-thuc
   [lý do vượt panel]  Panel không đặt được viền, chiều cao tối thiểu hay gạch
              cam dưới nhãn.
   Đo trước khi sửa: khối cao 649px cho 3 hàng — 216px mỗi hàng, quá cao cho
   một icon và hai dòng chữ.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-chu-de .icon-box {
	height: 100%;
	margin: 0;
	padding: 12px 8px 11px;
	background: var(--tl-white);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	text-align: center;
}

.tl-kien-thuc .tl-chu-de .icon-box-img { width: 34px; max-width: 34px; margin: 0 auto 8px; }
.tl-kien-thuc .tl-chu-de .icon-box-text { padding: 0; }
.tl-kien-thuc .tl-chu-de p { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 800; }

.tl-kien-thuc .tl-chu-de .icon-box-text::after {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	margin: 7px auto 0;
	background: var(--tl-orange);
	opacity: .55;
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Blog Posts | khối: thẻ bài — dùng chung cho hai lưới
   [trang]    kien-thuc
   [lý do vượt panel]  Trích dẫn mang `show-on-hover` ⇒ **ẩn tới khi rê chuột**,
              mà trên điện thoại KHÔNG CÓ rê chuột — người dùng không bao giờ
              thấy nó. Panel Blog Posts không có ô tắt hành vi đó.
   ⛔ Bọc `.tl-kien-thuc`: `.tl-card-baiviet` CÒN DÙNG Ở TRANG CHỦ.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-card-baiviet .box,
.tl-kien-thuc .tl-card-rank .box {
	position: relative;
	background: var(--tl-white);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	overflow: hidden;
}

.tl-kien-thuc .tl-card-baiviet .box-text,
.tl-kien-thuc .tl-card-rank .box-text { position: static; text-align: left; }

.tl-kien-thuc .tl-card-baiviet .post-title a,
.tl-kien-thuc .tl-card-rank .post-title a { color: var(--tl-navy); }

/* vùng bấm trải cả thẻ, neo vào liên kết TIÊU ĐỀ (gốc định vị gần nhất là .box) */
.tl-kien-thuc .tl-card-baiviet .post-title a::after,
.tl-kien-thuc .tl-card-rank .post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tl-kien-thuc .tl-card-baiviet .cat-label {
	position: absolute;
	left: 6px;
	top: 6px;
	z-index: 2;
	margin: 0;
	padding: 3px 5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .96);
	color: var(--tl-orange-chu);
	font-size: 8px;
	font-weight: 700;
	opacity: 1;
}


/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Blog Posts | khối: BÀI VIẾT MỚI NHẤT — 2 cột
   [trang]    kien-thuc
   [lý do vượt panel]  `columns__sm="2"` (panel, vừa đổi từ 1) cho 2 cột nhưng
              KHÔNG cho cao bằng nhau.
   🔑 Chọn 2 cột chứ không 1: 6 bài chia hết cho 2 ⇒ 3 hàng đầy, không mồ côi.
      Đo trước khi sửa: 1 cột ⇒ khối cao 2.634px, gần 1/3 cả trang.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-card-baiviet > .col > .col-inner,
.tl-kien-thuc .tl-card-baiviet .box { height: 100%; }

.tl-kien-thuc .tl-card-baiviet .box { display: flex; flex-direction: column; }
.tl-kien-thuc .tl-card-baiviet .box-image { width: 100%; }
.tl-kien-thuc .tl-card-baiviet .box-image img { object-fit: cover; }

.tl-kien-thuc .tl-card-baiviet .box-text { display: flex; flex: 1; padding: 9px 9px 10px; }

.tl-kien-thuc .tl-card-baiviet .box-text-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
}

.tl-kien-thuc .tl-card-baiviet .post-title {
	order: 1;
	margin-bottom: 4px;
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 800;
}

/* ⛔ `visibility` phải bó trong khối đang hiện — thuộc tính này DI TRUYỀN. */
.tl-kien-thuc .tl-card-baiviet .from_the_blog_excerpt {
	order: 2;
	opacity: 1;
	visibility: visible;
	max-height: none;
	margin-bottom: 0;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--tl-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ⚠ 4T PHẢN HỒI 27/08 (vòng 2, khổ mobile): khối mobile này là bản SAO độc lập
   của khối desktop (viết trước khi có hàng phút-đọc/ngày), không tự thừa kế
   sửa đổi. Hàng `.tl-meta-hang` chèn qua PHP không có `order` ở đây ⇒ mặc định
   `order:0`, XẾP TRƯỚC tiêu đề (`order:1`) trong flex — đúng lỗi 4T thấy trên
   điện thoại. Ẩn `.is-divider` (đã thay bằng meta-hang) và gán order cuối. */
.tl-kien-thuc .tl-card-baiviet .is-divider,
.tl-kien-thuc .tl-card-rank .is-divider { display: none; }

.tl-kien-thuc .tl-card-baiviet .tl-meta-hang {
	order: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0;
	padding-top: 6px;
	font-size: 9px;
	color: var(--tl-muted);
}

/* Icon đồng hồ/lịch + ẩn ngày ở lưới "mới biên" — bản gốc của hai luật này chỉ
   nằm trong khối desktop (mục "0. GỠ CLEARFIX"), không tự áp lại ở đây. */
.tl-kien-thuc .tl-card-rank .tl-meta-ngay { display: none; }

.tl-kien-thuc .tl-meta-phut::before,
.tl-kien-thuc .tl-meta-ngay::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 3px;
	vertical-align: -1px;
	background: no-repeat center / contain;
}

.tl-kien-thuc .tl-meta-phut,
.tl-kien-thuc .tl-meta-ngay { display: inline-flex; align-items: center; white-space: nowrap; }

.tl-kien-thuc .tl-meta-phut::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687083' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

.tl-kien-thuc .tl-meta-ngay::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687083' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Blog Posts | khối: XEM NHIỀU — hàng ngang, ảnh trái
   [trang]    kien-thuc
   [lý do vượt panel]  Panel Blog Posts chỉ có kiểu ảnh-TRÊN-chữ; không có kiểu
              ảnh bên trái. Ở đây bắt buộc: 5 bài KHÔNG chia hết cho 2 cột (mồ
              côi 1 thẻ), mà để 1 cột kiểu thẻ dọc thì khối cao 1.654px.
   🔑 Hàng ngang vừa gọn hơn hẳn, vừa ĐÚNG bản chất "bảng xếp hạng 01–05" —
      mắt đọc từ trên xuống theo thứ tự, không nhảy ngang.
   -------------------------------------------------------------------------- */
/* số 01–05 do CSS counter ở 30-components sinh — ở đây chỉ đổi hình dạng */
.tl-kien-thuc .tl-card-rank .box-image::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 0;
	background: var(--tl-orange);
	color: var(--tl-white);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.tl-kien-thuc .tl-card-rank .post-title {
	margin-bottom: 0;
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 800;
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Featured Box | khối: 4 giá trị — MỘT cột, icon trái
   [trang]    kien-thuc
   [lý do vượt panel]  `span__sm="12"` (panel, vừa đổi từ 6) cho một cột, nhưng
              bề rộng cột icon và lề trong thì panel không có ô.
   Đo trước khi sửa: 2 cột ⇒ mỗi ô chỉ ~170px, chữ vỡ nhiều dòng, khối cao
   926–1.266px. Một cột icon-trái cho chữ đủ rộng và thấp hơn hẳn.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col { padding-bottom: 12px; }

.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner {
	padding: 12px 14px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
}

.tl-kien-thuc .tl-knowledge-values .icon-box {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 10px;
	align-items: start;
	margin: 0;
}

.tl-kien-thuc .tl-knowledge-values .icon-box-img { width: 32px; max-width: 32px; margin: 0; }
.tl-kien-thuc .tl-knowledge-values .icon-box-text { padding: 0; }
.tl-kien-thuc .tl-knowledge-values p { margin: 0; font-size: 12px; line-height: 1.5; }

.tl-kien-thuc .tl-knowledge-values strong {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	font-weight: 800;
	color: var(--tl-navy);
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Column/Button | khối: dải CTA cuối
   [trang]    kien-thuc
   [lý do vượt panel]  Ba cột `span 1/6/5` dồn dọc thì icon 56px đứng một mình
              chiếm cả một hàng. Gom icon và chữ thành một hàng ngang.
   ⛔ Bọc `.tl-kien-thuc`: `.tl-band-cta` còn dùng ở 2 trang khác.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-band-cta .icon-box { margin: 0; }
.tl-kien-thuc .tl-band-cta .icon-box-img { width: 40px; max-width: 40px; margin: 0 auto; }
.tl-kien-thuc .tl-band-cta h2 { font-size: 16px; line-height: 1.35; margin-bottom: 4px; text-align: center; }
.tl-kien-thuc .tl-band-cta .text:not(.tl-band-lienhe) p { margin: 0; font-size: 12.5px; line-height: 1.5; text-align: center; }
.tl-kien-thuc .tl-band-cta .tl-band-lienhe p { margin: 8px 0 0; font-size: 11px; line-height: 1.4; }

/* Footer nối sát dải CTA — khe hở đến từ `padding-bottom:30px` mặc định của
   `.col` cộng padding đáy `#content`, không phải margin của section. */
.tl-kien-thuc #content.page-wrapper { padding-bottom: 0; }
.tl-kien-thuc .page-wrapper > .row-main > .col { padding-bottom: 0; }
.tl-kien-thuc .page-wrapper .section:last-child .col { padding-bottom: 0; }

/* -----------------------------------------------------------------------------
   NHIỆM VỤ MOBILE 27/08 (vòng riêng cho kien-thuc + toi-co-the-giup-gi)
   [phục vụ]  section: .tl-featured-posts · .tl-knowledge-values | khối: nhịp dọc
   [lý do vượt panel]  panel `padding__sm` chỉ in một số cố định (20/18px); yêu
              cầu 32px đồng nhất cho hai section này không có ô riêng theo trang.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-featured-posts,
.tl-kien-thuc .tl-knowledge-values { padding-top: 32px !important; padding-bottom: 32px !important; }

/* -----------------------------------------------------------------------------
   [phục vụ]  khối: .tl-band-cta .button | CTA liên hệ full-width trong gutter
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-band-cta .button {
	display: flex;
	width: 100%;
}

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

/* =============================================================================
   ĐIỆN THOẠI — ≤549px: SỐ CỘT CỦA HAI LƯỚI BÀI
   ⛔ Ba luật lưới dưới đây PHẢI ở ≤549, không được để ở ≤849. Panel đã có
      `columns__md="3"` cho dải 550–849; ép 2 cột ở cả dải đó thì ở 768 thẻ rộng
      379px và khối bài mới cao **1.895px — dài hơn cả ở 375px**. Đã đo và dính.
   ⚠ Không dùng được `@media (min-width: 550px)` để tách: luật III.4.3-3 chỉ cho
      549/849/850. Đặt ở ≤549 là cách duy nhất mà vẫn đúng hệ mốc.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Row/Column | khối: 6 thẻ chủ đề — 2 cột
   [trang]    kien-thuc
   [lý do vượt panel]  `span__sm="6"` (panel) cho 2 cột, nhưng `.col` mang sẵn
              `padding-bottom: 30px` và `.col-inner` còn lề riêng — cộng lại
              **68px trống mỗi hàng** (ô cao 184px trong khi thẻ chỉ 116px).
              Panel không có ô gỡ hai lớp đó; chuyển hàng sang lưới thì tự quản.
   ⛔ Đặt ở ≤549, KHÔNG ở ≤849: dải 550–849 đã có `span__md="4"` cho 3 cột,
      ép 2 cột ở cả dải đó là phí một nửa bề ngang tablet.
   ⚠ NHIỆM VỤ MOBILE 27/08: đo được `.tl-chu-de` NẰM SÁT MÉP MÀN HÌNH (x=0/1px
      — viền thẻ chạm thẳng cạnh viewport, không phải ảo giác nhìn ảnh chụp
      thu nhỏ). `margin:0` ở đây bỏ trống, mà `.row` gốc Flatsome có sẵn
      `margin:0 -15px` bù cho `.col{padding:15px}` — hàng này KHÔNG có `.col`
      bọc ngoài (section-content > row trực tiếp) nên không có padding nào bù
      lại, và section đã bị `.page-wrapper .section{padding-left/right:0}` ở
      đầu tệp zero hết. ⇒ thêm gutter TRỰC TIẾP vào chính lưới, cùng công thức
      `clamp` đã dùng ở các trang khác cho ngưỡng 16px (<356px) → 20px (≥444px). */
.tl-kien-thuc .tl-chu-de,
.tl-kien-thuc .tl-card-baiviet,
.tl-kien-thuc .tl-card-rank {
	padding-left: clamp(16px, 4.5vw, 20px);
	padding-right: clamp(16px, 4.5vw, 20px);
}

.tl-kien-thuc .tl-chu-de {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.tl-kien-thuc .tl-chu-de > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

/* ⚠ `.col-inner` còn giữ lề trong riêng: gỡ `.col` xong ô vẫn cao 154px trong
   khi thẻ chỉ 116px — 38px nữa nằm ở đây. Phải gỡ CẢ HAI lớp mới hết trống. */
.tl-kien-thuc .tl-chu-de > .col > .col-inner { padding: 0; height: 100%; }


/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Blog Posts | khối: BÀI VIẾT MỚI NHẤT — 2 cột
   [trang]    kien-thuc
   [lý do vượt panel]  `columns__sm="2"` (panel) cho 2 cột nhưng KHÔNG cho cao
              bằng nhau, và không gỡ được `padding-bottom:30px` của `.col`.
   🔑 Chọn 2 cột chứ không 1: 6 bài chia hết cho 2 ⇒ 3 hàng đầy, không mồ côi.
      Đo trước khi sửa: 1 cột ⇒ khối cao 2.634px, gần 1/3 cả trang.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-card-baiviet {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 10px;
	margin: 0;
}

.tl-kien-thuc .tl-card-baiviet > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

/* Tỉ lệ ảnh 4:3 CHẮC CHẮN (thay vì trông cậy `image_height="80%"` của panel,
   chỉ cho ~5:4). Ép aspect-ratio trực tiếp lên khung để LUÔN đúng tỉ lệ dù có
   ảnh hay không.
   ⛔ SỬA 27/08 (4T báo "thumbnail xám trống"): nền gradient đặt CỐ ĐỊNH ở vòng
   trước hoá ra chính là thứ bị đọc nhầm — `img` có `loading="lazy"`, nên khi
   cuộn tới nhanh trên máy thật, nền "trung tính" hiện ra TRƯỚC khi ảnh tải
   xong và trông y hệt một khối màu rỗng. Bỏ hẳn nền cố định; chỉ tô nền khi
   THẬT SỰ không có ảnh (`:not(:has(img))`, bài không gán thumbnail) — lúc đó
   không có `<img>` để lazy-load nên không còn tình trạng "chớp nền rồi ảnh". */
.tl-kien-thuc .tl-card-baiviet .box-image,
.tl-kien-thuc .tl-card-baiviet .image-cover {
	aspect-ratio: 4 / 3 !important;
	height: auto !important;
	padding-top: 0 !important;
}
.tl-kien-thuc .tl-card-baiviet .box-image img {
	position: static !important;
	width: 100%;
	height: 100%;
}
.tl-kien-thuc .tl-card-baiviet .box-image:not(:has(img)) {
	background: linear-gradient(135deg, var(--tl-bg-soft), var(--tl-border));
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Blog Posts | khối: XEM NHIỀU — hàng ngang, ảnh trái
   [trang]    kien-thuc
   [lý do vượt panel]  Panel Blog Posts chỉ có kiểu ảnh-TRÊN-chữ, không có kiểu
              ảnh bên trái. Ở đây bắt buộc: 5 bài KHÔNG chia hết cho 2 cột (mồ
              côi 1 thẻ), mà 1 cột kiểu thẻ dọc thì khối cao 1.654px.
   🔑 Hàng ngang vừa gọn hơn hẳn vừa ĐÚNG bản chất bảng xếp hạng 01–05 — mắt
      đọc dọc theo thứ tự, không nhảy ngang.
   -------------------------------------------------------------------------- */
.tl-kien-thuc .tl-card-rank {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
}

.tl-kien-thuc .tl-card-rank > .col {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

/* ⛔ SỬA 27/08 (4T báo "thumbnail xám trống" ở BÀI VIẾT MỚI BIÊN): năm bài
   hiện đều CÓ ảnh thật (đã soát HTML sống — không bài nào thiếu media), nên
   khối xám không phải "thiếu ảnh" mà là nền gradient trước đây bị GẮN CỐ ĐỊNH
   lên `.box-image`, lộ ra trong khoảnh khắc `<img loading="lazy">` chưa kịp
   tải khi cuộn nhanh trên máy thật — cùng nguyên nhân đã sửa ở lưới "mới
   nhất" bên trên. Bỏ nền cố định. Đồng thời dựng đúng yêu cầu "text-only khi
   không có ảnh": `:not(:has(img))` co cột ảnh về 0 và cho chữ chiếm TRỌN bề
   ngang — không còn khối màu rỗng chờ sẵn cho trường hợp thật sự thiếu ảnh. */
.tl-kien-thuc .tl-card-rank .box {
	display: grid;
	grid-template-columns: clamp(96px, 30vw, 124px) 1fr;
	align-items: stretch;
	min-height: 72px;
}

.tl-kien-thuc .tl-card-rank .box:not(:has(.box-image img)) {
	grid-template-columns: 1fr;
}

.tl-kien-thuc .tl-card-rank .box-image {
	width: 100%;
	height: 100%;
}

.tl-kien-thuc .tl-card-rank .box-image:not(:has(img)) { display: none; }

.tl-kien-thuc .tl-card-rank .box-image .image-cover { height: 100%; }

.tl-kien-thuc .tl-card-rank .box-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tl-kien-thuc .tl-card-rank .box-text {
	display: flex;
	align-items: center;
	padding: 10px 12px;
}

.tl-kien-thuc .tl-card-rank .box-text-inner { width: 100%; }

/* Ở hàng ngang thì dòng "Đọc bài" là thừa — hàng nào cũng bấm được cả thẻ */
.tl-kien-thuc .tl-card-rank .is-divider { display: none; }

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

/* =============================================================================
   NHIỆM VỤ MOBILE V2 (27/08) — DỰNG LẠI THEO ẢNH MINH HOẠ
   `mobile-mockup-kien-thuc-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, chủ đề 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.

   ⛔ LỆCH MOCKUP CÓ CHỦ Ý — hero KHÔNG dựng ảnh+trích dẫn NẰM NGANG bên phải
   như ảnh mẫu. Đo trên mẫu: cột chữ ~40%, ảnh ~35%, thẻ trích dẫn ~25% CÙNG
   một hàng — ở khổ thật 390–430px quy ra ảnh chỉ còn ~110px và thẻ trích dẫn
   ~125px, ngược hẳn yêu cầu "ảnh lớn, rõ, ưu tiên 1 cột". Giữ bố cục XẾP DỌC
   đã có (chữ trên, ảnh lớn dưới, trích dẫn thành thẻ riêng nối liền ảnh) —
   đúng tinh thần cỡ ảnh hơn bám khung 3-cột của ảnh mẫu (vốn vẽ cho H1 rút
   gọn). Ẩn khối "MỤC TIÊU CỦA CHÚNG TÔI" theo đúng ảnh mẫu (không xuất hiện).
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- 0. Gutter chuẩn + thang chữ ----------------------------------------- */
.tl-kien-thuc { --tl-gutter: clamp(16px, 4.5vw, 20px); }

.tl-kien-thuc .tl-hero-h1 h1 { font-size: clamp(28px, 7.8vw, 32px); line-height: 1.15; }
.tl-kien-thuc .page-wrapper h2 { font-size: clamp(22px, 6vw, 24px); line-height: 1.25; }
.tl-kien-thuc .tl-knowledge-hero-content .text:not(.tl-hero-h1) p { font-size: 15px; line-height: 1.6; }

/* --- 1. HERO — ẩn khối mục tiêu, ảnh lớn, trích dẫn thành thẻ riêng ----- */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col { padding: 0 var(--tl-gutter) !important; }
.tl-kien-thuc .tl-khung-muc-tieu { display: none !important; }
.tl-kien-thuc .tl-knowledge-hero-media { margin-top: 18px; }
.tl-kien-thuc .tl-knowledge-hero-media img { height: 220px; border-radius: var(--tl-r); }
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy {
	border-radius: var(--tl-r);
	margin-top: 10px;
	padding: 16px 18px;
}
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy p { font-size: 14.5px; }

/* --- 2. CHỦ ĐỀ KIẾN THỨC — cuộn ngang thay vì lưới 2 cột ---------------- */
.tl-kien-thuc .tl-topic-section > .section-content > .row:first-child { padding: 0 var(--tl-gutter); }
/* ⚠ `overflow:hidden` từng đặt ở đây (bản V2) để giấu tràn của hàng cuộn
   ngang — nhưng nó CŨNG cắt mất mũi tên tròn `::after` thêm ở V3 (dòng ~1707)
   vì pseudo-element bị cắt theo padding-box của CHÍNH section chứa nó. Gỡ hẳn:
   `.tl-chu-de` tự lo overflow-x riêng, section không cần clip nữa. */
.tl-kien-thuc .tl-topic-section { position: relative; }
.tl-kien-thuc .tl-chu-de {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	gap: 12px;
	padding: 4px var(--tl-gutter) 6px !important;
}
.tl-kien-thuc .tl-chu-de::-webkit-scrollbar { display: none; }
.tl-kien-thuc .tl-chu-de > .col {
	flex: 0 0 auto !important;
	width: 108px !important;
	max-width: none !important;
	padding: 0 !important;
	scroll-snap-align: start;
}
.tl-kien-thuc .tl-chu-de > .col > .col-inner { height: auto; }
.tl-kien-thuc .tl-chu-de .icon-box { min-height: 118px; padding: 16px 10px 14px; }
.tl-kien-thuc .tl-chu-de .icon-box-img { width: 38px; max-width: 38px; margin: 0 auto 10px; }
.tl-kien-thuc .tl-chu-de p { font-size: 12.5px; }
/* ⚠ Dải mờ gradient cũ (V2) đã THAY hẳn bằng vòng tròn mũi tên thật ở khối
   V3 phía dưới (mục V3.2) — xoá để khỏi hai `::after` cùng chọn tranh nhau. */

/* --- 3. BÀI VIẾT MỚI NHẤT — 1 cột, ảnh lớn, đủ mô tả -------------------- */
.tl-kien-thuc .tl-latest-posts > .section-content > .row:first-child > .col { padding: 0 var(--tl-gutter) !important; }
.tl-kien-thuc .tl-latest-posts > .section-content > .row:first-child > .col > .col-inner {
	display: block;
}
.tl-kien-thuc .tl-latest-posts .tl-section-more { margin-top: 4px; }
.tl-kien-thuc .tl-card-baiviet {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-auto-rows: auto !important;
	gap: 16px !important;
	padding: 0 var(--tl-gutter) !important;
}
.tl-kien-thuc .tl-card-baiviet > .col > .col-inner,
.tl-kien-thuc .tl-card-baiviet .box { height: auto; }
.tl-kien-thuc .tl-card-baiviet .box-image,
.tl-kien-thuc .tl-card-baiviet .image-cover {
	aspect-ratio: 16 / 10 !important;
}
.tl-kien-thuc .tl-card-baiviet .cat-label { font-size: 10px; padding: 4px 8px; left: 10px; top: 10px; }
.tl-kien-thuc .tl-card-baiviet .box-text { padding: 14px 16px 16px !important; }
.tl-kien-thuc .tl-card-baiviet .post-title {
	font-size: 18px !important;
	line-height: 1.32 !important;
	margin-bottom: 6px !important;
}
.tl-kien-thuc .tl-card-baiviet .from_the_blog_excerpt {
	font-size: 14px !important;
	line-height: 1.5 !important;
	-webkit-line-clamp: 2 !important;
	color: var(--tl-muted);
}
.tl-kien-thuc .tl-card-baiviet .tl-meta-hang { padding-top: 10px !important; font-size: 12px !important; gap: 12px !important; }
.tl-kien-thuc .tl-meta-phut::before,
.tl-kien-thuc .tl-meta-ngay::before { width: 12px; height: 12px; }

/* --- 4. BÀI VIẾT MỚI BIÊN — lưới 2 cột ảnh-trên (đúng ảnh mẫu) ---------- */
.tl-kien-thuc .tl-featured-posts > .section-content > .row:first-child > .col { padding: 0 var(--tl-gutter) !important; }
.tl-kien-thuc .tl-card-rank {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	grid-auto-rows: 1fr !important;
	gap: 12px !important;
	padding: 0 var(--tl-gutter) !important;
}
.tl-kien-thuc .tl-card-rank .box {
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
}
.tl-kien-thuc .tl-card-rank .box:not(:has(.box-image img)) { grid-template-columns: unset; }
.tl-kien-thuc .tl-card-rank .box-image {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
}
.tl-kien-thuc .tl-card-rank .box-image .image-cover { height: 100%; }
/* Số thứ tự 01–05 (`::before`) hợp lý ở dải ngang desktop, chật ở thẻ vuông
   nhỏ mobile — ẩn để nhường chỗ cho ảnh, giữ nguyên ở desktop. */
.tl-kien-thuc .tl-card-rank .box-image::before { display: none; }
.tl-kien-thuc .tl-card-rank .box-text { flex: 1; padding: 10px 12px 12px; align-items: flex-start; }
.tl-kien-thuc .tl-card-rank .post-title { font-size: 13.5px !important; line-height: 1.35 !important; }
.tl-kien-thuc .tl-card-rank .tl-meta-hang { font-size: 10.5px !important; }

/* --- 5. KIẾN THỨC NỔI BẬT — lưới 2×2, icon trên, thẻ màu ---------------- */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:first-child > .col { padding: 0 var(--tl-gutter) !important; }
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
	padding: 0 var(--tl-gutter) !important;
}
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col { padding-bottom: 0 !important; }
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner {
	height: 100%;
	padding: 16px 14px;
}
.tl-kien-thuc .tl-knowledge-values .icon-box {
	display: block !important;
	text-align: left;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-img { width: 34px; max-width: 34px; margin: 0 0 10px; }
.tl-kien-thuc .tl-knowledge-values strong { font-size: 14px; }
.tl-kien-thuc .tl-knowledge-values p { font-size: 12.5px; line-height: 1.45; }

/* Bốn màu nền/tiêu đề đã có sẵn ở `30-components.css` cho `.tl-o-*` — dùng
   lại nguyên, không viết thêm màu ở đây. */

/* --- 6. CTA CUỐI — thanh rộng dễ bấm ------------------------------------- */
.tl-kien-thuc .tl-band-cta > .section-content > .row > .col { padding: 0 var(--tl-gutter) !important; }
.tl-kien-thuc .tl-band-cta .button {
	min-height: 52px !important;
	font-size: 15px !important;
	border-radius: 10px;
}
.tl-kien-thuc .tl-band-cta .tl-band-lienhe p { font-size: 12.5px !important; margin-top: 10px !important; }

}   /* ==== HẾT NHIỆM VỤ MOBILE V2 ==== */

/* =============================================================================
   NHIỆM VỤ MOBILE V3 (28/08) — 4T BÁC BỎ V2, BÁM SÁT MOCKUP HƠN
   4T chỉ rõ 6 điểm lệch. Đã đo lại `mobile-mockup-kien-thuc-v2.png` kỹ hơn:
   hero KHÔNG phải 3 khối tách rời — quote navy NỔI ĐÈ lên mép phải ảnh (không
   xếp dưới ảnh như V2 đã làm), chữ trái nằm trên NỀN TRẮNG (không đè lên ảnh
   như trang "Giúp gì"), ảnh bám mép phải màn hình (full-bleed bên phải, không
   gutter). Khác trang "Giúp gì": ở đây H1 THẬT ("KIẾN THỨC ĐÚNG / CHỌN LỌC –
   DỄ HIỂU – DỄ ÁP DỤNG") đã khớp đúng 2 dòng của mockup — không cần rút gọn
   giả bằng pseudo-element, dựng 2 cột thật vẫn vừa.
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- V3.1 HERO — 2 cột thật, ảnh full-bleed phải, quote NỔI trên ảnh --- */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row {
	display: flex !important;
	align-items: stretch;
	height: 390px;
	gap: 0;
}
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-content {
	flex: 0 0 42% !important;
	width: 42% !important;
	max-width: 42% !important;
	padding: 0 10px 0 var(--tl-gutter) !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-media {
	flex: 0 0 58% !important;
	width: 58% !important;
	max-width: 58% !important;
	padding: 0 !important;
	position: relative;
	height: 100%;
}
/* ⚠ Cột chữ chỉ 42% × 390px ≈ 164px, trừ padding còn ~144px. Font 22–25px
   khiến MỖI TỪ tự xuống dòng ("KIẾN" / "THỨC" / "ĐÚNG"...) — đo lại theo tỉ lệ
   chữ/cột của mockup, giảm hẳn xuống 16–18px để "KIẾN THỨC ĐÚNG" gọn 1 dòng. */
.tl-kien-thuc .tl-hero-h1 h1 { font-size: clamp(16px, 4.6vw, 18px); line-height: 1.22; margin-bottom: 8px; }
.tl-kien-thuc .tl-knowledge-hero-content .text:not(.tl-hero-h1) p { font-size: 12.5px !important; line-height: 1.45 !important; margin-bottom: 6px !important; }

.tl-kien-thuc .tl-knowledge-hero-media,
.tl-kien-thuc .tl-knowledge-hero-media .col-inner,
.tl-kien-thuc .tl-knowledge-hero-media .img,
.tl-kien-thuc .tl-knowledge-hero-media .img-inner { height: 100%; margin: 0; }
.tl-kien-thuc .tl-knowledge-hero-media img {
	height: 100% !important;
	width: 100% !important;
	border-radius: 0 !important;
	object-position: 38% center;
}
/* Quote NỔI đè lên mép phải ảnh — phục hồi kỹ thuật overlay của desktop (mục
   1), chỉ thu nhỏ số đo cho khổ hẹp thay vì đẩy xuống dưới ảnh như V2. */
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy {
	position: absolute !important;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 46%;
	margin: 0 !important;
	padding: 12px 12px !important;
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(6, 29, 76, .28);
}
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy p { font-size: 10.5px !important; line-height: 1.4 !important; }
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-ten { font-size: 10.5px !important; margin-top: 4px !important; }

/* --- V3.2 CHỦ ĐỀ KIẾN THỨC — thẻ 112×138, cuộn ngang + chevron cuối ----- */
.tl-kien-thuc .tl-topic-section { position: relative; }
.tl-kien-thuc .tl-chu-de {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	gap: 10px !important;
	padding: 4px calc(var(--tl-gutter) + 30px) 6px var(--tl-gutter) !important;
}
.tl-kien-thuc .tl-chu-de > .col {
	flex: 0 0 112px !important;
	width: 112px !important;
	max-width: 112px !important;
}
.tl-kien-thuc .tl-chu-de .icon-box { height: 138px !important; min-height: 138px !important; }
.tl-kien-thuc .tl-topic-section::after {
	content: "\203A";
	position: absolute;
	/* ⚠ `.tl-chu-de` là hàng CUỘN NGANG (`overflow-x:auto`) — theo đặc tả CSS,
	   overflow khác `visible` tự lập MỘT NGỮ CẢNH XẾP CHỒNG mới, nên dù đứng
	   sau trong DOM, `::after` (z-index mặc định `auto`) vẫn bị vẽ THẤP HƠN.
	   Phải khai `z-index` tường minh mới thắng. */
	z-index: 2;
	top: 96px;
	right: var(--tl-gutter);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f1f3f8;
	color: var(--tl-navy);
	font-size: 16px;
	font-weight: 700;
}

/* --- V3.3 BÀI VIẾT MỚI NHẤT — 3 thẻ NGANG, ảnh trái 46%, cao ~140px ----- */
.tl-kien-thuc .tl-card-baiviet {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-auto-rows: auto !important;
	gap: 12px !important;
}
/* Mockup mobile chỉ hiện 3 bài đầu màn đầu — phần còn lại mở ra bằng nút
   "Xem thêm bài viết" (không xoá dữ liệu, chỉ ẩn ở khổ hẹp).
   ⛔ SỬA 27/09 — 4T báo "bản mobi chưa tải được phần xem thêm". Đo trên live:
   AJAX CHẠY ĐÚNG (HTTP 200, success:true), thẻ bài tăng thật 6 → 12 — nhưng
   số thẻ NHÌN THẤY đứng nguyên 3, vì luật này trước đây ẩn VÔ ĐIỀU KIỆN mọi
   thẻ từ thứ 4 trở đi. Bài vừa tải về thành con thứ 7-12 của chính lưới đó
   (JS trộn thẳng các `.col` vào lưới, không bọc thêm lớp nào) nên bị ẩn ngay
   khi vừa chèn ⇒ bấm nút thấy "Đang tải…" rồi không có gì hiện ra.
   Cách chữa: chỉ ẩn KHI LƯỚI CÒN NGUYÊN LÔ ĐẦU (chưa có con thứ 7). Vừa tải
   thêm là điều kiện `:has()` sai đi, luật tự tắt, toàn bộ bài hiện ra. Thuần
   CSS — không phải sửa JS trong `functions.php` (phiên khác đang mở tệp đó). */
.tl-kien-thuc .tl-card-baiviet:not(:has(> .col:nth-child(7))) > .col:nth-child(n+4) {
	display: none !important;
}
.tl-kien-thuc .tl-card-baiviet .box {
	display: flex !important;
	flex-direction: row !important;
	height: 140px;
}
.tl-kien-thuc .tl-card-baiviet .box-image {
	flex: 0 0 46% !important;
	width: 46% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
}
.tl-kien-thuc .tl-card-baiviet .image-cover { height: 100% !important; padding-top: 0 !important; }
.tl-kien-thuc .tl-card-baiviet .box-image img {
	position: static !important;
	width: 100%;
	height: 100%;
}
.tl-kien-thuc .tl-card-baiviet .box-text {
	flex: 1 1 0;
	min-width: 0;
	padding: 10px 12px !important;
}
.tl-kien-thuc .tl-card-baiviet .post-title { font-size: 13.5px !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
.tl-kien-thuc .tl-card-baiviet .from_the_blog_excerpt {
	font-size: 11px !important;
	line-height: 1.35 !important;
	-webkit-line-clamp: 2 !important;
}
.tl-kien-thuc .tl-card-baiviet .cat-label { font-size: 8.5px; padding: 3px 6px; left: 6px; top: 6px; }
.tl-kien-thuc .tl-card-baiviet .tl-meta-hang { font-size: 9.5px !important; gap: 8px !important; padding-top: 5px !important; }

/* --- V3.4 BÀI VIẾT MỚI BIÊN — ĐÚNG 2 thẻ cạnh nhau ---------------------- */
.tl-kien-thuc .tl-card-rank > .col:nth-child(n+3) { display: none !important; }
/* ⚠ Đo được `.tl-card-rank` cao HẲN 392px dù 2 thẻ còn lại (đúng 1 hàng, đã
   xác nhận qua toạ độ x/y) chỉ cần ~190px — `grid-auto-rows:1fr` (V2, viết
   cho lưới 5 thẻ 3 hàng) khiến trình duyệt dựng 2 track hàng dù chỉ có nội
   dung cho 1 hàng, để lại khoảng trắng rỗng phía dưới. Ép `auto` để hàng co
   đúng theo nội dung thật (chỉ còn 2 thẻ). */
.tl-kien-thuc .tl-card-rank {
	height: auto !important;
	grid-auto-rows: auto !important;
	grid-template-rows: none !important;
}

/* --- V3.5 KIẾN THỨC NỔI BẬT — 2×2 THẤP, icon TRÁI/text PHẢI ------------- */
.tl-kien-thuc .tl-knowledge-values .icon-box {
	display: grid !important;
	grid-template-columns: 34px 1fr !important;
	gap: 10px !important;
	align-items: start !important;
	text-align: left !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-img { width: 30px !important; max-width: 30px !important; margin: 0 !important; }
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner { padding: 12px 12px; }
.tl-kien-thuc .tl-knowledge-values strong { font-size: 12.5px; margin-bottom: 2px; }
.tl-kien-thuc .tl-knowledge-values p { font-size: 11px; line-height: 1.35; }

/* --- V3.6 CTA CUỐI — gradient cam, ~58px, bỏ khối beige cao ------------- */
/* Panel đặt `bg_color="rgb(251,244,239)"` cho section — đúng cho bố cục
   desktop, nhưng ở khổ hẹp biến thành một "khối beige cao" bao quanh nút.
   Bỏ nền + giảm padding dọc, chỉ còn thanh gradient của nút nổi trên nền
   trắng trang. */
.tl-kien-thuc .tl-band-cta {
	background: none !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}
.tl-kien-thuc .tl-band-cta > .section-content > .row > .col { padding: 0 var(--tl-gutter) !important; }
.tl-kien-thuc .tl-band-cta .button {
	min-height: 58px !important;
	font-size: 15px !important;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--tl-orange) 0%, var(--tl-orange-hover) 100%) !important;
	box-shadow: 0 8px 20px rgba(241, 91, 42, .28);
}

}   /* ==== HẾT NHIỆM VỤ MOBILE V3 ==== */

/* =============================================================================
   NHIỆM VỤ MOBILE V4 (28/08) — 4T BÁC BỎ V3, SỬA 6 ĐIỂM CÒN LỆCH
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- V4.1 HERO — nới cột chữ 52%, ảnh+quote 48% (V3 chỉ 42%, ép 5 dòng) -- */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-content {
	flex: 0 0 52% !important;
	width: 52% !important;
	max-width: 52% !important;
}
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-media {
	flex: 0 0 48% !important;
	width: 48% !important;
	max-width: 48% !important;
}
/* ⚠ 52% × 390px ≈ 203px, trừ lề còn ~183px — đủ cho "KIẾN THỨC ĐÚNG" 1 dòng ở
   15–17px (V3 dùng cột 144px nên phải hạ xuống 16–18px vẫn vỡ 5 dòng vì quá
   hẹp; cột rộng hơn thì nâng NHẸ cỡ chữ vẫn gọn 3 dòng, không cần ép nhỏ). */
.tl-kien-thuc .tl-hero-h1 h1 { font-size: clamp(15px, 4.2vw, 17px) !important; line-height: 1.25 !important; }
.tl-kien-thuc .tl-knowledge-hero-content .text:not(.tl-hero-h1) p { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 5px !important; }
/* Ảnh: giữ tâm ảnh lệch phải hơn (46%) để vẫn thấy laptop, không chỉ mỗi mặt
   người — cột ảnh giờ hẹp hơn (48% thay vì 58%) nên object-position cần dịch
   lại so với V3 (38%) để không hụt mất laptop bên trái khung người. */
.tl-kien-thuc .tl-knowledge-hero-media img { object-position: 46% center !important; }
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy { width: 50%; right: 8px; padding: 10px 10px !important; }
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy p { font-size: 9.5px !important; line-height: 1.35 !important; }

/* --- V4.2 CHỦ ĐỀ KIẾN THỨC — icon 48px (V3 còn 38px, đúng ngưỡng dưới) -- */
.tl-kien-thuc .tl-chu-de .icon-box-img { width: 48px !important; max-width: 48px !important; margin: 0 auto 8px !important; }

/* --- V4.3 BÀI VIẾT MỚI NHẤT — cao 148px (giữa khoảng 145–150 yêu cầu) --- */
.tl-kien-thuc .tl-card-baiviet .box { height: 148px !important; }

/* --- V4.4 BÀI VIẾT MỚI BIÊN — ảnh cao ~130px rõ ràng -------------------- */
.tl-kien-thuc .tl-card-rank .box-image { aspect-ratio: auto !important; height: 130px !important; }
.tl-kien-thuc .tl-card-rank .box { height: auto !important; }

/* --- V4.5 KIẾN THỨC NỔI BẬT — nén thấp hơn: icon nhỏ lại, chữ khít hơn --- */
/* ⚠ Cột chữ V3 chỉ 71px (card 141px trừ icon 34+gap 10) — mô tả dài (~80 ký
   tự) vỡ ~10 dòng, thẻ cao tới 229px thay vì "thấp ~120". Không thể vừa giữ
   "icon lớn" vừa "thẻ 120px" với NGUYÊN VĂN mô tả dài — ưu tiên hạ thẻ thấp
   nhất có thể mà KHÔNG cắt chữ thật: icon 26px (vẫn rõ, không phải cỡ tí
   hon), giảm padding + cỡ chữ + line-height hết mức còn đọc được. */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner { padding: 10px 10px !important; }
.tl-kien-thuc .tl-knowledge-values .icon-box { grid-template-columns: 26px 1fr !important; gap: 8px !important; }
.tl-kien-thuc .tl-knowledge-values .icon-box-img { width: 26px !important; max-width: 26px !important; }
.tl-kien-thuc .tl-knowledge-values strong { font-size: 11.5px !important; line-height: 1.25 !important; }
.tl-kien-thuc .tl-knowledge-values p { font-size: 10px !important; line-height: 1.3 !important; }

/* --- V4.6 CTA — bỏ icon+tiêu đề phía trên, chỉ còn thanh + dòng hotline - */
/* Khe hở lớn trước CTA (đo được 166px) đến từ 2 cột đầu (icon + h2 + đoạn
   văn) đứng TRƯỚC cột nút trong cùng hàng `v_align="middle"` — ở mobile ba
   cột xếp dọc nên khối văn bản đó chiếm hẳn một khoảng trước khi tới nút.
   Ẩn hẳn 2 cột đó, giữ đúng cột nút — thanh gradient bám sát ngay sau khối
   "Kiến thức nổi bật" như 4T yêu cầu. */
.tl-kien-thuc .tl-band-cta > .section-content > .row > .col:nth-child(1),
.tl-kien-thuc .tl-band-cta > .section-content > .row > .col:nth-child(2) { display: none !important; }
.tl-kien-thuc .tl-band-cta .tl-band-lienhe p { margin-top: 8px !important; }

}   /* ==== HẾT NHIỆM VỤ MOBILE V4 ==== */

/* =============================================================================
   NHIỆM VỤ MOBILE V5 (28/08) — 4T BÁC BỎ V4 LẦN NỮA, 4 ĐIỂM CÒN LẠI
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- V5.1 HERO — BỎ HẲN 2 CỘT, ẢNH NỀN TRÀN NGANG + CHỮ NỔI ĐÈ LÊN -----
   4T: "Không được dùng 2-column crop đang có". Đổi hẳn sang kỹ thuật OVERLAY
   giống trang "Giúp gì" (mục 1 của `40-page-toi-co-the-giup-gi.css`) thay vì
   chia cột: ảnh trải TRÀN NGANG toàn banner (thấy trọn người+laptop, không bị
   cột 48% cắt bớt), chữ nổi đè lên bằng lớp gradient, quote nổi bên phải. */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row {
	display: block !important;
	position: relative;
	height: 390px;
	overflow: hidden;
	border-radius: var(--tl-r);
}
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-media {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	z-index: 1;
}
.tl-kien-thuc .tl-knowledge-hero-media img {
	width: 100% !important;
	height: 100% !important;
	/* Ảnh gốc người ngồi bàn làm việc — 50% giữa khung để thấy TRỌN người lẫn
	   laptop, không lệch hẳn về một phía như bản 2 cột trước (46%/38%). */
	object-position: 50% center !important;
}
/* Lớp phủ sáng bên trái để chữ đọc được trên ảnh — kỹ thuật y hệt trang
   "Giúp gì" mục 1 (`.banner-bg::after`), viết riêng cho khối này vì đây
   không phải [ux_banner] mà là [ux_image] thường trong [col]. */
.tl-kien-thuc .tl-knowledge-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.85) 38%, rgba(255,255,255,.35) 62%, rgba(255,255,255,0) 80%);
}
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-content {
	position: absolute !important;
	left: 0;
	top: 0;
	height: 100%;
	/* "H1 rộng tối thiểu 300px" — đặt SÀN cứng 300px bằng clamp, không phụ
	   thuộc % nữa (không còn tranh chỗ với ảnh vì giờ là LỚP ĐÈ, không phải
	   cột riêng — ảnh vẫn tràn trọn 100% phía sau bất kể chữ rộng bao nhiêu). */
	width: clamp(300px, 78vw, 330px) !important;
	max-width: 82vw !important;
	padding: 0 14px 0 var(--tl-gutter) !important;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tl-kien-thuc .tl-hero-h1 h1 { font-size: clamp(20px, 5.6vw, 24px) !important; line-height: 1.22 !important; }
.tl-kien-thuc .tl-knowledge-hero-content .text:not(.tl-hero-h1) p { font-size: 13px !important; line-height: 1.48 !important; margin-bottom: 6px !important; }

/* Quote: nổi bên PHẢI ảnh, tránh vùng chủ thể (ảnh gốc người ngồi LỆCH TRÁI
   khung hình theo tỉ lệ gốc — góc phải thường là khoảng trống bàn/kệ sách),
   neo theo GÓC DƯỚI-PHẢI thay vì giữa dọc để không cắt ngang mặt người. */
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy {
	position: absolute !important;
	z-index: 2;
	right: 12px;
	bottom: 14px;
	top: auto;
	transform: none;
	width: 40%;
	max-width: 150px;
	margin: 0 !important;
	padding: 10px 10px !important;
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(6, 29, 76, .3);
}
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy p { font-size: 9.5px !important; line-height: 1.35 !important; }
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-ten { font-size: 9.5px !important; margin-top: 3px !important; }

/* --- V5.2 BÀI VIẾT MỚI NHẤT — SỬA GỐC: .col rộng 404px (tràn viewport 390),
   text bị viewport/body cắt mất đuôi. Ép width:100% CẢ CHUỖI cha con (không
   chỉ .box) — panel/Flatsome còn để lại quy tắc rộng lệch ở tầng .col/.col-
   inner từ bản dựng lưới 2 cột cũ (dòng ~1353), không tự khớp lại khi đổi
   sang lưới 1 cột ngang. Đúng theo yêu cầu 4T: width:100%, min-width:0,
   flex:0 0 44%/flex:1, padding 14px, bỏ overflow:hidden gây cắt chữ. -------- */
.tl-kien-thuc .tl-card-baiviet,
.tl-kien-thuc .tl-card-baiviet > .col,
.tl-kien-thuc .tl-card-baiviet > .col > .col-inner {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}
.tl-kien-thuc .tl-card-baiviet .box {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 148px;
	overflow: visible !important;
}
.tl-kien-thuc .tl-card-baiviet .box-image {
	flex: 0 0 44% !important;
	width: 44% !important;
	max-width: 44% !important;
	overflow: hidden;
	border-radius: var(--tl-r) 0 0 var(--tl-r);
}
.tl-kien-thuc .tl-card-baiviet .box-text {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	padding: 14px !important;
	overflow: visible !important;
}
.tl-kien-thuc .tl-card-baiviet .post-title,
.tl-kien-thuc .tl-card-baiviet .from_the_blog_excerpt,
.tl-kien-thuc .tl-card-baiviet .tl-meta-hang { overflow: visible !important; white-space: normal !important; }

/* --- V5.3 KIẾN THỨC NỔI BẬT — ép FLEX (không grid) theo đúng số 4T ------ */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner {
	min-height: 116px;
	display: flex;
	align-items: center;
	padding: 10px !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box {
	display: flex !important;
	/* Flatsome đặt sẵn `flex-wrap:wrap` cho `.icon-box` — ép lại `nowrap` để
	   icon không bao giờ bị đẩy xuống hàng riêng (đã kiểm: đổi sang nowrap thì
	   `flexWrap` đo đúng "nowrap", nhưng ảnh vẫn "tiêu đề trên, icon dưới" —
	   TỨC KHÔNG PHẢI DO WRAP. Nguyên nhân thật: `align-items:center` canh icon
	   theo TÂM của khối văn bản 5-6 dòng, đẩy icon xuống lưng chừng mô tả thay
	   vì ngang hàng tiêu đề. Đổi sang `flex-start` để icon neo theo ĐỈNH văn
	   bản, đúng cách mockup vẽ (icon ngang hàng dòng tiêu đề đầu tiên). */
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	width: 100%;
	gap: 8px !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-img {
	flex: 0 0 46px !important;
	width: 46px !important;
	max-width: 46px !important;
	margin: 0 !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-text {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 !important;
}
.tl-kien-thuc .tl-knowledge-values strong { font-size: 12px !important; line-height: 1.25 !important; }
.tl-kien-thuc .tl-knowledge-values p { font-size: 10.5px !important; line-height: 1.3 !important; }

/* --- V5.4 CHỦ ĐỀ KIẾN THỨC — khẳng định lại icon 48px (đề phòng ghi đè) - */
.tl-kien-thuc .tl-chu-de .icon-box-img,
.tl-kien-thuc .tl-chu-de .icon-box-img svg { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; }

}   /* ==== HẾT NHIỆM VỤ MOBILE V5 ==== */

/* =============================================================================
   NHIỆM VỤ MOBILE V6 (28/08) — 3 ĐIỂM CÒN LẠI, TÌM ĐÚNG GỐC LỖI
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- V6.1 ICON CHỦ ĐỀ — "48px" đo bằng hộp chứa, KHÔNG PHẢI kích thước
   HÌNH VẼ nhìn thấy. Kiểm bằng `getBBox()` trên SVG: viewBox 168×168 nhưng
   nét vẽ thật chỉ nằm trong 116×116 ở giữa (~26px rìa trống mỗi bên, do bộ
   icon gốc tự chừa lề trong file nguồn). Hộp 48px ⇒ hình vẽ hiển thị thật chỉ
   ~48×(116/168) ≈ 33px — đúng như 4T đo được "~28px", KHÔNG PHẢI icon chưa
   to. Phóng to NÉT VẼ (không phải hộp) bằng transform trên `<g>` bên trong,
   không đụng layout/kích thước card. */
.tl-kien-thuc .tl-chu-de .icon-box-img svg g {
	transform: scale(1.55);
	transform-origin: 84px 84px;
}

/* --- V6.2 BÀI VIẾT MỚI NHẤT — hàng meta CHẠM SÁT mô tả ở thẻ có tiêu đề dài
   Đo được: card #2 (tiêu đề 2 dòng) — mô tả kết thúc y=142, meta bắt đầu
   y=142, LỆCH 0px. Lỗi ở `.tl-meta-hang{margin:auto 0 0}` — margin-top:auto
   chỉ NỞ RA khi còn dư khoảng trống; thẻ này set `min-height` (không phải
   height cố định) nên khi nội dung vừa khít, auto-margin co về 0, không còn
   khoảng cách. `padding-top` (đặt trước đó) SAI CHỖ — padding nằm TRONG hộp
   meta (quanh icon đồng hồ), không tạo khoảng cách với phần tử ĐỨNG TRƯỚC nó.
   Đổi hẳn sang `margin-top` cố định — luôn có khoảng cách bất kể thẻ khít
   hay dư, đánh đổi việc hàng meta không còn dí sát đáy thẻ ở mọi trường hợp
   (chấp nhận được — ưu tiên không bao giờ dính chữ). */
.tl-kien-thuc .tl-card-baiviet .tl-meta-hang {
	margin: 8px 0 0 !important;
	padding-top: 0 !important;
}
.tl-kien-thuc .tl-card-baiviet .box-text { padding-bottom: 12px !important; }

/* --- V6.3 KIẾN THỨC NỔI BẬT — mục tiêu 112–120px: PHẢI chặn số dòng mô tả
   Đo được: cấu trúc ĐÃ ĐÚNG lưới 2×2 icon-trái (grid 171×171px, không phải
   4 hàng dọc) — nhưng cao 178–207px vì mô tả thật (~80 ký tự) tự nhiên vỡ
   5–6 dòng trong cột chữ hẹp ~100px, cộng tiêu đề 2–3 dòng thì KHÔNG CÁCH
   NÀO xuống dưới ~150px mà vẫn hiện trọn câu. Để đạt đúng 112–120px như 4T
   yêu cầu, giới hạn mô tả tối đa 2 DÒNG (line-clamp, chữ đầy đủ vẫn còn
   trong HTML — không xoá dữ liệu, chỉ ẩn bớt ở khung hẹp này, giống cách đã
   làm cho phần trích dẫn "Bài viết mới nhất"). */
/* ⚠ Đo lại: cột chữ chỉ 59px dù card rộng 171px — icon(44)+gap(8)+padding
   2×14=28 ăn hết 80px, chữ chỉ còn 141-28-44-8=61px, KHÔNG ĐỦ cho "Chọn đúng
   từ đầu" (16 ký tự) trong 2 dòng dù ngắn — buộc line-clamp cắt cả câu ngắn.
   Giảm padding 14→10, gap 8→6 để trả lại chữ ~101px, đủ rộng. */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner {
	min-height: 112px !important;
	display: flex;
	align-items: center;
	padding: 10px !important;
}
/* ⚠ `.icon-box` là flex-item của `.col-inner` nhưng KHÔNG tự giãn hết bề
   ngang (flex-grow mặc định 0) — đo được chỉ rộng 119px trong khi cột còn
   dư tới 151px, cột chữ vì vậy hụt xuống còn 59px (không đủ cho câu ngắn
   nhất cũng phải vỡ 7 dòng). Ép `width:100%` để nó CHIẾM HẾT phần còn lại. */
.tl-kien-thuc .tl-knowledge-values .icon-box { gap: 6px !important; width: 100% !important; }
.tl-kien-thuc .tl-knowledge-values .icon-box-img {
	flex: 0 0 44px !important;
	width: 44px !important;
	max-width: 44px !important;
}
/* ⚠ 1.42 đo ra hình vẽ chỉ 44px (chưa chạm sàn 46) — 168/116=1.448 là hệ số
   ĐÚNG về mặt hình học (lấp đầy hẳn viewBox), nhích thêm chút nữa cho chắc. */
.tl-kien-thuc .tl-knowledge-values .icon-box-img svg g { transform: scale(1.55); transform-origin: 84px 84px; }
.tl-kien-thuc .tl-knowledge-values strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px !important;
	line-height: 1.25 !important;
	margin-bottom: 3px !important;
}
.tl-kien-thuc .tl-knowledge-values p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 11px !important;
	line-height: 1.3 !important;
}

}   /* ==== HẾT NHIỆM VỤ MOBILE V6 ==== */

/* =============================================================================
   NHIỆM VỤ MOBILE V7 (28/08) — 2 ĐIỂM CÒN LẠI
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- V7.1 BÀI VIẾT MỚI NHẤT — .box-text đang flex-direction:ROW (mặc định
   Flatsome, chưa từng khai lại) — title/mô tả/meta về mặt hình học vẫn đo
   đúng vị trí dọc (do bọc trong `.box-text-inner` tự xuống dòng bình thường
   bên trong MỘT flex item duy nhất của hàng), nhưng đây là cấu trúc SAI VỀ
   BẢN CHẤT khiến hành vi `margin-top:auto` không đáng tin cậy — 4T yêu cầu
   đúng: ép tường minh `column`, không suy đoán qua wrapper con nữa. Đồng thời
   chặn tiêu đề tối đa 2 dòng — không có trần thì tiêu đề dài (~80 ký tự) đẩy
   thẻ cao gấp đôi (178px so với 148px của thẻ tiêu đề ngắn), làm khoảng cách
   trước meta CHẬT hẳn dù không thực sự chạm (0 vs 8px tuỳ thẻ) — dễ đọc nhầm
   là "chồng" khi nhìn ảnh chụp cỡ nhỏ. */
.tl-kien-thuc .tl-card-baiviet .box-text {
	display: flex !important;
	flex-direction: column !important;
	min-height: 142px !important;
	padding: 12px !important;
}
/* ⚠ Đo được: khi `.box-text-inner` (cha trực tiếp của `.post-title`) LÀ flex
   container, `.post-title` trở thành FLEX ITEM — trình duyệt tự "blockify"
   `display:-webkit-box` của nó thành `flow-root` (đo qua `getComputedStyle`),
   vô hiệu hoá `-webkit-line-clamp` dù thuộc tính vẫn hiện diện trong CSS.
   Trả `.box-text-inner` về BLOCK thường (không flex) — con của nó xếp theo
   luồng khối bình thường, `.post-title` không còn là flex item nên
   `-webkit-box` áp dụng đúng. Việc "đẩy meta xuống đáy" giao lại hoàn toàn
   cho `.box-text` (flex-column, còn 1 cấp trên) qua `margin-top:auto` của
   chính meta — không cần `.box-text-inner` phải flex. */
.tl-kien-thuc .tl-card-baiviet .box-text-inner {
	display: block !important;
	width: 100%;
}
.tl-kien-thuc .tl-card-baiviet .box { min-height: 142px !important; }
.tl-kien-thuc .tl-card-baiviet .post-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-size: 13.5px !important;
	line-height: 1.3 !important;
}
/* ⚠ GỐC THẬT của việc line-clamp không ăn: liên kết `<a class="plain">` bên
   trong tiêu đề đang là `display:inline-block` (mặc định Flatsome). Với
   `-webkit-box-orient:vertical`, một item INLINE-BLOCK duy nhất bị coi là
   MỘT khối nguyên khối (atomic) thay vì chữ chảy nhiều dòng — line-clamp
   không có "dòng" nào để đếm, nên hiện trọn không cắt. Đã kiểm bằng thử
   nghiệm cô lập: cùng CSS, `<a>` mặc định (`inline`) thì clamp chạy đúng,
   `<a>` ép `inline-block` thì KHÔNG. Trả link về `inline` chỉ tại đây. */
.tl-kien-thuc .tl-card-baiviet .post-title a { display: inline !important; }
/* ⚠ `margin-top:auto` chỉ có tác dụng "đẩy về đáy" khi PHẦN TỬ CHA trực tiếp
   là flex/grid. Cha trực tiếp của meta là `.box-text-inner`, vừa đổi về
   `block` thường (để cứu `-webkit-line-clamp` của tiêu đề, xem trên) — auto
   margin trong luồng khối thường không co giãn, kết quả về 0 y hệt bug cũ.
   Dùng margin CỐ ĐỊNH: không tự dán đáy thẻ mọi lúc, nhưng CHẮC CHẮN không
   bao giờ chạm/đè mô tả — ưu tiên đúng như 4T nhắc lại nhiều lần. */
.tl-kien-thuc .tl-card-baiviet .tl-meta-hang {
	margin-top: 10px !important;
	padding-top: 0 !important;
}

/* --- V7.2 KIẾN THỨC NỔI BẬT — title đầy đủ + MÔ TẢ RÚT GỌN THẬT (không phải
   line-clamp/ellipsis) — 4T yêu cầu đúng: "nội dung responsive". Đã thêm 2
   bản mô tả thật vào `uxb/pages/kien-thuc.txt` (`.tl-desc-full` / `.tl-desc-
   short`, câu hoàn chỉnh, không phải câu gốc bị cắt dở) — khổ hẹp hiện bản
   ngắn, desktop vẫn hiện bản gốc đầy đủ như cũ, không đổi gì ở đó. */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner {
	min-height: 136px !important;
	align-items: flex-start !important;
	padding: 10px 8px !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-img {
	flex: 0 0 54px !important;
	width: 54px !important;
	max-width: 54px !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-img svg g { transform: scale(1.5); transform-origin: 84px 84px; }
.tl-kien-thuc .tl-knowledge-values strong {
	display: block !important;
	overflow: visible !important;
	white-space: normal !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	margin-bottom: 4px !important;
}
.tl-kien-thuc .tl-knowledge-values p {
	display: block !important;
	overflow: visible !important;
	white-space: normal !important;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
}
/* Khổ hẹp: ẩn bản gốc, hiện bản rút gọn */
.tl-kien-thuc .tl-knowledge-values .tl-desc-full { display: none !important; }
.tl-kien-thuc .tl-knowledge-values .tl-desc-short { display: inline !important; }

}   /* ==== HẾT NHIỆM VỤ MOBILE V7 ==== */

/* Mặc định MỌI khổ (desktop ≥850 dùng đường này, không vào khối media nào ở
   trên): giữ nguyên bản mô tả gốc như trước — ẩn hẳn bản rút gọn mobile. */
.tl-kien-thuc .tl-knowledge-values .tl-desc-short { display: none; }
/* Cùng cơ chế cho đoạn mô tả hero — mặc định (desktop) giữ bản đầy đủ. */
.tl-kien-thuc .tl-hero-mota .tl-desc-short { display: none; }

/* =============================================================================
   NHIỆM VỤ MOBILE V9 (28/08) — BÁM MOCKUP RÕ HƠN: to hơn, không ellipsis
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- V9.1 HERO — ảnh/người/quote LỚN hơn, chữ không nhỏ -----------------
   ⚠ Bản đầu (đã sửa) từng ép `.tl-knowledge-hero-media` xuống 54% — PHÁ kỹ
   thuật overlay gốc của V5.1: media BẮT BUỘC phủ TRỌN 100% làm nền tuyệt
   đối, quote (`right:12px`) neo theo MÉP PHẢI của chính media. Thu hẹp media
   kéo quote dồn vào giữa, đè lên content. Đã bỏ hẳn rule đó — media giữ
   nguyên 100%. Đường đúng để "ảnh lớn hơn, ít bị che, quote lớn hơn" là thu
   hẹp CỘT CHỮ (content) — nó vốn rộng 78vw/304px, đủ dư địa để giảm mà vẫn
   đủ chỗ cho H1 xuống dòng trong 390px cao cố định của hero (đã đo bằng
   script live, không đoán). */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-content {
	width: clamp(190px, 54vw, 215px) !important;
	max-width: 60vw !important;
}
/* Gradient hẹp lại theo cột chữ mới để lộ ảnh nhiều hơn, vẫn đặc ở dải sát
   chữ để chữ đọc được. */
.tl-kien-thuc .tl-knowledge-hero-media::after {
	background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 26%, rgba(255,255,255,.2) 44%, rgba(255,255,255,0) 58%);
}
.tl-kien-thuc .tl-hero-h1 h1 { font-size: clamp(19px, 5.4vw, 22px) !important; }
.tl-kien-thuc .tl-knowledge-hero-content .text:not(.tl-hero-h1) p { font-size: 13.5px !important; line-height: 1.5 !important; }
/* Quote LỚN hơn — media vẫn 100% (390px ở khổ 390), cột chữ đã lùi về
   ~190-215px nên còn dư địa RÕ RỆT bên phải cho quote to hơn mà KHÔNG chạm
   content. Đã đo bằng script live (không tính tay) để đảm bảo có khoảng hở
   thật giữa mép chữ và mép quote ở cả 3 khổ 360/390/430. */
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy { width: 42%; max-width: 155px; padding: 12px !important; }
.tl-kien-thuc .tl-knowledge-hero-media .tl-quote-navy p { font-size: 11px !important; line-height: 1.45 !important; }

/* --- V9.2 CHỦ ĐỀ KIẾN THỨC — card RỘNG hơn, icon 60px -------------------- */
.tl-kien-thuc .tl-chu-de > .col {
	flex: 0 0 138px !important;
	width: 138px !important;
	max-width: 138px !important;
}
.tl-kien-thuc .tl-chu-de .icon-box { height: 150px !important; min-height: 150px !important; }
.tl-kien-thuc .tl-chu-de .icon-box-img { width: 60px !important; max-width: 60px !important; margin: 0 auto 10px !important; }
.tl-kien-thuc .tl-chu-de .icon-box-img svg g { transform: scale(1.55); transform-origin: 84px 84px; }
.tl-kien-thuc .tl-chu-de p { font-size: 13px !important; }

/* --- V9.3 BÀI VIẾT MỚI NHẤT — ảnh 48%, KHÔNG line-clamp, cao theo nội dung
   4T: "card quá thấp, chữ bị cắt" + "không ellipsis" — gỡ hẳn line-clamp của
   CẢ tiêu đề lẫn mô tả (vòng trước chỉ gỡ ellipsis ở "Kiến thức nổi bật",
   3 card này vẫn đang line-clamp:2 từ vòng an toàn trước đó). Thẻ tự cao lên
   theo đúng độ dài chữ thật, không giới hạn nữa. */
.tl-kien-thuc .tl-card-baiviet .box-image {
	flex: 0 0 48% !important;
	width: 48% !important;
	max-width: 48% !important;
}
.tl-kien-thuc .tl-card-baiviet .box { height: auto !important; min-height: 0 !important; }
.tl-kien-thuc .tl-card-baiviet .box-text { min-height: 0 !important; }
.tl-kien-thuc .tl-card-baiviet .post-title {
	display: block !important;
	-webkit-line-clamp: unset !important;
	overflow: visible !important;
	font-size: 14.5px !important;
	line-height: 1.32 !important;
}
.tl-kien-thuc .tl-card-baiviet .from_the_blog_excerpt {
	-webkit-line-clamp: unset !important;
	overflow: visible !important;
	display: block !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
}

/* --- V9.4 BÀI VIẾT MỚI BẬT — 2 card LỚN, ảnh 16:9, bỏ khung thumbnail nhỏ */
.tl-kien-thuc .tl-card-rank { gap: 14px !important; }
.tl-kien-thuc .tl-card-rank .box-image {
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
}
.tl-kien-thuc .tl-card-rank .box-text { padding: 12px !important; }
.tl-kien-thuc .tl-card-rank .post-title { font-size: 14.5px !important; line-height: 1.3 !important; }

/* --- V9.5 KIẾN THỨC NỔI BẬT — nới thêm bề ngang cột chữ ------------------ */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child { gap: 8px !important; }
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner { padding: 10px 6px !important; }
.tl-kien-thuc .tl-knowledge-values .icon-box { gap: 8px !important; }

}   /* ==== HẾT NHIỆM VỤ MOBILE V9 ==== */

/* =============================================================================
   NHIỆM VỤ MOBILE V10 (28/08) — 4T nghiệm thu vòng V9: hero còn hẹp/5 dòng,
   thẻ #2 quá cao do tiêu đề dài, "mới bật" vẫn nhỏ, "nổi bật" cột quá hẹp.
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {

/* --- V10.1 HERO — cột chữ 70%, CĂN TRÊN (không center) ------------------
   4T: "h1 hero width 70%, font 20–21px". Đo trực tiếp bằng script trước khi
   sửa: content vốn `justify-content:center` theo CHIỀU CAO CỐ ĐỊNH 390px của
   hero — nới cột chữ lên 70% (273px ở khổ 390) mà vẫn center dọc thì chữ lấn
   ngang vào vùng quote (đã xác nhận bằng đo tay lần trước, KHÔNG phải đoán).
   Sửa đúng gốc: chuyển content lên CĂN TRÊN (`flex-start`), quote vẫn neo
   ĐÁY như cũ (`bottom:14px`) — hai khối tách nhau theo TRỤC DỌC thay vì
   tranh chỗ theo trục ngang. Đã đo lại sau khi đổi: 0px chồng lấn. */
.tl-kien-thuc .tl-knowledge-hero > .section-content > .row > .col.tl-knowledge-hero-content {
	width: 70% !important;
	max-width: 70% !important;
	justify-content: flex-start !important;
	padding-top: 22px !important;
}
.tl-kien-thuc .tl-hero-h1 h1 { font-size: clamp(20px, 5.6vw, 21px) !important; line-height: 1.22 !important; }
/* Đoạn mô tả VẪN đè lên quote nếu để nguyên 2 câu gốc trong cột 70% (đã chụp
   ảnh xác nhận thật, không phải đoán) — đổi sang bản RÚT GỌN THẬT (2 câu gộp
   thành 1, giữ nguyên ý, không bịa) qua cặp span `.tl-desc-full`/`.tl-desc-
   short` đã có sẵn trong `kien-thuc.txt`, cùng cơ chế đang dùng cho "Kiến
   thức nổi bật". Thêm max-width hẹp hơn cột H1 để chắc chắn không lấn dù
   text ngắn hơn nhiều. */
.tl-kien-thuc .tl-hero-mota { max-width: 200px; }
.tl-kien-thuc .tl-hero-mota p { font-size: 13px !important; line-height: 1.45 !important; margin-top: 8px !important; }
.tl-kien-thuc .tl-hero-mota .tl-desc-full { display: none !important; }
.tl-kien-thuc .tl-hero-mota .tl-desc-short { display: inline !important; }
/* Gradient nới lại theo cột chữ 70% (thay vì đường hẹp của V9.1). */
.tl-kien-thuc .tl-knowledge-hero-media::after {
	background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 44%, rgba(255,255,255,.3) 64%, rgba(255,255,255,0) 80%);
}

/* --- V10.2 BÀI VIẾT MỚI NHẤT — thẻ #2 (bài "Đọc kết quả xét nghiệm máu…",
   88 ký tự) đổi sang TÊN RÚT GỌN THẬT cho mobile, không phải CSS cắt chữ.
   `[blog_posts]` không cho sửa tiêu đề TỪNG bài qua panel — dùng đúng kỹ
   thuật đã dùng cho H1 trang chủ/Giúp gì: ẩn chữ thật bằng `font-size:0`,
   vẽ chữ rút gọn bằng `::before`. Chữ thật vẫn còn trong DOM/aria — trình
   đọc màn hình vẫn đọc đúng tiêu đề đầy đủ, chỉ MẮT thấy bản ngắn.
   `:nth-child(2)` đúng bài id=35 vì `ids="28,35,30,37,40,43"` — đã xác nhận
   thứ tự DOM khớp thứ tự `ids` (luật `nth-child(n+4)` ẩn thẻ 4-6 đã dùng
   đúng cách này từ trước). Desktop không đụng — chỉ trong khối mobile này. */
.tl-kien-thuc .tl-card-baiviet > .col:nth-child(2) .post-title a {
	font-size: 0 !important;
	line-height: 0 !important;
}
.tl-kien-thuc .tl-card-baiviet > .col:nth-child(2) .post-title a::before {
	content: "Đọc kết quả xét nghiệm máu trước khi gặp bác sĩ";
	display: inline;
	font-size: 14.5px;
	line-height: 1.32;
}

/* --- V10.3 BÀI VIẾT MỚI BẬT — ảnh 16:9 LỚN hơn: giảm gutter/gap của hàng để
   nhường bề ngang cho ảnh (vẫn giữ ĐÚNG lưới 2 cột = mỗi card 50%, không đổi
   cấu trúc). Đo trước: gutter 20px×2 + gap 12px ăn mất 52px trong 390px ⇒
   mỗi card chỉ 168px, ảnh 16:9 cao vỏn vẹn 93px. Giảm còn 10/10 ⇒ mỗi card
   ~180px, ảnh cao ~101px — cùng lúc tăng cỡ chữ để cả khối "nặng" hơn. */
.tl-kien-thuc .tl-card-rank {
	padding: 0 10px !important;
	gap: 10px !important;
}
.tl-kien-thuc .tl-card-rank .box-text { padding: 10px 10px 12px !important; }
.tl-kien-thuc .tl-card-rank .post-title { font-size: 15px !important; line-height: 1.28 !important; }
.tl-kien-thuc .tl-card-rank .tl-meta-hang { font-size: 10.5px !important; }

/* --- V10.4 KIẾN THỨC NỔI BẬT — ĐỔI SANG 1 CỘT: đo trực tiếp cho thấy lưới
   2 cột hiện tại chỉ chừa 67px cho cột chữ (icon 54px + gap + padding ăn hết
   phần còn lại của nửa card ~173px) — quá hẹp để đọc, đúng như 4T chỉ ra.
   4T cho phép "xếp một cột nếu 2 cột không đủ" — chọn nhánh này vì icon
   48-54px không thể nhỏ thêm mà vẫn phải giữ đúng brief. 1 cột full-width
   cho cột chữ ~280px, đọc thoải mái. */
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child {
	grid-template-columns: 1fr !important;
	gap: 12px !important;
}
.tl-kien-thuc .tl-knowledge-values > .section-content > .row:last-child > .col > .col-inner {
	padding: 14px 14px !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-text,
.tl-kien-thuc .tl-knowledge-values .icon-box .tl-desc-short,
.tl-kien-thuc .tl-knowledge-values .icon-box .tl-desc-full { width: auto !important; }
.tl-kien-thuc .tl-knowledge-values strong { font-size: 14px !important; }
.tl-kien-thuc .tl-knowledge-values p { font-size: 12.5px !important; line-height: 1.42 !important; }

}   /* ==== HẾT NHIỆM VỤ MOBILE V10 ==== */

/* =============================================================================
   NHIỆM VỤ MOBILE V11 (28/08) — 4T yêu cầu 3 việc:
     1. Tiêu đề "BÀI VIẾT MỚI NHẤT"/"BÀI VIẾT MỚI BẬT" căn giữa (đang "start"
        — thiếu `text_align="center"` trong shortcode, khác các H2 khác trên
        trang đã có sẵn).
     2. Khung bài viết: ẢNH TRÊN, CHỮ DƯỚI (đang `display:flex;flex-direction:
        row` — ảnh trái/chữ phải, đo trực tiếp trên live, không phải đoán).
     3. Icon "Kiến thức nổi bật": icon TRÊN, chữ DƯỚI, căn giữa (đang
        `flex-direction:row` — icon trái/chữ phải).
   Không sửa `[pos="left"]` trong shortcode (ảnh hưởng desktop) — ghi đè
   riêng ở khối ≤549 này.
============================================================================= */
@media (max-width: 549px) {

.tl-kien-thuc .tl-latest-posts h2,
.tl-kien-thuc .tl-latest-posts .tl-phu-de,
.tl-kien-thuc .tl-latest-posts .tl-section-more,
.tl-kien-thuc .tl-featured-posts h2,
.tl-kien-thuc .tl-featured-posts .tl-phu-de,
.tl-kien-thuc .tl-featured-posts .tl-section-more {
	text-align: center !important;
}

/* Blog card: ảnh trên/chữ dưới. `.box` vốn đã `display:flex` (Flatsome
   dùng flex để canh dọc icon-box lẫn box bài viết) — chỉ cần đổi hướng.
   ⚠ `.box` từng bị khoá `height:121px` (tính cho layout NGANG cũ, ảnh nhỏ
   nằm cạnh chữ) — dựng DỌC thì ảnh+tiêu đề+trích dẫn cần nhiều chỗ hơn hẳn,
   giữ nguyên số cũ làm chữ đè lên nhau/nút "Xem thêm" trôi lên giữa card
   (đã thấy thật trên ảnh chụp). Trả về `auto` để card tự cao theo nội dung. */
.tl-kien-thuc .tl-card-baiviet .box,
.tl-kien-thuc .tl-card-rank .box {
	flex-direction: column !important;
	height: auto !important;
	min-height: 0 !important;
}
.tl-kien-thuc .tl-card-baiviet .box-image,
.tl-kien-thuc .tl-card-rank .box-image {
	width: 100% !important;
}
/* ⚠ Bẫy sâu hơn: `.box-text` mang `flex:1 1 0` (đúng cho layout NGANG cũ —
   "chiếm hết bề rộng còn lại"). Đổi `.box` sang cột dọc thì CÙNG thuộc tính
   đó lại có nghĩa "flex-basis:0, tự lớn theo khoảng trống" — mà `.box` cao
   theo `auto` (không phải số cố định) nên không có "khoảng trống" nào để
   lớn vào, `.box-text` co về gần 0 (đo được 24px) trong khi nội dung thật
   bên trong (tiêu đề+trích dẫn) cao 105px — tràn ra ngoài mà không kéo
   `.box` cao theo, đúng hiện tượng "chữ đè/nút trôi lên" trên ảnh chụp.
   Đổi `flex:1 1 0` → `flex:0 0 auto` để box-text tự cao theo NỘI DUNG thay
   vì theo khoảng trống còn lại của hàng ngang không còn tồn tại nữa. */
.tl-kien-thuc .tl-card-baiviet .box-text,
.tl-kien-thuc .tl-card-rank .box-text {
	flex: 0 0 auto !important;
	min-width: 0;
}

/* Icon "Kiến thức nổi bật": icon trên/chữ dưới, căn giữa cả hai. */
.tl-kien-thuc .tl-knowledge-values .icon-box {
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-img {
	margin: 0 auto 10px !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-text {
	text-align: center !important;
}

/* ⛔ 4T báo icon bị cắt mất chi tiết — đúng, đo bằng `getBBox()`: luật cũ
   (dòng ~2197) phóng to hình bằng `transform:scale(1.5)` trên chính `<g>`
   bên trong SVG, neo quanh tâm HÌNH HỌC của khung 130×130 (84,84) — nhưng
   hình vẽ thật KHÔNG nằm giữa khung đó (bbox đo được x=26,y=-5,w=85,h=84,
   tâm thật ~ (68, 37), lệch hẳn lên trên so với tâm khung). Phóng quanh sai
   tâm đẩy rìa TRÊN của hình vọt ra ngoài viewBox tới 49px, mà `<svg>` mặc
   định `overflow:hidden` nên cắt mất — đúng phần "chi tiết" 4T thấy biến
   mất (đỉnh khiên/đỉnh la bàn/đỉnh bóng đèn).
   Bỏ hẳn cách "phóng to bằng transform trên nội dung" (phải tính tâm đúng
   cho từng icon, dễ sai lại): phóng to bằng cách tăng THẲNG kích thước
   phần tử `<svg>` — không bao giờ cắt vì không có transform nào đẩy hình ra
   ngoài khung của chính nó, hình vẫn nằm nguyên vị trí y hệt bên trong
   viewBox, chỉ là viewBox đó được vẽ to hơn. */
.tl-kien-thuc .tl-knowledge-values .icon-box-img svg g {
	transform: none !important;
}
.tl-kien-thuc .tl-knowledge-values .icon-box-img,
.tl-kien-thuc .tl-knowledge-values .icon-box-img svg {
	width: 86px !important;
	height: 86px !important;
	max-width: 86px !important;
	max-height: 86px !important;
}

}   /* ==== HẾT NHIỆM VỤ MOBILE V11 ==== */