@import url("util/main.css");

#home_top_intro{
	background-image: url(../img/ui/home-bg.jpg);
	background-position: center;
	background-size: cover;

	margin-top: 60px;
}

#home_top_frm{
	display: block;
	width: 100%;
	background-color: rgba(255, 255, 255,0.7);
}

#top_homepage{
	height: 800px;
	background-image: url(../img/ui/avatar.png);
	background-repeat: no-repeat;
	background-position: top right;
	
/*Canh giữa dọc*/
	display: flex;
	align-items: center;  
}

p._cmmcenter{
	max-width: 800px;
	margin: 20px auto;
}

a._cmmbutton{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 50px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;

	background-color: #f2f2f2;
	color: #000;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
a._cmmbutton:hover{
	background-color: #fff;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
a._cmmbutton:active{
	background-color: #f2f2f2;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
#top_homepage div#sub_info{
	min-width: 300px;
	min-height: 120px;
}

#top_homepage div#sub_info a{
	display: inline-block;
	width: 100px;
	padding: 5px 10px;
	text-align: center;
	background-color: #0069ea;
	color: #FFF;
	margin-top: 20px;
	margin-right: 20px;
	text-decoration: none;
	border: 2px solid #0069ea;
}
#top_homepage div#sub_info a:last-child{
	background-color: #FFF;
	color: #0069ea;
	border: 2px solid #0069ea;
}

#top_homepage div#sub_info a:hover{
	opacity: 0.9;
}
#top_homepage div#sub_info a:active{
	opacity: 1.0;
}

/*LIST list_homepage*/
#list_homepage{
  display: flex;
  justify-content: space-between;
}
#list_homepage li{
/*	width: calc(100% / 3);*/
	width: 300px;
	min-width: 150px;
	text-align: center;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 20px;
}
#list_homepage li *{
	display: block;
	width: 100%;
}
#list_homepage li img{
	width: 80px;
	margin: auto;
}
#list_homepage li span{
	font-weight: bold;
	margin-top: 5px;
}
#list_homepage li span:last-child{
	font-weight: unset;
	margin-top: 2px;
	font-size: 10pt;
}

#list_homepage li:hover{
	background-color: gray;
}
/*INTRO intro_homepage*/
/*#intro_homepage{
	min-height: 450px;
}
#intro_homepage article{
	display: flex;
}

#intro_homepage .intro_block{
	display: inline-block;
	width: 50%;
	float: left;
	min-height: 450px;
	color: #FFF;
}
#intro_homepage .intro_block:first-child{
	background-image: url(../img/ui/sub-avatar.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:  100% auto;
}
#intro_homepage .intro_block:last-child{
	padding-top: 20px;
	min-height: 430px;
}*/

#intro_business{
	min-height: 450px;
	background-image: url(../img/ui/home-bg-business.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#intro_business article{
	display: flex;
}
#intro_business .intro_block{
	display: inline-block;
	width: 50%;
	float: left;
	min-height: 450px;
	color: #FFF;
}
#intro_business .intro_block:first-child{
	max-width: 550px;
	background-image: url(../img/ui/avatar-business.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size:  auto 100%;
}
#intro_business .intro_block:last-child{
	padding-top: 30px;
	min-height: 430px;
	margin-left: 30px;
}
#intro_business .intro_block a{
	margin-left: 0px !important;
	margin-top: 30px;
}



/*MIDDLE MENU PAGE middle_menu_homepage*/
#middle_menu_homepage{
	display: flex;
	align-items: center;
	background-color: #000000;
	color: #FFF;
	height: 60px;
}
#middle_menu_homepage article{
	min-height: unset;
}
#middle_menu_homepage div{
	display: inline-flex;
}
#middle_menu_homepage div a{
	background-color: #FFF;
	font-size: 12px;
	text-decoration: none;
	padding: 3px 20px;
	margin-left: 20px;
	color: #000;
	border-radius: 15px;
}
#middle_menu_homepage div a:hover{
	background-color: grey;
}

/*BAI VIET*/
#article_homepage{
	display: flex;
	width: 100%;
	padding-top: 20px;
	color: #FFF;
	font-size: 0;
}
#article_homepage p{
	margin-top: 10px;
}
#article_homepage .intro_block{
	display: inline-block;
	font-size: 16px;
	width: 50%;
	vertical-align: top;
}

