.semantic-hub-links,
.semantic-related-links {
	--sil-accent: #b8ff3d;
	--sil-ink: #15171a;
	clear: both;
	position: relative;
	isolation: isolate;
	z-index: 3;
	margin: 1.5rem 0;
	padding: 1rem 1.1rem 1.1rem;
	overflow: hidden;
	border: 1px solid #e2e5df;
	border-radius: 14px;
	background: #f7f8f4;
	box-shadow: 0 8px 24px rgba(21, 23, 26, .045);
}
.semantic-hub-links::before,
.semantic-related-links::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--sil-accent);
}
.semantic-links-title {
	margin: 0 0 .75rem !important;
	color: var(--sil-ink);
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	font-weight: 750;
	line-height: 1.35;
	letter-spacing: .01em;
}
.semantic-links-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.semantic-related-item {
	position: relative;
	min-width: 0;
	margin: 0 !important;
	padding: .68rem 2rem .68rem .85rem;
	border: 1px solid rgba(21, 23, 26, .1);
	border-radius: 10px;
	background: #fff;
	font-size: .96rem;
	line-height: 1.35;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.semantic-related-item::after {
	content: "↗";
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	color: #68717a;
	font-size: .9rem;
}
.semantic-related-item:hover {
	transform: translateY(-1px);
	border-color: rgba(21, 23, 26, .24);
	box-shadow: 0 6px 18px rgba(21, 23, 26, .07);
}
.semantic-related-item a,
.semantic-contextual-link a {
	color: #23364d;
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.semantic-related-item a:hover,
.semantic-contextual-link a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.semantic-contextual-link {
	margin: 1.1em 0;
	padding: .8rem 1rem;
	border-left: 3px solid var(--sil-accent, #b8ff3d);
	border-radius: 0 9px 9px 0;
	background: rgba(184, 255, 61, .08);
}

/* Legacy Category markup: plain <p> with SIL comments and links. */
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)) {
	--sil-accent: #b8ff3d;
	--sil-ink: #15171a;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .6rem;
	position: relative;
	clear: both;
	isolation: isolate;
	z-index: 3;
	margin: 1.5rem 0 !important;
	padding: 3.25rem 1rem 1rem !important;
	overflow: hidden;
	border: 1px solid #e2e5df;
	border-radius: 14px;
	background: #f7f8f4;
	box-shadow: 0 8px 24px rgba(21, 23, 26, .045);
	font-size: 0 !important;
	line-height: 0;
	text-align: left !important;
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong))::before {
	content: "Xem thêm";
	position: absolute;
	top: 1rem;
	left: 1rem;
	color: var(--sil-ink);
	font-size: 1.08rem;
	font-weight: 750;
	line-height: 1.35;
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a:nth-of-type(2)):not(:has(strong))::before {
	content: "Khám phá theo chủ đề";
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong))::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--sil-accent);
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)) > br {
	display: none;
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)) > a {
	display: flex;
	align-items: center;
	position: relative;
	flex: 1 1 calc(33.333% - .6rem);
	width: auto;
	min-width: 210px;
	margin: 0 !important;
	padding: .68rem 2rem .68rem .85rem;
	border: 1px solid rgba(21, 23, 26, .1);
	border-radius: 10px;
	background: #fff;
	color: #23364d;
	font-size: .96rem;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)):not(:has(> a:nth-of-type(2))) > a {
	flex: 0 1 420px;
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)) > a::after {
	content: "↗";
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	color: #68717a;
	font-size: .9rem;
}
.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)) > a:hover {
	transform: translateY(-1px);
	border-color: rgba(21, 23, 26, .24);
	box-shadow: 0 6px 18px rgba(21, 23, 26, .07);
}

@media (max-width: 960px) {
	.semantic-links-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.semantic-links-list { grid-template-columns: 1fr; }
	.semantic-hub-links,
	.semantic-related-links { margin: 1.15rem 0; padding: .9rem; border-radius: 12px; }
	.semantic-related-item { padding: .65rem 1.9rem .65rem .8rem; font-size: .93rem; }
	.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)) {
		margin: 1.15rem 0 !important;
		padding: 3rem .9rem .9rem !important;
		border-radius: 12px;
	}
	.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong))::before {
		top: .9rem;
		left: .9rem;
		font-size: 1rem;
	}
	.aza-category-content > p:nth-last-child(-n + 2):has(> a[href*="/hinh-nen/"]):not(:has(strong)) > a {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		padding: .65rem 1.9rem .65rem .8rem;
		font-size: .93rem;
	}
}