/*
 * Enterprise Knowledge — style của child theme.
 * Màu, cỡ chữ và khoảng cách lấy từ theme.json; file này chỉ xử lý những gì
 * theme.json không diễn đạt được: lưới, mục lục dọc, sổ mục lục, chi tiết bảng.
 */

:root {
	--ek-spine-w: 148px;
	--ek-gap: 64px;
	--ek-mast-h: 76px;
}

/* ---------------------------------------------------------------- nền chung */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ek-util {
	font-family: var(--wp--preset--font-family--util);
	font-size: var(--wp--preset--font-size--util);
	font-weight: 500;
	letter-spacing: 0.09em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--khoi);
}

:where(a):focus-visible,
:where(button):focus-visible {
	outline: 2px solid var(--wp--preset--color--dong);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ------------------------------------------------------------------ đầu trang */

.ek-mast {
	border-bottom: 1px solid var(--wp--preset--color--vien);
}

.ek-mast__in {
	align-items: baseline;
	padding-block: 26px;
}

.ek-mast__name,
.ek-mast__name a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.ek-mast__nav a {
	font-family: var(--wp--preset--font-family--util);
	font-size: var(--wp--preset--font-size--util);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--khoi);
}

.ek-mast__nav a:hover {
	color: var(--wp--preset--color--muc);
}

/* ------------------------------------------------------------------ luận điểm */

.ek-hero {
	border-bottom: 1px solid var(--wp--preset--color--vien);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}

.ek-hero__thesis {
	font-size: var(--wp--preset--font-size--thesis);
	font-weight: 800;
	letter-spacing: -0.033em;
	line-height: 1.08;
	max-width: 19ch;
}

.ek-hero__lede {
	color: var(--wp--preset--color--muc-nhat);
	font-size: var(--wp--preset--font-size--lede);
	max-width: 54ch;
}

/* --------------------------------------------------------------- sổ mục lục */

.ek-reg__head {
	border-bottom: 1px solid var(--wp--preset--color--vien);
	padding-block: 22px;
}

.ek-row {
	border-bottom: 1px solid var(--wp--preset--color--vien);
	display: grid;
	gap: 28px;
	grid-template-columns: 74px minmax(0, 1fr) 230px;
	padding-block: 32px 30px;
	position: relative;
}

/* Vạch đồng chạy hết chiều ngang hàng khi rê chuột. */
.ek-row::after {
	background: var(--wp--preset--color--dong);
	bottom: -1px;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	transition: width 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
	width: 0;
}

.ek-row:hover::after,
.ek-row:focus-within::after {
	width: 100%;
}

.ek-row__date {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 9px;
}

.ek-row:hover .ek-row__date {
	color: var(--wp--preset--color--dong);
}

.ek-row__title {
	font-size: 1.6875rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.28;
	margin: 0;
}

.ek-row__dek {
	color: var(--wp--preset--color--khoi);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin-block: 10px 0;
	max-width: 58ch;
}

.ek-row__meta {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-top: 11px;
	text-align: right;
}

/* ------------------------------------------------------------ lưới trang bài */

.ek-art {
	display: grid;
	gap: var(--ek-gap);
	grid-template-columns: var(--ek-spine-w) minmax(0, 700px);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}

.ek-art__body > * {
	max-width: 700px;
}

/* ------------------------------------------------------- thanh mục lục dọc */

.ek-spine {
	position: relative;
}

.ek-spine__title {
	margin: 0 0 14px;
	padding-left: 20px;
}

.ek-spine__list {
	border-left: 1px solid var(--wp--preset--color--vien);
	list-style: none;
	margin: 0;
	padding: 0;
	position: sticky;
	top: calc(var(--ek-mast-h) - 24px);
}

.ek-spine__link {
	align-items: baseline;
	color: var(--wp--preset--color--khoi);
	display: flex;
	gap: 16px;
	padding: 9px 0 9px 20px;
	position: relative;
}

.ek-spine__link::before {
	background: var(--wp--preset--color--dong);
	content: "";
	inset-block: 6px;
	left: -1px;
	opacity: 0;
	position: absolute;
	transition: opacity 0.2s ease;
	width: 2px;
}

.ek-spine__link.is-reading {
	color: var(--wp--preset--color--muc);
}

.ek-spine__link.is-reading::before {
	opacity: 1;
}

.ek-spine__link:hover {
	color: var(--wp--preset--color--muc);
}

.ek-spine__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	min-width: 26px;
}

.ek-spine__link.is-reading .ek-spine__num {
	color: var(--wp--preset--color--dong);
}

/* Tiêu đề mục là câu tiếng Việt dài — viết hoa toàn bộ sẽ rất khó đọc.
   Giữ nguyên chữ thường, kẹp 2 dòng, bản đầy đủ nằm ở thuộc tính title. */
.ek-spine__text {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.38;
	overflow: hidden;
}

/* --------------------------------------------------- khối thông tin văn bản */

.ek-doc {
	border-bottom: 1px solid var(--wp--preset--color--vien);
	border-top: 2px solid var(--wp--preset--color--muc);
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, 1fr);
	margin-block: 0 var(--wp--preset--spacing--40);
	padding-block: 16px 18px;
}

.ek-doc__k {
	display: block;
	margin-bottom: 5px;
}

.ek-doc__v,
.ek-doc__v a,
.ek-doc .ek-util {
	color: var(--wp--preset--color--muc);
	font-family: var(--wp--preset--font-family--util);
	font-size: 0.8125rem;
	letter-spacing: 0;
	text-transform: none;
}

