.demo {          
            background-color: #fbfbfb;
			
        }
		.footer {
		  
		   
		  
		   padding : 10px 00px;		  
		   		   
		}
		.title-truyen{
			background-color:#2980b9;color:white;
            padding:1px 10px;
            border-radius:5px;
            text-align: Left;
            font-family: Times New Roman, Times, serif;
		}
        .title-truyen a{
            text-transform: uppercase;

            color:white;
        }
		.title-truyen:after
		{				
			    border-top: 1em solid #2980b9;
				content: "";
				height: 0;
				width: 0;
				border-left: 1em solid transparent;
				border-right: 1em solid transparent;
				position: absolute;
				margin-left:20px;
				display: block;
		}
		.grid-truyen a{
			text-decoration:none;
			
			color:#2980b9;
		}
		.grid-truyen a:hover{
						
		}
		
		
		.list-nghe-nhieu ul,li{
			list-style:none;
			margin: 0;
			padding: 0;
		}
		.list-nghe-nhieu
                 { height:1000px;
                   overflow:hidden;
                 }
		.view-uathich-1{
                        font-size:11px;
                        text-align:left;
		}
		.list-nghe-nhieu a{
			text-decoration:none;			
			font-weight:bold;
			color:black;
		}
		.list-nghe-nhieu a:hover{
			
			  color: #2980B9;
		}
		
		.top-num {
			    float: left;
				margin: 2px 10px 10px 0;
				width: 31px;
				height: 31px;
				border: #cbcbcb solid 1px;
				text-align: center;
				line-height: 29px;
				font-weight: 700;
				-webkit-border-radius: 16px;
				-moz-border-radius: 16px;
				border-radius: 16px;
		}
		.top-1 {
			color: #fff;
			border: #e74c3c solid 1px;
			background-color: #e74c3c;
		}
		.top-2 {
			color: #fff;
			background-color: #5eb949;
			border-color: #5eb949;
		}
		.top-3 {
			color: #fff;
			border: #5cabb8 solid 1px;
			background-color: #5cabb8;
		}
		
		.ribbon {
			position: absolute;
			color: #fff;
			background: #811204;
			font-size: 13px;
			font-weight: bold;
			float: left;
			clear: both;
			padding: 3px 6px;
			left: 25px;
			top: 10px;
			white-space: nowrap;
			display: inline-block;
			border-radius: 4px;
		}
		.box-truyen{
			position: relative;float:left; 		
			text-align:center; 

                        height: auto;
                        width: auto;
                        padding-left:1em;
			padding-bottom:15px;
           
            

            
		}
            .box-truyen img {
                border: 1px solid #ddd;
                border-radius: 4px;
                padding: 5px;
                box-shadow: 0px 0px 10px grey;
                width:215px;
                Height:230px;
            }
           

            .box-truyen p,h3 {
                padding: 0;
                margin: 0;
                height: 16px;
                overflow-y: hidden;
            }


		.box-truyen a{
			font-size:1em;
			color:black;
			font-weight:bold;
		}
       .box-truyen img:hover{
            background: #000;
            opacity: 0.5;						
		}
		.box-truyen:hover a{
			color: #2980B9;
		}
       
       @media screen and (min-width:210px ){			
			.box-truyen{
				width:93%;	
			}
			
		}
		@media screen and (min-width:310px ){			
			.box-truyen{
				width:47%;
					
			}
			
		}
		@media screen and (min-width:550px){
			
			.box-truyen{
				width:32%;	
			}
			
		}
		@media screen and (min-width:1200px){
			
			
			.box-truyen{
				width:24%;	
			}
			
		}
		
		
		.view-uathich{
			font-size:11px;
       
		}
		.view-uathich-1{
			font-size:11px;
                        text-align: left;
       
		}
		.ribbon-uathich{
			border:1px solid green;
			font-weight:bold;			
			padding: 2px 2px;
			border-radius: 4px;
			font-size:11px;
		}
		.color-green{
			color: green;
		}
		.color-red{
			color: red;
					}
		.li-uathich{
			padding-bottom:10px;
		}
		.li-uathich a{
			color:black;
			font-weight:bold;
			text-decoration:none;
		}
		
		.li-uathich a:hover
		{
			color: #2980B9;
		}
		.img-center {
			display: block;
			margin-left: auto;
			margin-right: auto;
			
		}
		.info-truyen
		{
			
			font-size:13px;
		}
		.info-bold{
			font-weight:bold;
			text-align:right;
		}
		.title-truyen
		{
			    font-family: "Roboto Condensed", Tahoma, sans-serif;
		}
		*{
			 font-family: "Roboto Condensed", Tahoma, sans-serif ;
		}
		/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

#playlist li a, #playlistY li a, #playlistY_MP3 li a {
    color: black;
    text-decoration: none;
    font-size: 13px;
    font-family: "Roboto Condensed", Tahoma, sans-serif;
    font-weight: bold;
}
    #playlist li a:hover, #playlistY li a:hover, #playlistY_MP3 li a:hover {
        /*padding-left:5px;
						text-decoration:underline;*/
        color: #2980B9;
    }
#playlist .current-song a, #playlistY .current-song a, #playlistY_MP3 .current-song a {
    color: #2980B9;
}
					.current-song:before{
						
						padding-right:5px;
						content:url('../images/useronline.gif') 																						
					}
					.current-song:after{
						
						/*padding-left:10px;
						content:url('../images/useronline.gif')*/ 																						
					}
					audio {
						width:100%;						
					}
					
					.btn-server{
						background-color: #50c1e9;
						border: 1px solid rgba(0,0,0,.1);
						color: rgb(255,255,255);
						font-family: 'Varela Round', sans-serif;
						font-size: 14px;
						padding: .55em .9em;
						transition: all 400ms ease;
						border-radius:5px;
					}
.nghe-audio img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    box-shadow: 10px 10px 10px grey;
}
/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 0.5px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute; 	
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  font-family: "Times New Roman", Times, serif;
  text-align: left;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff;
 font-family: "Times New Roman", Times, serif;
}
.searchpos {
   position: relative;
   margin-bottom:10px;
   margin-left: 30px;
      }

col-md-6
{ 
 height:500px;
 overflow: auto;
}
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}