/* Nhan Viet Landing — frontend styles */

.nvl-page {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	font-family: Georgia, 'Times New Roman', serif;
	color: #fff;
}

/* Language switch, top-left flags */
.nvl-lang-switch {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 30;
	display: flex;
	gap: 8px;
}
.nvl-lang-btn {
	display: inline-block;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	font-size: 20px;
	line-height: 1;
	padding: 6px 8px;
	cursor: pointer;
	opacity: 0.6;
	text-decoration: none;
	transition: opacity .2s;
}
.nvl-lang-btn:hover {
	opacity: 1;
}
.nvl-page[data-lang="vi"] .nvl-lang-btn[data-lang="vi"],
.nvl-page[data-lang="en"] .nvl-lang-btn[data-lang="en"] {
	opacity: 1;
}

/* Centered logo, above all 3 blocks */
.nvl-logo {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	text-align: center;
	pointer-events: none;
}
.nvl-logo img {
	max-height: 120px;
	width: auto;
}

/* Language visibility toggle */
.nvl-page[data-lang="vi"] .nvl-lang-en { display: none; }
.nvl-page[data-lang="en"] .nvl-lang-vi { display: none; }

/* 3 full-height columns. Each .nvl-block keeps a FIXED position/width at all
   times (icon/title/button never move or resize) — only its background photo
   (.nvl-block-bg-full) is allowed to expand past its own box to cover the
   full row on hover, exactly like washingtonenglish.edu.vn's program blocks. */
.nvl-blocks {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
}

.nvl-block {
	position: absolute;
	top: 0;
	left: 0;
	width: 33.3333%;
	height: 100%;
	background-color: #2d1f5e;
	display: flex;
	align-items: center;
	justify-content: center;
	/* padding: 0 24px; */
	/* No z-index here: keeps this from creating its own stacking context,
	   so a sibling's expanded .nvl-block-bg-full can paint above this
	   block's own background while its .nvl-block-content (z-index 20)
	   still always wins over any background, on any block. */
}
.nvl-block:nth-child(1) { left: 0; }
.nvl-block:nth-child(2) { left: 33.3333%; }
.nvl-block:nth-child(3) { left: 66.6666%; }

.nvl-block-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: cover;
	background-position: center;
	transition: opacity .45s ease, left .45s ease, width .45s ease;
}
.nvl-block-bg-full {
	opacity: 0;
}
.nvl-block:has(.nvl-block-content:hover) .nvl-block-bg-short {
	opacity: 0;
}
.nvl-block:has(.nvl-block-content:hover) .nvl-block-bg-full {
	opacity: 1;
	z-index: 10;
	width: 300%; /* 300% of this block's own 1/3 width = the full row width */
}
/* Shift the expanded photo so it always spans the full row from edge to edge,
   regardless of which of the 3 columns is being hovered. */
.nvl-block:nth-child(1):has(.nvl-block-content:hover) .nvl-block-bg-full { left: 0; }
.nvl-block:nth-child(2):has(.nvl-block-content:hover) .nvl-block-bg-full { left: -100%; }
.nvl-block:nth-child(3):has(.nvl-block-content:hover) .nvl-block-bg-full { left: -200%; }

.nvl-block::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(30, 20, 60, 0.55);
	z-index: 15;
	pointer-events: none;
	transition: opacity .3s ease;
}

/* While one block's content is hovered, drop the color tint of the OTHER
   blocks too, so only their raw (dimmer) photo remains, no leftover color wash. */
.nvl-blocks:has(.nvl-block-content:hover) .nvl-block:not(:has(.nvl-block-content:hover))::before,
.nvl-blocks:has(.nvl-block-content:hover) .nvl-block:not(:has(.nvl-block-content:hover)) .nvl-block-bg-short {
	opacity: 0;
}

