#baogia{
	width: 80%;
}
#facebook:hover {
	background: #4267b2;
}
#youtube:hover{
	background: #fe0002;
}
#skype:hover {
	background:#00a9f0
}
.menu__mobile__pusher{
		display: none;
	}
	
	@media screen and (max-width: 1024px){
		#baogia{
			width: 100%;
		}
	}
	
	@media screen and (max-width: 767px){
		.left_bar
			{display: none;
	        }
	}
/*Ipad dọc(768 x 1024)*/
	@media screen and (max-width: 768px){
		.menu__mobile__pusher{
		display: block;
		}
		#dichvufoot{
		        padding-bottom: 21%;
		}
		.ipaddoc{
			height: 300px;
		}
		#footermar{
			margin-top: -20.7%;
		}
		.right_bar{
			display:none;
		}

}



.container123456{
					width: 30.7%;
					height: 200px;
					position: relative;
					background-size:100%;
					display: flex;
					align-items: center; /* horizontal */
					justify-content: center; 
					transition: 0.5s;
					cursor: pointer;
					float:left;
					margin-left: 2%;
					margin-top: 15px;
					padding: 5px;
					border-radius: 15px;
					border: 2px solid #C30;
					overflow: hidden;
					box-shadow: 0px 0px 8px rgba(0,0,0,.3);
}

.container1234{
					width: 30.7%;
					height: 200px;
					position: relative;
					background-size:100%;
					display: flex;
					align-items: center; /* horizontal */
					justify-content: center; 
					transition: 0.5s;
					cursor: pointer;
					float:left;
					margin-left: 2%;
					margin-top: 15px;
					padding: 5px;
					border-radius: 15px;
					border: 2px solid #C30;
					overflow: hidden;
					box-shadow: 0px 0px 8px rgba(0,0,0,.3);
}

.container222{
					width: 23%;
					height: 150px;
					position: relative;
					background-size:100%;
					display: flex;
					align-items: center; /* horizontal */
					justify-content: center; 
					transition: 0.5s;
					cursor: pointer;
					float:left;
					margin-left: 1.6%;
					margin-top: 15px;
					padding: 5px;
					border-radius: 15px;
					border: 2px solid #C30;
					overflow: hidden;
					box-shadow: 0px 0px 8px rgba(0,0,0,.3);"
}

.container123456:hover .image1 {
  opacity: 0.3;
}
.container123456:hover .middle {
  opacity: 1;
}

.container1234:hover .image1 {
  opacity: 0.3;
}
.container1234:hover .middle {
  opacity: 1;
}

.container222:hover .image1 {
  opacity: 0.3;
}
.container222:hover .middle {
  opacity: 1;
}


	
	

/*Tablet nhỏ(480 x 640)*/
@media screen and (max-width: 480px){
    .container123456{
		max-width: 360px;
		width: 100%;
	}
	.container1234{
		max-width: 360px;
		width: 100%;
	}
	.left_bar{
		display: none;
	}
	.container222{
		max-width: 360px;
		width: 100%;
	}
	#tes{
		display: none;
	}
	#tes123{
		display: none;
	}
	.menu__mobile__pusher{
		display: block;
	}
	#baogia{
	width: 100%;
}
}