/* ============================================================
   G97 (29/09/2026, v1.32.0) — Các khối trình bày bài học kỹ thuật.

   Dùng cho bài Claude biên tập từ ghi chép của Trọng rồi dán vào trình
   soạn thảo (Code editor). File này nạp ở bài viết/trang (frontend) VÀ
   trong trình soạn thảo (add_editor_style) để lúc soạn thấy đúng như lúc
   đăng. Không đặt độ rộng cho bất kỳ khối nào — mọi khối rộng theo cột
   bài của theme (Trọng dặn 29/09/2026).

   Màu chỉ lấy từ bảng màu theme.json. Chữ trên nền nhạt đã đo tương phản:
   moss-deep/moss-tint 7.45 · #6b4a1f/gold-tint 6.27 · #8a3f31/clay-tint
   5.72 · ink-soft/sunken 6.1 · trắng/moss-deep 9.42. Chữ nhỏ nhất 14px.
   Không viết HOA toàn bộ. Không có chế độ tối vì site chưa có.
   ============================================================ */
:root {
	--bh-sans: var(--wp--preset--font-family--be-vietnam-pro);
	--bh-mono: var(--wp--preset--font-family--ibm-plex-mono);
	--bh-gold-ink: #6b4a1f;
	--bh-clay-ink: #8a3f31;
	--bh-shadow: 0 1px 2px rgba(28, 38, 32, 0.06), 0 6px 18px rgba(28, 38, 32, 0.05);
}

/* ---------- Hộp chú thích: Vì sao vậy · Coi chừng · Đem ra dùng ---------- */
.is-style-vi-sao,
.is-style-coi-chung,
.is-style-dem-ra-dung {
	border-left: 3px solid;
	border-radius: 10px;
	padding: 1rem 1.25rem !important;
	margin-top: 1.25rem !important;
	margin-bottom: 1.25rem !important;
	color: var(--wp--preset--color--ink);
}

.is-style-vi-sao {
	background: var(--wp--preset--color--moss-tint);
	border-color: var(--wp--preset--color--moss);
}

.is-style-coi-chung {
	background: var(--wp--preset--color--clay-tint);
	border-color: var(--wp--preset--color--clay);
}

.is-style-dem-ra-dung {
	background: var(--wp--preset--color--gold-tint);
	border-color: var(--wp--preset--color--gold);
}

/* Khoảng cách bên trong hộp: con đầu sát trên, các con sau cách đều. */
.is-style-vi-sao > *,
.is-style-coi-chung > *,
.is-style-dem-ra-dung > *,
.is-style-tu-hoi-lai > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.is-style-vi-sao > * + *,
.is-style-coi-chung > * + *,
.is-style-dem-ra-dung > * + *,
.is-style-tu-hoi-lai > * + * {
	margin-top: 0.625rem !important;
}

.is-style-vi-sao ul,
.is-style-coi-chung ul,
.is-style-dem-ra-dung ul,
.is-style-vi-sao ol,
.is-style-coi-chung ol,
.is-style-dem-ra-dung ol {
	padding-left: 1.25rem;
}

/* Nhãn đầu hộp (đoạn văn có lớp hop-nhan — pattern chèn sẵn). */
.hop-nhan {
	font-family: var(--bh-sans);
	font-size: 0.875rem !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

.is-style-vi-sao > .hop-nhan,
.is-style-tu-hoi-lai > .hop-nhan {
	color: var(--wp--preset--color--moss-deep);
}

.is-style-coi-chung > .hop-nhan {
	color: var(--bh-clay-ink);
}

.is-style-dem-ra-dung > .hop-nhan {
	color: var(--bh-gold-ink);
}

.hop-nhan + * {
	margin-top: 0.25rem !important;
}

/* ---------- Tự hỏi lại (thẻ trắng + các câu hỏi bấm mở đáp án) ---------- */
.is-style-tu-hoi-lai {
	background: var(--wp--preset--color--raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow: var(--bh-shadow);
	padding: 1.25rem 1.5rem !important;
	margin-top: 2rem !important;
	margin-bottom: 1.25rem !important;
}

.is-style-tu-hoi-lai > .wp-block-details + .wp-block-details {
	margin-top: 0 !important;
	border-top: 1px dashed var(--wp--preset--color--line-strong);
}

/* Khối Chi tiết (Details) trong bài: dòng bấm cao ≥44px. */
.wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 44px;
	padding-block: 0.5rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--wp--preset--color--moss);
	border-bottom: 2px solid var(--wp--preset--color--moss);
	transform: rotate(-45deg);
	transition: transform 0.2s;
}

.wp-block-details[open] > summary::before {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-top: 0 !important;
	margin-bottom: 0.75rem !important;
	padding-left: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary::before {
		transition: none;
	}
}

