@font-face {
    font-family: Averta-Bold;
    src: url(../fonts/Averta/Averta-Bold.ttf);
}

#part2 {
    margin-bottom: 30px;
}

#part2 .cover_img {
    position: relative;
    z-index: 7;
    height: 100%;
    width: 100%;
}

/*// hover video*/

/*button */

#part2 .hover_play_video {
    opacity: 0;
    position: absolute;
    z-index: 4;
    background: linear-gradient(-170deg, rgba(19, 22, 70, 0.55), rgba(81, 136, 241, 0.8));
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-border-radius: 4px 6px !important;
    -moz-border-radius: 4px 6px !important;
    -o-border-radius: 4px 6px !important;
    border-radius: 4px 6px !important;
}
#part2 .hover_play_video .play_icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
    width: 64px;
    height: 64px;
    background-image: url('../img/imgs-part2/elightube_icons.png');
    background-size: 945px;
    background-position: -44px -1661px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#part2 #video-newest {
    cursor: pointer;
}
#part2 .video_card:hover .hover_play_video,
#part2 #video_details_1:hover .hover_play_video,
#part2 #video_details_2:hover .hover_play_video,
#part2 #video_details_3:hover .hover_play_video,
#part2 #video_details_4:hover .hover_play_video,
#part2 #video_details_5:hover .hover_play_video,
#part2 #video_details_6:hover .hover_play_video,
#part2 #video_details_7:hover .hover_play_video,
#part2 #video_details_8:hover .hover_play_video,
#part2 #video_details_9:hover .hover_play_video,
#part2 #video_details_10:hover .hover_play_video,
#part2 .hover_play_video:hover .play_icon {
    opacity: 1;
}

/*video mobile*/

#part2 .hover_play_video_mobile {
    opacity: 0;
    position: absolute;
    z-index: 4;
    background: linear-gradient(-170deg, rgba(19, 22, 70, 0.99), rgba(81, 136, 241, 0.8));
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-border-radius: 4px 6px !important;
    -moz-border-radius: 4px 6px !important;
    -o-border-radius: 4px 6px !important;
    border-radius: 4px 6px !important;
}
#part2 .hover_play_video_mobile .play_icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
    width: 64px;
    height: 64px;
    background-image: url('../img/imgs-part2/elightube_icons.png');
    background-size: 945px;
    background-position: -44px -1661px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/**/
#part2 .hover_button {
    cursor: pointer;
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-border-radius: 4px 6px !important;
    -moz-border-radius: 4px 6px !important;
    -o-border-radius: 4px 6px !important;
    border-radius: 4px 6px !important;
    color: white;
    font-weight: 700;
    text-align: center;
    padding-top: 21px;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
}
#part2 .category-music .hover_button{
    background: linear-gradient(-170deg, #ff000061, #ff000061);
}

#part2 .category-movie .hover_button{
    background: linear-gradient(-170deg, rgba(0,188,212,0.67), rgba(0,188,212,0.67));
}
#part2 .category-relax .hover_button{
    background: linear-gradient(-170deg, rgba(139,195,74,0.75), rgba(139,195,74,0.75));
}

#part2 .category-others .hover_button{
    text-decoration: underline;
    background: linear-gradient(-170deg, rgba(255,152,0,0.72), rgba(255,152,0,0.72));
}

#part2 .category-music:hover .hover_button{
    background: linear-gradient(-170deg, #ff000061, #ff000094);
}

#part2 .category-movie:hover .hover_button{
    background: linear-gradient(-170deg, rgba(0,188,212,0.67), rgba(0,188,212,0.88));
}
#part2 .category-relax:hover .hover_button{
    background: linear-gradient(-170deg, rgba(139,195,74,0.75), rgba(139,195,74,0.88));
}

#part2 .category-others:hover .hover_button{
    text-decoration: underline;
    background: linear-gradient(-170deg, rgba(255,152,0,0.72), rgba(255,152,0,0.88));
}

#part2 .total-categories>div {
    height: 60px;
    margin-bottom: 15px;
}
#part2 .total-categories a {
    position: absolute;
    height: 60px;
    overflow: hidden;
    border-radius: 4px 6px;
}

