/*
 * Chuyên trang dự án — template [WSU] Chuyên trang dự án
 * Author: ISB Team / URI: isb.edu.vn
 * Thiết kế: Figma WSU-LDP (node 1026-1096)
 */

.ldp {
	--ldp-red: #c80800;
	--ldp-red-light: #ff5c5e;
	--ldp-maroon: #7a0029;
	--ldp-grey-bg: #f2f2f2;
	--ldp-grey-line: #cccccc;
	--ldp-ink: #000102;
	--ldp-gap: 24px;

	font-family: "GothamNarrowVietHoa", sans-serif;
	color: var(--ldp-ink);
	overflow-x: hidden;
}

/* Ghi đè vài mặc định của Flatsome để khối này bám đúng thiết kế */
.ldp h2,
.ldp h3,
.ldp p,
.ldp a,
.ldp button {
	font-family: inherit;
}

/*
 * Flatsome đặt cho mọi <button>: min-width 24px, min-height 2.5em, margin-right 1em.
 * min-width làm bẹp chấm tròn 9px của slider, margin-right đẩy lệch nút trong thẻ
 * và nút đóng popup — reset cả ba ở đây thay vì vá từng nút.
 */
.ldp button {
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	text-shadow: none;
}

/* ---------------------------------------------------------------- Chung */
/* Khai nền trắng rõ ràng để không phụ thuộc nền body của Flatsome */
.ldp-section {
	padding: 64px 120px;
	background: #ffffff;
}

.ldp-container {
	max-width: 1200px;
	margin: 0 auto;
}

.ldp-heading {
	margin: 0;
	color: var(--ldp-red);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1px;
	text-transform: none;
}

.ldp-heading--center {
	text-align: center;
}

.ldp-heading--light {
	color: #ffffff;
}

.ldp-richtext,
.ldp-richtext p {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--ldp-ink);
	font-weight: 400;
}

.ldp-richtext p + p {
	margin-top: 16px;
}

.ldp-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ldp-red);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.ldp-link:hover,
.ldp-link:focus {
	color: var(--ldp-red-light);
}

.ldp-link svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.ldp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: var(--ldp-red-light);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.ldp-btn:hover,
.ldp-btn:focus {
	background: var(--ldp-red);
	color: #ffffff;
}

/* ------------------------------------------------- Điều hướng slider */
.ldp-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ldp-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ldp-red);
	cursor: pointer;
	margin: 0;
}

.ldp-nav__btn svg {
	width: 100%;
	height: 100%;
}

.ldp-nav__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ldp-nav__counter {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--ldp-red);
}

.ldp-nav__counter [data-ldp-total],
.ldp-nav__counter [data-ldp-popup-total] {
	color: var(--ldp-grey-line);
}

.ldp-nav--light .ldp-nav__btn {
	color: #fafbfe;
}

.ldp-nav--light .ldp-nav__counter {
	color: #fafbfe;
}

.ldp-nav--light .ldp-nav__counter [data-ldp-total] {
	color: #d3d2d2;
}

.ldp-nav--lg {
	gap: 24px;
}

.ldp-nav--lg .ldp-nav__btn {
	width: 32px;
	height: 32px;
}

.ldp-nav__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ldp-nav__dot {
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ldp-grey-line);
	cursor: pointer;
	margin: 0;
}

.ldp-nav__dot.is-active {
	background: var(--ldp-red);
}

/* --------------------------------------------------------------- Banner */
.ldp-banner__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ldp-banner__media--desktop {
	aspect-ratio: 2.5 / 1;
}

.ldp-banner__media--mobile img {
	height: auto;
}

.ldp-banner--responsive .ldp-banner__media--mobile {
	display: none;
}

/* ----------------------------------------------------------- Giới thiệu */
.ldp-intro__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ldp-gap);
	align-items: start;
}

.ldp-intro__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ldp-intro__media {
	position: relative;
	aspect-ratio: 1178 / 696;
}

.ldp-intro__media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------ Giá trị cốt lõi */
.ldp-core {
	background: var(--ldp-grey-bg);
}

.ldp-core__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: 40px;
	align-items: start;
}

.ldp-core__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.ldp-core__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.ldp-core__icon {
	width: 64px;
	height: 64px;
}

.ldp-core__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ldp-core__item-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--ldp-ink);
}

.ldp-core__item-desc {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--ldp-ink);
	font-weight: 400;
}

/* --------------------------------------------------- Hoạt động nổi bật */
.ldp-events {
	background: var(--ldp-maroon);
}

.ldp-events .ldp-heading {
	margin-bottom: var(--ldp-gap);
}

.ldp-events__slider {
	margin: 0 -12px var(--ldp-gap);
}

.ldp-events__slider .slick-track {
	display: flex;
}

.ldp-events__slider .slick-slide {
	display: flex;
	height: auto;
	float: none;
}

.ldp-events__slider .slick-slide > div {
	display: flex;
	width: 100%;
}

.ldp-events__slide {
	display: flex;
	width: 100%;
	padding: 0 12px;
}

.ldp-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 16px;
	background: #ffffff;
	border-top: 8px solid var(--ldp-red-light);
}

