/*
 * Bố cục trang (inc/page-layout.php) — nền đổi được của từng khối và dải
 * "khối đang ẩn" chỉ admin thấy. Chỉ dùng token theme.json.
 */

/* Nền chọn trong "Bố cục trang". !important vì CSS riêng của từng khối
   (nền sóng, ảnh mask…) đặt background bằng selector cụ thể hơn — admin
   đã chọn nền khác thì nền đó phải thắng. */
.tri-blk-bg {
	background: var(--tri-blk-bg, transparent) !important;
}

.tri-blk-bg--image {
	background:
		linear-gradient(
			color-mix(in srgb, var(--wp--preset--color--navy) calc(var(--tri-blk-ov, 0) * 100%), transparent),
			color-mix(in srgb, var(--wp--preset--color--navy) calc(var(--tri-blk-ov, 0) * 100%), transparent)
		),
		var(--tri-blk-img) center / cover no-repeat !important;
}

/* Nền tối → chữ sáng cho tiêu đề / mô tả của khối. Thẻ con có màu riêng
   (nút, thẻ trắng) giữ nguyên. */
.tri-blk-bg--dark,
.tri-blk-bg--dark > .tri-h,
.tri-blk-bg--dark > .tri-sub,
.tri-blk-bg--dark > .tri-wrap > .tri-h,
.tri-blk-bg--dark > .tri-wrap > .tri-sub,
.tri-blk-bg--dark .tri-h .tri-accent {
	color: var(--wp--preset--color--white);
}

/* ── Dải "khối đang ẩn" (chỉ người sửa được nội dung thấy) ─────────── */
.tri-lay-hidden {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 8px auto;
	max-width: 1200px;
	width: calc(100% - 32px);
	padding: 8px 16px;
	border: 1px dashed var(--wp--preset--color--sky);
	border-radius: 8px;
	background: color-mix(in srgb, var(--wp--preset--color--ice) 30%, transparent);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
}

.tri-lay-hidden__btn {
	border: 0;
	border-radius: 999px;
	padding: 4px 14px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font: inherit;
	cursor: pointer;
}

.tri-lay-hidden__btn:hover {
	background: var(--wp--preset--color--navy-hover);
}