div#wrapper {

    max-width: 1440px;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

    box-sizing: border-box;

    transition: width 0.2s;

}
#circleMenu{
    transition: all 0.2s;
}
#form_question_tpl{
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

#form_question_tpl.activeM{
    width: calc(100% - 310px);
}

#circleMenu.activeM{
    display: none;
}

/* title page */

.title-default:before{

    content: '';

    position: absolute;

    bottom: -12px;

    left: 50%;

    transform: translate(-50%,0%);

    height: 3px;

    width: 40px;

    background: var(--html-bg-website);

    border-radius:25px;

}

.title-default:after{

    content: '';

    position: absolute;

    bottom: -11px;

    left: 50%;

    transform: translate(-50%,0%);

    height: 1px;

    width: 80px;

    background: var(--html-bg-website);

}
.title-white:after,.title-white:before{

    background:#fff

}

.title-black:before{

    background:#ccc

}

.title-default h1 a,

.title-default h2 a,

.title-default h3 a,

.title-default h4 a,

.title-default div a{

    font-size: 20px;

    text-transform: uppercase;

    color:#000;

    font-family: var(--font-Roboto-bold);

    font-weight: bold;

}

.title-news,.title-news a {

    font-size: 34px;

    font-family: 'Amatic SC', cursive;

    color: #000;

    text-transform: uppercase;

    font-weight: bold;

}

.title-news:before {

    content: "";

    position: absolute;

    background: var(--html-bg-website);

    bottom: -5px;

    height: 2px;

    width: 80px;

}
.title-about h5 a{
    font-size: 22px;
    font-family: var(--font-Roboto-bold);
    text-transform: uppercase;
}
.title-about:before{
    content:'';
    position: absolute;
    bottom:-15px;
    left:0;
    height: 2px;
    width: 60px;
    background: var(--html-bg-website)
}
.title-info div a{

    font-size: 16px;

    text-transform: capitalize;

    color: var(--html-bg-website);

    font-family: var(--font-Roboto-bold);

    font-weight: 600;

    background: #fff;

    padding-right: 10px;

    border: 1px solid var(--html-bg-website);

    padding: 4px;

    margin-top: 2px;

    border-bottom: none;

    border-radius: 5px 5px 0px 0px;

}
.border-bottom {
    border-bottom: 1px solid var(--html-bg-website);
    padding-bottom: 2px;
}
.title-vs div a{

    font-size: 22px;

    text-transform: uppercase;

    color: #fff;

    font-family: var(--font-roboto-bold);

    font-weight: bold;

}
.title-vso-ff div a{

    font-size: 34px;

    text-transform: uppercase;

    color: #fff;

    font-family: 'Amatic SC', cursive;

    font-weight: bold;

}
.content-ff{
    color: #fff
}
.title-vso:before {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translate(-50%,0%);
    height: 16px;
    width: 37px;
    background: url(images/line_danhmuc.png);
}
.title-list-vso div a{

    font-size: 34px;

    text-transform: uppercase;

    color: #000;

    font-family: 'Amatic SC', cursive;

}
.title-list-vso:before {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translate(-50%,0%);
    height: 16px;
    width: 37px;
    background: url(images/line_danhmuc.png);
}
/* background */

.template-top {

    background: var(--html-bg-website);

    padding: 7px 0px;

    border-bottom:1px solid rgb(255 255 255 / .5);

}
section.section-about {

    background: var(--bg-about);

}
section.section-news{
    background: var(--bg-news);
}
section.section-newsletter{
    background: var(--bg-newsletter);
}
section.section-feedback{
    background: var(--bg-ykien);
}
footer.footer {

    background: var(--bg-footer);

}
section.section-contact{
    background-color: var(--html-bg-website)
}
section.section-contact .ic-contact{
    padding-left:45px;
    font-size: 16px;
    font-family: var(--font-Roboto-regular);
    color:#fff
}
section.section-contact .ic-contact:before{
    position: absolute;
    content:'';
    left:0;
    top:-5px;
    padding:20px;
}
section.section-contact .ic-hotline:before{
    background: url('images/ic-phone.png') no-repeat;
}
section.section-contact .ic-email:before{
    background: url('images/ic-mail.png') no-repeat;
}
section.section-contact .ic-website:before{
    background: url('images/ic-website.png') no-repeat;
}
.slick-slider{
    margin:0!important
}
/* end background */

/* top */
.box-marquee{z-index:1}

/*.box-marquee:before {

    content: '';

    position: absolute;

    left: -100px;

    top: -7px;

    height: 34px;

    width: 500px;

    background: var(--html-bg-website);

    z-index: -1;

}

.box-marquee:after {

    content: '';

    width: 0;

    height: 0;

    border-top: 17px solid transparent;

    border-bottom: 17px solid transparent;

    border-left: 30px solid var(--html-bg-website);

    position: absolute;

    right: -44px;

    top: -7px;

}*/

.box-phone{

    display: flex;

    align-items: center;

}

.box-phone .phone p{

    margin:0;

    font-size:16px;

    color:#cc3433;

    font-family: var(--font-roboto-regular);

    font-style: italic;

}
.box-phone .phone p.numb-phone{

    margin:0;

    font-size:24px;

    color:#cc3433;

    font-family: var(--font-montserrat-bold);

    font-style: inherit;

}
.cart-h p.price-cart{
    color:#ee0101
}
ul.top-page {

    display: flex;

    align-items: center;

}

ul.top-page.mg-0 li {

    position: relative

}

ul.top-page.mg-0 li+li:before {

    content: '';

    position: absolute;

    top: -7px;

    left: 0;

    height: 35px;

    width: 1px;

    background: #fff;

}

ul.top-page li a {

    padding: 0px 15px;

    display: block;

    color: #fff;

    font-size: 14px;

    position: relative;

}

ul.top-page li a i {

    font-size: 15px;

}
a.translate-google {
    height: 20px;
    width: 140px;
}
a.translate-google:before {
    content: '';
    position: absolute;
    left: 0;
    top: 28px;
    height: 100%;
    width: 100%;
    background: #fff;
    z-index: 123;
}
div#translate_select {
    position: absolute;
    top: 1px;
    left: 10px;
}
.skiptranslate.goog-te-gadget span {
    display: none;
}
/* mail*/
section.section-mail {
    background: var(--bg-newsletter);
}

.box-input-mail {
    display: flex;
    justify-content: center;
    align-items: center;
}

.i-input-mail input {
    padding: 12px 10px;
    margin-bottom: 20px;
    border: 1px solid #86878c;
    background: #86878c;
    width: 100%;
    border-radius: 5px;
    color: #fff
}

.i-input-mail input::placeholder {
    font-family: 'arial';
    color: #fff
}
.i-input-mail textarea::placeholder {
    font-family: 'arial';
    color: #fff
}
.i-input-mail textarea {
    padding: 12px 10px 90px;
    border: 1px solid #86878c;
    background: #86878c;
    width: 100%;
    color: #fff;
    border-radius: 5px
}

button.btn-mail {
    border: none;
    background: var(--html-bg-website);
    padding: 12px 35px;
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 5px
}
/*Hoạt động*/
.desc-hd h3 a{
    position: absolute;
    bottom: 15px;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    font-family: var(--font-roboto-bold);
    text-align: center;
    left: 0;
    right: 0
}
/*reviews*/
.swiper-containerslide .swiper-button-next, .swiper-containerslide .swiper-button-prev {
    height: 30px;
    width: 30px;
    background-size: cover;
    filter: invert(72%) sepia(61%) saturate(46%) hue-rotate(34deg) brightness(200%) contrast(74%);
}
.section-reviews{
    background: var(--bg-ykien);
}
.thumbnail-reviews img{
    border-radius: 50%;
    border: 2px solid #fff;
}
.items-review{
    width: 700px;
    margin:0 auto;
}
.content-reviews p{
    color: #fff;
    font-size: 14px;
    position: relative;
}
.content-reviews span{
    position: absolute;
    bottom: -15px;
    margin-left: 30px
}

.desc-content h3{
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold
} 
.desc-content h4,.desc-content{
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
}
.template-reviews {
    padding: 15px 0px;
    border-radius: 20px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 7px #ccc;
    margin: 10px 0px;
}

.template-reviews .template-img img {
    border-radius: 50%;
}
/* header */
section.section-head {
   /* background: var(--bg-banner)*/
}
.logo-header{
    position: absolute;
    top: 15px;
}
.dangkyngay {
    position: absolute;
    top: 65%;
    left: 15%;
}
.box-banner .action{
    font-family: var(--font-montserrat-bold);
}
.box-banner .scroll1{
    color:var(--html-cl-website);
    font-size: 30px;
    font-family: var(--font-montserrat-bold);
}
.box-banner .scroll2{
    color: var(--html-bg-website);
    font-size: 40px;
    text-transform: uppercase;
    font-family: var(--font-montserrat-black);
}
ul.sub-menu li+li:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%,-50%);
    height: 13px;
    width: 1px;
    background-color: #ccc;
}
ul.sub-menu li a{
    display: block;
    padding:0px 15px
}
.box-dropdown>ul>li+li {
    border-top: 1px solid #ccc;
}

.dropdown-menu-search {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    float: left;
    min-width: 220px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    transition: all 0.4s ease-in-out;
}