#article_homepage .intro_block ul{
	display: block;
	width: 100%;
	list-style: none;
	margin-bottom: 0px;
}
#article_homepage .intro_block ul li{
	display: inline-block;
	float: left;
	width: calc(50% - 20px);
	min-height: 120px;
	background-color: #FFF;
	margin-bottom: 20px;
	margin-left: 20px;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#article_homepage .intro_block ul li#_item1{
	background-image: url(../img/ui/tech-java.png);
}
#article_homepage .intro_block ul li#_item2{
	background-image: url(../img/ui/tech-python.png);
}
#article_homepage .intro_block ul li#_item3{
	background-image: url(../img/ui/tech-php.png);
}
#article_homepage .intro_block ul li#_item4{
	background-image: url(../img/ui/tech-android.png);
}
#article_homepage .intro_block ul li a{
	display: flex;
	width: calc(100% - 20px);
	height: 100px;
	padding-left: 20px;
	padding-top: 20px;
/*	text-align: center;
	justify-content: center;
	align-items: center;*/
	text-decoration: none;
	color: white;

	background-color: rgba(0,0,0,0.3);
}
#article_homepage .intro_block ul li a:hover{
	background-color: rgba(0,0,0,0.1);
	font-weight: bold;
}
#article_homepage .intro_block ul li a:active{
	background-color: rgba(0,0,0,0.4);
}

#article_homepage a._cmmbutton{
	margin-left: 0px;
	margin-top: 20px;
}


/*PROJECT*/
#project_homepage article{
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}
#project_homepage ul{
	display: flex;
	width: 100%;
	list-style: none;
	justify-content: space-between;
}
#project_homepage ul li{ 
	display:inline-block; 
	width: calc(25% - 15px);
	min-height: 100px;
}
#project_homepage ul li *{
	display: block;
	max-width: 100%;
	margin: auto;
} 
#project_homepage ul li img{
	border-radius: 10px;
}
#project_homepage ul li span{
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #121217;
}
#project_homepage ul li label{
	font-size: 15px;
	line-height: 21px;
	padding-left: 20px;
	padding-right: 20px;
	color: #3f3f50;
}
#project_homepage ul li a{
	text-decoration: none;
	color: #2e62e9;
	padding-top: 10px;
	padding-bottom: 10px;
}



/*HOOPY------------------------*/
#hoopy_homepage{
	min-height: 200px;
	color: #FFF;
}
#hoopy_homepage article{
	padding-top: 20px;
	padding-bottom: 50px;
}
#hoopy_homepage h3{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
	font-size: 30px;
}
#hoopy_homepage ul{
	display: flex;
	width: 100%;
	list-style: none;
	justify-content: space-between;
	margin-top: 30px;
	margin-bottom: 30px;
}
#hoopy_homepage ul li{
	display: inline-flex;
	width: calc(30% - 10px);
}
#hoopy_homepage ul li a{
	display: block;
	width: 100%;
	min-height: 100px;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	color: #F5F5FF;
}
#hoopy_homepage ul li a img{
	display: block;
	width: 100%;
	margin-bottom: 10px;
	transition: 0.3s;
}
#hoopy_homepage ul li a:hover img{
	border-radius: 20px;
}

article a._cmmbutton{
/*	display: block;
	width: 240px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	text-decoration: none;
	background-color: white;
	margin: auto;
	border-radius: 5px;
	font-weight: bold;
	border: 3px solid #f2f2f2;*/

	margin: auto;
}


/*LIBARARY--------------------*/
#library_homepage article{
	padding: 20px 0px;
	text-align: center;
}
#library_homepage p{
	color: #333333;
}

#library_homepage div#lib_frm_srcoll{
	display: block;
	width: 100%;
	overflow: auto;
	margin-bottom: 10px;
}

#library_homepage ul{
	list-style: none;
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
}

#library_homepage ul li{
	display: block;
	width: calc((100% / 6) - 10px);
	min-width: 150px;	
}
#library_homepage ul li span{
	white-space: nowrap;      /* không cho xuống dòng */
	overflow: hidden;         /* ẩn phần bị tràn */
	text-overflow: ellipsis;  /* hiển thị ... */

	margin-top: 5px;
}
#library_homepage ul li:hover img{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#library_homepage ul li *{
	text-align: center;
	margin: auto;
	display: block;
}
#library_homepage ul li span{
/*	background-color: cyan;*/
	padding: 0px 10px;
}
#library_homepage ul li a{
	text-decoration: none;
	color: #2e62e9;
}