/*
 * mobile.css — fix responsive cho các section trên màn hình nhỏ.
 * Chỉ chứa @media overrides; không viết rule desktop ở đây.
 */

/* ── Global: Section h2 & padding ── */
@media (max-width: 767px) {
	section h2 {
		font-size: 26px !important;
	}

	section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* ── Stories: đảo vị trí h2 desktop/mobile ── */
@media (max-width: 767px) {
	.vs-stories-title--mobile  { display: block !important; }
	.vs-stories-title--desktop { display: none  !important; }
}

/* ── Chào mừng: h2 riêng (to hơn default 26px) ── */
@media (max-width: 767px) {
	#chao-mung h2 {
		font-size: 36px !important;
	}
}

/* ── Chân dung K12: domain cards scroll indicator ── */
@media (max-width: 767px) {
	.vs-cd-cards-wrap {
		position: relative;
	}

	.vs-cd-cards-wrap::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 56px;
		background: linear-gradient(to right, transparent, #D2E0D7);
		pointer-events: none;
		z-index: 1;
	}

	.vs-cd-domain-cards {
		overflow-x: auto;
		scrollbar-width: none;
		grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
		padding-right: 32px;
	}

	.vs-cd-domain-cards::-webkit-scrollbar {
		display: none;
	}
}

/* ── Hệ thống trường: Nền tảng ── */
@media (max-width: 767px) {
	.vs-nt-desc {
		text-align: justify !important;
	}
}

/* ── Pandora / East Hanoi: hero bottom padding ── */
@media (max-width: 767px) {
	.vs-hero-bottom {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* ── Hero (tất cả page) ── */
@media (max-width: 767px) {
	#hero h1 {
		font-size: 28px !important;
	}
}

/* ── About Us: Why ── */
@media (max-width: 767px) {
	.vs-why-au-slide-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px !important;
	}

	.vs-why-au-slide-img {
		order: -1 !important;
	}
}

/* ── About Us: Story ── */
@media (max-width: 767px) {
	.vs-story-text {
		text-align: justify !important;
	}
}

/* ── Team: Đồng hành ── */
@media (max-width: 767px) {
	.vs-dong-hanh-desc {
		text-align: justify !important;
	}
}

/* ── Roadmap phát triển (mầm non / tiểu học / THCS / THPT) ── */
@media (max-width: 767px) {
	#phat-trien {
		overflow: visible !important;
	}

	.vs-rm-outer {
		display: none !important;
	}

	.vs-rm-list {
		display: flex !important;
	}
}

/* ── Home: Welcome ── */
@media (max-width: 767px) {
	.vs-welcome-desc {
		max-width: none !important;
	}
}

/* ── Home: Proof / Stats ── */
@media (max-width: 767px) {
	.vs-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.vs-stats-item {
		box-shadow: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		align-items: center !important;
		text-align: center !important;
	}

	.vs-stats-item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		width: 50%;
		margin: 0 auto;
	}
}

/* ── Home: Stories ── */
@media (max-width: 767px) {
	#cau-chuyen .vs-story-slide blockquote {
		font-size: 22px !important;
		text-align: left !important;
	}
}


/* ── Home: News ── */
@media (max-width: 767px) {
	.vs-news-cta {
		display: none !important;
	}
}

/* ── Utility ── */
@media (max-width: 767px) {
	.downline {
		display: inline !important;
	}
}

/* ── Footer: cột 1 logo + mô tả ngang nhau ── */
@media (max-width: 767px) {
	.vs-footer-col-1 {
		display: grid !important;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 12px 16px;
	}

	.vs-footer-col-1 > div {
		grid-column: 1 / -1;
	}
}

/* ── Trải nghiệm: Wellbeing ── */
@media (max-width: 767px) {
	#wellbeing {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.vs-wb-grid {
		display: flex !important;
		flex-direction: column;
		align-items: center;
	}

	.vs-wb-side {
		width: 100%;
	}

	.vs-wb-item-l,
	.vs-wb-right .vs-wb-item {
		width: min(310px, 100%);
		margin: 0 auto;
		justify-content: flex-start !important;
	}

	/* Reorder left items: icon trước, text sau */
	.vs-wb-item-l > span:not(.vs-wb-connector) {
		order: 1;
		flex-shrink: 0;
	}

	.vs-wb-item-l > .vs-wb-item-text {
		order: 2;
		text-align: left !important;
	}

	/* Text fill phần còn lại trong fixed-width item, wrap đúng */
	.vs-wb-item-text {
		flex: 1;
		min-width: 0;
		max-width: none !important;
	}

	/* Ẩn connector cả 2 phía */
	.vs-wb-item-l > .vs-wb-connector,
	.vs-wb-right .vs-wb-connector {
		display: none !important;
	}
}

/* ── Trải nghiệm: Ngoài trời ── */
@media (max-width: 767px) {
	#ngoai-troi {
		height: auto !important;
	}

	.vs-nt-content {
		display: block !important;
		height: auto !important;
		padding: 48px 0 40px !important;
	}

	.vs-nt-polaroids {
		position: static !important;
		margin-top: 24px !important;
		justify-content: center !important;
	}
}

/* ── Trải nghiệm: Học tập ── */
@media (max-width: 767px) {
	.vs-tn-ht-image,
	.vs-tn-ht-card {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	.vs-tn-ht-card {
		margin-top: 0 !important;
	}
}

/* ── Trải nghiệm: CLB & dự án ── */
@media (max-width: 767px) {
	.vs-clb-card-content {
		align-items: center !important;
		text-align: center !important;
	}
}

/* ── Trải nghiệm: anchor nav ── */
@media (max-width: 767px) {
	#vs-tn-anchor {
		padding: 0 10px !important;
		top: 65px !important;
	}
}

/* ── Tuyển sinh: FAQ panel ── */
@media (max-width: 767px) {
	[id^="vs-ts-faq-panel"] {
		min-height: 0 !important;
	}
}

/* ── Pandora: Sự kiện ── */
@media (max-width: 767px) {
	.vs-ts-ev-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ── Pandora: Tuyển sinh — hàng khối lớp ── */
@media (max-width: 767px) {
	.vs-pdr-grade-row {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 8px !important;
	}
}

/* ── Pandora / East Hanoi: Đội ngũ header ── */
@media (max-width: 767px) {
	.vs-team-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}
}

/* ── Pandora / East Hanoi: Vì sao chọn grid ── */
@media (max-width: 767px) {
	.vs-pdr-vi-sao-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 32px !important;
	}

	.vs-pdr-reasons-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ── Home: Experience ── */
@media (max-width: 767px) {
	.vs-exp-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}

	.vs-exp-header .vs-link-underline {
		margin-left: 0 !important;
	}
}

/* page.php — hero & content */
@media (max-width: 767px) {
	.vs-page-hero-content {
		padding: 0 20px 40px !important;
	}

	.vs-page-body {
		padding: 40px 20px 56px !important;
	}
}

@media (max-width: 767px) {
	.ccsb-bottom-left {
		left: auto;
		right: 0;
	}
}

/* ── Hero: banner mobile ── */
@media (max-width: 767px) {
	.vs-hero-img--desktop { display: none !important; }
	.vs-hero-img--mobile  { display: block !important; }
}