/* 1199 */

@media screen and (max-width: 1199.5px) {
	h2{
		font-size: 34px !important;
	}
	h3{
		font-size: 30px !important;
	}
	h4{
		font-size: 21px !important;
	}
	.container{
		padding-left: 15px;
		padding-right: 15px;
	}
	.menu {
		flex-wrap: wrap !important;
	}
	.custom-col:nth-child(2),
	.custom-col:nth-child(3) {
		display: none; /* Ẩn cột thứ 2 và thứ 3 */
	}
	
	.background-content{
		top: 45% !important;
		width: 50% !important;
	}
	.half-image {
		width: 100%; /* Chỉ hiển thị 50% bên phải của hình ảnh */
		overflow: hidden; /* Ẩn phần còn lại */
	}

	.half-image img {
		position: absolute;
		left: -82%;
		width: 200%;
		object-fit: contain;
	}
	.col-md-6{
		iframe{
			width: 100%;
		}
	}
	iframe{
		width: 300px;
		height: 180px;
	}
	.boxServices{
		.call-now{
			flex-direction: column;
			.btn{
				margin-top: 5px;
			}
		}
	}
	.header {
		height: 66px;
	}
	.header i{
		font-size: 30px;
		line-height: 110%;
	}
	svg {
		height: 28;
		width: 28px;
	}

	.menu{
		.btn{
			display: none;
		}
	}
	.logo{
		margin: auto;
		width: 400px;
	}
	.header-left-mobile{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #25AAE1;
		z-index: 9999;
		box-shadow: 0px 6px 6px 10px rgba(0, 0, 0, 0.2);
		transition: all 0.6s ease-in-out; /* Áp dụng chuyển đổi mượt */
		transform: translate(-100%,0);
		visibility: hidden; /* Ẩn phần tử */
		transform-style: preserve-3d; /* Đảm bảo hỗ trợ hiệu ứng 3D */
		.title-menu {
			text-align: center;
			position: relative;
			margin-bottom: 20px;
			h2 {
				position: relative;
				display: inline-block;
				padding: 5px;
				background: #004070;
				border-radius: 10px;
				color: white;
				font-size: 28px;
				line-height: 34px;
				text-transform: uppercase;
				margin: 0;
				z-index: 9;
			}
		}
		.title-menu::after{
			width: 100%;
			height: 2px;
			background-color: #fff;
			bottom: 10px;
			left: 0;
			content: "";
			position: absolute;
		}
		.menu-2{
			ul{
				margin: 0;
				padding: 0;
	
				li{
					display: block;
					position: relative;
					overflow: auto;
					padding: 6px 0;
					&:hover{
						background: rgba(0, 0, 0, 0.4);
					}
					a{
						color: #fff;
						font-weight: bold;
						text-transform: uppercase;
						position: relative;
						display: block;
						margin: 0;
						padding: 30px 40px;
						font-size: 28px;
						line-height: 40px;
						transition: all 0.35s linear;
					}
				}
			}
		}
		}
	
		#header-left-mobile.active{
			transform: translate(0, 0); /* Di chuyển phần tử về vị trí gốc */
			visibility: visible; /* Hiển thị phần tử */
		}
	
		#header-right.active {
			transform: translate(0, 0); /* Di chuyển phần tử về vị trí gốc */
			visibility: visible; /* Hiển thị phần tử */
		}
		
		.header-right {
			position: fixed;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: white;
			font-size: 30px;
			transition: all 0.6s ease-in-out; /* Áp dụng chuyển đổi mượt */
			transform: translate(100%, 0); /* Ban đầu nằm ngoài màn hình */
			visibility: hidden; /* Ẩn phần tử */
			transform-style: preserve-3d; /* Đảm bảo hỗ trợ hiệu ứng 3D */
			li {
				a {
					font-weight: 600; /* Kiểu chữ đậm */
				}
			}
		}
		
		.menu-toggle-icon {
			top: 0px;
			right: 0;
			position: absolute;
			cursor: pointer;
			margin-left: 10px;
	  }
	  .sub-menu {
		display: none; /* Hide all submenus by default */
	  }
	  
	  .sub-menu.show {
		display: block; /* Show submenu when the 'show' class is added */
	  }
	  .icon-menu {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	  
		i {
		  margin-right: 10px;
		  font-size: 24px;
		}
	  }
	  .pl-300{
		padding-left: 0;
	}
	.menu-mobile{
		display: block;
	}
	.menu-pc{
		display: none;
	}
	.banner{
		height: 30vh;
	}
	.icon-menu{
		display: none;
	}
}

