@font-face {
  font-family: 'korean';
  src: url('font-icons/korean2.ttf');
}
@font-face {
  font-family: 'quiz-eps';
  src: url('font-icons/quiz-eps.ttf');
}
@font-face {
  font-family: 'hangul';
  src: url('font-icons/hangul.ttf');
}
@font-face {
  font-family: 'korea';
  src: url('font-icons/korean.ttf');
}
@font-face {
  font-family: 'baigiang';
  src: url('font-icons/baigiang.ttf');
}
@font-face {
  font-family: 'vietnamses';
  src: url('font-icons/vietnam.ttf');
}
.hoithoai {
  background: #ffffff;
  padding: 30px;
}
.quiz-eps-topik {
   font-family: 'vietnamses', serif;
}
.tiengviet {
   font-family: 'vietnamses', serif;
    font-size:20px;
    color:#303641;
}
.tiengviet img {
   padding-right: 15px;
}
.baigiang {
  font-family: 'baigiang', serif;
    font-size:25px;
    color:#3399FF;
}
.icon-hoithoai {
    color: #47a7df;
}
.hocvideo {
   background: white;
    margin: 0px;
    padding-top: 20px;
}
.video .entypo-play {
  font-size: 16px;
  color: #5479c2;
} 
/*font tieng han*/
.korea {
	font-family: 'korean', serif;
	 font-weight:300;
    font-size:20px;
}
.hangul {
	font-family: 'hangul', serif;
}
.kr-tuvung {
    font-family: 'korean', serif;
    font-weight: 300;
    font-size: 16px;
}

.korean {
  font-family: 'korean', serif;
   font-weight:300;
   font-size:18px;
}
.koreanxanh {
    color: #47afe8;
    font-family: 'korean', serif;
     font-weight:300;
    font-size:20px;
}
/*DOWNLOAD*/
  .panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
  }

  .panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
  }

  .panel-title {
    font-size: 14px;
  }

  .panel-title > a {
    display: block;
    padding: 15px;
    text-decoration: none;
  }

  .more-less {
    float: right;
    color: #212121;
  }

  .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
  }
  .demo {
    min-height: 750px;
    font-size: 14px;
  }
/*baigiang*/
  .d {
    padding: 15px 0px;
    color: #73879C;
    font-size: 15px;
    font-weight: 400;
    background: #eaeaea;
    text-align: center;
    margin: 0px 1px;
    font-weight: bold;
}
.c {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    margin: 0px 1px;
    font-size: 27px;
}
.b {
    border: 2px solid #F2F2F2;
    padding: 6px 0px;
    background: #ffffff;    
}
/**/
.alert-message{
    margin-bottom: 10px;
    padding: 20px;
    border-left: 4px solid #eee;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.alert-message h4{
    margin-top: 0;
    margin-bottom: 5px;
	font-weight:bold;
	
}
.alert-message p:last-child{
    margin-bottom: 0;
}
.alert-message-success{
    border-color: #eeeeee;
	background-color: #ffffff;
}
.alert-message-success:hover{
    border-color: #3498db;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.alert-message-success h4 {
    padding-bottom:5px;
    
}
.alert-message-success h4 a{
    color: #337ab7;
}
.alert-message-success h4 a:hover{
    color: #245984;
	
}
.daudong {
	text-transform: uppercase;
	padding-top:5px;
}
.giaithich {
	margin:3px 0px;
}
.giaithich span {
	padding-right:20px;
}
.giaithich span.entypo-calendar {
	color:#00b29e;
}
.giaithich span.entypo-help-circled,.giaithich span.entypo-folder {
	color:#ea2474;
}