.ek-doc__k.ek-util {
	color: var(--wp--preset--color--khoi);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ nội dung bài */

.ek-art__body h2 {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
	scroll-margin-top: calc(var(--ek-mast-h) + 12px);
}

.ek-art__lede {
	color: var(--wp--preset--color--muc-nhat);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.68;
}

.ek-art__body a:not(.wp-element-button) {
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--dong);
	padding-bottom: 1px;
}

.ek-art__body a:not(.wp-element-button):hover {
	background: color-mix(in srgb, var(--wp--preset--color--dong) 12%, transparent);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--dong);
}

.ek-art__body blockquote,
.ek-art__body .wp-block-pullquote {
	border-left: 2px solid var(--wp--preset--color--dong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4375rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.42;
	margin-block: var(--wp--preset--spacing--40);
	padding: 4px 0 4px 26px;
	text-align: left;
}

.ek-art__body blockquote p,
.ek-art__body .wp-block-pullquote p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.ek-art__body blockquote cite {
	color: var(--wp--preset--color--khoi);
	display: block;
	font-family: var(--wp--preset--font-family--util);
	font-size: var(--wp--preset--font-size--util);
	font-style: normal;
	letter-spacing: 0.09em;
	margin-top: 16px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- bảng */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table thead th {
	border-bottom: 1px solid var(--wp--preset--color--muc);
	color: var(--wp--preset--color--khoi);
	font-family: var(--wp--preset--font-family--util);
	font-size: 0.65625rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	padding: 0 14px 11px 0;
	text-align: left;
	text-transform: uppercase;
}

.wp-block-table tbody td {
	border-bottom: 1px solid var(--wp--preset--color--vien);
	padding: 15px 14px 15px 0;
	vertical-align: top;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Bảng rộng hơn cột chữ thì tự cuộn ngang, không đẩy vỡ trang. */
.wp-block-table {
	margin-block: var(--wp--preset--spacing--40);
	overflow-x: auto;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--vien);
	opacity: 1;
}

.wp-block-image figcaption,
.wp-block-embed figcaption {
	color: var(--wp--preset--color--khoi);
	font-family: var(--wp--preset--font-family--util);
	font-size: var(--wp--preset--font-size--util);
	letter-spacing: 0.02em;
	margin-top: 12px;
}

/* --------------------------------------------------------- chỗ giữ trong editor */

.ek-editor-stub {
	border: 1px dashed var(--wp--preset--color--vien);
	color: var(--wp--preset--color--khoi);
	font-family: var(--wp--preset--font-family--util);
	font-size: 0.75rem;
	padding: 10px 14px;
}

.ek-editor-stub__hint {
	display: block;
	margin-top: 4px;
	opacity: 0.75;
}

/* ------------------------------------------------------------------ chân trang */

.ek-foot {
	border-top: 1px solid var(--wp--preset--color--vien);
	padding-block: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------- màn hẹp */

/* ------------------------------------------------------------- bốn trụ cột */

.ek-tru {
	border-block: 1px solid var(--wp--preset--color--vien);
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-block: 30px;
}

.ek-tru__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 0;
}

.ek-tru__name a {
	color: inherit;
	text-decoration: none;
}

.ek-tru__name a:hover {
	color: var(--wp--preset--color--dong);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ek-tru__dek {
	color: var(--wp--preset--color--khoi);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-block: 8px 0;
}

@media (max-width: 1023px) {
	.ek-art {
		gap: var(--wp--preset--spacing--30);
		grid-template-columns: minmax(0, 1fr);
	}

	/* Bốn trụ xếp 2×2, mỗi cột vẫn đủ rộng cho tên trụ không gãy dòng. */
	.ek-tru {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 28px;
	}

	/* Mục lục thành dải ngang dính đỉnh, cuộn theo mục đang đọc. */
	.ek-spine {
		background: var(--wp--preset--color--giay);
		border-bottom: 1px solid var(--wp--preset--color--vien);
		margin-inline: calc(var(--wp--preset--spacing--40) * -1);
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.ek-spine__title {
		display: none;
	}

	.ek-spine__list {
		border-left: 0;
		display: flex;
		overflow-x: auto;
		padding-inline: var(--wp--preset--spacing--40);
		position: static;
		scrollbar-width: none;
	}

	.ek-spine__list::-webkit-scrollbar {
		display: none;
	}

	.ek-spine__link {
		border-bottom: 2px solid transparent;
		padding: 12px 18px 10px 0;
	}

	/* Chip cuộn ngang: cắt nhãn cho đều nhau, bản đầy đủ vẫn ở thuộc tính title. */
	.ek-spine__link .ek-spine__text {
		display: block;
		max-width: 22ch;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ek-spine__link::before {
		display: none;
	}

	.ek-spine__link.is-reading {
		border-bottom-color: var(--wp--preset--color--dong);
	}

	.ek-row {
		gap: 8px 20px;
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.ek-row__meta {
		align-items: flex-start;
		flex-direction: row;
		gap: 14px;
		grid-column: 2;
		padding-top: 4px;
		text-align: left;
	}
}

@media (max-width: 599px) {
	.ek-tru {
		gap: 24px;
		grid-template-columns: 1fr;
	}

	.ek-doc {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ek-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.ek-row__date {
		flex-direction: row;
		gap: 6px;
		padding-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ek-row::after,
	.ek-spine__link::before {
		transition: none;
	}
}