﻿/* ================= MEDIA SCREEN ================= */
/* ================= Options Devices (Desktop) ================= */
@media (min-width: 1250px) {
	.container{
		width:1250px;
		margin:0 auto;
	}
}


@media (min-width: 992px) {
	.onlyPC{
		display:block !important;
	}
}

/* ================= Options Devices (Tablet + Mobile) ================= */
@media (max-width: 991.98px) {
	.space_section{
		padding:60px 0;
	}

	.navbar-toggler{
		border:0;
		padding:0;
	}

	.navbar-toggler:focus{
		box-shadow:none;
	}

	.navbar-toggler-icon{
		width:30px;
		height:30px;
	}

	.lang{
		padding:10px 0;
		margin-top:15px;
		text-align:center;
		display:block;
		margin-left:0;
	}

	.list-guide{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767.98px) {
	.space_section{
		padding:60px 0;
	}

	#highlight-top h1{
		font-size:30px;
	}

	#highlight-top p{
		font-size:25px;
	}

	.btn-link{
		width:64px;
		height:64px;
		padding:20px 15px;
	}

	.btn-link img{
		width:32px;
	}
	
	.desc, #leadership .desc, #core-activities ul li{
		font-size:22px;
	}

	#leadership blockquote{
		font-size:30px;
	}

	#leadership blockquote cite{
		font-size:22px;
	}

	.list-guide li span{
		font-size:21px;
	}

	#partner #contact-form{
		margin-top:30px;
	}

	#contact-page #contact-form{
		padding:10px;
	}

	.contact-info{
		margin-top:20px;
	}

	.follow-us{
		position:static;
		margin:10px auto;
	}

	.list-group{
		grid-template-columns: repeat(2, 1fr);
	}

	.onlyMobile{
		display:block !important;
	}

	/* Tắt animation flip-card ở màn hình nhỏ hơn 768px */
	.flip-card{
		perspective: none;
	}

	.flip-card-inner{
		transition: none;
		transform: none !important;
	}

	.flip-card:hover .flip-card-inner{
		transform: none !important;
	}

	.list-guide li span{
		display: block;
		margin-bottom:10px;
	}

	.flip-card{
		height:490px;
	}
}

/* ================= Options Devices (Only Mobile) ================= */
@media (max-width: 575.98px) {
	.navbar-brand img{
		width:50px;
	}

	.list-group{
		grid-template-columns: repeat(1, 1fr);
	}

	.list-guide{
		grid-template-columns: repeat(1, 1fr);
	}
}