/* COMMON */
body {
    font-family: Quicksand, sans-serif;
    background-color: #f8f9fd !important;
}

body.dark {
    background-color: #114058 !important;
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

a {
    text-decoration: none !important;
}

.title_tag:hover {
    text-decoration: underline !important;
}

.float-btn {
    position: fixed;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    display: none;
}

.float-btn button {
    background: #FF5620;
    box-shadow: inset 0px -6px 0px rgba(0, 0, 0, 0.25);
    border-radius: 90px;
    width: 60px;
    height: 60px;
    color: white;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
    border: none;
    position: absolute;
    bottom: 30px;
    left: 30px;
}

.float-btn button i {
    position: relative;
    top: -1px;
}

.float-btn.active button {
    color: #FF5620;
    background-color: white;
    box-shadow: none;
}

.blackscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #0000009e;
}

.no-padding-col {
    padding-left: 0;
    padding-right: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
.btn:focus {
    outline: none;
}

.col_5 {

    width: 16%;
    float: left;
    position: relative;
    padding-right: 5px;
    padding-left: 5px;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

.thumbnail {
    padding: 0;
    border-radius: 12px;
}

.thumbnail .caption {
    padding: 0;
}

.tab-pane {
    /* margin-top: 13px; */
    position: relative;
    top: 13px;
}

.tab-pane .owl-theme .owl-nav [class*=owl-] {
    background-color: transparent;
    margin: 0 -65px;
    padding: 0;
    height: 78px;
    text-align: center;
}

.tab-pane .owl-theme .owl-nav [class*=owl-]:hover {
    background: none;
}

.tab-pane .owl-prev {
    float: left;
}

.tab-pane .owl-next {
    float: right;
}

.tab-pane .owl-nav {
    position: absolute;
    top: 114px;
    /* transform: translateY(-50%); */
    width: 100%;
    height: 0;
    z-index: 10;
}

.tab-pane .owl-nav div {
    display: inline-block;
    /* width: 50px; */
    height: 50px;
}

.tab-pane .owlNavBtn {
    font-size: 80px;
    color: black;
    font-weight: bold;
    opacity: 0.15;
}

.tab-pane .owlNavBtn.glyphicon-menu-left {
    margin-left: 5px;
}

.tab-pane .owlNavBtn.glyphicon-menu-right {
    margin-right: 5px;
}

.tab-pane .owl-theme .owl-dots {
}

.tab-pane .owl-theme .owl-dots .owl-dot span {
    background: none;
    width: 16px;
    height: 16px;
    border: 1px #c4c4c4 solid;
}

.tab-pane .owl-theme .owl-dots .owl-dot.active span,
.tab-pane .owl-theme .owl-dots .owl-dot:hover span {
    border: 1px #ff5520 solid;
    background-color: #ff5520;
}

.navbar-toggle.collapsed .crossSign {
    display: none;
}

.navbar-toggle {
    margin-bottom: 0;
}

nav,
nav a {
    font-family: 'Quicksand';
    font-size: 22px;
    color: white !important;
}

/*nav,*/
nav a i.icon {
    margin-right: 4px;
}

.navbar {
    margin-bottom: 0;
    border: none;
}

.navbar > div > div > div {
    padding-left: 15px;
}

.nav-tabs {
    border: none;
}

.crossSign i,
.barbarbar i {
    font-size: 40px;
}

.nav > li > a > span {
    margin-right: 10px;
}

.nav > li > a > i.fa-angle-right {
    display: none;
}

nav > div > .row:first-child {
    background-color: #04689a;
    height: 72px;
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
}

nav > div > .row:last-child {
    background-color: #ff5520;
    height: 72px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover {
    background-color: transparent;
    border: none;
}

nav .nav.nav-tabs li a {
    border-radius: 0;
    border: none;
    font-size: 22px;

}

.nav .open a {
    background-color: transparent !important;
}

nav .nav.nav-tabs > li.active {
    background-color: #ff5520;
    border: none;
}

nav .nav.nav-tabs > li {
    border-radius: 0;
    border-right: 1px #6496af solid;
    padding: 11px 11px 10px 11px;
    background-color: #1e5069;
}

nav .nav.nav-tabs > li:last-child {
    float: right;
    border-right: none;
    padding-top: 0;
    padding-right: 0;
    background-color: transparent;
    height: 72px;
}

.buyAccount a.btn {
    border-radius: 12px !important;
    background-color: #ff5620;
    font-size: 22px;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
    padding: 9px 28px 11px;
    box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.25);
}

#navbar .buyAccount {
    display: none;
}

ul.nav-actions {
    /*padding-left: 0;*/
}

ul.nav-actions li {
    display: inline-block;
    border-right: none;
    margin-top: -1px;
    padding: 13px 0 15px 15px;
    height: 73px;
}

ul.nav-actions li:first-child {
    padding-right: 18px;
    position: relative;
    top: -2px;
}

ul.nav-actions li:first-child i {
    margin-right: 7px;
}

ul.nav-actions li:last-child {
    padding-left: 22px;
}

ul.nav-actions li.buyAccount {
    padding-right: 24px;
    padding-left: 25px;
}

ul.nav-actions li:last-child div {
    margin-top: -3px;
}

ul.nav-actions li:last-child div a {
    margin: 10px;
    display: inline-block;
    margin-right: 0;
}

ul.nav-actions-logined {
    position: relative;
}

ul.nav-actions-logined > li {
    display: inline-block;
    padding: 0 8px;
}

ul.nav-actions-logined li.hotline {
    position: relative;
    top: -26px;
    margin-right: 20px;
}

ul.nav-actions-logined li.hotline i {
}

ul.nav-actions-logined li.hotline span {
    margin-left: 5px;
}

ul.nav-actions-logined li.star div,
ul.nav-actions-logined li.notification div {
    width: 48px;
    height: 48px;
    background-color: #034d72;
    text-align: center;
    border-radius: 30px;
    position: relative;
    z-index: 1;
}

ul.nav-actions-logined li.star {
    position: relative;
    top: 12px;
}

ul.nav-actions-logined li.star div {
    height: 48px;
}

ul.nav-actions-logined li.star div img {
    position: relative;
    top: 6px;
    left: 0.5px;
}

ul.nav-actions-logined li.star span {
    /* float: left; */
    background-color: #034d72;
    padding: 5px 12px 5px 55px;
    border-radius: 17px;
    font-size: 10px;
    text-align: right;
    position: relative;
    top: -40px;
}

ul.nav-actions-logined li.notification {
    position: relative;
    top: -34px;
}

ul.nav-actions-logined li.notification div {
}

ul.nav-actions-logined li.notification div img {
    position: relative;
    top: 6px;
}

ul.nav-actions-logined li.notification div span {
    background: transparent url(/theme/vuihoc/imgs/logined/notinum.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 10px;
    padding: 1px 4px;
    width: 18px;
    height: 17px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 27px;
}

ul.nav-actions-logined li.logined {
    position: relative;
    top: -9px;
}

ul.nav-actions-logined li.logined div {
}

ul.nav-actions-logined li.logined div img {
    width: 48px;
    height: 48px;
    border-radius: 30px;
}

ul.nav-actions-logined li.logined div a {
    font-size: 16px;
}

ul.nav-actions-logined li.logined div > ul ul.dropdown-menu .glyphicon-triangle-top {

    left: 75px;
}

ul.nav-actions-logined li.logined li.dropdown ul li {
    display: block;
}

ul.nav-actions-logined li.logined li.dropdown > a {
    padding: 0;
}

ul.nav-actions-logined li.logined li.dropdown > a span {
    position: relative;
    top: 15px;
    margin-left: 10px;
}

ul.nav-actions-logined li.logined li.dropdown > a > span i.fa-angle-right {
    display: none;
}

ul.nav-actions-logined li.logined li.dropdown > a > span i.fa-angle-down {
    margin-left: 9px;
    top: 1px;
    position: relative;
}

ul.nav-actions-logined li.logined div a i {
}

ul.nav-actions-logined-mobile {
    display: none;
}

nav .nav.nav-tabs li.buyAccount {
    border-left: 1px #6496af solid !important;
    border-right: 1px #6496af solid !important;
}

.nav.navbar-nav.pull-right {
    /* margin-right: -15px; */
    /* transform: translateX(-50%); */
    position: absolute;
    left: 21.5%;
}

.tab-pane > div > div > div {
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

a.navbar-brand {
    font-size: 35px;
    /* margin-left: 0 !important; */
}

/*.nav.navbar-nav.pull-right li:last-child a {
    padding-right: 0;
}*/

/*.navbar-collapse.collapsing {*/
/*-webkit-transition: height 0.01s;*/
/*-moz-transition: height 0.01s;*/
/*-ms-transition: height 0.01s;*/
/*-o-transition: height 0.01s;*/
/*transition: height 0.01s;*/
/*}*/

.no-transition {
    -webkit-transition: height 0;
    -moz-transition: height 0;
    -ms-transition: height 0;
    -o-transition: height 0;
    transition: height 0;
}

.dropdown-menu {
    min-width: 136px;
    border-radius: 12px !important;
    padding: 10px 0 8px;
}

#header_notification_bar .dropdown-menu {
    width: 400px;
}

.dropdown-menu.top-menu {
}

.dropdown-menu span.glyphicon-triangle-top {
    position: absolute;
    top: -16px;
    font-size: 22px;
    left: 56px;
}

.des_course {
    font-size: 15px !important;
    width: 260px;
    margin-left: -100px;
}

#style_dang_ky_hoc {
    width: 150px !important;
}

#abt {
    width: 100% !important;
    background: #ff5620 !important;
    font-weight: 700;
    margin-bottom: 10px;
}

.detail_des {
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 25px;
}

.detail p {
    padding-left: 10px;
    padding-right: 10px;
}

.btn_chitiet {
    margin: 0px auto !important;
    display: block !important;
    width: 200px !important;
    background-color: #8ac449 !important;
}

#icon_vaohoc {
    right: 188px !important;
    top: 5px !important;
}

.content {
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 13px;
}

.old-price {
    font-size: 22px;
    text-align: right;
    color: #828282;
    margin-bottom: 0px;
}

.new-price {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    color: #1b3043;
    height: 20px;
    margin-bottom: 7px;
}

.remaining {
    font-size: 15px;
    color: #ff5620;
    font-weight: 700;
    text-align: right;
    margin-bottom: 15px;
}

#style_tu_van_them {
    width: 147px !important;
}

.cover img {
    width: 100%;
    border-radius: 12px 12px 0px 0px;
}

.detail {
    text-overflow: clip;
    overflow: hidden;
    font-size: 16px;
}

.price {
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    margin-bottom: 10px;
    margin-right: 10px;
}

.action {
    padding-bottom: 10px;
}

.btn_act_course {
    left: 43px;
}

.dropdown-menu li {
    border-bottom: 1px #ededed solid;
}

.dropdown-menu li:hover {
    background-color: #ff5520;
}

.dropdown-menu li:hover > a {
    color: white !important;
}

.dropdown-menu li:last-child {
    border: none;
}

.dropdown-menu li a {
    color: #485053 !important;
    font-size: 16px;
    padding: 8px 15px 5px 10px;
    white-space: initial;
}

.dropdown-menu li a > i {
    font-size: 16px;
    margin-top: 5px;
}

.dropdown-menu li a .time {
    color: #999;
}

.dropdown-menu li:hover > a .time {
    color: white !important;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -11px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.bodyItem {
    padding: 50px 0 0;
}

#modal-login .modal-content {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.content-sheet {
    background-color: white;
    padding: 50px 25px;
    border: 1px black solid;
    border-radius: 12px;
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
    border: solid 1px #d1d1d1;
    margin-top: 85px;
}

.content-sheet .title {
    margin-top: 0;
}

.content-sheet .left .title {
    margin-bottom: 40px;
}

.content-sheet .right .title {
    margin-bottom: 25px;
}

.strikeout {
    display: inline-block;
    height: 1px;
    width: 18px;
    background-color: white;
    position: absolute;
    top: 24px;
    left: 16px;
}

.submit-big,
.submit-big-re {
    font-family: Quicksand;
    font-size: 36px;
    color: white;
    height: 60px;
    border-radius: 12px;
    box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.25);
    background-color: #ff5620;
    border: none;
    padding: 0 35px;
}

.submit-big-re {
    background-color: green;
}

/* HOMEPAGE */
.heading_sec {
    /* font-family: 'Quicksand'; */
    font-family: Quicksand;
}

.heading_sec .slogan {
    padding-top: 100px;
    color: #fff;
    font-weight: 500;
}

.heading_sec .slogan .slogan-title {
    font-size: 48px;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.1;
}

.heading_sec .slogan .slogan-sub {
    font-size: 100px;
    margin-top: -38px;
}

@media (max-width: 568px) {
    .heading_sec .slogan .slogan-title {
        font-size: 30px;
    }

    .heading_sec .slogan .slogan-sub {
        margin-top: -22px;
        font-size: 60px;
    }

    #navbar_vue {
        margin-top: -10px;
    }
    #resetPasswordForm {
        width: 100% !important;
    }
}

#heading_sec_vue.heading_sec h1 {
    color: white;
    font-size: 100px;
    margin-top: -20px;
}

#heading_sec_vue.heading_sec h1 a {
    color: white;
}

.heading_sec h4 {
    color: white;
    font-size: 48px;
}

.heading_sec h4 a {
    color: white;
}

.classBlock {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.classBlock .thumbnail {
    padding: 0;
    border: none;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
    border: solid 1px #d1d1d1;
}

.classBlock h4 {
    margin: 0 0 -12px 0;
    font-size: 48px;
    font-weight: bold;
}

.classBlock h4 span {
    display: none;
}

.classBlock h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 140px;
    font-weight: bold;
}

.classBlock .thumbnail .className {
    padding-top: 25px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    margin: -1px;
    padding-bottom: 10px;
}
.grade_0 {
    background-color: #ff8897;
}

.grade_1 {
    background-color: #ffba00;
}

.grade_2 {
    background-color: #3079d5;
}

.grade_3 {
    background-color: #1dc2da;
}

.grade_4 {
    background-color: #0fc45b;
}

.grade_5 {
    background-color: #dc4baa;
}

.grade_6 {
    background-color: #ffba00;
}

.grade_7 {
    background-color: #3079d5;
}

.grade_8 {
    background-color: #1dc2da;
}

.grade_9 {
    background-color: #0fc45b;
}

.classBlock .thumbnail .caption {
    padding: 0;
}

.classBlock .thumbnail .caption p {
    font-family: Quicksand;
    font-weight: bold;
    margin: 0;
    padding: 8px 15px;
    border-bottom: 1px grey solid;
}

.classBlock .thumbnail .caption p:first-child {
    border-bottom: 1px grey solid;
}

.classBlock .thumbnail .caption p:last-child {
    padding: 9px 15px;
}

.classBlock .thumbnail .caption a {
    color: black;
    font-size: 20px;
    display: block;
}

.classBlock .thumbnail .caption a i {
    font-size: 16px;
    margin-top: 6px;
}

.searchBar > div {
    margin-top: 30px;
}

.searchBar > div > div {
    position: relative;
    background-color: #2ca9e2;
    border-radius: 12px;
    padding: 11px 0 1px;
    /*margin-top: 10px;*/
    overflow: hidden;
}

.searchBar > div > div i.fa-search {
    position: absolute;
    color: black;
    opacity: 0.15;
    font-size: 80px;
    top: -8px;
    left: 31px;
    z-index: 0;
}

.searchBar {
    font-size: 22px;
    color: white;
    font-weight: bold;
}

.searchBar ul {
    /*padding-left: 0;*/
    text-align: center;
    position: relative;
}

.searchBar ul li {
    display: inline-block;
    margin: 0 6px;
}

.searchBar button {
    border-radius: 12px;
    background-color: #FF6609;
    color: white;
    font-size: 22px;
    padding: 5px 35px;
    position: relative;
    top: -2px;
}

.searchBar button:hover {
    color: white;
}

.searchBar button span {
    top: 5px;
    margin-right: 8px;
}

.searchBar select {
    border-radius: 12px;
    padding: 6px 60px 6px 20px;
    font-size: 22px;
    color: #04689a;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.searchBar .selectBox {
    position: relative;
}

.searchBar .selectBox i {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 16px;
    color: #04689a;
}

.head_title {
    margin-bottom: 40px;
    position: relative;
}

.head_title h2 {
    font-size: 36px;
    color: black;
    font-family: Quicksand;
    font-style: normal;
    font-weight: bold;
    padding: 10px 0 15px;
    margin: 0;
    text-transform: uppercase;
}

.head_title::after {
    content: "";
    width: 120px;
    height: 6px;
    border-radius: 12px;
    background-color: #ff5520;
    position: absolute;
    bottom: 0;
}

.head_title.text-center::after {
    left: 50%;
    margin-left: -60px;
}

.head_title .spliter {
    width: 121px;
    height: 6px;
    border-radius: 12px;
    background-color: #ff5520;
}

/*.notable_lecture, .notable_lesson, .fun_math {
    background-color: #f8f9fd;
}*/

ul.nav.content-tab {
    text-align: center;
    margin-bottom: 51px;
}

ul.nav.content-tab li {
    margin-right: 20px;
    display: inline-block;
    float: none;
}

ul.nav.content-tab li a {
    padding: 17px 70px 16px;
    background-color: #e5f4f9;
    font-family: 'Quicksand';
    font-size: 22px;
    display: inline-block;
    border-radius: 100px;
    /* border: none; */
    box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 0 4px 0 rgba(0, 0, 0, 0.25);
    border: solid 1px #04689a;
}

ul.nav.content-tab li.active a {
    background-color: #ff5620;
    color: white;
    border: 1px #ff5620 solid;
    box-shadow: none;
}

.topics .thumbnail {
    border: solid 1px #d1d1d1;
    box-shadow: 3px 3px 29px rgba(17, 48, 71, 0.08);
}

.topics .thumbnail .cover {
    height: 198px;
    width: 100%;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    /*background: #0079AF url(/theme/vuihoc/imgs/teacher.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
}

.topics .thumbnail .cover img {
    width: 80px;
    position: relative;
    top: 30%;
    cursor: pointer;
}

.topics .thumbnail h3 {
    margin-top: 15px;
    font-family: 'Quicksand';
    font-size: 22px;
}

.topics .thumbnail p {
    color: #c4c4c4;
}

.topics .thumbnail p span {
    color: #ff5620;
}

.topics .thumbnail .caption .title {
    padding: 10px 20px
}

.topics .thumbnail .caption .footer {
    padding: 14px 20px
}

.topics .thumbnail .caption .footer {
    border-top: 1px #c4c4c4 solid;
    height: 48px;
}

.topics .thumbnail .caption .footer div {
    display: inline-block;
}

.topics .thumbnail .caption .footer .right {
    margin-top: -7px;
}

.topics .thumbnail .caption .footer .right span {
    font-size: 22px;
    color: #ffba00;
}

.topics .thumbnail .caption .footer .left span {
    margin-right: 10px;
    color: #c4c4c4;
}

.topics .thumbnail .caption .footer .left span i {
    font-size: 22px;
}

.topics .thumbnail .caption .footer .left span span {
    font-size: 14px;
    position: relative;
    top: -3px;
    left: 3px;
}

.notable_lesson .thumbnail {
    position: relative;
    color: white;
}

.notable_lesson .thumbnail p {
    font-size: 20px;
    font-weight: 600;
}

.notable_lesson .thumbnail h1 {
    font-size: 190px;
    opacity: 0.15;
    position: absolute;
    right: 15px;
    top: -30px;
    font-family: 'Quicksand';
}

.notable_lesson .thumbnail a {
    font-size: 22px;
    color: white !important;
    /*text-align: right;*/
    display: inline-block;
    margin-top: -10px;
    margin-bottom: 6px;
    font-family: 'Quicksand';
    position: absolute;
    right: 15px;
}

.notable_lesson .thumbnail a i,
.fun_math .thumbnail .caption a i {
    margin-right: 5px;
}

.notable_lesson .thumbnail .content {
    padding: 65px 15px 2px;
}

.notable_lesson .thumbnail .caption {
    /*padding: 0 15px;*/
    padding: 0px 15px 27px;
    position: relative;
}

.fun_math {
    padding-bottom: 50px;
    background-color: rgba(122, 216, 226, 0.15);
}

.fun_math .thumbnail {
    border: 1px #d1d1d1 solid;
}

.fun_math .thumbnail .content {
    padding: 20px 20px;
    border-bottom: 1px #c4c4c4 solid;
    color: black;
}

.fun_math .thumbnail .content .icon {
    margin-bottom: 15px;
    height: 55px;
}

.fun_math .thumbnail .content .icon img {
    height: 55px;
}

.fun_math .thumbnail .content .img-responsive {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #cbcbcb;
}

.fun_math .thumbnail .content p {
    font-family: Quicksand;
    font-size: 20px;
}

.fun_math .thumbnail .caption {
    padding: 10px 10px;
    position: relative;
    text-align: center;
}

.fun_math .thumbnail .content .main-quiz-content {
    height: 120px;
    overflow: hidden;
}

