/*!
 * newsroom.css — trang DANH SÁCH Newsroom.
 *
 * Chỉ chứa kiểu cho lưới bài (thẻ nổi bật, lưới 3, phân trang) và dải chip lọc.
 * Phần trang CHI TIẾT nằm ở newsroom-detail.css.
 *
 * Vì sao tách (11/09 → 14/09/2026): file này từng nạp cho cả
 * is_singular('post'), tức trang chi tiết tải 52 rule .fusion-post-cards mà
 * không dùng rule nào. Nguy hiểm hơn: khi khối "Có thể bạn quan tâm" của trang
 * chi tiết dùng Post Cards, 52 selector đó sẽ bất ngờ ăn vào — hỏng im lặng.
 * Theo đúng nếp đã có: tb-kham-pha-listing.css / tb-kham-pha-detail.css.
 */

/* ---------------------------------------------------------------- Thẻ chung */

/* Nhãn chuyên mục đang absolute nên đè lên ảnh và tràn khỏi thẻ.
   Figma đặt nó thành dòng chữ nhỏ nằm dưới ảnh, trên ngày tháng. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > div:nth-child(2){
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	font-size: 11.5px !important;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #FF3251 !important;
	line-height: 1.4;
	/*
	 * Bài gắn năm chuyên mục thì nhãn dài ba dòng. Phải !important: Avada khai
	 * `display: flow-root` cho .fusion-text, nên không có nó thì -webkit-box
	 * không ăn, clamp im lặng không chạy và dòng thứ ba bị cắt ngang thân chữ —
	 * trông như lỗi font chứ không ai nghĩ tới display.
	 */
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-posts-cards > li .fusion-post-card-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------- Thẻ "Bài nổi bật" */

body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper{
	display: grid !important;
	/*
	 * Figma: ảnh 561, khe 40, hàng nội dung 1202 -> cột chữ 601. Trước đây chia
	 * đôi 1fr/1fr nên ảnh ra 556 và cột chữ 556 — lệch cả hai bên.
	 */
	grid-template-columns: minmax(0, 561px) minmax(0, 1fr);
	/*
	 * Năm hàng cho năm khối chữ, hàng cuối là 1fr. Thiếu hàng 1fr thì phần cao
	 * dôi ra của tấm ảnh (vốn trải suốt 1 / -1) bị chia đều cho mọi hàng, đẩy
	 * nhãn chuyên mục xuống cách ngày tháng đúng 320px — trông như lỗi khoảng
	 * cách chứ không ai nghĩ là do ảnh.
	 */
	grid-template-rows: auto auto auto auto 1fr;
	row-gap: 0;
	column-gap: 40px;
	align-items: start;
	/* Figma đo chiều cao khối đúng bằng chiều cao ảnh. */
	min-height: 376px;

	/*
	 * Figma KHÔNG vẽ khung thẻ quanh bài nổi bật — chỉ có ảnh và chữ đặt thẳng
	 * trên nền trang. Viền, bo góc, nền trắng và đệm đáy ở đây là của thiết kế
	 * Post Card dùng cho lưới 3 cột bên dưới, bị thừa hưởng sang.
	 */
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Khối chữ cuối (Đọc tiếp) tụt xuống đáy, ngang đáy ảnh — đúng như Figma. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:last-child{
	align-self: end;
}

/* Thẻ li cũng đang mang viền/nền của Post Card. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li{
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Ảnh chiếm trọn cột trái và cao bằng cả thẻ. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > .fusion-post-card-image{
	grid-column: 1 !important;
	grid-row: 1 / -1 !important;
	align-self: stretch !important;
	aspect-ratio: auto !important;
	/*
	 * Figma đo 561 x 376, nhưng KHOÁ CỨNG 376 thì khi cột chữ cao hơn (tiêu đề
	 * 3 dòng, mô tả dài) ảnh ngắn hơn cột và đáy nút thò ra ngoài đáy ảnh.
	 * Cho ảnh bám chiều cao wrapper, còn 376 đặt làm min-height của wrapper —
	 * hai mép luôn bằng nhau, bài ngắn vẫn ra đúng 376.
	 */
	height: 100% !important;
	min-height: 0;
	border-radius: 16px;
	overflow: hidden;
	margin: 0 !important;
}