.pos-menu {
    top: 100%;
    left: 0px;
}
.box-dropdown ul li h3{
    margin:0!important;
}
.box-dropdown ul li a {
    color: #000;
    padding: 7px 10px;
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    box-sizing: border-box;
}
.box-dropdown ul li:hover a{
    color:var(--html-bg-website);
}
ul.ul-menu>li:hover .pos-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu-search ul.c1>li:hover .pos-menu-c2 {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu-search.pos-menu-c2,
.dropdown-menu-search.pos-menu-c3 {
    left: 100%;
    top: -7px;
}

.dropdown-menu-search ul.c2>li:hover .pos-menu-c3 {
    opacity: 1;
    visibility: visible;
}

/* end header */
/*TOEIC*/
.section-toeic{
    background: var(--bg-toeic);
}
.title-landingpage h2{
    font-size: 26px;
    color: var(--html-bg-website);
    text-transform: uppercase;
    font-family: var(--font-roboto-bold)
}
.mb-5{
    color: #000;
    font-size: 18px;
    font-family: var(--font-roboto-regular);
    line-height: 25px
}
.section-toeic-quytrinh{
    background: var(--bg-toeic-qt);
}
.img-thumbnail-toeic img{
    border-radius: 50%
}
.items-toeic {
    background: #f4f4f4;
    margin: 10px;
    border-radius: 20px;
}
.img-thumbnail-toeic {
    display: flex;
    justify-content: center;
    align-items: center;
}
.desc-toeic h3{
    font-size: 18px;
    font-family: var(--font-roboto-bold);
    text-transform: uppercase;
}
.slick-prev:before, .slick-next:before{
    color: var(--html-bg-website)!important
}
.section-lotrinh{
    background: var(--bg-lotrinh)
}
.title-lotrinh h2 {
    font-size: 26px;
    font-family: var(--font-roboto-bold);
    color: #000;
    text-transform: uppercase;
    width: 600px;
    margin: 10px auto;
    border: 2px dotted #fff;
    padding: 20px 12px;
    line-height: 35px;
}
.items-lotrinh {
    background: #fff;
    margin: 20px;
    border-radius: 12px;
    padding-top: 25px;
    padding-bottom: 50px
}
.desc-lotrinh h3{
    font-size: 18px;
    color: var(--html-bg-website);
    font-family: var(--font-roboto-bold);
    text-transform: uppercase;
}
.desc-lotrinh p{
    font-size: 16px;
    font-family: var(--font-roboto-bold);
    color: #000
}
.arti-description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(83 123 38 / 55%);
    opacity: 0
}
.item-add:hover .arti-description{
    opacity: 1
}
.arti-description h3 a{
     color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    padding: 10px 20px;
    background: rgba(102,102,102,.48);
    border-radius: 3px;
    color: #fff;
}
.section-danhgia{
    background: var(--bg-ykien)
}
.background-dg{
    background: var(--html-bg-website);
    padding: 30px 10px;
    border-radius: 7px
}
.thumbnail-dg img{
    border-radius: 50%
}
.desc-dg h3{
    font-size: 15px;
    color: #fff;
    font-family: var(--font-roboto-bold);
    text-transform: uppercase;
}
.desc-dg p{
    font-size: 14px;
    color: #fff;
    font-family: var(--font-roboto-regular);
}
.padding-dg{
    padding: 0 50px;
}
.title-hocvien h2{
    font-size: 20px;
    text-transform: uppercase;
    font-family: var(--font-roboto-bold);
    color: #fff;
    line-height: 30px
}
.title-hocvien span,.title-hocvien p{
    font-size: 16px;
    text-transform: none;
    font-family: var(--font-roboto-regular);
    color: #fff
}
.border-top{
    border-top:1px solid #ccc;
}
.content-toeic p {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* slick */

.slide-hot-deal .slick-prev,.slide-hot-deal .slick-next{
    top:-54px!important;
    left:initial!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    height: 30px!important;
    width: 30px!important;
    border:2px solid #ccc!important
}

.slide-hot-deal .slick-prev{
    right:50px!important
}
.slide-hot-deal .slick-next{
    right:10px!important
}
.slide-hot-deal .slick-prev:before,.slide-hot-deal .slick-next:before{
    padding:7px!important
}
.slide-hot-deal .slick-prev:before{
    background:url('images/next.png')no-repeat center center !important
}
.slide-hot-deal .slick-next:before{
    background:url('images/prev.png')no-repeat center center !important
}
.slide-album .slick-prev,.slide-album .slick-next{
    top:initial!important;
    bottom:-13px!important;
    left:initial!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    height: 30px!important;
    width: 30px!important;
    background-color:var(--html-bg-website)!important;
    z-index: 999;
}
.slide-album .slick-next {
    right: 0px!important;
}
.slide-album .slick-prev {
    right: 35px!important;
}
/* end */
/*MENU DANH MỤC*/
.slogan-menu{
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold
}
.cssMenu.mfix .list-cat {
    margin-top: 20px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}
.wrap-menu.menu .list-cat {
    margin-top: 20px;
    visibility: hidden;
    opacity: 0;
}
.wrap-menu.menu:hover .list-cat {
    visibility: initial;
    opacity: 1;
    top: 100%;
    margin-top: 0;
}
.hover-menu:hover ul.list-cat {
    visibility: visible;
    opacity: 1;
    top: 100%;
    margin-top: 0;
}
.box-list.hover-menu-list {
    background: #c37630;
}
ul.list-cat {
    background: #fff;
    box-shadow: 0px 1px 4px #ccc;
    z-index: 9;
    visibility: hidden;
    opacity: 0;
}
.quickMenu{
    padding-top: 0;
    font: normal 13px Arial,sans-serif;
    color: #666;
    line-height: 15px;
    clear: both;
}
.quickMenu a{
    font: normal 13px Arial,sans-serif;
    color: #666;
}
ul.list-cat>li> .quickMenu a:hover {
    color: var(--html-bg-website);
}
.list-cat{
    position: absolute;
    width: 100%
}

ul.list-cat>li+li {
    border-top: 1px solid #ccc;
}
ul.list-cat>li {
    padding: 9.5px 20px;
    display: block;
    transition: all 0.4s ease;
}
ul.list-cat>li>a {
    font-size: 14px;
    color: #000;
    line-height: 27px;
    font-family: var(--font-roboto-regular)
}

ul.list-cat>li>a:hover {
    color: var(--html-bg-website);
}
ul.list-cat>li:hover {
    background: #f5f5f5;
    transition: all 0.4s ease;
    padding-left: 25px;
}

.dropdown-menu2 {
    position: absolute;
    left: 100%;
    width: 960px;
    height: 413px;
    top: -45px;
    z-index: 11;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0px 2px 5px #ababab;
}

.list-cat li:hover .dropdown-menu2 {
    visibility: visible;
    opacity: 1;
}

.item-cat div.name-c3 a {
    padding: 5px 0px;
    display: block;
    font-size: 14px;
    font-size: 15px;
    position: relative;
    overflow: hidden;
}

.item-cat div.name-c4 a {
    color: #343a40;
    font-size: 15px;
    font-family: 'Arial';
    display: block;
    line-height: 23px;
    font-weight: 300;
    transition: all 0.4s;
}

.item-cat div.name-c3 a:hover {
    color: var(--html-bg-website);
}

.item-cat div.name-c3 a:before {
    content: '';
    position: absolute;
    left: -100%;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: var(--html-bg-website);
    transition: all 0.6s ease-in-out;
}

.item-cat div.name-c3 a:hover:before {
    left: 0;
    transition: all 0.6s ease-in-out;
}
.box-desc {
    width: 90%;
    margin: 30px auto;
}

.box-form.ds-flex {
    justify-content: flex-end
}

.before:before {
    content: '';
    position: absolute;
    left: 0;
}

.box-list:before {
    top: 13px;
    left: 25px;
    background: url(images/bar.png)no-repeat;
    padding: 13px;
}

.box-list>a {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

.ul-box-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    width: 100%;
}
/* menu */

.wrap-menu ul.ul-menu{
    display:flex;
    align-items:center;
    justify-content: space-between;
}
/*.wrap-menu ul.ul-menu>li{
    border-right: 1px solid #fff;
}*/
.wrap-menu ul.ul-menu>li+li:before {
/*    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 20px;
    transform: translate(0%,-50%);
    width: 1px;
    background: #fff;*/
}
.wrap-menu ul.ul-menu>li>h2>a,.wrap-menu ul.ul-menu>li>a{
    font-size: 14px;
    text-transform:uppercase;
    padding:14px 20px;
    color:#000;
    display:block;
}
.wrap-menu ul.ul-menu>li>h2>a, .wrap-menu ul.ul-menu>li>a{
    position: relative;
}
.wrap-menu ul.ul-menu>li{
}
.wrap-menu ul.ul-menu>li>h2>a::before, .wrap-menu ul.ul-menu>li>a::before{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--html-bg-website);
    transform: skewX(-40deg);
    display: none;
    z-index: -1;
}
.cssMenu.mfix .wrap-menu{
    width: 1230px;
    padding: 0 15px;
    margin: 0 auto;
}
.wrap-menu ul.ul-menu>li>h2>a:hover:not(.wrapper-login__menu)::before, .wrap-menu ul.ul-menu>li>a:hover:not(.wrapper-login__menu)::before{
    display: block;
}
.wrap-menu ul.ul-menu>li>h2>a.active, .wrap-menu ul.ul-menu>li>a.active{
    color: #fff;
    font-family: var(--font-roboto-bold);
}
.wrap-menu ul.ul-menu>li>h2>a.active::before, .wrap-menu ul.ul-menu>li>a.active::before{
    display: block;
}

.wrap-menu ul.ul-menu>li a:hover:not(.active,.wrapper-login__menu){
    color: #fff;
}

.wrap-menu ul.ul-menu>li .mega-menu{
    background-color: var(--html-bg-website);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 220px;
    visibility: hidden;
    opacity: 0;
    box-shadow: 2px 2px 7px #ccc;
    margin-top:20px;
    transition: all 0.4s ease-in-out;
}
.mega-menu .box-mega-menu ul.c1 li+li{
    border-top:1px solid #fff
}
.mega-menu .box-mega-menu ul.c1 li:hover{
    background-color:var(--html-cl-website)
}
.mega-menu .box-mega-menu ul.c1 li a{
    display: block;
    padding: 10px;
    font-size: 13px;
    text-transform: uppercase;
    color:#fff;
}
.wrap-menu>ul.ul-menu>li:hover>.pos-menu-c1,
.wrap-menu>ul.ul-menu>li>.pos-menu-c1>.box-mega-menu>ul.c1>li:hover>.pos-menu-c2,
.wrap-menu>ul.ul-menu>li>.pos-menu-c1>.box-mega-menu>ul.c1>li>.pos-menu-c2>.box-mega-menu>ul.c2>li:hover>.pos-menu-c3
{
    visibility: visible;
    opacity: 1;
    margin-top:0px;
}
.wrap-menu>ul.ul-menu>li>.pos-menu-c1>.box-mega-menu>ul.c1>li:hover>.pos-menu-c2,
.wrap-menu>ul.ul-menu>li>.pos-menu-c1>.box-mega-menu>ul.c1>li>.pos-menu-c2>.box-mega-menu>ul.c2>li:hover>.pos-menu-c3{
    top:0
}
.wrap-menu>ul.ul-menu>li>.pos-menu-c1>.box-mega-menu>ul.c1>li>.pos-menu-c2,
.wrap-menu>ul.ul-menu>li>.pos-menu-c1>.box-mega-menu>ul.c1>li>.pos-menu-c2>.box-mega-menu>ul.c2>li>.pos-menu-c3
{
    left:100%
}

/* serach menu */
form.form-search input[name="keyword"] {
    padding: 11px;
    border: 1px solid #ccc;
    background: transparent;
    width: 100%;
    border-radius: 30px;
}
button.button-search {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px 22px;
    color: #000;
    background: transparent;
    border: none;
    font-size: 18px;
    border-radius: 0 30px 30px 0;
}
.search-menu{margin-top:8px}

/* end menu */

/* about */
.title-about h3 a {
    font-size: 20px;
    text-transform: uppercase;
    font-family: var(--font-roboto-bold);
    color: #000
}
a.xemthem {
    display: inline-block;
    color: var(--html-bg-website);
    font-weight: 600;
    margin-top:15px;
    font-size: 15px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--html-bg-website)
}

a.xemthem i {
    font-size: 12px;
}
.items-about {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
    transform: rotate(45deg) translateY(10px);
    border: 3px solid var(--html-bg-website);

}
.thumbnail-about img{
    width: 100%;
    height: auto;
}
.thumbnail-about {
    transform: rotate(-45deg) translateY(-74px);
    margin: -130px;    
}

/* end about */
/* VI SAO CHỌN CHÚNG TÔI */
.section-visao{
    background: var(--bg-visao);
}
ul.items-icon-visao {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 9
}
.desc-icon-visao h3 a {
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-family: var(--font-roboto-bold)
}