.fun_math .content > h3 {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 8px;
    margin-top: 0;
}

.fun_math .content > h3 > a {
    color: black;
}

.fun_math .thumbnail .caption a {
    font-family: 'Quicksand';
    color: #ff5620;
    font-size: 22px;
}

.school_news {
    padding-bottom: 50px;
    background: #216999;
    /*background: #216999 url(/theme/vuihoc/imgs/bg_kids.png);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.article .thumbnail {
    font-family: 'Quicksand';
}

.article .thumbnail .cover {
    height: 197px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    overflow: hidden;
    margin: -1px -1px 0 -1px;
}

.article .thumbnail .cover img {
    height: 100%;
    transform: translateX(-50%);
    position: relative;
    left: 50%;
}

.article .thumbnail .content {
    padding: 15px 23px 5px;
    border-bottom: 1px #c4c4c4 solid;
}

.article .thumbnail .content h4 {
    font-size: 22px;
}

.article .thumbnail .content p {
    font-family: Quicksand;
    color: black;
    font-size: 20px;
    font-weight: normal;
}

.article .thumbnail .content p.date {
    color: #c4c4c4;
    font-size: 14px;
    font-weight: normal;
}

.article .thumbnail .caption {
    height: 49px;
    position: relative;
}

.article .thumbnail .caption a {
    font-size: 22px;
    color: #ff5620;
    position: absolute;
    top: 10px;
    right: 23px;
}

.navigation {
    padding: 50px 0 30px;
}

.navigation .fn-title {
    color: #04689a;
    font-family: 'Quicksand';
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 500;
}

.navigation p a {
    color: black;
    font-size: 14px;
}

footer.homeFooter {
    /*padding: 25px 0 75px;*/
    min-height: 465px;
}

footer.homeFooter > div > div {
    padding-top: 25px;
    border-top: 1px #c4c4c4 solid
}

footer.homeFooter .left {
    padding-left: 0;
    text-align: justify;
}

footer.homeFooter .left img {
    margin-top: 30px;
}

footer.homeFooter .left .fn-title {
    color: #04689a;
    font-family: 'Quicksand';
    font-size: 48px;
    margin-bottom: 20px;
    margin-top: 10px;
}

footer.homeFooter .left p {
    width: 90%;
    font-size: 14px;
    margin-bottom: 15px;
}

footer.homeFooter .right {
    padding-right: 0;
}

footer.homeFooter .right .head_title {
    margin-bottom: 26px;
}

footer.homeFooter .right .head_title .fn-title {
    font-size: 36px;
    color: #04689a;
    font-weight: bold;
    padding: 10px 0;
}

footer.homeFooter .right .spliter {
    background-color: #04689a;
}

footer.homeFooter .bct {
    position: relative;
}

footer.homeFooter .bct img {
    /*position: absolute;*/
    /*top: -50px;*/
}

/* ARTICLE */
.breadcrumb_sec {
}

.breadcrumb_sec .row:last-child {
    /* background-color: #e5f4f9; */
    /*background-size: contain;*/
}

.breadcrumb_sec .headingBackground {
    background-color: #2ca9e2;
    height: 140px;
}

.dark .breadcrumb_sec .headingBackground {
    background-color: #0084cb;
}

.breadcrumb_sec .headingBackground > div > div {
    min-height: 80px;
    position: relative;
    overflow: hidden;
}

.breadcrumb_sec .headingBackground .kid,
.breadcrumb_sec .headingBackground .solid-cloud,
.breadcrumb_sec .headingBackground .trans-cloud,
.breadcrumb_sec .headingBackground .math-formulas {
    position: absolute;
    right: 0;
    top: 0;
}

.breadcrumb_sec .headingBackground .kid {
    background: url(/theme/vuihoc/imgs/flying_kid.png);
    background-position: 0px 12px;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 172px;
    height: 160px;
    z-index: 4;
    right: 70px;
}

.breadcrumb_sec .headingBackground .solid-cloud {
    background: url(/theme/vuihoc/imgs/cloud_solid.png);
    background-position: right 0;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 211px;
    height: 127px;
    z-index: 3;
    top: 90px;
    right: 225px;
}

.breadcrumb_sec .headingBackground .trans-cloud {
    background: url(/theme/vuihoc/imgs/cloud_transparent.png);
    background-position: 0px 0;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 276px;
    height: 166px;
    z-index: 2;
    right: 0px;
    top: 34px;
}

.breadcrumb_sec .headingBackground .math-formulas {
    background: url(/theme/vuihoc/imgs/math_formulas.png);
    background-position: right 0;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 397px;
    height: 269px;
    z-index: 1;
    right: 200px;
    top: -80px;
}

.breadcrumb_sec .headingBackground h1 {
    font-family: Quicksand;
    font-size: 48px;
    color: #ffffff;
}

.breadcrumb_sec .breadcrumb {
    font-family: Quicksand;
    font-size: 20px;
    background-color: transparent;
    margin: 0;
    padding: 11px 15px 9px 0;
}

.breadcrumb_sec .breadcrumbBar {
    background-color: #e5f4f9;
    margin-bottom: 7px;
}

.breadcrumb_sec .breadcrumb li {
    margin-left: 0;
}

.breadcrumb_sec .breadcrumb > li + li:before {
    color: black;
    padding: 0 5px 0 5px;
}

.breadcrumb_sec .breadcrumb li a {
    color: black !important;
}

.breadcrumb_sec .breadcrumb li.active span {
    font-weight: 700;
    color: black;
}

.article_sec {
}

footer.contentPage {
    height: 297px;
    /*margin-top: -85px;*/
    position: relative;
    z-index: 0;
}

footer.contentPage .copyright {
    position: absolute;
    bottom: 48px;
}


/* LOGIN */
.login_sec {
}

.gohome a h4 {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 700;
    color: #1b3043;
    position: relative;
    top: 15px;
    padding-left: 50px;
}

.login_sec .left,
.login_sec .right {
    margin-top: 160px;
}

.formPanel {
    font-family: 'Quicksand';
    color: #787878;
    padding: 41px 30px 0;
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
    margin: 80px auto;
    background-color: white;
}

.formPanel > img:first-child {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
}

.formPanel button.close {
    position: absolute;
    top: -62px;
    right: -43px;
    opacity: 1;
}

.formPanel button.close i {
    color: #1b3043 !important;
    font-size: 32px;
}

.formPanel .formTitle {
    position: relative;
}

.formPanel .formTitle .text-title {
    font-family: Quicksand;
    font-size: 36px;
    color: #1b3043;
    margin-bottom: 31px;
    margin-top: 10px;
    font-weight: 500;
}

.formPanel .formContent {
}

.formPanel .formContent form {
}

.formPanel .formContent form ul {
    background-color: #f0f0f0;
    border: 1px #dadada solid;
    border-radius: 12px;
    padding: 8px 0;
    margin-bottom: 4px;
}

.formPanel .formContent form ul li {
    padding: 5px 16px 5px 17px;
}

.formPanel .formContent form ul li i {
    position: relative;
    top: -2px;
}

.formPanel .formContent form ul li i.fa-eye {
    cursor: pointer;
}

.formPanel .formContent form ul li.hasBorderBottom {
    border-bottom: 1px #dadada solid;
}
.formPanel .formContent form ul li input::placeholder{
    color: #D1D1D1;
}
.formPanel .formContent form ul li input::-webkit-input-placeholder{
    color: #D1D1D1;
}
.formPanel .formContent form ul li input::-ms-input-placeholder{
    color: #D1D1D1;
}
.formPanel .formContent form ul li input[type="text"],
.formPanel .formContent form ul li input[type="password"] {
    border: none;
    background-color: transparent;
    margin-left: 8px;
    font-size: 20px;
    width: 86%;
}

.formPanel .formContent form ul li input[type="text"]:focus,
.formPanel .formContent form ul li input[type="password"]:focus {
    outline: none;
}

.formPanel .formContent form label {
    font-weight: normal;
    padding: 0 20px;
    margin-bottom: 20px;
}

.formPanel .formContent form label a {
    color: #ff5620;
    text-decoration: underline !important;
}

.formPanel .formContent form label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.formPanel .formContent button {
    border-radius: 12px;
    box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.25);
    background-color: #ff5620;
    font-family: Quicksand;
    font-size: 22px;
    color: white;
    border: none;
    padding: 8px 10px 9px;
    margin-bottom: 9px;
}

.formPanel .formContent button:hover {
    opacity: 0.9;
}

.formPanel .formContent form button.loginBtn,
.formPanel .formContent form button.registerBtn {
    display: block;
    border-radius: 12px;
    background-color: #ff5620;
    width: 100%;

}

.formPanel .formContent button.facebookBtn {
    background-color: #3b579d;
    margin-right: 8px;
    width: 189px;
    position: relative;
    padding-left: 32px;
    margin-bottom: 37px;
}

.formPanel .formContent button.googleBtn {
    background-color: #db4633;
    width: 189px;
    position: relative;
    padding-left: 38px;
    margin-bottom: 37px;
}

.formPanel .formContent button i {
    position: absolute;
    top: 12px;
    left: 15px;
    font-size: 22px;
}

.formPanel .formFooter {
    height: 78px;
    background-color: #1b3043;
    margin-right: -30px;
    margin-left: -30px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 24px 0;
    text-align: center;

}

.formPanel .formFooter p {
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.formPanel .formFooter p a {
    color: #ff5620;
    /*text-decoration: underline !important;*/
    /*border-bottom: 1px #ff5620 solid;*/
    position: relative;
}

.formPanel .formFooter p a span {
    display: inline-block;
    position: absolute;
    bottom: 2px;
    width: 78px;
    border-bottom: 1px #ff5620 solid;
    left: 1px;
}

footer .copyright p {
    font-family: Quicksand;
    font-size: 18px;
    color: #04689a;
    position: absolute;
    top: 34px;
    left: 270px;
    width: 198px;
}

/* SUBJECTS */
.subjects_sec {
    padding: 35px 0 0 0;
}

.subjects_sec .left {
    padding-right: 9px;
}

.subjects_sec .right {
    padding-left: 9px;
}

.subjects_sec .tab-pane {
    top: 0;
}

.subjects_sec .content-sheet {
    margin-top: 0;
    padding: 50px 30px;
}

h1.tab-title {
    font-family: Quicksand;
    font-size: 36px;
    color: #ff5620;
    text-align: center;
    margin-top: 0;
    margin-bottom: 45px;
}

ul.accomplishBar {
    text-align: center;
    margin-bottom: 59px;
}

ul.accomplishBar li {
    display: inline-block;
    margin-right: 60px;
}

ul.accomplishBar li:last-child {
    margin-right: 0;
}

.progress-icon {
    text-align: center;
    width: 33px;
    height: 33px;
    border-radius: 20px;
    float: left;
    margin-right: 14px;
    display: inline-block;
}

.progress-icon.completed {
    background-color: #21df11;
    color: white;
}

.progress-icon.completed i {
    position: relative;
    top: 8px;
    font-size: 15px;
}

.progress-icon.thisWeekAssignment {
    background-color: transparent;
    color: #ff5620;
    border: 1px #ff5620 solid;
}

.progress-icon.thisWeekAssignment i {
    position: relative;
    top: 6px;
    font-size: 16px;
}

.progress-icon.incompleted {
    border: 2px #efefef solid;
    background-color: #d1d1d1;
}

ul.accomplishBar li span {
    position: relative;
    top: 3px;
    font-family: Quicksand;
    font-size: 20px;
    font-weight: bold;
}

.subjects_sec .subject {
    margin-bottom: 35px;
}

.subjects_sec .subject .heading {
    position: relative;
    height: 58px;
    margin-bottom: 20px;
}

.subjects_sec .subject .heading .icon {
    height: 58px;
    width: 58px;
    position: absolute;
    top: -2px;
}

.subjects_sec .subject .heading .icon img {
    height: 58px;
    float: right;
}

.subjects_sec .subject .heading h2 {
    font-family: Quicksand;
    font-size: 36px;
    border-bottom: 2px #000000 solid;
    margin: 0;
    margin-left: 72px;
}

.subjects_sec .subject .heading h2.c-yellow {
    color: #ffda2d;
    border-color: #ffda2d;
}

.subjects_sec .subject .heading h2.c-purple {
    color: #ef3a76;
    border-color: #ef3a76;
}

.subjects_sec .subject .heading h2.c-red {
    color: #fc5f61;
    border-color: #fc5f61;
}

.subjects_sec .subject ul.lesson-list {
}

.subjects_sec .subject ul.lesson-list li {
    height: 76px;
    border-radius: 10px;
    border: 1px #d1d1d1 solid;
    box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px #a8a8a8 solid;
    cursor: pointer;
}

.subjects_sec .subject ul.lesson-list li:hover,
.subjects_sec .subject ul.lesson-list li.completed:hover {
    background-color: #ff5520;
    box-shadow: none;
}

.subjects_sec .subject ul.lesson-list li h2.number {
    font-family: Quicksand;
    font-size: 48px;
    background-color: #d1d1d1;
    margin: 0;
    height: 75px;
    width: 105px;
    float: left;
    padding: 12px 0px;
    text-align: center;
    color: white;
    border-bottom-left-radius: 10px;
    box-shadow: inset 0px -6px 0px 0 rgba(0, 0, 0, 0.2);
}

.subjects_sec .subject ul.lesson-list li:hover h2.number,
.subjects_sec .subject ul.lesson-list li.completed:hover h2.number {
    background-color: #ff5520;
    border-right: 1px #d1d1d1 solid;
    box-shadow: none;
}

.subjects_sec .subject ul.lesson-list li.completed h2.number {
    background-color: #21df10;
}

.subjects_sec .subject ul.lesson-list li .title {
    float: left;
    margin-left: 15px;
    height: 74px;
    position: relative;
    width: 275px;
}

.subjects_sec .subject ul.lesson-list li .title p {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: bold;
    float: left;
    margin-right: 10px;
    margin-bottom: 0;
    line-height: 24px;
    transform: translateY(-50%);
    top: 50%;
    position: relative;
    color: black;
}

.subjects_sec .subject ul.lesson-list li:hover .title p {
    color: white;
}

.subjects_sec .subject ul.lesson-list li .title .progress-icon {
    position: absolute;
    top: 19px;
}

.subjects_sec .subject ul.lesson-list li:hover .title .progress-icon {
    display: none;
}

.subjects_sec .subject ul.lesson-list li .actions {
    position: absolute;
    right: 78px;
    top: 5px;
}

.subjects_sec .subject ul.lesson-list li:hover .actions {
    background-color: #ff5520;
    box-shadow: -20px 7px 20px 6px #ff5520;
}

.subjects_sec .subject ul.lesson-list li .actions button {
    background-color: transparent;
    border: none;
    padding: 0 0px;
    color: white;
    display: none;
}

.subjects_sec .subject ul.lesson-list li .actions button.youtube {
    margin-right: 8px;
    font-size: 38px;
    position: relative;
    top: 4px;
}

.subjects_sec .subject ul.lesson-list li .actions button.edit {
    font-size: 32px;
}

.subjects_sec .subject ul.lesson-list li:hover .actions button {
    display: inline-block;
}

.subjects_sec .subject ul.lesson-list li .star {
    position: absolute;
    right: 15px;
    top: 6px;
    height: 56px;
    width: 56px;
    padding: 14px 0;
    text-align: center;
}

.subjects_sec .subject ul.lesson-list li.completed .star {
    background: url(/theme/vuihoc/imgs/subject/star_full.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    right: 12px;
    height: 63px;
    width: 63px;
}

.subjects_sec .subject ul.lesson-list li.incompleted .star {
    background: url(/theme/vuihoc/imgs/subject/star.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 101%;
}

.subjects_sec .subject ul.lesson-list li.intact .star {
    background: url(/theme/vuihoc/imgs/subject/star_outline.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 101%;
}

.subjects_sec .subject ul.lesson-list li .star span {
    font-family: Quicksand;
    font-size: 22px;
}

.subjects_sec .subject ul.lesson-list li.completed {
    background-color: rgba(33, 223, 17, 0.15);
}

.subjects_sec .subject ul.lesson-list li.completed .star {
    color: #21df11;
}

.subjects_sec .subject ul.lesson-list li.incompleted .star {
    color: #ff5520;
}

.subjects_sec .subject ul.lesson-list li.intact .star {
    color: #bfbfbf;
}

.subjects_sec .subject ul.lesson-list li.intact {
}

.subjects_sec .subject ul.lesson-list li.incompleted {
}

/*CONTACT*/
.contact_sec {
    font-family: Quicksand;
}

.contact_sec .content-sheet {
    padding: 27px 35px 29px;
}

.contact_sec h1,
.contact_sec h4 {
}

.contact_sec h4 {
    font-size: 20px;
    font-weight: bold;
    margin-left: 45px;
    margin-top: 24px;
    margin-bottom: 8px;
}

.contact_sec p {
    color: black;
}

.contact_sec .company p,
.contact_sec .support p,
.contact_sec .email p {

    margin-left: 45px;
}

.contact_sec .email i,
.contact_sec .ggmap i,
.contact_sec .contact i {
    font-size: 32px;
    color: #ff5520;
}

.contact_sec h1 {
    color: #ff5520;
    font-family: Quicksand;
}

.contact_sec h1.heading {
    font-size: 36px;
    border-bottom: 1px #ff5520 solid;
    padding-bottom: 6px;
}

.contact_sec .icon {
    float: left;
    margin-top: 30px;
}

.contact_sec .email .icon {
    margin-top: 37px;
}

.contact_sec .email .icon i {
    font-size: 29px;
}

.contact_sec .contact {
}

.contact_sec .contact .company,
.contact_sec .contact .support {
    border-bottom: 1px #ff5520 solid;
    padding-bottom: 28px;
}

.contact_sec .contact .company,
.contact_sec .contact .support,
.contact_sec .contact .email {
    margin-right: 0;
    margin-left: 0;
}

.contact_sec .email > div {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 35px;
}

.contact_sec .email {
}

.contact_sec .contact .company h4 {
}

.contact_sec .contact .company i {
}

.contact_sec .contact .company p {
}

.contact_sec .contact .support {
    margin-top: 6px;
}

.contact_sec .contact .support div:first-child {
    padding-left: 0;
    padding-right: 12px;
    max-width: 240px;
}

.contact_sec .contact .support div:last-child {
    padding-right: 0;
    padding-left: 6px;
}

.contact_sec .contact .support div h4 {
    line-height: 24px;
}

.contact_sec .contact .support div i {
}

.contact_sec .contact .support div p {
    line-height: 20px;
}

.contact_sec .ggmap {
    padding-left: 30px;
}

.contact_sec .email h4 {
    margin-top: 30px;
}

.contact_sec .email i {
}

.contact_sec .email p {
    margin-bottom: -2px;
}

.contact_sec .feedback .left {
    padding-right: 0;
    width: 28%;
}

.contact_sec .feedback .left h1 {
    margin-bottom: 5px;
}

.contact_sec .feedback .left p {
    text-align: right;
    line-height: 18px;
    max-width: 273px;
}

.contact_sec .feedback .right {
    padding-right: 0;
    width: 72%;
    padding-left: 2px;
    margin-top: 12px;
}

.contact_sec .feedback {
    padding-top: 14px;
}
.contact_sec .action-btn {
    margin-bottom: 15px;
}

form.feedback-form {
    color: #787878;
}

form.feedback-form .input-col {
    margin-bottom: 11px;
    padding: 0;
}

form.feedback-form .input-col:nth-child(1) {
    padding-left: 15px;
    padding-right: 7px;
}

form.feedback-form .input-col:nth-child(2) {
    padding: 0 7px 0 7px;
}

form.feedback-form .input-col:nth-child(3) {
    padding-right: 15px;
    padding-left: 7px;
}

form.feedback-form .textarea-col {
}

.form-field-container {
    position: relative;
    padding: 9px 5px 9px 5px;
    border-radius: 12px;
    border: solid 1px #dadada;
    background-color: #f0f0f0;
}

.form-field-container i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 21px;
    font-size: 15px;
}

.form-field-container input {
    border: none;
    width: 100%;
    padding-left: 39px;
    background-color: transparent;
}

.form-field-container textarea {
    width: 100%;
    border: none;
    background-color: transparent;
    height: 167px;
    padding-left: 15px;
    padding-right: 15px;
}

.form-field-container input:focus,
.form-field-container textarea:focus {
    outline: none;
}

form.feedback-form span.info {
    margin-top: 5px;
    display: block;
    margin-left: 22px;
}

form.feedback-form .form-actions {
    text-align: right;
}

.action-btn {
    /* width: 189px; */
    height: 48px;
    border-radius: 12px;
    box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.25);
    font-family: Quicksand;
    font-size: 22px;
    border: none;
    color: white;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
}

.action-btn span:first-child {
    width: 38px;
    display: inline-block;
}

.action-btn span:last-child {
    width: 134px;
    display: inline-block;
    position: relative;
    top: -2px;
}

a.action-btn {
    padding: 9px 6px 0;
    display: inline-block;
    color: white !important;
    cursor: pointer;
    text-align: center;
    background-color: #d8d8d8;
}

.accept-btn {
    background-color: #ff5620;
    margin-right: 8px;
}

.decline-btn {
    background-color: #034d72;
}

/*PROFILE*/
.profile_sec {
    font-family: Quicksand;
}

.profile_sec .left {
    padding-right: 26px;
    margin-top: 83px;
}

.profile_sec .left .row-1 {
    text-align: center;
}

.profile_sec .left .row-1 .avatar {
    width: 94px;
    height: 94px;
}

.profile_sec .left .row-1 .name {
    font-family: Quicksand;
    font-size: 20px;
    color: #034d72;
    margin-top: 12px;
    margin-bottom: 2px;
}

.profile_sec .left .row-1 .id {
    font-family: Open Sans;
    font-size: 12px;
    color: #034d72;
    margin-top: 0px;
}

.profile_sec .left .row-2 {
    margin-top: 10px;
}

.profile_sec .left .row-2 ul.left-nav {
    /*padding-left: 0;*/
}

.profile_sec .left .row-2 ul.left-nav li {
    height: 10px;
    height: 48px;
    border-radius: 38px;
    padding: 10px 22px;
    margin-bottom: 13px;
}

.profile_sec .left .row-2 ul.left-nav li a {
    font-family: Quicksand;
    font-size: 22px;
    color: #04689a;
}

.profile_sec .left .row-2 ul.left-nav li a i {
    font-size: 24px;
    margin-right: 13px;
}

.profile_sec .left .row-2 ul.left-nav li.active {
    background-color: #04689a;
}

.profile_sec .left .row-2 ul.left-nav li.active a {
    color: white;
}

.profile_sec .right {
    font-size: 18px;
}

.profile_sec .right .content-sheet {

    padding: 34px 63px 71px 63px;
}

.profile_sec .right form {
}

.profile_sec .right form input {
    width: 100%;
}

.profile_sec .right form select {
}

.profile_sec .right form input,
.profile_sec .right form select {
    font-size: 16px;
    border: solid 1px #04689a;
    border-radius: 4px;
    padding: 3px 8px;
}

.profile_sec .right .status {
}

.profile_sec .right .status span {
}

.profile_sec .right .status div {
    width: 20px;
    height: 20px;
    background-color: #c4c4c4;
    float: left;
    margin-right: 5px;
    margin-top: 4px;
}

.profile_sec .right .form-group {
    margin-left: 20px;
}

.profile_sec .right form span.help-block {
    margin-top: 5px;
    margin-bottom: 8px;
}

.profile_sec .right form label {

    margin-top: 2px;
}

.profile_sec .right .form-group > label {
    font-weight: normal;
    text-align: right;
}

.profile_sec .right .form-group > div {
    padding-left: 0;
    padding-right: 118px;
}

.profile_sec .right h4.heading {
    font-family: Quicksand;
    font-size: 20px;
    color: #6783c0;
    margin-bottom: 25px;
}

.profile_sec .right .row-1 {
}

.profile_sec .right .row-1 .form-group {
    height: 20px;
}

.profile_sec .right .row-1 .form-group label {
}

.profile_sec .right .row-1 .form-group div span {
    font-weight: bold;
}

.profile_sec .right .row-2 {
    margin-top: 13px;
}

.profile_sec .right .row-2 .form-group a {
    font-size: 16px;
    font-weight: bold;
    color: #6783c0;
    text-decoration: underline !important;
    display: block;
    margin-bottom: 28px;
}

.profile_sec .right #birthday,
.profile_sec .right #birthmonth {
    width: 64px;
    margin-right: 3px;
}

.profile_sec .right #birthyear {
    width: 76px;
}

