/*
 * Fox40 – giao diện "Quang phổ AI" (theo OptimAI của Quixlab), nạp sau theme.css trên mọi trang.
 * Nền đen sâu, chữ hiện đại mảnh và thoáng (Manrope cho tiêu đề và thân bài, IBM Plex Mono cho
 * nhãn/nút; cả hai có dấu tiếng Việt), nút viền cầu vồng chạy vòng có vầng sáng, thẻ kính mờ
 * bo lớn, ánh sáng quang phổ ở góc khối, con cáo (favicon) làm hình chìm; khối hiện dần khi cuộn.
 */

/* ------------------------------------------------------------------ màu */

:root {
	--f-bg: #f8f9fa;
	--f-surface: #ffffff;
	--f-surface-2: #f1f4f6;
	--f-text: #0d1017;
	--f-muted: #5b6676;
	--f-border: #dbe2e6;
	--f-accent: #734cff;
	--f-accent-hover: #5f37f0;
	--f-accent-ink: #ffffff;
	--f-signal: #734cff;
	--f-cyan: #0f9fb8;
	--f-grid: transparent;
	--f-glow: rgba(115, 76, 255, 0.10);
	--f-shadow: 0 1px 2px rgba(13, 16, 23, 0.04), 0 18px 40px rgba(13, 16, 23, 0.06);
	--f-radius: 24px;
	--f-radius-sm: 999px;
	--f-header-h: 76px;
	--o-btn-bg: #121213;
	--o-btn-ink: #ffffff;
	--o-glass: rgba(255, 255, 255, 0.72);
	--o-line: rgba(124, 142, 165, 0.28);
	--o-rb: linear-gradient(90deg, #ff4c52, #a07cfe, #fff181, #734cff, #30e3ff, #ff4c52);
	--o-spectrum: conic-gradient(from 270deg at 50% 50%, transparent 0deg, transparent 180deg, #30e3ff 216deg, #734cff 248deg, #fff181 281deg, #ff4c52 317deg, transparent 360deg);
	--o-serif: "Manrope", "Inter Tight", system-ui, sans-serif; /* tên giữ để các luật cũ dùng chung */
	--o-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--o-sans: "Manrope", "Be Vietnam Pro", system-ui, sans-serif;
	--f-font-head: var(--o-serif);
	--f-font-body: var(--o-sans);
	--f-font-mono: var(--o-mono);
	--f-head-weight: 400;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--f-bg: #0d1017;
		--f-surface: #11141d;
		--f-surface-2: #12161f;
		--f-text: #eef2f7;
		--f-muted: #94a3b8;
		--f-border: rgba(148, 174, 207, 0.16);
		--f-accent: #a07cfe;
		--f-accent-hover: #b99bff;
		--f-accent-ink: #0d1017;
		--f-signal: #a07cfe;
		--f-cyan: #30e3ff;
		--f-glow: rgba(115, 76, 255, 0.18);
		--f-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
		--o-glass: rgba(255, 255, 255, 0.03);
		--o-line: rgba(148, 174, 207, 0.16);
	}
}

:root[data-theme="dark"] {
	--f-bg: #0d1017;
	--f-surface: #11141d;
	--f-surface-2: #12161f;
	--f-text: #eef2f7;
	--f-muted: #94a3b8;
	--f-border: rgba(148, 174, 207, 0.16);
	--f-accent: #a07cfe;
	--f-accent-hover: #b99bff;
	--f-accent-ink: #0d1017;
	--f-signal: #a07cfe;
	--f-cyan: #30e3ff;
	--f-glow: rgba(115, 76, 255, 0.18);
	--f-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	--o-glass: rgba(255, 255, 255, 0.03);
	--o-line: rgba(148, 174, 207, 0.16);
}

/* ------------------------------------------------------------------ nền, chữ */

body {
	background-image:
		radial-gradient(900px 520px at 12% -8%, rgba(255, 76, 82, 0.10), transparent 60%),
		radial-gradient(900px 520px at 92% -6%, rgba(115, 76, 255, 0.14), transparent 62%);
	background-size: auto;
	background-attachment: scroll;
	font-family: var(--o-sans);
}

h1,
h2,
h3,
.wp-block-post-title,
.fox40-section-title,
.fox40-kb__name,
.fox40-stat__value,
.fox40-plan__price {
	font-family: var(--o-serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

h4,
.fox40-card__title,
.fox40-plugin__name {
	font-family: var(--o-sans);
	font-weight: 600;
}

.fox40-hero h1 {
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.08;
}

.fox40-gradient-text {
	background: linear-gradient(90deg, #30e3ff, #734cff 45%, #ff4c52);
	-webkit-background-clip: text;
	background-clip: text;
	font-style: italic;
}

.fox40-eyebrow,
.is-style-fox40-eyebrow,
.fox40-kb__eyebrow,
.fox40-toc__title,
.fox40-footer h2,
.fox40-footer h3 {
	color: var(--f-muted);
	font-family: var(--o-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fox40-eyebrow::before,
.is-style-fox40-eyebrow::before,
.fox40-kb__eyebrow::before,
.fox40-footer h2::before,
.fox40-footer h3::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0.6em 0.15em 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #30e3ff, #734cff 50%, #ff4c52);
	vertical-align: middle;
}

.fox40-lead {
	font-size: 1.125rem;
}

.fox40-meta,
.fox40-chip,
.fox40-badge,
.fox40-kb__count,
.fox40-facts span {
	font-family: var(--o-mono);
}

a {
	text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------ nút: viền cầu vồng chạy vòng */

@keyframes fox40-rainbow {
	to {
		background-position: 200% 0;
	}
}

.fox40-btn,
.fox40-button--primary,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	position: relative;
	isolation: isolate;
	min-height: 46px;
	padding: 0.625rem 1.5rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background-image:
		linear-gradient(var(--o-btn-bg), var(--o-btn-bg)),
		var(--o-rb);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-size: 100% 100%, 200% 100%;
	color: var(--o-btn-ink);
	font-family: var(--o-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	animation: fox40-rainbow 8s linear infinite;
}

.fox40-btn::after,
.fox40-button--primary::after,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link::after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: -22%;
	left: 50%;
	width: 60%;
	height: 26%;
	background: var(--o-rb);
	background-size: 200% 100%;
	filter: blur(12px);
	opacity: 0.75;
	transform: translateX(-50%);
	animation: fox40-rainbow 8s linear infinite;
	pointer-events: none;
	transition: opacity 0.2s;
}

.fox40-btn:hover,
.fox40-button--primary:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	border-color: transparent;
	background-image:
		linear-gradient(var(--o-btn-bg), var(--o-btn-bg)),
		var(--o-rb);
	color: var(--o-btn-ink);
}

.fox40-btn:hover::after,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after {
	opacity: 1;
}

.fox40-btn--ghost,
.fox40-button:not(.fox40-button--primary),
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--o-line);
	border-radius: 999px;
	background: var(--o-glass);
	color: var(--f-text);
	font-family: var(--o-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	animation: none;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.fox40-btn--ghost::after {
	content: none;
}

.fox40-btn--ghost:hover,
.fox40-button:not(.fox40-button--primary):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--f-signal);
	background: var(--o-glass);
	color: var(--f-text);
}

/* Nút sáng: dùng nền trắng chữ đen như "Get started" ở header OptimAI */
.fox40-head-account .fox40-btn {
	min-height: 38px;
	border: 0;
	background: var(--f-text);
	color: var(--f-bg);
	animation: none;
}

.fox40-head-account .fox40-btn::after {
	content: none;
}

.fox40-head-account .fox40-btn:hover {
	background: var(--f-text);
	color: var(--f-bg);
	opacity: 0.88;
}

.fox40-icon-btn {
	border-color: var(--o-line);
	border-radius: 999px;
	background: var(--o-glass);
}

.fox40-icon-btn:hover {
	border-color: var(--f-signal);
	color: var(--f-signal);
}

.fox40-pill {
	border-color: var(--o-line);
	font-family: var(--o-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.fox40-pill:hover,
.fox40-pill.is-active {
	border-color: var(--f-text);
	background: var(--f-text);
	color: var(--f-bg);
}

/* ------------------------------------------------------------------ header, footer */

.fox40-header {
	border-bottom: 1px solid var(--o-line);
	background: color-mix(in srgb, var(--f-bg) 70%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(16px);
	backdrop-filter: saturate(1.4) blur(16px);
}

.fox40-nav--primary .fox40-menu a {
	color: var(--f-muted);
	font-family: var(--o-serif);
	font-size: 0.9375rem;
	font-weight: 400;
}

.fox40-nav--primary .fox40-menu a:hover,
.fox40-nav--primary .fox40-menu .current-menu-item > a,
.fox40-nav--primary .fox40-menu .current-menu-ancestor > a {
	color: var(--f-text);
}

.fox40-nav--primary .sub-menu {
	border-color: var(--o-line);
	border-radius: 16px;
	background: color-mix(in srgb, var(--f-surface) 88%, transparent);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.fox40-nav--primary .sub-menu a {
	font-family: var(--o-sans);
}

.fox40-logo a,
.fox40-logo {
	font-family: var(--o-sans);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.fox40-logo__mark {
	border-radius: 50%;
	background: var(--f-text);
	color: var(--f-bg);
}

.fox40-footer {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--o-line);
	background: #0d1017;
	color: #eef2f7;
}

.fox40-footer::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 60%;
	height: 120%;
	background: var(--o-spectrum);
	filter: blur(80px);
	opacity: 0.35;
	pointer-events: none;
}

.fox40-footer > * {
	position: relative;
}

.fox40-footer a,
.fox40-footer .fox40-logo a {
	color: #eef2f7;
}

.fox40-footer a:hover {
	color: #30e3ff;
}

.fox40-footer .fox40-muted,
.fox40-footer p,
.fox40-footer__bottom,
.fox40-footer h2,
.fox40-footer h3 {
	color: #94a3b8;
}

.fox40-footer__bottom {
	border-top-color: rgba(148, 174, 207, 0.16);
}

.fox40-footer .fox40-icon-btn {
	border-color: rgba(148, 174, 207, 0.2);
	background: rgba(255, 255, 255, 0.04);
	color: #eef2f7;
}

/* ------------------------------------------------------------------ thẻ kính mờ */

.fox40-card,
.is-style-fox40-card,
.fox40-post-card,
.fox40-kb,
.fox40-plugin,
.fox40-plan,
.fox40-toc,
.fox40-lead-form,
.fox40-account__panel,
.fox40-account__auth,
.wp-block-details,
.fox40-faq,
.fox40-lockbox,
.fox40-member,
.fox40-cta {
	border: 1px solid var(--o-line);
	border-radius: var(--f-radius);
	background: var(--o-glass);
	box-shadow: var(--f-shadow);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.wp-block-details,
.fox40-faq {
	border-radius: 16px;
}

/* Viền quang phổ hiện khi rê chuột vào thẻ */
.fox40-card,
.is-style-fox40-card,
.fox40-post-card,
.fox40-kb,
.fox40-plugin {
	position: relative;
	transition: transform 0.25s, box-shadow 0.25s;
}

.fox40-card::before,
.is-style-fox40-card::before,
.fox40-post-card::before,
.fox40-kb::before,
.fox40-plugin::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, #30e3ff, #734cff 40%, #fff181 70%, #ff4c52);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
}

.fox40-card:hover,
.is-style-fox40-card:hover,
.fox40-post-card:hover,
.fox40-kb:hover,
.fox40-plugin:hover {
	border-color: var(--o-line);
	transform: translateY(-4px);
}

.fox40-card:hover::before,
.is-style-fox40-card:hover::before,
.fox40-post-card:hover::before,
.fox40-kb:hover::before,
.fox40-plugin:hover::before {
	opacity: 1;
}

.fox40-post-card .wp-block-post-featured-image img,
.fox40-card__media img {
	border-radius: 0;
}

.wp-block-post-content img,
.fox40-post-head .wp-block-post-featured-image img {
	border-radius: 20px;
}

.fox40-kb__name {
	font-size: 1.5rem;
}

.fox40-plan.is-featured {
	border-color: transparent;
	box-shadow: 0 0 0 1px var(--f-signal), var(--f-shadow);
}

/* ------------------------------------------------------------------ khối trang */

/* Hero: ánh sáng quang phổ phía sau, khung terminal thành thẻ kính */
.fox40-hero {
	overflow: hidden;
}

.fox40-hero::before {
	content: "";
	position: absolute;
	right: -15%;
	bottom: -55%;
	width: 75%;
	height: 120%;
	background: var(--o-spectrum);
	filter: blur(90px);
	opacity: 0.35;
	pointer-events: none;
}

.fox40-hero > * {
	position: relative;
}

.fox40-terminal {
	border: 1px solid var(--o-line);
	border-radius: 20px;
	background: color-mix(in srgb, #0d1017 92%, transparent);
	box-shadow: 0 30px 80px rgba(13, 16, 23, 0.35);
	color: #dbe2e6;
	font-family: var(--o-mono);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.fox40-terminal__bar {
	border-bottom-color: rgba(148, 174, 207, 0.16);
	color: #7c8ea5;
}

.fox40-terminal .is-ok {
	color: #30e3ff;
}

.fox40-terminal .is-accent {
	color: #fff181;
}

/* Dải nhấn: khung tối bo lớn, góc có ánh sáng quang phổ (như khối "80+ Languages") */
.fox40-section-band {
	position: relative;
	overflow: hidden;
	margin-right: clamp(1rem, 3vw, 3rem);
	margin-left: clamp(1rem, 3vw, 3rem);
	border: 1px solid rgba(148, 174, 207, 0.16);
	border-radius: 32px;
	background: #0d1017;
	color: #eef2f7;
}

.fox40-section-band::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 70%;
	height: 160%;
	background: var(--o-spectrum);
	filter: blur(70px);
	opacity: 0.45;
	pointer-events: none;
}

.fox40-section-band > * {
	position: relative;
}

/* Khung rộng bằng vùng nội dung (tối đa wideSize), không kéo ra mép màn hình như alignfull mặc định */
.has-global-padding > .fox40-section-band.alignfull {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-right: auto !important;
	margin-left: auto !important;
}

.fox40-section-band h2,
.fox40-section-band h3,
.fox40-section-band summary,
.fox40-section-band li {
	color: #eef2f7;
}

.fox40-section-band p,
.fox40-section-band .fox40-muted {
	color: #94a3b8;
}

.fox40-section-band .fox40-eyebrow {
	color: #94a3b8;
}

.fox40-section-band .fox40-step {
	padding: 1.75rem 1.5rem;
	border: 1px solid rgba(148, 174, 207, 0.16);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.03);
}

.fox40-section-band .wp-block-details {
	border-color: rgba(148, 174, 207, 0.16);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
}

.fox40-step::before {
	color: transparent;
	background: linear-gradient(90deg, #30e3ff, #a07cfe);
	-webkit-background-clip: text;
	background-clip: text;
	font-family: var(--o-serif);
	font-size: 2.25rem;
	font-style: italic;
	line-height: 1;
}

.fox40-check-list li::before {
	border-color: #30e3ff;
}

/* CTA, mời thành viên: kính có ánh quang phổ */
.fox40-cta,
.fox40-member {
	position: relative;
	overflow: hidden;
}

.fox40-cta::before,
.fox40-member::before {
	content: "";
	position: absolute;
	top: -80%;
	right: -10%;
	width: 50%;
	height: 260%;
	background: var(--o-spectrum);
	filter: blur(60px);
	opacity: 0.4;
	pointer-events: none;
}

.fox40-cta > *,
.fox40-member > * {
	position: relative;
}

/* Bài viết */
.fox40-toc a:hover,
.fox40-toc a.is-active {
	color: var(--f-text);
}

.wp-block-quote {
	border-left-color: var(--f-signal);
	font-family: var(--o-serif);
	font-style: italic;
}

.wp-block-query-pagination-numbers .page-numbers {
	border-color: var(--o-line);
	border-radius: 999px;
	font-family: var(--o-mono);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	border-color: var(--f-text);
	background: var(--f-text);
	color: var(--f-bg);
}

/* Form */
.fox40-form input[type="text"],
.fox40-form input[type="email"],
.fox40-form input[type="password"],
.fox40-form input[type="tel"],
.fox40-form input[type="url"],
.fox40-form select,
.fox40-form textarea,
.fox40-searchform input[type="search"],
.wp-block-search__input {
	border-color: var(--o-line);
	border-radius: 14px;
	background: var(--o-glass);
}

.fox40-form input:focus,
.fox40-form select:focus,
.fox40-form textarea:focus {
	border-color: var(--f-signal);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-signal) 22%, transparent);
}

:not(pre) > code {
	border-radius: 6px;
	font-family: var(--o-mono);
}

/* ------------------------------------------------------------------ hiện dần khi cuộn */

.fox40-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fox40-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fox40-reveal {
		opacity: 1;
		transform: none;
	}

	.fox40-btn,
	.fox40-btn::after,
	.wp-block-button__link,
	.wp-block-button__link::after {
		animation: none !important;
	}
}


/* ================================================================== chữ: hiện đại, nhẹ, thoáng */

body {
	font-size: 1.0625rem;
	line-height: 1.75;
	text-rendering: optimizeLegibility;
}

p,
li {
	line-height: 1.75;
}

h1,
h2,
h3,
h4,
.wp-block-post-title,
.fox40-section-title,
.fox40-kb__name,
.fox40-plan__price {
	font-family: var(--o-serif);
	font-style: normal;
	text-wrap: balance;
}

h1,
.wp-block-post-title {
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.12;
}

.fox40-hero h1 {
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1.06;
}

h2,
.fox40-section-title {
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

h3 {
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

h4,
.fox40-card__title,
.fox40-plugin__name {
	font-family: var(--o-serif);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.4;
}

/* Khoảng cách dọc: tiêu đề sát nội dung của nó, cách xa khối trước */
.wp-block-post-content > * + h2 {
	margin-top: 3rem;
}

.wp-block-post-content > * + h3 {
	margin-top: 2.25rem;
}

h1 + p,
h2 + p,
h3 + p {
	margin-top: 0.75rem;
}

.fox40-gradient-text {
	font-style: normal;
	font-weight: 400;
}

.fox40-lead {
	max-width: 62ch;
	color: var(--f-muted);
	font-size: 1.1875rem;
	font-weight: 400;
	line-height: 1.7;
}

.fox40-muted,
.fox40-card__excerpt,
.fox40-kb__desc,
.wp-block-post-excerpt {
	line-height: 1.7;
}

.is-style-fox40-card p,
.fox40-step p {
	font-size: 0.9688rem;
	line-height: 1.7;
}

.fox40-eyebrow,
.is-style-fox40-eyebrow,
.fox40-kb__eyebrow,
.fox40-toc__title {
	font-size: 0.7188rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.6;
}

.fox40-nav--primary .fox40-menu a {
	font-family: var(--o-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.005em;
}

.fox40-step::before {
	color: var(--f-muted);
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	font-family: var(--o-mono);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.14em;
}

.fox40-section-band .fox40-step::before {
	color: #94a3b8;
}

.wp-block-quote {
	font-family: var(--o-serif);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 300;
	line-height: 1.6;
}

/* ================================================================== thương hiệu */

.fox40-brand__mark {
	width: 52px;
	height: 52px;
	filter: drop-shadow(0 6px 18px rgba(255, 122, 41, 0.28));
}

.fox40-brand__name {
	font-family: var(--o-serif);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.fox40-brand__tagline {
	font-family: var(--o-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
}

.fox40-brand--footer .fox40-brand__mark {
	width: 64px;
	height: 64px;
}

.fox40-brand--footer .fox40-brand__name {
	color: #eef2f7;
	font-size: 1.375rem;
}

.fox40-brand--footer .fox40-brand__tagline {
	color: #94a3b8;
}

/* ================================================================== icon */

.fox40-icon {
	width: 48px;
	height: 48px;
	border: 1px solid var(--o-line);
	border-radius: 14px;
	background: var(--o-glass);
	color: var(--f-signal);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .fox40-icon {
	color: #30e3ff;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fox40-icon {
		color: #30e3ff;
	}
}

.is-style-fox40-card .fox40-icon,
.fox40-step .fox40-icon {
	margin-bottom: 1.25rem;
}

.wp-block-columns > .is-style-fox40-card .fox40-icon {
	margin-bottom: 1.25rem;
}

.fox40-section-band .fox40-icon {
	border-color: rgba(148, 174, 207, 0.18);
	background: rgba(255, 255, 255, 0.04);
	color: #30e3ff;
}

/* ================================================================== con cáo làm hình chìm */

.fox40-cta::after,
.fox40-member::after,
.fox40-footer::after {
	content: "";
	position: absolute;
	right: 4%;
	bottom: 50%;
	width: 180px;
	height: 180px;
	background: var(--fox40-mark) center / contain no-repeat;
	opacity: 0.07;
	filter: grayscale(1) brightness(1.6);
	transform: translateY(50%) rotate(-8deg);
	pointer-events: none;
}

.fox40-cta .fox40-btn,
.fox40-member .fox40-btn {
	position: relative;
	z-index: 1;
}

.fox40-footer::after {
	right: 3%;
	bottom: 18%;
	width: 320px;
	height: 320px;
	opacity: 0.04;
	transform: rotate(-8deg);
}

/* ================================================================== footer */

.fox40-footer .fox40-footer__head .fox40-icon {
	border-color: rgba(148, 174, 207, 0.18);
	background: rgba(255, 255, 255, 0.04);
	color: #30e3ff;
}

.fox40-footer .fox40-footer__head h3 {
	color: #eef2f7;
	font-family: var(--o-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fox40-footer .fox40-footer__head h3::before,
.fox40-footer h3::before {
	content: none;
}

.fox40-footer .fox40-footer-links a {
	color: #b6c2d2;
	font-size: 0.9375rem;
	transition: color 0.2s;
}

.fox40-footer .fox40-footer-links a:hover {
	color: #ffffff;
}

.fox40-footer__text {
	color: #94a3b8;
}

.fox40-footer__bottom,
.fox40-footer__bottom p {
	color: #7c8ea5;
	font-family: var(--o-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/* ================================================================== tinh chỉnh: dấu tiếng Việt cần khoảng thở */

h1,
.wp-block-post-title {
	letter-spacing: -0.02em;
	line-height: 1.16;
}

.fox40-hero h1 {
	letter-spacing: -0.025em;
	line-height: 1.12;
}

h2,
.fox40-section-title {
	letter-spacing: -0.015em;
	line-height: 1.25;
}

h3 {
	letter-spacing: -0.005em;
}

body {
	letter-spacing: 0.002em;
}

.fox40-link-quiet,
.fox40-account-link {
	font-family: var(--o-sans);
	font-weight: 500;
}

.fox40-brand__mark {
	width: 56px;
	height: 56px;
}

.fox40-lang__item {
	font-family: var(--o-mono);
	font-weight: 500;
}

.wp-block-search__button {
	min-height: 46px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--f-text);
	color: var(--f-bg);
	font-family: var(--o-mono);
	font-size: 0.8125rem;
	font-weight: 500;
}

.wp-block-search__input {
	border-radius: 999px;
	padding-left: 1.25rem;
}

/* ================================================================== hero đầu trang: quang phổ AI */

@keyframes fox40-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes fox40-drift {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(-6%, 8%) scale(1.12);
	}
}

@keyframes fox40-sweep {
	to {
		background-position: 200% 0;
	}
}

.fox40-page-hero {
	border-bottom-color: var(--o-line);
	background: transparent;
}

.fox40-page-hero__title {
	font-family: var(--o-serif);
	font-weight: 300;
	letter-spacing: -0.025em;
}

.fox40-page-hero__title::after {
	content: "";
	display: block;
	width: 72px;
	height: 2px;
	margin-top: 1.25rem;
	border-radius: 2px;
	background: linear-gradient(90deg, #30e3ff, #734cff, #fff181, #ff4c52);
}

.fox40-page-hero__meta li {
	border-color: var(--o-line);
	background: var(--o-glass);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.fox40-page-hero__grid {
	background-image:
		linear-gradient(rgba(148, 174, 207, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 174, 207, 0.1) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 60% 100% at 80% 0%, #000 20%, transparent 70%);
	mask-image: radial-gradient(ellipse 60% 100% at 80% 0%, #000 20%, transparent 70%);
}

.fox40-page-hero__orb--a {
	top: -70%;
	right: -6%;
	width: 52vw;
	max-width: 820px;
	background: var(--o-spectrum);
	filter: blur(80px);
	opacity: 0.42;
	animation: fox40-spin 40s linear infinite;
}

.fox40-page-hero__orb--b {
	right: 34%;
	bottom: -70%;
	width: 30vw;
	max-width: 480px;
	background: radial-gradient(circle, rgba(48, 227, 255, 0.35), transparent 70%);
	opacity: 0.6;
	animation: fox40-drift 18s ease-in-out infinite;
}

.fox40-page-hero__line {
	background: linear-gradient(90deg, transparent 0%, transparent 30%, #30e3ff 42%, #734cff 50%, #fff181 58%, #ff4c52 66%, transparent 78%, transparent 100%);
	background-size: 200% 100%;
	opacity: 0.9;
	animation: fox40-sweep 9s linear infinite;
}

:root[data-theme="light"] .fox40-page-hero__orb--a {
	opacity: 0.22;
}

:root[data-theme="light"] .fox40-page-hero__orb--b {
	opacity: 0.35;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .fox40-page-hero__orb--a {
		opacity: 0.22;
	}

	:root:not([data-theme="dark"]) .fox40-page-hero__orb--b {
		opacity: 0.35;
	}
}

/* ================================================================== thanh menu chính
 * Icon cáo sát khối tên (logo đọc thành một cụm); chữ menu lớn hơn, cân với logo và nút bên phải.
 */

.fox40-header .fox40-brand__link {
	gap: 0.5rem;
}

.fox40-header .fox40-brand__mark {
	margin-right: -0.125rem; /* ảnh cáo có lề trong suốt bên phải */
}

.fox40-nav--primary .fox40-menu {
	gap: 0.5rem;
}

.fox40-nav--primary .fox40-menu > li > a {
	padding: 0.5rem 0.875rem;
	color: var(--f-muted);
	font-family: var(--o-sans);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

.fox40-nav--primary .fox40-menu > li > a:hover,
.fox40-nav--primary .fox40-menu > .current-menu-item > a,
.fox40-nav--primary .fox40-menu > .current-menu-ancestor > a {
	color: var(--f-text);
}

.fox40-nav--primary .sub-menu a {
	font-size: 0.9688rem;
	line-height: 1.45;
}

.fox40-head-account .fox40-link-quiet,
.fox40-head-account .fox40-account-link {
	font-size: 1rem;
}