.ldp-card__media {
	aspect-ratio: 560 / 315;
}

.ldp-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ldp-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.ldp-card__title {
	width: 100%;
	margin: 0;
	color: var(--ldp-red);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-transform: uppercase;
}

.ldp-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
	font-size: 14px;
	line-height: 24px;
	color: #000000;
}

.ldp-card .ldp-btn {
	margin-top: 8px;
}

/* ------------------------------------------------------ Hình ảnh dự án */
.ldp-gallery .ldp-heading {
	margin-bottom: var(--ldp-gap);
}

.ldp-gallery__viewport {
	position: relative;
	width: 100vw;
	max-width: 1440px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.ldp-gallery__slide {
	padding: 0 20px;
}

.ldp-gallery__media {
	aspect-ratio: 852 / 479;
	opacity: 0.2;
	transform: scale(0.76);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.ldp-gallery__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ldp-gallery__caption {
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #000000;
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* Ảnh hai bên thu nhỏ về phía ảnh giữa để mép trong không bị hụt vào */
.ldp-gallery__slider .slick-slide:has(+ .slick-center) .ldp-gallery__media {
	transform-origin: right center;
}

.ldp-gallery__slider .slick-center + .slick-slide .ldp-gallery__media {
	transform-origin: left center;
}

.ldp-gallery__slider .slick-center .ldp-gallery__media {
	opacity: 1;
	transform: none;
}

.ldp-gallery__slider .slick-center .ldp-gallery__caption {
	opacity: 1;
}

.ldp-gallery__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 294px;
	max-width: 20%;
	pointer-events: none;
	z-index: 2;
}

.ldp-gallery__fade--left {
	left: 0;
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.ldp-gallery__fade--right {
	right: 0;
	background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.ldp-gallery .ldp-nav {
	margin-top: var(--ldp-gap);
}

/* ---------------------------------------------------------------- Popup */
.ldp-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.ldp-popup[hidden] {
	display: none;
}

.ldp-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.ldp-popup__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	max-width: 1200px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 40px;
	background: #ffffff;
	border-top: 8px solid var(--ldp-red-light);
}

.ldp-popup__close {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ldp-red);
	cursor: pointer;
	z-index: 2;
}

.ldp-popup__close svg {
	width: 100%;
	height: 100%;
}

.ldp-popup__item[hidden] {
	display: none;
}

.ldp-popup__title {
	margin: 0 48px 24px 0;
	color: var(--ldp-red);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-transform: uppercase;
}

.ldp-popup__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
	align-items: start;
}

.ldp-popup__media {
	aspect-ratio: 560 / 315;
}

.ldp-popup__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ldp-popup__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ldp-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}

.ldp-stats__number {
	margin: 0 0 4px;
	font-size: 32px;
	font-weight: 700;
	line-height: 32px;
	color: var(--ldp-ink);
}

.ldp-stats__label {
	margin: 0;
	font-size: 14px;
	line-height: 24px;
	color: var(--ldp-ink);
}

body.ldp-popup-open {
	overflow: hidden;
}

/* ----------------------------------------------------------- Tablet */
@media (max-width: 1199px) {
	.ldp-section {
		padding: 48px 40px;
	}

	.ldp-heading {
		font-size: 30px;
	}

	.ldp-intro__media::before {
		left: -24px;
		bottom: -24px;
	}

	.ldp-core__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ldp-popup__dialog {
		gap: 24px;
		padding: 24px;
	}

	.ldp-popup__close {
		top: 24px;
		right: 24px;
	}
}

/* ----------------------------------------------------------- Mobile */
@media (max-width: 849px) {
	.ldp-section {
		padding: 40px 24px;
	}

	.ldp-banner--responsive .ldp-banner__media--desktop {
		display: none;
	}

	.ldp-banner--responsive .ldp-banner__media--mobile {
		display: block;
	}

	.ldp-intro__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ldp-intro__media::before {
		left: -16px;
		bottom: -16px;
	}

	.ldp-core__item-title {
		font-size: 16px;
		line-height: 24px;
	}

	.ldp-core__item-desc {
		font-size: 14px;
		line-height: 20px;
	}

	.ldp-core__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ldp-gallery__slide {
		padding: 0 8px;
	}

	.ldp-gallery__fade {
		display: none;
	}

	.ldp-gallery__media {
		transform: scale(0.9);
	}

	.ldp-popup {
		padding: 16px;
	}

	.ldp-popup__dialog {
		padding: 16px;
		max-height: 92vh;
	}

	/* Nền trắng để icon đóng nổi trên ảnh */
	.ldp-popup__close {
		top: 24px;
		right: 24px;
		padding: 4px;
		border-radius: 50%;	
		background: rgba(255, 255, 255, 0.9);
	}

	/* Thiết kế mobile xếp ảnh lên trên tiêu đề */
	.ldp-popup__item {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.ldp-popup__grid {
		display: contents;
	}

	.ldp-popup__media {
		order: -1;
	}

	.ldp-popup__title {
		margin: 0;
		font-size: 20px;
		line-height: 28px;
	}

	.ldp-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 8px;
	}

	.ldp-stats__number {
		font-size: 24px;
		line-height: 28px;
	}
}