/*
 * RETI — trang con (mọi trang trừ trang chủ). Nghiệm thu lần 1, TKT-002.
 *
 * 1. HEADER TRẮNG. "Không dùng header này nữa, dùng giống thanh menu ở trang
 *    retian màu trắng. Nội dung giữ nguyên, chỉ đổi style với màu; bỏ mấy cái
 *    mail, call ở đầu."
 *
 *    Header của RETI là part `header-transparent`: trong suốt đè lên hero ở
 *    trang chủ, còn trang con thì global styles đổ nền `fg` (xám đậm) bằng
 *    `body:not(.home) .nd-header--transparent`. Trang chủ giữ nguyên. Ở đây chỉ
 *    đổi màu và cỡ — logo, sáu mục menu, nút "Nhận tư vấn" vẫn là những khối cũ
 *    trong part, không ai phải mở Site Editor.
 *
 *    Mọi lời chọn mở đầu bằng `body:not(.home) .nd-header.nd-header--transparent`
 *    để nặng hơn luật của nd-base (`.nd-header--transparent a`) và của global
 *    styles — không cần !important.
 *
 * 2. TRANG BÀI VIẾT hai cột như retian.vn (template single-post của plugin).
 * 3. THẺ DỰ ÁN ở trang lưu trữ (template archive-nd_project của plugin).
 */

body:not(.home) .nd-header.nd-header--transparent {
	position: relative;
	background-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--fg-strong);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* Dải scrim chỉ cần khi chữ trắng nằm trên ảnh. */
body:not(.home) .nd-header.nd-header--transparent::before {
	content: none;
}

body:not(.home) .nd-header.nd-header--transparent .nd-header__topbar {
	display: none;
}

body:not(.home) .nd-header.nd-header--transparent .nd-header__row {
	min-block-size: 4.5rem;
}

body:not(.home) .nd-header.nd-header--transparent .wp-block-navigation {
	font-size: var(--wp--preset--font-size--body);
}

body:not(.home) .nd-header.nd-header--transparent .wp-block-navigation a,
body:not(.home) .nd-header.nd-header--transparent .wp-block-navigation__responsive-container-open,
body:not(.home) .nd-header.nd-header--transparent .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--fg-strong);
}

body:not(.home) .nd-header.nd-header--transparent .wp-block-navigation a {
	font-weight: 500;
}

body:not(.home) .nd-header.nd-header--transparent .wp-block-navigation a:hover,
body:not(.home) .nd-header.nd-header--transparent .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--brand);
}

body:not(.home) .nd-header.nd-header--transparent .nd-header__cta .wp-block-button__link {
	min-block-size: 2.75rem;
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--fg-on-brand);
}

body:not(.home) .nd-header.nd-header--transparent :where(a, button):focus-visible {
	outline-color: var(--wp--custom--color--focus);
}

/* ------------------------------------------------------------------ *
 * Trang bài viết
 * ------------------------------------------------------------------ */

.reti-bai-viet .reti-chuyen-muc {
	color: var(--wp--preset--color--fg);
}

.reti-bai-viet .reti-chuyen-muc a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.reti-bai-viet .reti-chuyen-muc a:hover {
	text-decoration: underline;
}

.reti-bai-viet .wp-block-post-featured-image img {
	border-radius: inherit;
}

.reti-bai-lien-quan .wp-block-post-title a {
	color: var(--wp--preset--color--fg-strong);
	text-decoration: none;
}

.reti-bai-lien-quan .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

.reti-bai-lien-quan .wp-block-post-featured-image {
	margin: 0;
}

/* Cột phải bám theo khi cuộn bài dài, chỉ trên màn đủ rộng để có hai cột. */
@media (min-width: 782px) {
	.reti-bai-viet > .wp-block-column:last-child {
		align-self: flex-start;
		position: sticky;
		inset-block-start: var(--wp--preset--spacing--md);
	}
}

/* ------------------------------------------------------------------ *
 * Thẻ dự án ở trang lưu trữ
 * ------------------------------------------------------------------ */

.reti-the-du-an {
	block-size: 100%;
}

.reti-the-du-an .wp-block-post-featured-image {
	align-self: stretch;
}

/* "• 06/10/2026" — chấm xanh trước ngày, theo mẫu khách gửi. */
.reti-ngay-cham {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	font-weight: 500;
}

.reti-ngay-cham::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-cool);
	flex: none;
}

.reti-the-du-an .wp-block-post-title a {
	color: var(--wp--preset--color--fg-strong);
	text-decoration: none;
}

.reti-the-du-an .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

/* Đẩy nút xuống đáy thẻ để các nút trong một hàng thẳng nhau. */
.reti-nut-chi-tiet.wp-block-read-more {
	margin-block-start: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--fg-on-brand);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.reti-nut-chi-tiet.wp-block-read-more:hover {
	background-color: color-mix(in oklab, var(--wp--preset--color--brand) 85%, var(--wp--preset--color--fg-strong));
	color: var(--wp--preset--color--fg-on-brand);
}

.reti-nut-chi-tiet.wp-block-read-more:focus-visible {
	outline: 2px solid var(--wp--custom--color--focus);
	outline-offset: 2px;
}