ul.items-icon-visao:before {
    content: '';
    position: absolute;
    top: 72px;
    left: 155px;
    width: 75%;
    border: 1px dotted #fff;
    z-index: -1
}
.icon-visao:hover .thumbnail-icon-visao img,.col-201:hover .thumbnail-icon-about {
    transform: rotate(360deg);
    transition: all 0.5s;
}

/* Product */
.desc-hot-deal{
    background-color:#ccc;
    text-align: center;
}
.desc-hot-deal h3 a{
    font-size: 14px;
    text-transform: uppercase;
    font-family: var(--font-Roboto-regular);
    padding:15px 10px;
    display: block;
}
.icon-list {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translate(0%,-50%);
}
.title-list h4 a {
    display: inline-block;
    padding: 15px 30px;
    font-size: 20px;
    font-family: var(--font-Roboto-bold);
    text-transform: uppercase;
    color:#fff;
    position: relative;
    z-index:1
}
.title-list h4{
    padding:0px 20px
}
.title-list h4:before{
    content: '';
    position: absolute;
    top: 0;
    left:0;
    height: 100%;
    width: 100%;
    background: var(--html-bg-website);
    z-index: -1;
}
.title-list h4:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 35px solid #fff;
    position: absolute;
    right: 0px;
    top: 0px;
}
ul.title-cat li+li:before{
    content:'';
    position: absolute;
    left: 0;
    top:3px;
    height: 15px;
    width: 1px;
    background:#000
}
ul.title-cat li a {
    padding: 0px 15px;
    font-family: var(--font-Roboto-regular);
}
ul.title-cat li a.active{
    color:var(--html-bg-website);
    font-family: var(--font-Roboto-bold);
}
.border-list{
    border:1px solid #ccc
}
.line-clamp{

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    -webkit-line-clamp: 1;

    letter-spacing: normal;

    font-size: 1.6rem;

    font-weight: 500;

    line-height: 2.2rem;

    max-height: 4.4rem;

}
.item-list:hover{
    border:1px solid var(--html-bg-website)
}
.desc-list{
    padding:5px 15px
}

.desc-list h3 a{

    font-size: 14px;

    font-family: var(--font-roboto-regular);
    text-transform: uppercase;

}
.desc-list h3 {
    height: 50px;
    overflow: hidden;
}
.desc-list{

    font-size: 14px;

    font-family: var(--font-roboto-regular);
    text-transform: uppercase;

}
.mask-price {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    color:#fff;
    font-weight: bold;
}
.before-mask{z-index:1}
.before-mask:before {
    content: '';
    position: absolute;
    top: 0;
    left: -35px;
    width: 110px;
    height: 33px;
    transform: rotate(45deg);
    background: var(--html-bg-website);
    z-index: -1;
}
.price-product-new{

    font-family: var(--font-Roboto-bold);

    color:var(--html-cl-website);

    font-weight: bold;

}

.price-product-old{

    font-family: var(--font-Roboto-regular);

    color: #999;

}
a.xemthem-list {
    display: inline-block;
    border: 1px solid var(--html-bg-website);
    padding: 7px 25px;
    color: var(--html-bg-website);
    font-family: var(--font-Roboto-bold);
}

a.xemthem-list:hover{
    background-color: var(--html-bg-website);
    color:#fff
}

a.xemthem i {
    font-size: 12px;
}
/* end product */

/* phương thức */
.box-phuongthuc ul li{
    padding:0px 20px
}
.box-phuongthuc ul li+li{
    border-left:1px solid #ccc
}
/* end */

/* vì sao */
.item-support:hover{
    transform:translate(0, -10px);
}
.desc-support {
    padding: 0px 50px;
}
.desc-support h3{
    font-size: 12px;
    color:#fff;
    text-transform:uppercase;
    font-family: var(--font-montserrat-bold);
    line-height: 20px;
}

/* end vì sao */

/* services */
.desc-services {
    margin: 0 auto;
    margin-top: -52px;
}
.desc-services h3 a{
    color:#fff;
    font-family: var(--font-roboto-bold);
    font-size: 15px;
    text-transform: uppercase;
}
/* end */

/* video slider */

.mg-fix {

    margin-top: 485px;

    background-color: #fff;

    position: relative;

}

.max-width {

    width: 1365px;

    overflow: hidden;

    margin: 0 auto;

}

.video-background {

    background: #000;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: -99;

}

.video-foreground {

    height: 300%;

    top: -100%;

}

.video-foreground, .video-background iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}
/* Album */
.items-album{margin-bottom:2px}
.desc-album{

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    text-align: center;

    padding: 10px 0px;

    color:#fff;
    background:rgba(0, 0, 0, .7)

}

.desc-album a{

    color:#fff;

    font-size: 14px;

    font-family: var(--font-Roboto-regular);

    text-transform: uppercase;

}

.items-album .over_lay {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 111;

    text-align: center;

    margin-top: -20px;

    opacity: 0;

    transition: all .25s ease 0s;

    -webkit-transition: all .25s ease 0s;

    -moz-transition: all .25s ease 0s;

    -o-transition: all .25s ease 0s;

    -ms-transition: all .25s ease 0s;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

.items-album:hover .over_lay {

    margin-top: 0;

    opacity: 1;

}

.over_lay a.xemthem {

    font-style: normal;

    font-size: 20px;

    display: inline-block;

    padding: 10px 20px;

    background: rgba(102,102,102,.48);

    border-radius: 3px;

    color: #fff;

}
.name-video{
    font-family: var(--font-montserrat-bold);
    color:var(--html-bg-website);
    text-transform: uppercase;
    padding:0px 10px
}
.template-reviews{
    border-radius:10px
}
.item-review {
    box-shadow: 2px 2px 7px #ccc;
    border-radius: 25px;
    margin:20px 10px;
    padding:20px
}
.item-review img{margin:0 auto;border-radius:50%}
p.template-name-reviews{
    font-size:14px;
    text-transform:uppercase;
    font-weight:bold
}
.name-job .name{
    font-size: 14px;
    font-family: var(--font-Roboto-bold);
}
.address-feedback:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    height: 2px;
    width: 80px;
    background: var(--html-bg-website);
}
#mCustom .mCSB_container, #mCustom .mCustomScrollBox {
    overflow: initial!important;
}
/* end album */
/* album detail */
.box-gallery .desc a{
    font-size: 20px;
    text-transform: uppercase;
    color:var(--html-bg-website);
}
/* end album detail */
.desc-news-i div a {

    font-size: 14px;

    text-transform: uppercase;

    height: 40px;

    color: #000;

    overflow: hidden;

    font-family: var(--font-Roboto-bold);

}

ul.ul-news li:before {

    content: '';

    position: absolute;

    top: 10px;

    left: -20px;

    background: url(images/arrow.png)no-repeat;

    padding: 10px;

}

span#play{

    position: absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    background-image:url('images/ic-youtube.png');

    background-repeat: no-repeat;

    padding:11px 17px

}



.input-newsletter input{

    border-radius:0;

    background:#fff;

    border:1px solid #ccc;

    color:#000;

    height:40px;

    width:280px

}

.input-newsletter input::placeholder,

.input-newsletter input[type="number"]::placeholder,

.input-newsletter input[type="email"]::placeholder{

    font-style:italic;

    color:#000

}

.input-newsletter button{

    width: 100%;

    background-color:#ff6600;

    color:#fff;

    font-weight: bold;

    padding:0px 10px;

    height: 40px;

    border:none;

    margin-left:10px

}

.copy{

    background:var(--html-bg-website);

    color:#fff

}

.box-copy {

    margin-top:20px;

    border-top:1px solid #fff;

    color: #fff;
    background: var(--html-bg-website)

}



.box-popup {

    color: #fff;

    font-size: 18px;

    font-family: var(--font-Roboto-bold);

}



.box-popup:before {

    content: '';

    position: absolute;

    top: -182px;

    left: -285px;

    background: url(images/ic-girl.png)no-repeat;

    height: 230px;

    width: 150px;

}



.box-popup a {

    color: #000;

    border-radius: 20px;

    padding: 8px 20px;

    background: #ffc600;

    font-size: 16px;

    font-family: var(--font-Roboto-bold);

    text-transform: uppercase;

}



.white-popup {

    max-width: 460px;

    margin: 30px auto;

    box-shadow: 0 0 20px -5px #000;

    -webkit-box-shadow: 0 0 20px -5px #000;

    -ms-box-shadow: 0 0 20px -5px #000;

    -o-box-shadow: 0 0 20px -5px #000;

    background-color: #fff;

    position: relative;

}



.popup-body {

    padding: 25px 20px;

    position: relative;

}



.popup-body:before {

    width: 100%;

    left: 0px;

    top: 0px;

    content: '';

    position: absolute;

    height: 5px;

    background-image: linear-gradient(-60deg, var(--html-bg-website) 0%, #86f306 50%, #ec656b 100%);

}



.header-newsletter {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    margin-bottom: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--html-bg-website);

}



.header-newsletter .desc {

    width: calc(100%);

    font-size: 18px;

    text-align: left;

    text-transform: uppercase;

    font-weight: bold;

    color: var(--html-bg-website);

}



.fixed-valid {

    position: absolute;

    right: 0px;

    top: 0px;

    color: #FF0000;

    line-height: 37px;

}



.newsletter-control {

    display: block;

    width: 100%;

    background: #FFF;

    border: 0px;

    border-bottom: 1px solid #e5e5e5;

    outline: none;

    line-height: 30px;

    padding: 0.2rem 0rem;

    transition: all 0.2s;

}



.newsletter-btn {

    display: block;

    width: 100%;

    background: var(--html-bg-website);

    border: 1px var(--html-bg-website);

    outline: none;

    line-height: 40px;

    padding: 0.2rem 0rem;

    border-radius: 30px;

    color: #FFF;

    cursor: pointer;

    text-align: center;

    transition: all 0.2s;

}
/* newsllter */
.input-newsletter{
    margin-bottom:15px;
    background:transparent;
    border-radius:0;
    border:1px solid #fff;
    color:#fff;
}
.input-newsletter::placeholder{
    color:#fff
}
textarea.input-newsletter{
    height: 85px;
}
.btn-newsletter{
    background-color:var(--html-bg-website);
    border-radius:0;
    height: 85px;
    width: 85px;
    border:0;
    font-family: var(--font-Roboto-bold);
}
/* end newsletter */

/*search mobile*/

.input-search {

    align-items: center;

    border-radius: 3px;

    transition-duration: 0.3s

}



input#search_mb {

    border: none;

    height: 36px;

}



input#search_mb::placeholder {

    font-style: italic;

}

form.form-search-mobile {

    border: 1px solid var(--html-bg-website);

}

button#search-btn {

    height: 30px;

    width: 30px;

    background: transparent;

    border: none;

    font-size: 20px;

    color: rgba(0, 0, 0, 0.5);

}



section.box-menu-mobile.mfix {

    height: 51px;

}
section.box-menu-mobile {
    padding: 5px 0px;
}



