/**
 * Solo Media — Black Liquid Glass design system (nạp toàn site).
 * Spec: docs/design/solo-ux-ui-spec.md (§3 token, §5 glass, §15 motion,
 * §17–19 spacing/radius/button, §24 accessibility).
 *
 * Token dùng namespace --sg-* vì style.css đã có --solo-gold (= #FDB813,
 * dùng khắp trang con) và --solo-muted (= #A1A1A1) với nghĩa khác spec.
 * Bảng map spec → theme:
 *   --solo-yellow #FDB813 → --sg-yellow     --solo-gold #E09F1A → --sg-gold
 *   --solo-deep-gold #B47E00 → --sg-deep-gold
 *   --solo-charcoal #1A1A1A → --sg-charcoal  --solo-dark-2 #0B0B0B → --sg-dark-2
 *   --solo-muted #A7A7A7 → --sg-muted        --gradient-gold → --sg-gradient-gold
 *
 * Font: spec ưu tiên Poppins nhưng Poppins (Google Fonts) không có subset
 * tiếng Việt → vỡ dấu (ở, ệ, ữ…). Giữ Be Vietnam Pro self-host (geometric
 * cùng họ, đủ 134 ký tự có dấu) — xem assets/fonts/README.md.
 *
 * Class prefix sgl- (Solo Glass). KHÔNG dùng ads-/ad-: EasyList ẩn phần tử.
 */

:root {
	--sg-yellow: #FDB813;
	--sg-gold: #E09F1A;
	--sg-deep-gold: #B47E00;
	--sg-white: #FFFFFF;
	--sg-black: #000000;
	--sg-charcoal: #1A1A1A;
	--sg-dark-2: #0B0B0B;
	--sg-footer: #050505;
	--sg-muted: #A7A7A7;
	--sg-offwhite: #F5F2EA;
	--sg-line: rgba(255, 255, 255, 0.12);
	--sg-gradient-gold: linear-gradient(135deg, #FDB813 0%, #E09F1A 55%, #B47E00 100%);

	--sg-font: "Be Vietnam Pro", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--sg-motion-fast: 180ms;
	--sg-motion-normal: 320ms;
	--sg-motion-slow: 700ms;
	--sg-ease: cubic-bezier(.22, 1, .36, 1);

	--sg-radius-xs: 10px;
	--sg-radius-sm: 16px;
	--sg-radius-md: 22px;
	--sg-radius-lg: 28px;
	--sg-radius-xl: 30px;
	--sg-radius-pill: 999px;

	--sg-page-x: clamp(24px, 5vw, 80px);
	--sg-section-y: clamp(88px, 9vw, 144px);
	--sg-gap-lg: 40px;
	--sg-gap-md: 24px;
	--sg-gap-sm: 16px;
	--sg-container: 1280px;
	--sg-blur: 22px;

	/* Kính lỏng (refinement v1 §3–5): nền trong hơn, viền sáng theo hướng ánh sáng
	   (trên sáng nhất → trái → phải → đáy gần như mất), không viền vàng cả card. */
	--sg-glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018));
	--sg-glass-border: rgba(255, 255, 255, .10) rgba(255, 255, 255, .05) rgba(255, 255, 255, .025) rgba(255, 255, 255, .075);
	--sg-glass-edge:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		inset 1px 0 0 rgba(255, 255, 255, .035),
		inset -1px 0 0 rgba(255, 255, 255, .015);
	--sg-glass-drop: 0 18px 50px rgba(0, 0, 0, .30);
	--sg-motion-reveal: 650ms;
}

@media (max-width: 767px) {
	:root {
		--sg-page-x: 20px;
		--sg-section-y: 72px;
		--sg-gap-lg: 28px;
		--sg-gap-md: 18px;
		--sg-gap-sm: 12px;
		/* Mobile: blur 16–20px (§25). */
		--sg-blur: 18px;
	}
}

/* ---------- Container & heading ---------- */

.sgl-container {
	width: min(100% - 2 * var(--sg-page-x), var(--sg-container));
	margin-inline: auto;
}

.sgl-label {
	margin: 0 0 16px;
	font-family: var(--sg-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sg-yellow);
}