/* ---------- Công thức (kiểu cho khối Đoạn văn) ---------- */
p.is-style-cong-thuc {
	background: var(--wp--preset--color--sunken);
	border-left: 3px solid var(--wp--preset--color--moss);
	border-radius: 6px;
	padding: 0.875rem 1.25rem !important;
	font-family: var(--bh-sans);
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow-x: auto;
}

p.is-style-cong-thuc sup,
:where(p, li, td, th) sup {
	font-size: 0.875rem;
	line-height: 0;
}

/* ---------- Các bước (kiểu cho khối Danh sách có số) ---------- */
ol.is-style-cac-buoc {
	list-style: none;
	counter-reset: bh-buoc;
	padding-left: 0 !important;
}

ol.is-style-cac-buoc > li {
	counter-increment: bh-buoc;
	position: relative;
	padding-left: 2.5rem;
	margin: 0.75rem 0;
}

ol.is-style-cac-buoc > li::before {
	content: counter(bh-buoc);
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--wp--preset--color--moss-tint);
	color: var(--wp--preset--color--moss-deep);
	font-family: var(--bh-mono);
	font-size: 0.875rem;
	line-height: 1;
}

/* ---------- Bảng ---------- */
.wp-block-table {
	overflow-x: auto;
	margin-top: 1.25rem;
	margin-bottom: 1.5rem;
}

.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--raised);
	font-variant-numeric: tabular-nums;
	line-height: 1.55;
}

/* Bảng 3 cột trở lên: giữ bề rộng tối thiểu, màn hẹp thì cuộn ngang
   trong khung của chính bảng (thân trang không cuộn ngang). */
.wp-block-table table:has(tr > :nth-child(3)) {
	min-width: 32rem;
}

.wp-block-table table:has(tr > :nth-child(4)) {
	min-width: 40rem;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table thead th {
	background: var(--wp--preset--color--sunken);
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--bh-sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.wp-block-table tbody tr + tr > * {
	border-top: 1px dashed var(--wp--preset--color--line-strong);
}

.wp-block-table tbody td:first-child {
	font-weight: 600;
}

.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
	text-align: left;
}

/* ---------- Nhãn độ tin cậy (định dạng chữ, chèn từ thanh công cụ) ---------- */
.tin-goc,
.tin-dung,
.tin-do,
.tin-nd,
.tin-cxm,
.bo-sung {
	display: inline-block;
	font-family: var(--bh-sans);
	font-size: 0.875rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.35;
	padding: 1px 6px;
	border-radius: 5px;
	white-space: nowrap;
	vertical-align: 0.08em;
	text-decoration: none;
}

.tin-goc {
	background: var(--wp--preset--color--moss-deep);
	color: #ffffff;
}

.tin-dung {
	background: var(--wp--preset--color--moss-tint);
	color: var(--wp--preset--color--moss-deep);
}

.tin-do {
	background: var(--wp--preset--color--gold-tint);
	color: var(--bh-gold-ink);
}

.tin-nd {
	background: var(--wp--preset--color--sunken);
	color: var(--wp--preset--color--ink-soft);
}

.tin-cxm {
	background: var(--wp--preset--color--clay-tint);
	color: var(--bh-clay-ink);
}

.bo-sung {
	font-weight: 400;
	padding: 0 7px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	color: var(--wp--preset--color--ink-soft);
}

/* Nền trùng nền hộp thì đổi sang nền trắng cho nhãn còn nổi. */
.is-style-ghi-chu .tin-nd,
.is-style-vi-sao .tin-dung,
.is-style-coi-chung .tin-cxm,
.is-style-dem-ra-dung .tin-do {
	background: var(--wp--preset--color--raised);
}

/* ---------- Mã / tên file trong câu ---------- */
:where(p, li, td, th, figcaption, summary) > code {
	font-family: var(--bh-mono);
	font-size: 0.9em;
	padding: 0.05em 0.35em;
	border-radius: 4px;
	background: var(--wp--preset--color--sunken);
	white-space: nowrap;
}

/* ---------- Danh sách nguồn cuối bài ---------- */
ol.nguon {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	padding-left: 1.5rem;
}

ol.nguon > li + li {
	margin-top: 0.5rem;
}

/* ---------- Đoạn dẫn đầu bài (G98) ----------
   Ngoài trang bài, đoạn này hiện ở chỗ câu dẫn dưới tiêu đề (khối
   post-lead) nên bản trong thân bài bị ẩn bằng PHP. Kiểu dưới đây dùng
   trong trình soạn thảo, và khi bài có ô Tóm tắt tự viết. */
p.doan-dan {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
}