section.box-menu-mobile.mfix .logo-mobile {

    display: none;

}


section.box-menu-mobile.mfix .form-search {

    position: absolute;

    top: 0;

    right: 0;

    margin: 2px;

    width: 85%;

    transition: all 0.4s;

}
/* PRODUCT */
.cart-fixed {

    position: fixed;

    top: 40%;

    right: 10px;

    z-index: 99999;

}

.box-cart {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: scale(0);

    transition: all 0.4s

}



.thumbnail-ajax:hover .box-cart {

    transform: scale(1);

    transition: all 0.4s

}



.box-cart a.bs-cart {

    border: 1px solid var(--html-bg-website);

    display: inline-block;

    padding: 10px 28px;

    background: #f1ebeb;

    color: #fff;

    text-transform: uppercase;

    position: relative;

    z-index: 12;

}



.box-cart a.bs-cart:hover {

    color: var(--html-bg-website);

}



.box-cart a.bs-cart:before {

    content: "";

    background: var(--html-bg-website);

    z-index: -1;

    -webkit-transform: scale(1, 1);

    transform: scale(1, 1);

    -webkit-transform-origin: left center;

    transform-origin: left center;

    left: -1px;

    top: 0;

    right: -1px;

    position: absolute;

    display: block;

    bottom: 0;

    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);

    transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);

    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);

    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);

}



.box-cart a.bs-cart:hover:before {

    -webkit-transform-origin: right center;

    transform-origin: right center;

    -webkit-transform: scale(0, 1);

    transform: scale(0, 1);

}



.product-fa {

    border: thin solid #f02727;

    color: #f02727;

    background: #fff;

    display: inline-block;

    width: 34px;

    height: 34px;

    line-height: 28px;

    font-size: 18px;

    position: absolute;

    transition: all .2s ease-in-out;

    transform: scale(1);

    left: -45px;

}



.addtocart-product {

    top: 45px;

    transition-delay: .07s;

}



.quickview-product {

    top: 5px;

}



.box-product:hover .product-fa {

    left: 5px;

}



.product-img:hover .product-fa:hover {

    color: #fff;

    border-color: #f02727;

    background: #f02727;

}



.text-product p:nth-child(1) {

    margin: 0;

}



.text-product p:nth-child(2) {

    font-size: 14px;

    color: #f00;

    font-weight: bold;

}



.ajaxBoxproduct {

    margin-bottom: 20px;

}



h3 a.title-name {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    color: var(--html-cl-website);

    text-transform: uppercase;

    font-weight: 600;

}



.desc-ajax h3 a {

    color: #000;

    font-size: 16px;

}



.price-ajax {

    color: #f60000;

    font-size: 16px;

    font-weight: bold;

}