#part2 .total-categories img {
    width: 100%;
}
#part2 .box_description {
    padding: 0 15px;
}
#part2 .list-video-web {
    padding-right: 0px;
}
#part2 .video_card {
    background: white;
    min-height: 362px;
}
#part2-section4 {
    display: block;
    background-color: rgba(255,138,128,1);
}
#part2-section5 {
    display: block;
    background-color: rgba(255,234,234,1);
}
#part2 #part2-section4 {
    padding-bottom: 20px;
}
#part2 #part2-section5 {
    margin-bottom: 15px;
    padding-bottom: 40px;
}

#part2 #scroll-videos{
    max-height: 352px;
    margin-bottom: 10px;
    overflow-y:scroll;
    background: white;
}

/* width */
#part2 #scroll-videos::-webkit-scrollbar,
#part2 #scroll-videos-mobile-ss4::-webkit-scrollbar {
    width: 10px;
}

/* Track */
/*#scroll-videos::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 7px;
}*/

/* Handle */
#part2 #scroll-videos::-webkit-scrollbar-thumb,
#part2 #scroll-videos-mobile-ss4::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 7px;
}

/* Handle on hover */
#part2 #scroll-videos::-webkit-scrollbar-thumb:hover,
#part2 #scroll-videos-mobile-ss4::-webkit-scrollbar-thumb:hover {
    background: #b9b8b8;
}

#part2 #scroll-newest,
#part2 #scroll-newest-view {
    max-height: 419px;
    margin-bottom: 10px;
    overflow-y:scroll;
    border-radius: 0px 0px 6px 6px;
    background: white;
    padding: 10px;
}

/* width */
#part2 #scroll-newest::-webkit-scrollbar,
#part2 #scroll-newest-view::-webkit-scrollbar {
    width: 10px;
}

/* Track */
/*#scroll-videos::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 7px;
}*/

/* Handle */
#part2 #scroll-newest::-webkit-scrollbar-thumb,
#part2 #scroll-newest-view::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 7px;
}

/* Handle on hover */
#part2 #scroll-newest::-webkit-scrollbar-thumb:hover,
#part2 #scroll-newest-view::-webkit-scrollbar-thumb:hover {
    background: #b9b8b8;
}
#part2 .ten_video_newest {
    float: left;
    width: 100%;
    /*background: white;*/
    margin-bottom: 5px;
    cursor: pointer;
}
#part2 .ten_video_newest:hover,
#part2 .news_left:hover {
    cursor: pointer;
    background: #8080801a;
}
#part2 .img-video-newest {
    float: left;
    width: 50%;
    position: relative;
}
#part2 .img-video-newest img {
    width: 100%;
}

#part2 .img-post-newest {
    float: left;
    width: 40%;
}
#part2 .img-post-newest img {
    width: 100%;
}
#part2 .description-post-newest {
    float: left;
    width: 60%;
    padding-left: 10px;
}

#part2 .description-video-newest {
    text-align: justify;
    float: left;
    width: 50%;
    padding: 0 25px 0px 15px;
}
#part2 .description-video-newest .title-video {
    font-size: 13px;
    color: rgba(0,0,0,1);
    font-weight: 700;
    line-height: 19px;
}
#part2 .description-video-newest .watching_times {
    margin-top: 10px;
}
#part2 .see-more-elight {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 15px;
}
#part2 .see-more-elight a {
    font-size: 17px;
    text-decoration: underline;
}
#part2 .watching_times .fa-headphones {
    margin-right: 5px;
    width: 10%;
}
#part2 .watching_times .fa-clock {
    margin-left: 10px;
    /*margin-right: 5px;*/
}
#part2 .part2-header-ss4,
#part2 .part2-header-ss6 {
    text-align: center;
    margin-bottom: 30px;
}
#part2 .part2-header-ss5 {
    color: white;
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
}
#part2 .part2-header-ss4 h3,
#part2 .part2-header-ss6 h3,
#part2 .part2-header-ss5 h3 {
    margin-bottom: 15px;
    margin-top: 30px;
    font-size: 30px;
    font-family: Averta-Bold;
    font-size: 25px;
    /*font-weight: 600;*/
}
#part2 .part2-header-ss4 p,
#part2 .part2-header-ss6 p,
#part2 .part2-header-ss5 p {
    font-size: 24px;
    font-family: Averta-Bold;
}