/* 991 */

@media screen and (max-width: 991.5px) {
	h2{
		font-size: 34px !important;
	}
	h3{
		font-size: 24px !important;
	}
	h4{
		font-size: 21px !important;
	}
	.container{
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.menu {
		flex-wrap: wrap !important;
	}
	iframe{
		width: 255px;
		height: 180px;
	}
	.grid-partner .partner-item img {
		width: 65px;
		height: 50px;
	}
	.custom-col:nth-child(2),
	.custom-col:nth-child(3) {
		display: none; /* Ẩn cột thứ 2 và thứ 3 */
	}
	
	.background-img img {
		object-fit: cover;
	}
	.background-content{
		top: 45% !important;
		width: 50% !important;
	}
	.col-md-6{
		iframe{
			width: 100%;
		}
	}
	.boxServices{
		.call-now{
			flex-direction: column;
			.btn{
				margin-top: 5px;
			}
		}
	}
	iframe {
        width: 220px;
        height: 180px;
    }
	.menu{
		.btn{
			display: none;
		}
	}
	.header-left-mobile{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #25AAE1;
		z-index: 9999;
		box-shadow: 0px 6px 6px 10px rgba(0, 0, 0, 0.2);
		transition: all 0.6s ease-in-out; /* Áp dụng chuyển đổi mượt */
		transform: translate(-100%,0);
		visibility: hidden; /* Ẩn phần tử */
		transform-style: preserve-3d; /* Đảm bảo hỗ trợ hiệu ứng 3D */
		.title-menu {
			text-align: center;
			position: relative;
			margin-bottom: 20px;
			h2 {
				position: relative;
				display: inline-block;
				padding: 5px;
				background: #004070;
				border-radius: 10px;
				color: white;
				font-size: 28px;
				line-height: 34px;
				text-transform: uppercase;
				margin: 0;
				z-index: 9;
			}
		}
		.title-menu::after{
			width: 100%;
			height: 2px;
			background-color: #fff;
			bottom: 10px;
			left: 0;
			content: "";
			position: absolute;
		}
		.menu-2{
			ul{
				margin: 0;
				padding: 0;
	
				li{
					display: block;
					position: relative;
					overflow: auto;
					padding: 6px 0;
					&:hover{
						background: rgba(0, 0, 0, 0.4);
					}
					a{
						color: #fff;
						font-weight: bold;
						text-transform: uppercase;
						position: relative;
						display: block;
						margin: 0;
						padding: 10px 40px;
						font-size: 15px;
						line-height: 21px;
						transition: all 0.35s linear;
					}
				}
			}
		}
		}
	
		#header-left-mobile.active{
			transform: translate(0, 0); /* Di chuyển phần tử về vị trí gốc */
			visibility: visible; /* Hiển thị phần tử */
		}
	
		#header-right.active {
			transform: translate(0, 0); /* Di chuyển phần tử về vị trí gốc */
			visibility: visible; /* Hiển thị phần tử */
		}
		
		.header-right {
			position: fixed;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: white;
			font-size: 22px;
			transition: all 0.6s ease-in-out; /* Áp dụng chuyển đổi mượt */
			transform: translate(100%, 0); /* Ban đầu nằm ngoài màn hình */
			visibility: hidden; /* Ẩn phần tử */
			transform-style: preserve-3d; /* Đảm bảo hỗ trợ hiệu ứng 3D */
			li {
				a {
					font-weight: 600; /* Kiểu chữ đậm */
				}
			}
		}
		
		.menu-toggle-icon {
			top: 0px;
			right: 0;
			position: absolute;
			cursor: pointer;
			margin-left: 10px;
	  }
	  .sub-menu {
		display: none; /* Hide all submenus by default */
	  }
	  
	  .sub-menu.show {
		display: block; /* Show submenu when the 'show' class is added */
	  }
	  .icon-menu {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	  
		i {
		  margin-right: 10px;
		  font-size: 24px;
		}
	  }
	  .pl-300{
		padding-left: 0;
	}
	.menu-mobile{
		display: block;
	}
	.menu-pc{
		display: none;
	}
	.banner{
		height: 30vh;
	}
	.icon-menu{
		display: none;
	}
}

