/* ============================================================
   Mèo Vay — pages.css (giới thiệu + liên hệ + chính sách + 404)
   ============================================================ */

/* ---------- Giới thiệu ---------- */
.vm-about-page { padding-bottom: 0; }
.vm-about-intro {
	max-width: 1080px;
	margin: 0 auto;
	padding: 60px 32px 0;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 56px;
	align-items: center;
}
.vm-about-h1 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 44px;
	line-height: 1.12;
	color: var(--vm-ink);
	margin: 12px 0 0;
	text-wrap: pretty;
}
.vm-about-p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--vm-sub);
	margin: 14px 0 0;
	text-wrap: pretty;
}
.vm-about-p strong { color: var(--vm-ink); }
.vm-about-stats {
	display: flex;
	gap: 26px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.vm-about-stat-num {
	font-family: var(--vm-font-head);
	font-size: 30px;
	font-weight: 800;
	color: var(--vm-ink);
	margin: 0;
}
.vm-about-stat-label {
	font-size: 13px;
	font-weight: 600;
	color: #6B7280;
	margin: 2px 0 0;
}
.vm-about-photo-frame--light {
	background: #FFFFFF;
	padding: 14px;
	box-shadow: 0 30px 60px -30px rgba(31, 34, 39, .4);
}
.vm-about-photo-imgwrap {
	background: var(--vm-cream);
	border-radius: 18px;
	overflow: hidden;
}
.vm-about-photo-imgwrap img {
	width: 100%;
	height: auto;
	display: block;
}
.vm-about-photo-frame--light p {
	font-size: 12.5px;
	font-weight: 600;
	color: #6B7280;
	text-align: center;
	margin: 10px 0 4px;
}
.vm-about-sec {
	max-width: 1080px;
	margin: 0 auto;
	padding: 80px 32px 0;
}
.vm-about-sec--cta { padding-top: 70px; }
.vm-center { text-align: center; }
.vm-about-sec .vm-h2 { font-size: 32px; }
.vm-principles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 32px;
}
.vm-principle {
	background: #FFFFFF;
	border: 1px solid var(--vm-border-card);
	border-radius: var(--vm-r-card);
	padding: 26px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.vm-principle:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 44px -24px rgba(31, 34, 39, .28);
}
.vm-principle-img {
	height: 110px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: radial-gradient(ellipse 70% 62% at 50% 68%, #FFF1C4, rgba(255, 241, 196, 0) 72%);
}
.vm-principle-img img { width: auto; }
.vm-principle h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--vm-ink);
	margin: 16px 0 0;
}
.vm-principle p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--vm-sub);
	margin: 8px 0 0;
}
.vm-revenue {
	margin: 80px 14px 0;
	background: #FFFFFF;
	border: 1px solid var(--vm-border-card);
	border-radius: var(--vm-r-panel);
	padding: 64px 0;
}
.vm-revenue-inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 32px;
}
.vm-revenue h2 {
	font-family: var(--vm-font-head);
	font-weight: 700;
	font-size: 30px;
	color: var(--vm-ink);
	margin: 0;
}
.vm-revenue p {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--vm-sub);
	margin: 16px 0 0;
}
.vm-revenue p + p { margin-top: 12px; }
.vm-revenue strong { color: var(--vm-ink); }
.vm-team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 32px;
}
.vm-team-card {
	background: #FFFFFF;
	border: 1px solid var(--vm-border-card);
	border-radius: var(--vm-r-card);
	padding: 28px;
	text-align: center;
}
.vm-team-card--mascot {
	background: #FFF9E8;
	border: 1.5px dashed #F3DFA0;
}
.vm-team-card--mascot img {
	height: 76px;
	width: auto;
	animation: vmFloat 6s ease-in-out infinite;
}
.vm-team-avatar {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vm-font-head);
	font-size: 26px;
	font-weight: 800;
	color: #FFFFFF;
}
.vm-team-card h3 {
	font-family: var(--vm-font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--vm-ink);
	margin: 14px 0 0;
}
.vm-team-role {
	font-size: 13px;
	font-weight: 600;
	color: var(--vm-amber-text);
	margin: 3px 0 0;
}
.vm-team-bio {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--vm-sub);
	margin: 10px 0 0;
}
.vm-team-card > a {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	margin-top: 12px;
	text-decoration: none;
}
.vm-banner--about { margin-top: 0; }

