/**
 * MỤC ĐÍCH: Giao diện landing ask.vn — nền sáng ngà, quầng màu pastel trôi, chữ gradient ánh xà cừ.
 * PHỤ THUỘC: template.php
 * ADMIN SỬA ĐƯỢC: không (trang tĩnh bán tên miền)
 * MỞ RỘNG: đổi token ở :root
 * GỠ AN TOÀN: gỡ cùng ask-landing.php
 */

:root {
	--ask-bg: #fbfaf7;
	--ask-ink: #0e1020;
	--ask-dim: #6b6f85;
	--ask-indigo: #5b5bf6;
	--ask-violet: #b06cf4;
	--ask-teal: #2bc4c9;
	--ask-coral: #ff8a6b;
	--ask-font: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ask-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
	background: var(--ask-bg);
	color: var(--ask-ink);
	font-family: var(--ask-font);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Quầng màu trôi chậm phía sau — cho nền "sống" mà vẫn sáng sủa */
.ask-aura {
	position: fixed;
	inset: -20%;
	pointer-events: none;
	filter: blur(70px);
	opacity: .75;
}

.ask-aura i {
	position: absolute;
	width: 46vmax;
	height: 46vmax;
	border-radius: 50%;
	mix-blend-mode: multiply;
	animation: ask-drift 22s ease-in-out infinite alternate;
}

.ask-aura i:nth-child(1) { background: #dcd9ff; left: 8%;  top: 10%; }
.ask-aura i:nth-child(2) { background: #c9f3f1; right: 6%; top: 18%; animation-duration: 26s; animation-delay: -6s; }
.ask-aura i:nth-child(3) { background: #ffe0d4; left: 30%; bottom: 0;  animation-duration: 30s; animation-delay: -12s; }
.ask-aura i:nth-child(4) { background: #f1defe; right: 22%; bottom: 8%; animation-duration: 24s; animation-delay: -3s; }

/* Lớp nhiễu hạt mịn — chống cảm giác "phẳng nhựa", cho chất giấy cao cấp */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#ask-orb {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ask-stage {
	position: relative;
	z-index: 1;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	text-align: center;
	pointer-events: none;
}

.ask-stage a { pointer-events: auto; }

/* Logo: chữ đơn nét tự vẽ ra; A không gạch ngang, thay bằng một nút sáng "đang nghĩ" */
.ask-logo { width: clamp(220px, 46vw, 460px); line-height: 0; }

.ask-logo svg { width: 100%; height: auto; overflow: visible; }

.ask-mark path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: ask-draw 1.5s cubic-bezier(.6,0,.2,1) forwards;
}

.ask-mark path:nth-child(2) { animation-delay: .25s; }
.ask-mark path:nth-child(3) { animation-delay: .5s; }

.ask-node, .ask-halo {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	animation: ask-pop .6s cubic-bezier(.3,1.6,.5,1) 1.5s forwards;
}

.ask-halo { animation: ask-pop .6s ease 1.5s forwards, ask-think 2.8s ease-in-out 2.1s infinite; }

.ask-prompt {
	margin-top: 26px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 50px -20px rgba(70, 60, 160, .35);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	font-family: var(--ask-mono);
	font-size: clamp(13px, 2vw, 16px);
	color: var(--ask-dim);
	max-width: 100%;
	opacity: 0;
	animation: ask-fade 1s ease 1.4s forwards;
}

.ask-prompt-mark {
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--ask-indigo), var(--ask-teal), var(--ask-coral), var(--ask-violet), var(--ask-indigo));
	animation: ask-spin 4s linear infinite;
	color: transparent;
	overflow: hidden;
}

#ask-typed { color: var(--ask-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ask-caret {
	display: inline-block;
	width: 2px;
	height: 1.2em;
	background: var(--ask-indigo);
	animation: ask-blink 1s steps(1) infinite;
}

/* Hộp liên hệ: một tấm trắng mờ, viền tóc, không trang trí — chữ và khoảng trắng tự làm sang */
.ask-sale {
	margin-top: clamp(40px, 8vh, 72px);
	width: min(340px, 100%);
	padding: 28px 28px 24px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(17, 19, 42, .07);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 24px 60px -32px rgba(40, 40, 110, .28);
	pointer-events: auto;
	text-align: left;
	opacity: 0;
	transform: translateY(12px);
	animation: ask-rise 1.1s cubic-bezier(.16,.8,.2,1) 2s forwards;
}

.ask-sale-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--ask-indigo);
	margin-bottom: 20px;
}

.ask-sale-line {
	display: block;
	color: var(--ask-ink);
	text-decoration: none;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: .02em;
	transition: color .25s ease;
}

.ask-sale-line + .ask-sale-line { margin-top: 16px; }

.ask-sale-line small {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ask-dim);
	margin-bottom: 3px;
}

.ask-sale-line:hover,
.ask-sale-line:focus-visible { color: var(--ask-indigo); outline: none; }

@keyframes ask-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ask-fade { to { opacity: 1; } }
@keyframes ask-rise { to { opacity: 1; transform: none; } }
@keyframes ask-draw { to { stroke-dashoffset: 0; } }
@keyframes ask-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes ask-think { 50% { transform: scale(1.5); opacity: .45; } }
@keyframes ask-blink { 50% { opacity: 0; } }
@keyframes ask-spin { to { transform: rotate(360deg); } }
@keyframes ask-drift {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(8vmax, -6vmax) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
	.ask-prompt, .ask-sale, .ask-node, .ask-halo { animation: none; opacity: 1; transform: none; }
	.ask-mark path { animation: none; stroke-dashoffset: 0; }
	.ask-caret, .ask-prompt-mark, .ask-aura i { animation: none; }
}