/* Kraint */

html{
    background-color: #282E29;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height:auto;
    background-color: white;
    color: #555;
    font-size: 15px;
    margin: 0;
    margin: auto;
    padding: 0;
    width: auto;
    max-width: 768px;
    border: 2px solid black;
}
a:link, a:active, a:visited {
    color: black;
    font-size:16px;
    line-height: 1.2;
    text-decoration: none;
}
a:hover, a:focus {
    color: #009cf0;
}
img {
    width:auto;
    max-width:100%;
    
}
input, textarea, select {
    background: #fff;
    border: 1px solid #d0d0d0;
    color: #454545;
    padding: 2px 4px 2px 4px;
    margin: 1px;
    box-shadow:0 4px 9px rgba(0,0,0,.37);
  -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
  -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
input[type="submit"] {
    display: inline-block;
	text-decoration: none;
	outline: none;
	padding: 6px 11px;
	font: bold 11px/1em "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	background: #247ca4;
	background: -webkit-gradient(linear, left top, left bottom, from(#298cba), to(#206d92));
	background: -moz-linear-gradient(top, #298cba, #206d92);
	border: 1px solid #298CBA;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
}
input[type="submit"]:hover {
    color: #eaf2fa;
	border-color: #13455b;
    background: #fefefe;
    border: 2px solid #202070;
    padding: 2px 4px 2px 4px;
}
h3 {
    margin: 0;
    padding: 0;
    padding-bottom: 2px;
}

hr {
    margin-top: 2px;
    margin-bottom: 2px;
    border-top: 1px solid #e3e3e3;
    border-right-style: none;
    border-right-width: 0;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-style: none;
    border-left-width: 0;
}
p {
    background-color: #FFFFFF;
    line-height: 1.6;
    padding: 4px;
    border-left: 4px solid #FFFFFF;
    border-right: 4px solid #FFFFFF;
    border: 4px solid #FFFFFF;
    max-width:100%;
    margin-top: 6px;
    margin-bottom: 6px;
    text-indent: 30px;
    color:#080000;
}
table{
border-spacing: 10px 1px;
}
ul {
    margin: 0;
    padding-left: 20px;
}
.quyet {
    text-shadow: #e6daac 1px 1px;
    color: #444;
    font-size: 18px;
    font-weight: bold;
    padding: 3px;
    border-bottom: 1px solid #00f;
    background: #ddf6dd;
}
.daik {
    padding-top : 2px;
    background-color: #fff;
    background-position : top;
}
td {line-height:15px;
}
#tab {padding:2px 5px 0 5px;border-bottom:5px solid #08A8E8;font-size:12px}
#tab a {color:#494949;font-weight:bold}
#tab tr, #tab td{height:25px;padding-top:4px}
#tab td {padding-left:5px;padding-right:5px;text-align:center}
#tab .active {background:#08A8E8;}
#tab .active a {color:#fff}

.phpcode, .code {
  line-height: initial;
  background-color: #E0E6E9;
  border: 1px dotted #9FAEBB;
  margin: auto;
  padding: 2px 2px 2px 2px;
  overflow: auto;
  color: #0000BB;
  font-size: 12px;
  font-family: "Courier New", Courier, monospace;
  max-width: 70%;
}
.main {
    max-width:100%;
    border: 0px solid #e1e1e1;
    background: #ffffff;
    color: #555;
    margin: 0px;
    padding: 4px;
    font-size: 14px;
    font-family: "Times New Roman", Times, serif;
}
.main img {
    max-width: 80%;
}
.phdr, .phdr1, .bmenu, .upban, .hdr {
    color: #fffaee;
    font-weight: bold;
    text-shadow: #45cdf5 1px 1px 1px;
    background-color: #ff2587;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 4px 6px 4px 6px;
    border-bottom: 1px solid #D9DEE6;
}
.phdr a, .phdr1 a, .bmenu a, .upban a, .hdr a {
    color: #fffaee;
}
.phdr a:hover, .phdr1 a:hover, .bmenu a:hover, .upban a:hover, .hdr a:hover {
    color: #dbfaff;
}
.table, .foot {
    padding: 2px;
    border: 1px solid #cecece;
    border-spacing: 10px; 
}
.cool, .menu, .blog {
    background-color: white;
    
    padding: 4px;
    border-left: 4px solid #D9DEE6;
    border-right: 4px solid #D9DEE6;
    border-top: 1px solid #D9DEE6;
    border-bottom: 1px solid #D9DEE6;
}
.list1, .list2 {
    border: 3px solid #FFFFFF;
    background-color: white;
    padding: 4px;
    border-left: 2px solid #D9DEE6;
    border-right: 2px solid #D9DEE6;
    border-top: 1px solid #D9DEE6;
    border-bottom: 1px solid #D9DEE6;
}

.mini { 
    background-color: white;
    padding: 4px;
    border-top: 1px solid #D9DEE6;
    border-bottom: 1px solid #D9DEE6;
}

.search {
    background-color: black;
    link-color:white;
    color:yellow;
    padding: 4px;
    border-left: 4px solid #FFFFFF;
    border-right: 4px solid #FFFFFF;
    border-top: 5px solid #D9DEE6;
    border-bottom: 5px solid #D9DEE6;
}
.rmenu {
  background: #fee5fd;
  border: 1px solid #ffc6fc;
  margin: 1px 0;
  padding: 4px;
}
.rmenu input, .rmenu textarea, .rmenu select {
  border: 1px solid #E2C0C7;
}
.rmenu input:focus, .rmenu textarea:focus {
  border: 1px solid #DBB0B9;
  background: #FDFBFB;
}
.quote {
    font-size: 10px;
    background-color: #f2f6f8;
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    border-left: 3px solid #80abc8;
    margin: 2px;
    color: grey;
    padding: 4px;
}
.footer, .coklat {
    color: white; 
    background-color: black;
    border: 3px solid #FFFFFF;
    url(images/foot.png) repeat-x 50% bottom;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 4px;
    text-align: left;
    text-indent: 0px;
    
}
.ads {
    background: #ffc48a url(images/ads.png) repeat-x 50% bottom;
    border: 1px solid #fad2ac;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 4px;
    text-align: left;
    text-indent: 0px;
    color: #000;
}
.qc {
    background: none repeat scroll 0 0 #FFFFC0;
    font-size: 12px;
    margin-bottom: 0px;
    margin-top: 1px;
    font-weight: normal;
    border: 1px solid #DDBC6B;
    padding: 3px;
}
.header {
    border: 3px solid #FFFFFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    border-bottom : 1px solid #8fdef3; 
    background-color: #95006C; 
    color:white;
    repeat-x 0% top; 
    padding: 10px;
}
.currentpage {
    color:#FFFFFF;
    background-color: #8cafc6;
    border: 1px solid #417394;
    padding: 0px 4px 0px 4px;
    margin: 0px;
}
.filelist_paging, .page {
    text-align: right;
    padding: 4px 2px 4px 2px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 14px;
}
.filelist_paging:before, .page:before {
    content: ;
    padding-right: 2px;
}
.filelist_paging a, .page a {
    border: 1px solid #ff2587;
    padding: 0px 4px 0px 4px;
    background-color: #ff2587;
  	color: white;
    margin: 1px;
  	font-size: 14px;
}
.filelist_paging a:hover, .page a:hover {
    background-color: #f2f6f8;
  	color: #ff2587;
    border: 1px solid #417394;
}

.filelist_paging span {
    border: 1px solid #ff2587;
    padding: 0px 4px 0px 4px;
    background-color: #f2f6f8;
    margin: 1px;
}

a.pagenav {
    border: 1px solid #88beff;
    background-color: #f2f6f8;
    padding: 0px 4px 0px 4px;
    text-decoration: none;
    margin: 0px;
}

a.pagenav:hover {
    background-color: #f2f6f8;
    border: 1px solid #417394;
}
.news{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #e6e6e6;
}
.article {
    border: 2px solid #FFFFFF;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    width: 100px;
    height: 100px;
    display: inline-block;
    
}
.article1 {
    margin-right:2px;
    margin-left:2px;
    width: 90px;
    height: 70px;
    display: inline-block;
    
}

/* tạo hình ảnh dạng tròn, nhỏ   */
.thumb {
    border: 3px solid #95006B;
    -moz-border-radius: 42px;
    -webkit-border-radius: 20px;
    -ms-border-radius: 42px;
    -o-border-radius: 42px;
    border-radius: 42px;
    width: 80px;
    height: 80px;
    background-color: #3e3e3e;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/*Ảnh trong bài viết*/
.imgs {
    width:100%;
    max-width:100%;
    background-color: 
    border-left: 0px solid #D9DEE6;
    border-right: 0px solid #D9DEE6;
    border-top: 1px solid #D9DEE6;
    border-bottom: 1px solid #D9DEE6;
    vertical-align: middle;
}
/* thẻ div nào muốn bo tròn thì dùng cái này */ 
.kraint {
    border: 3px solid #FFFFFF;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.time{
      font-size:11px;
      color:#999;
      margin-top:5px;
      display:block;
    }
.title{
      link-color:black;
      color:#333;
      display:block;
      font:normal 30px/1.3 helvetica- idesignVn,arial;
      }


.ten{
  color:white;
  background: #ff2587;
  font-weight: bold;
  padding: 5px 2px;
  border: 1px solid #D9DEE6;
  font-size: 16px;
  text-shadow: #45cdf5 1px 1px 1px;
}
/*menu ngang*/

#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
}

#menu ul li{
display:inline;
}

#menu ul a{
text-decoration:none;
width:33%;
float:left;
background:#000;
color:#fff;
font-weight:bold;
text-align:center;
line-height:42px;
border-left:1px solid #fff;
}

#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
}
 
#menu ul li{
display:inline;
}
 