.giaithich span.entypo-chart-bar {
	color:#ba79cb;
}
hr.ngancach {
	border:1px solid #dddddd;
}
ul.login  {
	font-weight:bold;
}
ul.login:hover{
	color:#999999;
}
.ds {
	margin-bottom:10px;
    padding: 20px;
	font-size: 16px;
	color:#455358;
	font-weight:bold;
}
.dstuvung {
	background-color: #ffffff;
}
.dstuvung .abc {
	border-right:2px solid #f0f0f0;
}
.dstuvung .mp3{
	font-size:18px;
}
.dstuvung .mp3:hover{
	color:#f7a311;
}
.dropdown-menu > li > a {
    padding: 12px 20px;
    color: #21aae1;
	font-weight:bold;
}
.dropdown-menu > li > a:hover{
    background-color: #67c4eb;
	color:#ffffff;
}
.dropbtn {
    background-color: #67c4eb;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
	width:100%;
}
.dropdown-menu {
	width:100%;
}
.tile-stats .icon i {
    font-size: 65px;
}
h2.tieude {
	color: #337ac6;
	text-transform: uppercase;
}
.vietnam {
	padding-left: 10px;
}
@media screen and (max-width: 768px) {
    .vietnam {
    margin-top: 10px;
    }
}
.luyenviet {
	padding: 10px 10px 10px 20px;
	margin-bottom:10px;
	border-left: 3px solid #eee;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
	font-size: 18px;
}
.checkbox input[type="checkbox"] {
    margin: none;
    margin-top: 5px;
}
.checkbox label input {
    top: 0px; 
}
.luyenviet .entypo-sound {
	color: #ee4749;
	padding: 2px 0px 10px 2px;
	font-size: 30px;
}
.luyenviet input {
	border:none;
	border-radius: 0px;
	border-bottom:1px dashed #e6e6e6;
    font-family: 'korean', serif;
	font-size: 22px;
}
.luyenvieta {
    border-color: #eeeeee;
	background-color: #ffffff;
}
.luyenvieta:hover{
    border-color: #3498db;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.luyenviet #dapan {
	height: 20px;
	font-family: 'korean', serif;
	font-size: 22px;
	color: #3498db;
}
#dung {
	border-left: 5px solid #00a65a;
    background:  #c6fdc6;
}
#sai {
	border-left: 5px solid #f56954;
    background: #FFEFD5;
}
#sai input ,#dung input {
	border-radius: 0px;
	font-family: 'korean', serif;
	font-size: 22px;
	color: #949494;
}
.goiy {
	display: none;
	padding-left: 10px;
	color: #337acf;
}
.play {
    cursor:pointer;
    background-image: url("../images/topiknghe.png");
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
}
.pause {
    cursor:pointer;
    background-image: url("../images/topiknghe.gif");
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
}
.bangdiem {
	font-weight: bold;
   position:fixed;
   bottom:0px;
   height:55px;
   width:100%;
   line-height: 55px;
   background:#f7f7f7;
   border-top: 1px solid #e6e6e6;
   font-size: 14px;
}
.bangdiem #tongsocau{
	color: #0073b7;
  padding: 7px;
}
.bangdiem #traloidung{
	color: #00a65a;
  padding: 7px;
}
.bangdiem #traloisai {
	color: #f56954;
  padding: 7px;
}
.bangdiem #thoigian {
  padding: 7px;
  color: #c81c39;
}
.bangdiem .glyphicon-option-vertical {
	color: #ffa812;
}
.luyenviet label,.field label{
    font-weight: normal;
}
.luyenviet input[type=radio],.field input[type=radio]{
    display: none;
}
.luyenviet .radio label {
    padding-left: 0px;
    width: 100%;
}
.luyenviet .radio label:hover {
    color: #9855B4;
    font-weight: bold;
}
.cauhoi .radio label {
    width: 100%;
}
.cauhoi .radio label:hover {
    color: #9855B4;
    font-weight: bold;
}
.field .radio:hover {
    color: #546072;
}
.cauhoi p#dapan,.cauhoi p#giaithich {
  padding-left: 15px;
}
.luyenviet .radio .wronganswer {
    color: #ff0000;
    background: url("../images/cross.png") right center no-repeat;
    padding-right: 30px;
    background-size: 24px;
}
.luyenviet .correctanswer {
    color: #00a65a;
    background: url("../images/tick.png") right center no-repeat;
    padding-right: 30px;
    background-size: 24px;
}
.luyenviet .dapan {
    padding-left: 15px;
}
.luyenviet .cauhoi {
   color: #47a7df;
}
.danhmucdt,.dropbtn {
    text-transform: uppercase;
}
#ketqua .modal-header, #ketqua .modal-header h4 {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 20px;
}
.ds .hinhanh {
    padding: 20px 20px 10px 20px;
}
.ds .hinhanh img{
    padding: 3px 0px;
}
.ds .hinhanh p{
    padding-top: 10px;
}
#game .col{width: 19%;min-height: 110px;float:left;background: #fff;
  padding:30px 5px;text-align: center;font-size: 16px;color:#333;margin: 0px 2px 2px}
#game .col.active{background: #eee}
.game-true,.game-true:focus{border: 1px solid #11c029;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #11c029;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #11c029;}
.game-false,.game-false:focus{border: 1px solid #e33a3a;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eb5545;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eb5545}
@media(max-width: 991px){
  #sidebar1 .item{margin-right: 20px;width: 30%;float:left;}
  #sidebar1{padding: 0 !important}
  #create-set,#my-posts{width: 80%}
  #game .col{width: 23%}
  #hero-unit .text{padding-left: 0px}
}
@media(max-width: 400px){
  #game .col{width: 31%;padding: 5px;margin: 0px 3px 3px}
}
@media(max-width: 315px){
  #game .col{width: 45%;padding: 5px;margin: 0px 3px 3px}
}
.including:before, .including:after {
    content: " ";
    display: table;
}
.including:after {
    clear: both;
}
.including:before, .including:after {
    content: " ";
    dis
    play: table;
}
.including:after {
    clear: both;
}
.box-success,.box-error{padding:5px 10px;margin-left: 10px;float:left;display: none}
.box-success{border:1px solid #11c029;color:#11c029;}
@media(max-width: 500px){
 .box-success {margin-left: 0px;margin-top: 10px}
}
.ghepchu h4{
  font-size: 18px}
.ghepchu .time-text{
  color:#e7543d;}
div#success {
    padding:40px;
    min-height: 300px;
}
#quiztonghong .tonghop {
  background: #ffffff;
  margin: 1px 1px 10px 1px;
  padding: 10px 10px 10px 20px;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
  font-size: 18px;
}
#quiztonghong .tonghop h3{
  font-weight: bold;
    margin-bottom: 15px;
}
#quiztonghong .tonghop #an{
    display: none;
 }
 #quiztonghong .tonghop .cauhoi {
  margin-bottom: 15px;
 }
