/* ==========================================================================
   SREC — New page designs (Trang chủ, Giới thiệu câu lạc bộ, Mentor)
   Scoped under .srec2-page so it never touches the legacy srec CSS.
   ========================================================================== */

.srec2-page {
	--srec2-primary: #0e6b5c;
	--srec2-primary-dark: #0a4f45;
	--srec2-bg-mint: #dcece7;
	--srec2-bg-mint-soft: #e9f2ef;
	--srec2-bg-cream: #f5efe3;
	--srec2-text: #1f2d2b;
	--srec2-text-soft: #4a5a57;
	--srec2-white: #ffffff;
	--srec2-radius: 16px;
	--srec2-container: 1200px;

	color: var(--srec2-text);
	font-size: 14px;
	line-height: 1.6;
	overflow-x: hidden;
	/* The legacy header has an uncleared `.mid-header{float:left;width:100%}`.
	   overflow-x:hidden makes this element establish a new block-formatting
	   context, which would otherwise shrink to fit beside that 100%-wide
	   float (i.e. to 0). Clearing it drops it below the float instead. */
	clear: both;
}

.srec2-page * {
	box-sizing: border-box;
}

.srec2-page img {
	max-width: 100%;
	display: block;
}

.srec2-container {
	/* max-width: var(--srec2-container); */
	/* margin: 0 auto; */
	padding: 0 24px;
}

.srec2-page a {
	text-decoration: none;
	color: inherit;
}

/* ---------- Section titles ---------- */

.srec2-title-lg {
	font-size: 34px;
	font-weight: 800;
	color: var(--srec2-primary);
	text-align: center;
	margin: 0 0 12px;
}

.srec2-title-underline {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 32px;
}

.srec2-title-underline h2 {
	font-size: 28px;
	font-weight: 800;
	color: var(--srec2-primary);
	margin: 0;
	white-space: nowrap;
}

.srec2-title-underline .srec2-line {
	flex: 1;
	height: 2px;
	background: var(--srec2-primary);
	opacity: .5;
}

.srec2-pill-btn {
	display: inline-block;
	background: var(--srec2-primary);
	color: var(--srec2-white);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 26px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: background .2s ease;
}

/* `.srec2-page a { color: inherit }` (0,1,1) otherwise beats the class alone
   (0,1,0) whenever this is rendered as an <a>, e.g. inside .srec2-mentor-card. */
a.srec2-pill-btn {
	color: var(--srec2-white);
}

.srec2-pill-btn:hover {
	background: var(--srec2-primary-dark);
}

/* ==========================================================================
   TRANG CHỦ
   ========================================================================== */

/* Hero banner: see Assets/srec2-banner.css (full-bleed image blocks) */

/* "Bạn đã sẵn sàng khám phá SREC?" features block: see Assets/srec2-features.css */

/* "SREC qua các góc nhìn có gì đặc biệt?" testimonials block: see Assets/srec2-quotes.css */

/* ---- News ---- */

.srec2-news {
	padding: 24px 0 56px;
}

.srec2-news-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
}

.srec2-news-big img {
	border-radius: 6px;
	width: 100%;
	margin-bottom: 16px;
}

.srec2-news-big h3 {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 10px;
}

.srec2-news-meta {
	font-size: 13px;
	color: #959595;
	font-weight: bold;
}

.srec2-news-small {
	display: flex;
	gap: 20px;
	padding: 20px 0;
}

.srec2-news-small:first-child {
	padding-top: 0;
}

.srec2-news-small > a {
	flex-shrink: 0;
}

.srec2-news-small img {
	width: 160px;
	height: 100px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.srec2-news-small h4 {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.35;
}

/* ---- Contact ---- */

.srec2-contact {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	background: var(--srec2-white);
}

.srec2-contact-left {
	background: var(--srec2-primary);
	color: var(--srec2-white);
	padding: 56px 48px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
}

.srec2-contact-right {
	padding: 56px 48px;
}

.srec2-contact-right h2 {
	color: var(--srec2-primary);
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 28px;
}

.srec2-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 18px;
}

.srec2-form-group label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}

.srec2-form-group label .req {
	color: #d0433f;
}

.srec2-form-group input,
.srec2-form-group select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: var(--srec2-white);
}

.srec2-form-actions {
	text-align: right;
	margin-top: 8px;
}

/* ==========================================================================
   GIỚI THIỆU CÂU LẠC BỘ
   ========================================================================== */

.srec2-club-hero {
	padding: 40px 0;
	text-align: center;
}

.srec2-club-hero h1 {
	font-size: 28px;
	font-weight: 800;
	color: var(--srec2-primary);
	margin: 0 0 24px;
	line-height: 1.4;
}

.srec2-club-hero-media {
	position: relative;
	border-radius: var(--srec2-radius);
	overflow: hidden;
	max-width: 980px;
	margin: 0 auto;
}

.srec2-club-hero-media img {
	width: 100%;
}

.srec2-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--srec2-primary);
}

.srec2-club-about {
	background: #DBECEC;
	padding: 40px 0;
}

.srec2-club-about-grid {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: center;
	padding: 0 48px;
}

.srec2-club-about-grid p {
	font-size: 18px;
	text-align: center;
	margin: 0;
}

.srec2-memories {
	padding: 64px 0;
	text-align: center;
}

.srec2-memories img {
	width: 100%;
}

