/*
 * Bài viết: trang đọc, lưới bài, mục lục, chuyên mục, 404
 *
 * Tách từ main.css (10/2026). Thứ tự nạp: inc/enqueue.php → tri_css_parts().
 */

.tri-404 {
	min-height: 40vh;
}

.tri-article {
	padding-block: 40px 8px;
}

.tri-article__head {
	position: relative;
	margin: 0 0 28px;
	padding: 22px 22px 20px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ice) 70%, var(--wp--custom--color--rule));
	border-radius: var(--wp--custom--radius--card);
	background:
		linear-gradient(
			165deg,
			var(--wp--preset--color--white) 0%,
			var(--wp--custom--color--band) 48%,
			color-mix(in srgb, var(--wp--preset--color--ice) 55%, white) 100%
		);
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent) inset,
		0 12px 32px rgba(9, 31, 91, 0.1);
}

.tri-article__head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 22px;
	right: 22px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--navy),
		var(--wp--preset--color--royal),
		var(--wp--preset--color--orange)
	);
}

@media (min-width: 768px) {
	.tri-article__head {
		padding: 28px 32px 28px;

	}

	.tri-article__head::before {
		left: 32px;
		right: 32px;

	}
}

.tri-article__head .tri-article__cover {
	margin-bottom: 0;
}

.tri-article__head .tri-article__desc {
	margin-bottom: 18px;
}

.tri-article__head .tri-article__cover:last-child,
.tri-article__head .tri-article__title:last-child,
.tri-article__head .tri-article__desc:last-child {
	margin-bottom: 0;
}

.tri-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--wp--custom--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

.tri-article__meta-label {
	margin-right: 6px;
	color: var(--wp--custom--color--ink-mid);
	font-size: var(--tri-text-12);
	font-weight: var(--wp--custom--font--weight-medium);
}

.tri-article__author {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.tri-article__author-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ice);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--tri-text-13);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent) inset;
}

a.tri-article__author-pill:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ice) 70%, var(--wp--preset--color--royal));
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.tri-article__dot {
	opacity: 0.5;
}

.tri-article__title {
	margin: 0 0 12px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: clamp(26px, 4vw, 38px);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: var(--wp--custom--line-height--display);
}

.tri-article__desc {
	margin: 0 0 20px;
	max-width: 52rem;
	color: var(--wp--custom--color--ink);
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.55;
}

.tri-article__cover {
	margin: 0 0 28px;
}

.tri-article__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
}

/* Nội dung bài là khối Gutenberg của 1.757 bài nhập từ site cũ — không
   kiểm soát được markup, nên chỉ đặt nhịp đọc rồi để nó tự chảy. */
.tri-article__body {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
}

.tri-article__body > * + * {
	margin-top: 1em;
}

.tri-article__body h2,
.tri-article__body h3,
.tri-article__body h4 {
	margin-top: 1.6em;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: var(--wp--custom--line-height--display);
}

.tri-article__body h2 {
	 font-size: clamp(20px, 2.6vw, 26px); 
}

.tri-article__body h3 {
	 font-size: clamp(18px, 2.2vw, 21px); 
}

.tri-article__body h4 {
	 font-size: var(--tri-text-17); 
}

.tri-article__body a {
	color: var(--wp--preset--color--royal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tri-article__body img,
.tri-article__body video {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--control);
}

/* Iframe dán tay (Google Form, bảng, bản đồ…): GIỮ chiều cao ghi trong thẻ
   (height="3779") — trước đây chung luật height:auto với ảnh nên iframe co
   về 150px, chỉ còn một đoạn ngắn. Bề ngang co theo cột bài. Video YouTube / Vimeo không ghi đúng
   tỉ lệ thì giữ khung 16:9. */
.tri-article__body iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
}

.tri-article__body iframe[src*="youtube.com"],
.tri-article__body iframe[src*="youtu.be"],
.tri-article__body iframe[src*="vimeo.com"] {
	height: auto;
	aspect-ratio: 16 / 9;
}

.tri-article__body ul,
.tri-article__body ol {
	padding-left: 22px;
}

