/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Michael Vieth
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */
@media (min-width: 1024px) and (max-width: 1280px) {
	.video_infobelow p span {
		font-size: 16px;
	}
	.social__footer ul {
		display: grid;
		flex-direction: row;
		flex-wrap: wrap;
		justify-items: center;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.d-block {
		display: none !important;
	}
	.timeline_items img {
		max-width: 1000px;
	}
	.slide_thanhtich {
		max-width: 350px;
		margin: 0 auto;
		margin-top: -24%;
	}
	.video_infobelow {
		padding: 10px 15px 50px;
	}
	.footer__items {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 25px;
	}
	.social__footer ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
}

@media (min-width: 480px) and (max-width: 768px) {
}

@media (max-width: 480px) {
	.ipad-block {
		display: none;
	}
	.header-main {
		position: relative;
	}
	.header_fix img {
		position: relative;
	}
	.sub_title_section span {
		font-size: 16px;
	}
	.timeline_thanhtich .container {
		padding-left: 0;
		padding-right: 0;
	}
	.timeline_items_mb img {
		max-width: 100%;
		height: auto;
		padding: 15px 0;
	}
	.timeline_items .row {
		margin: 0 auto;
	}
	h2.title_thanhtich {
		font-size: 20px;
	}
	.slide_thanhtich {
		max-width: 300px;
		margin: 0 auto;
	}
	#slide_thanhtich .owl-prev {
		position: absolute;
		left: -30px;
		top: 35%;
		width: 35px;
		height: 35px;
		background: #005192;
		border-radius: 50px;
	}
	#slide_thanhtich .owl-next {
		position: absolute;
		right: -30px;
		top: 35%;
		width: 35px;
		height: 35px;
		background: #005192;
		border-radius: 50px;
	}
	h3.title_video_thanhtuu {
		font-size: 18px;
	}
	.traitim_thanhtuu {
		background: url(../images/bg-section-trieu-trai-tim-mb.webp) no-repeat
			top center;
		background-size: cover;
		padding: 15px 0;
	}
	h3.title_traitim {
		font-size: 20px;
		padding-top: 30px;
	}
	.btn_traitim span {
		font-size: 15px;
	}
	.slide_traitim {
		max-width: 390px;
		margin: 0 auto;
	}
	.slide_traitim img {
		max-width: 100%;
		height: auto;
	}
	#slide_traitim .owl-prev {
		position: absolute;
		left: -10px;
		top: 35%;
		width: 42px;
		height: 42px;
		background: #ffffff;
		border-radius: 50px;
	}
	#slide_traitim .owl-next {
		position: absolute;
		right: -10px;
		top: 35%;
		width: 42px;
		height: 42px;
		background: #ffffff;
		border-radius: 50px;
	}
	.description_traitim {
		padding: 10px 15px;
		color: #ffffff;
		font-size: 15px;
	}
	.video_thanhtuu {
		padding: 50px 0 0;
	}
	.preview-intro-video {
		margin-top: 0;
	}
	.video_infobelow {
		padding: 0px 0 50px;
	}
	.video_infobelow p span {
		font-size: 14px;
		color: #000000;
	}
	.address__footer {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: space-between;
		justify-content: center;
		align-items: center;
		padding-top: 20px;
	}
	p.address-f {
		text-align: center;
	}
}

@media (max-width: 380px) {
	.info__title span {
		font-size: 17px;
		padding-top: 0;
	}
	p.address-f {
		text-align: center;
	}
	.address__footer {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: space-between;
		justify-content: center;
		align-items: center;
		padding-top: 20px;
	}
}

@media (min-width: 1300px) and (max-width: 1366px) {
	.slide_thanhtich {
		position: relative;
		max-width: 350px;
		margin-top: -26%;
		margin-left: 10%;
	}
	.slide_thanhtich img {
		max-width: 320px;
		height: auto;
	}
}
/* Portrait */
@media screen and (orientation: portrait) {
	/* Portrait styles here */
}
/* Landscape */
@media screen and (orientation: landscape) {
	/* Landscape styles here */
}

/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
}

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation: landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation: portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation: landscape) {
}