.profile_sec .right #gender {
    width: 200px;
}

.profile_sec .right #province {
    width: 100%;
}

.profile_sec .right .captcha input {
    width: 130px;
    margin-right: 3px;
}

.profile_sec .right .captcha .captcha-val {
    width: 130px;
    height: 30px;
    border: solid 1px #04689a;
    background-color: #04689a;
    /* display: inline-block; */
    padding: 4px 40px 4px 40px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    border-radius: 4px;
}

.profile_sec .right .form-actions {
    text-align: center;
}

.profile_sec .right .form-actions button {
    margin-top: 55px;
}

/*QUESTION*/
.question-book {
}

.question-book .title {
    font-family: Quicksand;
    font-size: 48px;
    color: white;
    text-align: center;
    margin: 45px 0 55px;
}

.note-cover {
    width: 1020px;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background-color: #04689a;
    padding: 15px 12px 12px 12px;
    position: relative;
    z-index: 5;
    float: left;
    margin-left: 40px;
}

.note-cover .note-spring {
    background: transparent url(/theme/vuihoc/imgs/exercise/spring-2.png);
    background-position: center;
    background-repeat: repeat-x;
    height: 84px;
    position: absolute;
    z-index: 100;
    top: -28px;
    left: 56px;
    width: 910px;
}

.note-cover .question-area {
    border-radius: 12px;
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
    border: solid 1px #d1d1d1;
    width: 100%;
    background-color: white;
    padding-bottom: 50px;
    float: left;
    overflow: hidden;
}

.note-cover .question-area .bottom-btn {
    text-align: center;
    position: relative;
    bottom: -30px;
    /* height: 100%; */
    float: left;
    width: 100%;
}

.note-cover .question-area .left-tray {
    position: absolute;
    left: -36px;
    top: 28px;
    width: 48px;
    /* background-color: white; */
    padding-left: 0;
    text-align: center;
    /* border: solid 1px #d1d1d1; */
    border-top-left-radius: 12px;
    /*border-bottom-left-radius: 12px;*/
    overflow: hidden;
    box-shadow: -2px 2px 33px 0 rgba(176, 192, 237, 0.33);
}

.note-cover .question-area .left-tray li {
    border-bottom: 1px #d8d8d8 solid;
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 500;
    margin-left: 0px;
    padding: 9px 0;
    background-color: white;
    cursor: pointer;
}

.note-cover .question-area .left-tray li:first-child {
    font-family: Quicksand;
    font-size: 22px;
    /*color: white;*/
    /*background-color: #04689a;*/
}

.note-cover .question-area .left-tray li:last-child {
    border-bottom: none;
}

.note-cover .question-area .left-tray .r-a {
    background-color: #ec0b1b;
    color: white;
    position: relative;
}

.note-cover .question-area .left-tray .w-a {
    background-color: #84c530;
    color: white;
}

.note-cover .question-area .left-tray .c-a {
    background-color: #8a8a8a;
    color: white;
}

.note-cover .question-area .left-tray li.currentLastQuestionBtn {
    border-bottom: none;
    border-bottom-left-radius: 12px;
}

.nextQuestionBtn {
    position: absolute;
    left: -36px;
    top: 540px;
    border: none;
    background: #FFF;
    width: 48px;
    height: 48px;
    border-radius: 0 0 0 15px;
    border-top: 1px solid #DFDFDF;
    box-shadow: -2px 2px 33px 0 rgba(176, 192, 237, 0.33);
}

#homework_sec_vue .question-area {
    float: none;
    min-height: 200px;
}

#homework_sec_vue .note-cover {
    float: none;
    margin: 0 auto;
}

#homework_sec_vue .homework-inner {
    padding: 20px;
    /*margin: 10px 0;*/
}

#homework_sec_vue .submit-big {
    display: inline-block;
    line-height: 40px;
    height: 45px;
    font-size: 20px;
    margin: 20px;
}

#homework_sec_vue .submit-big:hover {
    color: #FFF;
}

@media screen and (min-width: 568px) {
    #homework_sec_vue .submit-big.md-pull-left {
        float: left;
    }

    #homework_sec_vue .submit-big.md-pull-right {
        float: right;
    }
}

@media screen and (max-width: 568px) {
    .nextQuestionBtn {
        top: 65px;
        right: 12px;
        left: inherit;
        z-index: 3;
        border-top: 0;
        border-bottom: 1px solid #DFDFDF;
        border-left: 1px solid #DFDFDF;
        height: 47px;
        border-bottom-left-radius: 0;
    }

    .nextQuestionBtn .fas {
        transform: rotate(-90deg);
    }
}

.note-cover .question-area .right-tray {
    /*padding-left: 0;*/
    width: 118px;
    position: absolute;
    right: -106px;
    top: 45px;
    z-index: 10;
}

.note-cover .question-area .right-tray li {
    background: white;
    text-align: center;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 5px 2px 28px 0 rgba(176, 192, 237, 0.33);
    border: solid 1px #d1d1d1;
    margin-bottom: 17px;
}

.note-cover .question-area .right-tray h4 {
    font-family: Quicksand;
    font-size: 22px;
}

.note-cover .question-area .right-tray .unit {
    border-left: none;
    padding: 4px 0 27px;
}

.note-cover .question-area .right-tray .unit img {
    width: 24px;
    height: 22px;
}

.note-cover .question-area .right-tray .unit h4 {
    color: #04689a
}

.note-cover .question-area .right-tray .question-mark {
    overflow: hidden;
    border: none;
}

.note-cover .question-area .right-tray .question-mark > div:first-child {
    border-bottom: 1px #d8d8d8 solid;
}

.note-cover .question-area .right-tray .question-mark > div:last-child > div {
    padding: 16px 0 14px;
}

.note-cover .question-area .right-tray .question-mark p.proportion {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 500;
    color: #314d5d;
    margin: 10px 0;
}

.note-cover .question-area .right-tray .question-mark p.mark {
    font-family: Quicksand;
    font-size: 48px;
    color: #ff5620;
    background-color: transparent;
    padding: 0 0;
    line-height: 30px;
}

.note-cover .question-area .right-tray .question-mark p.mark:first-child {
    margin-bottom: -9px;
}

.note-cover .question-area .right-tray .question-mark p.spliter {
}

.note-cover .question-area .right-tray .question-mark h4 {
    color: white;
    background-color: #ff5620;
    padding: 10px 0 6px;
    margin-top: 0;
}

.note-cover .question-area .right-tray .light {
    color: white;
    background-color: #ff5620;
    padding: 5px 0 25px;
    box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.25);
    border-left: none;
    cursor: pointer;
}

.note-cover .question-area .right-tray .light i {
    font-size: 48px;
}

.note-cover .question-area .right-tray .light h4 {
}

.note-cover .question-area .question-heading {
    /*padding-left: 0;*/
    text-align: center;
    margin-top: 63px;
    margin-bottom: 30px;
}

.note-cover .question-area .question-heading li {
    display: inline-block;
    color: white;
}

.note-cover .question-area .question-heading li:first-child,
.note-cover .question-area .question-heading li:last-child {
    height: 36px;
    border-radius: 12px;
    background-color: #114058;
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 500;
    padding: 4px 20px;
}

.note-cover .question-area .question-heading li:first-child {
    margin-right: -13px;
    padding-right: 23px;
}

.note-cover .question-area .question-heading li:nth-child(2) {
    font-family: Quicksand;
    font-size: 36px;
    height: 52px;
    border-radius: 12px;
    background-color: #ff5620;
    padding: 2px 27px 0;
    position: relative;
    z-index: 1;
    top: 3px;
}

.note-cover .question-area .question-heading li:last-child {
    margin-left: -13px;
    position: relative;
    z-index: 0;
    padding-left: 23px;
}

.note-cover .question-area p.question {
    font-family: Quicksand;
    font-size: 32px;
    font-weight: bold;
    color: #1b3043;
    text-align: center;
}

.note-cover .question-area .question-content {
    padding: 15px;
    width: 500px;
    margin: 45px auto;
}

.note-cover .question-area .answer {
    text-align: center;
}

.note-cover .question-area .answer form {
    margin-top: 10px;
}

.note-cover .question-area .answer > button {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 500;
    width: 187px;
    height: 36px;
    border-radius: 12px;
    background-color: #114058;
    color: white;
    border: none;
    margin-bottom: 4px;
}

.note-cover .question-area .answer span {
    font-size: 32px;
}

.note-cover .question-area .answer .custom-style-checkbox span {
    display: inline-block;
}

.note-cover .question-area .answer .custom-style-radio span {
    /*font-family: Quicksand;*/
    color: #034d72;
    display: inline-block;
}

.note-cover .question-area .answer .custom-style-free-text span {
    font-family: Quicksand;
    color: #034d72;
    display: inline-block;
}

.note-cover .question-area .answer input {
    width: 250px;
    height: auto;
    border-radius: 12px;
    border: solid 1px #dadada;
    background-color: #f0f0f0;
    padding: 10px;
    font-family: Quicksand;
    font-size: 32px;
    margin-bottom: 15px;
    white-space: normal;
}

.note-cover .question-area .support {
    height: 100px;
    position: absolute;
    bottom: -26px;
    right: 75px;
    text-align: right;
}

.note-cover .question-area .cat {
    position: absolute;
    bottom: 12px;
    right: 12px;
    height: 104px;
    overflow: hidden;
    width: 75px;
    border-radius: 13px;
}

.note-cover .question-area .support h5 {
    font-family: Quicksand;
    font-size: 15px;
    color: #034d72;
    margin: 5px;
}

.note-cover .question-area .support h5 a {
    color: #ff5620;
}

.note-cover .question-area .support h5 a i {
}

.note-cover .question-area .support img {
}

/*QUESTION RIGHT-WRONG*/
.question-area .right-answer,
.question-area .wrong-answer {
    margin: 93px -15px 0 -15px;
    text-align: center;
    font-family: Quicksand;
    font-size: 50px;
    color: white;
    background-color: #88c441;
    padding-top: 50px;
    padding-bottom: 50px;
}

.question-area .next {
    position: absolute;
    bottom: 35px;
    right: 44px;
    text-align: right;
}

.question-area .next h4 {
    font-family: Quicksand;
    font-size: 22px;
    color: #034d72;
    margin: 4px;
    text-align: right;
}

.question-area .next h4 span {
    color: #ff5620;
}

.question-area .right-cat,
.question-area .wrong-cat {
    width: 207px;
    height: 244px;
    position: relative;
    bottom: -50px;
    left: 410px;
    float: left;
}

.question-area .wrong-answer {
    background-color: #eb5757;
}

.question-area .wrong-cat {
    bottom: -40px;
}

/* COURSES_SEC */
.courses_sec {
    font-family: Quicksand;
}

.courses_sec .top-heading h1 {
    font-family: Quicksand;
    font-size: 48px;
    color: #034d72;
    margin-bottom: 65px;
    margin-top: 50px;
}

.courses_sec .main-courses {
}