/* ---------- Liên hệ ---------- */
.vm-contact-main {
	max-width: 1020px;
	margin: 0 auto;
	padding: 52px 32px 0;
}
.vm-contact-head { max-width: 560px; }
.vm-contact-head h1 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.12;
	color: var(--vm-ink);
	margin: 10px 0 0;
}
.vm-contact-head p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--vm-sub);
	margin: 12px 0 0;
}
.vm-contact-cols {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 20px;
	margin-top: 32px;
	align-items: start;
}
.vm-contact-info {
	display: grid;
	gap: 14px;
}
.vm-contact-card {
	background: #FFFFFF;
	border: 1px solid var(--vm-border-card);
	border-radius: 20px;
	padding: 20px 24px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.vm-contact-icon {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: #FFF1C4;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vm-contact-card-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--vm-ink);
	margin: 0;
}
.vm-contact-card-val {
	font-size: 13.5px;
	color: var(--vm-sub);
	margin: 4px 0 0;
}
.vm-contact-card-note {
	font-size: 12px;
	color: var(--vm-muted);
	margin: 2px 0 0;
}
.vm-contact-warn {
	background: #FFF9E8;
	border: 1.5px dashed #F3DFA0;
	border-radius: 20px;
	padding: 18px 22px;
	display: flex;
	gap: 12px;
	align-items: center;
}
.vm-contact-warn img {
	height: 56px;
	width: auto;
	flex: none;
}
.vm-contact-warn p {
	font-size: 13px;
	line-height: 1.6;
	color: #57430A;
	margin: 0;
}
.vm-contact-formbox {
	background: #FFFFFF;
	border: 1px solid var(--vm-border-card);
	border-radius: var(--vm-r-card);
	padding: 28px 32px;
}
.vm-contact-formbox h2 {
	font-family: var(--vm-font-head);
	font-weight: 700;
	font-size: 22px;
	color: var(--vm-ink);
	margin: 0;
}
.vm-contact-topic-label {
	font-size: 13px;
	font-weight: 600;
	color: #6B7280;
	margin: 16px 0 8px;
}
.vm-contact-topics { flex-wrap: wrap; }
.vm-contact-msg { margin-top: 12px; }
.vm-contact-sent {
	text-align: center;
	padding: 26px 10px;
	animation: vmPop .3s ease;
}
.vm-contact-sent img {
	height: 150px;
	width: auto;
	animation: vmFloat 5s ease-in-out infinite;
}
.vm-contact-sent h2 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 26px;
	color: var(--vm-ink);
	margin: 16px 0 0;
}
.vm-contact-sent p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--vm-sub);
	margin: 10px auto 0;
	max-width: 380px;
}
.vm-contact-sent strong { color: var(--vm-ink); }
.vm-contact-sent .vm-btn--ghost { margin-top: 20px; }

