/*
 * CSS chung của theme MiniAI. Chỉ dùng biến sinh từ theme.json (--wp--preset--*, --wp--custom--*).
 * Dark mode: biến preset được đổi trong inc/assets.php, file này không cần biết sáng hay tối.
 */

/* ---------- Nền tảng ---------- */

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

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

/* action-soft quá nhạt trên nền paper/surface (và trùng nền khối dùng action-soft): pha từ action để luôn thấy. */
::selection {
	background: color-mix(in srgb, var(--wp--preset--color--action) 30%, transparent);
	color: var(--wp--preset--color--ink);
}

/* Nhãn kiểu mono chữ hoa: <p class="is-style-eyebrow"> */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--input);
}

/* ---------- Nút ---------- */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--md--gap);
	min-height: var(--wp--custom--button--md--height);
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-action .wp-block-button__link {
	background-color: var(--wp--preset--color--action);
	color: var(--wp--custom--color--on-action);
}

.wp-block-button.is-style-action .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--action-hover);
	color: var(--wp--custom--color--on-action);
}

.wp-block-button.is-style-action .wp-block-button__link:active {
	background-color: var(--wp--preset--color--action-press);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--muted);
}

/* Nút lg: chỉ CTA chính trên mobile (docs/DESIGN.md#nút). */
@media (max-width: 640px) {
	.wp-block-button.is-size-lg-mobile .wp-block-button__link {
		min-height: var(--wp--custom--button--lg--height);
		padding: var(--wp--custom--button--lg--padding);
	}
}

/* ---------- Header ---------- */
/*
 * Bố cục theo design/hero.png: logo trái, menu giữa, "Đăng nhập" (link chữ) + một nút CTA bên phải.
 * Màu chữ và font đặt tường minh: trang còn dựng bằng Elementor có class kit đổi màu chữ của <body>.
 */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--surface);
}

.wp-site-blocks > header.wp-block-template-part {
	overflow-x: clip;
}

/*
 * Trong suốt nhẹ + làm mờ nội dung cuộn phía sau (như Gorgias); trình duyệt không hỗ trợ thì giữ nền đặc.
 * Blur đặt trên ::before, không trên header: backdrop-filter biến header thành khung chứa của
 * phần tử position: fixed, làm menu overlay trên mobile bị cắt còn cao bằng header.
 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.wp-site-blocks > header.wp-block-template-part {
		background: none;
	}

	.wp-site-blocks > header.wp-block-template-part::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent);
		-webkit-backdrop-filter: saturate(180%) blur(16px);
		backdrop-filter: saturate(180%) blur(16px);
	}
}

@media (max-width: 600px) {
	/* Admin bar trên mobile không cố định, header dính sát mép trên. */
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.miniai-header {
	min-height: var(--wp--custom--header--height);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
}

.miniai-header .wp-block-site-logo {
	flex-shrink: 0;
}

.miniai-header .wp-block-site-logo img {
	height: auto;
}

.miniai-header__center {
	flex: 1 1 auto;
	min-width: 0;
}

.miniai-header__actions {
	flex-shrink: 0;
}

.miniai-header .wp-block-navigation {
	color: var(--wp--preset--color--ink);
}

.miniai-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

.miniai-header__login a:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

.miniai-header__login {
	margin: 0;
	white-space: nowrap;
}

.miniai-header__login a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/*
 * Desktop: mục cấp 1 có nền pill khi hover; submenu mở thành panel full-width dưới header
 * (theo Gorgias). Mega menu đầy đủ (nhóm, icon) làm ở S3-09.
 */