a.mask-ajax {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    background: rgba(239, 171, 87, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    color: #fff;

    transform: scale(0);

    transition: all 0.4s;

}



.thumbnail-ajax:hover a.mask-ajax {

    transform: scale(1);

    transition: all 0.4s;

}



.product-other {

    width: 100%;

    margin: 0 -5px;

}



.box-product {

    padding: 5px;

    overflow: hidden;

    transition: 0.2s all ease;

    border-right: 1px solid #e4e4e4;

    border-bottom: 1px solid #e4e4e4;

}



.box-product:hover {

    box-shadow: 0 0 0 1px var(--html-bg-website) inset;

}



.product-name {

    word-spacing: unset;

    font-family: "Roboto", sans-serif;

    font-size: 14px;

    line-height: 20px;

    margin-top: 5px;

    text-overflow: ellipsis;

    word-spacing: inherit;

    text-align: left;

    display: inline-block;

    overflow: hidden;

    height: 40px;

}



.flex-promotions {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.product-name a {

    color: #555;

    font-size: 14px;

}



.product-name a:hover {

    color: #f00;

}



.fix-col-1 {

    padding: 0px 1px;

}



.product-price-old {

    font-weight: bold;

    text-decoration: line-through;

    color: #5a596b;

    display: inline-block;

}



.product-price {

    font-weight: bold!important;

    color: #ff0000;

    font-size: 14px;

}



.product-commitment {

    background: var(--html-bg-website);

    padding: 10px 15px;

    border: thin solid rgba(0, 0, 0, .1);

    margin-bottom: 15px;

}



.product-commitment-title {

    border-bottom: thin solid rgba(0, 0, 0, .1);

    color: #fff;

    margin: -10px -15px 10px;

    padding: 6px 0px;

    text-align: center;

    font-size: 16px;

}



.title-product-detail {

    font-family: 'Roboto', sans-serif;

    font-size: 20px;

    line-height: 25px;

    border-bottom: 1px solid #999;

    color: #000;

}

.title-index h2 a{

    color:#e50028;

    font-size: 26px;

    font-family: 'UTMa';

    text-transform: capitalize;

}



.border-bottom-dashed{

    border-bottom:1px dashed #ccc;

}

.border-detail {

    border: 1px solid var(--html-bg-website);

    margin-top: 1px;

}

.box-product-detail li {

    line-height: 22px;

    padding: 5px 0px;

    font-size: 13px;

    border-bottom: thin dotted #999;

}



.box-product-detail li::last-child {

    border-bottom: none;

}



.product-detail-price span {

    font-size: 15px;

    color: #f00;

    font-family: "Arial";

}



.product-detail-price-old span {

    font-size: 15px;

    color: #f00;

    text-decoration: line-through;

}



.product-commitment-title span {

    color: #f00;

    text-transform: uppercase;

    font-family: "Arial";

}



.list-product-commitment li {

    color: #333;

    margin-bottom: 7px;

    font-size: 13px;

}



.list-product-commitment .fa {

    color: #f00;

}



.list-addthis {

    padding: 10px 0 5px;

}



.product-detail-addtocart-wish {

    padding: 10px 0px;

    border-bottom: none!important;

}



.product-detail-addtocart {

    background: var(--html-bg-website);

    color: #fff;

    padding: 0px 15px;

    line-height: 36px;

    font-size: 13px;

    display: inline-block;

    vertical-align: middle;

    transition: 0.2s all ease;

}



.product-detail-addtocart:hover {

    color: #fff;

    background: #df5400;

}



.product-detail-addtocart .fa {

    position: relative;

    top: -1px;

    font-size: 17px;

}



.other-news-detail ul {

    padding-inline-start: 40px;

}



.other-news-detail ul li {

    list-style: initial;

}



.block-product {

    background: #f7f7f7;

}



.block-title {

    background: var(--html-bg-website);

    font-size: 16px;

    color: #fff;

    text-transform: uppercase;

    line-height: 40px;

    padding: 0px 10px;

    font-family: "Arial";

    border: thin solid rgba(0, 0, 0, .1);

    font-weight: bold;

}



.list-block-cate {

    padding: 5px 10px;

    border: thin solid rgba(0, 0, 0, .07);

}



.list-block-cate li {

    position: relative;

    padding: 5px 5px 5px 20px;

}



.list-block-cate li:before {

    content: "";

    position: absolute;

    left: 5px;

    top: 12px;

    width: 0;

    height: 0;

    border-top: 5px solid transparent;

    border-bottom: 5px solid transparent;

    border-left: 5px solid var(--html-bg-website);

}



.list-block-cate li a {

    color: #333;

    font-size: 15px;

    transition: 0.2s all ease;

}



.list-block-cate li a:hover {

    color: #f00;

}



.list-block-post {

    padding: 10px;

    border: thin solid rgba(0, 0, 0, .07);

}



.list-block-post li {

    margin-bottom: 10px;

}



.list-block-post li:last-child {

    margin-bottom: 0;

}



.product-noibat-img {

    width: 65px;

    border: thin solid #ccc;

    padding: 2px;

    float: left;

    margin-right: 10px;

    transition: 0.2s all ease;

}



.product-noibat-img:hover {

    border-color: #f00;

}



.product-noibat h4 {

    font-size: 14px;

    margin: 0px 0px 5px;

    line-height: 20px;

}



.product-noibat h4 a {

    color: #333;

    transition: 0.2s all ease;

}



.product-noibat h4 a:hover {

    color: #f00;

}



.product-noibat span {

    color: #f00;

}



.promotion-index {

    background: #f2f2f2;

    margin: 20px 0;

    padding: 20px 0;

}



.title-promotion h2 {

    font-size: 19px;

    position: relative;

    border-bottom: thin solid #ccc;

    margin-bottom: 10px;

    padding-bottom: 15px;

    text-transform: uppercase;

}



.title-promotion h2:before {

    width: 100px;

    content: "";

    height: 3px;

    bottom: -1px;

    left: 0;

    position: absolute;

    background: #ef4136;

}



.product-promotion {

    background: url(images/icon-khuyenmai3.png) no-repeat;

    width: 45px;

    height: 45px;

    line-height: 45px;

    color: #fff;

    position: absolute;

    top: 2px;

    right: 5px;

    text-align: right;

    font-size: 13px;

    padding-right: 7px;

}



.box-number {

    border: 1px solid #ccc;

    border-radius: 15px;

}



.btn-detail {

    font-size: 16px;

    display: block;

    padding: 0px 10px;

}



input[name="number-change"] {

    width: 40px;

    border: none;

    background: none;

    height: 30px;

}


.w-label {
    width: 86px;
    display: inline-block;
    font-weight: 700;
}

.wrap_qty {
    position: relative;
    display: flex;
}

.wrap_qty span.up,
.wrap_qty span.down {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 1px solid #dfdfdf;
    line-height: 25px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    font-family: var(--font-utmavobold);
}

.input-text.qty {
    height: 28px;
    text-align: center;
    margin-left: -1px;
}

.wrap_qty input {
    background: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 2px;
    padding: 0px 0px 0px 0px;
    width: 40px;
}

.wrap_qty span.up {
    margin-left: -1px;
}

a.btn_site_3:hover,
a.btn_site_3,
.btn_site_3:hover,
.btn_site_3 {
    background: #898989;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

button.btn_site_2,
button.btn_site_2:hover,
a.btn_site_2:hover,
a.btn_site_2,
.btn_site_2:hover,
.btn_site_2 {
    background: #c32c2c;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}


.flex-cart{
    display: flex;
    justify-content:center;
    align-items:center;
}
button.btn-default{
    height:35px;
    width:30px;
    background:#fff;
    border:1px solid #ccc;
    font-size:16px;
}
button.btn-minus{
    border-radius:30px 0px 0px 30px;
    border-right:none;
}  
button.btn-plus{
    border-radius:0px 30px 30px 0px;
    border-left:none;
}   

/* END PRODUCT */





/* num cart */



.number-detail {

    display: inline-block;

    height: 25px;

    line-height: 25px;

    border: 1px solid #dedede;

    min-width: 42px;

    padding: 0 10px;

    vertical-align: middle;

    position: relative;

    background: #fff;

    margin-left: 5px;

    border-radius: 4px;

}



.number-detail::before {

    width: 10px;

    height: 10px;

    border: 5px solid transparent;

    border-right: 5px solid #dedede;

    margin-top: -5px;

}



.number-detail::before,

.number-detail::after {

    content: '';

    display: block;

    position: absolute;

    top: 50%;

    right: 100%;

}



.number-detail::after {

    width: 8px;

    height: 8px;

    border: 4px solid transparent;

    border-right: 4px solid #fff;

    margin-top: -4px;

}


/*MAIL FOOTER*/
.title-mail{
    font-size: 20px;
    font-family: var(--font-roboto-bold);
    text-transform: uppercase;
    color: #fff
}
.border-bottom-ff{
    border-bottom: 1px solid #ccc
}
.main-mail{
    width: 1000px;
    margin: 0 auto;
}
.sectionMail{
    background: var(--bg-mail);
}
.ic::placeholder{
    color: #fff
}
textarea.ic{
    height: 120px;
    margin-bottom: 25px;
}
.ic{
    border: 1px solid #fff;
    padding: 12px 15px;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    color: #fff;
    position: relative;
}
.submit-mail {
    border: none;
    padding: 12.5px 10px;
    color: var(--html-bg-website);
    font-size: 15px;
    background: #fff;
    width: 100%;
    text-transform: uppercase;
    font-family: var(--font-roboto-bold)
}
.mail-ff p{
    color: #fff;
    font-size: 14px
}
/*GARDEN*/
.content-garden h3 a{
    font-size: 16px;
    font-family: var(--font-roboto-bold);
    color: #000
}
.items-graden1{
    position: relative;
    left: 50px;
}
.items-graden4{
    position: relative;
    right: 50px;
}

/* CONTACT */



#map_canvas {

    height: 400px;

    margin: 20px 0;

}



.map_title h2 {

    font-size: 16px;

}



.box_contact {

    border-top: 2px solid #ccc;

    margin-top: 25px;

    padding-top: 25px;

    margin-bottom: 15px;

}



.title_contact h2 {

    font-size: 24px;

    text-transform: uppercase;

    margin-bottom: 15px;

    margin-top: 20px;

    font-weight: normal;

    font-family: 'Arial';

}



.magin-contact {

    margin-bottom: 15px;

}



.magin-contact input.form-control {

    border-radius: 0px;

    height: 36px;

    font-size: 14px;

    font-family: "UTMAvo";

    padding-left: 17px;

    font-weight: normal;

}

.magin-contact textarea.form-control {

    border-radius: 0px;

    font-family: "UTMAvo";

    font-size: 15px;

    border: thin solid #000;

    box-shadow: 0 0 0 0;

    padding-left: 17px

}



.magin-contact.form-control:focus {

    border-color: #66afe9;

    outline: 0;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);

}



/* END CONTACT */

/* ======== footer ======== */



.rows-newsletter {

    padding: 10px;

    background: #fff;

    border: none;

    width: 78%;

}



.rows-newsletter::placeholder {

    color: #000;

    font-style: italic;

}



.submit-newsletter {

    padding: 10px 15px;

    border: none;

    background: var(--html-bg-website);

    color: #fff;

    text-transform: uppercase;

}



.title-footer {

    font-size: 16px;

    color: #000;

    position: relative;

    text-transform: uppercase;

    font-family: var(--font-roboto-bold);

}



.title-footer:before {

    content: '';

    position: absolute;

    bottom: -8px;

    left: 0;

    height: 2px;

    width: 70px;

    background: #000;

    border-radius: 15px;

}



.desc-footer a {

    color:#000;

    line-height: 25px;

}



.desc-footer a:hover {

    color: #f00;

}
.map-footer iframe{
    width: 100%;
    height: 173px
}
div#custom-content {
    background: #fff;
    padding: 20px;
}
.cssmap{
    display:inline-block;
    margin-bottom:10px
}

.iframe-map iframe {

    width: 100%;

}



.link-web {

    color: #eab741;

}



.desc-footer i.fa-map-marker {

    color: var(--html-bg-website);

}



.visitors {

    background: #fff;

    width: 170px;

    padding: 10px 25px;

}



.title-visitor.ds-center {

    font-size: 16px;

    font-weight: 600;

}



.visitors p {

    margin: 0;

    font-weight: 600;

}



ul.info_bank li {

    display: inline-block;

}



ul.info_bank li a.active {

    border: 1px solid #f00;

    display: block

}



.tags-class,

.tags-class a {

    color: #fff

}



.box-tag {

    border-top: 1px solid #fff

}



div a.news-order-detail {

    display: table;

    padding: 5px 0px;

    transition: all 0.4s

}



div a.news-order-detail:hover {

    padding-left: 10px;

    transition: all 0.4s

}







/*mang xa hoi*/
ul.mangxahoi li {

    display: inline-block;

    padding-top: 10px;

    padding-right: 5px;

}

/* ======== NEWS ======== */

.box-post {

    margin-bottom: 20px;

    font-size: 13px;

    color: #686868;

    border-bottom: thin solid #ccc;

}



.post-img {

    display: block;

    padding: 5px;

    background: #fff;

    box-shadow: 5px 5px 0px 0px #bebebe;

    overflow: hidden;

    position: relative;

    border: thin solid #bebebe;

    margin-bottom: 20px;

}



.post-img:before {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    margin: auto;

    background: rgba(0, 0, 0, .7);

    content: "";

    transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    opacity: 0;

}



.post-img:hover:before {

    opacity: 1;

}
.post-img:hover span {

    opacity: 1;

    transform: scale(1.5, 1.5);

    -webkit-transform: scale(1.5, 1.5);

    -moz-transform: scale(1.5, 1.5);

    -o-transform: scale(1.5, 1.5);

    -ms-transform: scale(1.5, 1.5);

}
.post-img span {

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    border: 2px solid #fff;

    color: #fff;

    height: 30px;

    width: 30px;

    font-size: 14px;

    text-align: center;

    line-height: 24px;

    font-weight: 100;

    margin-top: -15px;

    margin-left: -15px;

    opacity: 0;

    border-radius: 50%;

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

    -o-border-radius: 50%;

    -ms-border-radius: 50%;

    transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    transform: scale(0.2, 0.2);

    -webkit-transform: scale(0.2, 0.2);

    -moz-transform: scale(0.2, 0.2);

    -o-transform: scale(0.2, 0.2);

    -ms-transform: scale(0.2, 0.2);

}



h3.post-name {

    margin-bottom: 10px;

    font-size: 13px;

    line-height: 18px;

    font-family: "Arial";

    text-transform: uppercase;

    height: 40px;

    overflow: hidden;

}



h3.post-name a {

    color: #333;

    transition: 0.2s all ease;

    font-weight: 600;

}



h3.post-name a:hover {

    color: var(--html-bg-website);

}



.post-date {

    border-top: thin solid #dedede;

    border-bottom: thin solid #dedede;

    line-height: 30px;

}

.post-desc {

    margin-bottom: 20px;

}

.post-view {

    color: #999999;

    font-size: 12px;

    padding-left: 30px;

    background: url(images/icon/icon-callenda.png) center left no-repeat;

    line-height: 25px;

    display: block;

}
.other-news {

    margin-top: 15px;

}
.other-news ul,.other-news ol{

    display: block;

    margin-block-start: 1em;

    margin-block-end: 1em;

    margin-inline-start: 0px;

    margin-inline-end: 0px;

    padding-inline-start: 40px;

}

.other-news ul li {

    list-style: inherit;

}

.other-news h3 {

    color: #969696;

    padding-bottom: 5px;

    font-family: 'Arial';

    font-size: 18px;

    margin-bottom: 7px;

}

.other-news a,

.other-news {

    font-size: 14px;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    transition: all 0.3s ease;

    font-family: 'Open Sans', sans-serif;

}
/* ======== END NEWS ======== */
/* ============toc list ==================*/

.toc-wrapper{
    background: #f9f9f9;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    display: table;
    width: 40%;
    margin-bottom: 1em;
    padding: 10px;
    position: relative;
}
.toc-title-container{
    display:table;
    width: 100%;
}
span.toc-switch {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}
.toc-switch a#toc{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    margin-left: 10px;
    text-shadow: 0 1px 0 #fff;
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    background-repeat: repeat-x;
    border-color: #dbdbdb;
    border-color: #ccc;
    color: #444;
    cursor: pointer;
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.toc-switch a#toc:focus,.toc-switch a#toc:hover {
    background-color: #e0e0e0;
    background-position: 0 -15px;
}
.toc-list ol li a {
    font-family: 'Roboto',sans-serif;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    text-transform: lowercase;
    z-index: 0;
    overflow-x: hidden;
}
.toc-list a:hover {
    text-decoration: underline;
}
.toc-list a:visited {
    color: #9f9f9f;
}
.toc-list ol{
    counter-reset: item;
}
.toc-list>ol>li ol{
    margin-left:1.5em
}

.toc-list ol li a::before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}
/* ====================end============== */
/* PAGING */
.paging {

    text-align: center;

    margin: 0 auto;

}

.pagination>li>a,

.pagination>li>span {

    padding: 0px 9px;

    line-height: 23px;

    margin: 0px 3px;

    text-align: center;

    font-size: 16px;

    color: var(--html-bg-website);

    border-color: #a7a7a7;

}

.pagination>li>a, .pagination>li>span {

    border: 1px solid var(--html-bg-website);

}

.pagination>li>a:focus,

.pagination>li>a:hover,

.pagination>li>span:focus,

.pagination>li>span:hover,

.pagination>li>a.current {

    z-index: 2;

    color: #fff;

    background-color: #fff;

    border-color: var(--html-bg-website);

    background-color:var(--html-bg-website);

    font-weight: 600;

}



.pagination .page_info {

    position: relative;

    top: 4px;

    margin-left: 5px;

    font-size: 12px;

    display:none

}
.pagination>li:last-child>a,

.pagination>li:last-child>span {

    border-radius: 0px;

}

/* END PAGING */

/*breadcumb*/

ol#breadcrumb {

    height: 34px;

    overflow: hidden;

    margin-bottom: 15px;

    margin-top: 10px;

}

ol#breadcrumb li {

    float: left;

    height: 34px;

    line-height: 34px;

    padding-left: 20px;

    position: relative;

}

ol#breadcrumb li+li:after {

    content: '';

    width: 6px;

    height: 6px;

    border-top: 1px solid #333;

    border-right: 1px solid #333;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

    position: absolute;

    left: 5px;

    top: 15px;

}

ol#breadcrumb li:nth-child(1) {

    padding-left: 0px;

    width: 15px;

}

ol#breadcrumb li a {

    color: #333;

    font-size: 12px;

}

ol#breadcrumb li:nth-child(1) a span {

    font-size: 16px;

}

.noselect {

    -webkit-touch-callout: none;

    /* iOS Safari */

    -webkit-user-select: none;

    /* Safari */

    -khtml-user-select: none;

    /* Konqueror HTML */

    -moz-user-select: none;

    /* Firefox */

    -ms-user-select: none;

    /* Internet Explorer/Edge */

    user-select: none;

}



.tf-hover img {

    transition: all 1s ease 0s;

}

.tf-hover img:hover {

    transform: scale(1.1);

}

.hover-fade {

    position: relative;

    overflow: hidden;

}