/* ---------- Chính sách ---------- */
.vm-policy-main, .vm-page-main {
	max-width: 1040px;
	margin: 0 auto;
	padding: 44px 32px 0;
}
.vm-policy-main {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 28px;
	align-items: start;
}
.vm-policy-side {
	position: sticky;
	top: 86px;
	display: grid;
	gap: 8px;
}
.vm-policy-side-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vm-muted);
	margin: 0 0 4px 14px;
}
.vm-policy-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s ease;
	background: transparent;
	color: #454B54;
}
.vm-policy-nav:hover { background: #FFF6DF; color: var(--vm-ink); }
.vm-policy-nav.is-active {
	background: var(--vm-ink);
	color: #F7F8F9;
}
.vm-policy-help {
	margin-top: 14px;
	background: #FFF9E8;
	border: 1.5px dashed #F3DFA0;
	border-radius: 16px;
	padding: 14px 16px;
}
.vm-policy-help p {
	font-size: 12.5px;
	line-height: 1.6;
	color: #57430A;
	margin: 0;
}
.vm-policy-help a { font-weight: 700; }
.vm-art {
	background: #FFFFFF;
	border: 1px solid var(--vm-border-card);
	border-radius: 26px;
	padding: 36px 42px 40px;
}
.vm-policy-art h1 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.15;
	color: var(--vm-ink);
	margin: 0;
}
.vm-policy-date {
	font-size: 13px;
	font-weight: 600;
	color: var(--vm-muted);
	margin: 8px 0 0;
}
.vm-policy-content .vm-doc-summary {
	background: #F7F8FA;
	border: 1px solid #E6E8EC;
	border-radius: 16px;
	padding: 14px 18px;
	margin-top: 18px;
}
.vm-policy-content .vm-doc-summary p {
	font-size: 13.5px;
	line-height: 1.65;
	color: #4B5563;
	margin: 0;
}
.vm-policy-content h2 {
	font-family: var(--vm-font-head);
	font-weight: 700;
	font-size: 20px;
	color: var(--vm-ink);
	margin: 28px 0 0;
}
.vm-policy-content p {
	font-size: 14.5px;
	line-height: 1.8;
	color: #383D46;
	margin: 10px 0 0;
}
.vm-policy-footer {
	border-top: 1px solid #ECEEF2;
	margin-top: 32px;
	padding-top: 20px;
}
.vm-policy-footer p {
	font-size: 13px;
	line-height: 1.7;
	color: var(--vm-muted);
	margin: 0;
}

/* ---------- 404 ---------- */
.vm-404 {
	min-height: calc(100vh - 320px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
}
.vm-404-inner {
	text-align: center;
	max-width: 560px;
	position: relative;
}
.vm-404-paws {
	position: absolute;
	left: -120px;
	top: 20px;
	height: 220px;
	width: auto;
	opacity: .4;
	transform: rotate(-14deg);
	pointer-events: none;
}
.vm-404-cat {
	width: 280px;
	height: auto;
	animation: vmFloat 7s ease-in-out infinite;
}
.vm-404-code {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 72px;
	line-height: 1;
	color: var(--vm-ink);
	margin: 8px 0 0;
}
.vm-404-code span { color: var(--vm-yellow); }
.vm-404 h2 {
	font-family: var(--vm-font-head);
	font-weight: 700;
	font-size: 26px;
	color: var(--vm-ink);
	margin: 10px 0 0;
}
.vm-404 p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--vm-sub);
	margin: 12px 0 0;
}
.vm-404-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
	flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.vm-principles, .vm-team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.vm-about-intro, .vm-contact-cols { grid-template-columns: 1fr !important; }
	.vm-policy-main { grid-template-columns: 1fr; }
	.vm-policy-side { position: static; }
}
@media (max-width: 640px) {
	.vm-about-h1 { font-size: 34px; }
	/* 3 số liệu: hàng 3 cột đều nhau + vạch ngăn (flex-wrap cũ bị lệch 2+1). */
	.vm-about-stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}
	.vm-about-stats > div { padding: 0 12px; border-left: 1px solid var(--vm-border-card); }
	.vm-about-stats > div:first-child { padding-left: 0; border-left: none; }
	.vm-about-stat-num { font-size: 22px; }
	.vm-about-stat-label { font-size: 11.5px; line-height: 1.45; margin-top: 4px; }
	.vm-contact-head h1 { font-size: 32px; }
	/* Nguyên tắc + đội ngũ → slider vuốt ngang (giống mục Lợi ích). */
	.vm-mslider { position: relative; }
	.vm-principles, .vm-team {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scroll-padding-left: 2px;
		gap: 14px;
		padding: 4px 2px 12px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.vm-principles::-webkit-scrollbar, .vm-team::-webkit-scrollbar { display: none; }
	.vm-principle, .vm-team-card {
		flex: none;
		width: 80%;
		scroll-snap-align: start;
	}
	.vm-about-intro { padding: 40px 20px 0; }
	.vm-about-sec, .vm-contact-main, .vm-policy-main { padding-left: 20px; padding-right: 20px; }
	.vm-art { padding: 26px 22px; }
	.vm-contact-formbox { padding: 22px 20px; }
	.vm-404-paws { display: none; }
}