body{font-family:var(--content);color:var(--color-body);overflow-x:hidden;background:var(--color-bg)}
.top-message{background:var(--color-red);padding:15px 0}
.top-message p{margin:0;color:var(--color-white)}
.top-message span.close{color:var(--color-white);cursor:pointer}
.top-message .center{display:flex;align-items:center;justify-content:space-between;gap:20px}
header{padding:20px 0;background:var(--color-white)}
header .center{display:flex;align-items:center;justify-content:space-between}
header .login a{display:flex;gap:10px;background:var(--color-red);align-items:center;padding:10px 20px;border-radius:2px;color:var(--color-white)}
header .login a strong{display:block;font-weight:700}
header .login a span{font-size:13px}
header .login a:hover{background:var(--color-black)}
h1{font-size:30px}
.course-box{border:1px solid var(--color-bg);border-radius:4px;overflow:hidden}
.course-box:hover{border:1px solid var(--color-silver)}
.course-box .course-ex{padding:20px;background:var(--color-white);position:relative}
.course-box .course-ex h2{font-size:18px;margin-bottom:10px}
.course-box .course-ex span.btn{font-size:14px;font-weight:600;color:var(--color-dark);display:block}
.course-box .course-ex p{font-size:13px}
span.count,span.duration{font-size:12px;font-weight:700;color:var(--color-white);padding:4px 8px;border-radius:2px}
span.count{background:var(--color-red)}
span.duration{background:var(--color-green)}
.course-header{background:var(--color-light)}
.lessons-profile ul li a{display:block}
.lessons-profile ul li a:hover strong{text-decoration:underline}
.lessons-profile ul small{display:block;margin:5px 0 0}
.lessons-profile ul i{font-style:italic}
.course-page-header{padding:40px 0}
.course-page{background:var(--color-white)}
.course-page .course-box{border:1px solid var(--color-light)}
.course-page .course-box h2{margin-top:20px}
.course-page .course-box .btn-t{padding:0;font-size:13px}
.side-menu{padding:30px;background:var(--color-white)}
.side-menu ul{list-style:none;margin-bottom:20px}
.side-menu ul li{display:block;padding:2px 0}
.side-menu ul li a{font-size:14px;font-weight:600;display:block;padding:2px}
.pager{margin-top:30px}
.pager ul{display:flex;justify-content:center;align-items:center;gap:5px}
.pager ul li a{display:block;padding:7px 14px;font-size:14px;font-weight:700;background:var(--color-light);border-radius:2px}
.pager ul li a:hover, .pager ul li.active a{background:var(--color-dark);color:var(--color-white)}
.course-page .sidebar .sidebar-box{position:relative;z-index:88;margin-top:-40px;background:var(--color-white);box-shadow:10px 10px 40px #0000001a;border-radius:4px}
.register .center{background:url(../img/register.jpg) no-repeat;background-size:cover;padding:80px 30px;text-align:center;margin-bottom:40px}
.register .center h3{font-size:24px}
.review-box{padding:30px;border:1px solid var(--color-silver);background:var(--color-white)}
.review-box p{font-size:13px}
.review-box h3{font-size:16px;margin:10px 0}
.review-box h3 span.course-name{font-size:13px;font-style:italic;font-weight:500;color:var(--color-body)}
.review-box .ratings{color:var(--color-orange);font-size:12px}
.blog-detail .center{max-width:1170px}
.pay-note{font-size:14px;padding:30px;background:var(--color-red);border-radius:3px;display:flex;flex-direction:column;gap:20px}
.pay-note span{color:var(--color-white);display:block}
footer{background:var(--color-border)}
footer .f-nav h4{font-size:16px}
footer .f-nav ul li{padding:2px 0}
footer .f-nav ul li a{font-size:14px;display:inline-block;padding:3px 0;color:var(--color-body)}
footer .f-nav ul li a:hover{color:var(--color-dark)}
footer .f-social ul{display:flex;gap:10px}
footer .f-social ul li a{display:block;width:42px;height:42px;line-height:42px;text-align:center;font-size:18px;background:var(--color-white);border-radius:4px}
footer .f-social ul li a:hover{color:var(--color-dark)}
.blog-box{background:var(--color-white)}
.blog-box .blog-ex{padding:30px}
.blog-box img{width:100%}
.faq-ac h3{font-size:16px;padding:20px 30px;background:var(--color-white);cursor:pointer}
.faq-ac h3:hover{background:var(--color-silver)}
.faq-content{padding:30px}
.course-nav{background:var(--color-border)}
.course-nav ul{list-style:none;display:flex}
.course-nav ul li a{display:block;padding:20px 30px;color:var(--color-dark);font-size:14px;font-weight:700}
.course-nav ul li.active a,.course-nav ul li:hover a{background:var(--color-nav);color:var(--color-white)}
.sidebar-content{display:flex;gap:40px}
.sidebar-content .content{width:75%}
.sidebar-content .sidebar{width:25%;display:flex;flex-direction:column;gap:10px}
.course-info{padding:20px;border-radius:2px;background:var(--color-white);position:sticky;top:0}
.course-info ul{margin-bottom:20px}
.course-info ul li{display:block;padding:6px 0;font-size:13px}
.course-info ul li i{width:20px;text-align:center}
.course-info .btn{text-align:center;width:100%;align-items:center;justify-content:center}
ul.course-list li{margin:10px 0}
ul.course-list li a{display:flex;background:var(--color-light);justify-content:space-between;gap:20px;padding:20px}
ul.course-list li a:hover{background:var(--color-border)}
.lesson-detail .sidebar-content{gap:0}
.lesson-list{overflow:hidden;height:460px;overflow-y:scroll}
.lesson-list ul li{margin-bottom:5px}
.lesson-list ul li a{display:flex;justify-content:space-between;padding:20px;background:var(--color-light);font-weight:700;font-size:14px}
.lesson-list ul li.active a,.lesson-list ul li:hover a{background:var(--color-border)}
.qa{background:var(--color-light)}
.qa .accordion h3{font-size:16px;padding:10px;background:var(--color-red);display:block;border-radius:2px;cursor:pointer;color:var(--color-white)}
.qa .acc-content{padding:20px 0}
h3 .ui-icon{margin-right:5px;display:inline-block}
#qa{scroll-margin-top:200px}
.question{background:var(--color-white);border-radius:6px;padding:20px;margin-bottom:20px}
.question .answer{margin:20px;padding:20px;background:var(--color-silver)}
.write{background:var(--color-white);padding:20px;border-radius:6px}
.write textarea{border:1px solid var(--color-silver);color:var(--color-body)}
#cssmenu{position:relative;z-index:99;font-family:var(--nav)}
#cssmenu>ul{display:flex}
#cssmenu>ul>li{margin:0 0 0 -4px}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button{list-style:none;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu>ul>li>a{display:block;font-size:14px;font-weight:700;color:var(--color-nav);padding:0 15px;line-height:50px;letter-spacing:-.5px}
#cssmenu>ul>li.active>a,#cssmenu ul li:hover>a{color:var(--color-nav-hover);position:relative}
#cssmenu #menu-button{display:none}
#cssmenu > ul > li{display:inline-block}
#cssmenu ul ul{position:absolute;left:-99999px;box-shadow:0 0 40px #0003;text-align:left;background:var(--color-dark);padding:12px 0;border-radius:4px}
#cssmenu li:hover > ul{left:auto;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{padding:12px 20px;font-size:14px;display:block;width:280px;text-decoration:none;color:var(--color-white);font-weight:400;position:relative}
#cssmenu ul ul li a:hover{color:var(--color-main);color:var(--color-white);opacity:.6}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu .has-sub{position:relative}
#cssmenu .has-sub>a{padding-right:40px}
#cssmenu .has-sub:before{content:'\f107';font-family:var(--faw);font-size:12px;font-weight:700;position:absolute;right:20px;line-height:50px;color:var(--color-nav)}
#cssmenu .has-sub:hover:before{color:var(--color-white);content:'\f106';font-family:var(--faw);font-weight:700}
#cssmenu .active.has-sub:before{color:var(--color-white)}
.bottom ul{display:flex;gap:10px;font-size:13px;margin-bottom:10px}
.bottom ul a:hover{text-decoration:underline}
.call a{width:60px;height:60px;display:block;font-size:34px;color:#fff;background:#2ecb71;border-radius:60px;text-align:center;line-height:60px;box-shadow:0 5px 20px #0003}
.call a:hover{background:#121212;color:#fff}
.call{z-index:999;right:30px;bottom:30px;position:fixed;width:60px;height:60px}
.qa-btns{display:none}
@media only screen and (max-width:920px) {
#cssmenu>ul>li.active>a,#cssmenu ul li:hover>a{opacity:1;position:relative}
.qa-btns{display:block;padding:10px;width:100%;display:flex;gap:5px}
.qa-btns .btn-s{width:50%;text-align:center;display:block;line-height:30px}
#cssmenu{position:absolute;left:0;right:0;width:auto;text-align:left;margin:0}
#cssmenu>ul>li>a:hover{background:var(--color-dark);color:var(--color-white)}
#cssmenu > ul{margin:0;position:relative}
#cssmenu>ul{display:none;z-index:9;position:absolute;top:44px;left:10px;right:10px}
#cssmenu ul{display:none;z-index:9;position:absolute}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu.align-center > ul,#cssmenu.align-right ul ul{text-align:left}
#cssmenu ul li,#cssmenu ul ul li,#cssmenu ul li:hover > ul > li{width:100%;height:auto}
#cssmenu > ul > li,#cssmenu.align-center > ul > li,#cssmenu.align-right > ul > li{float:none;display:block}
#cssmenu>ul>ul>li>a{font-size:12px;color:var(--color-white);background:none;padding:15px 20px 20px 30px}
#cssmenu>ul>li>a{padding:20px!important;color:var(--color-white)!important;display:block;background:color:var(--color-main);font-size:14px;line-height:normal!important;border-bottom:1px solid var(--color-dark)}
#cssmenu>ul>li:last-child>a{border-bottom:none}
#cssmenu>ul>li{background:var(--color-main);margin:0}
#cssmenu ul ul li a{padding:15px 20px}
#cssmenu ul ul{padding:0!important}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:var(--color-white);background:var(--color-main)}
#cssmenu ul ul li > a,#cssmenu ul ul li a{background:var(--color-white)}
#cssmenu ul ul ul li a{padding-left:40px}
#cssmenu ul ul ul ul li a{padding-left:40px}
#cssmenu>ul>li{border-right:none}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;right:auto;width:100%;margin:0}
#cssmenu #menu-button{display:block;color:var(--color-main);cursor:pointer;font-size:12px;height:48px;background:var(--color-main);width:48px;position:absolute;top:-24px;right:20px;border-radius:2px}
#cssmenu .submenu-button{position:absolute;z-index:10;right:0;top:0;display:block;border-left:1px solid var(--color-dark);height:55px;width:55px;cursor:pointer}
#cssmenu .submenu-button::after{content:'';position:absolute;top:21px;left:26px;display:block;width:1px;height:11px;background:var(--color-white);z-index:99}
#cssmenu .submenu-button::before{content:'';position:absolute;left:21px;top:26px;display:block;width:11px;height:1px;background:var(--color-white);z-index:99}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%}
#cssmenu > ul > li.has-sub > a::after,#cssmenu ul ul li.has-sub > a::after,#menu-line,#cssmenu .submenu-button.submenu-opened:after{display:none}
#cssmenu ul ul li a{color:var(--color-white);background:var(--colo-main)}
#cssmenu ul ul{border-bottom:none}
#cssmenu ul ul li a{border-bottom:1px solid var(--color-dark)}
#menu-button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index:12399994}
#menu-button:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;margin:auto;position:absolute;top:24px;right:0;left:0;display:block;height:4px;width:20px;border-top:2px solid var(--color-dark);border-bottom:2px solid var(--color-dark);content:''}
#menu-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;margin:auto;-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:17px;right:0;left:0;display:block;height:2px;width:20px;background:var(--color-dark);content:''}
#menu-button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:22px;border:0;height:2px;width:19px;background:var(--color-white);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
#menu-button.menu-opened:before{top:22px;background:var(--color-white);width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .has-sub:before{display:none}
.course-detail .center{padding:0}
.course-detail .sidebar-content{flex-direction:column}
.course-detail .sidebar-content .content{width:100%;padding:0!important}
.course-detail .sidebar-content .sidebar{width:100%}
.lesson-detail .center{padding:0}
.lesson-detail .sidebar-content{flex-direction:column;padding:0}
.lesson-detail .sidebar-content .content{width:100%;padding:0}
.lesson-detail .sidebar-content .content .video-content{padding:10px 20px}
.lesson-detail .sidebar-content .content .video-content h2{font-size:18px}
.lesson-detail .sidebar-content .sidebar{width:100%}
.login span,.user span{display:none}
header .login a,header .user a{display:block;width:48px;height:48px}
header .login,header .user{margin-right:58px}
header .login a{padding:0;text-align:center;line-height:48px}
header .user a{padding:0;text-align:center;line-height:48px}
.course-detail{padding:20px}
.course-detail.p-3-60{padding-bottom:0!important}
.header-content{max-width:100%}
.sidebar-content{flex-direction:column;gap:20px}
.sidebar-content .content,.sidebar-content .sidebar{width:100%}
.sidebar-content .content{padding-top:30px!important;padding-bottom:30px!important}
.course-page .sidebar .sidebar-box{margin-top:0;margin-bottom:20px}
.course-info .btn{position:fixed;bottom:0;left:0;right:0}
.course-nav .center{padding:0}
.course-nav ul li a{padding:10px 15px;font-size:13px}
}