.courses_sec .main-courses .blue-bg {
    background-image: url(/theme/vuihoc/imgs/courses/stars.png), linear-gradient(#04689a, #2ca9e2);
    background-repeat: no-repeat;
    background-position: center top;
}

.courses_sec .main-courses .yellow-bg {
    background-image: url(/theme/vuihoc/imgs/courses/stars.png), linear-gradient(#ffa000, #ffc056);
    background-repeat: no-repeat;
    background-position: center top;
}

.courses_sec .main-courses > div > div {
    margin-bottom: 65px;
}

.courses_sec .main-courses .left-pane,
.courses_sec .main-courses .right-pane {
    width: 50%;
    float: left;
    height: 376px;
}

.courses_sec .main-courses .left-pane {
    padding: 10px 30px 10px 55px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.courses_sec .main-courses .left-pane .course {
    position: relative;
    height: 100%;
}

.courses_sec .main-courses .left-pane .course.dark {
    color: #1b3043;
}

.courses_sec .main-courses .left-pane .course.light {
    color: white;
}

.courses_sec .main-courses .left-pane .course img.cat-act {
    position: absolute;
}

.courses_sec .main-courses .left-pane .course img.cat-act.act1 {
    left: -89px;
    top: 100px;
}

.courses_sec .main-courses .left-pane .course img.cat-act.act2 {
    left: -115px;
    top: 65px;
}

.courses_sec .main-courses .left-pane .course .title {
    margin-top: 25px;
}

.courses_sec .main-courses .left-pane .course .title h4 {
    font-family: Quicksand;
    font-size: 22px;
    margin-bottom: -5px;
}

.courses_sec .main-courses .left-pane .course .title h2 {
    font-family: Quicksand;
    font-size: 48px;
    margin-top: 0;
    margin-bottom: 20px;
}

.courses_sec .main-courses .left-pane .course .content {
    margin-bottom: 15px;
    padding-left: 135px;
}

.courses_sec .main-courses .left-pane .course .content p {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.courses_sec .main-courses .left-pane .course .price {
    text-align: right;
}

.courses_sec .main-courses .left-pane .course .price .just {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 500;
    margin-right: 5px;
}

.courses_sec .main-courses .left-pane .course .price .real-price {
    font-family: Quicksand;
    font-size: 48px;
}

.courses_sec .main-courses .left-pane .course .price .currency {
    font-size: 20px;
    font-weight: 500;
    position: relative;
    top: -15px;
    left: 2px;
}

.courses_sec .main-courses .left-pane .course .action {
    position: absolute;
    bottom: -2px;
    right: 0;
}

.courses_sec .main-courses .left-pane .course .action .action-btn {
    /* margin-right: 6px; */
}

.courses_sec .main-courses .left-pane .course .action .action-btn span i {
    position: relative;
    left: 5px;
    top: -1px;
}

.courses_sec .course .action .action-btn.try {
    background-color: #8ac449;
    margin-right: 6px;
}

.courses_sec .course .action .action-btn.buy {
    background-color: #db4633;
}

.courses_sec .main-courses .right-pane {
}

.courses_sec .main-courses .right-pane .videojs {
    height: 376px;
    /* width: 100%; */
    /* background-color: black; */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* padding-top: 0px; */
}

.courses_sec .main-courses .right-pane video {
    /* height: 100%; */
    width: 100%;
}

.courses_sec .other-courses {
}

.courses_sec .other-courses .heading h2 {
    font-family: Quicksand;
    font-size: 36px;
    color: #034d72;
    margin-bottom: 55px;
}

.courses_sec .other-courses .course {
    padding: 0;
    color: #1b3043;
    margin-right: 1.5%;
    width: 23.5%;
}

.courses_sec .other-courses .course:last-child {
    /*margin-right: 0;*/
}

.courses_sec .other-courses .course .thumbnail {
    padding-bottom: 12px;
    border: none;
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
}

.notable_courses .courses_sec .other-courses .course .thumbnail {
    height: 409px;
}

.courses_sec .other-courses .course .thumbnail .cover {
    position: relative;
    padding-top: 56.25%;
}

.courses_sec .other-courses .course .thumbnail .cover img {
    height: 100%;
    /* transform: translateX(-50%); */
    /* position: relative; */
    /* left: 50%; */
    cursor: pointer;
    /* margin-left: 0px; */
    /* margin-right: 20px; */
    width: 100%;
}

.courses_sec .other-courses .course .thumbnail .content {
    max-height: 255px;
    padding: 0px 12px;
}

.courses_sec .other-courses .course .thumbnail .content h4 {
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 15px;
}

.courses_sec .other-courses .course .thumbnail .content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
    margin-bottom: 8px;
    min-height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.courses_sec .other-courses .course .thumbnail .content .detail {
}

.courses_sec .other-courses .course .thumbnail .content .detail p {
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.courses_sec .other-courses .course .thumbnail .content .price {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    margin-bottom: 10px;
    margin-right: 10px;
}

.courses_sec .other-courses .course .thumbnail .action .action-btn-sm {
    height: 36px;
    width: 127px;
    padding-top: 2px;
    box-shadow: inset 0 -4.5px 0 0 rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}

.courses_sec .other-courses .course .thumbnail .action .action-btn-sm.try {
    margin-right: 2px;
}

.courses_sec .other-courses .course .thumbnail .action {
    text-align: center;
}

.courses_sec .other-courses .course .thumbnail .action .action-btn-sm span:first-child {
    font-size: 16.6px;
    width: 28px;
    position: relative;
    top: -2px;
}

.courses_sec .other-courses .course .thumbnail .action .action-btn-sm span:first-child i {
    position: relative;
    left: -3px;
}

.courses_sec .other-courses .course .thumbnail .action .action-btn-sm span:last-child {

    width: 78px;

    font-size: 16px;
}

/* NEWS_ARTICLE_SEC */
.news_article_sec {
    font-family: Quicksand;
}

.news_article_sec .nav-tabs {
}

.news_article_sec .nav-tabs li.active {
    border-bottom: 2px #ff5620 solid;
}

.news_article_sec .nav-tabs li.active a {
    color: #1b3043;
}

.news_article_sec .nav-tabs li:hover {
}

.news_article_sec .nav-tabs li:hover a {
}

.news_article_sec .nav-tabs li {
    width: 50%;
    text-align: center;
    border-bottom: 2px #d1d1d1 solid;
}

.news_article_sec .nav-tabs li a {
    font-size: 20px;
    font-weight: bold;
    color: #828282;
    border: none;
    padding: 2px 0;
}

.news_article_sec .nav-tabs li a i {
    margin-right: 6px;
}

.news_article_sec .content-sheet {
    padding-bottom: 75px;
}

.news_article_sec .content-sheet .left {
    margin-top: 19px;
}

.news_article_sec .content-sheet .left .article {
}

.news_article_sec .content-sheet .left .article hr {
    border: none;
    height: 2px;
    /* Set the hr color */
    color: #d1d1d1;
    /* old IE */
    background-color: #d1d1d1;
    /* Modern Browsers */
}

.news_article_sec .content-sheet .left .article h1.title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 39px;
}

.news_article_sec .content-sheet .left .article .infor {
}

.news_article_sec .content-sheet .left .article .infor span {
    color: #828282;
}

.news_article_sec .content-sheet .left .article .infor span.name {
    font-size: 14px;
    font-weight: bold;
    color: #ff5620;
}

.news_article_sec .content-sheet .left .article .infor span.splitter {
    margin: 0 12px;
}

.news_article_sec .content-sheet .left .article .infor span.date {
}

.news_article_sec .content-sheet .left .article .infor span.seen {
    margin: 0 12px;
}

.news_article_sec .content-sheet .left .article .infor span.comment {
}

.news_article_sec .content-sheet .left .article p.excerpt {
    font-size: 20px;
    font-weight: 500;
    color: #828282;
    line-height: 25px;
}

.news_article_sec .content-sheet .left .article .sharing {
    margin: 20px 0 60px;
}

.news_article_sec .content-sheet .left .article .top-img {
}

.news_article_sec .content-sheet .left .article .top-img img {
    width: 100%;
}

.news_article_sec .content-sheet .left .article .top-img p {
    text-align: center;
    font-size: 14px;
    color: #828282;
    margin: 12px 0 22px;
}

.news_article_sec .content-sheet .left .article .content {
}

.news_article_sec .content-sheet .left .article .content p {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
    overflow-wrap: break-word;
}

.news_article_sec .content-sheet .left .article .content p a {
    color: #ff5620;
}

.news_article_sec .content-sheet .left .article .content p.quote {
    font-size: 32px;
    font-weight: bold;
    border-left: 3px #ff5620 solid;
    padding-left: 23px;
    line-height: 39px;
    margin: 25px 0;
}

.news_article_sec .content-sheet .left .article p.author {
    font-weight: bold;
    font-size: 20px;
    color: #1b3043;
    text-align: right;
    margin-top: 59px;
}

.news_article_sec .content-sheet .left .article p.author span {
    color: #828282;
    font-weight: 500;
}

.news_article_sec .content-sheet .left .related-articles {
    margin-top: 20px;
}

.news_article_sec .content-sheet .left .related-articles .tab-content {
}

.news_article_sec .content-sheet .left .related-articles {
}

.news_article_sec .content-sheet .left .related-articles .related-title,
.news_article_sec .content-sheet .left .comment-heading {
    font-size: 22px;
    font-weight: 700;
    border-bottom: 2px solid #ff5620;
    display: inline-block;
    padding-bottom: 3px;
    margin-bottom: 15px;
}

.news_article_sec .content-sheet .left .related-articles .news-block {
    margin-top: 8px;
    float: left;
    min-height: 168px;
}

.news_article_sec .content-sheet .left .related-articles .splitter {
    width: 50%;
    height: 132px;
    position: absolute;
    border-right: 1px #828282 solid;
    top: 25px;
}

.news_article_sec .content-sheet .left .related-articles .news {
    margin-bottom: 8px;
}

.news_article_sec .content-sheet .left .related-articles .news span {
    color: #ff5620;
    position: absolute;
    top: 2px;
}

.news_article_sec .content-sheet .left .related-articles .news .article-title {
    font-size: 20px;
    font-weight: 500;
    padding-left: 20px;
    line-height: 25px;
    margin: 0;
}

.news_article_sec .content-sheet .left .related-articles .news .article-title a {
    color: #1b3043;
}

.news_article_sec .content-sheet .left .related-articles .news .article-title a:hover {
    color: #ff5620;
}

.news_article_sec .content-sheet .right {
    margin-top: 10px;
}

.list_tags>li {
    float: left;
    margin-right: 5px;
}

.news_article_sec .content-sheet .right .news-box {
    margin-bottom: 50px;
}

.news_article_sec .content-sheet .right .news-box .box-title {
}

.news_article_sec .content-sheet .right .news-box .box-title {
    color: #ff5620;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 27px;
    margin-top: 10px;
}

.news_article_sec .content-sheet .right .news-box .tab-content {
}

.news_article_sec .content-sheet .right .news-box .tab-content {
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list {
    margin-top: 25px;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list li {
    border-bottom: 1px #d1d1d1 solid;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list li:last-child {
    border: none;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list li p {
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    padding-bottom: 10px;
    padding-top: 17px;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list li p a {
    color: #1b3043;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list li p a:hover {
    color: #ff5620;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list .top-news {
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list .top-news p {
    padding-top: 0;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list .top-news img {
    margin-bottom: 14px;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list > li > .article-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    margin-top: 20px;
    margin-bottom: 10px;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list > li > .article-title a {
    color: #1b3043;
}

.news_article_sec .content-sheet .right .news-box .tab-content .news-list > li > .article-title a:hover {
    color: #ff5620;
}

.news_article_sec .content-sheet .right .news-box .tab-content .most-comment {
}

/* HOME REVISION */
.statistics {
    margin-top: 70px;
    margin-bottom: 15px;
    background: #216999;
    /*background: #216999 url(/theme/vuihoc/imgs/bg_kids.png);*/
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
}

.statistics_thpt {
    background: url(/theme/vuihoc/imgs/bg_thpt_min.png) !important;
}

.statistics .box {
    color: white;
    /* border-right: 1px white solid; */
    height: 202px;
    text-align: center;
    padding-top: 30px;
}

.statistics .box .counting {
    /* font-family: Quicksand; */
    font-size: 52px;
    margin-bottom: 0;
    font-family: Quicksand;
    font-weight: bold;
}

.statistics .box .count-label {
    font-family: Quicksand;
    font-size: 28px;
    font-weight: bold;
    margin-top: 4px;
}

.join_vuihoc {
}

.join_vuihoc .four-step {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
}

.join_vuihoc .four-step .step {
    padding: 0;
}

.join_vuihoc .four-step .step .header {
    position: relative;
    height: 72px;
}

.join_vuihoc .four-step .step.one .header {
    background-color: #ffba00;
}

.join_vuihoc .four-step .step.two .header {
    background-color: #ff6609;
}

.join_vuihoc .four-step .step.three .header {
    background-color: #1dc2da;
}

.join_vuihoc .four-step .step.four .header {
    background-color: #327ad5;
}

.join_vuihoc .four-step .step .header .title {
    /* font-family: Quicksand; */
    font-size: 36px;
    color: white;
    text-align: center;
    padding-top: 16px;
    position: relative;
    left: 15px;
    margin-top: 0;
    margin-bottom: 10px;
    font-family: Quicksand;
    font-weight: bold;
    line-height: 1.1;
}

.join_vuihoc .four-step .step .header span {
    position: absolute;
    left: -23px;
    top: -2px;
    font-size: 78px;
}

.join_vuihoc .four-step .step .header span.glyphicon-triangle-bottom {
    display: none;
}

.join_vuihoc .four-step .step.two .header span {
    color: #ffba00
}

.join_vuihoc .four-step .step.three .header span {
    color: #ff6609
}

.join_vuihoc .four-step .step.four .header span {
    color: #1dc2da
}

.join_vuihoc .four-step .step .content {
    height: 105px;
    padding-top: 38px;
    text-align: center;
    border-right: 1px #d1d1d1 solid;
    background: white;
}

.join_vuihoc .four-step .step.four .content {
    border-right: none;
}

.join_vuihoc .four-step .step .content i {
    font-size: 22px;
}

.join_vuihoc .four-step .step .content span {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 700;
    margin-left: 2px;
    color: black;
    text-align: center;
}

.notable_courses {
    padding: 65px 0 0;
}

.notable_courses .courses_sec {
    padding-top: 3px;
}

.notable_courses .courses_sec .head_title {
    margin-bottom: 35px;
    position: relative;
}

.notable_courses .courses_sec .head_title::after {
    content: "";
    width: 120px;
    height: 6px;
    border-radius: 12px;
    background-color: #327ad5;
    position: absolute;
    bottom: 0;
}

.notable_courses .courses_sec .head_title h2 {
    font-weight: bold;
    font-size: 36px;
    font-family: Quicksand;
    padding: 10px 100px 15px 0;
    margin: 0;
    text-transform: uppercase;
}

.notable_courses .courses_sec .other-courses {
    position: relative;
}

.notable_courses .courses_sec .other-courses .course {
    width: auto;
}

.notable_courses .courses_sec .other-courses .course .thumbnail .action {
    text-align: right;
    padding-right: 10px;
}

.notable_courses .courses_sec .other-courses .course .thumbnail .content .price {
    margin-top: 3px;
}

.notable_courses .group {
    height: 507px;
    border-radius: 12px;
    margin-top: 24px;
}

.notable_courses .tab-pane .owl-nav, .section-content.tab-pane .owl-nav {
    top: -110px;
    text-align: right;
}

.notable_courses .tab-pane .owlNavBtn{
    font-size: 14px;
    opacity: 1;
}

.section-content.tab-pane .owlNavBtn {
    font-size: 34px;
    opacity: 1;
    color: #04689a;
}

.notable_courses .tab-pane .owl-theme .owl-nav [class*=owl-] {
    height: 40px;
    width: 40px;
    border: 1px black solid;
    border-radius: 0;
    padding: 12px 15px;
    float: none;
    margin: 0 0 0 2px;
}

.section-content.tab-pane .owl-theme .owl-nav [class*=owl-] {
    padding: 2px 9px;
    float: none;
}

.my_courses .courses_sec .other-courses .course {
    width: auto;
}

.advisory_counsel {
    padding: 75px 0 110px;
}

.advisory_counsel .testimonial {
}

.advisory_counsel .testimonial.tab-pane .owlNavBtn {
    font-size: 40px;
    opacity: 1;
}

.advisory_counsel .testimonial.tab-pane .owl-theme .owl-dots {
    display: none;
}

.advisory_counsel .testimonial .box {
    text-align: center;
    font-family: Quicksand;
    font-size: 14px;
    color: black;
}

.advisory_counsel .testimonial .box img {
    border-radius: 300px;
    width: 198px;
    height: 198px;
    margin-bottom: 20px;
}

.advisory_counsel .testimonial .box h3.name {
    color: #04689a;
    font-family: Quicksand;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
}

.advisory_counsel .testimonial .box p.title {
    margin-bottom: 20px;
}

.advisory_counsel .testimonial .box p.info {
}

.parental_testimonial {
    background: #207399;
    height: 838px;
    overflow: hidden;
    padding-top: 110px;
}

.parental_testimonial .head_title h2 {
    color: white;
}

.parental_testimonial .testimonial {
}

.parental_testimonial .testimonial .left > div {
    position: relative;
    top: -65px;
}

.parental_testimonial .testimonial .left img {
    position: relative;
    left: 99px;
    width: auto;
    top: 182px;
}

.parental_testimonial .testimonial .right.tab-pane .owlNavBtn,
.parental_testimonial .testimonial .left.tab-pane .owlNavBtn {
    font-size: 32px;
    color: white;
    opacity: 0.6;
}

.parental_testimonial .testimonial .right.tab-pane .owl-theme .owl-nav [class*=owl-],
.parental_testimonial .testimonial .left.tab-pane .owl-theme .owl-nav [class*=owl-] {
    width: auto;
    margin: 0px;
}

.parental_testimonial .testimonial .right.tab-pane .owl-prev {
    position: relative;
    left: 10px;
}

.parental_testimonial .testimonial .right.tab-pane .owl-next {
    position: relative;
    right: 10px;
}

.parental_testimonial .testimonial .right.tab-pane .owl-prev {
    position: relative;
    left: 10px;
}

.parental_testimonial .testimonial .right.tab-pane .owl-next {
    position: relative;
    right: 10px;
}

.parental_testimonial .testimonial .right.tab-pane .owl-theme .owl-dots .owl-dot.active span,
.parental_testimonial .testimonial .right.tab-pane .owl-theme .owl-dots .owl-dot:hover span {
    border: 1px white solid;
    background-color: white;
}

.parental_testimonial .testimonial .right.tab-pane .owl-theme .owl-dots .owl-dot span {
    border: 1px white solid;
}

.parental_testimonial .testimonial .right.tab-pane .owl-nav {
    top: 195px;
}

.parental_testimonial .testimonial .left {
}

.parental_testimonial .testimonial .left.tab-pane .owl-nav {
    top: 369px;
}

.parental_testimonial .testimonial .left.tab-pane .owl-dots {
    display: none;
}

.parental_testimonial .testimonial .left .owl-carousel.owl-drag .owl-item {
    height: 800px;
}

.parental_testimonial .testimonial .left.alternative {
    display: none;
}

.parental_testimonial .testimonial .left .chat-cover {
    height: 800px;
    background: url(/theme/vuihoc/imgs/home_revision/frame_iphone_x.png);
    background-position: center 0;
    background-repeat: no-repeat;
}

.parental_testimonial .testimonial .right {
    padding-top: 110px;
}

.parental_testimonial .testimonial .right .testimonial-box {
    padding: 0px 30px;
}

.parental_testimonial .testimonial .right .testimonial-box .content {
    border-radius: 12px;
    border: solid 1px #d1d1d1;
    background-color: #ffffff;
    padding: 10px 15px 20px;
    color: #1b3043;
    margin-bottom: 20px;
}

.parental_testimonial .testimonial .right .testimonial-box .character {
    position: relative;
    top: -20px;
}

.parental_testimonial .testimonial .right .testimonial-box img {
    height: 110px;
    width: 110px;
    border-radius: 100px;
    margin-bottom: 10px;
    position: relative;
}

.parental_testimonial .testimonial .right .testimonial-box p.name {
    text-align: center;
    font-family: Quicksand;
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin-bottom: 4px;
}

.parental_testimonial .testimonial .right .testimonial-box p.little-name {
    text-align: center;
    color: white;
    font-family: Quicksand;
    font-size: 14px;
    font-weight: normal;
}

.bubble-dots {
    width: 100px;
    display: inline-block;
    position: relative;
    left: 72%;
    top: -10px;
}

.bubble-dots span {
    display: inline-block;
    border-radius: 30px;
    position: relative;
    border: solid 1px #d1d1d1;
}

.bubble-dots span.size-1 {
    width: 6px;
    height: 6px;
    background-color: white;
}

.bubble-dots span.size-2 {
    width: 12px;
    height: 12px;
    background-color: white;
    top: 14px;
    left: 2px;
}

.bubble-dots span.size-3 {
    width: 16px;
    height: 16px;
    background-color: white;
    top: 30px;
    left: 5px;
}

.news_home {
    padding: 75px 0 100px;
    padding-bottom: 32.5px !important;
}

.news_home .left {
    padding-right: 50px;
}

.news_home .right {
}

.news_home .right .headline:first-child {
    padding-top: 0;
}

.news_home .headline {
}

.news_home .headline a {
    display: block;
    color: black;
}

.news_home .headline.news {
    border-bottom: 1px #d1d1d1 solid;
    padding: 22px 0px 12px;
}

.news_home .headline img {
    width: 100%;
    margin-bottom: 15px;
}

.news_home .headline h3.title {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: bold;
    color: black;
    line-height: 25px;
    margin-bottom: 8px;
    margin-top: 0;
}

.news_home .headline p.excerpt {
    font-family: Quicksand;
    font-size: 14px;
    font-weight: normal;
    color: #828282;
}

.news_home .headline span.date {
    color: #828282;
    margin-bottom: 15px;
    display: block;
}

.news_home .headline span.date i {
}

.news_home .headline.top-news {
}

.network {
    display: none;
}

/* COURSE DETAIL */
.course_detail_sec {
    font-family: Quicksand;
}

.course_detail_sec .float-btn {
    display: none;
    width: 100%;
}

.course_detail_sec .extra-btn {
    margin-top: 20px;
    display: none;
}

.course_detail_sec .extra-btn a {
    display: block;
    width: 50%;
    float: left;
    padding: 17px 0;
    text-align: center;
    box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.25);
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

.course_detail_sec .extra-btn a:first-child {
    background: white;
    color: #FF5620;
}

.course_detail_sec .extra-btn a:last-child {
    background: #FF5620;
    color: white;
}

.course_detail_sec.breadcrumb_sec .headingBackground h1 {
    font-size: 36px;
    font-weight: bold;
    width: 65%;
    line-height: 45px;
}

.course_detail_sec > .container {
    padding-left: 0;
    padding-right: 0;
}

.course_detail_sec .left {
    padding-top: 20px;
    padding-right: 5px;
    /* padding-left: 0; */
}

.course_detail_sec .left .search-group {
    background: #FFFFFF;
    /* dialogue_stroke */
    border-radius: 12px;
    width: 100%;
    margin-bottom: 40px;
}

.course_detail_sec .left .search-group .input-group-addon {
    font-size: 20px;
    font-weight: bold;
    background-color: white;
    padding: 15px 0;
    width: auto;
    cursor: pointer;
}

.input-group-addon {
    border-radius: 12px;
}

.course_detail_sec .left .search-group .input-group-addon.search {
    width: 69px;
}

.course_detail_sec .left .search-group .input-group-addon.search i {
    font-size: 22px;
    color: #D1D1D1;
}

.course_detail_sec .left .course-info {
}

.course_detail_sec .left .course-info .info {
    background-color: white;
    border-radius: 12px;
    border: 1px solid #D1D1D1;
    padding: 22px 35px 22px;
    color: #1B3043;
    margin-bottom: 20px;
}

.course_detail_sec .left .course-info .info h4 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 2px;
}

.course_detail_sec .left .course-info .info p {
    line-height: 22px;
}

.course_detail_sec .left .course-info .info > a {
    text-align: right;
    display: block;
    color: #FF5620;
    font-weight: bold;
    font-size: 20px;
}

.course_detail_sec .left .course-info .info a i {
    font-size: 16px;
}

.course_detail_sec .left .course-info h4.title {
    margin-bottom: 15px;
    cursor: pointer;
}

.course_detail_sec .left .course-info h2.title,
.course_detail_sec .left .course-syllabus h2.title {
    font-size: 36px;
    font-weight: bold;
}

.course_detail_sec .left .course-info h4.title i {
    font-size: 22px;
    float: right;
    margin-top: 10px;
    margin-right: 15px;
}

.course_detail_sec .left .course-syllabus {
    position: relative;
}

.course_detail_sec .left .course-syllabus h2.title {
    margin-bottom: 13px;
    height: 47px;
    padding-top: 5px;
}

.course_detail_sec .left .course-syllabus .search-box {
    position: absolute;
    right: 15px;
    top: 0;
}

.course_detail_sec .left .course-syllabus .search-box .form-field-container {
    background-color: white;
    border: 1px solid #D1D1D1;
    box-shadow: 0px 2px 33px rgba(176, 192, 237, 0.33);
    padding-top: 10px;
}

.course_detail_sec .left .course-syllabus .search-box .form-field-container i {
    color: #D1D1D1;
    font-size: 22px;
    left: 16px;
    top: 52%;
}

.course_detail_sec .left .course-syllabus .search-box .form-field-container input {
    font-weight: bold;
    font-size: 18px;
    color: #1B3043;
    padding-left: 44px;
}

.course_detail_sec .left .course-syllabus .search-box .form-field-container ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #D1D1D1;
}

.course_detail_sec .left .course-syllabus .search-box .form-field-container ::-moz-placeholder {
    /* Firefox 19+ */
    color: #D1D1D1;
}

.course_detail_sec .left .course-syllabus .search-box .form-field-container :-ms-input-placeholder {
    /* IE 10+ */
    color: #D1D1D1;
}

.course_detail_sec .left .course-syllabus .search-box .form-field-container :-moz-placeholder {
    /* Firefox 18- */
    color: #D1D1D1;
}

.course_detail_sec .left .course-syllabus .syllabus {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #D1D1D1;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box {
    border-bottom: 1px white solid;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box:last-child {
    border-bottom: none;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box h3.heading {
    background: #2CA9E2;
    color: white;
    padding: 15px 85px 15px 25px;
    position: relative;
    margin-bottom: 0;
    margin-top: 0px;
    cursor: pointer;
    font-size: 22px;
    line-height: 27px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box h3.heading i {
    font-size: 16px;
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list {
    /* border-left: 1px solid #D1D1D1; */
    /* border-right: 1px solid #D1D1D1; */
    background: #F7F8FC;
    color: #1B3043;
    font-size: 18px;
    padding-bottom: 15px;
    margin-bottom: 0;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .connect-line {
    /* 
    height: 100%;
    */
    height: -webkit-fill-available;
    border-right: 1px #C4C4C4 solid;
    width: 1px;
    position: absolute;
    top: 0;
    left: 40px;
}

/* .course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li:first-child .connect-line {
    top: 50%;
} */

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li:last-child .connect-line {
    top: -50%;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li {
    /* padding: 15px 0 5px; */
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .item {
    position: relative;
    padding: 15px 0 5px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list .action-links {
    background-color: #D1D1D1;
    text-align: center;
    padding: 12px 0px;
    display: none;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list .action-links button {
    color: white;
    background: #FF5620;
    box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: none;
    padding: 12px 14px 15px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list .action-links i {
    font-size: 21px;
    position: relative;
    top: 2px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list .action-links span {
    font-weight: bold;
    font-size: 15px;
    margin-left: 2px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.alter {
    background-color: #F8F9FD;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .progress-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 25px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .progress-icon i {
    top: 3px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .progress-icon i.fa-check-circle {
    color: #78CA3C;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .progress-icon i.fa-circle {
    top: 2px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .progress-icon i.fa-dot-circle {
    color: #FF5620;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .title {
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .title h4 {
    padding-left: 65px;
    padding-right: 120px;
    font-weight: normal;
    margin: 0 0 10px;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .actions {
    position: absolute;
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: -4px 0px 20px 20px white;
    background-color: white;
    padding: 9px 0;
    display: none;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.alter .actions {
    background-color: #F8F9FD;
    box-shadow: -4px 0px 20px 20px #F8F9FD;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li:hover {
    position: relative;
    z-index: 1;
    box-shadow: 0px 2px 33px rgba(176, 192, 237, 0.33);
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li:hover .actions {
    display: inline-block;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .actions button {
    border: none;
    background: none;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .actions button.youtube {
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .actions button.edit {
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .actions button i {
    font-size: 28px;
    color: #FF5620;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .star {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 42px;
    width: 63px;
    text-align: center;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li .star span {
    font-family: Open Sans;
    font-weight: bold;
    font-size: 16px;
    top: 6px;
    position: relative;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.intact .star span,
.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.incompleted .star span {
    top: 9px;
}


.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.completed {
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.completed .progress-icon {
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.completed .star {
    background: url(/theme/vuihoc/imgs/subject/star_full.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 65%;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.intact {
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.intact .progress-icon {
    background-color: white;
    border: 1px solid #D1D1D1;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.intact .star {
    background: url(/theme/vuihoc/imgs/subject/star_outline.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 58%;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.incompleted {
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.incompleted .progress-icon {
    background-color: white;
}

.course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li.incompleted .star {
    background: url(/theme/vuihoc/imgs/subject/star.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 58%;
}

.course_detail_sec .right {
    position: relative;
    top: -115px;
    /* padding-right: 0; */
}

.course_detail_sec .right.alternative {
    display: none;
}

.course_detail_sec .right .tray {
}

.course_detail_sec .right .tray .thumbnail {
    padding: 5px 5px 15px 5px;
    box-shadow: 0px 2px 33px rgba(176, 192, 237, 0.33);
    border: 1px solid #D1D1D1;
    margin-bottom: 48px;
}

.course_detail_sec .right .tray .thumbnail .cover {
    border-radius: 12px;
    overflow: hidden;
    height: 200px;
}

.course_detail_sec .right .tray .thumbnail .content {
}

.course_detail_sec .right .tray .thumbnail .content p.old-price {
    font-size: 22px;
    text-align: right;
    color: #828282;
    margin-bottom: -12px;
}

.course_detail_sec .right .tray .thumbnail .content p.old-price > span {
    display: inline-block;
    position: relative;
    padding: 0 6px;
}

.course_detail_sec .right .tray .thumbnail .content p.old-price span.line-through {
    width: 100%;
    position: absolute;
    border-bottom: 1px #828282 solid;
    left: 0;
    top: 15px;
}

.course_detail_sec .right .tray .thumbnail .content p.new-price {
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    color: #1B3043;
    height: 60px;
    margin-bottom: 7px;
}

.course_detail_sec .right .tray .thumbnail .content p.new-price span.price {
    font-size: 48px;
    margin-left: 5px;
}

.course_detail_sec .right .tray .thumbnail .content p.new-price span.price span.currency {
    position: relative;
    top: -17px;
    font-size: 20px;
    margin-left: 2px;
}

.course_detail_sec .right .tray .thumbnail .content p.remaining {
    font-size: 15px;
    color: #FF5620;
    font-weight: bold;
    text-align: right;
    margin-bottom: 18px;
}

.course_detail_sec .right .tray .thumbnail .content p.remaining span {
}

.course_detail_sec .right .tray .thumbnail .content a.action-btn {
    width: 100%;
    background: #FF5620;
    font-weight: bold;
    margin-bottom: 10px;
}

.course_detail_sec .right .tray .thumbnail .content a.action-btn span:first-child {
    width: 18%;
    position: relative;
    top: -2px;
}

.course_detail_sec .right .tray .thumbnail .content a.action-btn span:last-child {
    width: 71%;
}

.course_detail_sec .right .tray .thumbnail .content .detail {
    margin-top: 18px;
}

.course_detail_sec .right .tray .thumbnail .content .detail p {
    margin-bottom: 22px;
    font-size: 15px;
    color: #1B3043;
}

.course_detail_sec .right .tray .thumbnail .content {
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 13px;
}

.quick-jump-box {
    background-color: white;
    border-radius: 12px;
    padding: 35px 30px 47px;
    border: 1px solid #D1D1D1;
    box-sizing: border-box;
    box-shadow: 0px 2px 33px rgba(176, 192, 237, 0.33);
}

.quick-jump-box h3.heading {
    font-size: 22px;
    color: #1B3043;
    font-weight: bold;
    border-bottom: 1px #D1D1D1 solid;
    padding-bottom: 26px;
    line-height: 26px;
    margin-bottom: 25px;
}

.quick-jump-box h3.heading span {
    font-size: 15px;
    color: #8AC449;
    display: block;
}

.quick-jump-box p {
    font-size: 15px;
    color: #1B3043;
    margin-bottom: 5px;
}

.quick-jump-box a.action-btn {
    width: 100%;
    background: #FF5620;
    font-weight: bold;
    margin-bottom: 6px;
    text-align: left;
    position: relative;
}

.quick-jump-box a.action-btn span {
    width: 100%;
    position: relative;
    top: -3px;
    left: 15px;
    font-size: 20px;
    font-weight: 500;
}

.quick-jump-box a.action-btn i {
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 20px;
}

.quick-jump-box .selectBox {
    position: relative;
    border: 1px solid #D1D1D1;
    border-radius: 12px;
}

.quick-jump-box .selectBox select {
    border-radius: 12px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: 500;
    line-height: normal;
    font-size: 20px;
    color: #1B3043;
    padding: 10px 45px 11px 20px;
    width: 100%;
}

.quick-jump-box .selectBox i {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 16px;
    color: #1B3043;
}

.show-quick-jump-box {
    display: block;
}

.float-btn .quick-jump-box {
    position: absolute;
    width: 100%;
    bottom: 100px;
    display: none;
}

.float-btn.active .quick-jump-box {
    display: block;
}

/* FIXES */
@media (max-width: 1300px) {
    .topics {
        padding: 0 150px;
    }

    #is_display_mobile {
        display: none;
    }
}

@media (min-width: 1300px) {
    #is_display_mobile {
        display: none;
    }
}

@media (max-width: 1199px) {
    .nav.navbar-nav.pull-right {
        /*transform: translateX(0);*/
        /*position: absolute;*/
        /* left: 21.5%; */
        /*width: auto;*/
    }

    ul.nav-actions li:first-child {
        padding-right: 15px;
    }

    ul.nav-actions li.buyAccount {
        padding-right: 10px;
        padding-left: 10px;
    }

    ul.nav-actions li:last-child {
        padding-left: 10px;
    }

    ul.subject li.heading .add {
        width: 262px;
    }

    ul.nav.content-tab li {
        margin-bottom: 15px;
    }

    .note-cover {
        width: 810px
    }

    .note-cover .note-spring {
        width: 675px;
        left: 96px;
    }

    .question-area .right-cat,
    .question-area .wrong-cat {
        left: 0;
    }

    .note-cover .question-area {
        padding-bottom: 75px;
    }

    .note-cover .question-area .bottom-btn {
        bottom: 0;
    }

    .subjects_sec .col-xs-6 {
        width: 100%;
        padding: 0;
    }

    .subjects_sec .subject ul.lesson-list li .title {
        width: 62%;
    }

    /*.subjects_sec .subject ul.lesson-list li .title {
        width: 210px;
    }

    .subjects_sec .subject ul.lesson-list li .title p {
        font-size: 18px;
    }*/
    .courses_sec .main-courses .left-pane .course .title {
        margin-top: 15px;
    }

    .courses_sec .main-courses .left-pane .course .title h2 {
        font-size: 42px;
    }

    .courses_sec .main-courses .left-pane .course .content {
        margin-bottom: 0;
        margin-top: -10px;
    }

    .courses_sec .main-courses .left-pane .course .price .real-price {
        font-size: 42px;
    }

    .courses_sec .main-courses .left-pane .course .action {
        bottom: -12px;
    }

    .courses_sec .other-courses .course {
    }

    .courses_sec .other-courses .course .thumbnail .cover img {
        height: 100%;
    }

    .courses_sec .other-courses .course .thumbnail .action .action-btn-sm.try {
        margin-bottom: 8px;
    }

    .courses_sec .main-courses .left-pane .course img.cat-act.act1 {
        left: -70px;
        top: 90px;
    }

    .courses_sec .main-courses .left-pane .course img.cat-act.act2 {
        width: 198px;
        left: -80px;
        top: 72px;
    }

    .statistics .box {
        height: 150px;
        padding-top: 18px;
    }

    .statistics .box .counting {
        font-size: 40px;
    }

    .statistics .box .count-label {
        font-size: 20px;
    }

    .parental_testimonial .testimonial .left img {
        left: 50px;
    }

    .tab-pane .owl-theme .owl-nav [class*=owl-] {
        margin: 0;
    }

    .parental_testimonial {
        height: auto;
        /* padding-bottom: 65px; */
        margin-bottom: -54px;
    }

    .parental_testimonial .testimonial .tab-pane {
        width: 100%;
    }

    .parental_testimonial .testimonial .left > div {
        height: 630px !important;
    }

    .parental_testimonial .testimonial .left img {
        left: auto;
        margin: 0 auto;
    }

    .parental_testimonial .testimonial .left.primary {
        display: none;
    }

    .parental_testimonial .testimonial .left.alternative {
        display: block;
        padding: 0;
    }

    .parental_testimonial .tab-pane .chat-cover .owl-theme .owl-nav {
        /* width: 70%; */
        padding: 0 25px;
    }

    .parental_testimonial .testimonial .right {
        padding-top: 0;
    }

    .course_detail_sec .left {
        width: 60%;
    }

    .course_detail_sec .right {
        width: 40%;
    }

    .course_detail_sec .left .course-syllabus .syllabus .syllabus-box ul.lesson-list li:hover .actions {
        display: none;
    }

    #is_display_mobile {
        display: none;
    }
}

@media (max-width: 1024px) {

    .title_course h2 {
        font-size: 22px;
    }

    .des_course {
        font-size: 20px !important;
        width: 216px;
        margin-left: -116px;
        margin-top: 22px;
    }

    .btn_act_course {
        left: 25px;
    }

    .price_course {
        font-size: 12px !important;
    }

    .price_date {
        font-size: 15px;
    }

    #is_display_mobile {
        display: none;
    }

    #course_activation {
        font-size: 13px !important;
    }
}

@media (max-width: 991px) {
    .row {
        margin-right: 0;
        margin-left: 0;
    }

    nav > div.container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .nav-actions li:first-child,
    .nav-actions li:nth-child(2) {
        display: none;
    }

    ul.nav-actions-logined li.hotline {
        display: none;
    }

    .heading_sec > div > div {
        background-position: center 200px !important;
        background-size: 300px 240px !important;
        margin-top: 0 !important;
    }

    .heading_sec .slogan {
        padding-top: 15px;
    }

    .heading_sec .slogan > div {
        margin: auto;
    }

    .classBlock {
        margin-top: 170px;
    }

    .col_5 {
        width: 50%;
    }

    .col_5:last-child {
        width: 100%;
    }


    .classBlock .thumbnail {
        width: 260px;
        margin: 0 auto 32px auto;
    }

    .searchBar ul li:first-child {
        /* display: block; */
        margin-bottom: 22px;
    }

    .searchBar > div > div {
        padding: 18px 0 15px;
    }

    ul.nav.content-tab li {
        display: block;
        margin-bottom: 15px;
        margin-right: 0;
    }

    .notable_lesson .thumbnail {
        width: 250px;
        margin: 0 auto 25px auto;
    }

    .math > div,
    .article > div {
        width: 100%;
    }

    .article .thumbnail .cover img {
        height: auto;
        width: 100%;
    }

    .breadcrumb_sec {
        padding-left: 0;
        padding-right: 0;
    }

    ul.accomplishBar {
        display: none;
    }

    .note-cover {
        width: 570px;
    }

    .note-cover .note-spring {
        width: 492px;
        left: 36px;
    }

    .note-cover .question-area {
        padding-bottom: 75px;
    }

    .note-cover .question-area .right-tray {
        width: 100px;
        right: -88px;
    }

    .question-area .wrong-answer {
        font-size: 50px;
        padding-top: 65px;
    }

    .question-area .right-cat {
        bottom: -75px;
    }

    .question-area .wrong-cat {
        bottom: -64px;
    }

    .contact_sec .contact,
    .contact_sec .ggmap {
        width: 100%;
    }

    .contact_sec .ggmap {
        padding-left: 15px;
    }

    .contact_sec .feedback .left,
    .contact_sec .feedback .right {
        width: 100%;
    }

    .contact_sec .feedback .left p {
        text-align: left;
        max-width: none;
    }

    .contact_sec .feedback .left,
    .contact_sec .feedback .right,
    form.feedback-form .textarea-col,
    form.feedback-form .input-col:nth-child(1),
    form.feedback-form .form-actions {
        padding-left: 0;
    }

    form.feedback-form .input-col:nth-child(3),
    form.feedback-form .textarea-col,
    form.feedback-form .form-actions {
        padding-right: 0;
    }

    .courses_sec .main-courses > div {
        padding-right: 0;
        padding-left: 0;
    }

    .courses_sec .main-courses > div > div {
        /* border-top-right-radius: 12px; */
    }

    .courses_sec .main-courses .left-pane,
    .courses_sec .main-courses .right-pane {
        width: 100%;
        border-bottom-left-radius: 0;
        border-top-right-radius: 12px;
    }

    .courses_sec .main-courses .left-pane .course .action {
        bottom: 35px;
    }

    .courses_sec .main-courses .right-pane {
        height: 100%;
    }

    .courses_sec .main-courses .right-pane .videojs {
        top: 0;
        transform: none;
    }

    .courses_sec .other-courses .course {
        width: 48%;
        /*margin-right: 4%;*/
    }

    .courses_sec .other-courses .course:nth-child(3) {
        margin-right: 0;
    }

    .news_article_sec .content-sheet .left,
    .news_article_sec .content-sheet .right {
        width: 100%;
    }

    .news_article_sec .content-sheet .right {
        margin-top: 30px;
    }

    .course_detail_sec .left {
        width: 100%;
        padding-top: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .course_detail_sec .right {
        top: auto;
        padding-left: 0;
        width: 470px;
        display: none;
        margin: 25px auto 0;
        padding-right: 0;
    }

    .course_detail_sec .right.alternative {
        display: block;
        float: none;
    }

    .course_detail_sec .right .tray .thumbnail {
        margin-bottom: 0;
    }

    .course_detail_sec.breadcrumb_sec .headingBackground h1 {
        width: 100%;
    }

    .course_detail_sec .left .search-group {
        display: none;
    }

    .course_detail_sec .left .course-info h2.title,
    .course_detail_sec .left .course-syllabus h2.title {
        text-align: center;
        font-size: 30px;
    }

    .course_detail_sec .left .course-syllabus .search-box {
        position: static;
        margin-bottom: 20px;
    }

    .course_detail_sec .left .course-info h4.title i {
        display: none;
    }

    .course_detail_sec .extra-btn,
    .float-btn.course_detail {
        display: block;
    }

    .tab-pane > div {
        width: 100%;
    }

    .tab-pane .box {
        border-bottom: 1px solid;
    }

    #is_display_mobile {
        display: none;
    }
}

@media (max-width: 800px) {
    .title_course h2 {
        font-size: 30px;
        text-align: center;
    }

    .des_course {
        width: 500px;
        margin-left: -33px;
        margin-top: 22px;
    }

    .btn_act_course {
        left: 250px;
    }

    .is_display_web {
        display: none;
    }

    #is_display_mobile {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-header {
        display: none;
    }

    .nav.navbar-nav.pull-right {
        left: 2%;
    }

    .adjust-container-768 {
        width: 100%;
    }

    .notable_courses .courses_sec .other-courses .course .thumbnail {
        height: 370px;
    }

    #course_activation {
        display:none !important;
    }
}

@media (max-width: 768px) {
    .note-cover .question-area .answer span {
        font-size: 24px;
    }
    .navbar > div > div > div {
        padding-left: 0;
    }

    .nav.navbar-nav.pull-right {
        float: none !important;
        margin-top: 0;
        left: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        position: relative;
    }

    .dropdown-menu span.glyphicon-triangle-top {
        display: none;
    }

    .navbar-toggle {
        /*margin-top: -7px;*/
        margin-top: 1px;
        position: relative;
        top: -7px;
    }

    .navbar-default .navbar-toggle {
        border-color: transparent;
    }

    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background-color: transparent;
    }

    .navbar-toggle[aria-expanded="true"] .barbarbar {
        display: none;
    }

    .navbar-toggle[aria-expanded="true"] .crossSign {
    }

    li[role=presentation] ul.nav-actions-logined {
        display: none;
    }

    ul.nav-actions-logined-mobile,
    ul.nav-actions-logined-mobile a {
        display: block;
        font-size: 22px !important;
        position: relative;
    }

    ul.nav-actions-logined-mobile > li {
        padding: 18px 0 !important;
        height: 110px;
        text-align: center;
    }

    ul.nav-actions-logined-mobile li.star,
    ul.nav-actions-logined-mobile li.notification,
    ul.nav-actions-logined-mobile li.logined {
        width: 33.3333%;
        float: left;
    }

    ul.nav-actions-logined-mobile li.hotline {
        height: 58px;
        padding-top: 14px !important;
    }

    ul.nav-actions-logined-mobile li.hotline i {
    }

    ul.nav-actions-logined-mobile li.hotline span {
    }

    ul.nav-actions-logined-mobile li.star div,
    ul.nav-actions-logined-mobile li.notification div {
        width: 48px;
        height: 48px;
        background-color: #034d72;
        text-align: center;
        border-radius: 30px;
        margin: 0px auto 3px;
    }

    ul.nav-actions-logined-mobile li.star {
    }

    ul.nav-actions-logined-mobile li.star div {
    }

    ul.nav-actions-logined-mobile li.star div img,
    ul.nav-actions-logined-mobile li.notification div img {
        position: relative;
        top: 6px;
    }

    ul.nav-actions-logined-mobile li.star span {
    }

    ul.nav-actions-logined-mobile li.notification {
        border-left: 1px white solid;
        border-right: 1px white solid;
    }

    ul.nav-actions-logined-mobile li.notification div {
    }

    ul.nav-actions-logined-mobile li.notification div span {
    }

    ul.nav-actions-logined-mobile li.logined {
    }

    ul.nav-actions-logined-mobile li.logined div {
    }

    ul.nav-actions-logined-mobile li.logined div img {
        margin-bottom: 3px;
        border-radius: 30px;
    }

    ul.nav-actions-logined-mobile li.logined div a {
        padding: 0;
    }

    ul.nav-actions-logined-mobile li.logined div > ul {
        margin: 0;
    }

    ul.nav-actions-logined-mobile li.logined div > ul ul.dropdown-menu .glyphicon-triangle-top {
    }

    ul.nav-actions-logined-mobile li.logined li.dropdown ul li {
        padding: 5px 0;
    }

    ul.nav-actions-logined-mobile li.logined li.dropdown ul li a {
        padding-left: 15px;
        padding-right: 0;
    }

    ul.nav-actions-logined-mobile li.logined li.dropdown > a {
    }

    ul.nav-actions-logined-mobile li.logined li.dropdown > a span {
        display: block;
        text-transform: none;
        margin: 0;
    }

    ul.nav-actions-logined-mobile li.logined li.dropdown > a > span i.fa-angle-right {
    }

    ul.nav-actions-logined-mobile li.logined li.dropdown > a > span i.fa-angle-down {
    }

    ul.nav-actions-logined-mobile li.logined div a i {
    }

    ul.nav-actions-logined-mobile li.logined ul.dropdown-menu {
        margin-top: 10px;
        width: 100vw;
        position: absolute;
        /* left: -251px; */
    }

    ul.nav-actions-logined-mobile li.logined ul.dropdown-menu li {
    }

    .tab-pane .container {
        padding-left: 0;
        padding-right: 0;
    }

    #navbar {
        overflow: hidden;
        border: none;
        height: 100vh;
        background-color: #04689a;
        z-index: 100;
        position: relative;
        top: -7px;
        overflow-y: scroll;
    }

    #navbar a {
        color: white !important;
        font-size: 22px !important;
        text-transform: uppercase;
    }

    #navbar > ul > li {
        padding: 12px 15px 8px;
        border-bottom: 1px white solid;
    }

    #navbar > ul > li:first-child {
        /* padding: 10px 15px 10px; */
        border-top: 1px white solid;
    }

    #navbar > ul > li:hover {
        background-color: #ff5620;
    }

    #navbar > ul > li.open:hover {
        background-color: #04689a;
    }

    .dropdown-menu li a i {
        font-size: 25px;
        margin-top: -5px;
    }

    #navbar > ul > li > a > i {
        /* margin-top: -12px; */
    }

    #navbar > ul > li > a > i.fa-angle-right {
        display: block;
        position: relative;
        /* top: 12px; */
    }

    #navbar > ul > li > a > i.fa-angle-down {
        display: none;
    }

    #navbar > ul > li.buyAccount {
        border: none;
        text-align: center;
        margin-top: 15px;
    }

    #navbar > ul > li.buyAccount:hover {
        background-color: #04689a;
    }

    #navbar > ul > li.buyAccount a {
        display: inline-block;
        padding: 30px 55px 25px;
    }

    #navbar > ul > li.buyAccount:hover a {
        background-color: #ff5620;
    }

    #navbar > ul > li.open > ul > li.open {
        background-color: #04689a;
    }

    #navbar > ul > li > ul > li a {
        font-size: 30px;
        padding: 20px 30px 15px;
    }

    #navbar > ul > li > ul > li > ul {
        padding: 0px 15px;
    }

    #navbar .buyAccount {
        display: block;
    }

    .navigation > div > div {
        margin-bottom: 20px;
    }

    .searchBar > div > div i.fa-search {
        position: absolute;
        color: black;
        opacity: 0.15;
        font-size: 156px;
        top: -11px;
        left: -14px;
    }

    .searchBar select {
        padding: 7px 35px 6px 10px
    }

    .searchBar button {
        padding: 5px 10px;
    }

    .searchBar ul li {
        margin: 0 4px;
    }

    footer .left,
    footer .right {
        width: 100%;
    }

    footer.homeFooter .bct {
    }

    footer .bct img {
        /*position: relative;
        top: 30px;
        width: 241px;
        margin: auto;
        display: block;*/
        display: block;
        margin: 30px auto 65px;
    }

    footer.homeFooter .left p {
        width: 100%;
    }

    .note-cover {
        width: 410px;
        margin-left: 120px;
    }

    .note-cover .note-spring {
        width: 224px;
        left: calc(50% + 28px);
        transform: translateX(-50%);
    }

    .note-cover .question-area .question-heading {
    }

    .note-cover .question-area .question-heading li {
        /*display: block;*/
    }

    .note-cover .question-area .question-heading li:first-child {
        margin: 0 auto;
        width: 200px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 18px;
        padding: 5px 20px;
    }

    .note-cover .question-area .question-heading li:last-child {
        margin: 0 auto;
        width: 200px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        font-size: 18px;
    }

    .note-cover .question-area .question-heading li:nth-child(2) {
        top: 0;
        width: 168px;
        margin: 0 auto;
        font-size: 27px;
        padding: 2px;
        height: 40px;
    }

    .question-area .right-cat,
    .question-area .wrong-cat {
        width: 88px;
        height: 104px;
    }

    .question-area .right-cat img,
    .question-area .wrong-cat img {
        width: 100%;
    }

    .question-area .right-answer,
    .question-area .wrong-answer {
        font-size: 40px;
        padding-top: 70px;
        margin-top: 80px;
    }

    .question-area .wrong-cat {
        bottom: -90px;
    }

    .subjects_sec .subject ul.lesson-list li .title {
        width: 58%;
    }

    .notable_courses .courses_sec .other-courses .course .thumbnail {
        height: 370px;
    }

    .join_vuihoc .four-step .step .content {
        padding-top: 27px;
    }

    .join_vuihoc .four-step .step .header .title {
        /* font-size: 30px */
    }

    .join_vuihoc .four-step .step .content span {
        font-size: 18px;
    }

    .join_vuihoc .four-step .step .content i {
        /* display: block; */
        margin-bottom: 5px;
    }

    .note-cover .question-area .answer input
    {
        width: 100%;
    }

    label.label-btn-group {
        width: 100% !important;
        margin-right: 0px !important;
    }

    label.label-btn-group:first-child {
        margin-bottom: 5px !important;
    }

    .no-choice-answer {
        height: 30px !important;
        width: 30px !important;
        border-radius: 50%;
        padding-top: 0px !important;
        font-size: 22px !important;
    }

    #course_activation {
        display:none !important;
    }

    .note-cover .question-area .answer span {
        font-size: 24px !important;
    }
}

@media (max-width: 675px) {

    /*.breadcrumb_sec .row:last-child {
        background-size: 100%;
    }*/
    .topics {
        padding: 0 100px;
    }

    .topics .thumbnail .caption .footer .left span {
        margin-right: 5px;
    }

    .note-cover {
        margin-left: 50px;
    }

    .question-book .title {
        font-size: 38px;
    }

    .submit-big,
    .submit-big-re {
        height: 50px;
        padding: 0 20px;
        font-size: 22px;
    }

    .note-cover .question-area p.question {
        font-size: 22px;
    }

    .subjects_sec .subject ul.lesson-list li .title {
        width: 48%;
    }

    .subjects_sec .subject ul.lesson-list li .title p {
        font-size: 18px;
    }

    .statistics > div > div > .col-xs-3 {
        width: 50%;
    }

    .statistics .box {
        height: auto;
        padding-top: 0;
        border-right: none;
    }

    .statistics .box .counting {
        font-size: 32px;
    }

    .statistics .box .count-label {
        font-size: 18px;
    }

    .news_home .left,
    .news_home .right {
        width: 100%;
    }

    .news_home .left {
        padding-right: 15px;
    }

    .news_home .headline.top-news {
        border-bottom: 1px #d1d1d1 solid;
        padding: 0 0 12px;
    }

    .news_home .right .headline:first-child {
        padding-top: 22px;
    }

    .join_vuihoc .four-step .step {
        width: 100%;
    }

    .join_vuihoc .four-step .step .header span.glyphicon-triangle-right {
        display: none;
    }

    .join_vuihoc .four-step .step .header span.glyphicon-triangle-bottom {
        right: 25px;
        left: auto;
        top: 62px;
        font-size: 40px;
        display: inline-block;
    }

    .join_vuihoc .four-step .step.one .header span.glyphicon-triangle-bottom {
        color: #ffba00;
    }

    .join_vuihoc .four-step .step.two .header span.glyphicon-triangle-bottom {
        color: #ff6609;
    }

    .join_vuihoc .four-step .step.three .header span.glyphicon-triangle-bottom {
        color: #1dc2da;
    }

    .join_vuihoc .four-step .step.four .header span.glyphicon-triangle-bottom {
        color: #327ad5;
    }

    .join_vuihoc .four-step .step .header .title {
        left: auto;
    }

    .join_vuihoc .four-step .step.two .content {
        border-right: none;
    }

    .notable_courses .courses_sec .head_title h2 {
        font-size: 28px;
        padding-right: 0;
    }

    .notable_courses .courses_sec .head_title {
        margin-bottom: 90px;
    }

    .notable_courses .tab-pane .owl-nav {
        top: -70px;
        text-align: left;
    }

    .notable_courses > div > div > div .col-xs-3 {
        display: none;
    }

    .notable_courses .courses_sec {
        width: 100%;
    }

    .notable_courses .courses_sec .other-courses .course .thumbnail {
        height: auto;
    }

    .parental_testimonial .testimonial .left .chat-cover {
        background-size: 150%;
    }

    .parental_testimonial .testimonial .right.tab-pane .owl-next {
        right: 0;
    }

    .parental_testimonial .testimonial .right.tab-pane .owl-prev {
        left: 0px;
    }

    .news_home .head_title {
        text-align: center;
    }

    .news_home .head_title .spliter {
        margin: 0 auto;
    }

    .parental_testimonial .testimonial .owl-nav {
        display: none;
    }

    .news_home {
        padding-bottom: 15px;
    }

    .network {
        display: block;
    }

    .navigation,
    footer .left,
    footer .right {
        margin-left: -15px;
        margin-right: -15px;
        padding: 0;
    }

    footer.homeFooter {
        min-height: inherit;
    }

    footer.homeFooter > div > div {
        border: none;
    }

    .fb_iframe_widget {
        margin-left: 0;
    }

    #layout_footer > .row {
        margin-left: -15px;
        margin-right: -15px;
    }
}

@media (max-width: 600px) {
    .btn_act_course {
        left: 144px;
    }

    .des_course {
        width: 376px;
        margin-left: -66px;
        margin-top: 22px;
    }
    .news_article_sec .content-sheet .left .hd-sidebar {
        display: none!important;
    }
}

@media (max-width: 568px) {

    .des_course {
        width: 376px;
        margin-left: 44px;
        margin-top: 22px;
    }

    .btn_act_course {
        left: -9px;
    }

    .formPanel {
        width: 325px;
    }

    .formPanel > img:first-child {
        top: 16px;
        width: 150px;
    }

    .formPanel .formTitle .text-title {
        font-size: 32px;
    }

    .formPanel .formContent form ul {
        padding: 4px 0;
    }

    .formPanel .formContent form ul li input[type="text"],
    .formPanel .formContent form ul li input[type="password"] {
        width: 79%;
        font-size: 18px;
    }

    .formPanel .formFooter {
        padding: 28px 0;
    }

    .formPanel .formContent button {
        font-size: 18px;
    }

    .formPanel .formContent button.facebookBtn {
        margin-right: 7px;
    }

    .formPanel .formContent button.facebookBtn,
    .formPanel .formContent button.googleBtn {
        width: 127px;
    }

    .formPanel .formContent button i {
        font-size: 18px;
        top: 10px;
    }

    .formPanel .formFooter p {
        font-size: 16px;
    }

    .formPanel .formFooter p a span {
        width: 63px;
    }

    .heading_sec > div {
        padding: 0;
    }

    .heading_sec h4 {
        font-size: 30px;
    }

    .classBlock h4 span {
        display: inline;
    }

    .heading_sec h1 {
        font-size: 80px;
        margin-top: -12px;
    }

    .heading_sec .className h1 {
        display: none;
    }

   

    .classBlock .thumbnail {
        width: 100%;
        margin-bottom: 15px;
        /*width: 145px;*/
    }

    .classBlock .thumbnail .caption a {
        font-size: 16px;
    }

    .classBlock .thumbnail .caption a i {
        margin-top: 4px;
    }

    .searchBar > div {
        padding: 0;
    }

    .searchBar ul {
        margin-bottom: 0;
        padding: 0 25px;
    }

    .searchBar ul li span.text {
        display: none;
    }

    .searchBar button {
        padding: 2px 10px 5px;
    }

    .searchBar button span {
        /* margin-right: 50px; */
        /* font-size: 18px; */
    }

    .searchBar .selectBox i {
        top: 16px;
        right: 40px;
    }

    .lessons .col_5 {
        width: 50%;
        padding: 0 10px;
    }

    .lessons .col_5:last-child {
        width: 100%;
    }

    .notable_lesson .thumbnail p {
        font-size: 17px;
    }

    .notable_lesson .thumbnail .content {
        padding: 35px 15px 2px;
        height: 180px;
    }

    .notable_lesson .thumbnail a {
        /* font-size: 20px; */
    }

    /* .heading_sec>div>div {
        background-position: center 175px;
        background-size: 200px 160px;
    } */
    .heading_sec > div > div {
        background-position: center 115px !important;
        background-size: 250px 180px !important;
    }

    .className h4 {
        margin-bottom: 15px;
        text-align: left;
        padding-left: 15px;
        text-transform: uppercase;
    }

    .classBlock .thumbnail .className {
        padding-top: 20px;
    }

    .head_title h2 {
        font-size: 30px;
    }

    .topics {
        padding: 0;
    }

    .tab-pane .owl-theme .owl-nav [class*=owl-] {
        margin: -59px 10px;
        padding: 0;
    }

    .searchBar select {
        padding: 8px 25px 6px 8px;
        font-size: 18px;
    }

    .notable_lesson .thumbnail {
        width: 100%;
        width: 145px;
    }

    .article .thumbnail .cover img {
        height: 100%;
        width: auto;
    }

    .subjects_sec ul.subject {
        width: 428px;
    }

    ul.subject li.heading .add {
        width: 220px;
    }

    ul.subject li.item:hover p {
        opacity: 0.1;
    }

    footer .copyright p {
        display: none;
    }

    footer.contentPage .copyright {
        left: 50%;
        transform: translateX(-50%);
    }

    footer.contentPage .copyright {
        bottom: 90px;
    }

    .note-cover {
        width: initial;
        margin-left: -20px;
        margin-right: -20px;
        float: none;

    }

    .note-cover .question-area {
        float: none;
    }

    .note-cover .note-spring {
        width: 224px;
        left: calc(50% + 26px);
    }

    .note-cover .question-area .left-tray {
        width: initial !important;
        top: 65px;
        overflow-x: auto;
        white-space: nowrap;
        right: 12px;
        left: 12px;
        z-index: 2;
        border-top-left-radius: 0;
    }

    .note-cover .question-area .left-tray::before {

    }

    .note-cover .question-area .left-tray li {
        display: inline-block;
    }

    .note-cover .question-area .right-tray {
        position: relative;
        width: 100%;
        left: 0;
        padding: 0 14px;
        top: 115px;
    }

    .note-cover .question-area .right-tray li {
        /* display: inline-block; */
    }

    .note-cover .question-area .right-tray .unit {
        display: none;
    }

    .note-cover .question-area .right-tray .question-mark {
        border-radius: 12px;
    }

    .note-cover .question-area .right-tray .light {
        display: none;
    }

    .note-cover .question-area .right-tray .question-mark > div:first-child {
    }

    .note-cover .question-area .right-tray .question-mark p.mark {
        font-size: 26px;
        line-height: 12px;
    }

    .note-cover .question-area .right-tray .question-mark p.proportion {
        font-size: 15px;
    }

    .note-cover .question-area .right-tray .question-mark h4 {

        font-size: 18px;
    }

    .note-cover .question-area .right-tray .question-mark > div:first-child p.proportion {
        margin: 4px 0 7px;
    }

    .note-cover .question-area .right-tray .question-mark > div:last-child > div {
        padding: 3px 0 0;
        margin-left: 80px;
        /* transform: translateX(-50%); */
    }

    .note-cover .question-area .right-tray .question-mark > div:last-child > div p {
        float: left;
    }

    .note-cover .question-area .right-tray .question-mark > div:last-child > div p.proportion {
        margin: -6px 8px 0 8px;
    }

    .note-cover .question-area .cat {
        height: 80px;
    }

    .question-area .right-cat {
        width: 88px;
        height: 104px;
    }

    .question-area .right-answer,
    .question-area .wrong-answer {
        font-size: 40px;
        padding-top: 50px;
        margin-top: 20px;
    }

    .question-area .wrong-answer {
        padding-top: 50px;
    }

    .question-area .next {
        right: 20px;
        bottom: 25px;
    }

    .question-area .next h4 {
        font-size: 16px;
    }

    .contact_sec .contact .support > div {
        width: 100%;
    }

    .contact_sec .contact .support div:first-child {
        max-width: none;
    }

    form.feedback-form .input-col {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    form.feedback-form .form-actions {
        margin-top: 15px;
    }

    .action-btn {
        margin-left: auto;
        margin-right: auto;
        width: 190px;
        display: block;
        margin-bottom: 10px;
    }

    .map-container {
        padding-left: 0;
        padding-right: 0;
    }

    .map-container iframe {
        width: 100%;
    }

    .subjects_sec .content-sheet {
        padding: 40px 15px;
    }

    .subjects_sec .subject .heading {
        margin-bottom: 10px;
    }

    .subjects_sec .subject .heading h2 {
        font-size: 32px;
        margin-left: 68px;
    }

    .subjects_sec .subject .heading .icon {
        height: 48px;
        top: 2px;
    }

    .subjects_sec .subject .heading .icon img {
        height: 48px;
    }

    .subjects_sec .subject ul.lesson-list li .title {
        width: 46%;
    }

    .subjects_sec .subject ul.lesson-list li .title .progress-icon {
        height: 26px;
        width: 26px;
    }

    .subjects_sec .subject ul.lesson-list li .title .progress-icon.completed i {
        font-size: 12px;
        top: 4px;
    }

    .subjects_sec .subject ul.lesson-list li .title .progress-icon.thisWeekAssignment i {
        font-size: 12px;
        top: 1px;
    }

    .subjects_sec .subject ul.lesson-list li .title p {
        font-size: 14px;
        line-height: 20px;
    }

    .subjects_sec .subject ul.lesson-list li h2.number {
        font-size: 32px;
        padding: 20px 0px;
        width: 66px;
    }

    .courses_sec > .container {
        /* padding-left: 0; */
        /* padding-right: 0; */
    }

    .courses_sec .top-heading h1 {
        font-size: 40px;
        margin-bottom: 40px;
        margin-top: 25px;
    }

    .courses_sec .other-courses .course {
        width: 100%;
    }

    .courses_sec .main-courses .left-pane {
        padding: 10px 20px;
        height: 330px;
    }

    .courses_sec .main-courses .left-pane .course .title h2 {
        font-size: 32px;
    }

    .courses_sec .main-courses .left-pane .course .title h4 {
        font-size: 18px;
    }

    .courses_sec .main-courses .left-pane .course .content p {
        font-size: 16px;
    }

    .courses_sec .main-courses .left-pane .course .content {
        padding-left: 0;
    }

    .courses_sec .main-courses .left-pane .course .price .just {
        font-size: 16px
    }

    .courses_sec .main-courses .left-pane .course .price .real-price {
        font-size: 32px;
    }

    .courses_sec .main-courses .left-pane .course .action .action-btn {
        height: 36px;
        width: 122px;
        padding-top: 2px;
        box-shadow: inset 0 -4.5px 0 0 rgba(0, 0, 0, 0.25);
        border-radius: 9px;
        display: inline-block;
    }

    .courses_sec .main-courses .left-pane .course .action .action-btn span i {
        left: 0;
    }

    .courses_sec .main-courses .left-pane .course .action {
        width: 100%;
        text-align: center;
        bottom: 22px;
    }

    .courses_sec .main-courses .left-pane .course .action .action-btn span:first-child {
        font-size: 16.6px;
        width: 28px;
    }

    .courses_sec .main-courses .left-pane .course .action .action-btn span:last-child {
        width: 78px;
        font-size: 16px;
    }

    .courses_sec .other-courses .course .thumbnail .action .action-btn-sm {
        display: inline-block;
    }

    .courses_sec .main-courses .left-pane .course img.cat-act {
        display: none;
    }

    .news_article_sec {
        padding-left: 0;
        padding-right: 0;
    }

    .news_article_sec .content-sheet .left .article h1.title {
        font-size: 22px;
        line-height: 28px;
    }

    .news_article_sec .content-sheet .left .article p.excerpt {
        font-size: 16px;
        line-height: 21px;
    }

    .news_article_sec .content-sheet .left .article .content p {
        font-size: 16px;
        line-height: 21px;
    }

    .news_article_sec .content-sheet .left .article .content p.quote {
        font-size: 22px;
        line-height: 28px;
        padding-left: 15px;
    }

    .news_article_sec .content-sheet {
        padding: 25px 10px;
    }

    .news_article_sec .content-sheet .left .related-articles .news p {
        font-size: 14px;
        line-height: 19px;
    }

    .news_article_sec .nav-tabs li a {
        font-size: 14px;
    }

    .news_article_sec .content-sheet .left .article p.author {
        font-size: 16px;
    }

    .news_article_sec .content-sheet .left .related-articles .splitter {
        display: none;
    }

    .news_article_sec .content-sheet .left .related-articles .col-xs-6 {
        width: 100%;
        margin-bottom: 0;
    }

    .news_article_sec .content-sheet .right .news-box h4.box-title {
        font-size: 26px;
    }

    .news_article_sec .content-sheet .right .news-box .tab-content .news-list li {
    }

    .news_article_sec .content-sheet .right .news-box .tab-content .news-list li p {
        font-size: 16px;
        padding: 8px 0 0;
        line-height: 21px;
    }

    .fix-margin-right--30 {
        margin-right: -30px;
    }

    .course_detail_sec .right {
        width: 100%;
    }

    .course_detail_sec.breadcrumb_sec .headingBackground h1 {
        font-size: 22px;
        margin-top: 25px;
        line-height: 27px;
    }

    .breadcrumb_sec.course_detail_sec .headingBackground {
        height: 106px;
    }
}

@media (max-width: 414px) {

    .des_course {
        width: 286px;
        margin-left: 30px;
        margin-top: 22px;
    }

    .login img {
        display: none;
    }

    nav .nav.nav-tabs li:last-child,
    ul.nav-actions li {
        padding-left: 0 !important;
    }

    ul.nav-actions li:last-child div a {
        margin-left: 0;
        position: relative;
        top: 2px;
    }

    nav .nav.nav-tabs li {
        padding-left: 0;
        padding-right: 0;
    }

    nav .nav.nav-tabs > li > a {
        /* padding-left: 10px; */
        /* padding-right: 10px; */
        font-size: 18px;
        padding: 13px 15px;
    }

    #navbar > ul > li.buyAccount a {
        display: inline-block;
        padding: 15px 35px 14px;
    }

    .subjects_sec .col-xs-6 {
        padding-right: 0;
        padding-left: 0;
    }

    .subjects_sec ul.subject {
        width: 320px;
    }

    ul.subject li.item p {
        font-size: 20px;
        line-height: 25px;
        padding: 0 15px 0 15px;
        width: 232px;
    }

    ul.subject li.heading .add {
        width: 112px;
    }

    ul.nav.content-tab li a {
        padding: 17px 43px 16px;
    }

    .note-cover {
        /* margin-left: 8px; */
        /* width: 87vw; */
    }

    .subjects_sec .subject ul.lesson-list li .star {
        padding: 19px 0;
        background-size: 91%;
        right: 5px;
    }

    .subjects_sec .subject ul.lesson-list li .star span {
        font-size: 18px;
    }

    .parental_testimonial .testimonial .left img {
        width: 83%;
    }

    .parental_testimonial .left.tab-pane .owl-theme .owl-nav [class*=owl-] {
        float: none;
    }

    .parental_testimonial .left.tab-pane .owl-theme .owl-nav .owl-prev {
        margin-right: 140px !important;
    }

    .parental_testimonial .left.tab-pane .owl-theme .owl-nav .owl-next {
        margin-left: 140px !important;
    }

    .parental_testimonial .testimonial .left.tab-pane .owlNavBtn {
        color: #a5a5a5;
    }

    .parental_testimonial .testimonial .right .testimonial-box {
        padding: 0;
    }

    .parental_testimonial > .container {
        padding-left: 0;
        padding-right: 0;
    }

    .news_home {
        background-color: #f8f9fd !important;
    }

    .news_home > .container {
        padding: 0
    }

    .notable_courses > .container {
        padding: 0;
    }

    .classBlock .col_5,
    .classBlock .col_5 .thumbnail {
        width: 100%;
    }

    .classBlock .thumbnail .className {
        padding-top: 15px;
    }

    .classBlock h4 {
        margin-bottom: 0;
        padding-left: 25px;
    }

    .classBlock .thumbnail .caption p,
    .classBlock .thumbnail .caption p:last-child {
        padding-left: 25px;
    }

    .classBlock .thumbnail .caption p a {
        font-size: 20px;
    }

    .searchBar > div > div {
        padding: 32px 0 15px;
    }

    .searchBar > div > div i.fa-search {
        font-size: 286px;
        top: 18px;
        right: 0;
        left: auto;
    }

    .searchBar ul li {
        display: block;
        margin-bottom: 20px;
    }

    .searchBar ul li:last-child button span:last-child {
        display: inline;
        margin-right: 0;
    }

    .searchBar select,
    .searchBar button {
        width: 100%;
        padding: 9px 0px 8px 40px;
        font-size: 22px;
        font-weight: bold;
    }

    .searchBar button {
        padding: 8px 0 7px 0;
    }

    .custom-style-radio {
        display: block;
    }

    .right-content-question {
        min-width: 120px !important;
    }

    .area-drop-answer {
        min-width: 120px !important;
    }

    #title_form_reset_pass {
        font-size: 25px;
    }
}

@media (max-width: 375px) {
    .reset_password form {
        width: 38% !important;
    }
    div.download_app {
        display: none;
    }
    .verification form {
        width: 34% !important;
        background-color: #fff;
    }
    div.activating,
    div.verification {
        width: 100%;
        position: relative;
        bottom: 0;
        top: 0;
        left: 0;
        transform: none;
        height: 100vh;
        padding: 0px !important;
    }
    .note-cover {

    }

    .note-cover .question-area .left-tray {

    }

    .note-cover .question-area .left-tray li.currentLastQuestionBtn {
        border-bottom: 1px #d8d8d8 solid;
        border-bottom-left-radius: 0;
    }

    .nextQuestionBtn {

    }

    .subjects_sec .subject ul.lesson-list li .title {
        width: 150px;
        margin-left: 10px;
    }

    .subjects_sec .subject ul.lesson-list li h2.number {
        font-size: 28px;
        padding: 23px 0px;
        width: 60px;
    }

    .parental_testimonial .left.tab-pane .owl-theme .owl-nav .owl-prev {
        margin-right: 120px !important;
    }

    .parental_testimonial .left.tab-pane .owl-theme .owl-nav .owl-next {
        margin-left: 120px !important;
    }

    .parental_testimonial {
        margin-bottom: -114px;
    }

    .des_course {
        width: 252px;
        margin-left: 30px;
        margin-top: 22px;
    }

    #resetPasswordForm {
        width: 100% !important;
    }

    #title_form_reset_pass {
        font-size: 23px;
    }

    /* search_codes */
    section.search_codes {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    /* end search_codes */

    /* popup_detail_codes */
    section.popup_detail_codes {
        width: 100%;
        padding: 15px;
    }
    section.popup_detail_codes div.tilte_head span.cancel {
        right: 0px;
    }
    section.popup_detail_codes div.list>ul>li {
        flex-direction: column;
    }
    /* end popup_detail_codes */

    section.recovery_code .recovery_code-content {
        width: 100%;
        padding: 15px;
    }
}

@media (max-width: 360px) {
    .price_course {
        font-size: 20px !important;
    }

    .des_course {
        font-size: 16px !important;
    }

    .btn_act_course {
        margin: -12px 9px;
    }

    .price_date {
        margin-top: -13px;
    }

    #resetPasswordForm {
        width: 100% !important;
    }
}

@media (max-width: 320px) {
    #verificationCode {
        margin-left: 23px !important;
    }
    #icon_vaohoc {
        right: 160px !important;
        top: 5px !important;
    }

    .price {
        font-size: 25px;
    }

    .price_date {
        font-size: 12px;
        margin-top: -6px;
    }

    #style_dang_ky_hoc {
        width: 110px !important;
        font-size: 15px !important;
    }

    .des_course {
        width: 210px;
        margin-left: 30px;
        margin-top: 22px;
    }

    .title_course h2 {
        font-size: 24px;
        text-align: center;
    }

    .area-drop-answer {
        min-width: 100px !important;
    }

    .right-content-question {
        min-width: 100px !important;
    }

    #resetPasswordForm {
        width: 100% !important;
    }

    #title_form_reset_pass {
        font-size: 18px;
    }
    section.request_counselling {
        width: 300px !important;
    }

    /* div.login-form-new {
        position: relative;
        width: 640px !important;
        left: 100% !important;
        top: 40% !important;
    }

    .login-form-new form {
        padding: 80px 22px 57px 17px !important;
    }
    .login-form-new form .content_top h3 {
        padding: 50px;
    } */
}

.blog_post_body .blog_post_title h2 {
    font-size: 20px;
}

.blog_post_body .blog_post_title h2 a {
    color: #1b3043;
}

.blog_post_body .blog_post_title h2 a:hover {
    color: #ff5620;
}

.insite-comments .section-title-comment {
    font-size: 22px;
    line-height: 31px;
    color: #333333;
    position: relative;
    padding: 10px 0;
    margin-bottom: 20px;
}
.insite-comments .section-title-comment:after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 150px;
    height: 2px;
    background: #FF5620;
}

.area-drop-answer {
    height: auto;
    width: 50%;
    min-width: 200px;
    border-radius: 10px;
    border: solid 1px;
    background-color: #f0f0f0;
}

.area-origin-answer {
    border-radius: 5px;
    box-shadow: 2px 2px 5px #333;
    margin: 0 auto;
}

.content-question {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px;
}
.right-content-question {
    min-width: 200px;
    width: 50%;
    margin: 0 10px;
    height: auto;
    border-radius: 10px;
    border: solid 1px;
}

.answer-drag {
    display: block !important;
    border-radius: 5px;
    margin: 30px 0px;
    font-size: 32px;
    margin: 5px 10px;
    background: lightgrey;
    padding: 5px 10px;
    height: fit-content;
}

.answerselected {
    background: #FF9800!important;
    border: solid 2px blue!important;
}

.onechoiceselected {
    background: #FF9800!important;
    border: solid 20px #FF9800!important;
}

.onechoiceselected_arena_type {
    background: #FF9800!important;
}
.custom-style-btn {
    display:flex;
    justify-content: space-evenly;
}

.custom-style-matching-fill-question {
    width: 100%;
}

.custom-style-free-text {
    font-size: 32px;
}

.custom-style-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark-radio {
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
    margin: -4px 5px;
    border: 1px solid gray;
}

.custom-style-radio input:checked ~ .checkmark-radio {
    background-color: #2196F3;
}

.checkmark-radio:after {
    content: "";
    position: relative;
    display: none;
}

.custom-style-radio input:checked ~ .checkmark-radio:after {
    display: block;
}

.custom-style-radio .checkmark-radio:after {
    top: 9px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

/**/

.custom-style-checkbox {
    display: inline-block;
    /*padding-left: 35px;*/
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

.custom-style-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-checkbox {
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    margin: 0 auto;
    border: 1px solid gray;
}

.custom-style-checkbox input:checked ~ .checkmark-checkbox {
    background-color: #2196F3;
}

.checkmark-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-style-checkbox input:checked ~ .checkmark-checkbox:after {
    display: block;
}

.custom-style-checkbox .checkmark-checkbox:after {
    left: 9px;
    top: 2px;
    width: 10px;
    height: 18px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.custom-style-btn {
    display:flex;
    justify-content: space-evenly;
}

.custom-style-free-text {
    font-size: 32px;
}

.custom-style-radio {
    position: relative;
    /*padding-left: 35px;*/
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-style-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark-radio {
    height: 30px;
    width: 30px;
    background-color: #eee;
    border-radius: 50%;
    margin: -4px 5px;
    border: 1px solid gray;
}

.custom-style-radio input:checked ~ .checkmark-radio {
    background-color: #2196F3;
}

.checkmark-radio:after {
    content: "";
    position: relative;
    display: none;
}

.custom-style-radio input:checked ~ .checkmark-radio:after {
    display: block;
}

.custom-style-radio .checkmark-radio:after {
    top: 9px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

.custom-style-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-checkbox {
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #eee;
    margin: 0 auto;
    border: 1px solid gray;
}

.custom-style-checkbox input:checked ~ .checkmark-checkbox {
    background-color: #2196F3;
}

.checkmark-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-style-checkbox input:checked ~ .checkmark-checkbox:after {
    display: block;
}

.custom-style-checkbox .checkmark-checkbox:after {
    left: 9px;
    top: 2px;
    width: 10px;
    height: 18px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.formPanel img.fanpage-vuihoc {
    width: 90%;
    margin: 0 auto;
    display: block;
    padding-bottom: 10px;
}

.img-modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0px;
}

.img-modal img {
    width: 100%;
    border: 1px solid brown;
}

.img-modal .left-img {
    width: 40%;
    text-align: center;
}

.img-modal .right-img {
    width: 40%;
}

.button-zalo {
    border-radius: 5px;
    color: white;
    background: #0978bf;
    font-weight: bold;
    margin-top: 5px;
    padding: 5px;
}

.link-tiltle-newspapers a p.title {
    color: black;
    padding: 10px 0px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
}

.link-tiltle-newspapers a p.title:hover {
    color: #337ab7;
}

.link-tiltle-newspapers a > img {
    width: 100%;
}

.img-su-menh {
    height: 200px;
    object-fit: cover;
}

.box p.description {
    font-size: 15px;
    text-align: justify;
}

.book-span {
    padding: 5px;
}

.book-button {
    font-size: 20px;
    border: none;
    padding: 10px;
    margin-bottom: 10px;
}

.book-button-mobile {
    width: 100%;
    font-size: 15px;
    border: none;
    padding: 10px;
}

.book_active {
    background: #FF6609;
}

.item_course_style:hover {
    background-color: white !important;
}

.smartbanner {
    left:0;
    top:0;
    width:100%;
    height:85px;
    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
    background:#dfdfdf;
    overflow:hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
}

.smartbanner-container {
    margin:0 auto;
}

.smartbanner-close {
    position:absolute;
    left:7px;top:7px;
    display:block;
    font-family:'ArialRoundedMTBold',Arial;
    font-size:15px;
    text-align:center;
    text-decoration:none;
    border-radius:14px;
    -webkit-font-smoothing:subpixel-antialiased;
    border:0;
    width:17px;
    height:17px;
    line-height:17px;
    color:#b1b1b3;
    background:#efefef;
}

.smartbanner-close:active,.smartbanner-close:hover {
    color:#333;
}

.smartbanner-icon{
    border-radius: 11px;
    position:absolute;
    left:25px;
    top:10px;
    display:block;
    width:65px;
    height:65px;
    background-color: #fff;
    background-size:cover;
    background-image: url("https://is3-ssl.mzstatic.com/image/thumb/Purple114/v4/ec/51/39/ec513953-0efd-1b17-8b53-469f26c90a43/AppIcon-0-0-1x_U007emarketing-0-0-0-10-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/230x0w.png");
}

.smartbanner-info{
    position:absolute;
    left:98px;
    top:15px;
    width:70%;
    font-size:12px;
    line-height:1.2em;
    color:#999;
}

.smartbanner-title {
    font-size:14px;
    line-height:14px;
    color:#000;
}

.smartbanner-button{
    position:absolute;
    right:5px;
    top:46px;
    padding:0 10px;
    min-width:12%;
    height:24px;
    font-size:14px;
    line-height:24px;
    text-align:center;
    color:#ffffff;
    text-decoration:none;
    border-radius:5px;
    background-color: #FF5620;
}

.smartbanner-button-text {
    text-align:center;
    display:block;
    padding:0 5px;
}

#company_name {
    color: #756767;
    font-size: 12px;
}

#store_type_app {
    font-size: 12px;
}

#start_ranting_app {
    color: #deb700;
    margin-top: -37px;
    font-size: 10px;
}

#resetPasswordForm {
    width: 40%;
    margin: 0px auto;
    padding-bottom: 50px;
}

label.label-btn-group {
    width: 40%;
    text-align: left;
}

label.label-btn-group:first-child {
    margin-bottom: 30px;
}

label.label-btn-group-c3 {
    width: 100%;
    text-align: left;
}

div.answer .btn-group {
    width: 100%;
}

.no-choice-answer {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
    padding-top: 0px;
    display: inline-block;
    text-align: center;
    border: unset;
    font-size: 28px;
}

.content-answer {
    display: inherit;
    font-weight: normal;
    font-size: 18px !important;
    display: inline;
}

.init-a {
    background-color: #E3E3E3;
    color: black;
}

.onechoiceselected-thpt {
    background: #FF9800;
}

#video_comment {
    padding-bottom: 10px;
}

.btn-all-notif {
    margin: 5px auto;
    display:block;
    color: #ff6609 !important;
    text-align: center;
}

.color-ori {
    color: #ff6609 !important;
}

#errorText {
    font-size: 20px;
    padding-bottom: 12px;
}

#body-alert-err-is-account {
    box-shadow: 0 2px 33px 0 rgba(176, 192, 237, 0.33);
}

#course_activation {
    padding: 12px 20px;
    text-transform: uppercase;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(#FF941A, #FF6006);
    line-height: 22px !important;
    margin: 13px 6px;
    cursor: pointer;
}
#course_activation:hover{
   opacity: 0.9;
}
/* --------------------------------------------- trigger_question ----------------------------------------------*/

section.trigger_question {
    width: 500px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    padding: 36px;
    background-color: #fff;
    text-align: center;
}

section.trigger_question div.title {
    color: #14142B;
    font-size: 20px;
    font-weight: 700;
    padding: 12px;
}

section.trigger_question p {
    padding-left: 50px;
    padding-right: 50px;
    font-size: 16px;
    color: #4E4B66;
    font-weight: 500;
}

section.trigger_question div.buttons {
    margin: 30px auto;
}

section.trigger_question div.buttons button {
    color: #FF6609;
    background-color: #fff;
    border-radius: 32px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 28px;
    border: 1px solid #FF6609;
    font-size: 20px;
}
section.trigger_question div.buttons button:hover{
    opacity: 0.9;
}
section.trigger_question div.buttons button:nth-child(2) {
    color: #fff;
    background: linear-gradient(#FF941A, #FF6006);
}
/* ---------------------------------------------end trigger_question ----------------------------------------------*/

@media screen and (max-width: 576px) {
    /* trigger_question */
    section.trigger_question {
        width: 100%;
        padding: 15px;
        position: relative;
        top: 0px;
        left: 0px;
        transform: none;
        height: 100vh;
    }
    section.trigger_question p {
        padding-left: 15px;
        padding-right: 15px;
    }
    section.trigger_question div.buttons button {
        margin-bottom: 20px;
    }
    /*end trigger_question */
    /* request_counselling */
    section.request_counselling {
        width: 340px !important;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        padding: 15px !important;
    }
    section.request_counselling div.title span.cancel {
        right: -5px;
        top: -17px;
    }
    /*end request_counselling */

    section.change_password .change_password-content{
        width: 100%!important;
        padding: 15px!important;
    
    }
}

/* --------------------------------------------- Request_counselling ----------------------------------------------*/

section.request_counselling {
    width: 500px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    padding: 36px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0px 29.1158px 29.1158px rgb(50 50 71 / 10%), 0px 48.5263px 58.2316px rgb(50 50 71 / 25%);
}

section.request_counselling div.title {
    color: #14142B;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    margin-bottom: 24px;
}

section.request_counselling div.title span.cancel {
    position: absolute;
    right: -18px;
    top: -31px;
    cursor: pointer;
}

section.request_counselling .form_request .group_input {
    position: relative;
    margin-bottom: 12px;
}

section.request_counselling .form_request .group_input input,
section.request_counselling .form_request .group_input select {
    width: 100%;
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    outline: none;
    padding: 17px 58px;
    font-size: 16px;
    color: #14142B;
    font-weight: 700;
    appearance: none;
}

section.request_counselling .form_request .group_input span.errors {
    color: #FF3F3F;
    font-size: 14px;
    font-weight: 700;
    margin-left: 32px;
    display: block;
    text-align: left;
    /* display: none; */
}

section.request_counselling .form_request .group_input>i {
    position: absolute;
    right: 28px;
    top: 20px;
    font-size: 25px;
    color: #A0A3BD;
}

section.request_counselling .form_request .group_input input::placeholder {
    color: #A0A3BD;
    font-size: 16px;
    font-weight: normal;
}

section.request_counselling .form_request .group_input>span.icon {
    position: absolute;
    left: 28px;
    top: 18px;
}

section.request_counselling .form_request div.note {
    color: #FF3F3F;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 24px;
    margin-top: 24px;
}

section.request_counselling .form_request button {
    color: #fff;
    background: linear-gradient(#FF941A, #FF6006);
    border: 0;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    border-radius: 32px;
    text-transform: uppercase;
    width: 100%;
    padding: 19px;
}
section.request_counselling .form_request button:hover{
    opacity: 0.9;
}
/* ---------------------------------------------end Request_counselling ----------------------------------------------*/

/* css add display login new */
.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.d-none {
    display: none;
}

.d-inline-block {
    display: inline-block;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.text-right {
    text-align: right;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

/* css login new */
div.login-form-new {
    position: fixed;
    width: 980px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    overflow: hidden;
}

.login-form-new form {
    padding: 120px 50px 120px 44px;
    width: 50%;
    background-color: #fff;
}

.login-form-new form .content_top {
    justify-content: space-between;
    margin-bottom: 17px;
}
.login-form-new form .group_input span.text_top:after{
    content: "*";
    color: #ff6609;
}
.login-form-new form .group_input input::placeholder{
    font-weight: 500;
    color:#A0A3BD;
}

.login-form-new form .content_top h3 {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: #14142B;
    margin-top:0;
}

.login-form-new form .content_top span {
    font-size: 14px;
    font-weight: 600;
    color: #14142B;
    display: block;
}

.login-form-new form .content_top span.color_orange {
    color: #ff6609;
}

.login-form-new form .content_top span.color_orange:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.login-form-new form .group_input {
    margin-bottom: 18px;
}

.login-form-new form .group_input input {
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    width: 100%;
    padding: 14px 58px;
    outline: none;
    font-weight: 700;
    color: #14142B;
}

.login-form-new form .group_input span:nth-child(1) {
    left: 28px;
    top: 15px;
}

.login-form-new form .group_input span.icon_right {
    right: 28px;
    top: 15px;
    cursor: pointer;
    color: #A0A3BD;
    font-size: 20px;
}

.login-form-new form button {
    margin-top: 24px;
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 15px;
    background: linear-gradient(#FF941A, #FF6006);
    border-radius: 32px;
    outline: none;
    border: none;
    cursor: pointer;
}
.login-form-new form button:hover{
    box-shadow: 2px 2px 2px rgb(168 166 166);
}


div.register, div.forgot_password  {
    position: fixed;
    width: 980px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    overflow: hidden;
}

div.download_app {
    background-color: #FFF2E7;
    width: 50%;
    position: relative;
}

div.download_app img.iphonex {
    bottom: 15%;
    left: 5%;
    z-index: 2;
}

div.download_app img.bg_circle {
    top: 16%;
    left: 19px;
}

div.download_app a.link_gg {
    right: 15%;
    bottom: 5%;
}

div.download_app a.link_app {
    left: 15%;
    bottom: 5%;
}

div.download_app-title {
    font-size: 18px;
    color: #0154d0;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 29px;
    margin-left: 37px;
    margin-right: 40px;
    line-height: 28px;
}

div.download_app-title>span {
    font-size: 26px;
    color: #FF6609;
}

.register form {
    padding: 38px 49px 37px 44px;
    background-color: #fff;
    width: 50%;
}

.register form .content_top {

    justify-content: space-between;
    margin-bottom: 17px;
}

.register form .content_top h3 {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: #14142B;
    margin-top:0;
}

.register form .content_top span {
    font-size: 14px;
    font-weight: 600;
    color: #14142B;
    display: block;
}

.register form .content_top span.color_orange {
    color: #ff6609;
}

.register form .content_top span.color_orange:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.register form .group_input {
    margin-bottom: 18px;
}
.register form .group_input:nth-child(6){
    margin-bottom: 0px;
}
.register form .group_input input {
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    width: 100%;
    padding: 14px 58px;
    outline: none;
    font-weight: 700;
    color: #14142B;
    font-size: 16px;
}
/* Chrome, Safari, Edge, Opera */
.register form .group_input input[type=number]::-webkit-outer-spin-button,
.register form .group_input input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.register form .group_input input[type=number]{
    -moz-appearance: textfield;
  }
.register form .group_input input.border-red-input ~ span.icon_right{
    color:#FF3F3F;
}
.register form .group_input span:nth-child(1) {
    left: 28px;
    top: 15px;
}

.register form .group_input span.icon_right {
    right: 28px;
    top: 15px;
    cursor: pointer;
    color: #A0A3BD;
    font-size: 20px;
}

.register form .group_input span.errors {
    font-size: 14px;
    background-color: #fff;
    left: 32px;
    top: -13px;
    padding-left: 5px;
    padding-right: 5px;
}

.register form .group_input span.errors:after {
    content: "*";
    color: #ff6609;
}

.register form .group_input input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    opacity: 0;
}

.register form .group_input label {
    font-size: 14px;
    font-weight: 600;
    position: relative;
}
.register form .group_input input::placeholder{
    font-weight: 500;
    color:#A0A3BD;
}
.register form .group_input label.errors::before{
    border: 1px solid #FF3F3F;
    background-color: #FFE8E8;
}
.register form .group_input label::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #6E7191;
    left: -22px;
}

.register form .group_input input:checked~label::after {
    content: '✔';
    position: absolute;
    color: #ff6609;
    left: -18px;
}



span.color_orange {
    color: #FF3F3F;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 22px;
}

.register form button {
    margin-top: 24px;
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 15px;
    background: linear-gradient(#FF941A, #FF6006);
    border-radius: 32px;
    outline: none;
    border: none;
    cursor: pointer;
}
.register form button:hover{
    box-shadow: 2px 2px 2px rgb(168 166 166);
}
@media screen  and (max-width: 576px) {
    .reset_password form {
        width: 40% !important;
    }
    .verification form {
        width: 40% !important;
    }

    div.login-form-new,
    div.activating,
    div.reset_password,
    div.register {
        width: 100%;
        position: relative;
        bottom: 0;
        top: 0;
        left: 0;
        transform: none;
        height: 100vh;
    }
    div.register{
        height: auto;
    }
    div.download_app {
        display: none;
    }
    .login-form-new form,
    .register form {
        width: 100%;
        padding: 120px 20px 120px 20px;
    }
    span.color_orange {
        white-space: normal;
    }
    div.verification {
        width: 100%;
        position: relative;
        bottom: 0;
        top: 0;
        left: 0;
        transform: none;
        height: 100vh;
        padding: 120px 20px 120px 20px;
    }

    /* search_codes */
    section.search_codes {
        width: 100%!important;
        padding-left: 15px;
        padding-right: 15px;
    }
    /* end search_codes */

    /* popup_detail_codes */
    section.popup_detail_codes {
        width: 100%!important;
        padding: 15px!important;
    }
    section.popup_detail_codes div.tilte_head span.cancel {
        right: 0px;
    }
    section.search_codes div.list_codes ul li {
        font-size: 13px !important;
    }
    section.popup_detail_codes div.list>ul>li {
        flex-direction: column;
    }
    section.search_codes div.list_codes ul li span.detail {
        font-size: 13px !important;
        right: 0px !important;
    }
    /* end popup_detail_codes */

    section.recovery_code .recovery_code-content {
        width: 100%!important;
        padding: 15px!important;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    div.login-form-new,
    div.activating,
    div.reset_password,
    div.register {
        position: relative;
        flex-direction: column;
        width: 100%;
        top: 0;
        left: 0;
        transform: none;
    }
    .form_left_banner {
        display: none !important;
    }

    .form_verification {
        width: 78% !important;
    }
    div.download_app {
        width: 100%;
        height: 450px;
    }
    .login-form-new form,
    .activating form,
    .reset_password form,
    .register form {
        width: 100%;
    }

    /* search_codes */
    section.search_codes {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    /* end search_codes */

    /* div.verification {
        position: relative;
        flex-direction: column;
        width: 100%;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
    } */
}

@media screen and (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 1200px) {
    .container {
        max-width: 1300px;
    }
}

.border-red-input {
    border: 1px solid red !important;
    background: #ffe8e8;
}

.required {
    color: #ff6609;
}

.group_input .help-block.has-error {
    font-weight: 700;
    padding-left: 28px;
}

span.color_orange~span {
    color: #14142B;
    font-size: 14px;
    white-space: nowrap;
}

.modal-backdrop.grey {
    background-color: #000000 !important;
}

span.icon_right svg.bi-eye-slash {
    transform: rotateX(
            180deg
    );
}

div.forgot_password {
    position: fixed;
    width: 980px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    overflow: hidden;
}

.forgot_password form {
    padding: 120px 50px 120px 44px;
    width: 50%;
    background-color: #fff;
}

.forgot_password form .content_top {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.forgot_password form .content_top h3 {
    font-size: 28px;
    font-weight: 700;
    color: #14142B;
}

.forgot_password form .content_top div {
    font-size: 14px;
    color: #6E7191;
    font-weight: 600;
    width: 80%;
    margin: 0 auto;
}

.forgot_password form .group_input {
    margin-bottom: 18px;
}

.forgot_password form .group_input input {
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    width: 100%;
    padding: 14px 58px;
    outline: none;
    font-weight: 700;
    color: #14142B;
}

.forgot_password form .group_input span.errors {
    color: #FF3F3F;
    font-size: 14px;
    font-weight: 700;
    margin-left: 32px;
    display: none;
}

.forgot_password form .group_input span:nth-child(1) {
    left: 28px;
    top: 15px;
}

.forgot_password form .group_input span.icon_right {
    right: 28px;
    top: 15px;
    cursor: pointer;
    color: #A0A3BD;
    font-size: 20px;
}

.forgot_password form button {
    margin-top: 24px;
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 15px;
    background: linear-gradient(#FF941A, #FF6006);
    border-radius: 32px;
    outline: none;
    border: none;
    cursor: pointer;
}

form .group_input span.text_top {
    font-size: 14px;
    background-color: #fff;
    left: 32px;
    top: -11px;
    padding: 0 5px;
}

form .group_input input:focus {
    border: 1px solid #FF6609!important;
}

.float-right {
    float: right;
}

div.verification {
    width: 980px;
    border-radius: 16px;
    overflow: hidden;
    margin: 60px auto;
}

.verification form {
    padding: 77px 50px 77px 44px;
    width: 50%;
    background-color: #fff;
}

.verification form .content_top {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.verification form .content_top div:nth-child(1) {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
}

.verification form .content_top div:nth-child(2) {
    font-size: 28px;
    font-weight: 700;
    color: #FF6609;
    margin-bottom: 35px;
}

.verification form .group_input {
    margin-bottom: 8px;
}

.verification form .group_input input {
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    width: 100%;
    padding: 14px 58px;
    outline: none;
    font-weight: 700;
    color: #14142B;
}

.verification form .time_verification {
    margin-top: 24px;
    color: #14142B;
    font-size: 16px;
    font-weight: 600;
}

.verification form .send_again {
    margin-top: 17px;
    font-size: 16px;
    font-weight: 700;
}

.verification form .send_again span {
    color: #ff6609;
    cursor: pointer;
}

.verification form #codeverifys {
    margin-top: 24px;
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 15px;
    background: linear-gradient(#FF941A, #FF6006);
    border-radius: 32px;
    outline: none;
    border: none;
    cursor: pointer;
    display: block;
    text-align: center;
}

.verification form #codeverifys:hover{
    box-shadow: 2px 2px 2px rgb(168 166 166);
}

div.activating {
    position: fixed;
    width: 980px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    overflow: hidden;
}

.activating form {
    padding: 34px 50px 34px 44px;
    width: 50%;
    background-color: #fff;
}

.activating form .content_top {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.activating form .content_top div:nth-child(1) {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
}

.activating form div.line {
    height: 1px;
    background-color: #D9DBE9;
    margin-top: 21px;
    margin-bottom: 21px;
}

.activating form div.line span {
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 500;
    color: #14142B;
}

.activating form button {
    margin-top: 24px;
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 15px;
    background: linear-gradient(#FF941A, #FF6006);
    border-radius: 32px;
    outline: none;
    border: none;
    cursor: pointer;
}

.activating form button:last-child {
    margin-top: 0;
}

.style_btn {
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 15px;
    background: linear-gradient(#FF941A, #FF6006);
    border-radius: 32px;
    display: block;
    text-align: center;
}
.style_btn:hover {
    color: #fff;
}

/* ------------------------------------------ reset_password-------------------------------------------------*/
span.icon_right svg.bi-eye-slash {
    transform: rotateX(180deg);
}

.d-none {
    display: none;
}

div.reset_password {
    margin: 60px auto;
    width: 980px;
    border-radius: 16px;
    overflow: hidden;
}

.reset_password form {
    padding: 120px 50px 120px 44px;
    width: 50%;
    background-color: #fff;
}

.reset_password form .content_top {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.reset_password form .content_top h3 {
    font-size: 20px;
    font-weight: 700;
    color: #14142B;
}

.reset_password form .content_top div {
    font-size: 14px;
    color: #6E7191;
    font-weight: 600;
    width: 80%;
    margin: 0 auto;
}

.reset_password form .group_input {
    margin-bottom: 18px;
}

.reset_password form .group_input input {
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    width: 100%;
    padding: 14px 58px;
    outline: none;
    font-weight: 700;
    color: #14142B;
}

.reset_password form .group_input span.errors {
    color: #FF3F3F;
    font-size: 14px;
    font-weight: 700;
    margin-left: 32px;
    display: none;
}

.reset_password form .group_input span:nth-child(1) {
    left: 28px;
    top: 15px;
}

.reset_password form .group_input span.icon_right {
    right: 28px;
    top: 15px;
    cursor: pointer;
    color: #A0A3BD;
    font-size: 20px;
}

span.icon_right svg.bi-eye-slash {
    transform: rotateX(180deg);
}

.reset_password form button {
    margin-top: 24px;
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 15px;
    background: linear-gradient(#FF941A, #FF6006);
    border-radius: 32px;
    outline: none;
    border: none;
    cursor: pointer;
}


/* ------------------------------------------end reset_password-------------------------------------------------*/

/* -----------------------------------------------đặt lại mật khẩu -------------------------------------------------------------*/

section.change_password {
    position: relative;
}

section.change_password img {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
}

section.change_password .change_password-content {
    background: #FFFFFF;
    border-radius: 24px;
    width: 735px;
    position: relative;
    margin: 100px auto;
    padding: 99px 167px;
}

section.change_password .change_password-content .title {
    text-align: center;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 36px;
}

section.change_password .change_password-content form .group_input {
    position: relative;
    margin-bottom: 22px;
}

section.change_password .change_password-content form .group_input span.text_top {
    position: absolute;
    top: -11px;
    left: 23px;
    padding: 0 5px;
    background-color: #fff;
    font-weight: 500;
}

section.change_password .change_password-content form .group_input span.text_top::after {
    color: red;
    content: '*';
}

section.change_password .change_password-content form .group_input input {
    width: 100%;
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    outline: none;
    font-size: 15px;
    color: #4E4B66;
    font-weight: 500;
    padding: 16px 56px;
}

section.change_password .change_password-content form .group_input input:focus {
    border: 1px solid #FF6609;
}

section.change_password .change_password-content form .group_input span.icon-left {
    position: absolute;
    top: 14px;
    left: 18px;
}

section.change_password .change_password-content form .group_input span.icon-right {
    position: absolute;
    top: 10px;
    right: 18px;
    cursor: pointer;
    transform: rotateX(180deg);
}

section.change_password .change_password-content form button {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
    border-radius: 32px;
    background: linear-gradient(#FF941A, #FF6006);
    border: none;
    outline: none;
    padding: 19px;
}

section.change_password .change_password-content span.error {
    color: #FF3F3F;
    font-size: 14px;
    margin-left: 32px;
    margin-top: -15px;
    margin-bottom: 10px;
}
/* -----------------------------------------------end đặt lại mật khẩu -------------------------------------------------------------*/



section.activation_code {
    width: 598px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 53px;
}

section.activation_code form .activation_code-title {
    color: #14142B;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 24px;
}

section.activation_code form input {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #A0A3BD;
    border-radius: 8px;
    padding: 12px;
    outline: none;
    color: #14142B;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}

section.activation_code>form>input:focus::placeholder {
    color: transparent!important;
}

section.activation_code form input:focus {
    border: 1px solid #FF6609;
}

section.activation_code form input.error {
    background: #FFE1E1;
    border: 2px solid #FF3F3F;
}

section.activation_code form input.success {
    color: #00BA61;
    font-weight: 700;
}

section.activation_code {
    text-align: center;
}

section.activation_code .active-form {
    /* margin-bottom: 100px; */
}

section.activation_code form input::placeholder {
    text-align: center;
    font-size: 18px;
    color: #6E7191;
    font-weight: 500;
    text-transform: none!important;
}

section.activation_code form span.error {
    font-size: 14px;
    font-weight: 700;
    color: #FF3F3F;
    text-align: center;
    display: block;
    text-align: left;
    margin-top: 8px;
}

section.activation_code button {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(#FF941A, #FF6006);
    border: 0;
    color: #fff;
    text-transform: uppercase;
    border-radius: 50px;
    outline: none;
    padding: 17px 57px;
    margin-top: 41px;
    cursor: pointer;
}

section.activation_code div.text {
    color: #4E4B66;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
    margin-top: 100px;
}

section.activation_code div.hotline,
section.activation_code div.hotline>a {
    color: #FF3F3F;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

section.activation_code .list .title_success {
    font-size: 24px;
    font-weight: 700;
    color: #00BA61;
    text-transform: uppercase;
    margin-top: 20px;
}

section.activation_code .list img {
    margin-top: 36px;
}

section.activation_code .list span.color_orange {
    color: #FF6609;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 20px;
    display: block;
}

section.activation_code div.list ul>li {
    color: #14142B;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section.activation_code div.list ul>li:last-child,
section.activation_code div.list ul{
    margin-bottom: 0px;
}
section.activation_code div.list ul>li span {
    display: flex;
    align-items: center;
}

section.activation_code div.list ul>li span:nth-child(2) {
    color: #219653;
    font-weight: 500;
    padding: 4px 14px;
    background-color: rgba(36, 151, 86, 0.2);
    border-radius: 18px;
}

@media screen and (max-width: 576px) {
    /* activation_code */
    section.activation_code {
        width: 100%;
    }
    section.activation_code button {
        font-size: 16px;
    }
    section.activation_code .active-form {
        margin-bottom: 20px;
    }
    /*end activation_code */
    form#signupForm span.color_orange~span{
        white-space: unset;
    }
}


/* ---------------------------------------------end activation_code ----------------------------------------------*/

/* --------------------------------------------- search_codes ----------------------------------------------*/

section.search_codes {
    width: 800px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

section.search_codes form {
    position: relative;
    margin-top: 58px;
    margin-bottom: 24px;
}

section.search_codes form input {
    width: 100%;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 17px 22px;
    outline: none;
    border: none;
    font-size: 16px;
    color: #14142B;
    font-weight: 600;
}

section.search_codes form input:focus::placeholder {
    color: transparent;
}

section.search_codes form input::placeholder {
    font-size: 16px;
    color: #6E7191;
    font-size: 400;
}

section.search_codes form span {
    position: absolute;
    right: 17px;
    top: 15px;
    cursor: pointer;
}

section.search_codes div.list_codes {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px 30px;
}

section.search_codes div.list_codes ul {
    border-top: 0.75px solid #D9DBE9;
    padding-top: 24px;
}
section.search_codes div.list_codes ul:nth-child(1) {
    border-top: 0;
}
section.search_codes div.list_codes ul div {
    color: #6E7191;
    font-size: 16px;
}

section.search_codes div.list_codes ul div {
    color: #6E7191;
    font-size: 16px;
}

section.search_codes div.list_codes ul li {
    color: #14142B;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    position: relative;
    padding: 9px;
}

section.search_codes div.list_codes ul li span.code {
    color: #FF3F3F;
}

section.search_codes div.list_codes ul li span.detail {
    color: #2F80ED;
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    right: 17px;
    cursor: pointer;
}
/* ---------------------------------------------end search_codes ----------------------------------------------*/
/* --------------------------------------------- popup_detail_codes ----------------------------------------------*/
#modal-active-code-detail{
    background: rgba(0, 0, 0, 0.76);
}
section.popup_detail_codes {
    width: 700px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 25px 57px;
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid #ccc;
}

section.popup_detail_codes div.tilte_head {
    font-size: 16px;
    font-weight: 500;
    color: #14142B;
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 1px solid #D9DBE9;
}

section.popup_detail_codes div.tilte_head span {
    color: #FF3F3F;
    font-weight: 700;
    font-size: 20px;
}

section.popup_detail_codes div.tilte_head span.cancel {
    cursor: pointer;
    position: absolute;
    right: -50px;
    top: -20px;
}

section.popup_detail_codes div.list>ul>div {
    font-size: 16px;
    font-weight: 700;
    color: #FF6609;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 28px;
}

section.popup_detail_codes div.list>ul>li {
    color: #14142B;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

section.popup_detail_codes div.list>ul>li>span {
    display: flex;
    align-items: center;
}

section.popup_detail_codes div.list>ul>li>.duration {
    background: rgba(36, 151, 86, 0.2);
    border-radius: 18px;
    color: #219653;
    padding: 4px 14px;
}
/* ---------------------------------------------end popup_detail_codes ----------------------------------------------*/

/* -----------------------------------------------mã khôi phục -------------------------------------------------------------*/

section.recovery_code {
    width: 100%;
    height: 100vh;
}

section.recovery_code img {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
}

section.recovery_code .recovery_code-content {
    background: #FFFFFF;
    border-radius: 24px;
    width: 735px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 78px 134px;
}

section.recovery_code .recovery_code-content .title {
    text-align: center;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 9px;
}

section.recovery_code .recovery_code-content form {
    margin: auto 30px;
}

section.recovery_code .recovery_code-content form span.phone {
    color: #FF6609;
    display: block;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

section.recovery_code .recovery_code-content form input {
    border: 1px solid #A0A3BD;
    border-radius: 32px;
    width: 100%;
    padding: 8px;
    outline: none;
    font-size: 28px;
    font-weight: 700;
    color: #4E4B66;
    text-align: center;
    margin-top: 24px;
}

section.recovery_code .recovery_code-content form div.time {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 32px;
}

section.recovery_code .recovery_code-content form div.time>span {
    color: #ff3f3f;
}

section.recovery_code .recovery_code-content form a {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
    border-radius: 32px;
    background: linear-gradient(#FF941A, #FF6006);
    border: none;
    outline: none;
    padding: 19px;
    margin-bottom: 16px;
    display: block;
    text-align: center;
    cursor: pointer;
}

section.recovery_code .recovery_code-content form div.send_again {
    text-align: center;
    color: #14142B;
    font-size: 16px;
    font-weight: 700;
}

section.recovery_code .recovery_code-content form div.send_again>span {
    color: #FF6609;
    cursor: pointer;
}


/* -----------------------------------------------end mã khôi phục -------------------------------------------------------------*/

/* -----------------------------------------------popup -------------------------------------------------------------*/
#popup-active-course{
    padding-right: 0!important;
    background: #000000a6;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px white inset !important;
}
/* -----------------------------------------------end popup -------------------------------------------------------------*/