.sgl-gold-text {
	background: var(--sg-gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---------- Glass surfaces (§5, §27) ----------
 * .sgl-glass        : bề mặt kính cơ bản, KHÔNG blur (rẻ — trên nền đen gần
 *                     như không khác blur thật). Dùng cho card số lượng nhiều.
 * .sgl-glass--blur  : thêm backdrop-filter — chỉ nơi có nội dung/ánh sáng
 *                     phía sau (header, card hero, dải số liệu, CTA).
 * .sgl-glass--dark  : smoked glass (§5.3).
 * .sgl-glass--live  : phản chiếu vàng chạy theo con trỏ (§28) — chỉ hero
 *                     card, Growth OS, CTA.
 */
.sgl-glass {
	position: relative;
	isolation: isolate;
	background: var(--sg-glass-bg);
	border: 1px solid;
	border-color: var(--sg-glass-border);
	border-radius: var(--sg-radius-lg);
	box-shadow: var(--sg-glass-edge), var(--sg-glass-drop);
}

/* Phản chiếu vàng nhỏ ở góc trên trái (không quầng vàng cả card, §5). */
.sgl-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(circle at 18% 0%, rgba(253, 184, 19, .12), transparent 34%);
	opacity: .85;
	transition: opacity var(--sg-motion-normal) var(--sg-ease);
}

@media (hover: hover) {
	.sgl-glass:hover::before {
		opacity: 1;
	}
}

/* Smoked glass: lớp khói mỏng dưới lớp kính chung — giữ chữ đọc tốt trên nền sáng
   (hero) nhưng không còn cảm giác "card tối đục". */
.sgl-glass--dark {
	background:
		var(--sg-glass-bg),
		linear-gradient(145deg, rgba(20, 20, 19, .40), rgba(8, 8, 8, .20));
}

.sgl-glass--blur {
	-webkit-backdrop-filter: blur(var(--sg-blur)) saturate(125%);
	backdrop-filter: blur(var(--sg-blur)) saturate(125%);
}

.sgl-glass--live {
	--mx: 18%;
	--my: 0%;
}

.sgl-glass--live::before {
	background: radial-gradient(circle at var(--mx) var(--my), rgba(253, 184, 19, .14), transparent 32%);
}

/* Vệt phản chiếu chạy trái → phải khi hover (§15.6). Card cần overflow:hidden. */
.sgl-sweep::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 238, 200, .9) 50%, transparent 70%);
	opacity: 0;
	transform: translateX(-100%);
}

@media (hover: hover) and (pointer: fine) {
	.sgl-sweep:hover::after {
		animation: sgl-sweep 600ms var(--sg-ease);
	}
}

@keyframes sgl-sweep {
	0% { opacity: 0; transform: translateX(-100%); }
	50% { opacity: .3; }
	100% { opacity: 0; transform: translateX(100%); }
}

/* ---------- Buttons (§19) ---------- */

.sgl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	padding: .75em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--sg-radius-pill);
	font-family: var(--sg-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--sg-motion-fast) var(--sg-ease),
		box-shadow var(--sg-motion-normal) var(--sg-ease),
		filter var(--sg-motion-fast) var(--sg-ease),
		background-color var(--sg-motion-fast) var(--sg-ease),
		border-color var(--sg-motion-fast) var(--sg-ease);
}

.sgl-btn svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

.sgl-btn--primary,
.sgl-btn--primary:visited {
	background: var(--sg-gradient-gold);
	color: #090909;
	/* Quầng vàng tiết chế (refinement §18, §26: CTA không tranh với lõi vàng hero). */
	box-shadow:
		0 6px 20px rgba(253, 184, 19, .14),
		inset 0 1px 0 rgba(255, 255, 255, .28);
}

.sgl-btn--primary:hover,
.sgl-btn--primary:focus-visible {
	color: #090909;
	transform: translateY(-1px);
	box-shadow:
		0 10px 28px rgba(253, 184, 19, .20),
		inset 0 1px 0 rgba(255, 255, 255, .30);
}

.sgl-btn--ghost,
.sgl-btn--ghost:visited {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .10);
	color: var(--sg-white);
}

.sgl-btn--ghost:hover,
.sgl-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .18);
	color: var(--sg-white);
}

/* Nút phụ viền vàng mảnh (dùng tiết chế — spec: không outline vàng mọi nút phụ). */
.sgl-btn--line,
.sgl-btn--line:visited {
	background: transparent;
	border-color: rgba(253, 184, 19, .42);
	color: var(--sg-white);
}

.sgl-btn--line:hover,
.sgl-btn--line:focus-visible {
	background: rgba(253, 184, 19, .08);
	border-color: var(--sg-yellow);
	color: var(--sg-white);
}

.sgl-btn:focus-visible,
.sgl-iconbtn:focus-visible {
	outline: 2px solid var(--sg-yellow);
	outline-offset: 3px;
}

