/*
███╗   ███╗ ██████╗ ██████╗ ██╗██╗     ███████╗
████╗ ████║██╔═══██╗██╔══██╗██║██║     ██╔════╝
██╔████╔██║██║   ██║██████╔╝██║██║     █████╗  
██║╚██╔╝██║██║   ██║██╔══██╗██║██║     ██╔══╝  
██║ ╚═╝ ██║╚██████╔╝██████╔╝██║███████╗███████╗
╚═╝     ╚═╝ ╚═════╝ ╚═════╝ ╚═╝╚══════╝╚══════╝
*/

/* Từ 320 trở xuống (blue) : Iphone 5/SE,....
*/
@media (max-width: 356px){
	.in-form{ width: auto; }
	.main{ margin-top: 30%; }
	.login-btn span{max-width: 80px;}
	.myuser-cover-image{ height: 150px; }
}                                      

/* Từ 320.1 đến 360. dành cho mobile (blue) : Các dòng samsung tầm trung màn hình nhỏ
*/
@media (min-width: 357.1px)and (max-width: 574.99px){
	.in-form{ width: auto; }
	.main{ margin-top: 13%;	}
	.login-btn span{max-width: 80px;}
	.myuser-cover-image{ height: 150px; }
}

/*
██╗██████╗  █████╗ ██████╗ 
██║██╔══██╗██╔══██╗██╔══██╗
██║██████╔╝███████║██║  ██║
██║██╔═══╝ ██╔══██║██║  ██║
██║██║     ██║  ██║██████╔╝
╚═╝╚═╝     ╚═╝  ╚═╝╚═════╝ 
*/

/* dành cho ipad, tablet (yellow) */
@media (min-width: 575px) and (max-width: 804.99px) {
	.in-form{ width: auto; }
	.main{ margin-top: 8%; }
	.login-btn span{ max-width: 200px;}
	.myuser-cover-image{ height: 200px; }
}



/*
██╗      █████╗ ██████╗ ████████╗ ██████╗ ██████╗ 
██║     ██╔══██╗██╔══██╗╚══██╔══╝██╔═══██╗██╔══██╗
██║     ███████║██████╔╝   ██║   ██║   ██║██████╔╝
██║     ██╔══██║██╔═══╝    ██║   ██║   ██║██╔═══╝ 
███████╗██║  ██║██║        ██║   ╚██████╔╝██║     
╚══════╝╚═╝  ╚═╝╚═╝        ╚═╝    ╚═════╝ ╚═╝     
*/

/* dành cho laptop, máy tính (red)  */
@media (min-width: 805px) and (max-width: 1024.99px) {
	.in-form{ width: auto; }
	.main{ margin-top: 6%; }
	.login-btn span{ max-width: 200px;}
	.myuser-cover-image{ height: 300px; }
	.user-body, .user-head{	padding-left: 15%; padding-right: 15%;}
}

@media (min-width: 1025px) {
	.in-form{ width: 50%; }
	.main{ margin-top: 4%; }
	.login-btn span{ max-width: 200px;}
	.myuser-cover-image{ height: 300px; }
	.user-body, .user-head{	padding-left: 15%; padding-right: 15%;}
}