@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

 :root {
		--ink: #0b2545;
		--ink-soft: #3b5578;
		--body-text: #33475b;
		--brand: #0288d1;
		--brand-deep: #026ba8;
		--teal: #00b3a4;
		--bg: #f3f8fb;
		--bg-wash: #e6f3fa;
		--card: #ffffff;
		--line: #d9e6ef;
		--radius: 18px;
		box-sizing: border-box;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	} #wsp-page html { scroll-padding-top: env(safe-area-inset-top, 0px); } #wsp-page * { box-sizing: border-box; } #wsp-page {
		margin: 0;
		background: #ffffff;
		color: var(--body-text);
		font-family: "Source Sans Pro", Arial, sans-serif;
		font-size: 18px;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
	} #wsp-page h1,
#wsp-page h2,
#wsp-page h3 {
		font-family: "Space Grotesk", Arial, sans-serif;
		color: var(--ink);
		margin: 0;
		font-weight: 600;
		letter-spacing: -0.01em;
	} #wsp-page a { color: inherit; } #wsp-page img { max-width: 100%; } #wsp-page .wsp-wrap {
		max-width: 900px;
		margin: 0 auto;
		padding: 0 24px;
	} #wsp-page .wsp-narrow { max-width: 680px; } #wsp-page /* ---------- HERO ---------- */
	.wsp-hero {
		position: relative;
		overflow: hidden;
		background: linear-gradient(180deg, var(--bg-wash) 0%, var(--bg) 78%);
		padding: 48px 32px 30px;
		border-radius: 22px;
	} #wsp-page .wsp-hero-grid {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: 36px;
		align-items: center;
	} #wsp-page .wsp-hero h1 {
		font-size: clamp(30px, 4.6vw, 44px);
		line-height: 1.16;
		max-width: 15ch;
	} #wsp-page .wsp-hero h1 .wsp-accent { color: var(--brand); } #wsp-page .wsp-hero p.wsp-lede {
		margin: 20px 0 28px;
		font-size: 18px;
		max-width: 46ch;
		color: var(--ink-soft);
	} #wsp-page .wsp-btn-primary {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		background: var(--brand);
		color: #fff;
		text-decoration: none;
		font-weight: 600;
		font-family: "Space Grotesk", Arial, sans-serif;
		padding: 14px 26px;
		border-radius: 999px;
		box-shadow: 0 10px 24px -8px rgba(2, 136, 209, 0.55);
		transition: transform .15s ease, box-shadow .15s ease;
	} #wsp-page .wsp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(2,136,209,.6); } #wsp-page .wsp-btn-ghost {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--brand-deep);
		text-decoration: none;
		font-weight: 600;
		margin-left: 18px;
		border-bottom: 2px solid transparent;
	} #wsp-page .wsp-btn-ghost:hover { border-bottom-color: var(--brand); } #wsp-page .wsp-figure-percent {
		position: relative;
		justify-self: end;
		width: 100%;
		max-width: 300px;
	} #wsp-page .wsp-percent-card {
		position: relative;
		background: var(--card);
		border-radius: 28px;
		padding: 38px 30px 34px;
		box-shadow: 0 28px 60px -24px rgba(2, 69, 111, 0.35);
		text-align: center;
	} #wsp-page .wsp-percent-number {
		font-family: "Space Grotesk", Arial, sans-serif;
		font-weight: 700;
		font-size: 76px;
		line-height: 1;
		color: var(--brand);
		letter-spacing: -0.02em;
	} #wsp-page .wsp-percent-label {
		margin-top: 10px;
		font-size: 15px;
		color: var(--ink-soft);
	} #wsp-page .wsp-droplet {
		position: absolute;
		border-radius: 60% 60% 60% 0;
		background: var(--teal);
		opacity: .16;
		transform: rotate(45deg);
	} #wsp-page .wsp-droplet.wsp-d1 { width: 130px; height: 130px; top: -40px; right: -30px; } #wsp-page .wsp-droplet.wsp-d2 { width: 70px; height: 70px; bottom: -20px; left: -24px; background: var(--brand); opacity: .14; } #wsp-page /* ---------- INTRO ---------- */
	.wsp-intro { padding: 56px 0 8px; background: #ffffff; } #wsp-page .wsp-intro p { font-size: 18px; color: var(--ink-soft); } #wsp-page /* ---------- BENEFITS ---------- */
	.wsp-benefits { padding: 56px 0; background: #ffffff; } #wsp-page .wsp-benefits h2 { font-size: clamp(24px, 3vw, 30px); max-width: 20ch; } #wsp-page .wsp-benefit-row {
		display: grid;
		grid-template-columns: 64px 1fr;
		gap: 22px;
		padding: 26px 0;
		border-top: 1px solid var(--line);
	} #wsp-page .wsp-benefit-row:last-child { border-bottom: 1px solid var(--line); } #wsp-page .wsp-benefit-icon {
		width: 52px;
		height: 52px;
		border-radius: 14px;
		background: var(--bg-wash);
		display: flex;
		align-items: center;
		justify-content: center;
	} #wsp-page .wsp-benefit-icon svg { width: 26px; height: 26px; } #wsp-page .wsp-benefit-row h3 { font-size: 19px; margin-bottom: 6px; } #wsp-page .wsp-benefit-row p { margin: 0; color: var(--body-text); max-width: 56ch; } #wsp-page /* ---------- HOW IT WORKS ---------- */
	.wsp-how { padding: 48px 32px; background: var(--bg-wash); border-radius: 22px; } #wsp-page .wsp-how-inner { padding: 8px 0 4px; } #wsp-page .wsp-how h2 { font-size: clamp(24px, 3vw, 30px); } #wsp-page .wsp-how p.wsp-sub { color: var(--ink-soft); margin: 12px 0 34px; max-width: 52ch; } #wsp-page .wsp-flow {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	} #wsp-page .wsp-flow-step {
		background: var(--card);
		border-radius: var(--radius);
		padding: 22px 18px;
		position: relative;
	} #wsp-page .wsp-flow-num {
		font-family: "Space Grotesk", Arial, sans-serif;
		font-weight: 700;
		font-size: 14px;
		color: var(--brand);
		border: 1.5px solid var(--brand);
		width: 26px; height: 26px;
		border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		margin-bottom: 14px;
	} #wsp-page .wsp-flow-step p { margin: 0; font-size: 15px; color: var(--ink); font-weight: 500; line-height: 1.5; } #wsp-page /* ---------- STEPS TO JOIN ---------- */
	.wsp-steps { padding: 60px 0; background: #ffffff; } #wsp-page .wsp-steps h2 { font-size: clamp(24px, 3vw, 30px); } #wsp-page .wsp-steps p.wsp-sub { color: var(--ink-soft); margin: 12px 0 30px; max-width: 52ch; } #wsp-page .wsp-step-item {
		display: grid;
		grid-template-columns: 40px 1fr;
		gap: 18px;
		padding: 20px 0;
	} #wsp-page .wsp-step-item + .wsp-step-item { border-top: 1px dashed var(--line); } #wsp-page .wsp-step-index {
		font-family: "Space Grotesk", Arial, sans-serif;
		font-weight: 700;
		font-size: 22px;
		color: var(--brand);
	} #wsp-page .wsp-step-item h3 { font-size: 18px; margin-bottom: 5px; } #wsp-page .wsp-step-item p { margin: 0; color: var(--body-text); } #wsp-page .wsp-step-item code {
		background: var(--bg-wash);
		padding: 2px 8px;
		border-radius: 6px;
		font-size: 15px;
		color: var(--brand-deep);
	} #wsp-page /* ---------- FAQ ---------- */
	.wsp-faq { padding: 48px 32px; background: var(--bg-wash); border-radius: 22px; } #wsp-page .wsp-faq h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 26px; } #wsp-page .wsp-faq-item {
		background: var(--card);
		border-radius: 14px;
		padding: 4px 22px;
		margin-bottom: 12px;
	} #wsp-page .wsp-faq-item summary {
		cursor: pointer;
		padding: 18px 0;
		font-weight: 600;
		font-family: "Space Grotesk", Arial, sans-serif;
		color: var(--ink);
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	} #wsp-page .wsp-faq-item summary::-webkit-details-marker { display: none; } #wsp-page .wsp-faq-item summary::after {
		content: '+';
		font-size: 22px;
		color: var(--brand);
		flex-shrink: 0;
		transition: transform .2s ease;
	} #wsp-page .wsp-faq-item[open] summary::after { transform: rotate(45deg); } #wsp-page .wsp-faq-item p { margin: 0 0 18px; color: var(--body-text); } #wsp-page /* ---------- CTA ---------- */
	.wsp-cta {
		padding: 70px 0 30px;
		text-align: center;
		background: #ffffff;
	} #wsp-page .wsp-cta h2 { font-size: clamp(26px, 4vw, 36px); max-width: 20ch; margin: 0 auto 14px; } #wsp-page .wsp-cta p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 30px; } #wsp-page .wsp-cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } #wsp-page footer {
		padding: 30px 0 48px;
		text-align: center;
		color: var(--ink-soft);
		font-size: 14px;
		background: #ffffff;
	} #wsp-page footer .wsp-contact-line { margin-top: 6px; } #wsp-page footer a { color: var(--brand-deep); text-decoration: none; font-weight: 600; }
	/* ---------- responsive ---------- */
	@media (max-width: 760px) {
		#wsp-page .wsp-hero-grid {
			grid-template-columns: 1fr !important;
		}
		#wsp-page .wsp-figure-percent {
			justify-self: center !important;
			max-width: 220px !important;
		}
		#wsp-page .wsp-hero {
			padding: 32px 18px 24px !important;
		}
		#wsp-page .wsp-wrap {
			padding: 0 14px !important;
		}
		#wsp-page .wsp-benefit-row {
			grid-template-columns: 48px 1fr !important;
			gap: 16px !important;
		}
		#wsp-page .wsp-flow {
			grid-template-columns: 1fr 1fr !important;
		}
		#wsp-page .wsp-btn-ghost {
			display: block !important;
			margin-left: 0 !important;
			margin-top: 14px !important;
		}
		#wsp-page .wsp-how,
		#wsp-page .wsp-faq {
			padding: 28px 14px !important;
			border-radius: 16px !important;
		}
		#wsp-page .wsp-intro {
			padding: 24px 14px 8px !important;
		}
		#wsp-page .wsp-faq-item {
			padding: 4px 14px !important;
		}
	}
	@media (max-width: 420px) {
		#wsp-page .wsp-flow {
			grid-template-columns: 1fr !important;
		}
	}
	#wsp-page :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
	@media (prefers-reduced-motion: reduce) { #wsp-page * { transition: none !important; }
	}