@media (min-width: 1100px) {
	.miniai-header {
		position: relative;
	}

	/* Panel định vị theo .miniai-header (full-width), không theo mục menu. */
	.miniai-header :is(.wp-block-navigation, .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content, .wp-block-navigation__container),
	.miniai-header .wp-block-navigation__container > .wp-block-navigation-item {
		position: static;
	}

	/* Core đặt position: relative bằng selector này (0,3,0) ở màn ≥600px. */
	.miniai-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		position: static;
	}

	.miniai-header .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--10);
	}

	.miniai-header .wp-block-navigation__container > .wp-block-navigation-item {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		border-radius: var(--wp--custom--radius--pill);
		transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
	}

	.miniai-header .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) {
		background: var(--wp--preset--color--sand);
	}

	.miniai-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0;
	}

	.miniai-header .wp-block-navigation__submenu-icon svg {
		transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
	}

	.miniai-header .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	.miniai-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		top: 100% !important;
		left: 0 !important;
		right: 0;
		min-width: 0 !important;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
		align-content: start;
		align-items: start;
		padding: var(--wp--preset--spacing--60) max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
		background: var(--wp--preset--color--surface);
		border: 0 !important;
		border-top: 1px solid var(--wp--preset--color--line) !important;
		border-radius: 0;
		box-shadow: var(--wp--preset--shadow--soft);
	}

	/* Cầu nối vô hình giữa mục menu và panel để rê chuột xuống không bị đóng. */
	.miniai-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--wp--preset--spacing--40);
	}

	.miniai-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: auto;
		align-self: start;
	}

	.miniai-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: grid !important;
		gap: var(--wp--preset--spacing--10);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
		border-radius: var(--wp--custom--radius--input);
		transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
	}

	.miniai-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--sand);
	}

	/*
	 * Mega menu "Giải pháp" (S3-09): 8 hub thành 4 cột, trang dịch vụ của mỗi hub luôn hiện bên dưới
	 * (giữ đủ 58 link nội bộ như mega menu production).
	 */
	.miniai-header .wp-block-navigation__container > .miniai-mega--solutions > .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
		max-height: calc(100vh - var(--wp--custom--header--height) - var(--wp--preset--spacing--50));
		overflow-y: auto;
	}

	/* Core xếp mục có con thành hàng ngang (nhãn | danh sách); ở đây xếp dọc. */
	.miniai-header .miniai-mega--solutions > .wp-block-navigation__submenu-container > .has-child {
		flex-direction: column;
		align-items: stretch;
	}

	.miniai-header .wp-block-navigation__container > .miniai-mega--products > .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.miniai-header .miniai-mega--solutions .has-child .wp-block-navigation__submenu-container {
		position: static;
		display: grid;
		gap: 0;
		width: auto;
		height: auto;
		min-width: 0 !important;
		margin-top: var(--wp--preset--spacing--10);
		padding: 0;
		visibility: visible;
		opacity: 1;
		overflow: visible;
		background: none;
		border: 0 !important;
		box-shadow: none;
	}

	.miniai-header .miniai-mega--solutions .has-child > .wp-block-navigation__submenu-icon {
		display: none;
	}

	.miniai-header .miniai-mega--solutions .has-child > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--label);
		font-weight: 500;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.miniai-header .miniai-mega--solutions .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40) !important;
		font-size: var(--wp--preset--font-size--small);
	}

	.miniai-header .miniai-mega--solutions .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		font-weight: 400;
		color: var(--wp--preset--color--muted);
	}

	.miniai-header .miniai-mega--solutions .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
		color: var(--wp--preset--color--ink);
	}
}

.miniai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

/* Menu mobile: "Giải pháp" chỉ hiện 8 hub; trang dịch vụ nằm trên trang hub. */
.miniai-header .wp-block-navigation__responsive-container.is-menu-open .miniai-mega--solutions .has-child > .wp-block-navigation__submenu-container {
	display: none;
}

.miniai-header .wp-block-navigation-item__label {
	font-weight: 400;
}

.miniai-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-weight: 500;
}

.miniai-header .wp-block-navigation-item__description {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

/* Menu mobile (overlay) */
.miniai-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--50) clamp(var(--wp--preset--spacing--40), 4vw, var(--wp--preset--spacing--70));
}

.miniai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lead);
}

.miniai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: var(--wp--preset--spacing--20) 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body);
	min-width: 0 !important;
}

/* "Đăng nhập" trong menu chỉ hiện ở menu mobile; desktop đã có link riêng. */
.miniai-header .wp-block-navigation__responsive-container:not(.is-menu-open) .miniai-nav-login {
	display: none;
}

/*
 * Dưới 1100px: menu thu vào nút ☰, đặt sau nút CTA (logo · CTA · ☰).
 * Core chỉ chuyển sang nút menu dưới 600px, nên từ 600px tới 1099px ép như mobile.
 */