#menu ul a{
text-decoration:none;
width:33%;
float:left;
background:#000;
color:#fff;
font-weight:bold;
text-align:center;
line-height:42px;
border-left:1px solid #fff;
}
ul{border:0; margin:0; padding:0;}
 
#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
 
#pagination-digg a{
border:solid 1px #9aafe5
margin-right:2px;
}
 
#pagination-digg .previous-off,
#pagination-digg .next-off{
border:solid 1px #DEDEDE
color:#888888
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
 
#pagination-digg .next a,
#pagination-digg .previous a{
font-weight:bold;
}
 
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
 
#pagination-digg a:link,
#pagination-digg a:visited{
color:#0e509e
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
 
#pagination-digg a:hover{
border:solid 1px #0e509e
}

/* Thanh Menu */
/* The side navigation menu */
.sidenav {
    
    height: 100%; 
    width: 0; 
/* 0 width - change this with JavaScript */
    position: fixed; 
/* Stay in place */
    z-index: 1; 
/* Stay on top */
    top: 0;
    left: 0;
    background-color: #FFFFFF; 
/* Black*/
    overflow-x: hidden; 
/* Disable horizontal scroll */
    padding-top: 60px; 
/* Place content 60px from the top */
    transition: 0.5s; 
/* 0.5 second transition effect to slide in the sidenav */
}
 
/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    color: #FF008D;
    display: block;
    transition: 0.3s
}
 
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #00AAFF;
}
 
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
 
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .1s;
    padding: 20px;
    overflow:hidden;
    width:100%;
}
body {
  overflow-x: hidden;
}
 
/* Add a black background color to the top navigation */
.topnav {
    background-color: #FF2587;
    overflow: hidden;
}
 
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
 
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
 
/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
 
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
 
a svg{
  transition:all .5s ease;
 
  &:hover{
    #transform:rotate(180deg);
  }
}
 
#ico{
  display: none;
}
 
.menu{
  background: black;
  display: none;
  padding: 5px;
  width: 320px;
  @include border-radius(5px);
 
  #transition: all 0.5s ease;
 
  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: white;
 
    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }
 
    &:hover{
      background: #555;
    }
  }
}

.content-title {
	text-align: center;
  	font-size: 18px;
  	font-weight: bold;
}
/* Kraint */