#part2 .part2-body-ss5 {
    text-align: center;
}
#part2 .part2-body-ss5 img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 15px;
}
#part2 .part2-body-ss5 b {
    font-size: 15px;
}
#part2 .part2-body-ss5 p {
    margin-top: 10px;
    font-size: 14px;
}
#part2 .btn-install-extension {
    background-color: rgba(255,193,7,1);
    color: rgba(255,255,255,1);
    margin-top: 15px;
    margin-bottom: 25px;
    line-height: 22px;
    box-shadow: 2px 2px 10px rgba(158,158,158,1);
    width: 267px;
    height: 40px;
    border-radius: 40px;
    line-height: 22px;
    font-size: 16px;
    text-align: center;
}
#part2 .btn-install-extension:hover {
    background-color: #fdbe00e3 !important;
}
#part2 .title-newest {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 15px;
}
#part2 .seemore-content-newest {
    font-size: 14px;
}
#part2 .seemore-post-newest {
    text-align: center;
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 10px;
    text-decoration: underline;
}
#part2 .news_left {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
#part2 .post-newest {
    margin-left: 30px;
    color: white;
    line-height: 23px;
    font-size: 16px;
    text-align: left;
}
#part2 .icon-left {
    width: 12px;
    height: 43px;
    position: absolute;
    background: rgb(63, 81, 181);
    top: 0px;
}
#part2 .title-ss6 {
    background-color: rgb(255, 117, 124);
    color: rgba(0,0,0,1);
    padding: 10px 0px;
    border-radius: 0 30px 0 0;
}
#part2 .wrap-detail-ss6 {
    /*padding-right: 0px;*/
}
#part2 .row-body-ss6 {
    margin-bottom: 30px;
}
#part2 .btn-tag {
    border-radius: 6px;
    color: white;
    box-shadow: 2px 2px 4px rgba(0,0,0,1);
    width: 90%;
    font-weight: 700;
    font-size: 13px;
    padding: 11px 0px;
    position: absolute;
    top: 0;
    left: 9px;
}
#part2 .btn-tag-grammar {
    background-color: rgba(213,0,0,1);
}
#part2 .btn-tag-vocal {
    background-color: rgba(255,152,0,1);
}
#part2 .btn-tag-sat {
    background-color: rgba(46,125,50,1);
}
#part2 .btn-tag-toeic {
    background-color: rgba(26,35,126,1);
}
#part2 .btn-tag-grammar:hover,
#part2 .btn-tag-vocal:hover,
#part2 .btn-tag-sat:hover,
#part2 .btn-tag-toeic:hover {
    opacity: 0.7;
}
#part2 .tag-btn-details {
    /*padding: 0px 25px;*/
    margin-bottom: 15px;
    height: 35px;
}
#part2 .wrap-list-video {
    /*padding-right: 0px;*/
}
@media (min-width: 1200px) {
    #part2  .container {
        width: 960px;
    }
}
@media (min-width: 768px) {
    .line-footer {
        width: 116%;
    }
}
#custom-bg-video {
    margin-bottom: 15px;
    background: white;
    padding: 15px 15px 5px 10px;
    border-radius: 5px;
}
.see-more-video {
    background: #80808040;
    padding: 5px;
    text-align: center;
    text-decoration: underline;
    color: #2066b2;
}
@media (max-width: 768px) {
    .ss2-li1,
    .ss2-li2,
    .ss2-li3 {
        margin-bottom: 80px;
    }
    #part2 #scroll-newest, #part2 #scroll-newest-view {
        margin-bottom: 20px;
    }
    #part2 .part2-header-ss4 h3, #part2 .part2-header-ss6 h3, #part2 .part2-header-ss5 h3 {
        margin-top: 15px;
    }
    #section_3 {
        padding-top: 20px;
    }
    #section_2 .carousel-inner {
        padding-top: 70px;
    }
    #part2-section4>.container {
        padding: 15px !important;
    }
    #custom-bg-video {
        margin: 15px 5px;
    }
    .line-footer {
        width: 100%;
    }
    #section_3, #section_2 {
        /*margin-bottom: 30px !important;*/
    }

    #section_2 ul li .video_card {
        margin: 0 auto !important;
    }
    .title-col-footer {
        font-size: 12px !important;
    }
    #section-exam {
        padding: 115px 20px 30px 20px;
    }
    #section-exam .container {
        padding: 40px 20px !important;
    }
    #section-exam h3 {
        margin-bottom: 20px;
    }

    .form-p {
        min-height: 10px;
    }

    #scroll-videos-mobile-ss4 .img-video-newest {
        float: left;
        width: 100%;
        position: relative;
    }

    #part2 .btn-tag {
        font-size: 13px;
    }
    #part2 .total-categories>div {
        width: 48%;
    }

    #part2 .part2-header-ss4 h3,
    #part2  .part2-header-ss6 h3,
    #part2 .part2-header-ss5 h3 {
        font-size: 19px;
    }

    .part2-body-ss4>.row {
        margin-bottom: 15px;
        background: white;
        padding: 15px;
        border-radius: 5px;
    }

    #part2-section4 .part2-body-ss4 .img-video-newest img {
        border-radius: 16px;
    }

    #part2  .wrap-list-video {
        padding: 0px 10px 0 20px;
    }

    #part2 .box_description h3 {
        font-size: 19px
    }

    #part2  #scroll-newest,
    #part2  #scroll-newest-view {
        max-height: 300px;
    }
    #part2 .title-newest {
        font-size: 15px;
    }
    #part2  .wrap-detail-ss6 {
        padding: 0 15px 0 15px;
    }
    #part2  .total-categories a {
        height: 50px;
    }
    #part2 .hover_button {
        padding-top: 8px;
    }
    #part2  .video_card {
        min-height: 325px;
    }

    #part2  #scroll-videos-mobile-ss4 .ten_video_newest{
        float: left;
        width: 100%;
    }
    #part2  #scroll-videos-mobile-ss4 .img-video-newest{
        float: left;
        width: 40%;
    }
    #part2  #scroll-videos-mobile-ss4 .description-video-newest{
        float: left;
        width: 60%;
    }
    #part2  #scroll-videos-mobile-ss4 {
        max-height: 230px;
        margin-bottom: 10px;
        overflow-y:scroll;
        margin-top: 20px;
    }
    #part2  #scroll-videos-mobile-ss4 p.watching_times {
        font-size: 9px;
        position: relative;
        top: -15px;
        left: 8px;
        color: white;
        z-index: 5;
    }
    #part2 .hover_play_video {
        opacity: 1;
    }
    #part2  .hover_play_video_mobile {
        opacity: 1;
        position: absolute;
        z-index: 4;
        background: linear-gradient(-170deg, rgba(19, 22, 70, 0.31), rgba(39, 83, 169, 0.83));
        width: 105%;
        height: 73%;
        /*margin-left: 5px;*/
        top: 0;
        left: 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-border-radius: 4px 6px !important;
        -moz-border-radius: 4px 6px !important;
        -o-border-radius: 4px 6px !important;
        border-radius: 4px 6px !important;
        cursor: pointer;
    }
    #part2  .hover_play_video_mobile .play_icon {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -32px;
        margin-top: -32px;
        width: 61px;
        height: 55px;
        background-image: url(../img/imgs-part2/elightube_icons.png);
        background-size: 401px;
        background-position: 5px -1631px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #part2  .carousel-control .fa-angle-left,
    #part2  .carousel-control .fa-angle-right,
    #part2 .carousel-control .icon-next,
    #part2 .carousel-control .icon-prev {
        font-size: 35px;
        position: absolute;
        top: 10px;
    }
    #part2 .carousel-inner img {
        /*width: 100% !important;*/
    }
    .custom-icon-email,
    .custom-icon-phone {
        width: 13px !important;
    }
    .custom-icon-clock {
        width: 15px !important;
    }
}

