@charset "utf-8";
/* CSS Document */

body{font-family:Arial, Helvetica, sans-serif;}

*{margin:0; padding:0;}

.clorgray {color:#333;}
.clorred {color:#73010c;}
.clorred2{color:#f30}
.cloryellow {color:#fde800;}
.clorblue {color:#3b5998;}
.cl1 {background-color:#5d865b;}
.cl2 {background-color:#c84a33;}
.cl3 {background-color:#363b47;}
.cl4{color:#999;}
.cl5{color:#666;}
.fl {float:left;}
.fr {float:right;}
.mal3 {margin-left:3%;}
.mar3 {margin-right:3%;}
a:link {text-decoration:none;}

.header {width:80%; height:auto;background:#471e56;margin:auto;position:relative;overflow:hidden;}
.logo {margin-left:1.5%;height:auto;}
.numbertime {padding:5px; background:#662372;border-radius:5px;box-shadow: 2px 2px 2px #2f1439;}
.clock {width:80%; height:80px;background:#471e56;margin:auto;position:relative;overflow:hidden;display:none;}
.countdow{text-align:center;position:absolute;top:10px;width:40%;left:30%;}
.countdow span {font-size:44px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:white;}
.countdow2{text-align:center;position:absolute;top:10px;width:100%;}
.countdow2 span {font-size:44px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:white;}
.numbertime2 {padding:5px; background:#662372;border-radius:5px;box-shadow: 2px 2px 2px #2f1439;margin-top:60px;}

.share {margin-right:1.5%;}
.share span{line-height: 80px;text-align:center;font-size:20px;font-family:Roboto Slab;font-weight:bold;background-size:contain;background-position:center;}
.span1 {width:120px;height:100%;background:url(../image/share.png);display:inline-block;padding-left:20px;color:white;background-repeat: no-repeat;}
.span2 {width:56px;height:100%;background:url(../image/share2.png);display:inline-block;color:#2a4a8a;background-repeat:no-repeat;}

.banner{width:80%;height:auto; margin:auto;background:#471e56;}
.pic2{display:none;}

.listmon{width:80%;height:auto;background:#471e56;position:relative;overflow:hidden;margin:auto;}

.monlop {width:100%;height:auto;margin:auto}
.title-chonmon {text-align:center;color:#fbb040;padding:1.5%;font-family:Roboto Slab;font-size:24px;}
.monlop table {width:100%;font-size:24px;border-collapse: collapse;text-align:center;}
.monlop table td, tr {border-top: 1px dashed white;border-right:0px;border-left:0px;border-bottom:0px;}
.monlop span {text-align:center;display:block;color:#fbb040;font-weight:bold;}
.monlop a {padding:15px 0 15px 0; color:white;display:block;}
.monlop a:hover {text-decoration:underline;color:#fbb040;}

.time-thang1 {width:80%;height:auto;background:#fbb040;margin:auto;position:relative;overflow:hidden;}
.title-thang1 {width:70%; height:auto; background:#471e56;margin:1% 0;float:right;border-radius:50px 0 0 50px;}
.title-thang1 h3{padding:2.5% 7% 2.5% 7%;color:#ffcc00;}
.noidung-thang1{clear:both;width:100%;height:auto;margin-bottom:1.5%;}
.info-thang1 {width:70%;background:#662372;border-radius:0 100px 100px 0;}
.info-thang1 h3 {padding:2%;color:white;}
.info-thang1 ul {padding:0 2% 2% 5%; color:white;}

.box-dangki{width:80%;height:auto;background:#471e56;margin:auto;position:relative;overflow:hidden;text-align:center;}
.action{width:100%;height:auto;padding:20px 0 20px 0;}
.button {font-size:24px;color:white;border-radius:3px;font-weight:bold;display:inline-block;}
.dangnhap {background:#3870bc;padding:8px 35px;}
.dangki {background:#599342;padding:8px 55px;}
.naptien {background:#ffa901;padding:8px 50px;}

.ykienhocsinh{width:80%;height:auto;background:#662372;margin:auto;background-image:url(../image/banner3.png);background-repeat:no-repeat;background-position:bottom;background-size:100%;position:relative;overflow:hidden; }
.title3{padding:10px;display:block;}
.box-ykien{width:55%;height:70%;margin:auto;background:white;border-radius:5px 5px 0px 0px;position:relative;overflow:hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.anhhocsinh {float:left;width:30%;height:100%;margin:10px}
.box-ykien h3 {font-family:Roboto Slab;font-weight:bold;padding:20px 20px 5px 20px;display:block;color:#333;}
.box-ykien p {font-family:Roboto Slab;;padding:15px 15px;display:block;color:#333;}
.baochi {width:80%;height:auto;margin:auto;background:#cdcdcd;}
.baochi a{padding:1% 0px 1% 2%;display:inline-block;}

.banner2 {width:80%;height:100%;overflow:hidden;margin:auto; }
.box-video {width:60%;height:100%;float:left;background:#e1e1e1;}
.main-video {width:98%;height:auto;padding:1%;}
.video{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
	
}
.info {width:40%;height:auto;float:right;}
.info img {float:left;margin-right:2%;}
.info ul li {padding:7.2% 5%;list-style:none;font-size:20px;margin-top:1.5%;}
.info ul li span {color:white; font-family:Roboto Slab;}

.box-danhsach{width:80%;height:auto;margin:auto;text-align:center;}
.box-danhsach table {width:100%;border-collapse: collapse;}
.box-danhsach table tr, td {border:1px solid #cdcdcd;text-align:center;}
.box-danhsach table h4, p {padding:10px;font-size:18px;font-family:Roboto Slab;}
.box-danhsach h3 {padding-top:1%;font-size:24px;font-family:Roboto Slab;color:#e33528;}

.box-comment {width:80%;height:auto;background:white;position:relative;overflow:hidden;margin:auto}
textarea {
    border: 1px solid #dedede;
    color: #777;
    resize: none;
    padding: 4px;
	margin-left:1%;
    height: 50px;
    width: 100%;}
	
.btnSmall {
    background-color: #eee;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    color: #333 !important;
    font-size: 12px;
	margin-top:0.5%;
	margin-left:1%;
    padding: 5px 15px;
}

.clearfix {padding:10px;border-bottom:1px dashed #cdcdcd;position:relative;overflow:hidden;list-style:none;font-size:14px;}

.clearfix img {width:40px;height:40px;border-radius:50%;background:white;margin-top:15px}

.innerWrap {width:92%;height:auto;position:relative;overflow:hidden;}

.innerWrap span {padding-bottom:0.5%;color:#a1a1a1;display:block;}

.commentchild{width:100%;height:auto;position:relative;overflow:hidden;background:#e6ecf2;}
.child1 {width:80%;}
.cmchild{width:100%;height:auto;position:relative;overflow:hidden;}
.commentchild2{width:100%;height:auto;position:relative;overflow:hidden;display:none;}

.footer {width:80%;height:auto;margin:auto;margin-top:2%; font-family:Arial, Helvetica, sans-serif; font-size:14px;border-top:2px solid #cff1ff;}
.item {width:24%;height:auto; float:left;margin-top:2%;margin-left:1%;}

.item ul {margin-top:3%;list-style-position:inside;color:#0bb4eb ;margin-left:2%;}
.ft1 a:hover{text-decoration:underline;}
.ft2{width:100%;height:auto;position:relative;overflow:hidden;text-align:center;margin-top:2%;display:inline-block;}
.ft2 a{font-weight:bold;padding:0px 1%;color:#666;font-size:12px}
.ft2 a:hover{text-decoration:underline;}
.border {border-right:1px solid #666;}
.ft2 p {color:#999;font-family:Arial, Helvetica, sans-serif;font-size:14px;}

	
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"), url("//fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"), url("//fonts.gstatic.com/s/roboto/v15/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"), url("//fonts.gstatic.com/s/roboto/v15/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"), url("//fonts.gstatic.com/s/roboto/v15/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"), url("//fonts.gstatic.com/s/roboto/v15/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"), url("//fonts.gstatic.com/s/roboto/v15/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"), url("//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2") format("woff2");
}

@media screen and (max-width: 1224px) {
										.info ul li {padding:5.2% 5%;}
										}
@media screen and (max-width: 1080px) {
										.info ul li {padding:3.2% 5%;}
										.countdow {display:none;}
										.clock {display:block;}
										}											
	
@media screen and (max-width: 960px) {.thongtinGV{padding: 5px 5px;}
									   .thongtinGV span {font-size:16px}
									   .box-ykien{width:100%;border-radius:0px;}
									   .info ul li {padding:18px 20px;}
									   .box-video{width:100%;}
									   .info {width:100%;}
									   
									   .info ul li {padding:7.2% 5%;}
									   .info ul li {margin-bottom:0.5%;margin-top:0px;}
									   .item{width:48%;}
									   }	
	
@media screen and (max-width: 640px) {.header {width:100%}
									  .banner{width:100%}
									  .banner2{width:100%}
									  .ykienhocsinh{width:100%;background-image:none;}
									  .baochi {width:100%}
									  .datcho{width:100%}
									  .cackhoahoc{width:100%}
									  .box-danhsach{width:100%}
									  .box-comment {width:100%}
									  .pic1 {display:none;}
									  .pic2 {display:block;}
									  .listmon{width:100%;}
									  .time-thang1 {width:100%;}
									  .box-dangki{width:100%}
									  .clock {width:100%;}
									  .innerWrap {width:82%;}
									  .button {margin-top:2%;}
									  .monlop span , a{font-size:14px;}
									  .mon{width:49%;margin-left:1%;}
									  .monfree{width:49%;margin-left:1%;}
									  .title-thang1 h3 {font-size:14px;}
									  .info-thang1 h3, ul {font-size:14px;}
									   .info-thang1{width:100%;border-radius:0px;}
									  .noidung-thang1 img {display:none;}
									  .box-videogioithieu{width:100%}}
									
@media screen and (max-width: 480px) {.title2{width:100%}
									   .cackhoahoc h1{margin-top:10px; font-size:24px;}
									   .chitietkhoa {width:100%}
									   .box-danhsach table h4, p{font-size:16px;}
									  .title-thang1 {width:95%}
									  .countdow2 span {font-size:34px;}
									  .clock {height:65px;}
									   }
											
@media screen and (max-width: 420px) {.header {width:100%}
											.span1{width:80px}
											.span2{width:40px}
											.header img {margin-top:1%;}
											.thongtinGV span {font-size:14px}
											.info ul li {font-size:14px;}
											.item{width:100%;}
											}