.btn-hand-white {
	filter: brightness(0) invert(1) !important;
}
/* ===== HAND ICON FOR NAV BUTTONS ===== */
.btn-hand-icon {
	width: .58rem;
	height: .44rem;
	margin-right: .12rem;
	vertical-align: middle;
	display: inline-block;
	filter: brightness(0) saturate(100%) invert(62%) sepia(52%) saturate(452%) hue-rotate(111deg) brightness(92%) contrast(87%);
}

/* ===== ZOOM ANIMATION FOR NAV BUTTONS ===== */
@keyframes btn-zoom {
	0%, 100% {
		transform: scale(.98);
	}

	50% {
		transform: scale(1.02);
	}
}

.btn-login:hover,
.btn-login:focus,
.btn-app:hover,
.btn-app:focus {
	background:
		linear-gradient(#e8f7f0, #e8f7f0) padding-box,
		linear-gradient(135deg, #ff2d2d, #ff6b6b, #ff0040) border-box;
	color: #1e8a68;
	box-shadow: 0 0 0 3px rgba(255,45,45,0.22), 0 6px 22px rgba(255,45,45,0.18);
	transform: translateY(-2px) scale(1.03);
	animation-play-state: paused;
	filter: brightness(1.04);
}

.btn-register:hover,
.btn-register:focus {
	background:
		linear-gradient(135deg, #44cfaa, #2ea37d) padding-box,
		linear-gradient(135deg, #ff2d2d, #ff6b6b, #ff0040) border-box;
	color: #fff;
	box-shadow: 0 0 0 3px rgba(255,45,45,0.28), 0 8px 28px rgba(59,181,142,0.45);
	transform: translateY(-2px) scale(1.03);
	animation-play-state: paused;
	filter: brightness(1.06);
}

.btn-login:active,
.btn-register:active,
.btn-app:active {
	animation-play-state: paused;
	transform: translateY(0) scale(0.96) !important;
	filter: brightness(0.92) !important;
	box-shadow: 0 1px 6px rgba(59,181,142,0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
	.btn-login,
	.btn-register,
	.btn-app {
		animation: none;
	}
}
/* ===== 98VV SERVICE BLOCK ===== */
.service-block {
	background: var(--bg-main);
	padding: .12rem .3rem .32rem;
	margin: 0 0 .18rem 0;
	border-radius: .14rem;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
	text-align: center;
}

.service-block .section-title {
	font-size: .48rem;
	margin-bottom: .18rem;
}

.service-desc {
	font-size: .28rem;
	color: #555;
	margin-bottom: .28rem;
	font-weight: 500;
}

.service-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .18rem;
	margin-bottom: .22rem;
}

.service-stat {
	background: #fff;
	border-radius: .12rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
	flex: 1 1 42%;
	min-width: 44%;
	max-width: 48%;
	margin: 0 .04rem;
	padding: .18rem 0 .14rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .08rem;
}

.service-icon {
	width: .54rem;
	height: .54rem;
	margin-bottom: .06rem;
	filter: brightness(0) saturate(100%) invert(62%) sepia(52%) saturate(452%) hue-rotate(111deg) brightness(92%) contrast(87%);
}

.service-stat-val {
	font-size: .36rem;
	font-weight: 800;
	color: #3bb58e;
	margin-bottom: .02rem;
}

.service-stat-label {
	font-size: .22rem;
	color: #888;
	font-weight: 500;
	text-align: center;
}

.service-logo {
	width: .7rem;
	height: .7rem;
	object-fit: contain;
	border-radius: .12rem;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
	padding: .08rem;
}
/* ===== VARIABLES ===== */
:root {
	--bg-main: #f8f7f5;
}

/* ===== BASE ===== */
html {
	margin: 0 auto;
	background: #fff;
	font-size: 100PX;
}

* {
	max-width: 750px;
	margin: 0 0;
}

body {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	background: var(--bg-main);
	min-height: 100vh;
	margin: 0 auto;
	color: #333;
}

img {
	width: 100%;
}

/* ===== TOP BANNER (marquee) ===== */
.top-banner {
	background: linear-gradient(90deg, #4ce173, #2cbb86);
	color: var(--bg-main);
	font-size: .26rem;
	line-height: .56rem;
	height: .56rem;
	overflow: hidden;
	white-space: nowrap;
	display: flex;
	align-items: center;
	padding: 0 .2rem;
}

@keyframes icon-shake {
	0%, 100% { transform: rotate(0deg); }
	15%       { transform: rotate(-18deg); }
	30%       { transform: rotate(16deg); }
	45%       { transform: rotate(-12deg); }
	60%       { transform: rotate(10deg); }
	75%       { transform: rotate(-6deg); }
	90%       { transform: rotate(4deg); }
}

.banner-icon {
	width: .46rem;
	height: .46rem;
	margin-right: .14rem;
	flex-shrink: 0;
	filter: brightness(0) saturate(100%) invert(85%) sepia(80%) saturate(600%) hue-rotate(5deg) brightness(105%);
	transform-origin: top center;
	animation: icon-shake 2.4s ease-in-out infinite;
}

.marquee-wrap {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	height: 100%;
}

.marquee-wrap p {
	display: inline-block;
	font-size: .35rem;
	padding-left: 100%;
	padding-right: 100%;
	animation: marquee-scroll 18s linear infinite;
	font-weight: 500;
}

@keyframes marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - 100vw));
	}
}

/* ===== HEADER / LOGO ===== */
.header {
	width: 100%;
	background: #fff;
	padding: .1rem 0;
	text-align: center;
	border-bottom: 1px solid #eee;
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo-img {
	width: 4.6rem;
	height: auto;
	display: block;
}

/* ===== HERO SECTION ===== */
.hero {
	background: linear-gradient(135deg, #fdfcfb 0%, #f5e6c8 100%);
	text-align: center;
	padding: .5rem .4rem .6rem;
}

.video-wrap {
	position: relative;
	width: 100%;
	line-height: 0;
}

.hero-banner {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	margin-bottom: -3px;
}

.volume-bar {
	position: absolute;
	bottom: .18rem;
	right: .18rem;
	z-index: 10;
}

.vol-btn {
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: none;
	border-radius: 50%;
	width: .64rem;
	height: .64rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s, transform .15s;
}

.vol-btn:active {
	transform: scale(0.9);
}

.vol-icon {
	width: .38rem;
	height: .38rem;
	display: block;
	filter: brightness(0) invert(1);
	transition: filter .2s;
}

.vol-btn.vol-on .vol-icon {
	filter: brightness(0) saturate(100%) invert(85%) sepia(80%) saturate(600%) hue-rotate(5deg) brightness(105%);
}


.hero h1 {
	font-size: .44rem;
	font-weight: 800;
	color: #222;
	line-height: 1.35;
	margin-bottom: .2rem;
}

.hero-desc {
	font-size: .3rem;
	color: #666;
	line-height: 1.6;
	margin-bottom: .4rem;
}

.cta-main {
	display: inline-block;
	background: linear-gradient(135deg, #3bb58e, #e8b830);
	color: var(--bg-main);
	font-size: .36rem;
	font-weight: 700;
	padding: .22rem .7rem;
	border-radius: .12rem;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(212, 160, 23, 0.35);
	transition: transform .2s, box-shadow .2s;
}

.cta-main:active {
	transform: scale(0.97);
	box-shadow: 0 2px 8px rgba(212, 160, 23, 0.25);
}

/* ===== NAV BUTTONS ===== */
.nav-buttons {
	display: flex;
	align-items: stretch;
	gap: .2rem;
	padding: .12rem .3rem .08rem;
	background: var(--bg-main);
	margin-top: 20px;
}

/* ===== GRADIENT BORDER ANIMATION ===== */
@property --grad-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@property --neon-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes gradient-rotate {
	to { --grad-angle: 360deg; }
}

.nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .3rem;
	font-weight: 700;
	padding: .1rem .15rem;
	border-radius: .14rem;
	text-decoration: none;
	text-align: center;
	transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, filter .2s ease;
	box-sizing: border-box;
	will-change: transform, box-shadow;
}

.nav-btn:active {
	transform: scale(0.95) !important;
	filter: brightness(0.94);
	animation: none !important;
}

.btn-login {
	flex: 1;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(var(--grad-angle), #ff2d2d, #ff6b6b, #ff0040, #ffb3b3, #ff2d2d) border-box;
	color: #3bb58e;
	border: 2px solid transparent;
	border-radius: .14rem;
	font-size: .4rem;
	box-shadow: 0 3px 14px rgba(255,45,45,0.22);
	animation: btn-zoom 2.2s ease-in-out infinite, gradient-rotate 3s linear infinite;
}

.btn-register {
	flex: 1;
	background:
		linear-gradient(135deg, #3bb58e, #2ea37d) padding-box,
		linear-gradient(var(--grad-angle), #ff2d2d, #ff6b6b, #ff0040, #ffb3b3, #ff2d2d) border-box;
	color: #fff;
	border: 2px solid transparent;
	border-radius: .14rem;
	font-size: .4rem;
	box-shadow: 0 4px 18px rgba(59,181,142,0.40);
	animation: btn-zoom 2.2s ease-in-out infinite, gradient-rotate 3s linear infinite;
}

.btn-app {
	flex-direction: row;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(var(--grad-angle), #ff2d2d, #ff6b6b, #ff0040, #ffb3b3, #ff2d2d) border-box;
	color: #3bb58e;
	border: 2px solid transparent;
	padding: .24rem .15rem;
	font-size: .4rem;
	font-weight: 700;
	line-height: 1.3;
	gap: .12rem;
	flex: 1;
	border-radius: .14rem;
	box-shadow: 0 3px 14px rgba(255,45,45,0.22);
	animation: btn-zoom 2.2s ease-in-out infinite, gradient-rotate 3s linear infinite;
}

.btn-app .app-icon {
	width: .44rem;
	height: .44rem;
}

/* ===== APP CARD (App Store style) ===== */
.app-card {
	background: var(--bg-main);
	padding: .3rem;
	margin: 0;
}

.app-card-top {
	display: flex;
	align-items: center;
	gap: .24rem;
	padding-bottom: .28rem;
	border-bottom: 1px solid #eee;
}

.app-card-icon {
	width: 2rem;
	height: 2rem;
	border-radius: .28rem;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.app-card-info {
	display: flex;
	flex-direction: column;
	gap: .08rem;
	flex: 1;
	margin-left: 20px;
}

.app-card-name {
	font-size: .46rem;
	font-weight: 800;
	color: #222;
}

.app-card-subtitle {
	font-size: .34rem;
	color: #888;
}

.app-card-btn {
	display: inline-block;
	background: #007aff;
	color: #fff;
	font-size: .26rem;
	font-weight: 700;
	padding: .1rem .4rem;
	border-radius: .36rem;
	text-decoration: none;
	text-align: center;
	width: fit-content;
	margin-top: .06rem;
	transition: transform .15s;
}

.app-card-btn:active {
	transform: scale(0.95);
}

.app-card-stats {
	display: flex;
	justify-content: space-around;
	padding-top: .24rem;
}

.app-card-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .04rem;
	position: relative;
	flex: 1;
}

.app-card-stat+.app-card-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 15%;
	height: 70%;
	width: 1px;
	background: #e0e0e0;
}

.app-card-stat-value {
	font-size: .34rem;
	font-weight: 800;
	color: #888;
}

.app-card-stat-label {
	font-size: .2rem;
	color: #aaa;
}

.app-card-stat:first-child .app-card-stat-label {
	color: #ff9500;
	font-size: .2rem;
	letter-spacing: .01rem;
}

/* ===== SECTION TITLE ===== */
.section-title {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, #79d69a 0%, #6fd390 45%, #60c882 100%);
	color: #e9fff0;
	font-size: .52rem;
	font-weight: 900;
	text-align: center;
	margin-bottom: .35rem;
	padding: .2rem .42rem;
	border-radius: 999px;
	border: 2px solid #8b8ab6;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38), inset 0 -2px 0 rgba(70, 152, 97, 0.36), 0 3px 0 #7f79ad;
	text-shadow: 0 1px 1px rgba(40, 120, 66, 0.35);
	overflow: visible;
}

.section-title::before,
.section-title::after {
	content: "";
	position: absolute;
	top: 50%;
	width: .34rem;
	height: .34rem;
	background: linear-gradient(180deg, #79d69a 0%, #6fd390 45%, #60c882 100%);
	border: 2px solid #8b8ab6;
	transform: translateY(-50%) rotate(45deg);
	z-index: -1;
}

.section-title::before {
	left: -.17rem;
}

.section-title::after {
	right: -.17rem;
}

/* Remove framed style for selected headings only */
.quick-info .section-title,
.trust-block .section-title,
.seo-article .section-title {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	color: #000;
	text-shadow: none;
	padding: 0;
}

.quick-info .section-title::before,
.quick-info .section-title::after,
.trust-block .section-title::before,
.trust-block .section-title::after,
.seo-article .section-title::before,
.seo-article .section-title::after {
	display: none;
}

.quick-info .section-title,
.trust-block .section-title,
.seo-article .section-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .16rem;
}

.section-title-icon {
	width: .38rem;
	height: .38rem;
	object-fit: contain;
	flex: 0 0 auto;
}

.section-title-icon-orange {
	filter: brightness(0) saturate(100%) invert(63%) sepia(96%) saturate(1355%) hue-rotate(358deg) brightness(102%) contrast(103%);
}

/* ===== QUICK GUIDE ===== */
.quick-guide {
	padding: .12rem .3rem;
	background: var(--bg-main);
}

.guide-steps {
	display: flex;
	flex-direction: column;
	gap: .24rem;
	margin-bottom: .3rem;
}

.guide-step {
	display: flex;
	align-items: center;
	gap: .24rem;
	background: #fff;
	padding: .28rem .3rem;
	border-radius: .14rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* guide-step chứa guide-links: xếp dọc */
.guide-step:has(.guide-links) {
	flex-direction: column;
	align-items: stretch;
	gap: .18rem;
}

.guide-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	width: 100%;
}

.guide-links a {
	display: flex;
	align-items: center;
	gap: .16rem;
	background: #fff;
	border: 1.5px solid #eee;
	padding: .2rem .22rem;
	border-radius: .14rem;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	transition: transform .15s, box-shadow .2s, border-color .2s;
}

.guide-links a:hover,
.guide-links a:focus {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(59,181,142,0.18);
	border-color: #3bb58e;
}

.guide-links a:active {
	transform: scale(0.97);
}

.guide-link-icon {
	width: .64rem;
	height: .64rem;
	border-radius: .1rem;
	object-fit: cover;
	flex-shrink: 0;
}

.guide-link-title {
	display: flex;
	flex-direction: column;
	gap: .02rem;
	margin-left: 10px;
}

.guide-link-title span {
	font-size: .28rem;
	font-weight: 700;
	color: #222;
	line-height: 1.3;
}

.guide-link-title small {
	font-size: .22rem;
	color: #3bb58e;
	line-height: 1.2;
}

.guide-step-note {
	font-size: .24rem;
	color: #888;
	line-height: 1.5;
}

.guide-step-num {
	width: .6rem;
	height: .6rem;
	background: #3bb58e;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .3rem;
	font-weight: 800;
	flex-shrink: 0;
}

.guide-step-text {
	font-size: .3rem;
	color: #333;
	font-weight: 600;
}

.guide-note {
	font-size: .26rem;
	color: #888;
	text-align: center;
	line-height: 1.5;
}

/* ===== QUICK INFO ===== */
.quick-info {
	margin: .18rem .2rem 0;
	padding: .16rem .18rem .2rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 9px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.info-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.info-list-item {
	background: #fff;
	padding: .26rem .3rem;
	border-radius: .12rem;
	font-size: .28rem;
	color: #444;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	position: relative;
	padding-left: .6rem;
}

.info-list-item::before {
	content: "\2713";
	position: absolute;
	left: .24rem;
	color: #3bb58e;
	font-weight: 800;
	font-size: .3rem;
}

/* ===== COLLAPSIBLE ===== */
.collapsible {
	position: relative;
	max-height: var(--collapsed-max, 4.8rem);
	overflow: hidden;
	transition: max-height .5s ease;
}

.collapsible::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1.2rem;
	background: linear-gradient(to bottom, transparent, #fff 80%);
	pointer-events: none;
	transition: opacity .3s;
}

.collapsible.expanded {
	max-height: none;
}

.collapsible.expanded::after {
	opacity: 0;
}

.seo-article .collapsible::after {
	background: linear-gradient(to bottom, transparent, #fff 80%);
}

.collapse-toggle {
	display: inline-flex;
	align-items: center;
	padding: .04rem 0;
	margin: 0;
	border: none;
	background: transparent;
	color: #3bb58e;
	font-size: .26rem;
	font-weight: 600;
	cursor: pointer;
	text-align: right;
	transition: color .2s;
}

.collapse-toggle-slot {
	display: flex;
	justify-content: flex-end;
	margin: -.16rem 0 .1rem;
}

.quick-info>.collapse-toggle-slot {
	margin: -.08rem 0 .1rem;
}

.collapse-toggle::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: .1rem;
	border-left: .1rem solid transparent;
	border-right: .1rem solid transparent;
	border-top: .1rem solid #3bb58e;
	transition: transform .3s;
	vertical-align: middle;
}

.collapse-toggle.active::after {
	transform: rotate(180deg);
}

/* ===== SEO ARTICLE ===== */
.seo-article {
	margin: .18rem .2rem 0;
	padding: .16rem .18rem .2rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 9px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.article-body {
	margin-bottom: .08rem;
}

.article-body p,
.article-intro {
	font-size: .28rem;
	color: #555;
	line-height: 1.7;
	margin-bottom: .2rem;
}

.article-highlights {
	list-style: none;
	padding: 0;
	margin: .2rem 0;
	display: flex;
	flex-direction: column;
	gap: .12rem;
}

.article-highlights li {
	font-size: .28rem;
	color: #444;
	padding-left: .4rem;
	position: relative;
	line-height: 1.5;
}

.article-highlights li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #3bb58e;
	font-weight: 800;
}

.article-cta {
	font-size: .28rem;
	color: #3bb58e;
	font-weight: 700;
	margin-top: .16rem;
}

.article-heading {
	font-size: .34rem;
	font-weight: 800;
	color: #222;
	margin-bottom: .2rem;
	margin-top: .1rem;
}

.article-intro {
	margin-bottom: .3rem;
}

.feature-cards {
	display: flex;
	flex-direction: column;
	gap: .24rem;
	margin-bottom: .08rem;
}

.feature-card {
	background: #fff;
	padding: .18rem;
	border-radius: .14rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.feature-card h4 {
	font-size: .3rem;
	font-weight: 700;
	color: #222;
	margin-bottom: .16rem;
}

.feature-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 .12rem;
	display: flex;
	flex-direction: column;
	gap: .08rem;
}

.feature-card li {
	font-size: .26rem;
	color: #555;
	line-height: 1.5;
	padding-left: .32rem;
	position: relative;
}

.feature-card li::before {
	content: "\2022";
	position: absolute;
	left: .1rem;
	color: #3bb58e;
	font-weight: 800;
}

.feature-note {
	font-size: .24rem;
	color: #3bb58e;
	font-weight: 600;
	margin: 0;
}

.article-conclusion {
	background: #fff;
	padding: .16rem;
	border-radius: .14rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.article-conclusion p {
	font-size: .28rem;
	color: #555;
	line-height: 1.7;
	margin-bottom: .12rem;
}

/* ===== SEO CONTENT / FAQ ===== */
.seo-content {
	padding: .12rem .3rem;
	background: var(--bg-main);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.faq-item {
	background: var(--bg-main);
	border-radius: .14rem;
	overflow: hidden;
	border: 1px solid #eee;
}

.faq-question {
	display: block;
	padding: .26rem .3rem;
	font-size: .32rem;
	font-weight: 700;
	color: #333;
	cursor: pointer;
	position: relative;
	padding-right: .6rem;
}

.faq-question::after {
	content: "+";
	position: absolute;
	right: .3rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: .4rem;
	color: #3bb58e;
	font-weight: 700;
	transition: transform .3s;
}

.faq-question.active::after {
	content: "−";
}

.faq-answer {
	display: none;
	padding: 0 .3rem .26rem;
}

.faq-answer p {
	font-size: .28rem;
	color: #666;
	line-height: 1.65;
}

/* ===== TRUST BLOCK ===== */
.trust-block {
	margin: .18rem .2rem 0;
	padding: .16rem .18rem .2rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 9px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.trust-list {
	display: flex;
	flex-direction: column;
	gap: .24rem;
}

.trust-item {
	display: flex;
	align-items: flex-start;
	gap: .24rem;
	background: var(--bg-main);
	padding: .3rem;
	border-radius: .14rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.trust-img {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: .12rem;
	object-fit: cover;
	flex-shrink: 0;
}

.trust-text strong {
	font-size: .32rem;
	color: #222;
	display: block;
	margin-bottom: .08rem;
}

.trust-text p {
	font-size: .26rem;
	color: #777;
	line-height: 1.55;
}

/* ===== STATS / SOCIAL PROOF ===== */
.stats-block {
	padding: .5rem .3rem;
	background: var(--bg-main);
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

.grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: .3rem .15rem;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.grid-item:nth-child(2n) {
	border-right: none;
}

.grid-item:nth-child(n+3) {
	border-bottom: none;
}

.grid-item .digt {
	color: #3bb58e;
	font-size: .44rem;
	font-weight: 800;
}

.grid-item .dest {
	color: #888;
	font-size: .26rem;
	margin-top: .06rem;
}

.stat-icon {
	width: .42rem;
	height: .42rem;
	margin-bottom: .06rem;
	filter: brightness(0) saturate(100%) invert(62%) sepia(52%) saturate(452%) hue-rotate(111deg) brightness(92%) contrast(87%);
}

/* ===== LIVE STATUS ===== */
.live-status {
	padding: 0 .3rem;
	background: var(--bg-main);
}

.status-image-block {
	padding: 0 .3rem;
	background: var(--bg-main);
}

.quick-info .status-image-block,
.trust-block .status-image-block,
.seo-article .status-image-block {
	padding: 0;
	background: transparent;
}

.quick-info .section-placeholder p,
.trust-block .section-placeholder p,
.seo-article .section-placeholder p {
	margin: 0;
	font-size: .29rem;
	color: #4f4f4f;
	line-height: 1.62;
}

.status-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: .14rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.status-list {
	display: flex;
	flex-direction: column;
	gap: .16rem;
}

.status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding: .24rem .3rem;
	border-radius: .12rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.status-label {
	font-size: .28rem;
	color: #555;
	font-weight: 500;
}

.status-value {
	font-size: .28rem;
	color: #333;
	font-weight: 700;
}

.status-ok {
	color: #3bb58e;
}

/* ===== SOCIAL PROOF LIST ===== */
.social-proof-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.social-proof-item {
	display: flex;
	align-items: center;
	gap: .2rem;
	background: #fff;
	padding: .26rem .3rem;
	border-radius: .12rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.social-proof-value {
	font-size: .34rem;
	font-weight: 800;
	color: #3bb58e;
	min-width: 1.6rem;
}

.social-proof-text {
	font-size: .28rem;
	color: #555;
	font-weight: 500;
}

/* ===== CONTACT BLOCK ===== */
.contact-block {
	padding: 0 .3rem;
	background: var(--bg-main);
	margin-top: 20px;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: .2rem;
	background: #fff;
	padding: .24rem .26rem;
	min-height: 1.55rem;
	border-radius: .14rem;
	border: 1px solid transparent;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}

.contact-item:hover,
.contact-item:focus-visible {
	border-color: rgba(97, 227, 157, 0.9);
	box-shadow:
		0 0 0 1px rgba(171, 247, 207, 0.95) inset,
		0 0 0 1px rgba(97, 227, 157, 0.55),
		0 0 16px rgba(97, 227, 157, 0.45),
		0 8px 18px rgba(56, 182, 130, 0.22);
	transform: translateY(-1px);
}

.contact-item:active {
	transform: scale(0.97);
}

.contact-icon {
	width: 20%;
	height: auto;
	border-radius: .12rem;
	flex-shrink: 0;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: .02rem;
}

.contact-title {
	display: flex;
	flex-direction: column;
	gap: .08rem;
	margin-left: 20px;
}

.contact-title h3 {
	font-size: .4rem;
	font-weight: 700;
	color: #333;
	margin: 0;
	line-height: 1.3;
}

.contact-title .contact-subtitle {
	font-size: .28rem;
	color: #999;
	margin: 0;
	line-height: 1.3;
}

.contact-name {
	font-size: .3rem;
	font-weight: 700;
	color: #333;
}

.contact-sub {
	font-size: .28rem;
	color: #999;
}

/* ===== FOOTER ===== */
.footer {
	background: var(--bg-main);
	border-top: 1px solid #eee;
	padding: .08rem .3rem 1.2rem;
	text-align: center;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: .3rem;
	margin-bottom: .4rem;
}

.footer-links a {
	display: block;
}

.footer-links img {
	width: 1rem;
	height: auto;
	border-radius: .12rem;
	transition: transform .15s;
}

.footer-links img:active {
	transform: scale(0.95);
}

.footer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
}

.footer-logo-wrap {
	display: block;
	position: relative;
	width: 100%;
}

.footer-main-logos {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}



.age-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	border: 3px solid #3bb58e;
	font-size: .28rem;
	font-weight: 900;
	color: #3bb58e;
}

.footer-inner p {
	font-size: .24rem;
	color: #999;
	line-height: 1.5;
}

/* ===== FLOATING BAR MOBILE ===== */
.floating-bar {
	position: fixed;
	bottom: .2rem;
	left: 50%;
	transform: translateX(-50%);
	width: 7.5rem;
	display: flex;
	gap: .8rem;
	z-index: 1000;
}

.floating-btn {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .26rem 0;
	font-size: .4rem;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .15s, transform .18s cubic-bezier(.4,1.4,.6,1);
	animation: float-bounce 1.6s infinite cubic-bezier(.4,1.4,.6,1);
	border-radius: .3rem;
	text-align: center;
}

.floating-btn:active {
	opacity: .85;
	transform: scale(1.12);
}

.floating-login {
	background: #f8aa18;
	color: #fff;
}

.floating-go {
	background: #3bb58e;
	color: #fff;
}

/* ===== BACK TO TOP ===== */
.goTop {
	position: fixed;
	bottom: 1.6rem;
	right: .2rem;
	width: .7rem;
	height: .7rem;
	background: #3bb58e;
	color: var(--bg-main);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .28rem;
	cursor: pointer;
	z-index: 999;
	box-shadow: 0 2px 10px rgba(212, 160, 23, 0.3);
	opacity: 0;
	transition: opacity .3s;
}

.goTop.show {
	opacity: 1;
}

/* ===== APP STORE PAGE ===== */

/* -- Platform toggle -- */
.store-android .str-for-ios,
.store-ios .str-for-android { display: none !important; }

/* -- Shared base -- */
.store {
	min-height: 100vh;
	margin: 0 auto;
	padding-bottom: .4rem;
}

.store img { width: auto; }

.str-nav {
	display: flex;
	align-items: center;
	padding: .16rem .2rem;
	position: sticky;
	top: 0;
	z-index: 10;
	gap: .16rem;
}

.str-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: .48rem;
	height: .48rem;
	text-decoration: none;
}

.str-back svg {
	width: .36rem;
	height: .36rem;
}

.str-nav-title {
	font-size: .45rem;
	font-weight: 600;
}

/* App Header */
.str-app {
	display: flex;
	align-items: center;
	padding: .24rem;
	gap: .2rem;
}

.str-app-icon {
	width: 1.8rem;
	height: 1.8rem;
	flex-shrink: 0;
	object-fit: cover;
}

.str-app-meta {
	flex: 1;
	min-width: 0;
}

.str-app-name {
	font-size: .6rem;
	font-weight: 700;
	line-height: 1.2;
	color: #202124;
}

.str-app-dev {
	font-size: .36rem;
	margin-top: .06rem;
}

.str-app-cat {
	font-size: .3rem;
	color: #70757a;
	margin-top: .04rem;
}

/* iOS GET button */
.str-get {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 1.2rem;
	height: .56rem;
	border-radius: .28rem;
	font-size: .42rem;
	font-weight: 700;
	text-decoration: none;
	flex-shrink: 0;
	transition: opacity .2s;
}

.str-get:active { opacity: .7; }

/* Android Install button */
.str-install {
	padding: 0 .24rem .16rem;
	display: none;
}

.str-install-btn {
	display: block;
	width: 100%;
	text-align: center;
	font-size: .45rem;
	font-weight: 600;
	padding: .2rem 0;
	border-radius: .12rem;
	text-decoration: none;
	transition: opacity .2s;
}

.str-install-btn:active { opacity: .8; }

/* Stats Row */
.str-stats {
	display: flex;
	padding: .2rem 0;
	margin: 0 .24rem;
}

.str-stat {
	flex: 1;
	text-align: center;
	padding: .1rem 0;
}

.str-stat-val {
	font-size: .44rem;
	font-weight: 700;
	color: #202124;
}

.str-stat-lbl {
	font-size: .27rem;
	color: #70757a;
	margin-top: .04rem;
}

/* Sections */
.str-sec {
	padding: .28rem .24rem;
}

.str-sec-title {
	font-size: .45rem;
	font-weight: 700;
	color: #202124;
	margin-bottom: .2rem;
}

/* Screenshots */
.str-screens {
	display: flex;
	gap: .16rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: .08rem;
}

.str-screens::-webkit-scrollbar { display: none; }

.str-screen {
	flex: 0 0 auto;
	width: 2.1rem;
	aspect-ratio: 43 / 80;
	max-width: 70%;
	height: auto;
	object-fit: cover;
	display: block;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Description */
.str-desc {
	font-size: .39rem;
	line-height: 1.6;
	color: #444;
}

.str-version {
	font-size: .33rem;
	color: #8e8e93;
	margin-bottom: .12rem;
}

/* Chips */
.str-chips {
	display: flex;
	gap: .12rem;
	margin-top: .2rem;
	flex-wrap: wrap;
}

.str-chip {
	font-size: .3rem;
	padding: .08rem .2rem;
	border-radius: .3rem;
	border: 1px solid #dadce0;
	color: #5f6368;
}

/* Features */
.str-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .16rem;
}

.str-features li {
	font-size: .39rem;
	color: #444;
	padding-left: .36rem;
	position: relative;
	line-height: 1.5;
}

.str-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 700;
}

/* Ratings */
.str-rating {
	display: flex;
	gap: .3rem;
	align-items: center;
}

.str-rating-left {
	text-align: center;
	flex-shrink: 0;
	min-width: 1.4rem;
}

.str-rating-num {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
	color: #202124;
}

.str-rating-stars {
	font-size: .36rem;
	letter-spacing: .02rem;
	margin: .06rem 0;
}

.str-rating-count {
	font-size: .27rem;
	color: #70757a;
}

.str-rating-bars {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .08rem;
}

.str-bar-row {
	display: flex;
	align-items: center;
	gap: .1rem;
}

.str-bar-row > span {
	font-size: .3rem;
	color: #70757a;
	width: .2rem;
	text-align: right;
}

.str-bar {
	flex: 1;
	height: .14rem;
	background: #e8eaed;
	border-radius: .07rem;
	overflow: hidden;
}

.str-bar-fill {
	height: 100%;
	border-radius: .07rem;
}

/* Data Safety (Android) */
.str-safety {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.str-safety-item {
	display: flex;
	gap: .16rem;
	align-items: flex-start;
}

.str-safety-ico {
	font-size: .54rem;
	flex-shrink: 0;
	line-height: 1;
}

.str-safety-item strong {
	font-size: .36rem;
	color: #202124;
	display: block;
}

.str-safety-item p {
	font-size: .33rem;
	color: #70757a;
	margin-top: .04rem;
	line-height: 1.4;
}

/* Install Guide Steps */
.str-guide {
	display: flex;
	flex-direction: column;
	gap: .18rem;
}

.str-step {
	display: flex;
	align-items: center;
	gap: .16rem;
	font-size: .39rem;
	color: #444;
	line-height: 1.5;
}

.str-step-n {
	width: .44rem;
	height: .44rem;
	border-radius: 50%;
	color: #fff;
	font-size: .36rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Info Table */
.str-info-table {
	display: flex;
	flex-direction: column;
}

.str-info-row {
	display: flex;
	justify-content: space-between;
	padding: .16rem 0;
	font-size: .36rem;
}

.str-info-lbl { color: #70757a; }
.str-info-val { color: #202124; font-weight: 500; }

/* Footer */
.str-footer {
	text-align: center;
	padding: .4rem .24rem .2rem;
}

.str-footer-link {
	font-size: .39rem;
	text-decoration: none;
	display: inline-block;
	margin-bottom: .16rem;
}

.str-footer-copy {
	font-size: .3rem;
	color: #9aa0a6;
}

/* ======================================================
   ANDROID / GOOGLE PLAY STORE THEME
   ====================================================== */
.store-android {
	background: #fff;
}

.store-android .str-nav {
	background: #fff;
}

.store-android .str-back {
	color: #5f6368;
}

.store-android .str-app-icon {
	border-radius: 20%;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.store-android .str-app-dev {
	color: #01875f;
}

.store-android .str-get { display: none; }

.store-android .str-install {
	display: block;
}

.store-android .str-install-btn {
	background: #01875f;
	color: #fff;
}

.store-android .str-stats {
	border-top: 1px solid #e8eaed;
	border-bottom: 1px solid #e8eaed;
}

.store-android .str-stat + .str-stat {
	border-left: 1px solid #e8eaed;
}

.store-android .str-screen {
	border-radius: .16rem;
}

.store-android .str-rating-stars {
	color: #01875f;
}

.store-android .str-bar-fill {
	background: #01875f;
}

.store-android .str-chip {
	border-color: #c4e7d4;
	color: #01875f;
	background: #e6f5ec;
}

.store-android .str-features li::before {
	color: #01875f;
}

.store-android .str-step-n {
	background: #01875f;
}

.store-android .str-info-row {
	border-bottom: 1px solid #f1f3f4;
}

.store-android .str-info-row:last-child {
	border-bottom: none;
}

.store-android .str-footer-link {
	color: #01875f;
}

/* ======================================================
   iOS / APPLE APP STORE THEME
   ====================================================== */
.store-ios {
	background: #f2f2f7;
}

.store-ios .str-nav {
	background: rgba(242,242,247,.9);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.store-ios .str-back {
	color: #007AFF;
}

.store-ios .str-nav-title {
	color: #000;
}

.store-ios .str-app-icon {
	border-radius: 22.5%;
	box-shadow: 0 0 0 .5px rgba(0,0,0,.1);
	width: 1.8rem;
	height: 1.8rem;
}

.store-ios .str-app-dev {
	color: #8e8e93;
}

.store-ios .str-app-name {
	color: #000;
}

.store-ios .str-get {
	display: flex;
	background: #007AFF;
	color: #fff;
	width: 2rem;
	height: .6rem;
}

.store-ios .str-install { display: none; }

.store-ios .str-stats {
	background: #fff;
	border-radius: .2rem;
	margin: .12rem .2rem;
	padding: .16rem 0;
}

.store-ios .str-stat + .str-stat {
	border-left: 1px solid #e5e5ea;
}

.store-ios .str-stat-val { color: #8e8e93; }
.store-ios .str-stat-lbl { color: #8e8e93; }

.store-ios .str-sec {
	background: #fff;
	border-radius: .2rem;
	margin: .12rem .2rem;
	padding: .24rem;
}

.store-ios .str-sec-title {
	color: #000;
}

.store-ios .str-screen {
	border-radius: .2rem;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.store-ios .str-rating-stars {
	color: #FF9500;
}

.store-ios .str-bar-fill {
	background: #007AFF;
}

.store-ios .str-chip {
	background: #f2f2f7;
	border-color: #e5e5ea;
	color: #007AFF;
}

.store-ios .str-features li::before {
	color: #007AFF;
}

.store-ios .str-step-n {
	background: #007AFF;
}

.store-ios .str-info-row {
	border-bottom: 1px solid #f2f2f7;
}

.store-ios .str-info-row:last-child {
	border-bottom: none;
}

.store-ios .str-footer {
	margin-top: .1rem;
}

.store-ios .str-footer-link {
	color: #007AFF;
}

.store-ios .str-desc {
	color: #333;
}

.store-ios .str-safety-item strong,
.store-ios .str-info-val {
	color: #000;
}

/* ===== DESKTOP CAP ===== */
@media screen and (min-width: 751px) {

	body,
	html,
	.main,
	.footer {
		max-width: 576PX !important;
	}
}