/**
 * Bổ trợ responsive cho Ladipage (index.zip).
 * Không thay layout gốc — chỉ sửa overflow, video, form, popup trên mobile.
 */

/* Ẩn badge "Powered by Ladipage" — JS gỡ class ngẫu nhiên; CSS dự phòng */
.ladi-notify,
.ladipage_powered_by,
[class*="ladipage_powered"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	position: fixed !important;
	left: -9999px !important;
	bottom: auto !important;
	z-index: -1 !important;
}

/* Nút "Đăng ký ngay" — bỏ gạch chân (Ladipage mặc định .ladi-headline a { underline }) */
.ladi-button .ladi-headline a,
.ladi-button-headline .ladi-headline a,
.ladi-button-headline a {
	text-decoration: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Menu neo trong trang — bù header cố định 70px */
#gioithieu,
#SECTION11,
#cacchuyennganh,
#thongtintuyensinh,
#khampha {
	scroll-margin-top: 80px;
}

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

.ladi-wraper {
	overflow-x: hidden;
	max-width: 100vw;
}

.ladi-section,
.ladi-section .ladi-container {
	max-width: 100%;
}

/* Không đặt max-width cho .ladi-image-background — Ladipage dùng position/size tuyệt đối */
.ladi-image img {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Gallery ảnh trường (GALLERY1, section Khám phá) — không phải đối tác (SECTION9)
   Autoplay: script_event_data ah/ae + initKhamphaGalleryAutoplay() trong JS plugin
   -------------------------------------------------------------------------- */
#GALLERY1 .ladi-gallery-view > .ladi-gallery-view-item {
	transition: transform 200ms ease-in-out !important;
}

#GALLERY1.ladi-gallery-fullwidth .ladi-gallery-view-item {
	transition-duration: 800ms !important;
}

/* --------------------------------------------------------------------------
   Slider thẻ ngành (CAROUSEL9 + TABS8): căn ảnh sát viền trong khung xanh
   -------------------------------------------------------------------------- */
#SECTION11 [id^="CAROUSEL_ITEM"] .ladi-frame,
#SECTION11 [id^="CAROUSEL_ITEM"] .ladi-frame-bg,
#cacchuyennganh #TABS8 .ladi-frame,
#cacchuyennganh #TABS8 .ladi-frame-bg {
	overflow: hidden !important;
}

/* Nhóm cột ảnh bên trái — bám sát viền trong (trừ 4px border) */
#SECTION11 #GROUP164,
#SECTION11 #GROUP165,
#SECTION11 #GROUP166,
#SECTION11 #GROUP167,
#SECTION11 #GROUP168,
#SECTION11 #GROUP169,
#SECTION11 #GROUP170,
#SECTION11 #GROUP171,
#SECTION11 #GROUP172,
#SECTION11 #GROUP173,
#SECTION11 #GROUP174,
#SECTION11 #GROUP175,
#cacchuyennganh #TABS8 #GROUP79,
#cacchuyennganh #TABS8 #GROUP80,
#cacchuyennganh #TABS8 #GROUP81,
#cacchuyennganh #TABS8 #GROUP82,
#cacchuyennganh #TABS8 #GROUP83,
#cacchuyennganh #TABS8 #GROUP84 {
	top: 4px !important;
	left: 4px !important;
}

#SECTION11 #IMAGE225 > .ladi-image,
#SECTION11 #IMAGE226 > .ladi-image,
#SECTION11 #IMAGE227 > .ladi-image,
#SECTION11 #IMAGE228 > .ladi-image,
#SECTION11 #IMAGE229 > .ladi-image,
#SECTION11 #IMAGE230 > .ladi-image,
#cacchuyennganh #TABS8 #IMAGE131 > .ladi-image,
#cacchuyennganh #TABS8 #IMAGE132 > .ladi-image,
#cacchuyennganh #TABS8 #IMAGE133 > .ladi-image,
#cacchuyennganh #TABS8 #IMAGE134 > .ladi-image,
#cacchuyennganh #TABS8 #IMAGE135 > .ladi-image,
#cacchuyennganh #TABS8 #IMAGE136 > .ladi-image {
	border: none !important;
	border-radius: 34px 34px 0 0 !important;
	overflow: hidden !important;
}