/* ---------- 4 icon khối "Vì sao nên tham gia" — dùng ký tự Unicode thay vì ảnh SVG,
   để không bị bộ nén CSS của hosting (LiteSpeed) làm hỏng cú pháp ---------- */
#wsp-page .wsp-benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 700;
	color: #0288d1 !important;
	font-family: Arial, sans-serif !important;
}
#wsp-page .wsp-icon-commission::before { content: "%"; }
#wsp-page .wsp-icon-clock::before      { content: "\23F1"; font-size: 22px; }
#wsp-page .wsp-icon-nostock::before    { content: "\2713"; font-size: 26px; }
#wsp-page .wsp-icon-wallet::before     { content: "\20AB"; font-size: 22px; }

/* ---------- Giảm khoảng cách 2 bên với mép màn hình trên di động ----------
   Kỹ thuật "tràn viền" (full-bleed): đặt chiều rộng bằng đúng 100% màn hình
   thực tế (100vw) rồi kéo ra 2 bên bằng margin âm, không phụ thuộc khung cha
   có bao nhiêu lớp đệm hay tên class gì. Bỏ luôn bo góc trên di động (vì đã
   sát mép, bo góc sẽ không còn hợp lý). */
@media (max-width: 760px) {
	#wsp-page {
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	#wsp-page .wsp-hero,
	#wsp-page .wsp-intro,
	#wsp-page .wsp-benefits,
	#wsp-page .wsp-how,
	#wsp-page .wsp-steps,
	#wsp-page .wsp-faq,
	#wsp-page .wsp-cta,
	#wsp-page footer {
		border-radius: 0 !important;
	}
}