.hover-fade:before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.5);

    content: '';

    z-index: 10;

    -webkit-transition: -webkit-transform 0.6s;

    transition: transform 0.6s;

    -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);

    transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);

}

.hover-fade:hover:before {

    webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);

    transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);

}
.hover-zoom img:hover{
    transform: scale(0.9);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    -webkit-transform: scale(0.9);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -moz-transform: scale(0.9);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
}
.hover-zoom img {
    transform: scale(1);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    -webkit-transform: scale(1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -moz-transform: scale(1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
}

.blinker {

    webkit-animation-name: blinker;

    -webkit-animation-duration: 1200ms;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;

    -moz-animation-duration: 1200ms;

    -moz-animation-timing-function: linear;

    -moz-animation-iteration-count: infinite;

    animation-name: blinker;

    animation-duration: 1200ms;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

@keyframes blinker {

    0% {

        opacity: 1.0;

    }

    50% {

        opacity: 0.0;

    }

    100% {

        opacity: 1.0;

    }

}

/*back-to-top*/

#back-to-top .top {

    margin: 0;

    color: #fff;

    transition: all .5s ease;

    position: fixed;

    opacity: 0;

    bottom: 0px;

    right: 15px;

    border-radius: 3px;

    z-index: 999;

    font-size: 14px;

    background: var(--html-bg-website);

    width: 40px;

    height: 40px;

    text-align: center;

    cursor: pointer;

    transition: all 0.6s;

}

#back-to-top .top.animate_top {

    opacity: 1;

    bottom: 105px;

}

#back-to-top i {

    padding-top: 2px;

    font-size: 20px;

}

#back-to-top span {

    display: block;

    line-height: 8px;

    font-size: 11px;

}

/* loading */

#loader-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 9999999999

}



#loader {

    display: block;

    position: relative;

    left: 50%;

    top: 50%;

    width: 150px;

    height: 150px;

    margin: -75px 0 0 -75px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color: #019444;

    -webkit-animation: spin 2s linear infinite;

    animation: spin 2s linear infinite;

    z-index: 1001;

}

#loader:before {

    content: "";

    position: absolute;

    top: 5px;

    left: 5px;

    right: 5px;

    bottom: 5px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color: #e74c3c;

    -webkit-animation: spin 3s linear infinite;

    animation: spin 3s linear infinite

}

#loader:after {

    content: "";

    position: absolute;

    top: 15px;

    left: 15px;

    right: 15px;

    bottom: 15px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color: #8EC640;

    -webkit-animation: spin 1.5s linear infinite;

    animation: spin 1.5s linear infinite

}

#loader-wrapper .loader-section {

    position: fixed;

    top: 0;

    width: 51%;

    height: 100%;

    background: #FFF;

    z-index: 1000;

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0)

}

#loader-wrapper .loader-section.section-left {

    left: 0

}

#loader-wrapper .loader-section.section-right {

    right: 0

}

.loaded #loader-wrapper .loader-section.section-left {

    -webkit-transform: translateX(-100%);

    -ms-transform: translateX(-100%);

    transform: translateX(-100%);

    -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

    transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000)

}

.loaded #loader-wrapper .loader-section.section-right {

    -webkit-transform: translateX(100%);

    -ms-transform: translateX(100%);

    transform: translateX(100%);

    -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

    transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000)

}

.loaded #loader {

    opacity: 0;

    -webkit-transition: all .3s ease-out;

    transition: all .3s ease-out

}

.loaded #loader-wrapper {

    visibility: hidden;

    -webkit-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    transform: translateY(-100%);

    -webkit-transition: all .3s 1s ease-out;

    transition: all .3s 1s ease-out

}

.no-js #loader-wrapper {

    display: none

}

