*{padding:0;margin:0}
body,html{height:100%}

:root {
	--color1: #b70000;
	--color1_hover:#9f0000;
	--color1_1:#c53333;
	--color2: #e59859;
	--color2_hover:#d68b46;
	--color3:#158d8e;
	--color3_hover:#297c7a;
	--color4:#779f59;
	--color4_hover:#29a22e;
	--color5:#938c8c;
	--color5_hover:#000;

	--top1:180px;
	--top2:80px;
	--top3:40px;
}

body{font:16px Kanit,Helvetica, sans-serif;background:#fff ;color:#5c5c5c}/*tahoma,Arial, */
input{font:16px Kanit,Helvetica, sans-serif normal;}
a{color:#262626;text-decoration:none}
a:hover{color:var(--color1_hover);text-decoration:none}

.color1{color:var(--color1)}
.color1_hover{color:var(--color1_hover)}
.color1_1{color:var(--color1_1)}
.color2{color:var(--color2)}
.color2_hover{color:var(--color2_hover)}
.color3{color:var(--color3)}
.color3_hover{color:var(--color3_hover)}
.color4{color:var(--color4)}
.color4_hover{color:var(--color4_hover)}






footer{height:50px;background:#787878 ;position:absolute;bottom:0;left:0;width:100%;z-index:10;font-size:14px}

footer div{text-align:right;line-height:50px;vertical-align:middle;color:#fff;padding-right:10px;background:url(../../images/logo.png) no-repeat 10px ;background-size:auto 90%;max-width:1240px;margin:0 auto}
footer a{color:#fff}
.scrollbar::-webkit-scrollbar {width: 10px;}
.scrollbar::-webkit-scrollbar {width: 10px;}
.scrollbar::-webkit-scrollbar-track {;background:#fff}
.scrollbar::-webkit-scrollbar-thumb {background: #202020;border-radius: 10px;}

h1{color:#262626;;font-size:36px;font-weight:normal ;position:relative;padding:3px 10px 3px 20px;}
h1:before{content: ""; position: absolute;width:10px;height: 80%;top: 5px;left: 0;background:var(--color1)}
h1.center{margin-bottom:10px}
h1.center:before{width: 70%;height: 1px;top:auto;bottom: 0;left: 15%;border-bottom: 4px solid var(--color1);}
h2{font-weight:normal;font-size:26px}
h3{font-weight:normal;font-size:24px}
.h-line{display: inline-block;padding:3px 10px 3px 20px;position: relative;margin-bottom:10px}
.h-line:before{content: ""; position: absolute;width:10px;height: 80%;top: 5px;left: 0;background:var(--color1)}


.h-icon{background:url(../../images/li.png) no-repeat left 10px;font-size:18px;padding:2px 5px 2px 20px;color:#F7941E}
.h-right{font-size:11px;text-align:right}

.isactive-0:before{content:'✖'}
.isactive-1:before{content:'✔'}
.tr-disabled td{background:#f5f5f5 !important}
.p-warning{color:#a7a7a7;font-size:13px}

.switch  input + .slider + .sw-text:before{content:'ไม่'}
.switch  input:checked + .slider + .sw-text:before{content:'ใช่'}
.badge-red{color:red;font-weight:normal;font-size:13px}
@keyframes blinkingText{
    0%{     color: #fff; background:#ff0000   }
    49%{    color: #fff; background:#ff0000}
    50%{    color: transparent;background: transparent;  }
    99%{    color:#fff; background:#ff0000 }
    100%{   color: #fff; background:#ff0000   }
}
.text_priority{color:#ff0000;animation:blinkingText 2s infinite;font-size:14px;padding:0 5px;margin-left:2px}

/**********************/
a.hpl-manage{font:14px Kanit,Helvetica, sans-serif;line-height:16px}
a.hpl-delete2{background:#cc0000 url(../../images/lib/icon-delete.png) no-repeat 8px 10px;padding:10px 10px 10px 25px;}
.hpl-fa{background:#959595;color:#fff;padding:8px 10px;display:inline-block;font-size:16px}
.hpl-fa:hover{background:#757575;color:#fff}
.tbl_list .hpl-fa{padding:3px 5px;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis; }
.hpl-fa-add{background:#009933;-moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px}
.hpl-fa-add:hover{background:#006600}
.hpl-fa-edit{background:#ff9900}
.hpl-fa-edit:hover{background:#ff6600}
.hpl-fa-delete{background:#ff0000}
.hpl-fa-delete:hover{background:#cc0000}
.submit{background:#f25a29 url(../../images/bg_btn.png) repeat-x left top;-moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px}
.submit:hover{opacity: 0.8 ;MozOpacity: 0.8;KhtmlOpacity:0.8;filter: alpha(opacity=80);color:#7e2b11}

.btn{background:var(--color1);color:#fff;cursor:pointer;padding:10px;border:none;min-width:100px;font-size:16px}
.btn:hover{background:var(--color1_hover);color:#fff}
.tbl_list th{background:#e5e5e5;padding:10px 5px;border:solid 1px #ccc }
/*.tbl_list td{background:#fff}*/
.page a,.page span.c,.page span.d{background:#fff;color:#231F20}
.page a:hover,.page span.c{background:#fff;color:#ef4136}
.page .page-data{background:#fff;}
.page .page-row{background:#fff;}
.page input{border:solid 1px #231F20;}
.page .page-row select{border:solid 1px #231F20}


.msg_error_inner{color:#cc0000;background-color:#ffffcc;margin:3px 0}
.msg_error_repeat{background:#ef4136;color:#fff;-webkit-box-shadow: 1px 1px 3px 0px #dddddd;-moz-box-shadow: 1px 1px 3px 0px #dddddd;box-shadow: 1px 1px 3px 0px #dddddd;margin:3px 0}
.msg_success{-webkit-box-shadow: 1px 1px 3px 0px #dddddd;-moz-box-shadow: 1px 1px 3px 0px #dddddd;box-shadow: 1px 1px 3px 0px #dddddd;font-size:16px}
.msg_success{background-position:5px 10px}
.msg_success a{font-size:16px}
.breadcrumb{padding:3px 0;margin:0;font-size:14px;float:none}
.breadcrumb:after{display:block;content:'';clear:both}
#phpbeload{top:auto;bottom:0;width:auto;padding:0 5px 0 30px}
#phpbeload .phpberemove:hover{background-image: url(../../images/lib/msg_move-3.png)}
#phpbeload .phpberemove{background-image:url(../../images/lib/msg_move.png)}



.div_curve{background:#fff;padding:0;margin:0;position:relative}
.div_curve .xclose{text-decoration:none;color:#fff;background:#000;position:absolute;right:0;top:0;padding:1px 3px}
.div_curve .xclose:hover{color:#b71334;text-decoration:none}
.div_curve .thickbox_inner_text{padding:22px 2px 5px 2px}

.tbl_list a.hpl-manage{padding:8px 10px 8px 28px;font-size:14px}
a.hpl-manage::before{left:-18px;}
.no-data{webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.div-td-manage{;text-align:center;margin:0 auto}
.div-td-manage a{display:block}

.topic_number{display:flex;width:100%}
.topic_number div{}
.td_radio{position:relative;text-align:center}
.td_radio.active{background:#5fb2ff}
.td_radio .icon{}
.td_radio .icon:before{font-family:'Font Awesome 7 Free';display:inline-block;content:'\f0c8';font-weight: 400;}
.td_radio.active .icon:before{content:'\f00c';color:#fff;font-weight:900}
.td_radio.warning{background:#ff6e6e}
.td_radio.warning .icon:before{color:#fff}
/*f14a*/
/******************/


header{height:var(--top1);background:#fff url(../../images/bg-body.png)  no-repeat;background-position:center -50px;background-size:1240px;position:fixed;left:0;width:100%;z-index:2;top:0}
header .wrapper{display:flex;position:relative;height:180px}
.hpl-logo{background:var(--color1);height:100%;display:inline-block;padding:0 10px;z-index:1}
.hpl-logo img{height:100%;}

.header_fixed_top{height:var(--top1)}

.cc-menu{background:#c53333;display:flex;align-items: flex-end;width:200px;z-index:2;}
.cc-menu .top-menu{vertical-align:bottom;width:100%}
.cc-menu .top-menu ul{list-style:none;color:#fff;padding:0}
.cc-menu .top-menu ul li a{color:#fff;padding:5px 10px;display:block;font-size:18px;background:#c53333}
.cc-menu .top-menu ul li a:hover,.cc-menu .top-menu ul li a.active{background:var(--color1)}
.header-right{position:absolute;right:0;top:0;z-index:2}

.header-right ul{display:flex;list-style:none}

.header-right img{width:20px}
.header-right a{padding:3px 10px;display:block;color:#fff}
.header-right .hpl1{background:var(--color1)}
.header-right .hpl1:hover{background:var(--color1_hover)}
.header-right .hpl2{background:var(--color4)}
.header-right .hpl2:hover{background:var(--color4_hover)}

.header-other{position:relative;;right:0;bottom:0;;z-index3;display:flex;justify-content: flex-end;display:none}
.header-other > ul{list-style:none;padding:0;}
.header-other > ul > li > a{display:block;background:var(--color1);font-size:19px;border:solid 1px var(--color1_hover);color:#fff;;padding:4px 8px;height:30px}
.header-other ul > li > a:hover{background:var(--color1_hover)}
.header-other ul  li ul{position:absolute;z-index:2;visibility:hidden;background:#fff;left:0;list-style:none;padding:0;}
.header-other ul  li ul li a{font-size:16px;width:120px;display:block;padding:5px 10px;background:var(--color1_1);color:#fff}
.div-header-menu{display:none}
.div-header-menu{position:fixed;right:-300px;top:0;height:100%;background:#fff;z-index:3;width:300px;-webkit-box-shadow: -8px 3px 95px -23px #7a7a7a;
-moz-box-shadow: -8px 3px 95px -23px #7a7a7a;box-shadow: -8px 3px 95px -23px #7a7a7a;display:none;text-align:left;z-index:20}
.div-header-menu .t{height:75px;background:var(--color1);color:#fff;font-size:20px;line-height:75px;vertical-align:middle;padding:0 20px }
.div-header-menu .t a{float:right;color:#fff;background:var(--color1:hover);font-size:20px;text-decoration:none;width:30px;text-align:center;height:30px;line-height:25px;margin-top:20px;border-radius:50%}
.div-header-menu .d{height: -moz-calc(100% - 75px);height: -webkit-calc(100% - 75px);height: calc(100% - 75px);overflow-y:auto}
.div-header-menu .d a{display:block;padding:10px;text-decoration:none;font-size:16px;color:var(--color1) !important;d}
.div-header-menu .d a:hover,.div-header-menu .d a.active{color:var(--color3_hover) !important}
.div-header-menu .menu-line{border-bottom:solid 1px #b4b4b4}
.div-header-menu .h{font-weight:700;border-bottom:solid 1px #fff;padding:10px;font-size:16px}
.div-header-menu .d-step p{padding:5px 10px !important;color:#d3d3d3;text-decoration: line-through}
.div-header-menu  p.p2{padding-left:20px}
.div-header-menu a.sub{padding-left:40px !important}
.div-header-menu ul{list-style:none}

.top-menu3{list-style:none}
.top-menu3 li{display:flex}
.top-menu3 li a{display:block;background:var(--color2);font-size:19px;border:solid 1px var(--color2_hover);color:#fff;padding:4px 8px;height:30px}
.top-menu3 .p1{background:#fff;;padding:4px;height:30px}
.top-menu3  #header-profile{text-overflow: ellipsis;overflow: hidden; width: 150px;white-space: nowrap}
.top-menu3 .img-profile{display:flex;align-items: center;}
.top-menu3 .img-profile img{width:20px}

.container{min-height:calc( 100% - var(--top1));position:relative;}
.content{position:relative;padding-bottom:60px}
.content2{position:relative;padding:0}
.content1{padding-left:250px;}
.wrapper{max-width:1240px;margin:0 auto}
.content1 .wrapper{max-width:990px}


.sec-menu{position:fixed;left:0;top:var(--top1);right:calc( 1240px - 250px);
height: -moz-calc(100% - var(--top1));height: -webkit-calc(100% - var(--top1));height: calc(100% - var(--top1))
;background:var(--color1_1);overflow-y: auto;max-width:250px;width:100%;z-index:10;margin:0 auto}
.sec-menu.disabled{display:none}
.sec-menu.disabled+.content{padding-left:0}
.sec-menu .inner{padding-bottom:50px}
.sec-menu ul{padding:0 0  0}
.sec-menu ul  li{list-style:none;padding:1px 0}

.sec-menu ul li  p{color:#ffff;font-weight:700;border-bottom:solid 1px #fff;padding:10px }
.sec-menu ul li  p.p2{border:none;padding-left:10px}
.sec-menu ul li  p.p3{border:none;padding-left:10px;font-weight:normal;color:#fff;text-decoration: line-through}
.sec-menu ul li a{display:block;padding:10px;display:block;color:#fff;font-size:15px;margin-left:10px;position:relative}

.sec-menu ul li a:hover,.sec-menu ul li a.active{background:#fff;color:var(--color1);border-top-left-radius:20px;border-bottom-left-radius:20px}
.sec-menu ul li a.sub{padding-left:30px }

.body_y:not(.body-home) .sec-menu{top:var(--top2);height: -moz-calc(100% - var(--top2));height: -webkit-calc(100% - var(--top2));height: calc(100% - var(--top2))}
.body_y:not(.body-home) .container{min-height:calc( 100% - var(--top2))}
.body_y:not(.body-home) header,.body_y_home header
{height:var(--top2);;background-position:center -212px;background-size:864px;background-color:#fff}
.body_y:not(.body-home) header .wrapper,.body_y_home header .wrapper
{height:100%;border-bottom:solid 10px var(--color1)}
.body_y:not(.body-home) .cc-menu,.body_y_home  .cc-menu
{width:auto;background:none}
.body_y:not(.body-home) .cc-menu .top-menu,.body_y_home  .cc-menu .top-menu
{}
.body_y:not(.body-home) .cc-menu .top-menu li,.body_y_home  .cc-menu .top-menu li
{float:left}

/*height:843px;position:absolute;z-index:1;background-size:1860px;background-position:center top*/
.body-home:not(.body_y_home){background:url(../../images/bg-body.png) no-repeat center top;}
.body-home:not(.body_y_home)  header{background:none;position:absolute}
.body-home:not(.body_y_home)  .container{padding:0;min-height:auto}
@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.div-index1{height:200px;padding-top:60px;max-width:600px;margin:0 auto}
.div-index1 h1{font-size:40px;font-weight:700;color:var(--color1);text-align:center}
.div-index1 h1:before{height:0 }
.div-index2 > div{text-align:center;}

.div-index2 div a{width:240px;font-size:30px;background:var(--color3);display:block;color:#fff;position:relative;;text-align:left;padding:10px 10px 10px 80px;border:solid 2px #fff;margin:0 auto}

.div-index2 div a:before{content:'';position:absolute;display:block;background:var(--color3_hover) url(../../images/learning.png) no-repeat 10px 10px;background-size:50px;width:70px;height:100%;top:0;left:0}
.div-index2 div a:after{content:'\f0da';font-family:FontAwesome;position:absolute;right:10px;top:10px; animation: zoomInOut 1s ease-in-out infinite;}
.div-index2 div a:hover{background:var(--color3_hover)}

.div-index3{padding-top:100px}
.div-index3 ul{list-style:none;display:flex;padding:0}
.div-index3 li{width:33.33%;color:#fff;font-size:24px;text-align:center;padding:10px 0 10px 0;border-top:solid 10px gray;cursor:pointer}
.div-index3 li span{padding:10px;display:block}
.div-index3 li i{display:flex;align-items: center;justify-content: center;width:100px;height:100px;border-radius:50%;background:gray;text-align:center;margin:0 auto}
.div-index3 li i img{width:50%;}

.div-index3 .index3_d{margin:0;color:#fff}
.div-index3 .index3_d > div{padding:20px;}
.div-index3 li.li1{background:var(--color1);border-color:var(--color1_hover)}
.div-index3 li.li1 i,.div-index3 .index3_1{background:var(--color1_hover)}
.div-index3 li.li2{background:var(--color2);border-color:var(--color2_hover)}
.div-index3 li.li2 i,.div-index3 .index3_2{background:var(--color2_hover)}
.div-index3 li.li3{background:var(--color4);border-color:var(--color4_hover)}
.div-index3 li.li3 i,.div-index3 .index3_3{background:var(--color4_hover)}

.div-index4{
	padding-top:20px;
}
.div-index4 h2{color:var(--color3_hover)}


/*** timeline ***/

.app-timeline{display:flex;flex-direction: column;font-size:18px;margin:0 auto;width:100%}
/*min-height:40px*/
.app-timeline .item{display:flex;align-items: flex-start;;padding:10px;color:var(--color5);position:relative;min-height:40px}
.app-timeline  .n{font-size:16px;;flex-basis:40px;min-height:40px;display:block}
.app-timeline  .n span{width:30px;height:30px;border:solid 1px var(--color5);margin:4px;background:var(--color5);display:flex;justify-content:center;align-items:center;position:relative;border-radius:50%;color:#fff}
.app-timeline .item .n span:after{content:'';width: 38px;height: 38px;border:solid 1px #fff;border-radius: 50%;display: inline-block;;position:absolute; top: 50%;
  left: 50%;  transform: translate(-50%, -50%);}
.app-timeline   .n:after{content:'';width:2px;height:calc(100% - 40px);display:block;position:absolute;background:var(--color5);left:29px;top:50px}
.app-timeline  .d{padding:5px 10px;padding-bottom:5px}
.app-timeline  >.item:last-child > .n:after{height:0}

.app-timeline .item-subs > .d{padding:0 10px}
.app-timeline .item-subs > .n:after{background-image: linear-gradient(var(--color5) 50%, rgba(255,255,255,0) 0%);background-position: right;background-size: 2px 8px;background-repeat: repeat-y;background-color:transparent}

.app-timeline .item-subs .s-status{vertical-align:middle}
.app-timeline .item-subs .s-status:before{content:'';width:10px;height:10px;background:var(--color5);display:inline-block;border-radius:50%;margin-right:5px;vertical-align:middle}

.app-timeline .item-sub{display:flex;align-items: flex-start;;padding:10px;color:var(--color5);position:relative;min-height:40px}
.app-timeline .item-sub:first-child{padding-top:0px}
.app-timeline .item-sub:last-child{padding-bottom:0px}
.app-timeline  .item-sub .n:after{content:'';width:2px;height:calc(100% - 40px);display:block;position:absolute;background:var(--color5);left:29px;top:50px}
.app-timeline .item-sub:first-child .n:after{top:30px;height:calc(100% - 20px);}
.app-timeline  .item-sub .n span{border-radius:0}
.app-timeline  .item-sub .n span:after{border-radius:0}
.app-timeline .item-sub:first-child .n span{border-radius:50%}
.app-timeline .item-sub:first-child .n span:after{border:none}


.app-timeline .item-sub-first .n span{width:10px;height:10px;margin:15px}
.app-timeline .item-sub-first .n:before{content:'';width:31px;height:2px;top:19px;left:-10px;display:block;position:absolute;background:var(--color5)}
.app-timeline .item-sub-first .n:after{height:calc(100% - 40px);top:50px}
.app-timeline .item-sub-last .n:before{content:'';width:40px;height:2px;top:29px;left:-30px;display:block;position:absolute;background:var(--color5)}
.app-timeline .item-sub-last .n:after{content:'';width:10px;height:10px;top:21px;left:-39px;display:block;position:absolute;background:var(--color5);border:solid 4px #fff;border-radius:50%}


.app-timeline .active{}
.app-timeline .active > .n span{border-color:var(--color2_hover);color:#fff;background-color:var(--color2)}
.app-timeline .item.active > .n > span:after{border-color:var(--color2_hover);border-bottom-color: transparent;border-top-color:transparent;animation: rotation 1s linear infinite; top:-5px;left: -5px;  ;}
.app-timeline .item.active > .d{color:var(--color5_hover)}

.app-timeline .item-sub.active .d{color:var(--color5_hover)}
.app-timeline .item-sub.active .n span:before{content:'';width: 38px;height: 38px;border:solid 1px #fff;;display: inline-block;;position:absolute; top: 50%;left: 50%;  transform: translate(-50%, -50%);border-color:var(--color2_hover);animation: clippath 2s infinite linear;}

.app-timeline .item-sub.active .n span:after{border-color:var(--color2_hover);animation: clippath2 2s infinite linear;}

.app-timeline .item-sub-first.active .n span{background:var(--color2_hover)}
.app-timeline .item-sub-first.active .n span:before{border:none}


.app-timeline .pass > .n span{border-color:var(--color3_hover);color:#fff;background-color:var(--color3)}
.app-timeline .pass  .d{color:var(--color5_hover)}
.app-timeline .pass > .n:after{background-color:var(--color3_hover)}
.app-timeline .item-subs.pass > .n:after{background-image: linear-gradient(var(--color3_hover) 50%, rgba(255,255,255,0) 0%);background-color:transparent}

.app-timeline .item-subs .s-status.pass:before{background:var(--color3_hover)}



.blog .item{padding-bottom:20px}
@keyframes rotation {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
} 
@keyframes clippath {
    0%,100% {clip-path: inset(0 0 90% 0);}  
    25% {clip-path: inset(0 90% 0 0);}
    50% {clip-path: inset(90% 0 0 0);}
    75% {clip-path: inset(0 0 0 90%);}
}
@keyframes clippath2 {
    0%,100% {clip-path: inset(90% 0 0 0);} 
    25% {clip-path: inset(0 0 0 90% );}
    50% {clip-path: inset(0 0 90% 0);}
    75% {clip-path: inset(0 90% 0 0);}
}
.doc_item{border:solid 1px #ccc;padding:10px}
.doc_item legend{background:var(--color4);padding:5px 10px;color:#fff}
.doc_item  a:before{font-family:FontAwesome;content:'\f019';padding-right:5px }
@media screen and (max-width:860px){
	
	.app-timeline{width:auto}
	/*.app-timeline .item .d{display:none}*/

}
/*****/
/* url(../../images/learning.png) no-repeat 10px 20px;background-size:30px*/
@media(max-width:1492px){
	.body-home:not(.body_y_home)  header{background-position:-120px top}
}
@media(max-width:840px){
	.top-menu3  #header-profile{width:150px}
}
@media(max-width:790px){
	.cc-menu{display:none}
	.header-other{display:flex}

}
@media(max-width:650px){
	
	header,header .wrapper,.header_fixed_top{height:var(--top2) !important;}
	.container{min-height:calc(100% - var(--top2))}

	.div-index1{padding-top:200px}
	.div-index1 h1{font-size:25px}
	.div-index2 div a{width:auto}
	.div-index3 li {font-size:16px}
	.div-index3 li i{width:40px;height:40px}
	
}
@media(max-width:440px){
	body header,header .wrapper,.body_y:not(.body-home) header ,.body_y_home header,.header_fixed_top
	{height:var(--top3) !important;}
	.container,.body_y:not(.body-home) .container ,.body_y_home .container{min-height:calc(100% - var(--top3))}
	.top-menu2{font-size:12px ;}
}
@media(max-width:320px){
	.top-menu3  #header-profile{display:none}
}


/****** old  template ***/
/***********************/

.div-reward{max-width:460px;margin:0 auto;text-align:center;padding:20px 10px;font-size:20px}
.div-reward i{color:#FFD700;font-size:70px}
.div-reward img{width:80%;padding:20px 0}
.div-s1-login{max-width:300px;;padding:100px 10px 10px 10px;margin:0 auto}
.div-s1-login.div-s1-login-l{max-width:450px}
.div-s1-login h1{text-align:center}
.div-s1-login .btn-login{float:right;;display:inline-block;position: relative;font-size:16px}
.div-s1-login .btn-login:hover{}


.div-s1-login .input-username {display:inline-block;position: relative}
.div-s1-login .input-username input{padding-left:30px !important}
.div-s1-login .input-username:after {font-family: 'FontAwesome';content: '\f007';font-size:20px;position: absolute;top:10px;left: 10px;color:var(--color3_hover)}

.div-s1-login .input-password {display:inline-block;position: relative;width:100%}
.div-s1-login .input-password #password{padding-left:35px !important;width: -moz-calc(100% - 50px) !important;width: -webkit-calc(100% - 50px) !important;width: calc(100% - 50px) !important}
.div-s1-login .input-password:after {font-family: 'FontAwesome';content: '\f084';font-size:20px;position: absolute;top:10px;left: 10px;color:var(--color3_hover)}

.div-s1-login .input-email {display:inline-block;position: relative}
.div-s1-login .input-email input{padding-left:40px !important}
.div-s1-login .input-email:after {font-family: 'FontAwesome';content: '\f003';font-size:20px;position: absolute;top:10px;left: 10px;color:var(--color3_hover)}
.btn-eye{background-color:var(--color3)}
.btn-eye:hover{background-color:var(--color3_hover)}
.tbl-form input,.tbl-form button,.tbl-form select{height:35px;vertical-align:middle}
.form-submit{padding:0 10px;background:#ff6600;color:#fff;border:none;cursor:pointer;}
.form-submit:hover{background:#ff0000}
.form-clear{padding:0 10px;background:#aeaeae;color:#fff;border:none;cursor:pointer;}
.form-clear:hover{background:#9f9f9f}
@keyframes notify{
    0%{     color: #ff0000;    }
    40%{    color: #ff0000;}
    50%{    color: transparent;  }
    100%{   color: #ff0000;  }
}
.notify{color:#ff0000;animation:notify 1.5s infinite;}


.div-fullname{}
.div-fullname .inner{float:left;width:33.333%;height:50px;position:relative}
.div-fullname .inner input{width: -moz-calc(100% - 10px) ;width: -webkit-calc(100% - 10px);width: calc(100% - 10px);height:30px;padding:15px 5px 5px 5px;border:solid 1px #dddddd;}
.div-fullname .inner .input-f{-moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0;-moz-border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0;}
.div-fullname .inner .input-l{-moz-border-top-left-radius: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0;-moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;}
.div-fullname .inner label{position:absolute;left:0;top:0;font-size:12px;left:5px;white-space:nowrap;vertical-align:baseline;vertical-align:middle;color:#909090}
.div-fullname .inner span{position:absolute;right:2px;top:20px;color:#909090}


.tbl_show{border-collapse:collapse}
.tbl_show td{padding:5px}
.row{padding:10px 20px}
.row-md{max-width:720px;margin:0 auto;}
.row.box{border-radius:5px;-webkit-box-shadow: 3px 2px 11px -6px #858585;-moz-box-shadow: 3px 2px 11px -6px #858585;box-shadow: 3px 2px 11px -6px #858585;padding:10px;background:#fff;margin-bottom:10px;display:block}
.div-half .row{margin:10px}
.parent-half2 div.div-half:nth-child(odd) .row{margin-left:0}
.parent-half2 div.div-half:nth-child(even) .row{margin-right:0}

.input-fullname .input-2.sel-f{border-right:solid 1px #dddddd}





.hpl{padding:3px 10px;background:var(--color1);color:#fff;display:inline-block}
.hpl:hover{color:#fff;background:var(--color1_hover)}
.hpl-2{background:#ff33ff;color:#fff}
.hpl-large{padding:10px;font-size:24px}
.hpl-blue{background:#0b72f1}
.hpl-blue:hover{background:#0864d5}
.hpl-green{background:#049c21}
.hpl-green:hover{background:#0dad2b}

.contact-list div{padding:5px 0;font-size:18px}
.contact-list .fa-phone-square{color:#ff3300}
.contact-list .fa-facebook-official{color:#477dfa}
.contact-list .fa-twitter-square{color:#0ed4ff}
.fa-line{background:url(../../images/fa-line.png) no-repeat left top ;background-size:15px;width:15px;height:15px;display:inline-block}



.tbl_list  td.td-rank1{text-align:center;margin:0 auto}
.tbl_list  td.td-rank1 p,.tbl_list  td.td-rank2 p,.tbl_list  td.td-rank3 p{
	display: flex;  width:30px;height:30px;justify-content: center;align-items: center;border-radius:50%;margin:0 auto
}

.tbl_list .tr-rank1 td{border:solid 1px #ddbb03;background:#FFD700}
.tbl_list .tr-rank2 td{border:solid 1px #a2a0a0;background:#C0C0C0}
.tbl_list .tr-rank3 td{border:solid 1px #e9d6bc;background:#FFEBD1}
.tbl_list  td.td-rank1 p{background:#ddbb03;color:#473c00; }
.tbl_list  td.td-rank2 p{background:#a2a0a0;color:#473c00; }
.tbl_list  td.td-rank3 p{background:#e9d6bc;color:#473c00; }

.div-news{padding:10px;border-bottom:solid 1px #ccc;margin-bottom:10px}
.div-news .s,.news-view .s{color:#b5b5b5;font-size:14px;text-align:right}
.div-news .d{padding:10px}
.div-news .link{text-align:left;padding:10px 0}
.circle-no{background:#3399cc;display:inline-block;width:20px;height:20px;text-align:center;color:#fff;border-radius:10px;font-size:13px}

.ul-manage{display:flex;flex-wrap: wrap;gap:10px}
.ul-manage li{ flex-basis:calc(33.33% - 20px );list-style:none;}
.ul-manage li a{background:var(--color2);;height:100%;padding:5px;display:flex;    align-items: center;color:#000}
.ul-manage li a:hover{background:var(--color2_hover)}
.ul-manage li a i{padding-right:10px}
.ul-manage li a.sub{padding-left:20px}
.ul-manage  .li-text{display:none}

.div-hr{background:#dddddd;height:1px;display:block;margin:5px 0}
.div-manage ul li{float:left;width:33.33%;padding:10px 0}
.div-manage ul li.li-text:before,.div-manage ul li.li-d:before{content:'';display:block;clear:both}
.div-manage ul li.li-text,.div-manage ul li.li-d{float:none}
.div-manage ul:after{content:'';display:block;clear:both}

.circle-photo{-moz-border-radius:50%; -webkit-border-radius:50%;border-radius:50%;;width:50px;height:50px;overflow:hidden;display:inline-block;vertical-align:middle}
.circle-photo img{height:100%}
.div-content{}
.div-content:after{content:'';display:block;clear:both}
.div-content .d{float:left}
.sec-profile:after{content:'';display:block;clear:both}
.sec-profile .d{float:left}
.sec-profile .d1{width:310px;text-align:center;}
.sec-profile .d2{width: -moz-calc(100% - 310px) ;width: -webkit-calc(100% - 310px);width: calc(100% - 310px)}
.div-circle{overflow:hidden;position: relative;width:100px;height:100px;-moz-border-radius:50%; -webkit-border-radius:50%;border-radius:50%;} 
.div-circle:after{content: "";display: block;padding-bottom: 100%; }
.div-circle img{position: absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover;object-position: center;}
.sec-profile .div-circle{margin:0 auto;width:180px;height:180px;-webkit-box-shadow: -1px 4px 10px -5px #9e9e9e;-moz-box-shadow: -1px 4px 10px -5px #9e9e9e;box-shadow: -1px 4px 10px -5px #9e9e9e;}
.sec-profile .d1 .p1{font-size:24px;color:#222222;padding:10px 10px 0 10px}
.sec-profile .d1 .p2{font-size:26px;color:#0a268c;padding:0 10px}
.sec-profile .d2 .padding{padding:0 10px}
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(1)}
    to {-webkit-transform:scale(2)}
}
@keyframes zoom {
    from {transform:scale(0.4)}
    to {transform:scale(1)}
}
@keyframes zoom-out {
    from {transform:scale(1)}
    to {transform:scale(0)}
}

.hp-download{font-size:20px;background:var(--color4);color:#fff;padding:10px;margin:20px 0;display:inline-block}
.hp-download:hover{background:var(--color4_hover);color:#fff}
@media only screen and (max-width: 700px){
    .modal_image-content {width: 100%;}
}

@media(max-width:600px){
	.div-fullname .inner{float:none;width:100%}
	.div-fullname .inner .input-f{-moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px;-moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;}
	.div-fullname .inner .input-l{-moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;-moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0;}
}
@media(max-width:1920px){

}

@media(max-width:1620px){

}

@media(max-width:1440px){
	
	.layer-show{width: -moz-calc(50% - 10px) ;width: -webkit-calc(50% - 10px);width: calc(50% - 10px)}
}
@media(max-width:1280px){

	.sec-menu{display:none}
	.content1{padding-left:0}
	.content1 .wrapper{max-width:1240px}
	.col-50 .input-fullname .w-20p,.col-50 .input-fullname .w-40p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}
	
	.div-tbl-m2,.div-tbl-m2:nth-child(even){float:none;width:100%;margin-left:0}
	
}

@media(max-width:1200px){

	
}
@media(max-width:1124px){

}

@media(max-width:960px){


	

	
	.col-30,.col-70,.col-50{width:100%;float:none}
	.cols .col-50:nth-child(even) .row{margin-left:0}
	.col-50 .input-fullname  .input-1{-moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
	-moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0;-moz-border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0;
	border-right:none}
	.col-50 .input-fullname  .input-2{-moz-border-radius: 5px; -webkit-left-radius: 5px;border-radius:0}
	.col-50 .input-fullname  .input-3{
	-moz-border-top-left-radius: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0;
	-moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;
	-moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px;-moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;border-left:none}
	.col-right{margin-left:0}
	.col-50 .input-fullname .w-20p{width:20% !important}
	.col-50 .input-fullname .w-40p{width:40% !important}
	


	.parent-half2 .div-half {float:none;width:100% !important;}
	.parent-half2 .div-half:nth-child(even){float:none;width:100% !important;}
	.parent-half2 div.div-half:nth-child(odd) .row{margin:5px 0 10px 0}
	.parent-half2 div.div-half:nth-child(even) .row{margin:5px 0 10px 0}
	





}
@media(max-width:842px){

}
@media(max-width:820px){
	
	.col-50 .input-fullname .w-20p,.col-50 .input-fullname .w-40p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}
	.div-tbl .div-tbl-content{float:none;width:100% !important;padding-bottom:10px}
	.div-tbl .div-tbl-manage{float:none;width:100% !important}
	.div-tbl-manage .div-tbl-m2{width:100% !important;}



}
@media(max-width:760px){
	
}
@media(max-width:720px){

	.div-half {float:none;width:100% !important;}
	.parent-half .div-half:nth-child(even){float:none;width:100% !important;}
	
}

@media(max-width:600px){


	.row{padding:10px}
	.div-s1-login{margin:10px auto}
	.input-fullname .w-50p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}
	.btn-l{padding:10px 30px;font-size:16px}

	.layer-show{font-size:15px;width: -moz-calc(100% - 10px) ;width: -webkit-calc(100% - 10px);width: calc(100% - 10px)}
	.layer-show .d{float:left;width: -moz-calc(100% - 30px) ;width: -webkit-calc(100% - 30px);width: calc(100% - 30px)}
	.layer-show .no{font-size:30px;line-height:30px}
	.layer-show .icon{float:right;width:30px;font-size:35px}

	.input-fullname .w-20p, .input-fullname .w-40p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}

	
}
@media(max-width:460px){
	
}