.tri-article__body li + li {
	margin-top: 6px;
}

.tri-article__body blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var(--wp--preset--color--sky);
	color: var(--wp--custom--color--ink);
}

/* Bảng so sánh xuất hiện nhiều trong bài cũ và thường rộng hơn khung đọc,
   nên cho nó tự cuộn ngang thay vì đẩy vỡ cả trang. */
.tri-article__body table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.tri-article__body th,
.tri-article__body td {
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--sky);
	text-align: left;
	vertical-align: top;
}

.tri-article__body th {
	background: var(--wp--preset--color--ice);
	font-weight: var(--wp--custom--font--weight-strong);
}

.tri-article__body figure {
	margin-inline: 0;
}

/* Bài cũ nhúng JSON-LD trong thẻ script; trình duyệt không vẽ, nhưng chặn
   sẵn phòng trường hợp reset nào đó làm nó hiện thành chữ. */
.tri-article__body script,
.tri-article__body style {
	display: none;
}

.tri-article__pages {
	display: flex;
	gap: 8px;
	margin-top: 24px;
}

/* ── Khối mời tư vấn cuối bài ── */
.tri-post-cta {
	padding-block: 8px 40px;
}

.tri-post-cta__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: min(760px, var(--tri-frame));
	margin-inline: auto;
	padding: 28px 24px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	text-align: center;
}

.tri-post-cta__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: clamp(19px, 2.6vw, 24px);
	font-weight: var(--wp--custom--font--weight-strong);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
}

.tri-post-cta__text {
	margin: 0;
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	opacity: 0.9;
}

/* ── Lưới bài viết ── */
.tri-post-list {
	padding-block: 36px;
}

.tri-post-list__more {
	margin: 24px 0 0;
	text-align: center;
}

/* ── Đầu trang chuyên mục / tìm kiếm ── */
.tri-archive__head {
	margin-bottom: 24px;
	text-align: center;
}

.tri-archive__search {
	max-width: 420px;
	margin: 20px auto 0;
}

@media (min-width: 1025px) {
	.tri-article {
		padding-block: 56px 8px;

	}

	.tri-post-cta__box {
		padding: 36px 40px;

	}
}

/* ── Mục lục bài viết ── */
.tri-toc {
	margin: 0 0 28px;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--sky);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--ice);
}

.tri-toc__head {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font--weight-strong);
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

/* Bỏ mũi tên mặc định của <details> rồi tự vẽ, để nó xoay theo trạng thái
   gập/mở giống các khối gập khác trong theme. */
.tri-toc__head::-webkit-details-marker {
	display: none;
}

.tri-toc__head::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--wp--custom--motion--duration-mid) ease;
}

.tri-toc[open] .tri-toc__head::after {
	transform: translateY(2px) rotate(-135deg);
}

.tri-toc__nav {
	margin-top: 12px;
}

.tri-toc__list {
	margin: 0;
	padding-left: 20px;
	counter-reset: tri-toc;
	list-style: none;
}

.tri-toc__item {
	position: relative;
	margin-top: 8px;
	line-height: 1.45;
}

.tri-toc__item--h2 {
	counter-increment: tri-toc;
	font-size: var(--wp--preset--font-size--small);
}

.tri-toc__item--h2::before {
	content: counter(tri-toc) ".";
	position: absolute;
	left: -20px;
	color: var(--wp--preset--color--royal);
	font-family: var(--wp--preset--font-family--beau-sans);
	font-weight: var(--wp--custom--font--weight-ui);
}

.tri-toc__item--h3 {
	margin-left: 14px;
	font-size: var(--tri-text-13);
}

.tri-toc__item--h3::before {
	content: "–";
	position: absolute;
	left: -14px;
	opacity: 0.5;
}

.tri-toc__item a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.tri-toc__item a:hover,
.tri-toc__item a:focus-visible {
	color: var(--wp--preset--color--royal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Nhảy tới neo mà không bị header dính che mất tiêu đề. */
.tri-article__body :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--tri-adminbar) + var(--tri-header-h) + 16px);
}

