/**
 * =============================================================================
 * SOLAR KẾT NỐI — THIẾT LẬP GIAO DIỆN (CHỈ SỬA FILE NÀY)
 * =============================================================================
 *
 * WordPress + Django /hub/. Sau khi sửa: Ctrl+F5.
 * Tăng SKN_VERSION trong functions.php nếu cache WP.
 */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap");

:root {
	/* FONT */
	--skn-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--skn-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--skn-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
	--skn-font: var(--skn-font-body);

	/* Cỡ chữ */
	--skn-text-size: 17px;
	--skn-text-leading: 1.7;
	--skn-h1-size: clamp(1.875rem, 4.5vw, 3rem);
	--skn-h2-size: clamp(1.5rem, 3.5vw, 2.125rem);
	--skn-h3-size: 1.25rem;
	--skn-heading-weight: 700;
	--skn-heading-leading: 1.2;

	/* NỀN tối */
	--skn-bg: #060b12;
	--skn-bg-elevated: #0a1220;
	--skn-surface: #111c2d;
	--skn-surface-2: #0d1522;

	/* Gradient (tăng độ đậm tại skn-tokens.css) */
	--skn-gradient-page:
		radial-gradient(ellipse 120% 80% at 50% -30%, rgb(14 165 233 / 38%), transparent 52%),
		radial-gradient(ellipse 70% 50% at 100% 50%, rgb(6 182 212 / 22%), transparent 45%),
		linear-gradient(180deg, #0f2844 0%, #0a1628 35%, #060b12 70%, #04070c 100%);
	--skn-gradient-hero:
		radial-gradient(ellipse 100% 80% at 70% -15%, rgb(56 189 248 / 42%), transparent 50%),
		radial-gradient(ellipse 70% 55% at 15% 25%, rgb(251 191 36 / 18%), transparent 52%),
		radial-gradient(ellipse 80% 60% at 10% 20%, rgb(14 165 233 / 28%), transparent 55%),
		linear-gradient(155deg, #123352 0%, #0c1f38 40%, #060b12 100%);
	--skn-gradient-section:
		linear-gradient(180deg, rgb(56 189 248 / 16%) 0%, rgb(14 165 233 / 6%) 40%, transparent 100%);
	--skn-gradient-band:
		linear-gradient(90deg, rgb(14 165 233 / 8%) 0%, rgb(56 189 248 / 18%) 50%, rgb(14 165 233 / 8%) 100%),
		linear-gradient(180deg, rgb(8 47 73 / 85%) 0%, rgb(6 11 18 / 95%) 100%);
	--skn-gradient-cta:
		radial-gradient(ellipse 80% 100% at 50% 120%, rgb(56 189 248 / 35%), transparent 55%),
		linear-gradient(135deg, #0284c7 0%, #0369a1 35%, #0c4a6e 70%, #082f49 100%);
	--skn-gradient-footer:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgb(56 189 248 / 28%), transparent 55%),
		linear-gradient(180deg, #0a1628 0%, #060b12 55%, #030508 100%);
	--skn-gradient-card:
		linear-gradient(155deg, rgb(56 189 248 / 14%) 0%, rgb(255 255 255 / 6%) 45%, rgb(255 255 255 / 2%) 100%);

	/* Lưới caro */
	--skn-grid-color: 56 189 248;
	--skn-grid-opacity: 0.14;
	--skn-grid-size: 40px;

	/* CHỮ — tương phản cao trên nền tối */
	--skn-text: #f8fafc;
	--skn-text-muted: #b8c5d6;
	--skn-text-dim: #7c8fa3;

	/* VIỀN */
	--skn-border: rgb(148 163 184 / 22%);
	--skn-border-strong: rgb(56 189 248 / 45%);

	/* Nhấn */
	--skn-accent: #38bdf8;
	--skn-accent-hover: #0ea5e9;
	--skn-accent-soft: rgb(56 189 248 / 14%);
	--skn-cyan: #22d3ee;
	--skn-cyan-dim: #0891b2;
	--skn-amber: #fbbf24;
	--skn-solar-gold: #fcd34d;
	--skn-green: #34d399;
	--skn-gradient-warm:
		linear-gradient(135deg, rgb(251 191 36 / 22%) 0%, rgb(56 189 248 / 12%) 55%, transparent 100%);

	/* Alias theme cũ */
	--skn-navy: #0c4a6e;
	--skn-navy-dark: #082f49;
	--skn-blue-50: rgb(56 189 248 / 12%);
	--skn-blue-100: rgb(56 189 248 / 22%);
	--skn-blue-200: rgb(56 189 248 / 35%);
	--skn-blue-500: #0ea5e9;
	--skn-blue-600: #0284c7;
	--skn-blue-700: #0369a1;
	--skn-blue-800: #075985;
	--skn-blue-900: #0c4a6e;
	--skn-slate-50: #0d1522;
	--skn-slate-100: #111c2d;
	--skn-slate-200: rgb(148 163 184 / 22%);
	--skn-slate-400: #94a3b8;
	--skn-slate-500: #7c8fa3;
	--skn-slate-600: #b8c5d6;
	--skn-slate-800: #e2e8f0;
	--skn-slate-900: #f8fafc;
	--skn-green-400: #34d399;
	--skn-green-500: #10b981;
	--skn-green-600: #059669;
	--skn-green-700: #047857;
	--skn-yellow: #fbbf24;

	/* Bo góc, đổ bóng */
	--skn-radius: 12px;
	--skn-radius-lg: 18px;
	--skn-radius-pill: 999px;
	--skn-shadow: 0 4px 24px rgb(0 0 0 / 35%);
	--skn-shadow-lg: 0 16px 48px rgb(0 0 0 / 45%);
	--skn-glow: 0 0 48px rgb(56 189 248 / 32%);
	--skn-glow-strong: 0 0 80px rgb(56 189 248 / 28%);
	--skn-transition: 200ms ease;
}

/* Lưới caro — chỉ dùng qua body (không gắn thêm lớp khác) */
.skn-grid-pattern {
	background: transparent;
	background-image: none;
}

/* =============================================================================
   Typography — nền trang: skn-shell.css (body::before)
   ============================================================================= */

html {
	/* Đồng bộ rem với WordPress (Astra ~18px) — Django mặc định 16px gây lệch container */
	font-size: 18px;
	background-color: var(--skn-bg);
}

body,
body.skn-app,
body.skn-site-page,
body.skn-landing-page {
	position: relative;
	z-index: 1;
	background: transparent !important;
	color: var(--skn-text);
	font-family: var(--skn-font-body);
	font-size: var(--skn-text-size);
	line-height: var(--skn-text-leading);
}

#page,
.site,
.site-content,
#content,
.ast-container,
.ast-plain-container,
.ast-page-builder-template,
.ast-separate-container,
.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-single:not(.ast-related-post),
.ast-separate-container .ast-article-post,
.ast-separate-container .error-404,
.ast-separate-container .no-results,
.ast-separate-container .ast-archive-description,
.ast-separate-container .comments-area,
.ast-separate-container .comments-title,
.ast-separate-container.ast-two-container #secondary .widget,
.ast-box-layout.ast-plain-container .site-content,
.ast-padded-layout.ast-plain-container .site-content,
.single.ast-separate-container .site-main .ast-author-meta,
.ast-separate-container .related-posts-title-wrapper,
.ast-separate-container .comments-count-wrapper {
	background-color: transparent !important;
	background-image: none !important;
}

p,
li,
td,
th,
input,
select,
textarea,
button {
	font-family: var(--skn-font-body);
}

p {
	line-height: var(--skn-text-leading);
	color: var(--skn-text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--skn-font-display);
	font-weight: var(--skn-heading-weight);
	line-height: var(--skn-heading-leading);
	color: var(--skn-text);
	letter-spacing: -0.02em;
}

h1 {
	font-size: var(--skn-h1-size);
	margin: 0 0 0.5em;
}

h2 {
	font-size: var(--skn-h2-size);
	margin: 1em 0 0.5em;
}

h3 {
	font-size: var(--skn-h3-size);
	margin: 0.75em 0 0.4em;
	font-weight: 600;
}

.skn-hero__title,
.skn-section__title,
.skn-brand__name,
.skn-section__eyebrow,
.skn-page-title,
.skn-section-title {
	font-family: var(--skn-font-display);
}

/* =============================================================================
   Footer — gradient + caro (đồng bộ theme tối)
   ============================================================================= */

.skn-site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--skn-gradient-footer) !important;
	border-top: 1px solid var(--skn-border-strong);
	color: var(--skn-text-muted);
}

.skn-site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(56 189 248 / 6%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
	pointer-events: none;
}

.skn-site-footer::after {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--skn-accent), transparent);
	opacity: 0.85;
	pointer-events: none;
}

.skn-site-footer__grid,
.skn-site-footer__bottom {
	position: relative;
	z-index: 1;
}

.skn-site-footer__name,
.skn-site-footer__heading {
	color: var(--skn-text) !important;
	font-family: var(--skn-font-display);
}

.skn-site-footer__slogan {
	color: var(--skn-green-700);
}

.skn-site-footer__desc,
.skn-site-footer__bottom-inner {
	color: var(--skn-text-muted) !important;
}

.skn-site-footer__links a,
.skn-site-footer__bottom a,
.skn-site-footer__legal a {
	color: var(--skn-text-muted) !important;
}

.skn-site-footer__links a:hover,
.skn-site-footer__bottom a:hover,
.skn-site-footer__legal a:hover {
	color: var(--skn-accent) !important;
}

.skn-site-footer__logo {
	border-color: var(--skn-border-strong) !important;
	box-shadow: var(--skn-glow);
}

.skn-site-footer__bottom {
	border-top-color: var(--skn-border) !important;
	background: rgb(0 0 0 / 25%);
}