@media (max-width: 1099px) {
	.miniai-header__center {
		order: 3;
		flex: 0 0 auto;
	}

	.miniai-header__bar > .miniai-header__actions {
		margin-left: auto;
	}

	.miniai-header .miniai-header__login {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 1099px) {
	.miniai-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.miniai-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.miniai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/* ---------- Footer ---------- */

.miniai-footer a {
	color: inherit;
	text-decoration: none;
}

.miniai-footer a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.miniai-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

/* Kênh Mini AI: hàng nút tròn chỉ có icon, tên kênh nằm trong aria-label. */
/* Khoảng cách cố định 0.5rem để 5 nút vừa một hàng trong cột 11rem+. */
.miniai-footer ul.miniai-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.miniai-footer__socials a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	transition: border-color 0.2s;
}

.miniai-footer__socials a:hover,
.miniai-footer__socials a:focus-visible {
	border-color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Hàng cuối: Sitemap + badge DMCA (ảnh 5:1 của dmca.com, giữ nguyên màu). */
.miniai-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.miniai-footer__dmca img {
	display: block;
	width: 120px;
	height: auto;
}

/* ---------- Tranh chì thành phố (miniai_scene_img) ---------- */
/* Nền tranh gần trắng: multiply cho nền trang (paper/sand) ăn vào giấy, mask làm mờ mép để tranh tan vào section kề.
   Chiều cao theo bề rộng nhưng chặn trần để màn rất rộng không thành một mảng tranh khổng lồ. */

.miniai-scene {
	margin-block: 0;
	line-height: 0;
}

.miniai-scene__img {
	display: block;
	width: 100%;
	height: clamp(12rem, 33.4vw, 36rem);
	object-fit: cover;
	object-position: 50% 45%;
	mix-blend-mode: multiply;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/* Footer: tranh Hà Nội là đáy trang, chỉ mờ mép trên; hàng pháp nhân đè lên lớp sương ở chân tranh. */
.miniai-footer__scene {
	position: relative;
	margin-top: var(--wp--preset--spacing--60);
}

.miniai-scene--hanoi .miniai-scene__img {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%);
	mask-image: linear-gradient(to bottom, transparent, #000 25%);
}

.miniai-footer__legal {
	position: absolute;
	inset: auto 0 0;
	padding-bottom: var(--wp--preset--spacing--50);
	text-shadow: 0 0 0.75rem var(--wp--preset--color--sand), 0 0 0.25rem var(--wp--preset--color--sand);
}

@media (max-width: 781px) {
	/* Khung mobile cao hơn tỉ lệ gốc; giữ linh vật trong khung (Hà Nội: linh vật lệch phải). */
	.miniai-scene--hanoi .miniai-scene__img {
		object-position: 72% 45%;
	}

	.miniai-footer__legal {
		position: static;
		padding-bottom: var(--wp--preset--spacing--60);
	}
}

/* ---------- Nút liên hệ nổi (Zalo, Messenger) ---------- */
/* Xếp thành cột ngay trên nút chat Tấm AI (plugin mini-ai-snyk-chat: nút 64px, cách góc 22px, mobile 16px),
   cùng trục giữa và cùng kiểu: tròn, viền trắng 2px, bóng theo màu kênh, nhấc lên khi rê chuột.
   Các số px lấy theo CSS của plugin để hai bên khớp nhau. Không có plugin thì cột nằm sát góc. */

.miniai-contact-float {
	--miniai-float-size: 52px;
	--miniai-float-edge: 22px;
	position: fixed;
	right: var(--miniai-float-edge);
	bottom: var(--miniai-float-edge);
	z-index: 40;
}

body:has(#tam-ai-launcher) .miniai-contact-float {
	right: calc(var(--miniai-float-edge) + (64px - var(--miniai-float-size)) / 2);
	bottom: calc(var(--miniai-float-edge) + 64px + var(--wp--preset--spacing--30));
}

@media (max-width: 520px) {
	.miniai-contact-float {
		--miniai-float-size: 48px;
		--miniai-float-edge: 16px;
	}
}

.miniai-contact-float ul {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.miniai-contact-float a {
	--miniai-float-bg: var(--wp--custom--color--zalo);
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: var(--miniai-float-size);
	height: var(--miniai-float-size);
	border: 2px solid var(--wp--custom--color--on-action);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--miniai-float-bg);
	color: var(--wp--custom--color--on-action);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--miniai-float-bg) 32%, transparent);
	transition: transform 0.22s, box-shadow 0.22s;
}

.miniai-contact-float a.miniai-contact-float__messenger {
	--miniai-float-bg: var(--wp--custom--color--messenger);
}

.miniai-contact-float a:hover,
.miniai-contact-float a:focus-visible {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 14px 32px color-mix(in srgb, var(--miniai-float-bg) 40%, transparent);
	text-decoration: none;
}

.miniai-contact-float a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

@media print {
	.miniai-contact-float {
		display: none;
	}
}

/* ---------- Breadcrumb (Rank Math) ---------- */

.rank-math-breadcrumb p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.rank-math-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.rank-math-breadcrumb a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.rank-math-breadcrumb .separator {
	padding-inline: var(--wp--preset--spacing--10);
}

/* ---------- Nội dung bài (blog: 1.230 bài HTML classic + bài Gutenberg) ---------- */

.miniai-prose {
	overflow-wrap: break-word;
}

.miniai-prose > * + h2 {
	margin-top: var(--wp--preset--spacing--70);
}

.miniai-prose > * + h3,
.miniai-prose > * + h4 {
	margin-top: var(--wp--preset--spacing--60);
}

.miniai-prose :where(h2, h3, h4, h5, h6) {
	scroll-margin-top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--50));
}

