/*=========================================================================================
	CSS SLIDE
===========================================================================================*/
/* Dành cho Samsung S9 */
@media only screen and (max-width: 767px){
	/* Slide Section */
	.sectionBanner { height: calc(100vh - 80px); position: relative; overflow: hidden; }
	.slider-main, .slide-Sub, .slide-Sub picture, .slide-Sub img { width: 100%; height: auto; object-fit: cover; }
	.slide-Sub { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; }
	.slide-Sub.active { opacity: 1; z-index: 1; }
	.slider-buttons { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 20px; z-index: 3; }
	.slider-buttons button { background: rgba(0, 0, 0, 0.5); border: none; color: white; font-size: 2rem; padding: 10px 20px; cursor: pointer; border-radius: 5px; }
	.pagination { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
	.pagination button { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.5); cursor: pointer; }
	.pagination button.active { background: white; }
	.slide-content { position: absolute; top: 12%; color: white; font-size: 2rem; max-width: 100%; text-shadow: 2px 2px 10px rgba(0,0,0,0.7); z-index: 2; }
	.slide-content img{width:100%;}
	/* Sections bên dưới */
	.animate-section { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
	.animate-section.visible { opacity: 1; transform: translateY(0); }
}
/* Dành cho Ipad */
@media only screen and (max-width: 1279px) and (min-width: 768px) {
	/* Slide Section */
	.sectionBanner { height: calc(100vh - 80px); position: relative; overflow: hidden; }
	.slider-main, .slide-Sub, .slide-Sub picture, .slide-Sub img { width: 100%; height: 100%; object-fit: cover; }
	.slide-Sub { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; }
	.slide-Sub.active { opacity: 1; z-index: 1; }
	.slider-buttons { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 20px; z-index: 3; }
	.slider-buttons button { background: rgba(0, 0, 0, 0.5); border: none; color: white; font-size: 2rem; padding: 10px 20px; cursor: pointer; border-radius: 5px; }
	.pagination { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
	.pagination button { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.5); cursor: pointer; }
	.pagination button.active { background: white; }
	.slide-content { position: absolute; top: 12%; color: white; font-size: 2rem; max-width: 100%; text-shadow: 2px 2px 10px rgba(0,0,0,0.7); z-index: 2; }
	.slide-content img{width:100%;}
	/* Sections bên dưới */
	.animate-section { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
	.animate-section.visible { opacity: 1; transform: translateY(0); }
}
/* Dành cho Desktop */
@media only screen and (min-width: 1280px) {
	/* Slide Section */
	.sectionBanner { height: calc(100vh - 80px); position: relative; overflow: hidden; }
	.slider-main, .slide-Sub, .slide-Sub picture, .slide-Sub img { width: 100%; height: 100%; object-fit: cover; }
	.slide-Sub { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; }
	.slide-Sub.active { opacity: 1; z-index: 1; }
	.slider-buttons { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 20px; z-index: 3; }
	.slider-buttons button { background: rgba(0, 0, 0, 0.5); border: none; color: white; font-size: 2rem; padding: 10px 20px; cursor: pointer; border-radius: 5px; }
	.pagination { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
	.pagination button { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.5); cursor: pointer; }
	.pagination button.active { background: white; }
	.slide-content { position: absolute; top: 12%; right: 10%; color: white; font-size: 2rem; max-width: 80%; text-shadow: 2px 2px 10px rgba(0,0,0,0.7); z-index: 2; }
	.slide-content img{width:80%;float:right; }
	/* Sections bên dưới */
	.animate-section { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
	.animate-section.visible { opacity: 1; transform: translateY(0); }
}