#SECTION11 #IMAGE225 > .ladi-image > .ladi-image-background,
#SECTION11 #IMAGE226 > .ladi-image > .ladi-image-background,
#SECTION11 #IMAGE227 > .ladi-image > .ladi-image-background,
#SECTION11 #IMAGE228 > .ladi-image > .ladi-image-background,
#SECTION11 #IMAGE229 > .ladi-image > .ladi-image-background,
#SECTION11 #IMAGE230 > .ladi-image > .ladi-image-background,
#cacchuyennganh #TABS8 #IMAGE131 > .ladi-image > .ladi-image-background,
#cacchuyennganh #TABS8 #IMAGE132 > .ladi-image > .ladi-image-background,
#cacchuyennganh #TABS8 #IMAGE133 > .ladi-image > .ladi-image-background,
#cacchuyennganh #TABS8 #IMAGE134 > .ladi-image > .ladi-image-background,
#cacchuyennganh #TABS8 #IMAGE135 > .ladi-image > .ladi-image-background,
#cacchuyennganh #TABS8 #IMAGE136 > .ladi-image > .ladi-image-background {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* --------------------------------------------------------------------------
   Hero banner (#SECTION2): bỏ viền trắng lộ ở đáy section
   -------------------------------------------------------------------------- */
#SECTION2 {
	background-color: rgb(29, 48, 176) !important;
	overflow: hidden !important;
}

#SECTION2 > .ladi-section-background {
	height: 100% !important;
	min-height: 100% !important;
	background-size: cover !important;
	background-position: center bottom !important;
	background-origin: border-box !important;
	background-repeat: no-repeat !important;
	padding: 0 !important;
}

#SECTION2 > .ladi-container {
	min-height: inherit;
}

/* Thanh đối tác (GROUP5) luôn bám đáy — Ladipage mobile để top cố định gây hở trắng */
#SECTION2 #GROUP5 {
	top: auto !important;
	bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Section Giới thiệu (#gioithieu): collage ảnh SV + khung trắng bên trái
   -------------------------------------------------------------------------- */
#gioithieu,
#gioithieu > .ladi-container {
	overflow: visible !important;
}

#gioithieu #GROUP27,
#gioithieu #GROUP26 {
	max-width: 100%;
}

/* Khung ảnh — clip gọn trong border trắng */
#gioithieu #IMAGE28 > .ladi-image,
#gioithieu #IMAGE29 > .ladi-image,
#gioithieu #IMAGE30 > .ladi-image,
#gioithieu #IMAGE31 > .ladi-image {
	overflow: hidden !important;
}

/* Bỏ left/top âm trên background — gây cắt mất đầu ảnh SV */
#gioithieu #IMAGE28 > .ladi-image > .ladi-image-background,
#gioithieu #IMAGE29 > .ladi-image > .ladi-image-background,
#gioithieu #IMAGE30 > .ladi-image > .ladi-image-background,
#gioithieu #IMAGE31 > .ladi-image > .ladi-image-background {
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Vòng tròn nền xanh đậm */
#gioithieu #IMAGE24 > .ladi-image > .ladi-image-background {
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-size: contain !important;
	background-position: center center !important;
}

/* Icon máy bay / sách — không tràn ra ngoài mép trái */
#gioithieu #IMAGE32 {
	left: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
	.ladi-popup .ladi-popup-box {
		max-width: calc(100vw - 32px) !important;
	}
}