/* Trên điện thoại, bài 22 mục thì mục lục đẩy nội dung xuống rất sâu.
   Giới hạn chiều cao rồi cho cuộn trong khung, thay vì gập sẵn: gập sẵn
   bằng CSS phải đảo ngược trạng thái [open], làm nút bấm hành xử ngược
   với cái nó hiển thị. */
@media (max-width: 767px) {
	.tri-toc__nav {
		max-height: 260px;
		overflow-y: auto;
		overscroll-behavior: contain;

	}
}

.tri-article__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}

/* Dưới 1200px vẫn một cột (TOC 3 cột cần chỗ); giữ bề ngang dễ đọc trong --tri-frame. */
@media (max-width: 1199px) {
	.tri-article__wrap {
		width: min(760px, var(--tri-frame), calc(100% - 32px));

	}
}

@media (min-width: 1200px) {
	.tri-article__wrap {
		width: var(--tri-frame);
		/*
		 * 8 cột trong --tri-frame (TOC 2 + main 4 + aside 2), gap = gutter.
		 * Tránh clamp/px cố định (240/260/36) — khi resize 2K→1920→1440
		 * cột phải không “mất pixel” vì không còn neo vw/px cứng.
		 * --tri-article-col = 1/8 shell sau 7 gutter nội bộ (cùng idiom marquee/press).
		 */
		--tri-article-col: calc((100% - 7 * var(--tri-grid-gutter)) / 8);
		grid-template-columns:
			minmax(0, calc(2 * var(--tri-article-col) + var(--tri-grid-gutter)))
			minmax(0, 1fr)
			minmax(0, calc(2 * var(--tri-article-col) + var(--tri-grid-gutter)));
		column-gap: var(--tri-grid-gutter);
		align-items: start;

	}

	.tri-article__head {
		grid-column: 2;
		grid-row: 2;

	}

	.tri-article__body {
		grid-column: 2;
		grid-row: 3;

	}

	/* Hai cột bên trải suốt các hàng giữa — sticky cần vùng chứa cao hơn hộp. */
	.tri-article__toc {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: stretch;

	}

	.tri-article__aside {
		grid-column: 3;
		grid-row: 1 / span 3;
		align-self: stretch;

	}

	.tri-article__toc > .tri-toc,
		.tri-article__aside-inner {
		position: sticky;
		top: calc(var(--tri-adminbar) + var(--tri-header-h) + 16px);

	}

	/* Cột phải: sticky + cuộn nội bộ khi promo + giới thiệu cao hơn viewport.
		   Padding giữ bóng/viền/pulse scale nằm trong khung — overflow:auto cắt
		   ink overflow (shadow, transform) nếu sát mép 0. */
	.tri-article__aside-inner {
		box-sizing: border-box;
		max-height: calc(100vh - var(--tri-adminbar) - var(--tri-header-h) - 32px);
		max-height: calc(100dvh - var(--tri-adminbar) - var(--tri-header-h) - 32px);
		padding: 4px 8px 12px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;

	}

	/* Chỉ DANH SÁCH cuộn, không cuộn cả khối: dòng "Nội dung bài viết" và
		   nút gập luôn nhìn thấy, biết ngay mình đang ở đâu. */
	.tri-article__toc .tri-toc__nav {
		max-height: calc(100vh - var(--tri-adminbar) - var(--tri-header-h) - 84px);
		overflow-y: auto;
		overscroll-behavior: contain;

	}

	/* Trong cột hẹp thì bỏ nền và viền của mục lục cho nhẹ mắt, giữ lại
		   một vạch dọc làm ranh giới. */
	.tri-article__toc > .tri-toc {
		padding: 0 0 0 14px;
		border: 0;
		border-left: 2px solid var(--wp--preset--color--sky);
		border-radius: 0;
		background: transparent;

	}

	.tri-article__toc .tri-toc__head {
		font-size: var(--tri-text-12);
		letter-spacing: 0.02em;

	}
}