/* 767 */

@media screen and (max-width: 767.5px) {
	h1{
		font-size: 32px !important;
	}
	h2{
		font-size: 28px !important;
	}
	h3{
		font-size: 20px !important;
	}
	h4{
		font-size: 18px !important;
	}
	.container{
		padding-left: 15px;
		padding-right: 15px;
	}
	.menu{
		flex-wrap: nowrap !important;
	}
	.custom-col:nth-child(2),
	.custom-col:nth-child(3) {
		display: none; /* Ẩn cột thứ 2 và thứ 3 */
	}
	.media-column {
		display: flex;
		flex-direction: column !important; /* Change direction to column */
	}

	.col, .col-4{
		width: 100%;
	}

	.custom-li {
		margin-bottom: 20px;
	}
	.custom-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	.custom-icon{
		margin: auto;
	}

	.col {
		text-align: center;
	}
	.background-img img{
		object-fit: cover;
	}
	.mb-3{
		text-align: start;
	}
	.navbar.responsive .navbar-nav {
		display: flex; /* Hiện menu khi ở chế độ responsive */
	}
	.menu {
		flex-wrap: wrap !important;
	}
	
	.container-min_height{
		min-height: 540px;
	}
	.background-content{
		top: 40% !important;
		width: 30% !important;
	}
	.container-min_height{
		display: flex;
		flex-direction: column !important;
	}
	.custom-translate{
		flex-direction: column !important;
		.fix-mobile{
			width: 100% !important;
		}
	}
	.fix-mobile-colum{
		width: 100%;
	}
	.content_high_light{
		height: 440px !important;
	}
	.fix-ipad{
		display: none;
	}
	.fix-mobile-content{
		display: block;
	}
	.half-image {
		width: 100%; /* Chỉ hiển thị 50% bên phải của hình ảnh */
		overflow: hidden; /* Ẩn phần còn lại */
	}

	.half-image img {
		position: absolute;
		left: -100%;
		width: 200%;
		object-fit: contain;
	}
	.background-menu {
		min-height: 450px;
	}
	.background-img{
		height: 560px;
	}
	.listServices {
		display: grid;
		gap: 10px 10px;
		grid-template-columns: repeat(2, 1fr);
	}
	.col-md-6{
		iframe{
			margin-bottom: 30px;
			height: 30vh;
			width: 100%;
		}
	}
	.menu{
		.col-md-2{
			justify-content: space-between;
			display: flex;
			.logo{
				width: 50%;
			}
			.btn{
				display: none;
			}
		}
	}
	.banner{
		.the_content{
			width: 100%;
		}
	}
	.bg-gray{
		background-color: var(--gray);
		.the_content{
		  span{
			  font-size: 17px;
			  color: white;
			  line-height: 28px;
			  font-weight: 400;
		  }
		  li{
			  list-style: disc;
			  &::marker {
				  color: white;
				  unicode-bidi: isolate;
				  font-variant-numeric: tabular-nums;
				  text-transform: none;
				  text-indent: 0px !important;
				  text-align: start !important;
				  text-align-last: start !important;
			  }
		  }
	  }
	  }
	  .aboutUs{
		ul{
			padding: 20px;
		}
	}
	.heading-with-flag{
		text-align: center;
	}
	.boxServices{
		.call-now{
			flex-direction: column;
			.btn{
				margin-top: 5px;
			}
		}
	}
	.grid-rooms {
		display: grid
	;
		grid-template-columns: repeat(1, 1fr);
	}
	.pl-300{
		padding-left: 0;
	}
	.menu-mobile{
		display: block;
	}
	.menu-pc{
		display: none;
	}
	.banner{
		height: 30vh;
	}
	.icon-menu{
		display: none;
	}
	.header-left-mobile{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #25AAE1;
	z-index: 9999;
	box-shadow: 0px 6px 6px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.6s ease-in-out; /* Áp dụng chuyển đổi mượt */
	transform: translate(-100%,0);
	visibility: hidden; /* Ẩn phần tử */
	transform-style: preserve-3d; /* Đảm bảo hỗ trợ hiệu ứng 3D */
	.title-menu {
		text-align: center;
		position: relative;
		margin-bottom: 20px;
		h2 {
			position: relative;
			display: inline-block;
			padding: 5px;
			background: #004070;
			border-radius: 10px;
			color: white;
			font-size: 28px;
			line-height: 34px;
			text-transform: uppercase;
			margin: 0;
			z-index: 9;
		}
	}
	.title-menu::after{
		width: 100%;
		height: 2px;
		background-color: #fff;
		bottom: 10px;
		left: 0;
		content: "";
		position: absolute;
	}
	.menu-2{
		ul{
			margin: 0;
			padding: 0;

			li{
				display: block;
				position: relative;
				overflow: auto;
				padding: 6px 0;
				&:hover{
					background: rgba(0, 0, 0, 0.4);
				}
				a{
					color: #fff;
					font-weight: bold;
					text-transform: uppercase;
					position: relative;
					display: block;
					margin: 0;
					padding: 10px 40px;
					font-size: 15px;
					line-height: 21px;
					transition: all 0.35s linear;
				}
			}
		}
	}
	}

	#header-left-mobile.active{
		transform: translate(0, 0); /* Di chuyển phần tử về vị trí gốc */
		visibility: visible; /* Hiển thị phần tử */
	}

	#header-right.active {
		transform: translate(0, 0); /* Di chuyển phần tử về vị trí gốc */
		visibility: visible; /* Hiển thị phần tử */
	}
	
	.header-right {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: white;
		font-size: 22px;
		transition: all 0.6s ease-in-out; /* Áp dụng chuyển đổi mượt */
		transform: translate(100%, 0); /* Ban đầu nằm ngoài màn hình */
		visibility: hidden; /* Ẩn phần tử */
		transform-style: preserve-3d; /* Đảm bảo hỗ trợ hiệu ứng 3D */
		li {
			a {
				font-weight: 600; /* Kiểu chữ đậm */
			}
		}
	}
	
	.menu-toggle-icon {
		top: 0px;
        right: 0;
        position: absolute;
        cursor: pointer;
        margin-left: 10px;
  }
  .sub-menu {
	display: none; /* Hide all submenus by default */
  }
  
  .sub-menu.show {
	display: block; /* Show submenu when the 'show' class is added */
  }
  .icon-menu {
	display: flex;
	justify-content: center;
	margin-top: 20px;
  
	i {
	  margin-right: 10px;
	  font-size: 24px;
	}
  }
  iframe {
	width: 100% !important;
	height: 220px;
}
.grid-partner {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.grid-partner .partner-item img {
	width: 100px;
	height: 70px;
}
.logo {
	margin: auto;
	width: 320px;
}
}

@media screen and (max-width: 768px) {
    iframe {
        width: 212px;
        height: 220px;
    }
}



@media screen and (max-width: 375.5px) {
	.bg-gray{
		background-color: var(--gray);
		.the_content{
		  padding-top: 18px;
		  span{
			  font-size: 16px;
			  color: white;
			  line-height: 28px;
			  font-weight: 400;
		  }
		  li{
			  list-style: disc;
			  &::marker {
				  color: white;
				  unicode-bidi: isolate;
				  font-variant-numeric: tabular-nums;
				  text-transform: none;
				  text-indent: 0px !important;
				  text-align: start !important;
				  text-align-last: start !important;
			  }
		  }
	  }
	  }
	  .aboutUs{
		ul{
			padding: 12px;
		}
	}

	iframe {
        width: 344px !important;
        height: 220px;
    }
	.logo {
        margin: auto;
        width: 280px;
    }
}