#part2 .total-tags {
    padding: 0 15px;
}

/* Slide - override position and transform in 3.3.x */
#part2 .carousel-inner img {
    width: 105%;
}

#part2 .carousel-inner .item.left.active {
    transform: translateX(-33%);
}
#part2 .carousel-inner .item.right.active {
    transform: translateX(33%);
}

#part2 .carousel-inner .item.next {
    transform: translateX(33%)
}
#part2 .carousel-inner .item.prev {
    transform: translateX(-33%)
}

#part2 .carousel-inner .item.right,
#part2 .carousel-inner .item.left {
    transform: translateX(0);
}

#part2 .col-xs-12-carousel {
    padding: 0px;
}
#part2 .carousel-inner .col-xs-4 {
    padding: 0 5px;
}

#part2 .carousel-control.left,
#part2 .carousel-control.right {
    background-image:none;
}

#part2 .final-slide {
    /*background: #cccccc;*/
    text-align: center;
    padding-bottom: 0px;
}
#part2 .final-slide a {
    text-decoration: underline;
    margin-top: 10px;
}

#part2 img {
    border-radius: 4px 6px;
}
#part2 button {
    border-radius: 35px 40px;
}
#part2 .video-newest-first img {
    width: 4%;
    position: relative;
    top: -2px;
}