/* Mục đang đọc — do assets/js/toc.js gắn vào.
   Chỉ đổi MÀU, không đổi độ đậm. Chữ đậm rộng hơn chữ thường nên chỗ cắt
   hai dòng nhảy sang vị trí khác mỗi lần mục được chọn, nhìn giật giật.
   (Chiều cao thì không đổi vì line-clamp đã chặn, nhưng chỗ cắt thì có.) */
.tri-toc__item--dang-doc > a {
	color: var(--wp--preset--color--orange);
}

/* Số thứ tự và gạch đầu dòng cũng đổi màu theo cho cùng một khối. */
.tri-toc__item--dang-doc.tri-toc__item--h2::before,
.tri-toc__item--dang-doc.tri-toc__item--h3::before {
	color: var(--wp--preset--color--orange);
	opacity: 1;
}

/* Cột phải bài viết: xếp promo + giới thiệu bằng flex/gap — không chồng
   lên nhau, không dựa margin-top (tránh dính/đè khi sticky + overflow). */
.tri-article__aside-inner {
	display: flex;
	flex-direction: column;
	gap: var(--tri-grid-gutter);
	min-width: 0;
}

/* ── Mục lục: cắt chữ dài và làm gọn thanh cuộn ─────────────────────── */
/* Tiêu đề bài cũ có cái dài tới 60–70 ký tự, để tự xuống dòng thì mỗi mục
   chiếm 3 dòng và 22 mục thành một cột dài lê thê. Cắt còn 2 dòng kèm dấu
   ba chấm; chữ đầy đủ vẫn xem được qua title= khi rê chuột. */
/* Cắt gọn một dòng, không xuống dòng.
   22 mục mà mỗi mục 2 dòng thì danh sách vẫn dài gấp đôi cần thiết. Một
   dòng cho mọi mục cao bằng nhau, nhìn thành một cột đều đặn.
   Chữ đầy đủ vẫn đọc được: rê chuột lên là hiện title. */
.tri-toc__item > a {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Thanh cuộn mảnh và nhạt, thay cho thanh mặc định của hệ điều hành.
   scrollbar-width dùng cho Firefox và Chrome mới; khối ::-webkit-* bên
   dưới lo cho Safari và Chrome cũ. Trình duyệt nào không hiểu thì vẫn có
   thanh cuộn bình thường, chỉ là không gọn bằng. */
.tri-article__toc .tri-toc__nav,
.tri-article__aside-inner {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--sky) transparent;
}

.tri-article__toc .tri-toc__nav::-webkit-scrollbar,
.tri-article__aside-inner::-webkit-scrollbar {
	width: 6px;
}

.tri-article__toc .tri-toc__nav::-webkit-scrollbar-track,
.tri-article__aside-inner::-webkit-scrollbar-track {
	background: transparent;
}

.tri-article__toc .tri-toc__nav::-webkit-scrollbar-thumb,
.tri-article__aside-inner::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: var(--wp--preset--color--sky);
}

.tri-article__toc .tri-toc__nav:hover::-webkit-scrollbar-thumb,
.tri-article__aside-inner:hover::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--royal);
}

/* Mờ dần ở mép dưới để thấy ngay là còn nội dung phía dưới. toc.js gỡ lớp
   mờ này khi đã cuộn tới đáy, nếu không thì mục cuối cùng lúc nào cũng bị
   mờ một nửa dù không còn gì để cuộn nữa. */
@media (min-width: 1200px) {
	.tri-article__toc .tri-toc__nav {
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);

	}

	.tri-article__toc .tri-toc__nav.tri-toc__nav--het-cuon {
		-webkit-mask-image: none;
		mask-image: none;

	}
}

/* -- Trang bài: khối điều hướng theo khu (template-parts/post-khu-nav.php) */
.tri-article-khu {
	margin-bottom: 24px;
}

.tri-article-khu__title {
	margin: 0 0 10px;
	font-size: var(--tri-text-15);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tri-article-khu__title a {
	color: var(--wp--preset--color--navy, #091f5b);
	text-decoration: none;
}

.tri-article-khu__title a:hover {
	color: var(--wp--preset--color--action, #0053d1);
}