/* Mobile — Ladipage breakpoint 767px */
@media (max-width: 767px) {
	.ladi-headline,
	.ladi-paragraph,
	.ladi-list-paragraph {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.ladi-form .ladi-form-control,
	.ladi-form select,
	.ladi-form textarea {
		font-size: 16px !important; /* Tránh zoom tự động trên iOS */
		min-height: 44px;
	}

	.ladi-button {
		min-height: 44px;
	}

	/* Video / iframe YouTube */
	.ladi-video,
	#VIDEO2,
	[id^="VIDEO"] {
		max-width: 100% !important;
	}

	.ladi-video iframe,
	.ladi-video > iframe {
		max-width: 100% !important;
	}

	/* Popup đăng ký */
	.ladi-popup {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	.ladi-popup .ladi-popup-box {
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		right: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		transform: none !important;
	}

	/* Menu mobile */
	.ladi-menu-popup {
		max-width: 100vw;
	}

	/* Ảnh nền section không tràn */
	.ladi-section-background {
		background-size: cover !important;
		background-position: center top !important;
	}

	/* Hero: giữ nền bám đáy (rule chung ở trên ghi đè center bottom) */
	#SECTION2 > .ladi-section-background {
		background-position: center bottom !important;
		background-origin: border-box !important;
	}

	/* Slider ngành — mobile: bỏ offset Ladipage gây hở trắng */
	#SECTION11 #GROUP169,
	#SECTION11 #GROUP165,
	#SECTION11 #GROUP167,
	#SECTION11 #GROUP171,
	#SECTION11 #GROUP173,
	#SECTION11 #GROUP175,
	#cacchuyennganh #TABS8 #GROUP81,
	#cacchuyennganh #TABS8 #GROUP80,
	#cacchuyennganh #TABS8 #GROUP82,
	#cacchuyennganh #TABS8 #GROUP83,
	#cacchuyennganh #TABS8 #GROUP84 {
		top: 4px !important;
		left: 4px !important;
	}

	#SECTION11 #IMAGE227,
	#SECTION11 #IMAGE225,
	#SECTION11 #IMAGE226,
	#SECTION11 #IMAGE228,
	#SECTION11 #IMAGE229,
	#SECTION11 #IMAGE230,
	#cacchuyennganh #TABS8 #IMAGE133,
	#cacchuyennganh #TABS8 #IMAGE131,
	#cacchuyennganh #TABS8 #IMAGE132,
	#cacchuyennganh #TABS8 #IMAGE134,
	#cacchuyennganh #TABS8 #IMAGE135,
	#cacchuyennganh #TABS8 #IMAGE136 {
		left: 0 !important;
	}

	/* Giới thiệu — căn giữa collage trên mobile */
	#gioithieu #GROUP27 {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}

	#gioithieu #IMAGE32 {
		left: 8px !important;
	}

	#gioithieu #IMAGE33 {
		left: auto !important;
		right: 12px !important;
	}

	#gioithieu #HEADLINE22 {
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 90% !important;
		max-width: 379px !important;
	}

	/* Hero mobile — sóng nền (IMAGE2) khít trên thanh GROUP5, không hở trắng giữa */
	#SECTION2 #IMAGE2 {
		top: auto !important;
		bottom: 237.751px !important;
	}

	#SECTION2 #GROUP5 {
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 100% !important;
		max-width: 420px !important;
		height: auto !important;
		min-height: 70px !important;
	}

	#SECTION2 #GROUP52,
	#SECTION2 #BOX10 {
		max-height: calc(100% - 80px);
	}
}

/* Điện thoại nhỏ */
@media (max-width: 480px) {
	.ladi-popup .ladi-popup-box {
		padding: 16px !important;
	}

	.ladi-button .ladi-headline {
		font-size: 14px !important;
		line-height: 1.3 !important;
	}
}

/* Landscape mobile */
@media (max-width: 767px) and (orientation: landscape) {
	.ladi-section[data-sticky="true"] {
		position: relative !important;
	}

	.ladi-wraper[data-padding-top-id] {
		padding-top: 56px !important;
	}
}