/*
 * Mọi khối chữ dồn sang cột phải, tự xếp xuống theo hàng, và xoá mọi lề/đệm
 * rời rạc mà Post Card design gán cho từng khối.
 *
 * Bản reset này PHẢI đứng trước các quy tắc "từng khối" ở dưới. Trước đây nó
 * dùng chung selector với lưới 3 cột, nằm ở cuối file — cùng độ đặc hiệu nhưng
 * đứng sau, nên nó thắng và xoá sạch:
 *   - lề trên 12 của mô tả,
 *   - lề trái 191 của chip "x phút đọc" → chip này đè lên chip ngày tháng,
 *   - lề trên 14 của nút "Đọc chi tiết".
 * Chỉ hỏng ở thẻ nổi bật; lưới 3 cột không có khối nào cần lề riêng nên không
 * ai thấy gì bất thường.
 */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:not(.fusion-post-card-image){
	grid-column: 2 !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* Avada tạo kiểu h-tag bằng rule có ID (.fusion-body #main … h3) nên selector
   thường không thắng nổi — phải !important, đúng như ở giai-phap.css. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > .fusion-title > *{
	/*
	 * Figma (node 401-3742): Source Serif 4, SemiBold 600, 39.06 / 47, #000000.
	 * Trước đây là 30 / 38 weight 700 màu #1B1B38 — sai cả bốn giá trị, và sai
	 * cả họ chữ: thẻ lưới dùng sans, riêng bài nổi bật Figma dùng serif.
	 */
	font-family: var(--lb-font-serif)!important;
	font-size: 39.06px !important;
	line-height: 47px !important;
	font-weight: 600 !important;
	color: #000000 !important;
}

/*
 * Cột chữ của thẻ nổi bật — số đo đọc thẳng từ bảng Layout của Figma:
 *
 *   chip tag   224x32  @800,621  bo 24, đệm 8/24, gap 8, nền #FF3251 10%
 *   tiêu đề    600x141 @800,665
 *   mô tả      599x72  @801,818  Google Sans Flex 400, 16/24, #676673
 *   chip ngày  174x32  @800,890  đệm 4/8, gap 8
 *   chip đọc   120x32  @991,890  đệm 4/8, gap 8
 *   nút        206x51  @801,936  bo 8, đệm 4/24, gap 16, nền #FF3251
 *
 * Khoảng cách suy ra: ảnh->tag 10, tag->tiêu đề 12, tiêu đề->mô tả 12,
 * mô tả->meta 0, meta->nút 14. Đáy nút 987 = đáy ảnh 987.
 */

/* --- Chip chuyên mục ---
 *
 * Selector phải mang :has(> .fusion-post-card-image) > div:nth-child(2) y như
 * rule chung ở đầu file (vốn dành cho thẻ lưới 3 cột), cộng thêm .fusion-grid-1
 * để hơn đúng một lớp. Thiếu phần :has(), rule chung thắng và ghi đè cả
 * display lẫn padding bằng !important — nền hồng vẫn hiện nên trông như đã ăn,
 * chỉ có chữ tràn ra hai đầu chip mới lộ ra.
 */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > div:nth-child(2){
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	align-self: start;
	/*
	 * justify-self, KHÔNG phải align-self: grid item mặc định kéo giãn theo
	 * chiều NGANG, nên thiếu dòng này chip dài hết cột 599 thay vì ôm chữ 224,
	 * và đệm trái 24 đẩy chữ ra ngoài vùng thấy được.
	 */
	justify-self: start;
	width: auto !important;
	max-width: 100%;
	min-height: 32px;
	padding: 8px 24px !important;
	margin: 6px 0 12px !important;
	border-radius: 24px;
	background: rgba(255, 50, 81, .1);
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #FF3251 !important;
	line-height: 16px;
	overflow: hidden;
}

/*
 * Chữ chuyên mục nằm trong <p> bên trong .fusion-text, không phải text node
 * trực tiếp. Đặt nowrap/ellipsis ở vỏ thì <p> vẫn tràn ra hai đầu chip và đè
 * lên cả phần đệm — phải đặt trên chính <p>, kèm min-width:0 để nó co được
 * trong flex.
 */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > div:nth-child(2) p{
	min-width: 0;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > div:nth-child(2)::before{
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3251' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

/* --- Mô tả --- */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:nth-child(4){
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px !important;
	line-height: 24px !important;
	color: #676673 !important;
	margin: 12px 0 0 !important;
}

/* --- Hàng meta: ngày và thời gian đọc nằm CÙNG một hàng --- */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:nth-child(5),
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:nth-child(6){
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto !important;
	min-height: 32px;
	padding: 4px 8px !important;
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 24px !important;
	color: #676673 !important;
}

/* Figma đặt hai chip cạnh nhau ở y=890; chip đọc cách chip ngày 17. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:nth-child(5){
	grid-row: 4 !important;
	justify-self: start;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:nth-child(6){
	grid-row: 4 !important;
	justify-self: start;
	margin-left: 191px !important;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:nth-child(5)::before{
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3251' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/16px 16px no-repeat;
	opacity: .75;
}

/* --- Nút --- */
body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:last-child{
	grid-row: 5 !important;
	align-self: end;
	margin: 14px 0 0 !important;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:last-child p{
	display: inline-flex;
	align-items: center;
	gap: 16px;
	min-width: 206px;
	min-height: 48px;
	height: 51px;
	justify-content: center;
	padding: 4px 24px;
	border-radius: 8px;
	/* Figma: #FF3251, không phải #E8354A. */
	background: #FF3251;
	color: #FFFFFF !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:last-child a{
	color: #FFFFFF !important;
	text-decoration: none;
}

/* LƯU Ý selector tiêu đề thẻ:
 *
 * redesign-chung.css khai cho MỌI thẻ bài viết
 *     body .lb-explore .fusion-post-cards > ul > li > .fusion-column-wrapper
 *       :has(> .fusion-post-card-image) > .fusion-title > *   (0,5,3) !important
 * và từ khi font được gom về token, rule đó trỏ vào --lb-font-sans.
 *
 * Newsroom cần SERIF, nên rule ở đây phải mang đúng hình dạng ấy cộng thêm
 * .fusion-grid-1 / .fusion-grid-3 để hơn một lớp. Viết dạng `.fusion-title h4`
 * chỉ hoà điểm (0,5,3) — hoà thì thắng thua do thứ tự nạp, mong manh.
 */

/* ---------------------------------------------------------- Lưới 3 bài viết

 Số đo đọc từ bảng Layout của Figma:

   Frame 511  section            nền #F8F8F8, viền trên 1px #1B1B38 @10%
   Frame 37   ảnh thẻ            386 x 219
   Frame 36   khối chữ           386 x 308, đệm 0/24/8/24, gap 8
   414-3800   mô tả              338 x 120, Google Sans Flex 400, 16/24, #676673
   suy ra     thẻ                386 x 527, khe cột 24

 Hàng nội dung của site là 1200 (Avada khoá .fusion-row max-width), Figma là
 1202, nên thẻ ra 384 thay vì 386. Chênh 2px, không bù bằng CSS.
*/

/*
 * Khe cột: element đã khai column_spacing/row_spacing = 24 nhưng
 * redesign-chung.css khoá `body .lb-explore .fusion-post-cards > ul{gap:32px}`
 * nên giá trị trong builder không có tác dụng — sửa ở builder mà không đổi gì
 * là kiểu hỏng dễ mất thời gian nhất.
 */
body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards{
	gap: 24px !important;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper{
	/*
	 * Node 414-3792 "Card": 386 x 543 (hug), bo 16, viền 1px #0F0F2E @20%,
	 * nền trắng, gap 16 giữa ảnh và khối chữ.
	 *
	 * Lượt trước tôi đọc nhầm từ ảnh chụp là "không viền, không bo" — nền
	 * #F8F8F8 của section quá gần trắng nên viền 20% gần như không thấy ở mức
	 * thu nhỏ. Số trong bảng Layout mới là số đúng.
	 */
	background: #FFFFFF;
	border: 1px solid rgba(15, 15, 46, .2) !important;
	border-radius: 16px !important;
	overflow: hidden;
	padding: 0 24px 8px !important;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* Gap 16 là khoảng ảnh -> khối chữ; trong khối chữ Figma dùng gap 8. */
	gap: 8px;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper > .fusion-post-card-image{
	/* Tràn hết bề ngang thẻ (bù đệm 24 mỗi bên), cách khối chữ 16 như Figma. */
	margin: 0 -24px 8px !important;
	/* Figma 386 x 219. !important vi redesign-chung.css khoa 378/193. */
	aspect-ratio: 386 / 219 !important;
}

/* Khối chữ của Figma là auto-layout gap 8 — bỏ mọi margin rời rạc. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:not(.fusion-post-card-image){
	margin: 0 !important;
	/*
	 * Post Card design khai padding_left/right 20px cho các khối chữ, Avada
	 * quy ra 12px — nhưng KHÔNG khai cho khối chuyên mục. Hệ quả: chuyên mục
	 * bắt đầu ở 24, còn ngày / tiêu đề / mô tả / "Đọc tiếp" bắt đầu ở 36.
	 *
	 * Lề trái của thẻ do đệm 24 của khối chữ quyết định (Figma), nên mọi khối
	 * con phải là 0. Đặt ở đây thay vì sửa từng khối trong design để thêm bớt
	 * khối sau này không phải nhớ chỉnh lại.
	 */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Nhãn chuyên mục: chữ nhỏ đỏ, cách ảnh 16 (đệm trên của khối chữ). */
body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > div:nth-child(2){
	margin-top: 16px !important;
	height: auto !important;
	/* Node 414-3797: Google Sans Flex Medium 500, 13.33px, lh 100%, #FF3251. */
	font-size: 13.33px !important;
	font-weight: 500 !important;
	line-height: 18px !important;
	color: #FF3251 !important;
	overflow: hidden;
}

/*
 * Clamp phải đặt trên <p> BÊN TRONG, không phải trên .fusion-text.
 *
 * Chữ chuyên mục nằm trong <p>; đặt -webkit-box ở vỏ thì Avada đè lại bằng
 * `display: flow-root` và chỉ còn overflow:hidden — dòng thứ ba bị xén ngang
 * thân chữ, không có dấu ba chấm, trông như lỗi căn lề chứ không ai nghĩ tới
 * display. Đây là lần thứ ba cùng một cái bẫy trong file này.
 */
body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > div:nth-child(2) p{
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper:has(> .fusion-post-card-image) > .fusion-title > *{
	/*
	 * Node 414-3799: Source Serif 4, Medium 500, 20px, #000000, khung 338x54.
	 * 54 / 2 dòng = 27 mỗi dòng.
	 *
	 * Thẻ lưới dùng SERIF giống thẻ nổi bật, không phải sans — trước đây tôi
	 * đặt sans 20/28 weight 700 màu #1B1B38, sai cả bốn giá trị.
	 */
	font-family: var(--lb-font-serif)!important;
	font-size: 20px !important;
	line-height: 27px !important;
	font-weight: 500 !important;
	color: #000000 !important;
	/*
	 * Chừa 3 dòng, không phải 2. Tiêu đề dài đúng 3 dòng bị cắt mất dòng cuối
	 * và phần bị cắt vẫn chiếm chỗ, nên trông như tiêu đề đè lên mô tả.
	 */
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Ngày: Figma 16px, cùng cỡ với mô tả. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:nth-child(3){
	font-size: 16px !important;
	line-height: 24px !important;
	color: #676673 !important;
}

/* Mô tả: Figma 338 x 120 = đúng 5 dòng 24px; thực tế in 4 dòng. */
body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards .fusion-title + .fusion-text{
	display: -webkit-box !important;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px !important;
	line-height: 24px !important;
	color: #676673 !important;
}

/*
 * Nút "Đọc tiếp" — node 414-3801, component Buttons (type=Outline, icon=On Right).
 *
 *   Khung   93 x 44, bo 8, padding dọc 12, gap 8, viền 2px #000000 @ 0%
 *   Nhãn    Google Sans Flex Medium 500, 16px, line-height 100% (ô chữ 65 x 20)
 *   Icon    chevron-right 20 x 20, #FF3251
 *
 * Trước đó Avada in ra một khối .fusion-text chiếm trọn 329px, cao 38, chữ
 * weight 600 line-height 21.6 — sai cả khung lẫn chữ. Viền trong suốt vẫn phải
 * khai báo: Figma để 0% nhưng nó nằm INSIDE nên không cộng vào 44px, box-sizing
 * border-box giữ đúng chiều cao.
 */
body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:last-child{
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box;
	width: 93px;
	max-width: 93px;
	height: 44px;
	margin-top: auto !important;
	padding: 12px 0 !important;
	border: 2px solid transparent;
	border-radius: 8px;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: #FF3251 !important;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:last-child p{
	margin: 0;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: #FF3251 !important;
	white-space: nowrap;
	/*
	 * KHÔNG dùng word-spacing để nới khoảng cách trước "›".
	 *
	 * Figma tách nhãn và icon bằng gap 8, nhưng ở đây "›" là KÝ TỰ nằm chung một
	 * <p> nên không có gap để đặt. word-spacing: 4px thì nới ĐÚNG, nhưng nới cả
	 * dấu cách giữa "Đọc" và "tiếp" — nhãn hiện ra là "Đọc  tiếp ›", trông như
	 * lỗi font chứ không ai nghĩ tới word-spacing. Dấu ngăn là &nbsp; còn dấu
	 * kia là space thường, CSS không phân biệt được hai cái.
	 *
	 * Muốn đúng 8px thì phải sửa NỘI DUNG thẻ trong Post Card design 21630 cho
	 * chỉ còn "Đọc tiếp", rồi vẽ chevron 20x20 bằng ::after với margin-left: 8px.
	 */
	word-spacing: normal;
}

body .lb-explore .fusion-post-cards > ul.fusion-grid-3.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:last-child a{
	color: #FF3251 !important;
}

/* -------------------------------------------------------------- Phân trang

 Figma vẽ dải phân trang CĂN GIỮA, mỗi mục là ô vuông 32x32 bo 8 nền trắng
 viền nhạt; trang hiện tại nền đỏ chữ trắng; hai đầu là mũi tên ‹ › cũng là ô
 vuông, và dấu … ở chỗ đứt quãng.

 Avada in ra: căn trái, ô 30x30 không bo, và nút sau là CHỮ "Tiếp theo" dài 63px
 chứ không phải mũi tên. Element Post Cards có 122 tham số nhưng không có tham
 số nào tạo kiểu cho phân trang, nên phần này buộc phải nằm ở CSS.
*/

body .lb-explore .fusion-post-cards .pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

body .lb-explore .fusion-post-cards .pagination > *{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	margin: 0 !important;
	border: 1px solid rgba(15, 15, 46, .2);
	border-radius: 8px;
	background: #FFFFFF;
	color: #1B1B38 !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

body .lb-explore .fusion-post-cards .pagination > a:hover{
	border-color: #FF3251;
	color: #FF3251 !important;
}

body .lb-explore .fusion-post-cards .pagination .current{
	background: #FF3251 !important;
	border-color: #FF3251;
	color: #FFFFFF !important;
}

/*
 * Nút trước/sau: Figma chỉ vẽ mũi tên. Giấu chữ bằng font-size 0 rồi in mũi tên
 * qua ::before — không xoá được chữ vì nó là nội dung do Avada sinh, và giữ lại
 * cũng tốt cho trình đọc màn hình nếu sau này đổi sang clip thay vì font-size.
 */
body .lb-explore .fusion-post-cards .pagination .pagination-prev,
body .lb-explore .fusion-post-cards .pagination .pagination-next{
	font-size: 0 !important;
	padding: 0;
	width: 32px;
}

body .lb-explore .fusion-post-cards .pagination .pagination-prev::before{
	content: "\2039";
	font-size: 18px;
	line-height: 1;
}

body .lb-explore .fusion-post-cards .pagination .pagination-next::before{
	content: "\203A";
	font-size: 18px;
	line-height: 1;
}

body .lb-explore .fusion-post-cards .pagination .pagination-dots{
	border: 0;
	background: none;
	min-width: 16px;
	padding: 0;
}

/* ------------------------------------------------- Dải chip lọc bài viết */

/*
 * Số đo lấy từ Figma "Newsroom": chip cao 37, bo 20, viền #E4E4EC, chữ 12,5
 * đậm 600, khoảng cách 8. Chip đang chọn nền #1B1B38 chữ trắng.
 */
.lb-nrf{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.lb-nrf--right{
	justify-content: flex-end;
	gap: 7px;
}

.lb-nrf__chip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--lb-nrf-mau, #E4E4EC);
	border-radius: 20px;
	background: #FFFFFF;
	color: var(--lb-nrf-mau, #4A4A5C);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}

/*
 * Chip màu đơn vị: Figma vẽ hộp bo 10 (không phải viên thuốc), nền phớt màu
 * viện, chữ đậm 700.
 *
 * KHÔNG dùng opacity để báo "chưa có bài": làm mờ cả năm chip khiến hàng này
 * trông như biến mất ngay cả lúc đang chọn "Tất cả", mà đó lại là trạng thái
 * mặc định của trang. Dấu hiệu chuyển sang viền nét đứt — thấy rõ nhưng không
 * ăn vào độ đọc.
 *
 * Chữ dùng màu viện đã pha tối 22% về phía #1B1B38. Màu nguyên bản của LCCI
 * (#FBAC02 vàng cam) và LISA (#2CD17F xanh lá) đặt trên nền trắng có độ tương
 * phản dưới ngưỡng đọc được; pha tối giữ đúng sắc mà vẫn đọc rõ.
 */
.lb-nrf__chip[style*="--lb-nrf-mau"]{
	border-radius: 10px;
	/* Cột phải chỉ rộng 1/3 hàng; đệm 18 làm chip Group rơi xuống dòng riêng. */
	padding: 9px 13px;
	font-weight: 700;
	color: color-mix(in srgb, var(--lb-nrf-mau) 78%, #1B1B38);
	background: color-mix(in srgb, var(--lb-nrf-mau) 9%, #FFFFFF);
	border-color: color-mix(in srgb, var(--lb-nrf-mau) 26%, #FFFFFF);
}

.lb-nrf__chip[style*="--lb-nrf-mau"]:hover{
	color: color-mix(in srgb, var(--lb-nrf-mau) 70%, #1B1B38);
	background: color-mix(in srgb, var(--lb-nrf-mau) 16%, #FFFFFF);
	border-color: color-mix(in srgb, var(--lb-nrf-mau) 45%, #FFFFFF);
}

/*
 * Đang chọn: nền đậm thêm và viền đặc 2px, KHÔNG đổi sang chữ trắng. Chữ trắng
 * trên nền #FBAC02 hay #2CD17F là không đọc được — mà đó đúng là trạng thái
 * khách nhìn lâu nhất sau khi bấm.
 */
.lb-nrf__chip[style*="--lb-nrf-mau"].lb-nrf__chip--chon,
.lb-nrf__chip[style*="--lb-nrf-mau"].lb-nrf__chip--chon:hover{
	color: color-mix(in srgb, var(--lb-nrf-mau) 62%, #1B1B38);
	background: color-mix(in srgb, var(--lb-nrf-mau) 20%, #FFFFFF);
	border-color: var(--lb-nrf-mau);
	box-shadow: inset 0 0 0 1px var(--lb-nrf-mau);
}

/*
 * Term chưa có bài nào: viền nét đứt thay cho làm mờ. Vẫn đọc rõ, vẫn đúng màu
 * thiết kế, nhưng nhìn là biết chưa có nội dung.
 */
.lb-nrf__chip--trong{
	border-style: dashed;
}

/* Lời nhắn khi lọc ra rỗng — chiếm trọn hàng dưới dải chip. */
.lb-nrf__trong{
	flex: 1 0 100%;
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #5A5A6E;
}

.lb-nrf__trong a{
	color: #FF3251;
	font-weight: 600;
}

.lb-nrf__chip:hover{
	border-color: var(--lb-nrf-mau, #1B1B38);
	color: var(--lb-nrf-mau, #1B1B38);
}

.lb-nrf__chip--chon,
.lb-nrf__chip--chon:hover{
	background: var(--lb-nrf-mau, #1B1B38);
	border-color: var(--lb-nrf-mau, #1B1B38);
	color: #FFFFFF;
}

/* Số bài của mỗi term. Figma không vẽ, nhưng không có nó thì khách bấm vào một
   chuyên mục có 1 bài mà không biết trước — và cũng không phân biệt được
   "lọc ra ít" với "lọc hỏng". */
.lb-nrf__dem{
	font-size: 11px;
	font-weight: 600;
	opacity: .55;
}

.lb-nrf__chip--chon .lb-nrf__dem{
	opacity: .75;
}

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 900px){
	body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper{
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}

	body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > .fusion-post-card-image{
		grid-column: 1 !important;
		grid-row: auto !important;
		height: auto !important;
		min-height: 0;
		aspect-ratio: 16 / 9 !important;
	}

	body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards > li > .fusion-column-wrapper > *:not(.fusion-post-card-image){
		grid-column: 1 !important;
	}

	body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards .fusion-title h1,
	body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards .fusion-title h2,
	body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards .fusion-title h3,
	body .lb-explore .fusion-post-cards > ul.fusion-grid-1.fusion-grid-posts-cards .fusion-title h4{
		font-size: 22px !important;
	}
}