.nvl-theme-indigo::before { background: rgba(40, 25, 90, 0.6); }
.nvl-theme-light::before  { background: rgba(255, 255, 255, 0.55); }
.nvl-theme-pink::before   { background: rgba(160, 20, 110, 0.55); }
.nvl-theme-light .nvl-title,
.nvl-theme-light .nvl-icon { color: #2d1f5e; }

.nvl-block-content {
	position: relative;
	z-index: 20; /* stays above any block's background, expanded or not, so it
	                remains reachable to switch the hover to this block */
	text-align: center;
	max-width: 100%;
	transition: opacity .2s ease;
}

/* While one block's content is being hovered, hide the icon/title of the
   OTHER blocks so the expanded photo reads as a clean full takeover (their
   own background is already covered underneath). They stay interactive (just
   invisible) so moving the pointer onto them still switches the hover. */
.nvl-blocks:has(.nvl-block-content:hover) .nvl-block:not(:has(.nvl-block-content:hover)) .nvl-block-content {
	opacity: 0;
}

.nvl-icon {
	width: 150px;
	height: 150px;
	margin: 0 auto 24px;
	border-radius: 50%;
	position: relative;
	transition: width .4s ease, height .4s ease;
}
.nvl-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.nvl-icon svg {
	width: 100%;
	height: 100%;
}
.nvl-block:has(.nvl-block-content:hover) .nvl-icon {
	width: 150px;
	height: 150px;
}

.nvl-title {
	font-size: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	line-height: 1.4;
	transition: font-size .4s ease;
}
.nvl-block:has(.nvl-block-content:hover) .nvl-title {
	font-size: 22px;
}

/* Description + button: hidden by default, revealed once the panel expands */
.nvl-desc {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.9;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s ease, opacity .3s ease, margin .4s ease;
	padding: 0px 40px;
}
.nvl-block:has(.nvl-block-content:hover) .nvl-desc {
	max-height: 200px;
	margin: 20px 0 0;
}

.nvl-button {
	display: inline-block;
	border: 1px solid #fff;
	border-radius: 30px;
	padding: 12px 32px;
	color: #fff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	max-height: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s, color .2s;
}
.nvl-block:has(.nvl-block-content:hover) .nvl-button {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	max-height: none;
	margin-top: 24px;
	transform: translateY(0);
}
.nvl-button:hover {
	background: #fff;
	color: #2d1f5e;
}

/* Footer */
.nvl-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 32px;
	background: rgba(0, 0, 0, 0.35);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	flex-wrap: wrap;
	pointer-events: none;
}
.nvl-footer * {
	pointer-events: auto;
}

.nvl-socials {
	display: flex;
	gap: 12px;
}
.nvl-social-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: #2d1f5e;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform .2s;
}
.nvl-social-icon:hover {
	transform: translateY(-2px);
}
.nvl-social-icon svg {
	width: 16px;
	height: 16px;
}

.nvl-footer-text {
	margin: 0;
	font-weight: 700;
	color: #fff;
}

@media (max-width: 900px) {
	.nvl-blocks {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.nvl-block,
	.nvl-block:nth-child(1),
	.nvl-block:nth-child(2),
	.nvl-block:nth-child(3) {
		position: relative;
		left: auto;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 48px 0px;
	}
	.nvl-block-bg-full,
	.nvl-block:nth-child(1):has(.nvl-block-content:hover) .nvl-block-bg-full,
	.nvl-block:nth-child(2):has(.nvl-block-content:hover) .nvl-block-bg-full,
	.nvl-block:nth-child(3):has(.nvl-block-content:hover) .nvl-block-bg-full {
		opacity: 1;
		left: 0;
		width: 100%;
	}
	.nvl-blocks:has(.nvl-block-content:hover) .nvl-block:not(:has(.nvl-block-content:hover)) .nvl-block-content,
	.nvl-blocks:has(.nvl-block-content:hover) .nvl-block:not(:has(.nvl-block-content:hover))::before,
	.nvl-blocks:has(.nvl-block-content:hover) .nvl-block:not(:has(.nvl-block-content:hover)) .nvl-block-bg-short {
		opacity: 1;
	}
	.nvl-icon,
	.nvl-block:has(.nvl-block-content:hover) .nvl-icon {
		width: 96px;
		height: 96px;
	}
	.nvl-title,
	.nvl-block:has(.nvl-block-content:hover) .nvl-title {
		font-size: 24px;
		white-space: normal;
	}
	.nvl-desc,
	.nvl-block:has(.nvl-block-content:hover) .nvl-desc {
		max-height: none;
		margin: 20px 0 0;
	}
	.nvl-button,
	.nvl-block:has(.nvl-block-content:hover) .nvl-button {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		margin-top: 24px;
	}
	.nvl-logo {
		position: static;
		transform: none;
		margin: 24px auto;
	}
	.nvl-footer {
		position: static;
		background: #1a1030;
	}
}