@-webkit-keyframes spin {

    0% {

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg)

    }

    100% {

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes spin {

    0% {

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg)

    }

    100% {

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}

/* Nâng cấp */
.logo-header__menu>a>img{
    width: 100%;
    height: auto;
    object-fit: cover;
    -o-object-fit: cover;
    -ms-object-fit: cover;
    -webkit-object-fit: cover;
    -moz-object-fit:cover;
    aspect-ratio: 285 / 110;
}
ul.ul-menu>li>h2>a>img,ul.ul-menu>li>a>img{
    font-size: 16px;
    color:#000;
    font-weight: bold;
}
.logo-header__items{
    display: none;
}
.wrapper-login__menu{
    padding: 5px 10px !important;
    border: 1px solid var(--html-bg-website);
    border-radius: 5px;
}
.cssMenu.mfix .logo-header__items{
    display: block;
}
.cssMenu.mfix .logo-header__items{
    width: 10%;
}
.ul-menu>li:last-child>a:hover::before,.ul-menu>li:last-child>h2>a:hover::before{
    display: none;
}

/* Sao lấp lánh */

@keyframes star {
    0% {
        transform: rotate(0) scale(0);
    }
    50% {
        transform: rotate(180deg) scale(1.5);
    }
    100% {
        transform: rotate(360deg) scale(0);
    }
}

.star-box {
    width: 60%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.star-animate {
    z-index: 124 !important;
    width: 100%;
    height: 100%;
    animation: star linear 1.55s infinite;
    -moz-animation: star linear 1.55s infinite;
    -webkit-animation: star linear 1.55s infinite;
    -o-animation: star linear 1.55s infinite;
}


/* End sao lấp lánh */

/* Menu mobile */
/* Menu mobile*/

.box-modal-menu {
    position: fixed;
    padding-top: 53px;
    top: 0px;
    left: 0;
    background-color: #f9f9f9;
    z-index: 120;
    height: 100vh;
    width: 100vw;
    transition: all 0.3s ease-in-out;
    transform: translateX(-100%);
    overflow-y: scroll;
}

.box-modal-menu.active{transform: translateX(0)}

.box-modal-menu ul.menu_list{ background-color: #fff;}
ul.menu_list>li:nth-child(n+2) {
    border-top: 1px solid #d2d2d2;
}
ul.inner{display: none;list-style: none;padding-inline-start: 0;}
.box-modal-menu ul.menu_list li a:not(.toggle-btn) {
    font-size: 14px;
    width: calc(100% - 40px);
    color: #000;
    padding: 12px 20px;
    display: block;
    font-family:var(--root-font-sans-serif);
    transition: all 0.3s ease-in-out;
}
ul.menu_list li{transition: all 0.5s ease-in-out;}
ul.menu_list>li>ul{background-color:var(--html-bg-website);}
ul.menu_list>li>ul li{border-top:1px solid #d2d2d2;}
ul.menu_list>li>ul> li a{color: #fff !important;}
.ic-arrow.active{transform: translateY(-50%) rotate(180deg);}
ul.menu_list>li ul {padding-inline-start: 20px;}
ul.menu_list li.active {background-color: var(--html-bg-website);}
ul.menu_list li.active a{color:#fff !important;}
ul.menu_list li.active .ic-arrow span::before,ul.menu_list li.active .ic-arrow span::after,.ic-arrow.active span::before,.ic-arrow.active span::after{background-color:#fff;}
.box-modal-menu ul>li>ul>li>a {
    padding-left: 20px;
    font-size: 14px;
    text-transform: capitalize;
}

.box-modal-menu ul>li>ul {
    display: none;
}
.bg-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 130;
}
.area-top-m {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 131;
    background-color: #fff;
}
.sticky{box-shadow: 2px 2px 7px #ccc;}
/* End Menu mobile*/

/* New mobi top */
.mobi-top {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.mobi-top .menu-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--html-bg-website);
}
.mobi-top .logo img{
    max-height: 30px;
}
.mobi-top .search{padding-right: 10px;}
span.bars-menu {
    position: relative;
    display: block;
    height: 3px;
    width: 20px;
    background-color: #fff;
    border-radius: 5px;
    margin: 8px 0px;
}
span.bars-menu::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
    border-radius: 5px;
    bottom: 8px;
    left: 0;
    -webkit-transition: bottom .3s cubic-bezier(.23, 1, .32, 1) .3s, -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
    transition: bottom .3s cubic-bezier(.23, 1, .32, 1) .3s, transform .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
    -o-transition: bottom .3s cubic-bezier(.23, 1, .32, 1) .3s, transform .3s cubic-bezier(.23, 1, .32, 1);
}
span.bars-menu.active::before{
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: bottom .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
    transition: bottom .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1) .3s, -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
    -o-transition: bottom .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
}

span.bars-menu::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 5px;
    background-color: #fff;
    top: 8px;
    left: 0;
    -webkit-transition: bottom .3s cubic-bezier(.23, 1, .32, 1) .3s, -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
    transition: bottom .3s cubic-bezier(.23, 1, .32, 1) .3s, transform .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
    -o-transition: bottom .3s cubic-bezier(.23, 1, .32, 1) .3s, transform .3s cubic-bezier(.23, 1, .32, 1);
}

span.bars-menu.active::after{
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: bottom .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
    transition: bottom .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1) .3s, -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
    -o-transition: bottom .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
}
span.bars-menu.active{background-color: transparent;}
/* End New mobi top */

/* Anchor */
ul.social_list>li+li{margin-top:2px;}
ul.social_list>li>div:nth-child(1) {
    background: #fff;
    padding: 12px 0;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    text-align: center;
    transition: all .5s ease-in-out;
}
ul.social_list>li>div:nth-child(1).active{
    box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
}
ul.social_list>li>div:nth-child(1).active .ic-arrow{transform: translateY(-50%) rotate(180deg);}
.ic-arrow {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    transition: all .5s ease-in-out;
}
.ic-arrow span {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}
.ic-arrow span::before {
    width: 9.5px;
    height: 2px;
    content: "";
    position: absolute;
    background-color: var(--html-bg-website);
    top: 50%;
    border-radius: 25px;
    left: 0;
    transform: translateY(-50%) rotate(40deg);
}
.ic-arrow span::after {
    width: 9.5px;
    height: 2px;
    content: "";
    position: absolute;
    background-color: var(--html-bg-website);
    top: 50%;
    right: 0;
    border-radius: 25px;
    transform: translateY(-50%) rotate(-40deg);
}
ul.tienich_list {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
ul.social_list>li>div:nth-child(2) {
    background: #f9f9f9;
    padding: 20px;
    display: none;
}
ul.lienhe_list li a i.tienich::before{
    content: "";
    position:absolute;
    left:50%;
    top: 50%;
    transform:translate(-50%,-50%);
    width: 40px;
    height: 40px;
    background-position: center center;
    background-size: 100%;
}
ul.lienhe_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
ul.lienhe_list li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.lienhe_list li i {
    width: 50px;
    display: block;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #d1d1d1;
    position: relative;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}

ul.lienhe_list li a i.tool-zalo::before {  
    background-image: url(../../../images/zalo.svg);
}
ul.lienhe_list li a i.tool-messenger::before {  
    background-image: url(../../../images/messenger.svg);
}
ul.lienhe_list li a i.tool-map::before {  
    background-image: url(../../../images/map-marker.svg);
}
ul.lienhe_list li a i.tool-tm{
    background-position: center center;
    background-repeat: no-repeat;
    background-size:40px 40px;
}
/* New Anchor */

/* box search mobile */
.box-search-mobile input {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 0px;
    padding: 0px 10px;
}
.box-search-mobile{
    position: relative;
    border:1px solid #e0e0e0;
    border-radius: 5px;
}
.box-search-mobile button {
    position: absolute;
    right: 0px;
    top: 50% !important;
    transform: translate(0px,-50%);
    background-color: transparent;
    border: 0px;
    padding: 10px 10px;
}

/* End box search mobile */
/* End */

/* End */
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 123;
    box-shadow: 2px 2px 7px #ccc;
}

/* Login */

.wrapper-login{
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.wrapper-login__form{
    border-radius: 5px;
    padding: 20px 30px;
    background: rgba(0, 0, 0, .6);
    width: 100%;
    box-shadow: 2px 2px 7px var(--html-bg-website);

}
.wrapper-login__form-group>input{
    font-size: 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--html-bg-website);
    height: 35px;
    line-height: 35px;
    outline: none;
    color: #fff;
    width: 100%;
    font-weight: normal;
}
.wrapper-login__form-group>input::placeholder{
    color: #fff;
    font-size: 16px;
}
.wrapper-login__form-title{
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    
}

.wrapper-login__form-title>span{
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}

.wrapper-login__form-group-btn>button{
    width: 100%;
    height: 35px;
    background: var(--html-bg-website);
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}
.wrapper-login__form-group-btn>button:hover{
    background:red;
    color: #fff;
}
.Forgot-password{
    color: #fff;
    font-size: 14px;
}
.Forgot-password:hover{
    color: var(--html-bg-website);
}
.question-register{
    color: #fff;
}
.question-register-text{
    color: var(--html-bg-website);
}
.wrapper-login__backhome{
    font-size: 14px;
    color: #fff;
}
.wrapper-login__backhome:hover{
    color: var(--html-bg-website);
}

label.checker label:before {
    content: "";
    display: block;
    position: absolute;
    left: 2px;
    top: 7px;
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--html-bg-website);
    border-bottom: 2px solid var(--html-bg-website);
    -webkit-transform: scale(0) rotate(-45deg);
    transform: scale(0) rotate(-45deg);
    -webkit-transition: transform 0.1s ease 0s;
    transition: transform 0.1s ease 0s;
}
.checker{
    font-weight: normal;
    gap: 5px;
}
label.checker label {
    height: 15px;
    width: 15px;
    border: 1px solid var(--html-bg-website);
}
label.checker input[type="checkbox"]:checked+label.checked-fake:before {
    -webkit-transform: scale(1) rotate(-45deg);
    transform: scale(1) rotate(-45deg);
}
.wrap-login-aside-form-detail-group-aside{
    display: flex;
    align-items: center;
}
.checker input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
label.checker input {
    position: absolute;
    left: -9999px;
}
.mg0{
    margin: 0;
}
.d-flex {

    display: -webkit-box !important;
  
    display: -ms-flexbox !important;
  
    display: flex !important
  
  }
  
  .d-inline-flex {
  
    display: -webkit-inline-box !important;
  
    display: -ms-inline-flexbox !important;
  
    display: inline-flex !important
  
  }
  
  .flex-row {
  
    -webkit-box-orient: horizontal !important;
  
    -webkit-box-direction: normal !important;
  
    -ms-flex-direction: row !important;
  
    flex-direction: row !important
  
  }
  
  .flex-column {
  
    -webkit-box-orient: vertical !important;
  
    -webkit-box-direction: normal !important;
  
    -ms-flex-direction: column !important;
  
    flex-direction: column !important
  
  }
  
  .flex-row-reverse {
  
    -webkit-box-orient: horizontal !important;
  
    -webkit-box-direction: reverse !important;
  
    -ms-flex-direction: row-reverse !important;
  
    flex-direction: row-reverse !important
  
  }
  
  .flex-column-reverse {
  
    -webkit-box-orient: vertical !important;
  
    -webkit-box-direction: reverse !important;
  
    -ms-flex-direction: column-reverse !important;
  
    flex-direction: column-reverse !important
  
  }
  
  .flex-wrap {
  
    -ms-flex-wrap: wrap !important;
  
    flex-wrap: wrap !important
  
  }
  
  .flex-nowrap {
  
    -ms-flex-wrap: nowrap !important;
  
    flex-wrap: nowrap !important
  
  }
  
  .flex-wrap-reverse {
  
    -ms-flex-wrap: wrap-reverse !important;
  
    flex-wrap: wrap-reverse !important
  
  }
  
  .justify-content-start {
  
    -webkit-box-pack: start !important;
  
    -ms-flex-pack: start !important;
  
    justify-content: flex-start !important
  
  }
  
  .justify-content-end {
  
    -webkit-box-pack: end !important;
  
    -ms-flex-pack: end !important;
  
    justify-content: flex-end !important
  
  }
  
  .justify-content-center {
  
    -webkit-box-pack: center !important;
  
    -ms-flex-pack: center !important;
  
    justify-content: center !important
  
  }
  
  .justify-content-between {
  
    -webkit-box-pack: justify !important;
  
    -ms-flex-pack: justify !important;
  
    justify-content: space-between !important
  
  }
  
  .justify-content-around {
  
    -ms-flex-pack: distribute !important;
  
    justify-content: space-around !important
  
  }
  
  .align-items-start {
  
    -webkit-box-align: start !important;
  
    -ms-flex-align: start !important;
  
    align-items: flex-start !important
  
  }
  
  .align-items-end {
  
    -webkit-box-align: end !important;
  
    -ms-flex-align: end !important;
  
    align-items: flex-end !important
  
  }
  
  .align-items-center {
  
    -webkit-box-align: center !important;
  
    -ms-flex-align: center !important;
  
    align-items: center !important
  
  }
  
  .align-items-baseline {
  
    -webkit-box-align: baseline !important;
  
    -ms-flex-align: baseline !important;
  
    align-items: baseline !important
  
  }
  
  .align-items-stretch {
  
    -webkit-box-align: stretch !important;
  
    -ms-flex-align: stretch !important;
  
    align-items: stretch !important
  
  }
  
  .align-content-start {
  
    -ms-flex-line-pack: start !important;
  
    align-content: flex-start !important
  
  }
  
  .align-content-end {
  
    -ms-flex-line-pack: end !important;
  
    align-content: flex-end !important
  
  }
  
  .align-content-center {
  
    -ms-flex-line-pack: center !important;
  
    align-content: center !important
  
  }
  
  .align-content-between {
  
    -ms-flex-line-pack: justify !important;
  
    align-content: space-between !important
  
  }
  
  .align-content-around {
  
    -ms-flex-line-pack: distribute !important;
  
    align-content: space-around !important
  
  }
  
  .align-content-stretch {
  
    -ms-flex-line-pack: stretch !important;
  
    align-content: stretch !important
  
  }
  
  .align-self-auto {
  
    -ms-flex-item-align: auto !important;
  
    align-self: auto !important
  
  }
  
  .align-self-start {
  
    -ms-flex-item-align: start !important;
  
    align-self: flex-start !important
  
  }
  
  .align-self-end {
  
    -ms-flex-item-align: end !important;
  
    align-self: flex-end !important
  
  }
  
  .align-self-center {
  
    -ms-flex-item-align: center !important;
  
    align-self: center !important
  
  }
  
  .align-self-baseline {
  
    -ms-flex-item-align: baseline !important;
  
    align-self: baseline !important
  
  }
  
  .align-self-stretch {
  
    -ms-flex-item-align: stretch !important;
  
    align-self: stretch !important
  
  }

  .wrapper-login__form-group .error{
        margin-top: 10px;
        font-weight: normal;
        font-size: 14px;
        color: var(--html-bg-website);

  }

  .wrapper-registers{
    height: 100vh;
    padding: 30px 0;
    display: flex;
    align-items: center;
  }

  #email-error{

    margin-top: 5px;
    font-weight: normal;
    color: var(--html-bg-website);
    
  }

  /*loadding*/

.loading {



    opacity: 1 !important;



    position: relative;



    color: rgba(255,255,255,0)!important;



    pointer-events: none !important;



}



.loading:after {



    animation: spinLoading 500ms infinite linear;



    border: 2px solid #ccc;



    border-radius: 32px;



    border-right-color: transparent !important;



    border-top-color: transparent !important;



    content: "";



    display: block;



    height: 16px;



    top: 50%;



    margin-top: -8px;



    left: 50%;



    margin-left: -8px;



    position: absolute;



    width: 16px;



}
@keyframes spinLoading{



    0%{



        transform:rotate(0deg)



    }



    100%{



        transform:rotate(360deg)



    }



}
.wrapper-member{
    padding: 30px 0;
}
.panel-format{
    border: 1px solid var(--html-bg-website);
}
.panel-format>.panel-heading{
    background: var(--html-bg-website);
    color: #000;
    
}
/* End */

/* Template thành viên */
.list-group-item--modifers.acitve{
    background-color: var(--html-bg-website) !important;
}
.list-group-item.active{
    background: red;
    color: #fff;
    border: 1px solid red;
    
}
.list-group-item.active:hover{
    background:var(--html-bg-website);
    color: #fff;
    border: 1px solid var(--html-bg-website);
}
.list-group-item:hover{
    background:var(--html-bg-website);
    color: #fff;
    border: 1px solid var(--html-bg-website);
}
.panel-title{
    color: #fff;
    font-weight: bold;
}
.wrapper-aside__info-student-title>span{
    font-size: 24px;
    color: var(--html-bg-website);
    font-weight: bold;
}
.box-shadown-tpl{
    box-shadow: 2px 2px 7px #ccc;
}
.wrapper-exam-home{
    padding: 30px 0;
}
.panel-default--modifiers>.panel-heading{
    background: var(--html-bg-website);
    color: #fff;
}
.wrapper-exam-home-title{
    font-size: 24px;
    color: #000;
}

.wrapper-exam-home-title>span{
    display: inline-block;
    color: #000;
    position: relative;
}

.wrapper-exam-home-title>span::before{
    content:"";
    position: absolute;
    top: 120%;
    width: 70px;
    height: 3px;
    background: var(--html-bg-website);
    left: 50%;
    transform: translateX(-50%);
}
.wrapper-exam-home__caption{
    font-size: 20px;
    color: #000;
}
.wrapper-exam-home__caption>img{
    width: 30px ;
    margin-right: 5px;
}
/* End */

/* Question */
.wrapper-exam-question{
    padding: 30px 0;
}
.wrapper__questionleft-img>span>img{
    width: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    -ms-object-fit: cover;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    height: auto;
}

ul.pagination-question {
    display: flex;
    justify-content: start;
    align-items: center;
}

ul.pagination-question li {
    margin-right: 10px;
}

ul.pagination-question li.actived a {
    color: var(--html-bg-website);
    cursor: pointer;
    border: 1px solid var(--html-bg-website);
}