.style-4 input[type="text"]:focus {
  outline: none;
}
.style-4 input[type="text"] {
  display: block;
   width: 100%;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none;
  border: none;
  border-bottom: solid 2px #c9c9c9;
  -webkit-transition: border 0.3s;
  -moz-transition: border 0.3s;
  -o-transition: border 0.3s;
  transition: border 0.3s;
}
.style-4 input[type="text"]:focus, .style-4 input[type="text"].focus {
  border-bottom: solid 2px #0000ff;
}
/*ty le*/
.progress-circle {
   font-size: 20px;
      margin: 20px auto;
   position: relative; /* so that children can be absolutely positioned */
   padding: 0;
   width: 5em;
   height: 5em;
   background-color: #F2E9E1; 
   border-radius: 50%;
   line-height: 5em;
}

.progress-circle:after{
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;
    background-color: white;
    content: " ";
}
/* Text inside the control */
.progress-circle span {
    position: absolute;
    line-height: 5em;
    width: 5em;
    text-align: center;
    display: block;
    color: #53777A;
    z-index: 2;
}
.left-half-clipper { 
   /* a round circle */
   border-radius: 50%;
   width: 5em;
   height: 5em;
   position: absolute; /* needed for clipping */
   clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/ 
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
   clip: rect(auto,auto,auto,auto);
}
.value-bar {
   /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/ 
   position: absolute; /*needed for clipping*/
   clip: rect(0, 2.5em, 5em, 0);
   width: 5em;
   height: 5em;
   border-radius: 50%;
   border: 0.45em solid #53777A; /*The border is 0.35 but making it larger removes visual artifacts */
   /*background-color: #4D642D;*/ /* for debug */
   box-sizing: border-box;
  
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
   /*Progress bar for the first 50%, filling the whole right half*/
   position: absolute; /*needed for clipping*/
   clip: rect(0, 5em, 5em, 2.5em);
   background-color: #53777A;
   border-radius: 50%;
   width: 5em;
   height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }


/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }
/*End ty le*/
/*Dang ky */
.skin-white #dangky .modal-body {
  padding-left: 30px;
  padding-right: 30px;
}
.capcha {
  color: #337ab7;
}
.text-bottom {
  color: #ffffff; 
  background: #337ab7;
  margin-bottom: 20px;
  font-weight: bold;
  text-transform: uppercase;
}
.text-red {
  color: #ee4749;
}
.dangky {
  min-height: 600px;
}
.dangky input {
    height: 40px;
}
/*thong bao */
.popupunder {   
width: 300px;   
position:fixed; 
top: 250px;  
right: 10px;    
z-index: 99;    
border: 0;  
padding: 20px;
} 
.popupunder.alert-success { 
border: 1px solid #198b49;  
background:#27AE60; 
color:#fff;
} 
.popupunder .close {    
font-size: 10px;    
position:absolute !important;   
right: 2px; 
top: 3px;
}
/*dang nhap*/
.dangnhap ,#thanhvien{
  background: url(../images/bg-topik.png) no-repeat center fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#thanhvien {
  color: #337ac6;
}
.table-user-information {
  font-weight: bold;
  font-size: 14px;
}
.dangnhap .login-form {
    margin: 100px auto;
    max-width: 500px;
    font: 15px/1.6em Lato, serif;
}

.dangnhap .login-form .panel {
    border: none;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.63);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.63);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.63);
}
   .dangnhap .login-form .panel .panel-heading {
        color: #fff; 
        background: #6e91af;
        line-height: 2.4em;
        font-weight: bold;
        padding-left: 26px;
    }
    .dangnhap .login-form .panel .panel-body {
        background: #f7f7f7;
        padding: 20px 26px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-bottomright: 5px;
    }

    .dangnhap form[role=login] {
        color: #a5a5a5;
    }
    .dangnhap form[role=login] label {
        font-weight: normal;
    }
    .dangnhap form[role=login] input,
    .dangnhap form[role=login] button {
        font-size: 14px;
    }
    .dangnhap form[role=login] input {
        margin: .5em 0;
    }
    .dangnhap form[role=login] button {
        margin-top: 2em;
        font-weight: bold;
    }