/* Nút tròn chỉ có icon (mũi tên trên card). Touch target ≥ 44px (§16.5). */
.sgl-iconbtn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .04);
	color: var(--sg-white);
	transition:
		border-color var(--sg-motion-fast) var(--sg-ease),
		background-color var(--sg-motion-fast) var(--sg-ease),
		color var(--sg-motion-fast) var(--sg-ease),
		transform var(--sg-motion-normal) var(--sg-ease);
}

.sgl-iconbtn svg {
	width: 18px;
	height: 18px;
}

/* ---------- Scroll reveal (§15.4) ----------
 * JS (home.js) chỉ gắn .is-pending cho phần tử đang ở DƯỚI màn hình lúc tải
 * → phần trên màn hình không bao giờ bị ẩn (không nháy, không CLS), không
 * có JS thì nội dung vẫn hiện đủ.
 */
.sgl-reveal.is-pending {
	opacity: 0;
	transform: translateY(20px);
}

.sgl-reveal.is-in {
	transition:
		opacity var(--sg-motion-reveal) var(--sg-ease),
		transform var(--sg-motion-reveal) var(--sg-ease);
	transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- Accessibility (§24) ---------- */

/* Refinement §24: rút mọi animation/transition về tức thì khi người dùng chọn giảm
   chuyển động (toàn site — file này nạp mọi trang). An toàn: không có JS nào chờ
   transitionend/animationend; các mở/đóng dùng visibility 0s vẫn đúng. Transform
   khi hover vẫn tắt riêng bằng các rule :hover { transform: none } từng phần. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

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

	.sgl-sweep::after {
		display: none;
	}

	.sgl-btn,
	.sgl-iconbtn {
		transition: none;
	}
}

.sgl-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Footer (spec §31) ----------
 * Nền #050505, viền trên trắng 8%, không dùng kính cho khối chữ.
 * Lưới 6 cột (desktop) → 5 cột dưới thương hiệu (tablet) → 2 cột (mobile).
 * Cột "Giải pháp theo ngành" do solo-core render vào slot; chưa có ngành nào
 * thì slot rỗng → :empty ẩn cột.
 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.sgl-footer {
	padding: clamp(56px, 6vw, 88px) var(--sg-page-x) 28px;
	background: var(--sg-footer);
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--sg-white);
}

.sgl-footer__in {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 32px;
	max-width: var(--sg-container);
	margin: 0 auto;
}

.sgl-footer__col:empty {
	display: none;
}

.sgl-footer__motto {
	margin: 18px 0 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	background: var(--sg-gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.sgl-footer .solo-foot__tagline {
	margin-top: 10px;
}

/* Touch target ≥ 44px (spec §16.5): link cao 44px, bỏ gap danh sách để
   nhịp dòng gần như cũ. */
.sgl-footer .solo-foot__links,
.sgl-footer .solo-foot__contact {
	gap: 0;
}

.sgl-footer .solo-foot__links a,
.sgl-footer .solo-foot__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.sgl-footer .solo-foot__contact li {
	align-items: center;
	min-height: 44px;
}

.sgl-footer .solo-contact-social a {
	width: 44px;
	height: 44px;
}

.sgl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	max-width: var(--sg-container);
	margin: clamp(40px, 5vw, 64px) auto 0;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.sgl-footer__legal p {
	margin: 0;
}

.sgl-footer__legal .solo-foot__company {
	margin-bottom: 4px;
}

.sgl-footer__badges .solo-foot__badges-label {
	margin: 0 0 8px;
}

.sgl-footer__copy {
	flex-basis: 100%;
	margin: 0;
	font-size: 13px;
	color: #8a8a8a;
}

@media (max-width: 1199px) {
	.sgl-footer__in {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.sgl-footer__brand {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 32px;
	}

	.sgl-footer__brand .solo-logo,
	.sgl-footer__brand .sgl-footer__motto {
		grid-column: 1;
	}

	.sgl-footer__brand .solo-foot__tagline,
	.sgl-footer__brand .solo-contact-social {
		grid-column: 2;
	}

	.sgl-footer__brand .solo-foot__tagline {
		grid-row: 1;
		margin: 0;
		max-width: 44em;
	}

	.sgl-footer__brand .sgl-footer__motto {
		grid-row: 2;
	}

	.sgl-footer__brand .solo-contact-social {
		grid-row: 2;
		margin-top: 18px;
	}
}

@media (max-width: 767px) {
	.sgl-footer__in {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 20px;
	}

	.sgl-footer__brand {
		display: block;
	}

	.sgl-footer__brand .solo-foot__tagline {
		margin-top: 10px;
	}

	.sgl-footer__brand .solo-contact-social {
		margin-top: 18px;
	}

	.sgl-footer__col--contact {
		grid-column: 1 / -1;
	}

	.sgl-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}