.line-footer {
    border-top-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-style: solid;
    border-color: rgba(217,217,217,1);
    margin-bottom: 2px;
    margin-top: 10px;
    position: relative;
    padding-bottom: 5px;
}

.title-col-footer {
    color: rgba(89,89,89,1);
    font-size: 14px;
    margin-bottom: 2px;
    font-weight: 700;
    padding-bottom: 5px;
}

.title-col-footer2 {
    color: rgba(89,89,89,1);
    font-size: 14px;
    margin-bottom: 2px;
    font-weight: 700;
    margin-top: 20px;
}

.footer-1 .col-md-3.col-sm-3.col-xs-6 {
    min-height: 140px;
}

#part2 .container {
    padding-top: 30px;
}

footer .fa-facebook-square,
footer .fa-youtube {
    color: #a3a3a3;
    font-size: 27px;
}
footer .fa-facebook-square:hover {
    color: #4575a3;
}
footer .fa-youtube:hover {
    color: #a34733;
}
footer a {
    color: #595959;
}

.custom-icon-phone {
    width: 13px !important;
    margin-right: 5px;
    position: relative;
    top: -2px;
}

.custom-icon-email {
    width: 18px !important;
    margin-right: 5px;
    position: relative;
    top: -2px;
}

.custom-icon-clock {
    margin-left: 10px;
    width: 15px !important;
    margin-right: 5px;
    position: relative;
    top: -2px;
}

.custom-icon-next,
.custom-icon-previous {
    width: 18px;
    position: relative;
    top: 10px;
    background: #ffffff8a;
}

#section_3 .video_card .see_more a:hover {
    background-color: #ffcb08a8 !important;
}

#part2-section4>.container {
    padding: 30px 20px 0 10px !important;
}

footer {
    padding-top: 10px;
}

.login-nav,
.enter-code-nav,
.buy-code-nav,
.register-nav {
    border-radius: 4px 6px;
    margin-right: 10px;
    margin-top: 7px;
}

.enter-code-nav:hover,
.buy-code-nav:hover,
.register-nav:hover,
.login-nav:hover {
    opacity: 0.7;
}

.see-feedback-nav {
    border-radius: 50%;
    background-color: #FFCB08;
    padding: 10px;
    height: 40px;
    width: 40px;
    margin-top: 3px;
    margin-right: 10px;
    cursor: pointer;
}

.see-feedback-nav i {
    color: white !important;
    position: absolute;
    top: 10px !important;
    left: 10px !important;
    font-size: 20px;
}
.see-feedback-nav:hover {
    background: rgba(255, 201, 0, 0.51);
}
.icon-user-login {
    position: absolute;
    top: 7px;
    left: 5px;
}
.navbar-fixed-top li:hover {
    cursor: pointer;
}

#section-napmathe {
    padding-top: 115px;
    background-color: rgba(86, 204, 242, 0.55);
}
#section-exam {
    padding-top: 115px;
    background-color: rgba(86, 204, 242, 0.55);
    height: 100%;
    position: absolute;
    width: 100%;
}
#section-exam .container {
    background-color: white;
    padding: 40px 120px;
    height: 80%;
}

.form-btn-exam {
    float: left;
    width: 100%;
    margin-top: 20px;
}
.form-p {
    min-height: 50px;
}

.button-ask-test-exam {
    padding: 10px 12px;
    color: white;
    width: 50%;
}
.button-ask-test-exam:hover {
    opacity: 0.7;
    color: white;
}

.ask-test-exam {
    text-align: center;
}
.ask-test-exam h3 {
    margin-bottom: 30px;
}

#section_1 .img-ss1-left {
    opacity: 0;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;

    animation-delay: 1s;
}

@keyframes bounceIn{
    0%{
        opacity: 0;
        transform: scale(0.3) translate3d(0,0,0);
    }
    50%{
        opacity: 0.9;
        transform: scale(1.1);
    }
    80%{
        opacity: 1;
        transform: scale(0.89);
    }
    100%{
        opacity: 1;
        transform: scale(1) translate3d(0,0,0);
    }
}

#map {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 260px;
    border: 1px solid #d4d4d4;
}
#map>div {
    zoom: 70%;
}