.srec2-values {
	background: #DBECEC;
	padding: 64px 0;
	text-align: center;
}

.srec2-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.srec2-value-card {
	background: #EAF7F4;
	border-radius: 10px;
	padding: 32px 24px;
}

.srec2-value-card img {
	margin: auto;
}

.srec2-value-card h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--srec2-primary);
	margin: 0 0 10px;
}

.srec2-value-card p {
	font-size: 14px;
	color: var(--srec2-text-soft);
	margin: 0;
}

.srec2-departments {
	/* padding: 48px 0; */
	background: #fbf7f4;
}

.srec2-departments > .srec2-container > h2 {
	text-align: center;
	font-size: 30px;
	font-weight: 800;
	color: var(--srec2-primary);
	padding: 48px 0;
	margin:  0;
}

.srec2-dept-row {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 40px;
	align-items: start;
	/* margin-bottom: 48px; */
	font-size: 16px;
	padding: 32px 48px;
	/* border-radius: var(--srec2-radius); */
}

.srec2-dept-row:last-child {
	margin-bottom: 0;
}

.srec2-dept-row:nth-child(2),
.srec2-dept-row:nth-child(4) {
	background: #fbf7f4;
}

.srec2-dept-row:nth-child(3) {
	background: #ffffff;
	direction: rtl;
}

.srec2-dept-row:nth-child(3) > * {
	direction: ltr;
}

.srec2-dept-row img {
	width: 100%;
	object-fit: cover;
}

.srec2-dept-row h3 {
	font-size: 22px;
	font-weight: 800;
	color: var(--srec2-primary);
	margin: 0 0 14px;
}

.srec2-dept-row p {
	margin: 0;
	color: var(--srec2-text-soft);
}

/* ==========================================================================
   BAN CỐ VẤN / MENTOR / ĐIỀU HÀNH
   ========================================================================== */

.srec2-mentor-banner {
	background: var(--srec2-bg-cream);
	padding: 48px 0;
	text-align: center;
}

.srec2-mentor-banner h1 {
	font-size: 32px;
	font-weight: 800;
	color: var(--srec2-primary);
	margin: 0;
}

.srec2-mentor-group {
	padding: 56px 0;
}

.srec2-mentor-group:nth-child(odd) {
	background: var(--srec2-bg-cream);
}

.srec2-mentor-group-head {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.srec2-mentor-group-head h2 {
	font-size: 24px;
	font-weight: 800;
	color: var(--srec2-text);
	margin: 0;
}

.srec2-mentor-group-head p {
	margin: 0;
	color: var(--srec2-text-soft);
	font-size: 15px;
}

.srec2-mentor-carousel {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.srec2-mentor-track {
	display: flex;
	justify-content: center;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
}

.srec2-mentor-track::-webkit-scrollbar {
	display: none;
}

.srec2-mentor-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: 200px;
	background: var(--srec2-bg-mint-soft);
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 18px;
}

.srec2-mentor-card img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin-bottom: 14px;
}

.srec2-mentor-card h4 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 4px;
	padding: 0 10px;
}

.srec2-mentor-card .srec2-role {
	font-size: 13px;
	color: var(--srec2-primary);
	font-weight: 600;
	margin: 0 0 12px;
}

.srec2-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--srec2-white);
	border: 1px solid #ddd;
	color: var(--srec2-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	z-index: 2;
}

.srec2-carousel-arrow.prev {
	left: -18px;
}

.srec2-carousel-arrow.next {
	right: -18px;
}

/* ---- Member modal (Ban Cố vấn / Mentor / Điều hành "Xem thêm") ---- */

.srec2-member-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

.srec2-member-modal.is-open {
	display: flex;
}

.srec2-member-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

.srec2-member-modal-dialog {
	position: relative;
	display: flex;
	background: var(--srec2-white);
	border-radius: var(--srec2-radius);
	overflow: hidden;
	max-width: 640px;
	width: calc(100% - 48px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.srec2-member-modal-media {
	flex: 0 0 40%;
}

.srec2-member-modal-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srec2-member-modal-body {
	flex: 1;
	padding: 32px;
}

.srec2-member-modal-name {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--srec2-text);
}

.srec2-member-modal-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--srec2-primary);
	margin-bottom: 14px;
}

.srec2-member-modal-desc {
	font-size: 14px;
	color: var(--srec2-text-soft);
	margin: 0 0 20px;
}

.srec2-member-modal-links {
	display: flex;
	gap: 20px;
}

.srec2-member-modal-links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--srec2-primary);
}

.srec2-member-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--srec2-bg-mint-soft);
	color: var(--srec2-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 640px) {
	.srec2-member-modal-dialog {
		flex-direction: column;
		max-height: 90vh;
		overflow-y: auto;
	}

	.srec2-member-modal-media {
		flex: 0 0 auto;
		height: 220px;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
	.srec2-news-grid,
	.srec2-contact,
	.srec2-club-about-grid,
	.srec2-dept-row {
		grid-template-columns: 1fr;
	}

	.srec2-dept-row:nth-child(3) {
		direction: ltr;
	}

	.srec2-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.srec2-title-lg {
		font-size: 24px;
	}

	.srec2-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.srec2-form-row {
		grid-template-columns: 1fr;
	}

	.srec2-mentor-card {
		width: 160px;
	}
}