@charset "UTF-8";

body {
    font-family: 'Prompt', Roboto;
    font-weight: inherit;
    letter-spacing: 1px;
    animation: fade-in 1s, bg-move 15s linear infinite;
    -webkit-animation: fade-in 1s, bg-move 15s linear infinite;
    background-color: #ffffff;
    background-image: url(https://www.transparenttextures.com/patterns/absurdity.png);
}

::-moz-selection {
    background: rgba(0, 0, 0, 0.2);
}

::selection {
    background: rgba(0, 0, 0, 0.2);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }
}

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

.clear {
    clear: both;
    display: block;
    width: 100%;
    font-weight: 400;
}

.container-fluid {
    width: 90%;
}

ul {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

li {
    padding: 0;
    margin: 0;
    list-style: none;
}

img {
    width: 100%;
    height: auto;
}

.img-fluid {
    width: 100%;
    height: auto;
}

.align-center {
    text-align: center;
}

.text-pink {
    color: #f54174;
}

.ImgRelative {
    position: relative
}

.TextAbsolute {
    position: absolute;
}

.background_absurdity_skew {
    position: relative;
    background-color: #ffffff;
    background-image: url("https://www.transparenttextures.com/patterns/absurdity.png");
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.background_absurdity_skew:after {
    content: " ";
    width: 100%;
    height: 80px;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
    background-image: url(https://www.transparenttextures.com/patterns/absurdity.png);
    transform-origin: bottom right;
    transform: skew(0deg, -2deg);
}

.introFixed_abstract_white {
    background: url(../images/background-abstract-white.jpg);
    background-position: left bottom;
    background-size: cover;
}

.introFixed_abstract_white_left {
    background: url(../images/background-abstract-white-left.jpg);
    background-position: left bottom;
    background-size: cover;
}

.introFixed_abstract_pink {
    background-image: url(../images/background-abstract-pink.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-position: right top;
    background-attachment: fixed;
    /*	min-height: 350px;*/
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    display: table;
    padding: 30px 0;
    margin: 50px 0;
}

.abstract_pink_before {
    position: relative;
}

.abstract_pink_before:before {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
    top: 0;
    left: 0;
    z-index: 1;
    background: #fff;
    transform-origin: bottom left;
    transform: skew(0deg, -1deg);
}

.abstract_pink_before:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
    bottom: -30px;
    left: 0;
    z-index: 1;
    background: #fff;
    transform-origin: bottom left;
    transform: skew(0deg, -1deg);
}


.bg-gray {
    background: #ebebeb;
}

/* ===== NAVBAR SECTION ===== */

.navbar-brand {
    width: 25%;
    padding: 0;
    margin: 0;
}

.navbar-brand img {
    width: 100%;
    height: auto;
}

.nav-menu {
    background: transparent;
    position: absolute;
    width: 100%;
    padding: 5px 5%;
    z-index: 1;
    transition: all .7s;
}

.navbar-expand-lg .navbar-nav {
    margin-top: 45px;
}

.navbar-expand-lg.costum-navbar .navbar-nav {
    margin-top: 20px;
}

.navbar-expand-lg.costum-navbar .navbar-collapse {
    padding-right: 50px;
}

.costum-navbar .menuTop {
    display: none;
}

.costum-navbar .itemShow {
    display: block;
}

.nav-right {
    float: right;
    display: flex;
}

.fancybox-content {
    width: 50%;
    padding: 40px !important;
}

.formLoginRegis {
    width: 100%;
    font-size: 14px;
    letter-spacing: 1px;
}

.formLoginRegis .borderR {
    border-right: 2px solid #ebebeb;
}
.formLoginRegis h4{
    text-align: center;
}
.formLoginRegis h5 {
    margin: 15px 0;
    font-weight: 500;
    letter-spacing: 0;
    color: #f54174;
}

.formLoginRegis form{
    padding: 0 30px;
}

.formLoginRegis .form-control {
    margin: 15px 0;
    font-size: 14px;
}

.formLoginRegis .checkbox {
    width: 100%;
    color: #252525;
    font-size: 12px;
    margin-bottom: 15px;
}

.formLoginRegis .checkbox span a {
    float: right;
    color: #252525;
}

.formLoginRegis .btn-primary {
    color: #fff;
    background-color: #f54174;
    border-color: #f54174;
}

.formLoginRegis .or {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.formLoginRegis .or::before {
    content: '';
    width: 40%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 10px;
    background: #ccc;
}

.formLoginRegis .or::after {
    content: '';
    width: 40%;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: 10px;
    background: #ccc;
}

.social-login a {
    display: block;
    text-align: center;
    padding: 10px;
    color: #fff;
    margin-bottom: 20px;
    background-color: #49639F;
    text-decoration: none;
}
.social-login a.google{
     background-color: #db4437;
}

.linkRegister {
    margin-top: 40px;
    padding-top: 15px;
    text-align: center;
    border-top: 1px solid #ccc;
}

.linkRegister a {
    display: inline-block;
    color: #f54174;
    font-weight: 500;
    padding: 8px 30px;
    border: 1px solid #f54174;
}

.col_regis .form-control {
    margin-bottom: 5px;
}

.menuTop {
    width: 100%;
    background: #f54174;
    /*	display: inline-block;*/
    padding: 5px 10px;
}

.menuTop .nav-menutop .menu-item {
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
}

.nav-menutop {
    display: inline-block;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.nav-menutop li {
    float: left;
    text-transform: uppercase;
}

.nav-menutop li a {
    padding: 0 10px;
}

.social {
    float: left;
    display: inline-block;

}

.social li {
    float: left;
    margin: 0 5px;
}

.social li a {
    color: #fff;
    padding: 0 5px;
}

.language {
    display: block;
    margin: 0 10px;
}

.language ul li a {
    color: #363636;
    padding: 2px 15px;
    display: block;
    font-size: 14px;
}

.language ul li a:hover {
    background: #ededed;
    color: #363636;
    text-decoration: none;
}

.language a {
    color: #fff;
}

.language.dropdown {
    position: relative;
    display: inline-block;
    float: right;
    font-size: 14px;
    line-height: 26px;
}

.language .dropdown-menu {
    min-width: inherit;
    top: 5px !important;
    left: -10px !important;
    border-radius: 0;
}

.boxsearch {
    margin-left: 10px;
    border-left: 1px solid #fff;
    font-size: 14px;
}

.boxsearch .fa-close {
    color: #fff;
}

.boxsearch a {
    color: #fff;
    padding: 5px 10px;
    text-decoration: none;
}

.search {
    height: 50px;
    display: none;
}

.search .form-control {
    height: 50px;
    border-radius: 0;
    border: none;
    background: #fafafa;
}

.nav-item {
    margin: 0 8px;
    position: relative;
}

.menu-item {
    font-family: 'Prompt', Roboto;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
}

.itemShow {
    display: none;
}


.costum-navbar {
    margin-top: 0;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.7) !important;
    position: fixed;
    top: 0;
    z-index: 2;
}

.costum-navbar .navbar-brand img {
    width: 70%;
}


.navbar-toggler {
    cursor: pointer;
    outline: 0;
}

.ham {
    transition: width 0.3s;
    background: #252525;
}

.line1,
.line2,
.line3 {
    width: 28px;
    height: 2px;
    margin: 6px;
    transition: 0.4s;

}

.change .line1 {
    transform: rotate(-45deg) translate(-3px, 2px);
}

.change .line2 {
    display: none;
}

.change .line3 {
    transform: rotate(45deg) translate(-3px, -2px);
}

.menu-item:hover {
    color: #f54174;
    text-decoration: none;
}

.nav-item.active .nav-link {
    color: #f54174;
}

.menu-item.br-none::after {
    background-color: transparent;
}

.nav-item.active .nav-link .dropdown-content a {
    background: 005aff;
}

.dropdown-item {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.dropbtn {
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    border-top: 5px solid #f54174;
    background-color: #f9f9f9;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #252525;
    padding: 8px 10px;
    font-size: 12px;
    text-decoration: none;
    display: block;
    font-weight: 100;
    letter-spacing: 1px;
}

.dropdown-content a:hover {
    background-color: #ffd4e0;
    color: #f54174;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: #f54174;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    width: 100%;
    top: 0;
    left: 100%;
    /*	margin-top: -6px;*/
    margin-left: -1px;
    padding: 0;
    border-radius: 0;
}

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

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

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

.LastDorp .dropdown-content {
    right: 0;
}

.LastDorp .dropdown-submenu > .dropdown-menu {
    left: inherit;
    right: 100%;
}

/* ===== END OF NAVBAR SECTION ===== */

.topslide .carousel-indicators li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: none;
    border: 2px solid #fff;
}

.topslide .carousel-indicators .active {
    background: #fff;
}

.topslide .carousel-caption {
    bottom: 40%;
}

.topslide .carousel-caption h1 {
    font-size: 46px;
    letter-spacing: 2px;
}

.topslide .carousel-caption h5 {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.content_know_us {
    padding: 50px 0;
}


.content_know_us h3 {
    margin: 20px 0;
}

.content_know_us h3 span {
    color: #f54174;
    text-transform: uppercase;
}

.know_us_vdo video {
    width: 100%;
    height: auto;
    padding: 5px;
}

.step_know {
    margin-top: 30px;
}

.step_know .box-step {
    font-size: 14px;
    padding: 14px;
}

.step_know .box-step h5 {
    color: #f54174;
    margin: 15px 0;
    font-size: 16px;
}

.step_know .box-step img {
    width: 40%;
}

.introFixed_abstract {
    background-image: url(../images/background-abstract-black.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-position: right top;
    background-attachment: fixed;
    /*	min-height: 350px;*/
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    display: table;
    z-index: 1;
}

.short-course {
    width: 100%;
    padding: 30px 0 80px;
}

.text_head {
    width: 100%;
    color: #fff;
    padding: 0 15px;
}

.text_head h3 {
    color: #f54174;
    text-transform: uppercase;
}

.text_head h3 span {
    color: #fff;
    font-size: 16px;
}

.spanright h3 span a {
    color: #898989;
    float: right;
    margin-top: 15px;
}

.spanright h3 span a:hover {
    color: #f54174;
    text-decoration: none;
}

.box_course {
    margin: 20px 0 40px;
}

.box_course a {
    color: #363636;
}

.box_course a:hover {
    color: #363636;
    text-decoration: none;
}

.box_course a .cover_course img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.box_course a:hover .cover_course img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.cover_course {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.cover_course img {
    width: 100%;
    height: auto;
}

.description_course {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 10px 10px 20px;
    background: #fff;
    border-top: 5px solid #f54174;
    font-size: 14px;
}

.description_course .price_course {
    margin-bottom: 5px;
}

.description_course .price_course span {
    color: #f54174;
    font-size: 16px;
    font-weight: 500;
}

.description_course .topic_course {
    margin-bottom: 5px;
}

.description_course .topic_course span {
    color: #f54174;
    font-size: 16px;
    font-weight: 500;
}

.description_course .sub_title {
    overflow: hidden;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.description_course h4 {
    font-size: 18px;
    text-transform: uppercase;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.box_course .more-course {
    width: auto;
    position: absolute;
    left: 30%;
    bottom: 25px;
    background: #f54174;
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    border-radius: 20px;
}

.box_course .more-course:hover {
    background: #ffd4e0;
    color: #f54174;
    text-decoration: none;
}

.all_ppage {
    width: 100%;
    text-align: center;
    margin: 30px 0;
}

.allCourse {
    padding: 8px 20px;
    border: 1px solid #fff;
    color: #fff;
    display: inline-block;
}

.allCourse:hover {
    color: #f54174;
    border: 1px solid #f54174;
    text-decoration: none;
}

.degree-course {
    position: relative;
    padding-top: 70px;
    padding-bottom: 50px;
}

.degree-course:before {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
    background-image: url(https://www.transparenttextures.com/patterns/absurdity.png);
    transform-origin: bottom left;
    transform: skew(0deg, -2deg);
}

.degree-course:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 80px;
    bottom: -70px;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
    background-image: url(https://www.transparenttextures.com/patterns/absurdity.png);
    transform-origin: bottom right;
    transform: skew(0deg, 2deg);
}

.introFixed_abstract_gray {
    background-image: url(../images/background-abstract-gray.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-position: right top;
    background-attachment: fixed;
    /*	min-height: 350px;*/
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    display: table;
}

.videoWrapper {
    position: absolute;
    top: -40%;
    padding-bottom: 56.25%;
    /* padding-top: 25px; */
    width: 100%;
    height: auto;
    background: #000;
    z-index: -2;
}

.videoWrapper video {
    /*
	position: fixed;
	top: 0;
	left: 0;
*/
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.6;
}

.VDOFixd {
    width: 100%;
    height: 600px;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    display: block;
    position: relative;
}

.VDOFixd h3 {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30%;
    left: 0;
    z-index: 5;
    display: block;
    color: #fff;
    font-size: 40px;
    line-height: 26px;
    text-transform: uppercase;
}

.VDOFixd h3 span {
    color: #fff;
    font-size: 18px;
    text-transform: none;
}

.Info_News {
    padding: 30px 0;
}

.Info_News h3 {
    width: 100%;
    margin: 20px 20px 50px;
    color: #fff;
    position: relative;
}

.Info_News h3::after {
    content: '';
    width: 10%;
    height: 5px;
    background: #f54174;
    position: absolute;
    bottom: -20px;
    left: 0;
}

.Latest_news {
    margin: 15px 0;
}

.Latest_news p {
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.Latest_news a {
    color: #fff;
}

.Latest_news a:hover {
    text-decoration: none;
}

.Latest_news h4 {
    margin-top: 15px;
    color: #f54174;
    font-size: 18px;
    line-height: 26px;
}

.nameCourse {
    color: #fff;
    bottom: 10%;
    left: 5%;
}

.nameCourse h2 {
    font-weight: 500;
    text-transform: uppercase;
    color: #f54174;
    font-size: 3rem;
    letter-spacing: 2px;
}

.nameCourse h5 {
    font-size: 1rem;
    font-weight: 300;
}

.nameCourse .average-rating {
    width: 40%;
}

.nameCourse .average-rating h4 {
    float: right;
    font-size: 20px;
}

.breadcrumbHeader .breadcrumb {
    background-color: transparent;
    padding: 20px 0;
    margin: 0;
    font-size: 14px;
    margin-bottom: 15px;
}

.breadcrumbHeader .breadcrumb .breadcrumb-item a {
    color: #898989;
}

.breadcrumbHeader .breadcrumb .breadcrumb-item a:hover {
    color: #f54174;
    text-decoration: none;
}

.breadcrumbHeader .breadcrumb-item.active {
    color: #f54174;
}

.breadcrumbHeader .breadcrumb-item + .breadcrumb-item::before {
    content: "|";
}

.detail_course {
    font-size: 14px;
    line-height: 24px;
}

.detail_course h3 {
    text-transform: uppercase;
    margin: 15px 0;
}

.description-total-course {
    padding: 20px 15px;
    border-radius: 5px;
    border: 2px solid #f54174;
    font-size: 14px;
    letter-spacing: 0;
}

.description-total-course .time-length {
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

.description-total-course .time-length span {
    float: right;
    font-weight: 500;
}

.description-total-course h3 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
}

.description-total-course h3 span {
    font-size: 14px;
    font-weight: 500;
}

.description-total-course .course-enroll {
    padding: 15px 0;
    display: block;
    text-align: center;
    border: 1px solid #f54174;
    color: #f54174;
    border-radius: 5px;
    margin: 20px 0;
}

.description-total-course .course-enroll:hover {
    text-decoration: none;
}

.description-total-course .audit-button {
    background: #f54174;
    color: #fff;
}

.description-total-course p {
    margin-bottom: 5px;
}

.description-total-course .ColorPink {
    color: #f54174;
}

.vdo_course {
    margin: 30px 0;
}

.content_lecturer {
    background: #ededed;
    margin: 30px 0;
    padding: 15px;
}

.content_lecturer h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

.img_lecturer {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    margin: 0 auto 20px;
}

.img_lecturer img {
    width: 100%;
    height: auto;
}

.content-lecturer {
    color: #363636;
    font-size: 14px;
}

.content-lecturer h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

.content-lecturer h5 {
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 5px;
}

.content-lecturer .history-lecturer {
    margin-left: 20px;
}

.content-lecturer .history-lecturer li {
    list-style: disc;
    font-size: 12px;
    margin-bottom: 5px;
}

.course-relate h4 {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f54174;
}

.course-relate ul li {
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
}

.course-relate ul li a {
    color: #363636;
    display: block;
}

.course-relate ul li a:hover {
    text-decoration: none;
    color: #f54174;
}

.course-relate ul li a .img-sub-course {
    width: 40%;
    float: left;
}

.course-relate ul li a .img-sub-course img {
    width: 100%;
    height: auto;
}

.course-relate ul li a .detail-sub-course {
    width: 60%;
    float: right;
    padding: 5px 10px;
}

.course-relate ul li a .detail-sub-course h5 {
    font-size: 14px;
}

.learning_topics_left {
    margin-bottom: 50px;
}

.learning_topics_left h5 {
    color: #f54174;
    font-size: 18px;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.learning_topics_left ul {
    border: 1px solid #ededed;
    margin-left: 0 !important;
}

.learning_topics_left ul li {
    font-size: 14px;
    padding: 10px 15px;
}

.learning_topics_left ul .box-title {
    background: #ededed;
    font-weight: 700;
}

.learning_topics_left ul li .box_time {
    width: 15%;
    float: right;
}

.learning_topics_left ul li .box_time a {
    color: #f54174;
    font-size: 16px;
}

.learning_topics_left ul li .box_time .time_play {
    float: right;
}

.learning_topics_left ul li .modal-dialog {
    max-width: 600px;
    margin: 5% auto;
}

.learning_topics_left ul li .modal-dialog .modal-header h4 {
    color: #f54174;
    margin: 0;
}

.learning_topics_right {
    font-size: 14px;
    padding: 20px;
    letter-spacing: 0;
    margin-bottom: 50px;
}

.learning_topics_right h5 {
    color: #f54174;
    font-size: 18px;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.learning_topics_right ul {
    margin-left: 20px;
}

.learning_topics_right ul li {
    font-size: 14px;
    margin: 10px;
    list-style: disc;
}

.learning_topics_right b {
    margin: 20px;
    display: block;
}

.learning_topics_right b span {
    color: #f54174;
    text-transform: uppercase;
}

.learning_topics_right h4 {
    color: #707070;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    padding: 20px;
}

.learning_topics_right h4 span {
    color: #f54174;
    display: block;
}

.box_Learning {
    margin-top: 15px;
    padding: 50px 0;
}

.Learning_bottom {
    margin: 20px 0;
    font-size: 14px;
    line-height: 26px;
}

.Learning_bottom h3 {
    font-size: 20px;
}

.Learning_bottom a {
    width: 40%;
    padding: 10px;
    background: #f54174;
    color: #fff;
    text-align: center;
    margin: 5% 30%;
    display: inline-block;
}

.Learning_bottom a:hover {
    text-decoration: none;
    color: #f54174;
    background: #ffd4e0;
}

.tabs-description-course {
    margin: 30px 0;
}

.tabs-description-course .nav-pills {
    margin: 10px 0;
    border-bottom: 1px solid #f54174;

}

.tabs-description-course .nav-pills li a {
    padding: 10px;
    display: block;
    color: #363636;
}

.tabs-description-course .nav-pills li a.active {
    border-bottom: 4px solid #f54174;
    color: #f54174;
}

.tabs-description-course .nav-pills li a:hover {
    text-decoration: none;
    border-bottom: 4px solid #ffd4e0;
    color: #ffd4e0;
}

.tabs-description-course .tab-content {
    font-size: 14px;
    padding: 20px 0;

}

.tabs-description-course .tab-pane-panel {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.tabs-description-course .tab-content h5 {
    color: #f54174;
    font-size: 18px;
    padding: 10px 0;
}

.tabs-description-course .tab-content .sub_method {
    margin-left: 20px;
}

.tabs-description-course .tab-content .sub_method li {
    font-size: 14px;
    margin: 10px;
    list-style: disc;
}

.tabs-description-course .tab-content b {
    margin: 20px;
    display: block;
}

.tabs-description-course .tab-content b span {
    color: #f54174;
    text-transform: uppercase;
}

.tabs-description-course .tab-content .btn {
    color: #f54174;
    left: 0;
    padding: 0;
    text-decoration: none;
    display: block;
}

.tabs-description-course .tab-content .tab-pane .tab-pane-panel .show,
.tabs-description-course .tab-content .tab-pane .tab-pane-panel .hide {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.tabs-description-course .tab-content .tab-pane .tab-pane-panel .hide {
    display: none;
}

.tabs-description-course .tab-content .tab-pane .tab-pane-panel .show:target {
    display: none;
}

.tabs-description-course .tab-content .tab-pane .tab-pane-panel .show:target ~ .hide {
    display: block;
}

.tabs-description-course .tab-content .tab-pane .tab-pane-panel .show:target ~ .panel {
    max-height: 2000px;
}

.tabs-description-course .tab-content .tab-pane .tab-pane-panel .show:target ~ .fade {
    margin-top: 0;
}

.tabs-description-course .tab-content .tab-pane-panel .panel {
    max-height: 120px;
    overflow: hidden;
    transition: max-height .5s ease;
}


.main-section {
    margin: 0 auto;
}

.hedding-title h2 {
    margin: 0px;
    padding: 0px 0px 10px 0px;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 60px;
}

.hedding-title h2:after {
    content: '';
    width: 6%;
    height: 4px;
    position: absolute;
    bottom: -20px;
    left: 0;
    background: #00adee;
}

.average-rating {
    width: 30%;
    float: left;
    margin: 10px 0;
}

.average-rating h1 {
    font-size: 36px;
    color: #FDC91B;
}

.average-rating h1 span {
    font-size: 24px;
    color: #959595;
}

.average-rating p {
    margin: 10px 0;
    font-size: 14px;
    color: #959595;
}

.average-rating i {
    font-size: 20px;
}

.fa-star {
    color: #FDC91B;
}

.fa-star.gray {
    color: #ebebeb;
}

.progress,
.progress-2,
.progress-3,
.progress-4,
.progress-5 {
    background: #f5f5f5;
    height: 15px;
    width: 100%;
    margin-bottom: 5px;
    border-radius: 0;
    padding: 2px;
}

.progress:after,
.progress-2:after,
.progress-3:after,
.progress-4:after,
.progress-5:after {
    content: '';
    display: block;
    background: #FDC91B;
    width: 100%;
    height: 100%;
}

.progress-2:after {
    width: 60%;
}

.progress-3:after {
    width: 40%;
}

.progress-4:after {
    width: 20%;
}

.progress-5:after {
    width: 10%;
}

.rating-right {
    width: 70%;
    float: right;
}

.loder-ratimg {
    width: 50%;
    display: inline-block;
}

.start-part {
    width: 25%;
    float: left;
}

.start-part .box-start-part {
    height: 15px;
    margin-bottom: 5px;
}

.start-part .box-start-part i {
    font-size: 14px;
}

.comment-reviews {
    margin: 20px 0;
    border-bottom: 1px solid #ced4da;
}

.comment-reviews .form-control {
    width: 100%;
}

.comment-reviews .send-reviews {
    background: #00a651;
    color: #fff;
    padding: 8px 40px;
    border: none;
    font-size: 12px;
    font-weight: 300;
    border-radius: 5px;
    margin: 20px 0;
}

.user-comment {
    width: 100%;
    display: inline-block;
    margin-bottom: 15px;
}

.topic-left {
    width: 50%;
    font-size: 14px;
    color: #898989;
    float: left;
}

.ImgVerified {
    display: inline-block;
    color: #00a651;
    font-size: 12px;
    font-weight: 300;
}

.ImgVerified img {
    width: 15px;
    height: auto;
    margin: 0 5px;
}

.topic-right {
    width: 50%;
    text-align: right;
    display: inline-block;
    color: #898989;
    font-weight: 300;
    font-size: 14px;
}

.user-text p {
    font-size: 20px;
    font-weight: bold;
}

.user-text h4,
.user-text span {
    color: #B3B5B4;
}

.box-comment {
    padding-bottom: 20px;
    border-bottom: 1px solid #ced4da;
}

.comment-part {
    margin-bottom: 15px;
}

.comment {
    width: 100%;
    font-size: 14px;
}

.comment .upload-img {
    width: 15%;
    margin: 20px 0;
}

.content-about {
    margin: 30px 0 10%;
    font-size: 16px;
    line-height: 30px;
}

.slogan-chairman h3 {
    color: #f54174;
    margin: 20% 0;
}

.slogan-chairman h3 span {
    font-size: 26px;
    font-style: italic;
    padding: 5px;
}

.slogan-chairman p {
    border-left: 5px solid #f54174;
    padding-left: 10px;
}

.content_JoinUs {
    text-align: center;
    font-size: 14px;
    margin-bottom: 50px;
}

.content_JoinUs h3 {
    color: #f54174;
    font-size: 22px;
}

.content_JoinUs .fill-data {
    width: 40%;
    padding: 20px;
    font-size: 18px;
    background: #f54174;
    color: #fff;
    text-align: center;
    margin: 30px 30% 50px;
    display: inline-block;
}

.content_JoinUs .fill-data:hover {
    text-decoration: none;
    color: #f54174;
    background: #ffd4e0;
}

.backgroud_whatToGet {
    background: url(../images/background-img-teach.jpg);
    background-position: left top;
    background-size: cover;
}

.what_to_get {
    padding: 30px 0 70px;
}

.what_to_get h3 {
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
    margin: 30px 0;
}

.topic_whatToGet {
    min-height: 450px;
    padding: 25px;
    background: #fff;
    text-align: center;
    font-size: 14px;
}

.topic_whatToGet img {
    width: 180px;
    height: 180px;
}

.topic_whatToGet h4 {
    margin: 10px 0;
    font-size: 18px;
}

.col-philosophy {
    text-align: center;
    padding: 35px;
    color: #fff;
    font-size: 14px;
}

.col-philosophy h4 {
    color: #fff;
    position: relative;
}


.borderRL {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}

.borderPink {
    position: relative;
    margin-bottom: 30px;
}

.borderPink::after {
    content: '';
    width: 10%;
    height: 5px;
    position: absolute;
    bottom: -20px;
    left: 0;
    background: #f54174;
}

.CYBERCol {
    width: 80%;
    margin: 30px auto;
}

.col_personnel {
    text-align: center;
    margin: 15px 0;
}

.img_personnel {
    width: 220px;
    height: 220px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto 20px;
    text-align: center;
}

.img_personnel img {
    width: auto;
    height: 250px;
    margin: 0 -25%;
    display: inline-block;
}

.topic_personnel {
    width: 100%;
    margin: 10px 0;
    font-size: 14px;
    color: #898989;
    display: inline-block;
}

.topic_personnel h6 {
    font-size: 18px;
    color: #363636;
    margin-bottom: 5px;
}

.personnel_online {
    text-align: center;
    padding: 35px;
    color: #fff;
    font-size: 14px;
}

.personnel_online .img_personnel {
    width: 100%;
    border-radius: 0;
}

.personnel_online .img_personnel img {
    width: 100%;
    height: auto;
}

.personnel_online .topic_personnel {
    color: #fff;
}

.personnel_online .topic_personnel h6 {
    color: #fff;
}

.content_faq {
    background: #fff;
    padding: 20px;
}

.accordion-toggle {
    color: #252525;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ebebeb;
    cursor: pointer;
    padding: 15px 0;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    transition: 0.4s;
    margin: 0;
}

.accordion-toggle.active {
    color: #f54174;
}

button:focus {
    outline: none;
}

.accordion-toggle:after {
    content: '\002B';
    color: #363636;
    float: right;
    margin-top: -5px;
    margin-left: 5px;
    font-size: 22px;
}

.accordion-toggle.active:after {
    content: "\2212";
    color: #f54174;
}

.accordion-content {
    display: none;
    padding: 10px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
}

.accordion-content ul {
    padding: 0 0 23px 0;
}

.accordion-content li {
    padding: 0 0 15px 0;
    font-size: 14px;
    line-height: 24px;
    list-style-position: inside;
    list-style-type: decimal;
}

.content-Course {
    margin-bottom: 2%;
}

.content-Course .box_course .more-course {
    font-size: 12px;
}

.content-Course .description_course h4 {
    font-size: 14px;
}

.content-Course .description_course .sub_title {
    font-size: 12px;
}

.content-Course .description_course {
    box-shadow: 0 8px 6px -6px #ccc;
}

.next_page {
    margin-top: 40px;
    letter-spacing: 0;
    font-size: 14px;
}

.next_page .page-link {
    color: #363636;
}

.next_page .page-link:hover {
    color: #fff;
    background: #f54174;
}

.next_page .page-item.disabled .page-link {
    color: #fff;
    background: #f54174;
}

.Col_About_Course {
    position: relative;
    padding-top: 70px;
    padding-bottom: 50px;
}

.Col_About_Course::before {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
    background-image: url(https://www.transparenttextures.com/patterns/absurdity.png);
    transform-origin: bottom left;
    transform: skew(0deg, -2deg);
}

.about_Course {
    padding: 50px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}

.about_Course h3 {
    color: #f54174;
}

.about_Course h5 {
    border-left: 4px solid #f54174;
    padding-left: 15px;
    margin: 30px 0 10px;
}

.News_Course {
    margin-bottom: 10px;
}

.News_Course p {
    margin-bottom: 5px;
}

.News_Course a {
    color: #fff;
}

.News_Course a:hover {
    color: #f54174;
    text-decoration: none;
}

.News_Course a:hover h5 {
    color: #f54174;
}



.about_special h4 {
    padding: 5px;
    margin: 5px 0;
    border-left: 5px solid #f54174;
}

.scholarships {
    padding-left: 10px;
}

.scholarships li {
    margin-bottom: 10px;
}

.sub_scholarships {
    padding-left: 22px;
}

.sub_scholarships li {
    font-size: 14px;
}

.contactUs {
    margin-top: 50px;
    margin-bottom: 50px;
}

.contactUs h3 {
    text-transform: uppercase;
}

.contactUs h3 span {
    color: #f54174;
}

.contactUs p {
    font-size: 16px;
    line-height: 30px;
}

.qrcode {
    width: 180px;
}

.form_info {
    padding: 30px 0;
}

.form_info .input-group {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form_info button {
    width: 40%;
    padding: 10px;
    background: #f54174;
    color: #fff;
    text-align: center;
    margin: 20px 30%;
    display: inline-block;
}

.map {
    height: 500px;
    overflow: hidden;
}

footer {
    background: #363636;
    padding-top: 30px;
    color: #fff;
}

.info_footer {
    font-size: 14px;
    line-height: 28px;
    font-weight: 300;
}

.info_footer h4,
.form_footer h4 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
}

.info_footer img {
    width: 100px;
    height: auto;
}

.form_footer .input-group {
    margin: 15px 0;
}

.form_footer .btn-pink {
    background: #f54174;
    color: #fff;
}

.footer-bottom {
    margin-top: 10px;
    border-top: 1px solid #707070;
}

.footer-bottom .copyright p {
    font-size: 12px;
    margin: 0;
    padding: 10px 0;
    text-transform: uppercase;
}

.footer-bottom .social {
    float: right;
    margin: 10px 0 0;
}

/*NAV_PAYMENT*/
.nav_payment .nav-menu {
    background: #363636;
    border-top: 1px solid #fff;
}

.nav_payment .wrapper {
    margin-top: 120px;
}

.box-payment {
    border: 1px solid #ccc;
}

.box-payment h4 {
    background: #f54174;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    letter-spacing: 0px;
}

.content_payment {
    padding: 10px;
}

.card_payment {
    width: 100%;
    display: inline-block;
    padding-bottom: 15px;
    border-bottom: 1px solid #ededed;
}

.card_payment .cover_course {
    width: 30%;
    height: auto;
    float: left;
}

.card_payment .content {
    width: 70%;
    float: right;
    padding: 0 15px;
}

.card_payment .content h5 {
    color: #f54174;
}

.card_payment .content .name {
    font-size: 14px;
    margin-bottom: 5px;
    color: #898989;
}

.details_course {
    width: 100%;
    padding: 5px;
}

.details_course ul li {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
}

.details_course ul li span {
    display: table-cell;
}

.details_course ul li .topic {
    width: 30%;
    display: block;
    float: left;
    font-weight: 500;
}

.choose_payment {}

.choose_payment h4 {
    background: #f54174;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    letter-spacing: 0px;
}

.box_payment a {
    display: block;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

.box_payment a:hover {
    text-decoration: none;
    border: 1px solid #f54174;
    background: #fafafa;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.box_payment a h5 {
    font-size: 16px;
    color: #363636;
}

.box_payment a h5 span {
    font-size: 12px;
}

.box_payment img {
    width: auto;
    height: 40px;
}

#visa-content {
    width: 60%;
    padding: 50px 20px;
}

#visa-content h2 {
    color: #f54174;
}

.visaInfo {
    width: 60%;
    margin: 0 auto;
}

.payment-info {
    padding: 20px;
    border: 2px solid #f54174;
}

.payment-info img {
    width: auto;
    height: 40px;
    margin: 5px auto;
    text-align: center;
    display: block;
}

.payment-info label {
    font-size: 14px;
    letter-spacing: 0;
}

.payment-info .form-control {
    font-size: 12px;
}

.button_payment {
    display: block;
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #f54174;
    color: #fff;
    border: none;
    border-radius: 5px;
}

#bank-content {
    width: 60%;
    padding: 20px;
}

#bank-content h2 {
    color: #f54174;
}

#bank-content form {
    font-size: 14px;
    padding: 15px;
    border: 2px solid #f54174;
}

#bank-content form img {
    width: 30px;
    height: auto;
    margin-right: 5px;
}

#bank-content form .form80 {
    width: 80%;
    float: left;
}

.bankInfo {
    padding: 15px;
    border: 2px solid #f54174;
}

.bankInfo p {
    margin-bottom: 5px;
    font-size: 14px;
}

.bankInfo p span {
    width: 30%;
    display: block;
    float: left;
}

.bankInfo p img {
    width: 30px;
    height: auto;
    margin-right: 5px;
}

.dayTransfer .col-sm-2 {
    padding-right: 0;
}


.chat_facebook {
    position: fixed;
    right: 1%;
    bottom: 5%;
    z-index: 5;
}

.iconChat {
    width: 64px;
    height: 64px;
    background: #f54174;
    border-radius: 50px;
    text-align: center;
    padding: 10px;
}

.iconChat i {
    color: #fff;
    font-size: 45px;
}

/*======= RESPONSIVE =======*/


@media (max-width: 767.98px) {

    .h3,
    h3 {
        font-size: 22px;
    }

    .ham {
        background: #fff;
    }

    .dropdown:hover .dropbtn {
        color: #fff;
    }

    .dropdown-content {
        position: static;
        background: none;
        border: none;
        box-shadow: none;
    }

    .dropdown-content a {
        color: #fff;
    }

    .container-fluid {
        width: 100%;
    }

    .menuTop {
        padding: 0;
    }

    .nav-menu {
        position: static;
        background: #f54174;
        border-top: 1px solid #fff;
    }

    .menuTop .nav-menutop .menu-item {
        font-size: 12px;
    }

    .menu-item {
        font-size: 14px;
    }

    .language.dropdown {
        font-size: 12px;
    }

    .nav-menu.costum-navbar {
        position: fixed;
    }

    .navbar-brand {
        width: 50%;
    }

    .nav-right {
        float: none;
    }

    .social li {
        margin: 0;
    }

    .navbar-expand-lg .navbar-nav {
        margin-top: 20px;
    }

    .nav-item.active .nav-link {
        color: #fff;
    }

    .menu-item {
        text-align: right;
    }

    .navbar-expand-lg.costum-navbar .navbar-collapse {
        padding: 0;
    }

    .topslide .carousel-caption {
        bottom: 20%;
    }

    .carousel-caption {
        width: 90%;
        left: 5%;
        right: 5%;
    }

    .topslide .carousel-caption h1 {
        font-size: 20px;
    }

    .topslide .carousel-caption h5 {
        font-size: 12px;
    }

    .topslide .carousel-indicators li {
        width: 10px;
        height: 10px;
    }

    .content_know_us {
        font-size: 14px;
        line-height: 24px;
        padding: 20px 0;
    }

    .step_know {
        margin: 0;
    }

    .step_know .box-step {
        padding: 10px 0;
    }

    .column_center {
        padding: 0 20px;
    }

    .text_head.spanright {
        margin-top: 30px;
    }

    .text_head h3 {
        text-align: center;
    }

    .text_head h3 span {
        width: 100%;
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 14px;
    }

    .VDOFixd h3 {
        bottom: 15%;
        font-size: 22px;
    }

    .spanright h3 span a {
        float: none;
    }

    .cover_course {
        width: auto;
        height: auto;
    }

    .degree-course {
        padding-bottom: 0;
    }

    .description_course {
        font-size: 12px;
    }

    .description_course h4 {
        font-size: 14px;
    }

    .box_course .more-course {
        width: 70%;
        left: 15%;
        font-size: 12px;
    }

    .videoWrapper {
        top: 0;
        /*		padding-bottom: 80%;*/
    }

    .step_know .box-step img {
        width: 40%;
    }

    .VDOFixd {
        height: 270px;
    }

    .videoWrapper video {
        position: absolute;
    }

    .topic_whatToGet {
        margin-bottom: 20px;
    }

    .nameCourse {
        bottom: 5px;
        left: 5px;
    }

    .nameCourse h2 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .nameCourse h5 {
        font-size: 14px;
    }

    .breadcrumbHeader .breadcrumb {
        padding: 10px 0;
        font-size: 10px;
    }

    .description-total-course {
        font-size: 12px;
        margin-top: 15px;
    }

    .tabs-description-course {
        font-size: 12px;
    }

    .tabs-description-course .tab-pane-panel {
        font-size: 12px;
    }

    .tabs-description-course .tab-content .btn {
        font-size: 12px;
    }

    .learning_topics_left ul li {
        font-size: 12px;
    }

    .learning_topics_left ul li .box_time {
        width: 20%;
    }

    .learning_topics_left {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .nav-menu {
        z-index: 2;
    }

    .carousel-indicators {
        z-index: 1;
    }

    .navbar-brand {
        width: 40%;
    }

    .menu-item {
        text-align: right;
    }

    .dropdown-content {
        text-align: right;
        position: static;
        background: none;
        border: none;
    }

    .dropdown-content a {
        color: #fff;
    }

    .ham {
        background: #fff;
    }

    .navbar-expand-lg .navbar-nav {
        margin-top: 5px;
        background-color: rgba(0, 0, 0, 0.7)
    }

    .navbar-expand-lg.costum-navbar .navbar-nav {
        background-color: transparent;
    }

    .topslide .carousel-caption {
        bottom: 15%;
    }

    .cover_course {
        width: auto;
        height: auto;
    }

    .VDOFixd {
        height: 435px;
    }

    .videoWrapper {
        top: 0;
        padding-bottom: 60%;
    }

    .videoWrapper video {
        position: absolute;
    }

    .know_us_vdo {
        height: auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .step_know {
        margin: 0;
    }

    .step_know .box-step {
        padding: 0;
    }

    .step_know .box-step img {
        width: 40%;
    }

    .topic_whatToGet {
        margin-bottom: 20px;
    }

    .slogan-chairman h3 {
        margin: 5% 0;
    }

    .img_personnel {
        height: auto;
    }

    .topslide .carousel-caption h1 {
        font-size: 32px;
    }

    .description_course h4 {
        font-size: 16px;
    }

    .box_course .more-course {
        width: 70%;
        left: 15%;
    }

    .nameCourse h2 {
        font-size: 2rem;
    }

    .learning_topics_left ul li .box_time {
        width: 20%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .menu-item {
        font-size: 12px;
    }

    .VDOFixd {
        height: 450px;
    }

    .videoWrapper {
        top: 0;
    }
}

@media (min-width: 1200px) {
    .videoWrapper {
        top: 0;
    }
}