.miniai-prose :where(ul, ol) {
	padding-left: var(--wp--preset--spacing--50);
}

.miniai-prose li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.miniai-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--input);
}

/* [caption] của bài classic: WordPress in width cố định bằng style inline. */
.miniai-prose .wp-caption {
	max-width: 100%;
	width: auto !important;
}

.miniai-prose .wp-caption-text,
.miniai-prose figcaption {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.miniai-prose .aligncenter {
	margin-inline: auto;
	display: block;
}

.miniai-prose .alignleft {
	float: left;
	margin: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) 0;
	max-width: 50%;
}

.miniai-prose .alignright {
	float: right;
	margin: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	max-width: 50%;
}

.miniai-prose::after {
	content: "";
	display: table;
	clear: both;
}

.miniai-prose :where(iframe, video, embed, object) {
	max-width: 100%;
}

.miniai-prose iframe:where([src*="youtube"], [src*="youtu.be"], [src*="vimeo"], [src*="facebook.com/plugins/video"]) {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wp--custom--radius--input);
}

.miniai-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.miniai-prose :where(th, td) {
	border: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: left;
	vertical-align: top;
}

.miniai-prose th,
.miniai-prose thead td {
	background: var(--wp--preset--color--sand);
	font-weight: 500;
}

/* Bảng rộng: cuộn ngang trên mobile thay vì tràn trang. */
@media (max-width: 781px) {
	.miniai-prose table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.miniai-prose .wp-block-table {
	overflow-x: auto;
}

.miniai-prose blockquote:not(.wp-block-quote) {
	margin-inline: 0;
	padding-left: var(--wp--preset--spacing--50);
	border-left: 2px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

.miniai-prose :where(code, kbd) {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--preset--spacing--10);
	padding: 0.1em 0.3em;
}

.miniai-prose pre {
	overflow-x: auto;
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--input);
	padding: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--label);
}

.miniai-prose pre code {
	background: none;
	padding: 0;
}

.miniai-prose hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	margin-block: var(--wp--preset--spacing--70);
}

/* Bài classic hay căn đều (justify) bằng style inline: tạo khoảng trắng lớn giữa chữ, nhất là trên mobile. */
.miniai-prose [style*="text-align: justify"],
.miniai-prose [style*="text-align:justify"] {
	text-align: left !important;
}

/* Bài classic có màu chữ/nền cứng từ editor cũ: không để đè lên dark mode. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .miniai-prose :where(span, p, td, th, strong, li)[style*="color"] {
		color: inherit !important;
	}

	:root:not([data-theme="light"]) .miniai-prose :where(span, p, td, th, tr, table)[style*="background"] {
		background: transparent !important;
	}
}

:root[data-theme="dark"] .miniai-prose :where(span, p, td, th, strong, li)[style*="color"] {
	color: inherit !important;
}

:root[data-theme="dark"] .miniai-prose :where(span, p, td, th, tr, table)[style*="background"] {
	background: transparent !important;
}

/* ---------- Card bài viết (archive, bài liên quan) ---------- */

.miniai-card {
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.miniai-card:hover {
	border-color: var(--wp--preset--color--muted);
}

.miniai-card .wp-block-post-featured-image {
	margin: 0;
}

.miniai-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.miniai-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
}

.miniai-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Phân trang ---------- */

.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--20);
	font-weight: 500;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	min-width: var(--wp--custom--button--md--height);
	min-height: var(--wp--custom--button--md--height);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
}

.wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--sand);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ---------- Ô tìm kiếm ---------- */

.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-search__input {
	min-height: var(--wp--custom--button--md--height);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding-inline: var(--wp--preset--spacing--40);
	font: inherit;
}

/* ---------- Chuyển động ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Case study dựng bằng block (S4-09): lưới thẻ thay cho component của inbio-child ---------- */

.miniai-prose .miniai-cs-grid {
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--60);
}

.miniai-prose .miniai-cs-card {
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.miniai-prose .miniai-cs-card > * {
	margin: 0;
}

.miniai-prose .miniai-cs-card :where(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.35;
}

.miniai-prose .miniai-cs-card p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.miniai-prose .miniai-cs-card .wp-block-image img {
	width: 100%;
	border-radius: var(--wp--custom--radius--input);
}

/* ---------- Trang /blog/ (S5-04): chuyên mục cấp 1 dạng chip ---------- */

.wp-block-categories.miniai-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-categories.miniai-chips a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--button--chip--height);
	padding: var(--wp--custom--button--chip--padding);
	font-size: var(--wp--custom--button--chip--font-size);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.wp-block-categories.miniai-chips a:hover {
	border-color: var(--wp--preset--color--ink);
}