ul.pagination-question li a {
    display: block;
    cursor: pointer;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    color: #9e9e9e;
    min-width: 3rem;
    height: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rbt-medium),Arial, Helvetica, sans-serif;
    border-radius: 5px;
}
ul.pagination-question li a i {
    font-size: 1.4rem;
    color: #9e9e9e;
}
ul.pagination-question li a:hover{
    background: var(--html-bg-website);
    color: #fff;
}
.wrapper-next-prev{
    gap: 5px;
}
.wrapper-exam-question__top-title{
    font-size: 14px;
    color: red;
}
.wrapper-exam-question__leftscroll{
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.wrapper-exam-question__leftscroll::-webkit-scrollbar {
    width: 6px;
    background-color: var(--html-bg-website);
    border-radius: 0.5rem;
}
.wrapper-exam-question__leftscroll::-webkit-scrollbar-thumb {
    background-color: var(--html-bg-website);
    border-radius: 0.5rem;
}
.wrapper-exam-question__leftscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: #f4f4f4;
    border-radius: 0.5rem;
}
.panel-format>.panel-heading{
    color: #fff;
}
.wrapper-exam-question__right-title{
    padding: 10px;
    border: 1px solid var(--html-bg-website);
}
.wrapper-exam-question__right-title>span{
    font-size: 20px;
    font-weight: bold;
}
.flex-full-1{
    flex: 1;
}
/* .wrapper-next-prev{
    position: absolute;
    bottom: 20px;
    right: 20px;
} */
.wrapper__questionright .form-check-label{
    font-weight: normal;
}
/* .wrapper-exam-question-aside-panel-row{
    display: none;
} */
.btn{
    outline: none !important;
}
.tablinksRight.checkedBtn{
    background:  green;
    color: #fff;
    border: 1px solid green;
}
.btn-format:hover{

    background: var(--html-bg-website) !important;
    
    color: #fff;

}

.tablinksRight.active{
    background: var(--html-bg-website);
    color: #fff;
    border: 1px solid var(--html-bg-website);
}

.title-table__th{
    font-size: 13px;
}
.table-result-detail__modifers>th{
    padding: 10px 2px !important;
}
.table-result-detail tr td{
    font-size: 13px !important;
}
.wrapper-answer-detail{
    padding: 30px 0;
}
.wrapper-answer-detail-title-default{
    text-align: center;
}
.wrapper-answer-detail-title-default>span{
    font-size: 24px;
    color: #000;
    font-weight: bold;
}
.wrapper-answer-detail__right{
    padding: 10px;
    background: #f4f4f4;
    border-radius: 5px;
}
.wrapper-result__detail-point-listen-title{
    display: block;
    margin-bottom: 5px;
}
.wrapper-result__detail-point-listen{
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.wrapper-result__detail-point-listen-part{
    display: block;
    color: #000;
    font-size: 18px;
    margin-bottom: 5px;
}
.wrapper-result__detail-point-listen>span>b{
    color: red;
}
.wrapper-result__detail-point-reading-part{
    display: block;
    color: #000;
    font-size: 18px;
    margin-bottom: 5px;
}
.wrapper-result__detail-point-reading-title{
    display: block;
    margin-bottom: 5px;
}
.wrapper-result__detail-point-reading>span>b{
    color: red;
}
.wrapper-result__detail-point-reading{
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.wrapper-result__detail-point-reading-part>b{
    color: red;
}
.list-group--fixed{
    position: -webkit-sticky;
    position: sticky;
    top: 55px;
}
.wrapper-answer-detail__right-question>span{
    display: block;
    margin-bottom: 5px;
}
.wrapper-answer-detail__right-title>span{
    font-size: 16px;
    display: block;
}
.wrapper-answer-detail__right-question>span.active{

    color: var(--html-bg-website);
    
}

#newpassword-error{
    margin-top: 5px;
    font-weight: normal;
}
.list-group--fixed>a>i{
    margin-right: 5px;
}
thead{
    background: #f4f4f4;
}
thead{
    background: #f4f4f4;
}
table.table-exam_all>tbody>tr{
    background: #fff;
}
table.dataTable tbody tr{
    background-color: #fff !important;
}
table.table-exam_all>tbody>tr.odd{
    background-color: #fff;
}
table.dataTable.stripe>tbody>tr.odd>*, table.dataTable.display>tbody>tr.odd>* {
    box-shadow: unset !important;
}
table.dataTable tbody tr:hover{
    background-color: #f4f4f4 !important;
}
/* End */
.wrapper-exam-banner__logo>a{
    width: 177px;
    height: auto;
    display: inline-block;
}
.wrapper-exam-banner__logo>a>img{
    width: 100%;
    height: auto;
    object-fit: cover;
    -ms-object-fit: cover;
    -moz-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    aspect-ratio: 177 / 69;

}
.wrapper-exam-banner{
    background: var(--html-bg-website);
}
.wrapper-exam-banner__logo{
    gap: 2rem;
}
.wrapper-exam-banner__title>span{
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.btn-red{
    background: red;
    color: #fff;
    transition: all 0.2s;
    border: 1px solid red;
}
.btn-red:hover{
    background: #fff;
    color: red;
}
.btn-website{
    background: var(--html-bg-website);
    color: #fff;
    border: 1px solid var(--html-bg-website);
    transition: all 0.2s;
}
.btn-website:hover{
   background: red;
   color: #fff;
   border: 1px solid red;
}
.pagination>ul{
    display: flex;
    gap: 10px;
}
.pagination>ul>li.inactive>.question-next{
    display: none;
}
.tabcontent{
    display: none;
}
.tabcontent.tabactive{
    display: block;
}
.tablinks.inactive{
    display: none;
}

.tabcontent .wrapper__questionleft-audio{
    display: none;
}
.tabcontent.tabcontentCurrent .wrapper__questionleft-audio{
    display: block;
}
.d-noneQuestion{
    display: none;
}
.animation-question{
    height: 380px;
    overflow-x: hidden;
    overflow-y: auto;
}
.animation-question::-webkit-scrollbar {
    width: 6px;
    background-color: var(--html-bg-website);
    border-radius: 0.5rem;
}
.animation-question::-webkit-scrollbar-thumb {
    background-color: var(--html-bg-website);
    border-radius: 0.5rem;
}
.animation-question::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: #f4f4f4;
    border-radius: 0.5rem;
}
.animation-question__introduces{
    height: 505px;
    overflow-x: hidden;
    overflow-y: auto;
    animation: fadeOpacity 0.1s ease-in-out;
}
.animation-question__introduces::-webkit-scrollbar {
    width: 6px;
    background-color: var(--html-bg-website);
    border-radius: 0.5rem;
}
.animation-question__introduces::-webkit-scrollbar-thumb {
    background-color: var(--html-bg-website);
    border-radius: 0.5rem;
}
.animation-question__introduces::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: #f4f4f4;
    border-radius: 0.5rem;
}
.wrapper__questionleft{
    padding-right: 5px;
}
@keyframes fadeOpacity{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.btn-red:focus{
    color: #fff;
}
.btn-red:hover{
    color: red;
}
.wrappers-parts__intro-button{
    display: none;
}
.textDiv_Hours>h4{
    font-size: 7px !important;
    margin-top: 3px !important;
}
.textDiv_Minutes>h4{
    font-size: 7px !important;
    margin-top: 3px !important;
}

.textDiv_Seconds>h4{
    font-size: 7px !important;
    margin-top: 3px !important;
}
.d-none-btnnext{
    display: none;
}

/* Line */
.line-1{display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-2{display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-3{display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-4{display: -webkit-box;-webkit-line-clamp:4;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-5{display: -webkit-box;-webkit-line-clamp:5;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-6{display: -webkit-box;-webkit-line-clamp:6;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space: normal;overflow: hidden;}

.line-7{display: -webkit-box;-webkit-line-clamp:7;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-8{display: -webkit-box;-webkit-line-clamp:8;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-9{display: -webkit-box;-webkit-line-clamp:9;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

.line-10{display: -webkit-box;-webkit-line-clamp:10;-webkit-box-orient: vertical;text-overflow: ellipsis;white-space:normal;overflow: hidden;}

/* End */

/* Bài giảng */
.mg0{
    margin: 0 !important;
}
.wrapper-lesson__detail{
    padding: 15px;
}
.wrapper-lesson__detail-view{
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    color: #757575;

}
.wrapper-lesson__detail-title{
    font-size: 16px;
    line-height: 1.3;
    height: calc(2.6 * 16px);
    font-weight: bold;
}
.wrapper-lesson{
    transition: all 0.2s;
    box-shadow: 2px 2px 7px #ccc;
    border-radius: 10px;
    overflow: hidden;
}
.d-block{
    display: block;
}
.hover-left {
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.hover-left:hover::before {
    animation: shine 1s;
}
.hover-left::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
@keyframes shine{
    from { left:-75%;}
    to { left : 125%}
}

.wrapper-lesson__img-video>video{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.wrapper-lesson__img-video{
    position: relative;
}
.wrapper-lesson__img-video::after{
    content: '';
    display: block;
    width: 100%;
    padding-bottom: calc(9 / 16 * 100%);
}
.wrapper-lesson__detail-des{
    line-height: 20px;
    height: 60px;
    font-size: 14px;
}
.mb30{
    margin-bottom: 30px;
}
.wrapper-lesson:hover{
    box-shadow: 2px 2px 7px var(--html-bg-website);
}
.wrapper-lesson__img-link::after{
    content:"";
    display: block;
    width: 100%;
    padding-bottom: calc(9 / 16 * 100%);
}
.wrapper-lesson__img-link>img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
}

.popup-result{
    position: fixed;
    left: 10px;
    width: 200px;
    background: #fff;
    box-shadow: 2px 2px 7px #ccc;
    padding: 10px;
    border-radius: 5px;
    border-top: 2px solid var(--html-bg-website);
    animation: popupMove ease-in-out 1s ;
    bottom: 10px;
}
@keyframes popupMove {
    from {bottom:-200px}
    to{bottom: 10px;}
}
.popup-result__content-close{
    position: absolute;
    top: 5px;
    right: 5px;
    color: red;
}
.popup-result__content-title{
    font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    display: block;
}
.popup-result__content-time{
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #aea3a3;
}
.popup-result__content-btn{
    display: inline-block;
    padding: 4px 10px;
    background: var(--html-bg-website);
    font-size: 12px;
    color: #fff;
    transition: all 0.2s;
    cursor: pointer;
}
.popup-result__content-btn:hover{
    background: red;
    color: #ffff;
}
.popup-result__content-close{
    cursor: pointer;
}
/* End */
.sidebar-question{
    position: fixed;
    width: 310px;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    -webkit-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
    padding: 10px;
    padding-top: 60px;
    box-shadow: 2px 2px 7px #ccc;
    -webkit-transform: translateX(105%);
    -ms-transform: translateX(105%);
    -o-transform: translateX(105%);
    transform: translateX(105%);
    visibility:hidden;
}
.circleMenu{
    line-height: 70px;
    
}
.circleMenu>span{
    cursor: pointer;
}
.circleMenu>span>img{
    width: 40px;
}
.sidebar-question__button{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    padding: 10px;
    background: var(--html-bg-website);
    color: #fff;
}

.sidebar-question__button>span{
    display: block;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.sidebar-question__button>span>i{
    font-size: 20px;
}
/* Sidebar */