@font-face {

    font-display: block;

    font-family: 'RobotoRegular';

    src: url('../fonts/frontend/RobotoRegular.eot');

    src: url('../fonts/frontend/RobotoRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/frontend/RobotoRegular.woff') format('woff'), url('../fonts/frontend/RobotoRegular.ttf') format('truetype'), url('../fonts/frontend/RobotoRegular.svg#RobotoRegular') format('svg');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-display: block;

    font-family: 'RobotoBold';

    src: url('../fonts/frontend/RobotoBold.eot');

    src: url('../fonts/frontend/RobotoBold.eot?#iefix') format('embedded-opentype'), url('../fonts/frontend/RobotoBold.woff') format('woff'), url('../fonts/frontend/RobotoBold.ttf') format('truetype'), url('../fonts/frontend/RobotoBold.svg#RobotoBold') format('svg');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-display: block;

    font-family: 'UTMAvoBold';

    src: url('../fonts/frontend/UTMAvoBold.eot');

    src: url('../fonts/frontend/UTMAvoBold.eot?#iefix') format('embedded-opentype'), url('../fonts/frontend/UTMAvoBold.woff') format('woff'), url('../fonts/frontend/UTMAvoBold.ttf') format('truetype'), url('../fonts/frontend/UTMAvoBold.svg#UTMAvoBold') format('svg');

    font-weight: normal;

    font-style: normal;

}





@font-face {

    font-display: block;

    font-family: 'Inter-Regular';

    src: url('../fonts/frontend/Inter-Regular.eot');

    src: url('../fonts/frontend/Inter-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/frontend/Inter-Regular.woff') format('woff'), url('../fonts/frontend/Inter-Regular.ttf') format('truetype'), url('../fonts/frontend/Inter-Regular.svg#Inter-Regular') format('svg');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-display: block;

    font-family: 'Inter-Medium';

    src: url('../fonts/frontend/Inter-Medium.eot');

    src: url('../fonts/frontend/Inter-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/frontend/Inter-Medium.woff') format('woff'), url('../fonts/frontend/Inter-Medium.ttf') format('truetype'), url('../fonts/frontend/Inter-Medium.svg#Inter-Medium') format('svg');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-display: block;

    font-family: 'Inter-Bold';

    src: url('../fonts/frontend/Inter-Bold.eot');

    src: url('../fonts/frontend/Inter-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/frontend/Inter-Bold.woff') format('woff'), url('../fonts/frontend/Inter-Bold.ttf') format('truetype'), url('../fonts/frontend/Inter-Bold.svg#Inter-Bold') format('svg');

    font-weight: normal;

    font-style: normal;

}







/* Main */

:root {

    --mxh: #15295c;

    --colormain: #333333;

    --colormainxam: #4C4C4C;

    --colormainhv: #0059A0;

    --bgmain: #304256;
    ;

    --bgmainhv: #CA0C0C;

    --bgbtntienich: #0059A0;

    --font: 'RobotoRegular';

    --fontB: 'RobotoBold';

    --fontUTMAvoBold: 'UTMAvoBold';

    --fontInterRegular: 'Inter-Regular';

    --fontInterMedium: 'Inter-Medium';

    --fontInterBold: 'Inter-Bold';

    --color-main: #1A6F39;

    --color-red: #ec2d3f;

    --color-medium-red: #cc2c32;

    --color-dark-red: #c31829;

    --color-green: #28a745;

    --color-dark-green: #207d36;

    --color-black: #212529;

    --color-gray: #6c757d;

    --background-static: #3776c3;

    --background-hover: #eceb1b;

    --color-static: #000;

    --color-hover: #ec2d3f;

    --text-color: #ffffff;

    --main-color: #ffffff;

    --main-bg: #5A7592;

    --color-01: #304256;

    --color-02: #D9D9D9;

    --color-03: #F3F3F6;

    --color-04: #ECECEC;

    --color-05: #73a1c5;

    --color-06: #3DF352;

    --color-07: #FF9B8A;

    --color-08: #36CDFF;

    --color-09: #DE91FF;

    --color-10: #868686;

    --color-11: #141414;

    --color-12: #CFCFCF;

    --color-13: #000000;

    --hover-color: #5A7592;

}



body {

    font-size: 14px;

    font-family: var(--font);

    line-height: 1.2;

    top: 0 !important;

    background: linear-gradient(to bottom right, #0f172a, #0f172a, #0f172a);

}



h1,

h2,

h3,

h4,

h5,

h6,

form,

body {

    line-height: 1.4;

}



strong {

    display: inline;

}



a {

    text-decoration: none
}



ul {

    padding-inline-start: 15px;

}



.content-detail figure {

    text-align: center;

    outline: solid 1px #ccc;

    background: rgba(0, 0, 0, 0.05);

    padding: 10px;

    margin: 10px 20px;

    display: inline-block;

}



.content-detail figure>figcaption {

    text-align: center;

    display: block;

}



.content-detail blockquote {

    font-style: italic;

    padding: 2px 0;

    border-style: solid;

    border-color: #ccc;

    border-width: 0;

}



.content-detail blockquote {

    padding-left: 20px;

    padding-right: 8px;

    border-left-width: 5px;

}



.content-detail table {

    width: 100%;

}



.content-detail table tr td,

.content-detail table tr {

    margin: 0;

    color: #676767;

    border: 1px solid #e1e1e0;

    padding: 10px;

}



ul:not(.info-pro-detail ul):not(.content-detail ul):not(.toolbar ul) {

    list-style: none;

    margin: 0px;

    padding: 0px;

}



video,

iframe:not(.content-detail iframe, .video-main iframe, .fancybox__html5video, .fancybox__iframe) {

    max-width: 100% !important;

    height: auto;

}



.row-0 {

    margin-left: 0px;

    margin-right: 0px;

}



.mg-col-0 {

    padding-left: 0px;

    padding-right: 0px;

}



.row-10 {

    margin-left: -5px;

    margin-right: -5px;

}



.row-20 {

    margin-left: -10px;

    margin-right: -10px;

}



.row-30 {

    margin-left: -15px;

    margin-right: -15px;

}



.col-30 {

    padding-left: 15px;

    padding-right: -15px;

}



.col-20 {

    padding-left: 10px;

    padding-right: 10px;

}



.mg-col-10 {

    padding-left: 5px;

    padding-right: 5px;

}



.padding-top-bottom {

    padding: 2rem 0;

}



.pad-top {

    padding-top: 2.5rem;

}



.pad-bottom {

    padding-bottom: 2.5rem;

}



.mg-top {

    margin-top: 2.5rem;

}



.mg-bottom {

    margin-bottom: 2.5rem;

}



.hover_xemthem {

    transition: 0.4s;

}



.hover_xemthem:hover {

    letter-spacing: 2px;

}



.overhidden {

    overflow: hidden;

}



img {

    max-width: 100%;

    height: auto;

    vertical-align: top;

}



a,

input,

textarea {

    outline: none;

    padding: 0px;

}



input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



.radius-7 {

    border-radius: 7px;

}



.hidden {

    display: none;

}



.clear {

    clear: both;

}



.none {

    display: none;

}



.hidden-seoh {

    visibility: hidden;

    height: 0px;

    margin: 0px;

    overflow: hidden;

}



.wrap-content {

    max-width: 1300px;

    margin: auto;

    width: calc(100% - 60px);

}



.fix_head {

    position: fixed !important;

    top: 0;

    width: 100%;

    z-index: 999 !important;

}



.pd-l-10 {

    padding-left: -10px;

}



.pd-r-10 {

    padding-right: -10px;

}



.mg-l-10 {

    margin-left: -10px;

}



.mg-r-10 {

    margin-right: -10px;

}



.mg-b-20 {

    margin-bottom: 20px;

}



.relative {

    position: relative;

}



.top-bar {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    position: relative;

}



.header-info {

    width: 25%;

}



.header-info-item {

    padding: 10px 0;

    padding-left: 35px;

    font: 13px var(--fontInterBold);

}



.header-info-item-worktime {

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

}



.header-info-item-address {

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

}



.hotline-tuvan {

    background: var(--bgmain);

    font-size: 30px;

    line-height: 1.2;

    margin: 0;

    /* width: 13%; */

    border-radius: 25px;

}



.hotline-tuvan span {

    font-size: 18px;

    display: flex;

    font-family: var(--fontInterMedium);

    color: #fff;

    text-align: center;

    padding: 6px 20px;

    flex-wrap: wrap;

    align-content: center;

    align-items: center;

    justify-content: center;

    gap: 5px;

}



.hotline-tuvan span svg {

    width: 14px;

    fill: #fff;

}



.contact-circle {

    width: 34px;

    height: 34px;

    border: 1px solid #666;

    border-radius: 50%;

    position: relative;

    display: flex;

    vertical-align: middle;

    margin: 0 8px 0;

    padding: 7px;

    justify-content: center;

    align-items: center;

}



.mail-tuvan {

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

    background-size: 50px;

}



.facebook-tuvan {

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

    background-size: 50px 50px;

}



.hotline-tuvan a {

    font: 20px var(--fontB);

    color: #666;

}



.header.fix_head1 .contact-circle {

    border-color: #fff;

}



.header.fix_head1 .hotline-tuvan,

.header.fix_head1 .hotline-tuvan a,

.header.fix_head1 .search_desktop .icon-search_desktop {

    color: #fff;

}



.hotline-tuvan a:hover {

    color: var(--color-main);

}



.hotline-header {

    color: #fff;

    justify-content: flex-end;

}



.top-bar .slogan-head {

    margin: 0px;

    line-height: 20px;

}



.top-bar-right {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: flex-end;

    align-items: center;

    gap: 0 20px;

}



.top-bar .info-head {

    float: right;

    margin-left: 15px;

}



.top-bar .wrap-content {

    /* line-height: 40px; */

}



.title-anhi {

    color: var(--bgmain);

    text-transform: uppercase;

    font: 30px var(--fontB);

    border-bottom: 1px solid #000;

    padding: 0 0 1px;

    margin: 0 0 15px 0;

}



@media (max-width: 767px) {

    .title-anhi {

        font-size: 22px;

        margin: 0 0 10px 0;

    }

}



.info-head {

    margin-bottom: 0;

}



.info-head i {

    margin-right: 2px;

    font-size: 15px;

}



.social {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: flex-end;

    align-items: center;

    gap: 5px 5px;

}



.social-top {}



.social-top img {

    max-height: 30px;

}



.social-footer {

    justify-content: flex-start;

    margin: 20px 0 0;

}



.social a {

    display: block;

}



.social img:hover {

    animation: zoomBreath 0.5s infinite ease-in-out;

}



@keyframes zoomBreath {

    0% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.1);

    }



    100% {

        transform: scale(1);

    }

}



#ngonngu {

    float: left;

    padding: 10px;

    height: 40px;

    line-height: 20px;

}



#ngonngu a {

    display: inline-block;

    height: 25px;

    height: 19px;

}



#ngonngu a img {

    height: 19px;

}



.lang-head {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

    gap: 0 8px;

}



.lang-head a {

    display: flex;

    align-content: center;

    align-items: center;

    flex-wrap: wrap;

}



.lang-head a img {}



ul.social-top {

    float: right;

    margin: 5px 0px !important;

    margin-right: 20px !important;

}



.social-top li {}



.social-top li a {

    max-width: 30px;

    display: block;

    /* float: left; */

}



.list-menu-top {

    float: right;

    display: flex;

    align-items: center;

}



.list-menu-top li {

    float: left;

}



.list-menu-top li a {

    /* margin-left: 10px; */

    color: #fff;

    text-transform: uppercase;

    font-weight: 600;

    font-size: 14px;

}



.list-menu-top .menu-line {

    width: 1.5px;

    height: 15px;

    background-color: rgba(0, 0, 0, 0.1);

    margin: 0px 10px;

    border-radius: 5px;

}





.header {

    position: relative;

    top: 0;

    width: 100%;

    z-index: 999 !important;

}



.wrap-top {

    padding: 6px 0;

    background: #676767;

    color: #fff;

}



.slogan-head {

    margin: 0;

    max-width: 50%;

}



.worktime-head {

    margin: 0;

    font: 14px var(--font);

}



.header-wrap-content {

    position: relative;

    /* padding: 6px 0; */

    /* border-bottom: 2px solid #000; */

}



.header-wrap-content:before {

    content: '';

    position: absolute;

    right: 15px;

    bottom: -25px;

    width: 200px;

    height: 133px;

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

}



.header.headerin {

    background: #fff;

    position: relative;

}



.menu.fix_head1,

.menu.headerin.fix_head1 {

    position: fixed;

    top: 0;

}



.header .wrap-content {

    /* background: url(../images/lineheader.png) top left no-repeat; */

    /* background-size: 300px; */

}



.wrap-top-box {

    display: flex;

    gap: 10px;

    align-items: center;

    position: relative;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-around;

}



.wrap-top-row {

    display: flex;

    gap: 10px;

    align-items: center;

    position: relative;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

}



.head-bottom .wrap-content {

    padding: 10px 0;

}



.hotline-head {}



.hotline-head p {}



.hotline-head span {}



.logo {

    width: 15%;

    background: url(../images/logo_frame.svg) no-repeat top right;

    background-size: cover;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 55px;

}



.logo a {

    display: block;

}



.logo img {

    max-height: 70px;

    transition: all .3s ease !important;

}



.header.fix_head1 .logo img {

    /* height: 50px; */

}



.header-right {

    justify-content: flex-end;

    gap: 0 30px;

}



.menu-hotline {}



.menu-hotline .number-phone {

    font-size: 18px;

    font-weight: bold;

    color: #fff;

    background: #996533;

    display: block;

    text-align: center;

    padding: 5px 0;

}



.menu-hotline .number-phone:hover {

    background: var(--color-main);

}



.number-phone-two {

    animation: effectTextTwo 2s linear infinite;

    color: transparent;

}



.cart-icon-header {

    text-align: center;

}



.cart-icon-header a {

    color: #fff;

    font-size: 18px;

    position: relative;

}



.cart-icon-header span {

    position: absolute;

    top: -6px;

    right: -17px;

    color: #000;

    width: 20px;

    height: 20px;

    background: #fff;

    text-align: center;

    line-height: 21px;

    font-size: 13px;

    border-radius: 100%;

}



@-moz-keyframes effectText {

    0% {

        background: linear-gradient(#49b9e7, #3776c3);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#FF7E5D, #f00);

        -webkit-background-clip: text;

    }

}



@-webkit-keyframes effectText {

    0% {

        background: linear-gradient(#49b9e7, #3776c3);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#FF7E5D, #f00);

        -webkit-background-clip: text;

    }

}



@-o-keyframes effectText {

    0% {

        background: linear-gradient(#49b9e7, #3776c3);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#FF7E5D, #f00);

        -webkit-background-clip: text;

    }

}



@keyframes effectText {

    0% {

        background: linear-gradient(#49b9e7, #3776c3);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#FF7E5D, #f00);

        -webkit-background-clip: text;

    }

}



@-moz-keyframes effectTextTwo {

    0% {

        background: linear-gradient(#fff, #fff);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#ffce5d, #ffe300);

        -webkit-background-clip: text;

    }

}



@-webkit-keyframes effectTextTwo {

    0% {

        background: linear-gradient(#fff, #fff);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#ffce5d, #ffe300);

        -webkit-background-clip: text;

    }

}



@-o-keyframes effectTextTwo {

    0% {

        background: linear-gradient(#fff, #fff);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#ffce5d, #ffe300);

        -webkit-background-clip: text;

    }

}



@keyframes effectTextTwo {

    0% {

        background: linear-gradient(#fff, #fff);

        -webkit-background-clip: text;

    }



    100% {

        background: linear-gradient(#ffce5d, #ffe300);

        -webkit-background-clip: text;

    }

}



/* Menu */

.menu {

    position: relative;

    width: 100%;

    background: #fff;

    z-index: 999;

    padding: 10px 0;

}



.menu.fix_head {

    background: #fff;

    width: 100%;

    left: 0;

    padding: 10px 0;

}



.menu-grid {

    display: grid;

    grid-template-columns: 1fr 20%;

    gap: 10px;

    align-items: center;

    position: relative;

    align-content: center;

}



.menu.fix_head .menu-grid {

    max-width: 1250px;

    margin: auto;

    width: calc(100% - 30px);

}



.menu ul {

    width: 100%;

    padding: 0px;

    margin: 0px;

    list-style: none;

}



.menu ul.menu-main {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    /* flex-grow: 1; */

    /* margin-right: 20px !important; */

}



.menu ul li {

    position: relative;

    z-index: 1;

    flex-grow: 1;

}



.menu ul li a>i.fa-home {

    font-size: 20px;

}



.menu ul li.menu-line {

    width: 1px;

    height: 15px;

    background-color: rgba(0, 0, 0, 0.1);

}



.menu-main>li>a {

    /* height: 50px; */

    /* line-height: 50px; */

    text-align: center;

}



.menu-main>li>a:hover,

.menu-main>li>a.active {

    background: var(--bgmain);

    color: #fff;

}



.menu-main li:hover>a {

    /* color: var(--bgmainhv); */

}



.menu ul li a {

    display: block;

    position: relative;

    font-size: 15px;

    color: #000;

    padding: 10px 0;

    text-transform: uppercase;

    text-decoration: none;

    font-family: var(--fontB);

}



.menu ul li a:hover,

.menu ul li a.active {

    /* color: var(--color-main); */

}



.menu ul li a.has-child {

    padding-right: 16px;

    margin-right: 8px;

}



.menu ul li a.has-child:after {

    content: "";

    position: absolute;

    bottom: calc(50% - 4px / 2);

    right: 5px;

    width: 5px;

    height: 5px;

    border: 1px solid #000;

    border-top: 0px;

    border-left: 0px;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}



.menu ul li a.has-child.active:after {

    border-color: var(--background-static)
}



.menu ul li ul {

    position: absolute;

    min-width: 250px;

    /* margin-top: -5px; */

    /* padding-top: 0.75rem; */

    /* padding-bottom: 0.75rem; */

    background-color: #fff;

    border-radius: 0.25rem;

    -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);

    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);

    -webkit-transform: perspective(600px) rotateX(-90deg);

    transform: perspective(600px) rotateX(-90deg);

    -webkit-transform-origin: 0 0 0;

    transform-origin: 0 0 0;

    opacity: 0;

    visibility: hidden;

    /* border-bottom: 2px solid var(--color-main); */

}



.menu ul li:hover>ul {

    -webkit-transform: perspective(600px) rotateX(0);

    transform: perspective(600px) rotateX(0);

    transform-origin: 0 0 0;

    -webkit-transform-origin: 0 0 0;

    opacity: 1;

    visibility: visible;

}



.menu ul li ul li {

    /* padding-left: 0.75rem; */

    /* padding-right: 0.75rem; */

}



.menu ul li ul li a {

    font-size: 14px;

    color: #000;

    border-bottom: 1px solid #ececec;

    padding: 12px 10px 11px;

    text-transform: capitalize;

}



.menu ul li ul li a.has-child {

    margin-right: 0px;

}



.menu ul li ul li a.has-child:after {

    border-color: #313131;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}



.menu ul li ul li a.active {

    color: #ec2d3f;

}



.menu ul li ul li a.active.has-child:after {

    border-color: #ec2d3f;

}



.menu ul li ul li:last-child>a {

    border-bottom: 0px;

}



.menu ul li ul li:hover>a {

    color: #fff;

    background: #676767;

}



.menu ul li ul li:hover>a.has-child:after {

    border-color: #ec2d3f;

}



.menu ul li ul li ul {

    top: 0;

    left: 100%;

    margin-top: 0px;

}



.wrap-field {

    overflow: hidden;

}



.wrap-field .field-top {

    padding-bottom: 1.5rem;

}



.wrap-field .field-top .info-field {}



.wrap-field .field-top .info-field .info-field__title {

    font-size: 20px;

    font-weight: bold;

    position: relative;

    display: flex;

    align-items: center;

    height: calc(100% - 1rem);

}



.wrap-field .field-top .info-field .info-field__title span {

    color: #545454;

    text-transform: uppercase;

    font-size: 26px;

}



.wrap-field .field-top .info-field .info-field__description {}



.field-mid {}



.field-left {

    height: 100%;

    position: relative;

}



.field-mid .field-list {

    display: flex;

    align-items: center;

    justify-content: center;

    /* display: none; */

    height: 100%;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    opacity: 0;

    transition: 0.3s;

    z-index: 1;

}



.field-mid .field-list::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000;

    opacity: 0.7;

    pointer-events: none;

    z-index: 0;

}



.field-mid .field-list .field-list-wrap {

    width: 100%;

    max-width: 480px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

    color: #fff;

}



.field-mid .field-list.active {

    opacity: 1;

    z-index: 2;

}



.field-mid .field-list .field-list-info {}



.field-mid .field-list .field-list-info .field-list-info__title {}



.field-mid .field-list .field-list-info .field-list-info__title h4 {

    font-size: 30px;

    /* line-height: 47px; */

    font-weight: bold;

    margin-bottom: 15px;

    padding-bottom: 15px;

    border-bottom: 2px solid #217cbd;

}



.field-mid .field-list .field-list-info .field-list-info__title h4 a {

    color: #fff;

}



.field-mid .field-list .field-list-info .field-list-info__title h4 a {}



.field-mid .field-list .field-list-child {}



.field-mid .field-list .field-list-child ul {}



.field-mid .field-list .field-list-child ul li {}



.field-mid .field-list .field-list-child ul li a {

    color: #fff;

    margin: 5px 0px;

    display: block;

    font-weight: 600;

}



.field-mid .field-list .field-list-child ul li a:hover {

    color: #f37800;

}



.field-mid .field-list .field-list-child ul li a i {

    margin-right: 5px;

}



.field-mid .field-list-two.active,

.field-mid .field-list-two:hover {

    background: #0e4d82
}



.field-mid .field-list-two {

    height: 100%;

    min-height: 250px;

    display: flex;

    justify-content: center;

    align-content: center;

    align-items: center;

    background: #086db5;

    color: #fff;

    flex-wrap: wrap;

    text-align: center;

    border-right: 1px solid #217cbd;

    border-bottom: 1px solid #217cbd;

    transition: 0.3s;

    cursor: pointer;

}



.field-mid .field-list-two .field-list-icon {

    width: 90px;

    height: 90px;

    border-radius: 100%;

    border: 1px solid rgba(8, 109, 181, 0.7);

    padding: 15px;

    position: relative;

    margin: 0 auto;

    margin-bottom: 15px;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    background-color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}



.field-mid .field-list-two .field-list-icon::before {

    content: '';

    position: absolute;

    top: 1px;

    left: 1px;

    right: 1px;

    bottom: 1px;

    border: 4px solid #086db5;

    border-radius: 100%;

    pointer-events: none;

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

}



.field-mid .field-list-two .field-list-icon img {

    max-height: 40px;

}



.field-mid .field-list-two .field-list-icon__title {

    width: 100%;

    font-size: 16px;

    font-weight: bold;

}



.field-list-info__link {}



.field-list-info__link a {

    display: inline-block;

    padding: 0.7rem 1.5rem;

    border: 2px solid #fff;

    margin-top: 10px;

    color: #fff;

    transition: 0.3s;

}



.field-list-info__link a:hover {

    background: #0a6db5;

    border-color: #0a6db5;

}



/* About */

.wrap-about {

    /* background: #f5f5f5; */

}



.wrap-about .info-about {}



.wrap-about .info-about .info-about__title {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 30px;

    position: relative;

    padding-bottom: 10px;

}



.wrap-about .info-about .info-about__title span {

    color: var(--color-main);

}



.wrap-about .info-about .info-about__title:after {

    content: '';

    width: 70px;

    height: 2px;

    background: var(--color-main);

    left: 0;

    position: absolute;

    bottom: 0;

}



.wrap-about .info-about .info-about__description {}



.link-detail {

    border-radius: 5px;

    /* display: inline-flex; */

    /* align-items: center; */

    padding: 0.7rem 0.8rem;

    color: #fff;

    font-weight: 600;

    cursor: pointer;

    margin-bottom: 1.5rem;

    border: 1px solid var(--color-main);

    overflow: hidden;

    position: relative;

    z-index: 1;

    background: var(--color-main);

    display: inline-block;

    font-size: 13px;

}



.link-detail i {

    /* margin-left: 12px; */

    font-size: 15px;

    /* float: right; */

}



.link-detail:before {

    content: '';

    position: absolute;

    right: 0;

    width: 0;

    height: 100%;

    background: #fff;

    z-index: -1;

    transition: 0.4s;

    bottom: 0;

}



.link-detail:hover {

    color: var(--color-main);

}



.link-detail:hover:before {

    width: 100%;

    left: 0;

    right: auto;

}





.criteria-items {

    text-align: center;

    position: relative;

    padding-bottom: 25px;

}



.criteria-items a {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-weight: bold;

    font-size: 18px;

}



.criteria-items a img {

    margin-right: 15px;

}



.criteria-items .criteria-items__img {

    height: 60px;

}



.criteria-items .criteria-items__content {}



.criteria-items .criteria-items__content div {

    font-size: 40px;

    color: #3676c3;

    font-weight: bold;

    margin: 10px 0px 5px;

}



.criteria-items .criteria-items__content h3 {

    font-size: 20px;

    color: #3676c3;

    font-weight: bold;

    margin: 5px 0px 10px;

}



.criteria-items .criteria-items__content p {

    font-size: 14px;

    color: #656565;

    margin-bottom: 5px;

}



/* Toc */

a.mucluc-dropdown-list_button {}



a.mucluc-dropdown-list_button:before {

    content: "\f03a";

    font-family: "FontAwesome";

    font-style: normal;

    font-weight: 400;

    background: #fff;

    color: var(--color-main) !important;

    font-size: 20px;

    width: 35px;

    height: 35px;

    display: inline-block;

    line-height: 35px;

    text-align: center;

    border: 1px solid #ddd;

}



.meta-toc.fiedx {

    position: fixed;

    left: 5px;

    top: 200px;

    z-index: 111;

}



.meta-toc .mucluc-dropdown-list_button {

    display: none
}



.meta-toc.fiedx .mucluc-dropdown-list_button {

    display: block;

}



.meta-toc:not(.fiedx) .box-readmore {

    display: block !important;

}



.box-readmore {

    padding: 10px;

    background-color: #f5f5f5;

    width: 100%;

    margin-top: 2px;

    border: 1px solid #dddddd;

    font-size: 13px;

    margin-bottom: 10px;

    max-height: 340px;

    overflow-y: auto;

    border-radius: 7px;

}



.box-readmore::-webkit-scrollbar {

    background: #ececec;

    width: 5px;

    height: 11px;

    border-radius: 50px;

}



.box-readmore::-webkit-scrollbar-thumb {

    background: var(--color-main);

    border-radius: 50px;

}



.meta-toc.fiedx .box-readmore {

    width: 350px;

    display: none;

}



.box-readmore li ul>li {

    margin: 0;

    margin-bottom: 8px;

}



.box-readmore li ul>li:before {

    content: counters(item, ".") " ";

}



.box-readmore ul {

    list-style-type: none;

    counter-reset: item;

    margin-bottom: 0px;

    padding-left: 0px !important;

    margin-top: 8px;

}



.box-readmore ul li {

    display: table;

    counter-increment: item;

    margin: 0 0 5px 0;

}



.box-readmore ul li a {}



.box-readmore ul li:before {

    content: counters(item, ".") ". ";

    display: table-cell;

    padding-right: 5px;

}



.box-readmore ul li a {

    color: #000 !important;

    cursor: pointer;

    font-weight: 500;

    font-size: 14px;

}



.box-readmore ul li li a {

    font-weight: 400;

}



.box-readmore ul li a:hover {

    color: #767676;

}



.meta-toc-fix {

    display: none;

}



a.mucluc-dropdown-list_button {}



a.mucluc-dropdown-list_button:before {

    content: "\f03a";

    font-family: "FontAwesome";

    font-style: normal;

    font-weight: 400;

    background: #fff;

    color: var(--color-main) !important;

    font-size: 20px;

    width: 35px;

    height: 35px;

    display: inline-block;

    line-height: 35px;

    text-align: center;

    border: 1px solid #ddd;

}



.meta-toc-fix.fiedx {

    position: fixed;

    left: 5px;

    top: 200px;

    z-index: 111;

    display: block;

}



.meta-toc-fix .mucluc-dropdown-list_button {

    display: none
}



.meta-toc-fix.fiedx .mucluc-dropdown-list_button {

    display: block;

}



.meta-toc-fix:not(.fiedx) .box-readmore-fix {

    display: block !important;

}



.box-readmore-fix {

    padding: 10px;

    background-color: #f5f5f5;

    width: 100%;

    margin-top: 2px;

    border: 1px solid #dddddd;

    font-size: 13px;

    margin-bottom: 10px;

    max-height: 340px;

    overflow-y: scroll;

    border-radius: 7px;

}



.box-readmore-fix::-webkit-scrollbar {

    background: #ececec;

    width: 5px;

    height: 11px;

    border-radius: 50px;

}



.box-readmore-fix::-webkit-scrollbar-thumb {

    background: var(--color-main);

    border-radius: 50px;

}



.meta-toc-fix.fiedx .box-readmore-fix {

    width: 350px;

    display: none;

}



.box-readmore-fix li ul>li {

    margin: 0;

    margin-bottom: 8px;

}



.box-readmore-fix li ul>li:before {

    content: counters(item, ".") " ";

}



.box-readmore-fix ul {

    list-style-type: none;

    counter-reset: item;

    margin-bottom: 0px;

    padding-left: 0px !important;

    margin-top: 8px;

}



.box-readmore-fix ul li {

    display: table;

    counter-increment: item;

    margin: 0 0 5px 0;

}



.box-readmore-fix ul li a {}



.box-readmore-fix ul li:before {

    content: counters(item, ".") ". ";

    display: table-cell;

    padding-right: 5px;

}



.box-readmore-fix ul li a {

    color: #000 !important;

    cursor: pointer;

    font-weight: 500;

    font-size: 14px;

}



.box-readmore-fix ul li li a {

    font-weight: 400;

}



.box-readmore-fix ul li a:hover {

    color: #767676;

}



/* loadpage website */

#loader-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 999999;

    pointer-events: none;

}



#loader-wrapper #wrap {

    background: #fff;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    display: block;

    text-align: center;

    width: 100%;

    height: 100%;

    z-index: 999999;

}



#loader-wrapper.show1 #wrap {

    background: transparent
}



#loader-wrapper:after {

    -webkit-mask: url(../images/mask-01.png);

    mask: url(../images/mask-01.png);

    -webkit-mask-size: 2300% 100%;

    mask-size: 2300% 100%;

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background-color: rgba(255, 255, 255, 1);

    z-index: 99999;

}



#loader-wrapper.show1::after {

    -webkit-animation: MaskPlay 1s steps(22) forwards;

    animation: MaskPlay 1s steps(22) forwards;

}



#loader-wrapper.show1 #wrap {

    opacity: 0;

}



.loading-text ul {

    margin-top: 1.875rem
}



.loading-text ul li {

    -webkit-animation: anime 1.5s infinite linear;

    animation: anime 1.5s infinite linear;

    display: inline-block;

    font-family: var(--bs-font-monospace);

    font-size: 1.875rem;

    letter-spacing: 1px
}



.loading-text ul li:nth-child(1) {

    -webkit-animation-delay: 0s;

    animation-delay: 0s
}



.loading-text ul li:nth-child(2) {

    -webkit-animation-delay: .1s;

    animation-delay: .1s
}



.loading-text ul li:nth-child(3) {

    -webkit-animation-delay: .2s;

    animation-delay: .2s
}



.loading-text ul li:nth-child(4) {

    -webkit-animation-delay: .3s;

    animation-delay: .3s
}



.loading-text ul li:nth-child(5) {

    -webkit-animation-delay: .4s;

    animation-delay: .4s
}



.loading-text ul li:nth-child(6) {

    -webkit-animation-delay: .5s;

    animation-delay: .5s
}



.loading-text ul li:nth-child(7) {

    -webkit-animation-delay: .6s;

    animation-delay: .6s
}



.loader {

    align-items: center;

    display: flex;

    flex-direction: column;

    height: 100%;

    justify-content: center;

    left: 0;

    padding-bottom: 3.125rem;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 100001
}



/* name */

.anim {

    -webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;

    -moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;

    -ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;

    -o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;

    animation: quick-alo-circle-img-anim 1s infinite ease-in-out;

    -webkit-transform-origin: 50% 50%;

    -moz-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    -o-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

}



@-moz-keyframes quick-alo-circle-anim {

    0% {

        -moz-transform: rotate(0) scale(.5) skew(1deg);

        opacity: .1;

        -moz-opacity: .1;

        -webkit-opacity: .1;

        -o-opacity: .1
    }



    30% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .5;

        -moz-opacity: .5;

        -webkit-opacity: .5;

        -o-opacity: .5
    }



    100% {

        -moz-transform: rotate(0) scale(1) skew(1deg);

        opacity: .6;

        -moz-opacity: .6;

        -webkit-opacity: .6;

        -o-opacity: .1
    }

}



@-webkit-keyframes quick-alo-circle-anim {

    0% {

        -webkit-transform: rotate(0) scale(.5) skew(1deg);

        -webkit-opacity: .1
    }



    30% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        -webkit-opacity: .5
    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        -webkit-opacity: .1
    }

}



@-o-keyframes quick-alo-circle-anim {

    0% {

        -o-transform: rotate(0) kscale(.5) skew(1deg);

        -o-opacity: .1
    }



    30% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        -o-opacity: .5
    }



    100% {

        -o-transform: rotate(0) scale(1) skew(1deg);

        -o-opacity: .1
    }

}



@-moz-keyframes quick-alo-circle-fill-anim {

    0% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2
    }



    50% {

        -moz-transform: rotate(0) -moz-scale(1) skew(1deg);

        opacity: .2
    }



    100% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2
    }

}



@-webkit-keyframes quick-alo-circle-fill-anim {

    0% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2
    }



    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        opacity: .2
    }



    100% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2
    }

}



@-o-keyframes quick-alo-circle-fill-anim {

    0% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2
    }



    50% {

        -o-transform: rotate(0) scale(1) skew(1deg);

        opacity: .2
    }



    100% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2
    }

}



@-moz-keyframes quick-alo-circle-img-anim {

    10% {

        transform: rotate(0) scale(1) skew(1deg)
    }



    10% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }



    20% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }



    30% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }



    40% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }



    50% {

        -moz-transform: rotate(0) scale(1) skew(1deg)
    }



    100% {

        -moz-transform: rotate(0) scale(1) skew(1deg)
    }

}



@-webkit-keyframes quick-alo-circle-img-anim {

    0% {

        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }



    10% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }



    20% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }



    30% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }



    40% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }



    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }

}



@-o-keyframes quick-alo-circle-img-anim {

    0% {

        -o-transform: rotate(0) scale(1) skew(1deg)
    }



    10% {

        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }



    20% {

        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }



    30% {

        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }



    40% {

        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }



    50% {

        -o-transform: rotate(0) scale(1) skew(1deg)
    }



    100% {

        -o-transform: rotate(0) scale(1) skew(1deg)
    }

}



@-webkit-keyframes anime {

    0% {

        color: grey;

        letter-spacing: 1px;

        text-shadow: 1px 1px 0 #000;

        transform: translateY(0)
    }



    50% {

        color: #ffc107;

        letter-spacing: 5px;

        text-shadow: 5px 10px 1px #000;

        transform: translateY(-10px)
    }



    100% {

        color: grey;

        letter-spacing: 1px;

        text-shadow: 1px 1px 0 #000;

        transform: translateY(0)
    }



}



@keyframes anime {

    0% {

        color: grey;

        letter-spacing: 1px;

        text-shadow: 1px 1px 0 #000;

        transform: translateY(0)
    }



    50% {

        color: #ffc107;

        letter-spacing: 5px;

        text-shadow: 5px 10px 1px #000;

        transform: translateY(-10px)
    }



    100% {

        color: grey;

        letter-spacing: 1px;

        text-shadow: 1px 1px 0 #000;

        transform: translateY(0)
    }



}



/* end name*/

@-webkit-keyframes MaskPlay {

    from {

        -webkit-mask-position: 0 0;

        mask-position: 0 0
    }



    to {

        -webkit-mask-position: 100% 0;

        mask-position: 100% 0
    }

}



@keyframes MaskPlay {

    from {

        -webkit-mask-position: 0 0;

        mask-position: 0 0
    }



    to {

        -webkit-mask-position: 100% 0;

        mask-position: 100% 0
    }

}



/*  end loadpage website */







.title-detail-main {

    color: #252525;

    font-size: 25px;

    margin-bottom: 1.5rem;

    font-weight: 500;

}



/* General */



.time-main {

    margin-bottom: 0.75rem;

    color: #999999;

}



.time-main i {

    color: var(--color-main);

}



.time-main span {

    vertical-align: top;

    display: inline-block;

}



.share {

    padding: 17px 15px 10px 15px;

    line-height: normal;

    background: rgba(128, 128, 128, 0.15);

    margin-top: 15px;

    border-radius: 5px;

}



.share b {

    display: block;

    margin-bottom: 5px;

}



.control-owl {

    position: absolute;

    width: 100%;

    z-index: 2;

    left: 0px;

    top: calc(50% - 45px / 2);

}



.control-owl button {

    opacity: 0.5;

    top: 0px;

    position: absolute;

    outline: none;

    border: 0px;

    padding: 0px;

    margin: 0px;

    display: block;

    cursor: pointer;

    color: #ffffff;

    width: 45px;

    height: 45px;

    text-align: center;

    font-size: 25px;

    margin: 0px;

    background-color: #000000;

    border-radius: 3px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.control-owl button:hover {

    opacity: 1;

}



.control-owl button.owl-prev {

    left: 20px;

}



.control-owl button.owl-next {

    right: 20px;

}



.custom-form-row {

    margin-right: -10px;

    margin-left: -10px;

}



.custom-form-row>.col,

.custom-form-row>[class*="col-"] {

    padding-right: 10px;

    padding-left: 10px;

}



.text-sm {

    font-size: 0.875rem !important;

}



.control-owl.control-dev. {

    position: absolute;

    width: 100%;

    z-index: 2;

    left: 0px;

    top: calc(50% - 50px / 2);

}



.control-owl.control-dev button:hover {

    background: var(--background-static)
}



.control-owl.control-dev button:hover svg {

    stroke: #fff
}



.control-owl.control-dev button {

    opacity: 0.9;

    top: 0px;

    position: absolute;

    outline: none;

    border: 0px;

    padding: 0px;

    margin: 0px;

    display: block;

    cursor: pointer;

    color: #ffffff;

    width: 40px;

    height: 40px;

    text-align: center;

    font-size: 25px;

    margin: 0px;

    background-color: #fff;

    border-radius: 50px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.control-owl.control-dev button:hover {

    opacity: 1;

}



.control-owl.control-dev button.owl-prev {

    left: -20px;

}



.control-owl.control-dev button.owl-next {

    right: -20px;

}



.control-owl.control-dev button svg {

    width: 30px;

    stroke: #000;

}



/* Lazyload */

img.lazy {

    opacity: 0;

}



img:not(.initial) {

    -webkit-transition: opacity 0.5s;

    transition: opacity 0.5s;

}



img.initial,

img.loaded,

img.error {

    opacity: 1;

}



img:not([src]) {

    visibility: hidden;

}





/* Search */

.search_desktop {

    position: relative;

    float: right;

}



.search_desktop .icon-search_desktop {

    width: 50px;

    height: 50px;

    cursor: pointer;

    text-align: center;

    line-height: 42px;

    color: #fff;

    font-size: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    border-radius: 50%;

    /* border: 1px solid #fff; */

    margin: 0px;

}



.search_desktop .icon-search_desktop.active {

    background: #fff;

    border-radius: 100%;

    border: 1px solid;

    color: var(--bgmain);

}



.search-grid_desktop {

    background: #D2D2D2;

    height: 36px;

    line-height: 36px;

    display: flex;

    justify-content: space-between;

    border-radius: 25px;

    width: 20%;

}



.search-grid_desktop p {

    width: 36px;

    height: 36px;

    cursor: pointer;

    outline: none;

    border: none;

    margin: 0px;

    font-size: 15px;

    display: block;

    color: #333;

    line-height: 36px;

    text-align: center;

}



.search-grid_desktop input {

    width: calc(100% - 40px);

    float: right;

    line-height: 40px;

    outline: none;

    border: none;

    color: #000;

    font-size: 13px;

    background: transparent;

    text-indent: 12px;

}



.search-grid_desktop input::-webkit-input-placeholder {

    color: #333;

}



.search-grid_desktop input:-moz-placeholder {

    color: #333;

}



.search-grid_desktop input::-moz-placeholder {

    color: #333;

}



.search-grid_desktop input:-ms-input-placeholder {

    color: #333;

}



/* Search RP */

.search-res {

    position: relative;

    width: 50%;

}



.search-res .icon-search {

    width: 40px;

    height: 40px;

    cursor: pointer;

    text-align: center;

    line-height: 40px;

    color: #fff;

    font-size: 20px;

    margin: 0px;

    display: flex;

    align-items: center;

    justify-content: center;

    /* border: 1px solid #363636; */

}



.search-res .icon-search.active {

    color: var(--bgbtntienich);

    background: #fff;

    border-radius: 100%;

}



.search-res .search-grid {

    line-height: normal;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    background: var(--bgmain);

    max-width: 230px;

    height: 36px;

    line-height: 36px;

}



.search-res .search-grid p {

    float: left;

    width: 35px;

    height: 35px;

    cursor: pointer;

    outline: none;

    border: none;

    margin: 0px;

    font-size: 15px;

    display: block;

    color: #fff;

    line-height: 35px;

    text-align: center;

}



.search-res .search-grid input {

    width: calc(100% - 35px);

    float: right;

    line-height: 34px;

    outline: none;

    border: none;

    color: #fff;

    font-size: 13px;

    text-indent: 14px;

    background: transparent;

}



.search-res .search-grid input::-webkit-input-placeholder {

    color: #fff;

}



.search-res .search-grid input:-moz-placeholder {

    color: #fff;

}



.search-res .search-grid input::-moz-placeholder {

    color: #fff;

}



.search-res .search-grid input:-ms-input-placeholder {

    color: #fff;

}



/* Slideshow */

.slideshow {

    position: relative;

}



.slideshow-item {

    display: block;

    cursor: pointer;

}



.slideshow:hover .control-slideshow {

    opacity: 1;

}



.control-slideshow {

    opacity: 0;

}



.info-slide {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.name-slide {

    font-size: 30px;

    text-transform: uppercase;

    color: #fff;

}



.desc-slide {

    font-size: 15px;

    color: #fff;

    width: 500px;

    margin: 20px 0;

}



.views-more-slide {

    background-color: var(--background-static);

    width: 120px;

    height: 40px;

    color: #fff;

    font-size: 15px;

}



.box-slide.slick-current.slick-active .name-slide {

    animation: fadeInUp;

    animation-duration: 1s;

    animation-delay: 0.5s;

    animation-fill-mode: forwards;

}



.box-slide.slick-current.slick-active .desc-slide {

    animation: fadeInUp;

    animation-duration: 1s;

    animation-delay: 1s;

    animation-fill-mode: forwards;

}



.box-slide.slick-current.slick-active .views-more-slide {

    animation: scaleLarge;

    animation-duration: 1s;

    animation-delay: 1.5s;

    animation-fill-mode: forwards;

}



.slide-text .slick-prev,

.slide-text .slick-next {

    width: 40px;

    height: 50px;

    border-radius: 5px;

    background: rgba(0, 0, 0, 0.3);

}



.slide-text .slick-prev {

    left: 5px;

}



.slide-text .slick-next {

    right: 5px;

}



.slide-text .slick-prev:before {

    font-family: "FontAwesome";

    font-weight: 400;

    content: "\f053";

}



.slide-text .slick-next:before {

    font-family: "FontAwesome";

    font-weight: 400;

    content: "\f054";

}



.slide-text .slick-dots {

    bottom: 20px;

}



.slide-text .slick-dots li {

    margin: 0;

}



.slide-text .slick-dots li button:before {

    color: #fff;

    font-size: 15px;

}



/* Breadcrumb */

.breadCrumbs {

    background-color: #eee;

}



.breadCrumbs .wrap-content {

    padding: 0.75rem 0;

}



.breadCrumbs .wrap-content .breadcrumb {

    padding: 0;

    margin-bottom: 0;

    background-color: transparent;

    border-radius: 0;

}



.breadCrumbs .wrap-content .breadcrumb-item a {

    color: #212529;

}



.breadCrumbs .wrap-content .breadcrumb-item.active a {

    color: #6c757d;

}



/* Intro */

.wrap-intro {}



.news-intro:before {

    content: "";

    position: absolute;

    width: 1px;

    height: calc(100% - 50px);

    top: 10px;

    left: 90px;

    background-color: #cacaca;

}



.news-scroll:before,

.news-scroll:after {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    left: 85px;

    border-radius: 100%;

    background-color: #cacaca;

}



.news-scroll:before {

    top: 10px;

}



.news-scroll:after {

    bottom: 40px;

}



.news-control {

    left: 85px;

    font-size: 13px;

    opacity: 0.5;

    z-index: 1;

    cursor: pointer;

}



.news-control:hover {

    opacity: 1;

    color: #ec2d3f;

}



.news-control#up {

    top: -10px;

}



.news-control#down {

    bottom: 20px;

}



/* Partner */

.control-partner button {

    background-color: transparent;

    color: #222222;

    opacity: 1;

    width: 25px;

    font-size: 23px;

}



.control-partner button:hover {

    opacity: 0.7;

}



.control-partner button.owl-prev {

    left: 0px;

}



.control-partner button.owl-next {

    right: 0px;

}



.wrap-partner {

    margin-bottom: 2rem;

}



.wrap-partner .wrap-content {

    position: relative;

}



.partner {

    display: block;

    border: 1px solid #eee;

    max-width: 175px;

    margin: 0px auto;

}



/* Video */

.video {

    cursor: pointer;

    margin-bottom: 1rem;

}



.video .video-image {

    position: relative;

    margin-bottom: 0.75rem;

}



.video .video-image:before {

    content: "";

    position: absolute;

    width: 50px;

    height: 35px;

    top: calc(50% - 50px / 2);

    left: calc(50% - 35px / 2);

    z-index: 1;

    background-repeat: no-repeat;

    background-image: url(../images/play.png);

}



.video .video-name {

    text-align: center;

    font-size: 16px;

    color: #212529;

    margin-bottom: 0px;

}



/* Album */

.album {

    cursor: pointer;

}



.album .album-image {

    margin-bottom: 0.75rem;

}



.album .album-name {

    margin-bottom: 0px;

    text-align: center;

}



.album .album-name a {

    display: block;

    font-size: 16px;

    color: #212529;

    margin-bottom: 0px;

}



/* Brand */

.wrap-brand .wrap-content {

    position: relative;

}



.brand {

    display: block;

    border: 1px solid #eee;

    max-width: 160px;

    margin: 0px auto;

}



/* Product */

.wrap-product {

    padding: 30px 0;

}



.wrap-menu-home {

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

    background-size: cover;

    position: relative;

    margin: 30px 0;

    padding: 50px 0;

}



.wrap-content-menu {

    padding: 0 180px;

    position: relative;

}



.title-main-menu {

    width: 240px;

    height: 119px;

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

    background-size: cover;

    position: absolute;

    left: -30px;

    top: -80px;

}



.wrap-menu-home::before {

    position: absolute;

    content: '';

    right: 20px;

    bottom: 0;

    width: 238px;

    height: 218px;

    background: url(../images/after.png) top center no-repeat;

    background-size: 100% 100%;

}



.bamdexemmenu {

    position: absolute;

    left: 0;

    bottom: 10%;

}



.bamdexemmenu a {

    background: #Fff;

    padding: 10px 20px;

    color: #000;

    font: 15px var(--font-Kalam-Regular);

    border-radius: 10px;

    display: inline-block;

}



.cart-product {

    margin-bottom: 0px;

}



.cart-product span {

    cursor: pointer;

    color: #ffffff;

    text-transform: capitalize;

    text-align: center;

}



/* Product Detail */

.grid-pro-detail {

    margin-bottom: 2rem;

}



.left-pro-detail {

    position: relative;

    /* text-align: center; */

    /* width: 45%; */

}



.right-pro-detail {

    /* width: calc(55% - 40px); */

}



.left-pro-detail .MagicZoom {

    border: 1px solid #eee;

    padding: 7px;

    border-radius: 5px;

    background-color: #ffffff;

    width: 100%;

    text-align: center;

}



.gallery-thumb-pro {

    position: relative;

    margin-top: 10px;

}



.owl-pro-detail {

    padding: 0;

}



.control-pro-detail button {

    background-color: transparent;

    color: #222222;

    opacity: 1;

    width: 25px;

    font-size: 23px;

}



.control-pro-detail button:hover {

    opacity: 0.7;

}



.control-pro-detail button.owl-prev {

    left: 0px;

}



.control-pro-detail button.owl-next {

    right: 0px;

}



.thumb-pro-detail {

    display: block !important;

    border: 1px solid #eee;

    padding: 5px;

    border-radius: 3px;

    cursor: pointer;

    background-color: #ffffff;

}



.thumb-pro-detail.mz-thumb.mz-thumb-selected {

    border-color: #cecfd2;

}



.thumb-pro-detail img {

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    -webkit-filter: brightness(100%) !important;

    filter: brightness(100%) !important;

    border-bottom: 0px !important;

    padding-bottom: 0px !important;

}



.title-pro-detail {

    text-transform: uppercase;

    font-size: 20px;

    display: block;

    font-weight: bold;

    color: var(--color-red);

}



.comment-pro-detail {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

}



.social-plugin-pro-detail {

    margin-bottom: 1rem;

    margin-top: 0px !important;

}



.desc-pro-detail {

    /* margin-bottom: 1rem; */

}



.attr-pro-detail {

    list-style: none;

    padding: 0px;

}



.attr-pro-detail li {

    padding-top: .3rem !important;

    padding-bottom: .3rem !important;

}



.attr-label-pro-detail {

    margin: 0px 5px 0px 0px;

}



.attr-content-pro-detail {

    display: inline-block;

    margin-bottom: 0px;

}



.brand-pro-detail {}



.brand-pro-detail a {

    background: var(--color-red);

    color: #fff;

    border-radius: 2px;

    padding: 2px 5px;

}



.price-new-pro-detail {

    font-weight: 700;

    font-size: 23px;

    color: #f00;

}



.price-old-pro-detail {

    font-weight: 400;

    color: var(--color-gray);

    text-decoration: line-through;

    padding-left: 10px;

    font-size: 18px;

    position: relative;

    top: -1px;

}



.tags-pro-detail a {

    float: left;

    font-size: 13px;

    padding-bottom: 0.375rem;

    margin: 0px 5px 5px 0px;

}



.tags-pro-detail a i {

    font-size: 11px;

    margin: 5px 5px 0px 0px;

}



.tabs-pro-detail {

    margin-top: 2rem;

}



.tabs-pro-detail .nav-tabs .nav-link {

    border-top-width: 3px;

    font-size: 15px;

    color: #333;

    text-transform: uppercase;

    font-weight: 500;

    padding: 14px 14px;

    font-family: var(--fontB);

}



.tabs-pro-detail .nav-tabs .nav-link.active,

.tabs-pro-detail .nav-tabs .nav-item.show .nav-link {

    border-top-color: var(--bgmainhv);

}



.cart-pro-detail {

    margin: 1rem 0;

    display: flex;

    align-items: stretch;

    justify-content: flex-start;

}



.cart-pro-detail a {

    width: calc(50% - 5px);

    text-align: center;

    color: #fff;

    padding: 10px 15px;

    text-transform: uppercase;

    border-radius: 3px;

    transition: all 0.5s ease;

    background: var(--bgmainhv);

    max-width: 200px;

}



.cart-pro-detail a:hover {}



.cart-pro-detail a.addnow {

    margin-right: 10px;

    /* background: #fff; */

    /* color: var(--bgmain); */

    border: 1px solid var(--bgmainhv);

    transition: all 0.5s ease;

}



.cart-pro-detail a.buynow {

    background-color: var(--bgmain);

    border: 1px solid var(--bgmainhv);

}



.cart-pro-detail a:hover {

    color: #fff;

    cursor: pointer;

    -webkit-transform: translateY(-5px);

    transform: translateY(-5px);

}



.cart-pro-detail a i {

    padding-right: 5px;

}



.camket-pro-detail {

    position: sticky;

    top: 140px;

    /* width: 290px; */

}



.camket-pro-detail .widget {

    background-color: #fff;

    border-radius: 5px;

    overflow: hidden;

}



.camket-pro-detail h4 {

    padding: 15px 10px;

    font-weight: bold;

    font-size: 16px;

    color: #333;

    background-color: #f2f2f2;

    margin-bottom: 0px;

    text-transform: uppercase;

}



.camket-pro-detail .widget-line {

    width: 70px;

    height: 2px;

    background-color: var(--color-main);

}



.camket-pro-detail .widget-content {

    border: 1px solid #f2f2f2;

    border-top: none;

    position: relative;

    top: -2px;

}



.camket-pro-detail .camket ul {

    margin: 0px;

    padding: 0px;

}



.camket-pro-detail .camket ul li {

    list-style: none;

    border-top: 1px dotted #e5e5e5;

    padding: 10px 10px 10px 30px;

    background: url(../images/icon-ul.svg) no-repeat 10px 10px;

}



.camket-pro-detail .camket ul li:first-child {

    border-top: 0px;

}



.camket-pro-detail .thongso ul {

    margin: 0px;

    padding: 0px;

}



.camket-pro-detail .thongso ul li {

    list-style: none;

    border-top: 1px dotted #e5e5e5;

    padding: 10px;

}



.camket-pro-detail .thongso ul li:first-child {

    border-top: 0px;

}



/* News */



.news {

    overflow: hidden;

    margin-bottom: 1.5rem;

    padding: 8px;

    border-radius: 8px;

    background: rgb(255, 255, 255);

    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 12px 0px;

}



.pic-news {

    width: 100%;

    /* float: left; */

}



.pic-news img {

    width: 100%;

}



.info-news {

    /* width: 60%; */

    /* padding-left: 15px; */

    /* float: right; */

    padding: 15px 5px 10px;

}



.name-news {

    color: #252525;

    font-size: 17px;

    line-height: normal;

    font-weight: 600;

}



.name-news.text-split {

    -webkit-line-clamp: 2;

}



.name-news:hover {

    color: var(--colormainhv);

}



.time-news {

    color: var(--color-gray);

    margin-bottom: 10px;

}



.desc-news {

    color: #676767;

    margin-top: 5px;

    line-height: 22px;

}



.news .news-name {

    margin-bottom: 0.5rem;

}



.news .news-name a {

    color: #333;

    font-size: 16px;

}



.news .news-name a.text-split {

    -webkit-line-clamp: 2;

}



.news .news-name a:hover {

    color: #ec2d3f;

}



.news .news-time {

    color: #84878a;

    margin-bottom: 0.25rem;

}



.news .news-desc {

    color: #333333;

    margin-top: 5px;

    line-height: 22px;

}



.othernews b {

    margin-bottom: 10px;

    font-size: 15px;

}



.list-news-other {

    padding-left: 17px;

    list-style: square;

}



.list-news-other li {

    margin-bottom: 2px;

    list-style: square;

    margin-left: 13px;

    color: var(--color-main);

}



.list-news-other li a {

    text-transform: none;

    color: #333333;

}



.list-news-other li a:hover {

    color: var(--color-main);

}



/*News orther*/

.othernews {

    position: sticky;

    top: 140px;

    z-index: 7;

}



.news-other {

    margin-bottom: 15px;

}



.pic-news-other {

    width: 40%;

}



.info-news-other {

    width: 60%;

    padding-left: 10px;

}



.name-news-other {

    color: #252525;

    font-size: 14px;

    line-height: normal;

    font-weight: 600;

}



.name-news-other:hover {

    color: var(--background-static);

}



.name-news-other.text-split {}



/* Contact */

.form-floating.form-floating-cus>input,

.form-floating-cus>select {

    height: 40px;

    /* border-radius: 5px; */

    /* padding-left: 55px; */

    background: transparent;

    /* border: 0; */

}



.form-floating.form-floating-cus>textarea {

    height: 100px;

}



.form-floating.form-floating-cus>label {

    padding: 13px 10px;

    color: var(--color-gray);

}



.contact-article {

    margin-bottom: 3rem;

}



.contact-input {

    position: relative;

    margin-bottom: 20px;

}



.contact-input input,

.contact-input textarea {

    border-radius: 0;

    border-top: none;

    border-left: none;

    border-right: none;

}



.contact-input input:focus,

.contact-input textarea:focus {

    box-shadow: none;

    outline: none;

}



.contact-input textarea {

    resize: none;

    height: 150px;

}



.contact-input .custom-file-label::after {

    content: attr(title);

}



.contact-map {

    position: relative;

    height: 500px;

}



.contact-map iframe {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100% !important;

    height: 100% !important;

}



/* Newsletter */

.newsletter-slogan {

    margin-bottom: 0.5rem;

    color: #000;

}



.wrap-newsletter {

    padding: 50px 0;

}



.cover-newsletter {

    padding: 1.5rem;

    background: #fff;

    border-radius: 10px;

    border: 3px solid #b88d58;

    margin-top: 1rem;

    margin-bottom: 1rem;

}



.title-newsletter {

    position: relative;

    font-size: 23px;

    font-weight: 600;

    text-align: center;

    line-height: 1.4;

    margin-bottom: 5px;

}



.title-sub-newsletter {

    position: relative;

    font-size: 23px;

    font-weight: 600;

    text-align: center;

    line-height: 1.4;

    margin-bottom: 5px;

}



.form-newsletter {}



.flex-newsletter {

    display: grid;

    grid-template-columns: 1fr 1fr;

    /* 2 cột bằng nhau */

    gap: 10px 10px;

    margin: 0 0 20px 0;

}



.newsletter-input {}



.newsletter-input .form-control,

.newsletter-input select {

    height: 50px;

    /* border-radius: 0; */

    font-size: 13px;

    border: none;

    padding: 5px 0px;

    width: 100%;

    /* outline: 0; */

    /* padding-left: 10px; */

    background: none;

    color: #000;

    border: 1px solid #fff;

    border-radius: 0px;

    text-indent: 10px;

    border-radius: 4px;

    background: #fff;

    border-radius: 5px;

}



.newsletter-input textarea.form-control {

    height: 120px;

    resize: none;

}



.newsletter-input input[name='name-newsletter'] {

    background-position: calc(100% - 10px)
}



.newsletter-input input[name='phone-newsletter'] {}



.newsletter-input input[name='email-newsletter'] {

    background-position: calc(100% - 10px)
}



.newsletter-input.newsletter-area {

    position: relative;

}



.newsletter-input.newsletter-area .form-control {

    height: 90px;

}



.newsletter-button {

    margin: 20px 0;

}



.newsletter-button input[name='submit-newsletter'] {

    color: #fff;

    border: none;

    width: 100%;

    max-width: 100%;

    height: 40px;

    text-transform: uppercase;

    border: 0;

    font-weight: bold;

    border-radius: 5px;

    background: none;

    border-radius: 0px;

    background: var(--bgmainhv);

    font-size: 15px;

}



.newsletter-button input[name='submit-newsletter']:hover {

    background: #131313;

    color: #fff;

}



.newsletter-input input::-webkit-input-placeholder {

    color: #333;

}



.newsletter-input input:-moz-placeholder {

    color: #333;

}



.newsletter-input input::-moz-placeholder {

    color: #333;

}



.newsletter-input input:-ms-input-placeholder {

    color: #333;

}



.newsletter-input.newsletter-area .form-control::-webkit-input-placeholder {

    color: #333;

}



.newsletter-input.newsletter-area .form-control:-moz-placeholder {

    color: #333;

}



.newsletter-input.newsletter-area .form-control::-moz-placeholder {

    color: #333;

}



.newsletter-input.newsletter-area .form-control:-ms-input-placeholder {

    color: #333;

}



.phone-slogan {

    margin-bottom: 0.5rem;

    color: #000000;

    font-weight: bold;

    text-align: center;

    text-transform: uppercase;

    padding: 10px 10px;

    background: #f8f9fa;

    font-size: 13px;

}



.wrap-form-phone {

    /* height: 45px; */

    /* display: flex; */

    box-shadow: 0px 0px 3px 0px #ccc;

}



.form-phone {

    /* height: 45px; */

    /* display: flex; */

    padding: 15px;

}



.phone-input {

    position: relative;

    height: 100%;

    /* width: calc(100% - 60px); */

}



.phone-input input {

    border-radius: 0px;

    height: 100%;

    width: 100%;

}



.phone-button {

    width: 70px;

    margin-top: 10px;

    text-align: center;

    margin: auto;

}



.phone-button input[type="submit"] {

    border: 0px;

    color: #fff;

    text-transform: uppercase;

    height: 35px;

    border-radius: 0;

    background: var(--background-static);

    width: 100%;

    font-weight: bold;

    border-radius: 3px;

}



/* Footer */



footer {

    color: #fff;

    position: relative;

    padding: 50px 0 30px;

    background: #333333;

    border-top: 5px solid var(--bgmainhv);

}



footer>.container {

    position: relative;

}



.row_footer {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-content: flex-start;

    align-items: flex-start;

}



.footer1 {

    width: 36%;

}



.footer2 {

    width: 15%;

}



.footer3 {

    width: 24%;

}



.footer4 {

    width: 25%;

}



.mangxahoi_footer {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: flex-start;

    align-items: center;

    gap: 10px 20px;

    margin: 30px 0 10px 0;

}



.mangxahoi_footer div {

    font: 20px var(--fontM);

}



.mangxahoi_footer span {

    flex-grow: 1;

    background: rgb(255 255 255 / 50%);

    height: 1px;

}



.mangxahoi_footer a {}



.mangxahoi_footer a img {

    max-height: 40px;

}



.line-ft {

    width: 1px;

    /* height:100%; */

    background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 80%) 50%, rgb(255 255 255 / 0%) 100%);

    margin: 0 20px;

}



#fanpage-facebook-box {

    background: #fff;

    border-radius: 15px;

    overflow: hidden;

    padding: 5px;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    align-items: center;

}



.tilte-fc-ft {

    width: 44px;

    height: 100%;

    /* writing-mode: vertical-lr; */

    /* text-orientation: mixed; */

    transform-origin: left top;

    white-space: nowrap;

    color: #022543;

    font-size: 20px;

    text-decoration: underline;

    transform: translateX(5px) translateY(63px) rotate(270deg);

    text-transform: uppercase;

}



.tilte-fc-ft {}



#fanpage-facebook {

    /* width: calc(100% - 50px); */

}



#fanpage-facebook .fb_iframe_widget {

    /* border-radius:15px; */

    overflow: hidden;

    width: 100%;

}



.logo-footer {}



.logo-footer img {

    max-height: 160px;

}



.noidungfooter code {

    padding: 2px 4px;

    font-size: 14px;

    color: #fff;

    background-color: transparent;

    border-radius: 0;

}



.compayname {

    text-transform: uppercase;

    font: 20px var(--fontB);

    color: yellow;

    padding: 0 0 15px;

}



.row_footer1 {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 20px;

    align-content: center;

    justify-content: space-between;

    align-items: center;

    font: 16px var(--fontM);

    margin: 0 0 20px 0;

}



.hotline-footer {

    color: #fff;

    padding: 10px 0 10px 40px;

    background: url(../images/hot-footer.png) left center no-repeat;

}



.hotline-footer span {

    display: block;

    color: var(--bgmain);

    padding: 5px 0 0;

    font-size: 20px;

}



.email-footer {

    color: #fff;

    padding: 10px 0 10px 40px;

    background: url(../images/mail-footer.png) left center no-repeat;

}



.email-footer span {

    color: #fff;

}



.line-footer {

    height: 41px;

    background: rgb(255 255 255 / 41%);

    width: 1px;

}



.logoft {

    /* width: 30%; */

    margin: 0 0 20px 0;

}



.info_footer {

    margin: 25px 0 20px 0;

    font: 15px var(--font);

}



.info_footer p {

    margin: 20px 0;

    display: flex;

    align-content: center;

    justify-content: flex-start;

    align-items: center;

    flex-wrap: wrap;

    font: 16px var(--fontB);

    color: #333333;

}



.info_footer p span {

    font-family: var(--fontB);

    padding-right: 5px;

}



.info_footer p i {

    width: 40px;

    height: 40px;

    border: 1px solid #fff;

    border-radius: 50%;

    font-size: 18px;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    align-items: center;

}



.ttft1 {

    text-transform: capitalize;

    font: 20px var(--fontB);

    color: var(--colormain);

    margin: 0 0 20px 0;

}



.chinhsach {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: flex-start;

    align-items: center;

    gap: 5px 10px;

}



.chinhsach a {

    font: 14px var(--font);

    color: #fff;

    display: block;

    position: relative;

}



.chinhsach span {}



.chinhsach span:last-child {

    display: none;

}



/* .chinhsach a:before{

      position:absolute;

      content:'';

      left:0;

      top:7px;

      background:#fff;

      border-radius:100%;

      height:5px;

      width:5px;

  } */



.chinhsach a:hover {

    color: #fff;

}



.mangxahoift {

    /* margin: 26px 0 0; */

    gap: 5px;

}



.mangxahoift img {

    max-width: 30px;

}



.mangxahoift a {}



.copppy {

    font: 14px var(--font);

    color: #fff;

    padding: 20px 0;

    background: var(--bgmainhv);

}



.coppyright {

    padding: 20px 0;

    text-align: right;

    color: #fff;

    background: var(--bgmainhv);

    font: 16px var(--font);

}



.coppyright a {

    display: block;

    margin: 5px 0 0;

    color: #fff;

}



.thongke {

    text-align: right;

}



.thongke span {

    padding: 0 5px;

}



.footer-article {

    padding-top: 3rem;

    padding-bottom: 3rem;

    background: var(--bgmainhv);

    color: #fff;

}



.footer-title {

    text-transform: uppercase;

    font-size: 18px;

    margin-bottom: 1rem;

    font-weight: 600;

    color: #fff;

}



.footer-title:after {

    content: '';

    display: block;

    width: 100%;

    height: 1px;

    background: linear-gradient(to right, #FFCA06, rgb(255 202 6 / 0%));

    margin-top: 10px;

}



.footer-title-min {

    text-transform: uppercase;

    font-size: 15px;

    margin-bottom: 1rem;

    font-weight: 600;

    color: #fff;

    text-align: center;

}



.name-company {

    text-transform: uppercase;

    font-size: 14px;

    margin-bottom: 1rem;

    font-weight: 700;

}



.footer-copyright a {

    color: #fff;

}



.footer-ul {

    list-style: none;

    padding: 0px;

    margin: 0px;

}



.footer-ul li {

    margin-bottom: 10px;

}



.footer-ul li:last-child {

    margin-bottom: 0px;

}



.footer-ul li a {

    color: #fff;

    font-size: 15px;

}



.footer-ul li a:hover {

    text-decoration: none;

    color: var(--color-main);

}



.footer-tags {

    background: #eee;

}



.footer-tags .wrap-content {

    padding: 30px 15px;

}



.footer-tags-lists {

    list-style: none;

    padding: 0px;

    margin: 0px;

}



.footer-tags-lists li {

    float: left;

}



.footer-tags-lists li a {

    padding-bottom: 0.375rem;

}



.footer-powered {

    color: #ffffff;

    padding: 20px 10px;

    text-align: center;

    background: var(--bgmain);

}



.footer-powered a {

    color: #fff;

}



.footer-powered .wrap-content {

    padding-top: 15px;

    padding-bottom: 15px;

}



.footer-statistic {

    text-align: right;

}



.footer-statistic span {

    padding-right: 10px;

}



.footer-statistic span:last-child {

    padding-right: 0px;

}



#footer-map {

    position: relative;

    height: 185px;

}



#footer-map iframe {

    position: absolute !important;

    width: 100% !important;

    height: 100% !important;

    top: 0px !important;

    left: 0px !important;

}



/* Like Share */

.social-plugin {

    margin-top: 10px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

}



.social-plugin .at-share-btn {

    margin-bottom: 0px !important;

}



.social-plugin .zalo-share-button {

    margin-left: 3px;

    z-index: 4;

}



/* Paging */

.pagination-home .pagination .page-item .page-link {

    color: #555555;

    font-size: 0.875rem;

}



.pagination-home .pagination .page-item.active .page-link {

    color: #ffffff;

    background-color: #555555;

    border-color: #555555;

}



/* Paging Ajax */

.pagination-ajax {

    text-align: center;

    margin: 20px 0 0;

}



.pagination-ajax a {

    display: inline-block;

    vertical-align: top;

    margin: 0px 3px 3px 3px;

    width: 35px;

    height: 35px;

    line-height: 33px;

    color: #666 !important;

    border: 1px solid #e6e6e6;

    font-size: 13px;

    cursor: pointer;

    text-decoration: none !important;

    background-color: #ffffff;

}



.pagination-ajax a.current,

.pagination-ajax a:hover {

    color: #ffffff !important;

    border-color: #ec2d3f;

    background-color: #ec2d3f;

}



.pagination-ajax a.first,

.pagination-ajax a.last,

.pagination-ajax a.prev,

.pagination-ajax a.next {

    text-indent: -9999px;

    position: relative;

    background-color: #ffffff !important;

}



.pagination-ajax a.first:before,

.pagination-ajax a.last:before,

.pagination-ajax a.prev:before,

.pagination-ajax a.next:before {

    content: "";

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    z-index: 2;

    background-color: transparent;

    background-repeat: no-repeat;

    background-position: center;

}



.pagination-ajax a.first:before {

    background-image: url(../images/page-first.png);

}



.pagination-ajax a.last:before {

    background-image: url(../images/page-last.png);

}



.pagination-ajax a.prev:before {

    background-image: url(../images/page-prev.png);

}



.pagination-ajax a.next:before {

    background-image: url(../images/page-next.png);

}



/* Popup */

#popup .modal-body {

    padding: 0px;

}



/* Hidden Google Captcha */

.grecaptcha-badge {

    display: none !important;

    width: 0px !important;

    height: 0px !important;

    visibility: hidden !important;

    overflow: hidden;

}



/* Hidden Check Grammar Coccoc */

coccocgrammar {

    display: none;

}



/* Scroll Top */

.scrollToTop {

    width: 41px;

    height: 41px;

    text-align: center;

    font-weight: bold;

    color: #444;

    text-decoration: none;

    position: fixed;

    bottom: 65px;

    right: 25px;

    display: none;

    z-index: 10;

    cursor: pointer;

}



/* Text Hide */

.text-split {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    -webkit-line-clamp: 3;

}



/* Transition All */

.transition,

.control-owl button,

.carousel-comment-media .carousel-control a span,

.menu ul li a.has-child:after,

.menu ul li ul,

.menu ul li:hover>ul,

.scale-img img,

.scale-img:hover>img,

.btn-frame .kenit-alo-circle-fill,

.support-online .kenit-alo-circle-fill {

    -webkit-transition: 0.3s all;

    transition: 0.3s all;

}



/* Scale IMG */

.scale-img {

    overflow: hidden;

    display: block;

}



.scale-img img {

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

    transform: scale(1, 1);

}



.scale-img:hover>img {

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

    transform: scale(1.1, 1.1);

}



/* Blink */

.blink {

    -webkit-animation-name: blink;

    -webkit-animation-duration: 1s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blink;

    -moz-animation-duration: 1s;

    -moz-animation-timing-function: linear;

    -moz-animation-iteration-count: infinite;

    animation-name: blink;

    animation-duration: 1s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}



/* Button Frame */

.btn-frame {

    display: block;

    width: 50px;

    height: 50px;

    position: fixed;

    right: 20px;

    z-index: 10;

    cursor: pointer;

}



.btn-frame i {

    display: flex;

    display: -ms-flex;

    justify-content: center;

    align-items: center;

    -ms-flex-align: center;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: var(--mxh);

    position: relative;

    z-index: 1;

}



.btn-frame i img {

    vertical-align: middle;

    width: 70%;

}



.btn-frame .animated.infinite {

    animation-iteration-count: infinite;

}



.btn-frame .kenit-alo-circle {

    width: 60px;

    height: 60px;

    top: -5px;

    right: -5px;

    position: absolute;

    background-color: transparent;

    -webkit-border-radius: 100%;

    -moz-border-radius: 100%;

    border-radius: 100%;

    border: 2px solid rgba(7, 41, 103, 0.8);

    opacity: .1;

    border-color: var(--mxh);

    opacity: .5;

}



.btn-frame .zoomIn {

    animation-name: zoomIn;

}



.btn-frame .animated {

    animation-duration: 1s;

    animation-fill-mode: both;

}



.btn-frame .kenit-alo-circle-fill {

    width: 70px;

    height: 70px;

    top: -10px;

    right: -10px;

    position: absolute;

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

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

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

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

    transition: all 0.2s ease-in-out;

    -webkit-border-radius: 100%;

    -moz-border-radius: 100%;

    border-radius: 100%;

    border: 2px solid transparent;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s;

    background-color: var(--mxh);

    opacity: .4;

}



.btn-frame .pulse {

    animation-name: pulse;

}



.ungdung {

    position: fixed;

    right: 18px;

    top: 120px;

    list-style: none;

    margin: 0;

    padding: 0;

    z-index: 9;

    display: flex;

    flex-direction: column;

}



.ungdung li {

    margin: 8px 0 0;

}



/* Zalo */

.btn-zalo {

    bottom: 315px;

}



/* Phone */

.btn-phone {

    bottom: 230px;

}



.btn-phone i {

    font-size: 22px;

    color: #fff;

    transform: rotate(10deg);

}





.progress-wrap {

    position: fixed;

    bottom: 70px;

    right: 19px;

    height: 50px;

    width: 50px;

    cursor: pointer;

    display: block;

    border-radius: 50px;

    z-index: 100;

    opacity: 0;

    visibility: hidden;

    -webkit-transform: translateY(20px);

    -ms-transform: translateY(20px);

    transform: translateY(20px);

    -webkit-transition: all 400ms linear;

    -o-transition: all 400ms linear;

    transition: all 400ms linear;

}



.progress-wrap.active-progress {

    opacity: 1;

    visibility: visible;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

}



.progress-wrap::after {

    position: absolute;

    font-family: "Font Awesome 6 Pro";

    content: '\f077';

    text-align: center;

    line-height: 50px;

    font-size: 16px;

    font-weight: 900;

    color: var(--bgmain);

    left: 0;

    top: 0;

    height: 50px;

    width: 50px;

    cursor: pointer;

    display: block;

    z-index: 1;

    -webkit-transition: all 400ms linear;

    -o-transition: all 400ms linear;

    transition: all 400ms linear;

}



.progress-wrap svg path {

    fill: none;

}



.progress-wrap svg.progress-circle path {

    stroke: var(--bgmain);

    stroke-width: 4;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-transition: all 400ms linear;

    -o-transition: all 400ms linear;

    transition: all 400ms linear;

}





/* Messenger */

.js-facebook-messenger-top-header {

    background: #487dfc;

    color: #fff;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 5px 5px 0 0;

}



.js-facebook-messenger-container.closed {

    display: none !important;

}



.js-facebook-messenger-tooltip {

    bottom: 97px;

    right: 97px;

    color: #404040;

    background: #fff;

}



.js-facebook-messenger-tooltip.closed {

    display: none !important;

}



.js-facebook-messenger-box,

.js-facebook-messenger-button {

    z-index: 999;

}



.js-facebook-messenger-tooltip {

    z-index: 999;

    display: none;

    position: fixed;

    text-align: center;

    border-radius: 10px;

    overflow: hidden;

    font-size: 12px;

    line-height: 1;

    padding: 10px;

    border: 1px solid rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;

    box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;

    z-index: 1000000000000000019884624838656;

}



.js-facebook-messenger-close-tooltip {

    width: 10px;

    height: 10px;

    display: inline-block;

    cursor: pointer;

    margin-left: 10px;

}



.js-facebook-messenger-box {

    z-index: 999;

}



.js-facebook-messenger-box.rubberBand {

    -webkit-animation-name: rubberBand;

    animation-name: rubberBand;

}



.js-facebook-messenger-box.animated {

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}



.js-facebook-messenger-button,

.js-facebook-messenger-tooltip {

    z-index: 999;

}



.js-facebook-messenger-box {

    display: block;

    position: fixed;

    cursor: pointer;

    bottom: 150px;

    right: 17px;

    width: 56px;

    height: 56px;

    text-align: center;

    background: var(--mxh);

    border-radius: 100%;

    overflow: hidden;

    z-index: 99;

    -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);

    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);

}



.js-facebook-messenger-box.rotate svg#fb-msng-icon {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

}



.js-facebook-messenger-box svg#fb-msng-icon {

    width: 32px;

    height: 33px;

    position: absolute;

    top: 13px;

    left: 12px;

    opacity: 1;

    overflow: hidden;

    -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

    transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

}



.js-facebook-messenger-box.rotate svg#close-icon {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}



.js-facebook-messenger-box svg#close-icon {

    opacity: 0;

    width: 19px;

    height: 20px;

    position: absolute;

    top: 19px;

    left: 19px;

    -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

    transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;

    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

}



.js-facebook-messenger-container,

.js-facebook-messenger-container-button {

    z-index: 1000;

}



.js-facebook-messenger-container {

    width: 250px;

    position: fixed;

    opacity: 0;

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

    bottom: 110px;

    right: 90px;

    border-radius: 10px;

    pointer-events: none;

    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);

    -webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;

    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

    transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

    transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;

    transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;

}



.js-facebook-messenger-top-head {

    width: 220px;

    color: #ffffff;

    background: #1182fc;

    display: block;

    position: relative;

    width: 220px;

    background: #1182fc;

    color: #ffffff;

    text-align: center;

    line-height: 1;

    padding: 10px;

    font-size: 14px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}



.js-facebook-messenger-container iframe,

.js-facebook-messenger-container-button iframe {

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}



.js-facebook-messenger-box,

.js-facebook-messenger-button,

.js-facebook-messenger-tooltip {

    z-index: 999;

}



.js-facebook-messenger-container,

.js-facebook-messenger-container-button {

    z-index: 1000;

}



.js-facebook-messenger-top-head {

    color: #ffffff;

    background: #1182fc;

    width: 220px;

}



.js-facebook-messenger-tooltip {

    color: #404040;

    background: #fff;

}



.js-facebook-messenger-container.open {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

    pointer-events: all;

}



.js-facebook-messenger-tooltip {

    bottom: 97px;

    right: 97px;

}



.js-facebook-messenger-box.open svg#fb-msng-icon {

    opacity: 0;

}



.js-facebook-messenger-box.rotate.open svg#close-icon {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

}



.js-facebook-messenger-box.open svg#close-icon {

    opacity: 1;

}



/* Cart Fix */





/* Toolbar */

.scrollToTopMobile.scrollToTop {

    display: block !important;

    height: unset;

    position: unset;

}



.modal-body .toolbar {

    display: block;

    position: relative;

}



.toolbar {

    width: 100%;

    bottom: 0px;

    position: fixed;

    z-index: 500;

    left: 0px;

    display: none;

    -webkit-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));

    -moz-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));

    -ms-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));

    -o-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));

}



.toolbar.is-active .list-phone {

    display: block;

    -webkit-animation: quickShow .2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards;

    animation: quickShow .2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards;

}



.toolbar .list-phone {

    position: absolute;

    bottom: 100%;

    left: 30px;

    opacity: 0;

    transform: scale(0);

    transform-origin: 50% 100%;

    display: none;

}



.toolbar .list-phone a {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    background: #fff;

    max-width: 240px;

    padding: 10px 20px;

    margin: 10px 0;

    border-radius: 50px;

    padding-right: 30px;

    text-decoration: none;

}



.toolbar .list-phone svg {

    max-width: 30px;

    max-height: 30px;

}



.toolbar .list-phone span {

    display: block;

    width: calc(100% - 40px);

    color: var(--background-static);

    font-weight: 700;

    font-size: 18px;

}



.toolbar .phone {

    position: relative;

    width: 50px;

    height: 50px;

    z-index: 99;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    border-radius: 50%;

    margin: 0 0px -25px 30px;

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

}



.toolbar .phone a {

    color: #333;

    display: block;

    position: relative;

}



.toolbar .phone a:before,

.toolbar .phone a:after {

    position: absolute;

    content: '';

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotate(135deg);

    width: 30px;

    height: 3px;

    border-radius: 2rem;

    background-color: var(--color-main);

    opacity: 0;

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

}



.toolbar .phone a:after {

    transform: translate(-50%, -50%) rotate(45deg);

}



.toolbar .phone svg {

    max-width: 27px;

    max-height: 27px;

    display: block;

    position: relative;

    fill: var(--bgbtntienich);

}



.toolbar.is-active .phone {

    transform: rotate(-180deg);

}



.toolbar.is-active .phone svg {

    opacity: 0;

}



.toolbar.is-active .phone a:before,

.toolbar.is-active .phone a:after {

    opacity: 1;

}



.toolbar ul {

    list-style: none;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0px;

    margin: 0px;

    --size: 33px;

    -webkit-mask: radial-gradient(var(--size) at 55px 0px, #0000 99%, #fff 101%) 100%;

    background: #fff;

    padding: 10px 0;

    padding-left: 100px;

    border-radius: 10px 10px 0px 0px;

}



.toolbar ul li {

    text-align: center;

    width: 25%;

    line-height: 1;

}



.toolbar ul li a {

    display: block;

    width: 100%;

    font-size: 27px;

    color: #ffff;

}



.toolbar ul li .icon {

    position: relative;

    margin: 0 auto;

    text-align: center;

}



.toolbar ul li a span {

    display: none;

    font-weight: 400;

    font-size: 11px;

    margin-top: 5px;

    color: #333;

    text-transform: capitalize;

}



.toolbar ul li a img,

.toolbar ul li svg {

    max-height: 30px;

    fill: var(--bgbtntienich);

    width: 100%;

}



.toolbar .phone svg {

    animation: tada 1.2s infinite;

    fill: var(--bgbtntienich);

}



.tada {

    animation: tada 1.2s infinite;

}



.lang-toolbar {

    display: flex;

    justify-content: center;

    align-items: center;

}



.toolbar ul li.lang-toolbar a {

    display: inline-block;

    width: unset;

    margin: 0px 2px;

    font-size: unset;

}



.toolbar ul li.lang-toolbar a img {

    height: 10% !important;

}



.ex6 path {

    fill: none;

    stroke: var(--bgbtntienich);

    stroke-width: 0.5;

    stroke-dasharray: 1500;

    stroke-dashoffset: 1500;

    -webkit-animation: dash 5s ease forwards;

    animation: dash 5s ease forwards;

}



@-webkit-keyframes dash {

    to {

        fill: var(--color-main);

        stroke-dashoffset: 0;

    }

}



@keyframes dash {

    to {

        fill: var(--bgbtntienich);

        stroke-dashoffset: 0;

    }

}



@keyframes tada {

    0% {

        transform: scaleX(1)
    }



    10%,

    20% {

        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }



    30%,

    50%,

    70%,

    90% {

        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);

    }



    40%,

    60%,

    80% {

        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);

    }



    to {

        transform: scaleX(1)
    }

}



@keyframes quickShow {

    0% {

        opacity: 0;

        transform: scale(0);

    }



    100% {

        opacity: 1;

        transform: scale(1);

    }

}



@media(max-width:1001px) {

    .toolbar {

        display: block;

    }



    .scrollToTop,

    #messages-facebook {

        /* display: none !important; */

    }

}



/* Fixbar */

.fixbar {

    bottom: 0;

    display: block;

    background: #f0eff4;

    border-top: 1px solid #ddd;

    width: 100%;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    position: fixed;

    margin: 0;

    z-index: 500;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    height: 50px;

}



.fixbar ul {

    margin: 0px;

    padding: 0px;

    list-style: none;

}



.fixbar ul li {

    margin: 0 auto 10px;

    text-align: center;

    width: 25%;

    float: left;

}



.fixbar .icon-cart-mobile,

.fixbar .icon-cart-new,

.fixbar .icon-home-new,

.fixbar .icon-hotdeal-new {

    width: 20px;

    height: 20px;

    display: block;

    margin: 8px auto 0;

}



.fixbar .icon-cart-mobile {

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

}



.fixbar ul li a {

    font-size: 11px;

    text-decoration: none;

    color: #333;

}



.fixbar ul li a i {

    font-size: 20px;

}



/* Plugbar */

.plugbar {

    position: fixed;

    bottom: 0;

    left: 0;

    border-top: 1px solid #eae6e6;

    width: 100%;

    right: 0;

    max-width: 767px;

    margin: 0 auto;

    background: #ffffff;

    padding: 9px 10px 10px 7px;

    z-index: 10;

}



.plugbar ul {

    list-style: none;

    padding: 0;

    margin: 0px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.plugbar ul li {

    width: 20%;

    float: left;

}



.plugbar ul li a {

    display: block;

    color: #696969;

    font-size: 12px;

    text-align: center;

    position: relative;

}



.plugbar ul li a i {

    font-size: 20px;

    color: #696969;

}



.plugbar ul li a span {

    position: absolute;

    width: 50px;

    height: 50px;

    top: -40px;

    left: calc(50% - 50px / 2);

    font-size: 14px;

    display: block;

    border: 1px solid rgba(234, 230, 230, 0.5);

    border-radius: 100%;

}



/* Combo Phone */

.support-online {

    position: fixed;

    z-index: 999;

    left: 10px;

    bottom: 0px;

}



.support-online a {

    position: relative;

    margin: 20px 10px;

    text-align: left;

    width: 40px;

    height: 40px;

}



.support-online i {

    width: 40px;

    height: 40px;

    background: #43a1f3;

    color: #ffffff;

    border-radius: 100%;

    font-size: 20px;

    text-align: center;

    line-height: 1.9;

    position: relative;

    z-index: 999;

}



.support-online a {

    display: block;

}



.support-online a span {

    border-radius: 2px;

    text-align: center;

    background: #67b634;

    padding: 9px;

    display: none;

    width: 180px;

    margin-left: 10px;

    position: absolute;

    color: #ffffff;

    z-index: 999;

    top: 0px;

    left: 40px;

    -webkit-transition: all 0.2s ease-in-out 0s;

    transition: all 0.2s ease-in-out 0s;

    -webkit-animation: headAnimation 0.7s 1;

    animation: headAnimation 0.7s 1;

}



.support-online a:hover span {

    display: block;

}



.support-online a span:before {

    content: "";

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 10px 10px 10px 0;

    border-color: transparent #67b634 transparent transparent;

    position: absolute;

    left: -10px;

    top: 10px;

}



.support-online .kenit-alo-circle-fill {

    width: 60px;

    height: 60px;

    top: -10px;

    position: absolute;

    border-radius: 100%;

    border: 2px solid transparent;

    background-color: rgba(0, 175, 242, 0.5);

    opacity: 0.75;

    right: -10px;

}



.support-online .kenit-alo-circle {

    width: 50px;

    height: 50px;

    top: -5px;

    right: -5px;

    position: absolute;

    background-color: transparent;

    border-radius: 100%;

    border: 2px solid rgba(30, 30, 30, 0.4);

    opacity: 0.1;

    border-color: #0089b9;

    opacity: 0.5;

}



.support-online .support-online .btn-support {

    cursor: pointer;

}



.support-online .mes i {

    background: orange;

}



.support-online .sms i {

    background: red;

}



.support-online .call-now i {

    background: green;

}



/* Phone Switch */

.widget-mobile {

    position: fixed;

    left: 50%;

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

    transform: translateX(-50%);

    bottom: 10px;

    z-index: 9999999;

}



#my-phone-circle {

    position: relative;

    width: 50px !important;

    height: 50px !important;

}



.wcircle-open .wcircle-icon i:before {

    content: "\f00d";

}



.wcircle-icon {

    background: #1282fc;

    border-radius: 50%;

    position: relative !important;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.wcircle-icon:before {

    position: absolute;

    content: "";

    width: 60px;

    height: 60px;

    background: rgba(18, 130, 252, 0.5);

    border: 1px solid #ffffff;

    border-radius: 50%;

    left: -5px;

    top: -5px;

    -webkit-animation: pulse 1s infinite ease-in-out;

    animation: pulse 1s infinite ease-in-out;

}



.wcircle-icon:after {

    position: absolute;

    content: "";

    width: 80px;

    height: 80px;

    background: rgba(18, 130, 252, 0.5);

    border-radius: 50%;

    left: -15px;

    top: -15px;

    -webkit-animation: zoomIn 2s infinite ease-in-out;

    animation: zoomIn 2s infinite ease-in-out;

}



.wcircle-menu {

    position: absolute !important;

    left: 0;

    top: 0;

    display: none;

}



.wcircle-menu-item {

    width: 50px;

    height: 50px;

    background: #1282fc;

    border-radius: 50%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.wcircle-menu-item img {

    width: 50px;

    height: 50px;

    display: block;

    border-radius: 50%;

}



.wcircle-menu-item i {

    font-size: 25px;

    color: #ffffff;

    position: relative;

    z-index: 9999;

}



.wcircle-icon i {

    font-size: 25px;

    color: #ffffff;

    position: relative;

    z-index: 9999;

}



.shake-anim {

    -webkit-animation: shake-anim 1s infinite ease-in-out;

    animation: shake-anim 1s infinite ease-in-out;

    -webkit-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

}



.wrap-newsnb {

    background: #f0f0f0;

}



.wrap-newsnb .wrap-content {

    position: relative;

}



a.name-newsnb {

    color: #000;

    font-size: 14px;

    margin: 0 0 10px 0;

    line-height: normal;

}



a.name-newsnb.text-split {

    -webkit-line-clamp: 2;

}



a.name-newsnb:hover {

    color: var(--color-dark-red);

}



.desc-newsnb {

    color: #333;

}



.video-main {

    position: relative;

    height: 500px;

}



.video-main iframe {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0px;

    left: 0px;

}



.listvideos {

    width: 100%;

    height: 40px;

    padding: 0px 10px;

    border: 1px solid #ccc;

    color: var(--color-black);

    margin-top: 10px;

    cursor: pointer;

}



.item-video1 img {

    max-height: 292px;

}



.item-video2 img {

    /* height: 102px; */

}



.pic-video {

    position: relative;

    cursor: pointer;

}



.pic-video:before {

    content: "";

    position: absolute;

    width: 50px;

    height: 35px;

    left: calc(50% - 50px / 2);

    top: calc(50% - 35px / 2);

    z-index: 1;

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

    cursor: pointer;

    background-size: cover;

}



.pic-video img {

    width: 100%;

}



.pic-video-2 {

    position: relative;

    cursor: pointer;

}



.pic-video-2:before {

    content: "";

    position: absolute;

    width: 50px;

    height: 35px;

    left: calc(50% - 50px / 2);

    top: calc(50% - 35px / 2);

    z-index: 1;

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

    cursor: pointer;

    background-size: cover;

}



.pic-video-2 img {

    width: 100%;

}



.name-video {

    font-size: 16px;

    color: var(--color-black);

    margin-bottom: 0px;

}



.owl-video {

    margin-top: 10px;

}



.newshome-intro .name-newshome {

    margin: 10px 0;

}



.newshome-intro .view-newshome {

    margin-top: 10px;

}



.newshome-scroll {

    overflow: hidden;

    max-height: 590px;

}



.news_index_left_box {

    margin: 10px 0;

}



.news_index_left_img {}



.news_index_left_img img {

    width: -webkit-fill-available;

}



.news_index_left_content {

    padding: 15px 0 0 0px;

    position: relative;

}



.news_index_left_name {}



.news_index_left_name a {

    font: 17px var(--fontM);

    text-transform: uppercase;

    color: #000;

    display: -webkit-box;

    width: 100%;

    -webkit-webkit-line-clamp: 2;

    -moz-webkit-line-clamp: 2;

    -ms-webkit-line-clamp: 2;

    -o-webkit-line-clamp: 2;

    -webkit-line-clamp: 2;

    -webkit-webkit-box-orient: vertical;

    -moz-webkit-box-orient: vertical;

    -ms-webkit-box-orient: vertical;

    -o-webkit-box-orient: vertical;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    text-align: left;

}



.news_index_left_desc {

    text-align: left;

    height: 72px;

    font: 14px var(--font);

    line-height: 24px;

    color: #333;

    display: -webkit-box;

    margin: 5px 0 15px 0;

    width: 100%;

    -webkit-webkit-line-clamp: 3;

    -moz-webkit-line-clamp: 3;

    -ms-webkit-line-clamp: 3;

    -o-webkit-line-clamp: 3;

    -webkit-line-clamp: 3;

    -webkit-webkit-box-orient: vertical;

    -moz-webkit-box-orient: vertical;

    -ms-webkit-box-orient: vertical;

    -o-webkit-box-orient: vertical;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}





.news_index_box {

    margin: 10px 0;

    display: flex;

    position: relative;

    background: #F8F8F8;

    padding: 10px;

    margin: 10px 0;

    flex-wrap: wrap;

}



.news_index_date {

    padding: 0 0 5px 0;

}



.news_index_date i {

    color: var(--bgmain);

}



.news_index_date span:after {

    position: relative;

    content: '';

    background: rgb(255 255 255 / 50%);

    width: 20px;

    height: 1px;

    display: block;

}



.news_index_img {

    text-align: left;

    width: 38%;

}



.news_index_img img {

    margin: 0;

    width: -webkit-fill-available;

}



.news_index_content {

    width: 62%;

    padding: 0 0 0 15px;

    position: relative;

}



.news_index_name {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

}



.news_index_name a {

    font: 15px var(--fontM);

    text-transform: uppercase;

    color: #000;

    display: -webkit-box;

    width: calc(100% - 93px);

    -webkit-webkit-line-clamp: 2;

    -moz-webkit-line-clamp: 2;

    -ms-webkit-line-clamp: 2;

    -o-webkit-line-clamp: 2;

    -webkit-line-clamp: 2;

    -webkit-webkit-box-orient: vertical;

    -moz-webkit-box-orient: vertical;

    -ms-webkit-box-orient: vertical;

    -o-webkit-box-orient: vertical;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    text-align: left;

}



.news_index_desc {

    text-align: left;

    height: 72px;

    font: 14px var(--font);

    line-height: 24px;

    color: #333;

    display: -webkit-box;

    margin: 5px 0 0 0;

    width: 100%;

    -webkit-webkit-line-clamp: 3;

    -moz-webkit-line-clamp: 3;

    -ms-webkit-line-clamp: 3;

    -o-webkit-line-clamp: 3;

    -webkit-line-clamp: 3;

    -webkit-webkit-box-orient: vertical;

    -moz-webkit-box-orient: vertical;

    -ms-webkit-box-orient: vertical;

    -o-webkit-box-orient: vertical;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



.news_index_seemore {}



.news_index_left_name a:hover,

.news_index_name a:hover {

    color: Var(--colormain);

}



.news_index_seemore a {

    padding: 10px 0px;

    color: var(--colormain);

    display: inline-block;

    font: 13px var(--font);

}



.news_index_seemore a i {

    padding-left: 5px;

}



.news_index_seemore a:hover {

    color: var(--bgmain);

}



.news_index_describe {

    font: 13px var(--font);

    line-height: 20px;

    color: #333333;

    display: -webkit-box;

    width: 100%;

    -webkit-webkit-line-clamp: 3;

    -moz-webkit-line-clamp: 3;

    -ms-webkit-line-clamp: 3;

    -o-webkit-line-clamp: 3;

    -webkit-line-clamp: 3;

    -webkit-webkit-box-orient: vertical;

    -moz-webkit-box-orient: vertical;

    -ms-webkit-box-orient: vertical;

    -o-webkit-box-orient: vertical;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



.news-slick {

    display: flex;

    margin-bottom: 20px;

    min-height: 156px;

}



.news-slick h3 {

    margin: 0;

}



.news-slick h3 a.name-newshome {

    margin-bottom: 10px;

    font-weight: bold;

    font-size: 17px;

}



.news-slick .img {

    width: 270px;

    border-radius: 10px;

}



.news-slick .info {

    width: calc(100% - 150px);

    padding-left: 15px;

}



.flex_ttnb {

    display: flex;

    flex-flow: row wrap;

    justify-content: space-between;

}



.newshome-intro {

    width: calc(50% - 20px);

}



.newshome-intro .pic-newshome-best {

    border-radius: 10px;

}



.pic-newshome-normal {

    float: left;

    width: 34%;

    margin-right: 3%;

    margin-bottom: 0px;

}



.pic-newshome-normal img {

    width: 100%;

}



.info-newshome-normal {

    float: left;

    width: calc(100% - 37%);

}



.name-newshome {

    color: var(--color-black);

    font-size: 22px;

    line-height: normal;

    font-weight: bold;

}



.name-newshome.text-split {

    -webkit-line-clamp: 2;

}



.name-newshome.text-split a {

    color: #000;

}



.time-newshome {

    color: var(--color-gray);

    margin-bottom: 10px;

}



.desc-newshome {

    color: var(--color-black);

    margin-bottom: 0px;

    text-align: justify;

}



.desc-home-cl.text-split {

    -webkit-line-clamp: 2;

    margin: 0px;

}



.view-newshome {

    width: 140px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #ccc;

    color: #000;

}



.view-newshome:hover {

    color: #000;

}



/*Product */

.box-product {

    position: relative;

    margin-bottom: 2rem;

    text-align: center;

    /* padding: 0.5rem; */

    /* background: #996533; */

    text-align: left;

}



.box-product:hover {

    background: var(--bgmain);

}



.pic-product {

    /* background: #ffffff; */

    position: relative;

    margin-bottom: 0;

    /* padding: 10px; */

    /* border: 1px solid #e5e5e5; */

}



.pic-product img {

    width: 100%;

}



.info-product {

    padding: 0.5rem 0.5rem 0rem 0.5rem;

}



.product-tool {

    opacity: 0;

    visibility: hidden;

    position: absolute;

    width: 100%;

    left: 0px;

    bottom: 0px;

    z-index: 1;

}



.product-tool a {

    cursor: pointer;

    width: 50%;

    padding: 10px;

    text-align: center;

    color: #ffffff;

    background-color: rgb(0 0 0 / 0.6);

}



.product-tool a:hover {

    background-color: rgb(0 0 0 / 0.8);

}



.product-tool a svg {

    margin-right: 5px;

}



.product-tool a span {

    text-transform: capitalize;

    font-size: 12px;

    font-weight: 300;

}



.box-product:hover .product-tool {

    opacity: 1;

    visibility: visible;

}



.product-owl-info {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

}



.name-product-owl {

    padding: 10px 0;

    text-align: center;

}



.name-product {

    color: #fff;

    margin-bottom: 5px;

    font: 15px var(--font-Kalam-Regular);

}



.name-product:hover {

    color: #Fff;

}



.name-product.text-split {

    -webkit-line-clamp: 2;

}



.product-owl-xemchitiet {

    text-align: right;

}



.product-owl-xemchitiet a {

    display: inline-block;

    text-align: left;

    font: 15px var(--font-Kalam-Regular);

    background: var(--bgmain);

    padding: 2px 10px;

    color: #fff;

}



.box-product:hover .product-owl-xemchitiet a {

    background: #996533;

}



.price-product {

    margin: 0px;

    font: 15px var(--font);

    padding: 12px 15px;

}



.price-product span {

    font-family: var(--fontB);

}



.box-product .price-new {

    font-size: 15px;

    color: var(--color-red);

    font-weight: 700;

}



.box-product .price-old {

    padding-left: 10px;

    color: #Fff;

    text-decoration: unset;

    /* font-size: 13px; */

}



.box-product .price-per {

    position: absolute;

    top: 15px;

    right: 15px;

    color: #ffffff;

    background: var(--color-red);

    font-size: 11px;

    border-radius: 2px;

    width: 45px;

    height: 25px;

    text-align: center;

    line-height: 25px;

}



.cart-product {

    margin-bottom: 0px;

}



.cart-product span {

    cursor: pointer;

    width: calc(50% - 3px);

    color: #ffffff;

    text-transform: capitalize;

    text-align: center;

    padding: 7px 5px;

    border-radius: 3px;

}



.cart-add {

    background-color: var(--color-red);

}



.cart-add:hover {

    background-color: var(--color-dark-red);

}



.cart-buy {

    background-color: var(--color-green);

}



.cart-buy:hover {

    background-color: var(--color-dark-green);

}



.box-product-in {

    position: relative;

    margin-bottom: 40px;

}



.pic-product-in {

    /* background: #ffffff; */

    position: relative;

    margin-bottom: 1rem;

}



.pic-product-in img {

    width: 100%;

}



.product-tool {

    opacity: 0;

    visibility: hidden;

    position: absolute;

    width: 100%;

    left: 0px;

    bottom: 0px;

    z-index: 1;

}



.product-tool a {

    cursor: pointer;

    width: 50%;

    padding: 10px;

    text-align: center;

    color: #ffffff;

    background-color: rgb(0 0 0 / 0.6);

}



.product-tool a:hover {

    background-color: rgb(0 0 0 / 0.8);

}



.product-tool a svg {

    margin-right: 5px;

}



.product-tool a span {

    text-transform: capitalize;

    font-size: 12px;

    font-weight: 300;

}



.box-product-in:hover .product-tool {

    opacity: 1;

    visibility: visible;

}



.cover-info-product-in {

    max-width: 400px;

    width: 80%;

    max-width: 540px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

    /* color: #fff; */

}



.name-product-in {

    font-size: 14px;

    color: #3676c3;

    margin-bottom: 20px;

    display: block;

    font-weight: 700;

    font-size: 34px;

    display: block;

}



.name-product-in:hover {}



.name-product-in.text-split {

    -webkit-line-clamp: 2;

}



.price-product-in {

    font-size: 20px;

    font-weight: 600;

}



.price-product-in span {}



.price-product span.price-new {

    font-size: 16px;

    color: var(--bgmainhv);

    position: relative;

    font-family: var(--fontB);

}



.price-product span.price-old {

    padding-left: 10px;

    /* color: #fff; */

    text-decoration: line-through;

    font-size: 13px;

    position: relative;

    top: 1px;

    color: var(--colormain);

}



.price-per {

    position: absolute;

    top: 15px;

    right: 15px;

    color: #ffffff;

    background: var(--color-red);

    font-size: 11px;

    border-radius: 2px;

    width: 45px;

    height: 25px;

    text-align: center;

    line-height: 25px;

}



.cart-product-in {

    margin-bottom: 0px;

}



.cart-product-in span {

    cursor: pointer;

    width: calc(50% - 3px);

    color: #ffffff;

    text-transform: capitalize;

    text-align: center;

    padding: 7px 5px;

    border-radius: 3px;

}



.cart-add {

    background-color: var(--color-red);

}



.cart-add:hover {

    background-color: var(--color-dark-red);

}



.cart-buy {

    background-color: var(--color-green);

}



.cart-buy:hover {

    background-color: var(--color-dark-green);

}





.dm-noibat {

    max-width: 1000px;

    position: relative;

    margin: auto;

    margin-bottom: 40px;

}



.dm-noibat a {

    cursor: pointer;

    color: #333;

    transition: 0.4s;

    text-transform: capitalize;

    font-weight: 400;

    font-size: 16px;

    text-align: center;

    position: relative;

    display: block;

    background: #f7f7f7;

    border-radius: 5px;

    border: 1px solid #eaeaea;

    height: 100%;

    padding: 10px;

}



.dm-noibat a:hover,

.dm-noibat a.active {

    background: var(--background-static);

    color: #fff;

}



.cats-bar {

    width: 50px;

    padding-top: 3px;

    position: relative;

}



.cats-bar-icon {

    width: 30px;

    cursor: pointer;

}



.cats-bar-icon span {

    display: block;

    width: 100%;

    height: 2px;

    background: #505050;

    transition: all 0.3s;

    position: relative;

}



.cats-bar-icon span+span {

    margin-top: 5px;

}



.cats-bar-icon.active span:nth-child(1) {

    animation: ease 0.7s top forwards;

}



.cats-bar-icon.not-active span:nth-child(1) {

    animation: ease 0.7s top-2 forwards;

}



.cats-bar-icon.active span:nth-child(2) {

    animation: ease 0.7s scaled forwards;

}



.cats-bar-icon.not-active span:nth-child(2) {

    animation: ease 0.7s scaled-2 forwards;

}



.cats-bar-icon.active span:nth-child(3) {

    animation: ease 0.7s bottom forwards;

}



.cats-bar-icon.not-active span:nth-child(3) {

    animation: ease 0.7s bottom-2 forwards;

}



@keyframes top {

    0% {

        top: 0;

        transform: rotate(0);

    }



    50% {

        top: 6px;

        transform: rotate(0);

    }



    100% {

        top: 6px;

        transform: rotate(45deg);

    }

}



@keyframes top-2 {

    0% {

        top: 6px;

        transform: rotate(45deg);

    }



    50% {

        top: 6px;

        transform: rotate(0deg);

    }



    100% {

        top: 0;

        transform: rotate(0deg);

    }

}



@keyframes bottom {

    0% {

        bottom: 0;

        transform: rotate(0);

    }



    50% {

        bottom: 8px;

        transform: rotate(0);

    }



    100% {

        bottom: 8px;

        transform: rotate(135deg);

    }

}



@keyframes bottom-2 {

    0% {

        bottom: 8px;

        transform: rotate(135deg);

    }



    50% {

        bottom: 8px;

        transform: rotate(0);

    }



    100% {

        bottom: 0;

        transform: rotate(0);

    }

}



@keyframes scaled {

    50% {

        transform: scale(0);

    }



    100% {

        transform: scale(0);

    }

}



@keyframes scaled-2 {

    0% {

        transform: scale(0);

    }



    50% {

        transform: scale(0);

    }



    100% {

        transform: scale(1);

    }

}



.cats-owl.list-hot {

    width: calc(100% - 50px);

}





@-webkit-keyframes rotating {

    from {

        -webkit-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }



    to {

        -webkit-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



@keyframes rotating {

    from {

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -webkit-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }



    to {

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -webkit-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



.choose_list {

    display: flex;

    list-style: none;

    justify-content: center;

    align-items: center;

    flex-flow: wrap;

    margin: 0 0 20px 0;

}



.choose_list span {

    color: #333333;

    display: block;

    padding: 7px 25px;

    border: 1px solid rgba(0, 0, 0, 0.3);

    border-radius: 30px;

    text-transform: uppercase;

    margin: 3px;

    display: block;

    background: #ffffff;

    cursor: pointer;

}



.choose_list span:hover,

.choose_list span.choosed {

    background: #676767;

    color: #ffffff;

}



.btn_sp {}



.btn_sp a {

    color: #000;

    text-transform: uppercase;

    background: #e6e6e6;

    width: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 40px;

}



.btn_sp a:hover {

    color: #f00;

}



.d-title-choose-list {

    margin-bottom: 20px;

    background: #f2f2f2;

    padding: 7px 10px;

    border-bottom: 5px solid var(--color-main);

    border-radius: 6px;

}



.d-title-choose-list h2 {

    margin: 0px;

}



.d-title-choose-cat {}



/* dat lich */

.div-datlich {

    width: 46%;

}



.form-booking {}



.newsletter-booking {

    margin-bottom: 5px;

}



.newsletter-booking input {

    border-radius: 0;

    border: none;

    border-bottom: 1px solid var(--background-static);

    background: none;

    padding: 0;

}



.newsletter-booking input::placeholder {}



.newsletter-booking textarea {

    border-radius: 0;

    border: none;

    border-bottom: 1px solid var(--background-static);

    background: none;

    margin-bottom: 10px;

    padding: 0;

}



.newsletter-booking textarea::placeholder {}



.newsletter-checkbox {}



.newsletter-checkbox input {

    outline: none;

    width: 15px;

    height: 15px;

}



.d-dongy {}



.label-checkbox {

    color: #7e7e7e;

    position: relative;

    top: 1px;

    margin-left: 10px;

}



.booking-button {}



.booking-button input {

    width: 86px;

    height: 37px;

    font-weight: 600;

    color: #fff;

    text-transform: capitalize;

}



.khung-datlich {

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

    padding: 40px;

    border: 1px solid var(--background-static);

    border-radius: 20px;

}



.desc-dongy {

    color: #7e7e7e;

    font-size: 13px;

    font-style: italic;

    margin-top: 5px;

}



.btn-datlich {

    position: fixed;

    bottom: 455px;

    right: 10px;

    padding: 10px;

    border-radius: 5px;

    z-index: 99;

    background: #333;

    color: #fff;

    font-size: 14px;

    text-align: center;

    text-decoration: none !important;

}



.btn-datlich i {

    font-size: 20px;

}



.btn-datlich:hover {

    color: #ffff00;

    transition: 0.2s;

}



@keyframes spin {

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



@-webkit-keyframes spin {

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



@keyframes blink {

    0% {

        opacity: 1;

    }



    50% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



@-webkit-keyframes blink {

    0% {

        opacity: 1;

    }



    50% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



@keyframes shake-anim {

    0% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg);

    }



    10%,

    30% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg);

    }



    20%,

    40% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg);

    }



    100%,

    50% {

        -moz-transform: rotate(0) scale(1) skew(1deg);

    }

}



@-webkit-keyframes shake-anim {



    0%,

    100%,

    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

    }



    10%,

    30% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);

    }



    20%,

    40% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg);

    }

}



.popup-custom .modal-content {

    border-radius: 0px;

    border: 0px;

}



.popup-custom .modal-content .modal-body {

    padding: 10px;

}



.popup-custom .close {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 40px;

    height: 40px;

    z-index: 2;

    color: #888888;

    cursor: pointer;

    border: 1px solid #eeeeee;

    background-color: #ffffff;

    opacity: 1 !important;

}



#popup-quickview .modal-dialog {

    max-width: 1140px;

}



.opacity-0 {

    opacity: 0;

}



@keyframes fadeInUp {

    0% {

        opacity: 0;

        transform: translate3d(0, 100px, 0);

    }



    100% {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}



@keyframes fadeInDown {

    0% {

        opacity: 0;

        transform: translate3d(0, -100px, 0);

    }



    100% {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

}



@keyframes scaleLarge {

    0% {

        opacity: 0;

        transform: scale(2);

    }



    100% {

        opacity: 1;

        transform: scale(1);

    }

}



/*.border-radius-right{border-radius: 0px 50px 50px 0px;}*/

/*.border-radius-left{border-radius: 50px 0px 0px 50px;}*/

.cover-chungchi {

    padding: 3rem;

    background: #f1f1f1;

    border-radius: 10px;

}



.wrap-why {

    /* padding: 40px 0px 0px; */

    text-align: center;

    overflow: hidden;

    background-size: cover !important;

    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(17, 13, 0, 0.7)) !important;

    color: #fff;

}



.wrap-why .title-main {

    color: #fff;

}



.wrap-why .title-main span {

    color: #fff;

}



.wrap-why .title-main span b {

    color: #fbcb05;

}



.wrap-why .why-item {

    margin: 4rem 0px;

    /* display: flex; */

    /* align-items: center; */

    overflow: hidden;

    padding: 0px 10px;

}



.wrap-why .why-item:hover .why-item_img {

    -webkit-transform: rotateY(180deg);

    -moz-transform: rotateY(180deg);

    transform: rotateY(180deg);

}



.wrap-why .why-item:nth-child(2) {

    /* margin-left:40px; */

}



.wrap-why .why-item.why-item-first:nth-child(2) {

    /* margin-right:40px; */

    /* margin-left: 0px; */

}



.why-item.why-item-first {}



.why-item.why-item-first .why-item_img {

    float: right !important;

}



.why-item.why-item-first .why-item_text {}



.wrap-why .why-item:hover .why-item_img img {}



.wrap-why .why-item .why-item_img {

    /* margin: 15px 0px; */

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    float: left;

    transition: 1s;

    overflow: hidden;

    padding: 5px;

    background: linear-gradient(to right, #daa44c, #fed65f, #daa44c);

}



.wrap-why .why-item .why-item_img img {

    max-height: 60px;

}



.wrap-why .why-item .why-item_text {

    margin: 0.7rem 0px;

}



.wrap-why .why-item:hover .why-item_text h3 {

    color: #fbcb05;

}



.wrap-why .why-item .why-item_text h3 {

    font-size: 20px;

    color: #fff;

    padding: 0px 0px 0.7rem;

    text-transform: uppercase;

    font-weight: 600;

}



.wrap-why .why-item .why-item_text p {

    color: rgba(255, 255, 255, 0.7);

    font-size: 15px;

    margin: 0px;

    -webkit-line-clamp: 3;

    /* font-weight: 300; */

}



.cover-why {

    margin-top: -50px;

}



.wrap-feedback {}



.cover-feedback {

    padding: 3rem 0px;

    background: var(--color-main);

}



.feedback .feedback__desc {

    padding: 20px;

    border-radius: 10px;

    position: relative;

    background: #fff;

    margin-bottom: 30px;

    font-style: italic;

}



.feedback .feedback__desc::before {

    display: inline-block;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 15px 10px 0 10px;

    border-color: #fff transparent transparent transparent;

    position: absolute;

    content: "";

    bottom: -13px;

    left: 18px
}



.feedback .feedback-info {

    display: flex;

    align-items: center;

}



.feedback .feedback-info .feedback-info__pic {

    margin-right: 20px;

    margin-bottom: 0;

}



.feedback .feedback-info .feedback-info__pic img {

    width: 50px !important;

    height: 50px;

    border-radius: 999px;

    box-sizing: content-box;

    -o-object-fit: cover;

    object-fit: cover;

}



.feedback .feedback-info .feedback-info__text__name,

.feedback .feedback-info .feedback-info__text__job {

    margin-bottom: 0;

    color: #fff;

    line-height: 1.5em;

}



.feedback .feedback-info .feedback-info__text__name {

    font-weight: bold
}



.feedback .feedback-info .feedback-info__text__job {

    font-weight: 500
}



.radius-7 {

    border-radius: 10px;

}



#video-main {}



.video-index {

    position: relative;

}



.video-index:hover h2 {

    opacity: 1;

}



.video-index:hover img {

    filter: brightness(0.5);

}



.video-index h2 {

    opacity: 0;

    position: absolute;

    color: #fff;

    font-size: 18px;

    text-transform: uppercase;

    padding: 10px;

    text-align: center;

    bottom: 0;

    left: 0;

    right: 0;

}



.video-index {

    position: relative;

    overflow: hidden;

    border-radius: 20px;

}



.video-index .relative:after {

    content: '';

    position: absolute;

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

    display: flex;

    align-content: center;

    justify-content: center;

    pointer-events: none;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0;

}



.video-index .text-video {}



.video-index .text-video h2 {

    font-weight: bold;

    color: #000000;

    font-size: 17px;

    margin-top: 15px;

    margin-bottom: 5px;

}



.video-index .text-video p {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    color: #000;

    font-size: 15px;

}



.icon_play {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: 0 auto;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

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

}



.icon_play svg {

    width: 20%;

    border: 1px solid #fff;

    padding: 5px;

    border-radius: 50%;

}



.icon_play .load_video {

    display: inline-block;

}



.icon_play .load_video img {

    max-width: 75px !important;

    height: auto;

}



.icon_play .pinkBg {

    background-color: rgba(210, 202, 204, 0.8);

    background-image: linear-gradient(90deg, rgba(199, 198, 198, 0.8), rgba(181, 181, 181, 0.8));

}



.icon_play .ripple {

    position: absolute;

    width: 130px;

    height: 130px;

    z-index: -1;

    left: 50%;

    top: 50%;

    opacity: 0;

    margin: -65px 0 0 -65px;

    border-radius: 100px;

    -webkit-animation: ripple 1.8s infinite;

    animation: ripple 1.8s infinite;

}



.icon_play .ripple:nth-child(2) {

    animation-delay: .3s;

    -webkit-animation-delay: .3s
}



.icon_play .ripple:nth-child(3) {

    animation-delay: .6s;

    -webkit-animation-delay: .6s
}



@-webkit-keyframes ripple {

    0% {

        opacity: 1;

        -webkit-transform: scale(0);

        transform: scale(0)
    }



    100% {

        opacity: 0;

        -webkit-transform: scale(1);

        transform: scale(1)
    }

}



@keyframes ripple {

    0% {

        opacity: 1;

        -webkit-transform: scale(0);

        transform: scale(0)
    }



    100% {

        opacity: 0;

        -webkit-transform: scale(1);

        transform: scale(1)
    }

}



.footer-news:nth-child(4) {

    width: 27%;

}



.footer-news:nth-child(3) {

    width: 23%;

}



.footer-news:nth-child(2) {

    width: 32%;

}



.footer-news:nth-child(1) {

    width: 14%;

}



.project {

    margin-bottom: 10px;

    display: block;

    /* overflow: hidden; */

    margin-bottom: 30px;

    border-radius: 10px;

}



.project .pic-project {

    /* border-radius: 10px; */

    margin: 0px;

}



.project .pic-project img {

    width: 100%;

}



.project .info-project {}



.project .info-project:not(.project .flex-row-reverse .info-project) {}



.project .flex-row-reverse .info-project {

    padding-right: 20px;

    border-right: 2px solid #002b6e;

}



.project .name-project {

    color: #002b6e;

    font-size: 18px;

    display: block;

    /* margin-bottom: 15px; */

    /* margin-top: 10px; */

    font-weight: 600;

    /* text-align: center; */

    /* margin: 10px; */

    margin-top: 20px;

    margin-bottom: 10px;

}



.project .name-project:hover {

    color: #012b6e;

}



.project .time-project {

    color: var(--color-gray);

    margin-bottom: 0.25rem;

    border-bottom: 1px dashed #ccc;

    padding-bottom: 10px;

}



.project .desc-project {

    color: #313131;

    /* margin-top: 5px; */

}



.project .link-project {

    color: #002b6e;

    display: inline-block;

    padding: 10px 15px;

    border: 2px solid #002b6e;

    margin-top: 15px;

    font-size: 16px;

}



.project .link-project:hover {

    background: #002b6e;

    color: #fff;

}





.field {

    margin-bottom: 10px;

    display: block;

    /* overflow: hidden; */

    margin-bottom: 30px;

    padding: 10px;

    border: 1px solid #ececec;

    border-radius: 10px;

}



.field .pic-field {

    border-radius: 10px;

    margin: 0px;

}



.field .pic-field img {

    width: 100%;

}



.field .info-field {}



.field .info-field:not(.field .flex-row-reverse .info-field) {}



.field .flex-row-reverse .info-field {

    padding-right: 20px;

    border-right: 2px solid #002b6e;

}



.field .name-field {

    color: #000;

    font-size: 16px;

    display: block;

    /* margin-bottom: 15px; */

    /* margin-top: 10px; */

    font-weight: 600;

    text-align: center;

    margin: 10px;

    margin-top: 20px;

    margin-bottom: 5px;

}



.field .name-field:hover {

    color: #012b6e;

}



.field .time-field {

    color: var(--color-gray);

    margin-bottom: 0.25rem;

    border-bottom: 1px dashed #ccc;

    padding-bottom: 10px;

}



.field .desc-field {

    color: #002b6e;

    /* margin-top: 5px; */

}



.field .link-field {

    color: #002b6e;

    display: inline-block;

    padding: 10px 15px;

    border: 2px solid #002b6e;

    margin-top: 15px;

    font-size: 16px;

}



.field .link-field:hover {

    background: #002b6e;

    color: #fff;

}



.field:hover .name-field {

    color: var(--color-main)
}



.item-small {

    margin: 0 5px;

    border: 1px solid var(--color-main);

}



.item-small.slick-center,

.item-small.slick-current {

    border-color: var(--color-red);

}



.slider_small .slick-list {

    margin: 0 -5px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.item-big img {

    margin: 0 auto
}



.slider_big .slick-dots li {

    width: 10px;

    height: 12px;

}



.slider_big .slick-dots li button {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    border: 1px solid var(--color-main);

}



.slider_big .slick-dots li.slick-active button {

    background: var(--color-main);

}



.slider_big .slick-dots li button:before {

    display: none
}





.widget-title {

    font-size: 18px;

    /* border: 1px solid #f0f0f0; */

    position: relative;

    text-transform: uppercase;

    color: #000;

    text-align: center;

    font-weight: 600;

    border-bottom: none;

    margin: 0;

}



.widget-title span {

    display: block;

    /* margin: 15px 25px 0px; */

    /* border-bottom: 1px solid #8d8d8d; */

    /* padding-bottom: 15px; */

    padding: 0.8rem;

    background: var(--bgmainhv);

    color: #fff;

}



.menu_mega_in {

    position: sticky;

    top: var(--sticky-wg-menu);

    z-index: 2;

}



.menu_mega_in .title_menu {

    background: #c40316;

    padding: 10px;

    text-align: center;

    color: #fff;

    text-transform: uppercase;

    font-weight: 600;

    font-size: 15px;

}



.menu_mega_in .title_menu .title_ {

    margin-left: -10px;

}



.menu_mega_in .title_menu .nav_button {

    float: left;

    margin-left: 15px;

}



.menu_mega_in .title_menu .nav_button i {}



.menu_mega_in:hover .menu_all_site {

    display: block !important;

    /* position: absolute; */

    left: 0;

    z-index: 0;

    right: 0;

    background: #fff;

    z-index: 9;

}



.menu_mega_in .menu_all_site {

    position: relative;

    /* z-index: 9; */

    /* background: #fff; */

    /* padding-top: 5px; */

    /* border: 1px solid #f0f0f0; */

    border-top: none;

}



.menu_mega_in .menu_all_site .nav-left {

    /* border: 1px solid #000; */

    border-top: none;

    border: 1px solid #f0f0f0;

    /* border-radius: 0px 0px 7px 7px; */

    background: #fff;

    /* border-top: none; */

}



.menu_mega_in .menu_all_site .nav-left::-webkit-scrollbar {

    background: #ffffff;

    width: 2px;

    height: 11px;

}



.menu_mega_in .menu_all_site .nav-left::-webkit-scrollbar-thumb {

    background: #f7f7f7;

    border-radius: 50px;

}



.menu_mega_in .menu_all_site .nav-left .nav-item.lv1 {

    /* padding: 0px 15px; */

    position: relative;

}



.menu_mega_in .menu_all_site .nav-left li:last-child a {

    border-bottom: none !important;

}



.menu_mega_in .menu_all_site .nav-left .nav-item.lv1 a {

    color: #292929;

    display: block;

    /* border-bottom: 1px solid #f9f9f9; */

    padding: 12px 15px;

    font-size: 15px;

    position: relative;

    z-index: 8;

    border-bottom: 1px dashed #e7e7e7;

    font-weight: 600;

}



.menu_mega_in .menu_all_site .nav-left .nav-item.lv1 a img {

    display: inline-block;

    margin-right: 10px;

    float: left;

    margin-top: 5px;

}



.menu_mega_in .menu_all_site .nav-left .nav-item.lv1 a:hover {

    color: #375ed2;

    background: rgb(116 116 116 / 20%);

}



.menu_mega_in .menu_all_site .nav-left .nav-item.lv1:last-child {

    border: none;

}



.menu_mega_in .menu_all_site .nav-left .nav-item .nav-right_one {

    position: absolute;

    left: 100%;

    width: 250px;

    background: #fff;

    z-index: 9;

    top: -1px;

    border: 1px solid #f0f0f0;

    border-left: 1px solid var(--color-main);

    display: none;

}



.menu_mega_in .menu_all_site .nav-left .nav-item .nav-right_one .nav-item.lv2:nth-child(3n+4) {

    clear: both;

}



.menu_mega_in .menu_all_site .nav-left .nav-item .nav-right_one .nav-item.lv2 a {

    font-size: 15px;

    display: block;

    /* margin-bottom: 5px; */

    /* border: none; */

    padding-left: 15px;

}



.menu_mega_in .menu_all_site .nav-left .nav-item.lv1:hover .nav-right_one {

    display: block;

}



.menu_mega_in .menu_all_site .nav-left .nav-item .nav-right_one .nav-item.lv2 .nav-right_two {

    position: absolute;

    left: 100%;

    width: 250px;

    background: #fff;

    z-index: 9;

    top: -1px;

    border: 1px solid #f0f0f0;

    border-left: 1px solid var(--color-main);

    display: none;

}



.menu_mega_in .menu_all_site .nav-left .nav-item .nav-right_one .nav-item.lv2:hover .nav-right_two {

    display: block;

}



.menu_mega_in .menu_all_site .nav-left .nav-item .nav-right_one .nav-item.lv2 .nav-right_two .nav-item.lv3 a {

    background: none;

    font-weight: normal;

    text-transform: inherit;

    color: #000;

    padding-left: 15px;

}



.menu_mega_in .menu_all_site .nav-left .nav-item .nav-right_one .nav-item.lv2 .nav-right_two .nav-item.lv3 a:hover {

    color: #c40316;

}



.menu_mega_in i {

    font-size: 13px;

    color: var(--color-main);

    margin-right: 5px;

    position: relative;

    z-index: 9;

}



.menu_mega_in ul li span {

    color: #a1a1a1;

    font-size: 12px;

    margin-left: 5px;

}



.menu_mega_in ul li a.active {

    font-weight: 600 !important;

    color: #000 !important;

}



.widget-one .newshome-scroll {

    width: 100%;

}



.widget-one .newshome-scroll .news-slick .img {

    width: 100px;

}





.newshome-widget {

    width: 100%;

    overflow: hidden;

    /* max-height: 406px; */

    padding: 10px;

    padding-bottom: 0px;

    border: 1px solid #f0f0f0;

}



.news-widget {

    display: flex;

    margin-bottom: 20px;

    /* min-height: 155px; */

}



.news-widget h3 {

    margin: 0;

}



.news-widget h3 a.name-news-widget {

    margin-bottom: 5px;

    font-weight: bold;

    font-size: 14px;

    color: #000;

}



.news-widget .img-news-widget {

    width: 100px;

}



.news-widget .info-news-widget {

    width: calc(100% - 100px);

    padding-left: 15px;

}





.the-service-content {

    margin-bottom: 30px;

    max-height: 300px;

    overflow-y: hidden;

    position: relative;

}



.the-service-content.show-full-content {

    max-height: 100%;

    padding-bottom: 50px;

}



.hide-content {

    position: absolute;

    width: 100%;

    bottom: 0;

    padding: 80px 0 0 0;

    z-index: 1;

    text-align: center;

    background: -webkit-linear-gradient(transparent, #fff 50%);

    background: -o-linear-gradient(transparent, #fff 50%);

    background: linear-gradient(transparent, #fff 50%);

}



.hide-content.removeBlur {

    background: none;

    padding-top: 0;

}



.btn-view-full-content {

    display: inline-block;

    border-radius: 4px;

    /* border: 1px solid #ccc; */

    padding: 10px 40px;

    margin: 9px;

    text-align: center;

    text-transform: capitalize;

    color: #333;

    transition: .3s;

    background: #fff;

    /* color: #fff; */

    box-shadow: 0 5px 2px 0 rgba(60, 64, 67, .1), 0 4px 6px 2px rgba(60, 64, 67, .05);

    max-width: 335px;

    width: 100%;

}



.btn-view-full-content:hover {

    background: var(--color-main);

    border-color: var(--color-main);

    color: #fff;

}







#google_translate_element {

    float: right;

    margin: 14px 4px;

}



.goog-te-gadget-simple .goog-te-menu-value {

    padding-left: 21px;

}



.goog-te-gadget img {

    position: absolute;

}



.goog-te-gadget {

    font-size: 0px !important;

    height: 34px;

}



.goog-te-gadget>div {

    height: 33px;

}



.goog-te-gadget span {

    display: none;

}



.goog-te-combo {

    border: 1px solid #fff;

    height: 30px;

    border-radius: 4px;

    width: 155px;

    margin: 7px 0px !important;

    color: #3a9e41;

}



.goog-te-banner-frame {

    display: none;

    height: 0px !important;

}



.execphpwidget {

    float: right;

    width: 155px;

}



.goog-te-banner-frame {

    display: none;

    height: 0px !important;

}



.skiptranslate {

    height: 0px;

    overflow: hidden;

    width: 0px;

}



.skiptranslate iframe {

    opacity: 0;

    position: relative;

    z-index: -999;

}



.hover-effect-light {

    overflow: hidden;

    position: relative;

    position: relative;

    display: block;

}



.hover-effect-light:before {

    position: absolute;

    top: 0;

    left: -85%;

    z-index: 10;

    display: block;

    content: '';

    width: 50%;

    height: 100%;

    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);

    -webkit-transform: skewX(-25deg);

    transform: skewX(-25deg);

}



.hover-effect-light:hover:before {

    transition: 1s;

    left: 100%;

}



.wrap-formdatlichfollowus {

    background: #C7DABC;

    padding: 20px 0;

}



.formdatlichfollowus {

    display: grid;

    grid-template-columns: 1fr 55%;

    /* 2 cột bằng nhau */

    gap: 10px 20px;

    align-items: end;

}



.formdatlichfollowus-left {}



.formdatlichfollowus-right {}



.title-travel {

    text-align: center;

    color: #004B1B;

    font: 100px var(--font-Italianno-Regular);

    line-height: 100px;

    margin: 20px 0 0;

}



.subtitle-follow {

    text-align: center;

    color: #004B1B;

    text-transform: uppercase;

    margin: 0px 0 30px;

    font: 25px var(--font-Inter-Regular);

}



.follow {

    display: flex;

    flex-wrap: wrap;

    gap: 5px 10px;

    align-content: center;

    justify-content: center;

    align-items: center;

    margin: 0 0 30px 0;

}



.follow-item {

    flex-grow: 1;

    position: relative;

}



.follow-item:before {

    position: absolute;

    content: '';

    left: 0;

    right: 0;

    top: -5px;

    height: calc(100% + 10px);

    width: 75%;

    border: 1px solid var(--color-main);

    border-radius: 25px;

    margin: 0 auto;

}



.follow-item a {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    align-items: center;

    background: #996533;

    border-radius: 25px;

    padding: 5px 20px;

    color: #fff;

    text-transform: uppercase;

    font-weight: 600;

    gap: 0 10px;

    position: relative;

}



.follow-item:hover a {

    background: var(--color-main);

}



.follow-item a img {}



.follow-item a span {}



.videoHome-item {}



.videoHome-item a {

    display: block;

    position: relative;

}



.videoHome-item a:after {

    position: absolute;

    content: '';

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

}



.videoHome-item img {

    width: -webkit-fill-available;

}



.formdatlich {

    background: var(--color-main);

    padding: 5px;

}



.formdatlich-title {

    padding: 10px 0 15px;

    color: #fff;

    text-align: center;

    text-transform: uppercase;

}



.formdatlich-title span {

    display: inline-block;

    background: #fff;

    color: #0048FF;

    font: 34px var(--font-Manuale-Bold);

    text-transform: capitalize;

    padding: 0px 20px;

}



.formdatlich-content {

    background: #fff;

    padding: 10px;

}



.formdatlich-content-boxdatlich {}



.formdatlich-content-boxdatlich-title {

    color: #000;

    text-transform: uppercase;

    font-size: 20px;

    font-weight: bold;

    margin: 10px 0 10px 0;

}



.formdatlich-content-boxdatlich-title-min {

    color: #000;

    text-transform: uppercase;

    font-size: 16px;

    font-weight: bold;

    margin: 10px 0 10px 0;

}



.note-uudai {

    background: #31B725;

    color: #fff;

    padding: 10px 10px;

    text-align: center;

}



.note-uudai-title {

    text-transform: uppercase;

    font-size: 15px;

    font-weight: bold;

    margin: 0 0 10px 0;

}



.note-uudai-content {

    font-size: 12px;

}



.videoHome-slick-box {

    padding: 0 30px;

}



.formdatlich-content-boxdatlich-content-flex {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;

    gap: 10px;

}



.input_datlich {

    width: 100%;

}



.input_datlich_50 {

    width: calc(50% - 5px);

}



.input_datlich input {

    border: 1px solid #828282;

}



.title-soluongdatlich {

    color: #000;

    margin: 5px 0 0;

}



.input_datlich-min {

    display: flex;

    margin: 10px 0;

    align-content: center;

    justify-content: flex-start;

    align-items: center;

}



.input_datlich-min label {

    font-size: 13px;

    width: 150px;

}



.input_datlich-min input {

    width: inherit;

}



.luutru-multiselect {

    border: 1px solid #000;

    position: relative;

}



.luutru-dropdown {

    padding: 10px 10px;

    border: 1px solid #000;

    position: absolute;

    width: 100%;

    background: #fff;

    z-index: 1;

}



.luutru-option {

    width: 100%;

    display: flex;

    margin: 5px 0;

    flex-wrap: wrap;

    align-content: center;

    justify-content: flex-start;

    align-items: center;

    gap: 0 5px;

    cursor: pointer;

}



.luutru-option input {

    width: 15px;

    height: 15px;

}



.luutru-trigger {

    padding: 10px 10px;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

}



.luutru-placeholder {

    display: block;

    width: calc(100% - 20px);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    -webkit-line-clamp: 1;

}



.input_datlich_50 #btn-datlich {

    background: var(--bgmain);

    color: #fff;

    width: 100%;

    border: 0;

    height: 42px;

}



.input_datlich_50_booknow {

    display: flex;

    flex-wrap: wrap;

    align-content: flex-end;

    align-items: flex-end;

}









.box-khonggian-home {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 15px;

}



.box-khonggian-home .left {

    display: grid;

    grid-template-rows: 2fr 1fr;

    /* Box lớn trên, cụm nhỏ dưới */

    gap: 15px 0;

}



.box-khonggian-home .left-bottom {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}



.box-khonggian-home .right {

    display: grid;

    grid-template-rows: 1fr;

    gap: 15px 0;

}



.box-khonggian-home .box {

    position: relative;

    /* border-radius: 12px; */

    overflow: hidden;

    /* background: #ccc; */

}



.box-khonggian-home .box .img_ {

    height: 100%;

}



.box-khonggian-home .box img {

    /* width: 100%; */

    height: 100%;

    /* object-fit: cover; */

    /* display: block; */

    width: -webkit-fill-available;

}



.box-khonggian-home .box .info {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    color: #fff;

    font-size: 14px;

}



.khonggian-name {

    font: 18px var(--font-Kalam-Regular);

    background: var(--bgmain);

    padding: 5px 10px;

    display: inline-block;

}



.khonggian-text {

    font: 15px var(--font);

}



.khonggian-diachi {

    font: 15px var(--font);

}



.title-album {

    text-align: center;

    margin: 0 0 20px 0;

    font: 90px var(--font-Italianno-Regular);

    color: var(--bgmain);

}



.section-albumhome {

    padding: 30px 0;

}



.img_ {

    overflow: hidden;

    display: block;

    position: relative;

}



.img_ img {

    transition: 0.3s ease-out;

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

    transform: scale(1, 1);

}



.img_:hover>img,

.img_:hover a img {

    transition: 0.3s ease-out;

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

    transform: scale(1.1, 1.1);

}



.view-more {

    text-align: center;

    margin: 20px 0 0;

}



.view-more a {

    display: inline-block;

    text-align: left;

    font: 15px var(--font-Kalam-Regular);

    background: #996533;

    padding: 2px 10px;

    color: #fff;

}



.view-more a:hover {

    background: var(--bgmain);

}



.padding {

    padding: 30px 0;

}



.title-home {

    margin-bottom: 12px;

    text-align: center;

}



.title-home h2 {

    color: #000;

    font-size: 25px;

    position: relative;

    margin: 0px;

    display: inline-block;

    font-family: he;

    text-transform: uppercase;

    font-weight: normal;

    position: relative;

    padding: 25px 30px;

    font-family: UTMEremitage;

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

    background-size: 100% 100%;

}



.title-home h2:before {

    position: absolute;

    content: '';

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

    width: 59px;

    height: 87px;

    top: 0px;

    left: -59px;

    background-size: 100% 100%;

}



.title-home h2:after {

    position: absolute;

    content: '';

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

    width: 59px;

    height: 87px;

    right: -58px;

    top: 0px;

    background-size: 100% 100%;

}



.row-product-list {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.product-list-item {

    text-align: center;

    margin: 20px 0 0;

}



.product-list-img {

    border-radius: 50%;

    overflow: hidden;

    border: 8px solid var(--bgmainhv);

    margin: 0 auto;

}



.product-list-img img {

    width: -webkit-fill-available;

}



.product-list-item-name {

    margin: 10px 0 0px;

}



.product-list-item-name a {

    font: 15px var(--fontB);

    color: #fff;

    text-transform: capitalize;

}



.product-list-item-name a:hover {

    color: Var(--colormainhv);

}



.product-list-item-hotline {

    font: 17px var(--fontM);

    color: Var(--colormain);

    padding: 5px 0;

}



.product-list-item-hotline span {

    color: var(--colormainhv);

    font-family: var(--fontM);

}



.section-sanphamHome {

    padding: 40px 0;

}



/*about*/



.section-about {

    padding: 50px 0;

}



.about-name {

    color: #313131;

    font-family: var(--fontB);

    font-size: 26px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 20px;

}



.line_gthieu {

    width: 430px;

    height: 2px;

    background: black;

    left: 0;

    right: 0;

    margin: 0 auto;

    position: relative;

}



.about-row {

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px 20px;

}



.about-left {

    width: 25%;

}



.about-mid {

    width: 46%;

}



.about-right {

    width: 25%;

}



.photo-about1 {

    margin: -30px 0 0 -10px;

}



.photo-about2 {

    position: absolute;

    bottom: 0;

}



.photo-about3 {}



.about_left img {}



.about-video {

    overflow: hidden;

    border-radius: 15px;

    height: 390px;

}



/* .about_img-row {

      display: flex;

      align-items: flex-start;

      justify-content: space-between;

      align-content: flex-start;

      padding: 80px 0;

      position: relative;

      overflow: hidden;

      height: 790px;

  }

   */

.about_img {}



/* .about_img1 {

      left: 0;

      top:80px;

      animation: run 10s  infinite;

  }

  

  .about_img2 {

      right: 0;

      top:0;

      animation: runnow 10s  infinite;

  } */



@keyframes run {

    0% {

        top: 80px;

    }



    50% {

        top: 0px;

    }



    100% {

        top: 80px;

    }

}



@keyframes runnow {

    0% {

        top: 0px;

    }



    50% {

        top: 80px;

    }



    100% {

        top: 0px;

    }

}



.title-home1 {

    margin: 0 auto;

    font: 70px var(--font);

    text-transform: uppercase;

    background: linear-gradient(to bottom, #990808 0%, #ffffff 71%, rgba(255, 255, 255, 0) 100%);

    color: transparent;

    -webkit-background-clip: text;

    text-transform: uppercase;

    margin-bottom: -44px;

    text-align: center;

}



.title-home2 {

    font: 60px var(--fontBLI);

    position: relative;

    text-align: center;

    margin: 0 0 30px;

    padding: 0 0 50px 0;

    background: url(../images/line.png) center bottom no-repeat;

}



.title-home2 span {

    display: block;

    position: relative;

    background: var(--bgrgRight);

    color: transparent;

    -webkit-background-clip: text;

    text-transform: uppercase;

}



.title-home2::before {

    content: attr(aria-label);

    display: block;

    font: 60px var(--fontBLI);

    color: transparent;

    text-transform: uppercase;

    margin-top: 5px;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    text-shadow: 2px -2px 1px rgb(83 83 83 / 60%);

    text-align: center;

    width: 100%;

}



.box-newsletter .title-home2 {

    font-size: 40px;

    background: transparent;

    padding: 0;

}



.box-newsletter .title-home2::before {

    font-size: 40px;

}



.box-newsletter .title-home2 span {}



.about_right {

    width: 52%;

    position: relative;

    padding: 20px;

    background: #fff;

}



.about-text1 {

    font: 64px var(--fontB);

    color: #fff;

    text-transform: uppercase;

    overflow-wrap: anywhere;

    -webkit-text-stroke: 3px #0b5ed7;

    text-align: left;

}



.about-text2 {

    font: 64px var(--fontB);

    color: #fff;

    text-transform: uppercase;

    overflow-wrap: anywhere;

    text-align: center;

    -webkit-text-stroke: 3px #0b5ed7;

}



.about_des {

    font: 14px var(--font);

    color: #333333;

    line-height: 26px;

    margin: 20px auto;

    width: 100%;

}



.about-image-2 {

    text-align: center;

}



.about-image-2 img {

    margin: 0 auto;

}



.about_seemore {

    margin: 10px 0 15px;

    text-align: center;

}



.about_seemore a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 100%;

    gap: 10px;

    border: 1px solid var(--bgmain);

    border-radius: 40px;

    padding-right: 10px;

    transition: all .2s linear;

}



.about_seemore a span {

    width: 120px;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--c1);

    border-radius: 40px;

    color: #313131;

    text-align: center;

    font-family: 'font1';

    font-size: 13px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    transition: all .2s linear;

}



.about_seemore a svg {

    transition: all .2s linear;

}



.about_seemore a:hover {

    background: var(--bgmain);

    color: #fff;

}



.btn_gthieu {

    width: 160px;

    height: 45px;

    margin: 20px auto 0;

}



.btn_gthieu a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 100%;

    gap: 10px;

    border: 1px solid var(--bgmain);

    border-radius: 40px;

    padding-right: 10px;

    transition: all .2s linear;

}



.btn_gthieu a span {

    width: 120px;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--bgmain);

    border-radius: 40px;

    color: #fff;

    text-align: center;

    font-family: var(--font);

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    transition: all .2s linear;

}



.btn_gthieu a:hover span {

    width: 100%;

    color: white;

    transition: all .2s linear;

}



.btn_gthieu a:hover {

    padding: 0;

    transition: all .2s linear;

}



.btn_gthieu a:hover svg {

    display: none;

    transition: all .2s linear;

}



.btn_gthieu a svg {

    transition: all .2s linear;

}



.section-dichvuHome {

    background: url(../images/bg_dv.jpg) center;

    background-size: cover;

    padding: 40px 0;

}



.section-dichvuHome .title-main h2 {

    color: #ffffff;

}



.row-dichvu-home {

    display: grid;

    gap: 20px;

    grid-template-columns: 488px 1fr;

}



.dichvu-item {

    margin: 10px 0;

}



.dichvu-item-img {

    position: relative;

    overflow: hidden;

}



.dichvu-item-img img {

    width: -webkit-fill-available;

}



.dichvu-item-desc {

    color: #333;

    font: 14px var(--font);

    line-height: 25px;

    width: 100%;

    height: 100%;

}



.dichvu-item-desc {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 3 !important;

}



.dichvu-item:hover .dichvu-item-desc {

    opacity: 1;

}



.dichvu-item-name {

    margin: 0;

    text-align: center;

}



.dichvu-item-name a {

    background: #ffffff;

    width: 90%;

    padding: 12px;

    display: block;

    color: #333333;

    text-transform: uppercase;

    text-align: center;

    z-index: 20;

    margin: auto;

    margin-top: -25px;

    position: relative;

    font: 16px var(--fontB);

}



.dichvu-item-name a span {

    -webkit-line-clamp: 2;

    white-space: inherit;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

}



.padding-col {

    padding-right: calc(var(--bs-gutter-x) * .5);

    padding-left: calc(var(--bs-gutter-x) * .5);

}





.section-why {

    padding: 10px 0;

}



.why-row {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}



.whyStatic-text1 {

    color: var(--bgmain);

    font: 16px var(--fontM);

    letter-spacing: 4px;

    margin: 0 0 10px 0;

}



.whyStatic-text12 {

    font: 43px var(--fontFzPoppinsBold);

    color: var(--colormain);

}



.whyStatic-text12 span {

    color: var(--bgmainhv);

}



.whyStatic-text34 {

    font: 43px var(--fontFzPoppinsBold);

    color: var(--bgmainhv);

    margin: -10px 0 0;

}



.whyStatic-text34 span {

    color: var(--colormain);

}



.whyStatic-text5 {

    font: 43px var(--fontFzPoppinsBold);

    color: var(--colormain);

    margin: -10px 0 0;

}



.whyStatic-text6 {

    text-transform: uppercase;

    font: 16px var(--fontM);

    margin: 20px 0 0;

}



.whyStatic_des {

    font: 16px var(--font);

    color: var(--colormainxam);

    line-height: 26px;

    margin: 15px 0 25px;

}



.why-left {

    width: 45%;

    padding-right: 40px;

}



.why-right {

    width: 55%;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.whyimg-right {

    position: relative;

    overflow: hidden;

}



.whyimg-right:hover:after {

    height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.whyimg-right:after {

    content: "";

    position: absolute;

    width: 200%;

    height: 0%;

    left: 50%;

    top: 50%;

    background-color: rgba(255, 255, 255, .3);

    transform: translate(-50%, -50%) rotate(-45deg);

    z-index: 1;

}



.title-why {}



.title-why span {

    display: block;

    font: 18px var(--font);

    text-transform: uppercase;

    color: #fff;

    padding: 121px 0 0 89px;

    width: 323px;

    height: 194px;

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

}



.title-why p.textwhy1 {

    font: 40px var(--fontB);

    margin: 0;

    padding: 10px 0 5px;

    line-height: 34px;

    color: #FFD013;

}



.title-why p.textwhy2 {

    font: 65px var(--fontB);

    margin: 0;

    padding: 10px 0 5px;

    line-height: 64px;

    color: #005389;

}



.desc-why {

    font: 16px var(--fontTitle);

    margin: 20px 0 25px;

}









p.textwhy1 {}



.whys {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    justify-content: space-between;

    position: relative;

}



.whys-item {

    background: #fff;

    text-align: center;

    padding: 30px 20px;

    position: relative;

}



.whys-item:after {

    position: absolute;

    content: '';

    left: -1px;

    top: 0;

    bottom: 0;

    margin: auto;

    width: 3px;

    height: 70px;

    background: var(--bgmain);

}



.whys-img {

    width: 40px;

    height: 40px;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    align-items: center;

    position: relative;

    margin: 0 auto;

}



.whys-img-in {

    width: 102px;

    height: 102px;

    border-radius: 100%;

    box-shadow: 0px -4px 1px #ccc;

    display: flex;

    justify-content: center;

    align-content: center;

    align-items: center;

    flex-wrap: wrap;

}



.whys-img img {

    max-width: 52px;

    transition: transform 0.3s ease;

}



.whys-img:hover img {

    transform: rotateY(180deg);

}



.whys-name {

    margin: 10px 0 0;

}



.whys-name span {

    font: 16px var(--fontM);

    color: #000000;

    text-transform: capitalize;

}



.whys-des {

    font: 14px var(--fontM);

    color: var(--colormainxam);

    line-height: 24px;

    display: -webkit-box;

    width: 100%;

    -webkit-webkit-line-clamp: 2;

    -moz-webkit-line-clamp: 2;

    -ms-webkit-line-clamp: 2;

    -o-webkit-line-clamp: 2;

    -webkit-line-clamp: 2;

    -webkit-webkit-box-orient: vertical;

    -moz-webkit-box-orient: vertical;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



#video-fotorama {

    position: relative;

}



.fotorama__nav-wrap {}



#video-fotorama iframe {

    height: 100%;

}



.row-product {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.row-oto {

    grid-template-columns: repeat(3, 1fr);

}



/*pro*/



.pro {

    text-align: center;

    margin: 10px 0;

}



.img_pro {

    overflow: hidden;

    position: relative;

}



.img_pro img {

    width: -webkit-fill-available;

}



.name_pro {

    margin: 0;

    padding: 12px 0 5px;

}



.name_pro a {

    font: 16px var(--font);

    color: #333333;

    display: -webkit-box;

    width: 100%;

    -webkit-webkit-line-clamp: 2;

    -moz-webkit-line-clamp: 2;

    -ms-webkit-line-clamp: 2;

    -o-webkit-line-clamp: 2;

    -webkit-line-clamp: 2;

    -webkit-webkit-box-orient: vertical;

    -moz-webkit-box-orient: vertical;

    -ms-webkit-box-orient: vertical;

    -o-webkit-box-orient: vertical;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



.name_pro a:hover {

    color: var(--bgmainhv);

}



.price_pro {

    font: 18px var(--font);

    padding-bottom: 5px;

}



.price_pro span.giamoi {

    color: var(--bgbtntienich);

    font-family: var(--fontRSB);

    font-size: 18px;

}



.price_pro a {

    padding: 10px 30px;

    color: #fff;

    background: var(--bgmain);

    border-radius: 25px;

    display: inline-block;

}



.price_pro span.giacu {

    font: 13px var(--font);

    color: #616060;

    text-decoration: line-through;

}



.title-dichvu a:hover {

    color: yellow
}



.ab_pro {

    position: absolute;

    width: 100%;

    top: calc(50% - 20px);

    left: 0;

    right: 0;

    margin: 0 auto;

    color: #fff;

    font-size: 14px;

    font-family: QuickSandRegular;

    height: 35px;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    cursor: pointer;

    text-align: center;

    padding: 5px 0;

    justify-content: center;

    opacity: 0;

    z-index: 1;

}





.pro .ab_pro span.cart-add,

.pro .ab_pro a.view_product,

.pro .ab_pro a.like_product {

    font-size: 17px;

    width: 40px;

    height: 40px;

    text-align: center;

    line-height: 40px;

    border: 1px solid transparent;

    border-radius: 50%;

    display: block;

    margin: 0 5px;

    background: var(--bgbtntienich);

    color: #fff;

}



.pro .ab_pro a.like_product {

    border: 0;

    color: #000;

}



.pro .ab_pro a.like_product:hover,

.pro .ab_pro a.like_product.liked {

    color: pink;

}



.pro .ab_pro span.cart-add:hover,

.pro .ab_pro a.view_product:hover {}



.thongbaolike {

    position: absolute;

    bottom: 35px;

    width: 100%;

    left: 0;

    background: rgb(228 159 2);

    color: #fff;

    padding: 10px;

    font: 14px MuliRegular;

}





/*pro*/

.bannerquangcao {

    /* padding: 40px 0; */

    text-align: center;

}



.bannerquangcao img {

    margin: 0 auto;

}



.flex_splist {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

}



.list_nav {

    width: 19%;

}



.list_txt {

    flex-shrink: 0;

    position: relative;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-items: center;

    background: var(--c1);

    height: 100%;

    position: relative;

}



.list__link {

    flex-shrink: 0;

    font-size: 12px;

    color: var(--c2);

    margin-right: 20px;

}



.list__name {

    margin: 0;

    line-height: normal;

    font-size: 26px;

    color: #00d51e;

    font-weight: bold;

    text-transform: inherit;

    font-family: 'font2';

    margin-bottom: 5px;

}



.list__desc {

    font-size: 15px;

    color: #333;

    line-height: 1.6;

    margin-bottom: 35px;

}



.show_spnb {

    width: 79.5%;

}



.section-sanphamHome {

    padding: 30px 0;

}



.col-product-slick {

    padding: 0 10px;

}



.box_kinhnghiem {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    height: 100%;

    width: 100%;

}



.list_kinhnghiem {

    position: absolute;

    top: 0;

    bottom: 0;

    margin: auto;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-gap: 50px 26%;

    align-content: center;

}



.kinhnghiem__img {

    display: block;

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

    cursor: pointer;

}



.kn__item {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    border-radius: 100%;

    cursor: pointer;

    transition: all .3s ease;

    position: relative;

    z-index: 100;

    margin: 0px auto;

    width: 100%;

    align-content: center;

}



.kn__item:nth-child(2n+1) {

    text-align: right;

    direction: rtl;

}



.kn__item.kn1 {}



.kn__item.kn2 {}



.kn__item.kn4 {}



.kn__item.kn3 {}



.kn__name {

    padding: 0 0 0 15px;

    position: relative;

    transition: all .3s ease;

    width: 74%;

}



.kn__item:nth-child(2n+1) .kn__name {

    padding: 0 15px 0 0;

}



.kn__name span {

    text-transform: uppercase;

    font: 14px var(--fontB);

}



.kn__desc {}



.kn__icon {

    display: block;

    transition: all .3s ease;

    margin-bottom: 12px;

    width: 26%;

}



.kn__item:hover::before {



    transition: all .5s ease;

}



.kn__item:hover .kn__name {

    transition: all .3s ease;

}



.box_kinhnghiem:hover .kinhnghiem__img {

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

}



.trainghiem-item {

    margin: 10px 0;

}



.trainghiem-item-img {

    position: relative;

}



.trainghiem-item-img a {}



.trainghiem-item-img img {

    width: -webkit-fill-available;

}



.tn__txt {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    text-align: center;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);

    padding-top: 100px;

    pointer-events: none;

}



.trainghiem-item-img h3 {

    margin: 0;

    font-size: 16px;

    color: #fff;

    font-weight: bold;

    line-height: normal;

    margin-bottom: 25px;

    text-transform: uppercase;

    transition: all .3s ease;

}



.img_hover {

    overflow: hidden;

    position: relative;

    padding: 0;

    z-index: 0;

}



.img_hover:after {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    z-index: 22;

    display: block;

    content: '';

    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=0, Color=#000000)";

    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) inset;

    /* -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) inset; */

    /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) inset; */

    filter: progid: DXImageTransform.Microsoft.Shadow(Strength=15, Direction=135, Color=#000000);

}



.img_hover:before {

    position: absolute;

    top: 0;

    left: -85%;

    z-index: 22;

    display: block;

    content: '';

    width: 50%;

    height: 100%;

    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);

    -webkit-transform: skewX(-25deg);

    transform: skewX(-25deg);

}



.img_hover:hover:before {

    -webkit-animation: shine .6s;

    animation: shine .6s;

}



@-webkit-keyframes shine {

    100% {

        left: 125%;

    }

}



@keyframes shine {

    100% {

        left: 125%;

    }

}







.section-camnhanHome {

    padding: 40px 0;

}



.fb__items {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-direction: row;

    flex-wrap: nowrap;

    cursor: pointer;

}



.fb__info {

    width: 27%;

    text-align: center;

}



.fb__img {

    max-width: 90px;

    margin: 0px auto;

    border: 3px solid #fff;

    border-radius: 100%;

    overflow: hidden;

    background: #fff;

    margin-bottom: 15px;

    transition: all .3s ease;

}



.fb__name {

    font-size: 16px;

    color: var(--bgmain);

    line-height: normal;

    font-weight: bold;

    margin-bottom: 5px;

    transition: all .3s ease;

}



.fb__desc {

    font-size: 14px;

    line-height: normal;

    color: #fff;

}



.fb__txt {

    width: 70%;

    background: #fff;

    border-radius: 10px;

    padding: 22px 22px;

    position: relative;

    box-shadow: rgba(0, 0, 0, 0.15) 0px 0 12px;

    transition: all .3s ease;

}



.fb__txt::before {

    position: absolute;

    content: '';

    left: -6.5px;

    top: 50%;

    transform: translateY(-50%) rotate(45deg);

    width: 15px;

    height: 15px;

    background: #fff;

    border-radius: 2px;

    transition: all .3s ease;

    z-index: -1;

}



.fb__content {

    font-size: 15px;

    color: #333333;

    line-height: 1.5;

    transition: all .3s ease;

}



.fb__items.bottom {

    flex-direction: row-reverse;

    margin-top: 40px;

}



.fb__items.bottom .fb__txt::before {

    left: unset;

    right: -6.5px;

}



.fb__items:hover .fb__img {

    border-color: var(--bgmain);

    transition: all .3s ease;

}



.fb__items:hover .fb__name {

    color: var(--c2);

    transition: all .3s ease;

}



.fb__items:hover .fb__txt {

    background: var(--c2);

    transition: all .3s ease;

}



.fb__items:hover .fb__content {

    transition: all .3s ease;

}



.fb__items:hover .fb__txt::before {

    background: var(--c2);

    transition: all .3s ease;

}



.wrap-video {

    background: #F7FCFF;

    padding: 50px 0;

}



.title-video {

    text-align: center;



}



.title-video h2 {

    font: 40px var(--fontInterBold);

    background: #256BFF;

    color: #fff;

    border-radius: 5px;

    position: relative;

    display: inline-block;

    padding: 5px 20px;

}



.title-video h2:before {

    position: absolute;

    content: '';

    width: 66px;

    height: 66px;

    top: 0;

    bottom: 0;

    right: 100%;

    margin: auto;

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

}



.title-video h2:after {

    position: absolute;

    content: '';

    width: 66px;

    height: 66px;

    top: 0;

    bottom: 0;

    left: 100%;

    margin: auto;

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

}



.section-doitac {

    padding: 30px 0;

    background: var(--bgmainhv);

}



.slide_chinhanh {

    border-top: 1px solid rgb(255 255 255 / 30%);

    padding-top: 35px;

}



.title-chinhanh {

    text-transform: uppercase;

    font: 18px var(--fontPhilosopher);

    margin: 0 0 20px 0;

}



.iframe-chinhanh {}



.iframe-chinhanh iframe {

    width: 100% !important;

    height: 370px !important;

}



.pro-list-row {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    margin: 0 0 20px 0;

}



.pro-list-left {

    width: 45%;

}



.pro-list-right {

    width: 55%;

    padding-left: 30px;

}



.pro-list-left img {

    width: -webkit-fill-available;

}



.pro-list-name {

    color: #313131;

    font-family: var(--fontB);

    font-size: 26px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    padding-left: 20px;

    border-left: 3px solid var(--bgmain);

    text-transform: uppercase;

}



.pro-list-desc {

    color: #666;

    font-family: var(--font);

    font-size: 14px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    margin: 20px 0;

}



.pro-list-xemthem {

    text-align: right;

}



.pro-list-xemthem a {

    display: inline-block;

    padding: 10px 20px;

    border-radius: 25px;

    color: #fff;

    background: var(--bgmain);

}



.pro-list-xemthem a:hover {

    background: #d3a864;

}



.img_proCatHot {

    position: relative;

}



.img_proCatHot img {

    width: -webkit-fill-available;

}



.img_proCatHot h3 {

    position: absolute;

    width: 370px;

    height: 110px;

    top: 50%;

    left: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

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

    background: #ffffffa8;

    flex-direction: column;

    gap: 15px;

    color: black;

    text-align: center;

    font-family: 'font1';

    font-size: 20px;

    font-style: normal;

    font-weight: 600;

    line-height: normal;

    pointer-events: none;

    height: 60px;

    background: #ffffff70;

}





.img-hover-n {

    display: block;

    overflow: hidden;

    position: relative;

    padding: 0;

    z-index: 0;

}



.img-hover-n:after {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    z-index: 22;

    display: block;

    /* content: ''; */

    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=0, Color=#000000)";

    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) inset;

    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) inset;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) inset;

    filter: progid: DXImageTransform.Microsoft.Shadow(Strength=15, Direction=135, Color=#000000);

}



.img-hover-n:before {

    position: absolute;

    top: 0;

    left: -85%;

    z-index: 22;

    display: block;

    content: '';

    width: 50%;

    height: 100%;

    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);

    -webkit-transform: skewX(-25deg);

    transform: skewX(-25deg);

}



.img-hover-n:hover:before {

    -webkit-animation: shine .6s;

    animation: shine .6s;

}



@-webkit-keyframes shine {

    100% {

        left: 125%;

    }

}



@keyframes shine {

    100% {

        left: 125%;

    }

}



::-webkit-scrollbar {

    width: 5px;

    height: 5px;

}



::-webkit-scrollbar-button {

    width: 0px;

    height: 0px;

}



::-webkit-scrollbar-track {

    background-color: var(--c1);

}



::-webkit-scrollbar-track-piece {

    background-color: #ffffff;

}



::-webkit-scrollbar-thumb {

    height: 50px;

    background-color: var(--c1);

    border-radius: 3px;

}



::-webkit-scrollbar-corner {

    background-color: #ffffff;

}



::-webkit-resizer {

    background-color: #666;

}





.section-product {

    padding: 50px 0;

    margin: auto;

}



.section-product:nth-child(2n) {

    background: url(../images/bg_sp.png) center;

}



.bannerdanhmuc {

    padding: 50px 0;

    background: url(../images/bg_danhmuc.jpg) no-repeat;

    background-size: 100% 100%;

}



.bannerdanhmuc-item {

    /* margin: 10px 0; */

}



p.linedmuc {

    margin: 0;

    width: 250px;

    height: 2px;

    background: black;

}



.name_danhmuc {

    position: absolute;

    width: 370px;

    height: 110px;

    top: 50%;

    left: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

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

    background: #ffffffa8;

    flex-direction: column;

    gap: 15px;

    color: black;

    text-align: center;

    font-family: var(--font);

    font-size: 20px;

    font-style: normal;

    font-weight: 600;

    line-height: normal;

    pointer-events: none;

}



.section-tieuchi {

    padding: 30px 0;

    background: var(--bgmain);

}



.gr_tchi {

    display: flex;

    justify-content: space-between;

    cursor: pointer;

    align-content: center;

    align-items: center;

}



.grname_tchi {

    width: calc(100% - 60px - 15px);

    color: #fff;

    font-family: var(--font);

    font-size: 16px;

    font-style: normal;

    font-weight: 600;

    line-height: normal;

}



.grname_tchi h4 {

    color: #fff;

    margin: 0 0 5px 0;

    font: 17px var(--fontB);

    text-transform: uppercase;

}



.grname_tchi p {

    color: #fff;

    margin: 0;

    font: 14px var(--font);

}



.wrap_tieuchi {

    background: #f2f2f2;

}



.gr_tchi:hover .img_tchi {

    transform: rotateY(360deg);

    transition: all .4s linear;

}



.gr_tchi .img_tchi {

    width: 60px;

    transition: all .4s linear;

}



.nav-click {

    position: fixed;

    top: 30px;

    right: 35px;

    width: 70px;

    height: auto;

    cursor: pointer;

    display: block;

    color: #000;

    z-index: 2000;

}



.nav-click,

.nav-click svg path,

.nav-click::before {

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

}



.nav-click::before {

    content: '';

    position: absolute;

    background-color: #000;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    right: 0;

    top: -14px;

    right: -8px;

    z-index: -1;

}



.nav-click,

.nav-click svg path,

.nav-click::before {

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

}



.nav-click svg {

    display: block;

    position: relative;

    width: 100%;

    height: auto;

}



.nav-click svg {

    display: block;

    position: relative;

    width: 100%;

    height: auto;

}



.nav-click .close-nav {

    display: none;

}



.nav-click,

.nav-click svg path,

.nav-click::before {

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

}



.show .nav-click {

    animation: fadeInDown;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}



.nav-click.active::before {

    background-color: #000;

}



.nav-click.active .open-nav {

    display: none;

}



.nav-click.active .close-nav {

    display: block;

}



.path-control {

    fill: #fff;

}



.nav-click:hover::before {

    background-color: #fff;

}



.nav-click:hover .path-control.path-red {

    fill: #da251d;

}



.nav-click:hover .path-control {

    fill: #000;

}



@keyframes goRight {

    0% {

        opacity: 0;

        transform: translate3d(100%, 0, 0)
    }



    100% {

        opacity: 1;

        transform: none
    }

}



@keyframes goRight2 {

    0% {

        opacity: 0;

        transform: translate3d(50%, 0, 0)
    }



    100% {

        opacity: 1;

        transform: none
    }

}



@keyframes toRight {

    0% {

        opacity: 0;

        left: -100px
    }



    100% {

        opacity: 1;

        left: 20px
    }

}



@keyframes toLeft {

    0% {

        opacity: 0;

        left: 60vw
    }



    100% {

        opacity: 1;

        left: calc(50vw - 30px)
    }

}





.navigation {

    height: 0;

    width: 100%;

    left: 0;

    bottom: 0;

    position: fixed;

    overflow: hidden;

    transition: height .3s ease-in-out;

    z-index: 999;

}



.navigation.active {

    height: 100vh;

    width: 100%;

    bottom: 0
}



.navigation .nav {

    width: 30vw;

    height: 100vh;

    position: absolute;

    padding: 0;

    top: 0;

    right: 3vw;

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

    z-index: 1;

    display: block;

}



.nav {

    scrollbar-color: inherit;

    scrollbar-width: none;

}



.nav ul {

    display: inline-block;

    margin: 0 -5px;

    position: relative;

    width: 90%;

    height: auto;

    vertical-align: middle;

    list-style: none;

}



.nav.active li {

    animation-name: goRight;

    animation-duration: .8s;

    animation-fill-mode: forwards;

    position: relative;

}



.nav ul li a {

    color: #fff;

    position: relative;

    font-weight: bold;

    font-size: 30px;

    font-style: italic;

    line-height: 1.4;

    cursor: pointer;

}



.nav-click {

    position: fixed;

    top: 30px;

    right: 35px;

    width: 70px;

    height: auto;

    cursor: pointer;

    display: block;

    color: #000;

    z-index: 1000;

}



.nav-click,

.nav-click svg path,

.nav-click::before {

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

}



.nav-click::before {

    content: '';

    position: absolute;

    background-color: #000;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    right: 0;

    top: -14px;

    right: -8px;

    z-index: -1;

}



.nav-click,

.nav-click svg path,

.nav-click::before {

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

}



.nav-click svg {

    display: block;

    position: relative;

    width: 100%;

    height: auto;

}



.nav-click svg {

    display: block;

    position: relative;

    width: 100%;

    height: auto;

}



.nav-click .close-nav {

    display: none;

}



.nav-click,

.nav-click svg path,

.nav-click::before {

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

}



.show .nav-click {

    animation: fadeInDown;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}



.nav-click.active::before {

    background-color: #000;

}



.nav-click.active .open-nav {

    display: none;

}



.nav-click.active .close-nav {

    display: block;

}



.path-control {

    fill: #fff;

}



.nav-click:hover::before {

    background-color: #fff;

}



.nav-click:hover .path-control.path-red {

    fill: #da251d;

}



.nav-click:hover .path-control {

    fill: #000;

}



@keyframes goRight {

    0% {

        opacity: 0;

        transform: translate3d(100%, 0, 0)
    }



    100% {

        opacity: 1;

        transform: none
    }

}



@keyframes goRight2 {

    0% {

        opacity: 0;

        transform: translate3d(50%, 0, 0)
    }



    100% {

        opacity: 1;

        transform: none
    }

}



@keyframes toRight {

    0% {

        opacity: 0;

        left: -100px
    }



    100% {

        opacity: 1;

        left: 20px
    }

}



@keyframes toLeft {

    0% {

        opacity: 0;

        left: 60vw
    }



    100% {

        opacity: 1;

        left: calc(50vw - 30px)
    }

}



/* .nav.active li:nth-child(1) {

      animation-delay: .5s;

  }

  .nav.active li:nth-child(2) {

      animation-delay: .6s;

  }

  .nav.active li:nth-child(3) {

      animation-delay: .7s;

  }

  .nav.active li:nth-child(4) {

      animation-delay: .8s;

  }

  .nav.active li:nth-child(5) {

      animation-delay: .9s;

  } */

.nav ul {

    display: inline-block;

    margin: 0 -5px;

    position: relative;

    width: 90%;

    height: auto;

    vertical-align: middle;

}



.nav::after,

.nav::before {

    content: '';

    display: inline-block;

    vertical-align: middle;

    height: 100%;

}



.pic-nav {

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

}



.pic-nav img {

    width: 100%;

}



.pic-nav.active {

    height: 100vh;

    opacity: 1;

}



ul.gr_itemmnu {

    list-style: none;

    padding: 0;

    /* position: absolute; */

    right: 0%;

    /* display: none; */

    transition: all .4s ease-in;

    width: 100%;

    margin: 0;

    top: 0;

}



.nav.active li:hover ul.gr_itemmnu {

    display: block;

    transition: all .4s ease-in;

    right: 100%;

}



.nav.active li.itemmm:hover a.link-load {

    text-decoration: underline;

}



ul.gr_itemmnu li a {

    font-size: 19px;

}



ul.gr_itemmnu li:hover a {

    text-decoration: underline;

}



ul.gr_itemmnu li {

    position: relative;

    margin: 5px 0;

}



ul.gr_itemmnu li:hover ul.gr_itemmenu1 {

    display: block;

    right: 100%;

    transition: all .4s ease-in;

}



ul.gr_itemmenu1 {

    padding: 0;

    margin: 0;

    right: 0%;

    position: absolute;

    top: 0;

    display: none;

    transition: all .4s ease-in;

}



ul.gr_itemmenu1 li a {

    text-decoration: unset !important;

}



.nav ul li a:hover {

    color: red;

    transition: all .2s linear !important;

}



.grname_duanph.namecata {

    text-align: center;

    padding: 10px 0 0;

}



.name_duanph.namecata {

    color: black;

    font-family: var(--font);

    padding: 0 0 5px 0;

}



.btn_xthemda {

    color: #0d6efd;

    font: 13px var(--font);

}



.tuvanlienhe-form {

    position: sticky;

    top: 90px;

    height: initial;

}



.bannerdanhmuc-row {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

}



.bannerdanhmuc {

    padding: 30px 0;

}



.seemore {

    text-align: center;

    margin: 20px 0 0;

}



.seemore a {

    transform: skew(-15deg, 0deg);

    -webkit-transform: skew(-15deg, 0deg);

    -moz-transform: skew(-15deg, 0deg);

    -o-transform: skew(-15deg, 0deg);

    -ms-transform: skew(-15deg, 0deg);

    background: #292c2f;

    position: relative;

    left: 0;

    right: 0;

    display: inline-block;

    margin: 0 auto;

}



.seemore a span {

    display: inline-block;

    font-family: var(--fontMuliBold);

    font-size: 14px;

    color: #ffffff;

    padding: 10px 33px;

    text-transform: uppercase;

    transform: skew(15deg, 0deg);

    -webkit-transform: skew(15deg, 0deg);

    -moz-transform: skew(15deg, 0deg);

    -o-transform: skew(15deg, 0deg);

    -ms-transform: skew(15deg, 0deg);

}



.seemore a:hover {

    background: var(--bgmainhv);

}



.section-otoHome {}



.oto-item {}



.img_oto-item {}



.img_oto-item img {}



.name_oto {

    margin: 10px 0 0;

    line-height: 20px;

}



.name_oto a {

    font: 14px var(--fontMuliBold);

    color: #000;

    /* line-height: 9px; */

}



.name_oto a:hover {

    color: var(--bgmainhv);

}



.generation_oto {

    font: 14px var(--font);

    color: #9b9b9b;

    margin: 5px 0;

    height: 20px;

}



.price-oto-in {

    margin: 0;

}



.price-oto-in span.price-new {}



.price-oto-in span.price-old {}



.section-proListHot {

    background: var(--bgmain);

    padding: 60px 0;

}







.bg-tieudesanpham {

    margin-bottom: 12px;

    text-align: center;

}



.bg-tieudesanpham h2 {

    color: #000;

    font-size: 25px;

    position: relative;

    margin: 0px;

    display: inline-block;

    font-family: he;

    text-transform: uppercase;

    font-weight: normal;

    position: relative;

    padding: 25px 30px;

    font-family: UTMEremitage;

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

    background-size: 100% 100%;

}



.bg-tieudesanpham h2:before {

    position: absolute;

    content: '';

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

    width: 59px;

    height: 87px;

    top: 0px;

    left: -59px;

    background-size: 100% 100%;

}



.bg-tieudesanpham h2:after {

    position: absolute;

    content: '';

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

    width: 59px;

    height: 87px;

    right: -58px;

    top: 0px;

    background-size: 100% 100%;

}



.xemthem-gt {

    display: inline-block;

    margin: 0 auto;

    margin-top: 27px;

    transform: skew(-15deg, 0deg);

    -webkit-transform: skew(-15deg, 0deg);

    -moz-transform: skew(-15deg, 0deg);

    -o-transform: skew(-15deg, 0deg);

    -ms-transform: skew(-15deg, 0deg);

    background: #292c2f;

}



.xemthem-gt a {

    display: inline-block;

    font-family: Mulib;

    font-size: 14px;

    color: #ffffff;

    padding: 10px 33px;

    text-transform: uppercase;

    transform: skew(15deg, 0deg);

    -webkit-transform: skew(15deg, 0deg);

    -moz-transform: skew(15deg, 0deg);

    -o-transform: skew(15deg, 0deg);

    -ms-transform: skew(15deg, 0deg);

}





.product {

    position: relative;

    margin: 10px 0;

}



.product-clone {

    position: fixed;

    z-index: 9999;

}



.product img {

    max-width: 100%;

    height: auto;

    width: 100%;

}



.product_noibat img {

    max-width: 100%;

    height: auto;

}



.hinh-product {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

}



.hinh-product a {

    display: block;

    overflow: hidden;

    width: 100%;

}

a.product-link {

    display: block;

}

a.product-link:hover .hinh-product {

    --tw-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc;

    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);

}

.ten-product {

    margin: 15px 0px;

    color: #fff;

    text-transform: capitalize;

    font: 16px var(--font);

    text-align: center;

}



.ten-product a {

    color: #444444;

    font-size: 16px;

    -webkit-line-clamp: 2;

    white-space: inherit;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    height: 44px;

}



.ten-product a:hover {

    color: var(--colormainhv)
}



.video_row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 20px
}



.video_left {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

}



.video_right {

    width: 100%;

    margin: 20px 0 0;

}



.row-album {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    gap: 4px;

}





.item-tintuc-index {

    position: relative;

    width: 95%;

    margin: 0 auto;

    text-align: center;

}



.item-tintuc-index:hover .hinh-tintuc-index img {

    transform: scale(1.1);

}



.item-tintuc-index .hinh-tintuc-index {

    display: inline-block;

    overflow: hidden;

    width: 100%;

}



.item-tintuc-index .hinh-tintuc-index img {

    width: 100%;

}



.item-tintuc-index h3 {

    position: relative;

    margin-top: 0px;

}



.item-tintuc-index h3 a {

    font-family: var(--fontB);

    font-size: 16px;

    color: #222222;

}



.item-tintuc-index h3 a:hover {

    color: var(--colormainhv);

}



.noidung-tintuc {

    border: 1px dashed #42454b;

    padding: 20px;

    border-top: none;

    min-height: 188px;

    margin-bottom: -27px;

    width: 100%;

    margin-top: -8px;

    text-align: left;

}



.noidung-tintuc .desc-news-index {

    color: #949494;

    font-size: 14px;

    font-family: var(--font);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    display: -webkit-box;

}



.noidung-tintuc h3 {

    line-height: 20px;

    margin-bottom: 10px;

}



.noidung-tintuc span {

    font-family: Muli-Regular;

    color: #ffc424;

    float: right;

    font-size: 14px;

    margin-top: 12px;

}



.xemthem-tintuc {

    font-family: var(--fontMuliBold);

    font-size: 18px;

    color: #fff;

    padding: 9px 50px;

    background: #d70101;

    display: inline-block;

    transform: skew(-15deg, 0deg);

    -webkit-transform: skew(-15deg, 0deg);

    -moz-transform: skew(-15deg, 0deg);

    -o-transform: skew(-15deg, 0deg);

    -ms-transform: skew(-15deg, 0deg);

    margin-right: 60px;

    position: relative;

    margin: 0 auto;

    margin-bottom: 15px;

}



.xemthem-tintuc a {

    display: inline-block;

    transform: skew(15deg, 0deg);

    -webkit-transform: skew(15deg, 0deg);

    -moz-transform: skew(15deg, 0deg);

    -o-transform: skew(15deg, 0deg);

    -ms-transform: skew(15deg, 0deg);

    font-family: var(--font);

    font-size: 14px;

    text-transform: uppercase;

    color: #fff;

}



.xemthem-tintuc:after {

    position: absolute;

    content: '';

    width: 60px;

    height: 45px;

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

    right: 60px;

    transform: skew(13deg, 0deg);

    -webkit-transform: skew(13deg, 0deg);

    -moz-transform: skew(13deg, 0deg);

    -o-transform: skew(13deg, 0deg);

    -ms-transform: skew(13deg, 0deg);

    top: 0px;

    right: -60px;

}



.section-tintucHome {

    padding: 50px 0;

    background: url(../images/bg_sp.png);

}





#footer {

    background: var(--bgmain);

    background-size: cover;

    padding: 20px 0;

    color: #fff;

    position: relative;

    border-top: 1px
}



#footer:before {

    position: absolute;

    content: '';

    width: 100%;

    height: 5px;

    background: url(../images/border-topf.jpg) repeat-x;

    top: 0px;

    left: 0px;

}



.noidungf p {

    display: inline-block;

}



.noidungf p img {

    float: left;

    margin-right: 10px;

}



.congty {}



.congty .tieude {

    margin-bottom: 0px;

}



.congty .tencongty {

    font-size: 38px;

    color: #d70101;

    font-family: UTMEremitage;

}



.thongtin {

    margin-bottom: 15px;

}



.thongke p {

    font-size: 13px;

    margin: 0;

}



.thongke img {

    vertical-align: middle;

    margin-right: 10px;

    float: left;

}



.thongtin ul {

    list-style: disc !important;

    padding-left: 15px !important;

}



.thongtin li {

    margin-bottom: 10px;

}



.thongtin li a {

    font-size: 13px;

    color: #fff;

    font-family: var(--font);

}



.thongtin li a:hover {

    color: yellow;

}



.box-chinhsach {

    padding-left: 37px;

}





.box-bot {

    padding: 25px;

    padding-left: 30px;

    padding-right: 53px;

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

    background-size: 100% 100%;

    width: 100%;

    height: 100%;

}



.box-bot h2 {

    font-family: var(--fontB);

    font-size: 18px;

    color: #ffffff;

    margin-bottom: 15px;

}



.box-bot p {

    font-family: var(--font);

    font-size: 13px;

}



.box-bot p img {

    margin-right: 12px;

}



.box-topf {

    margin-bottom: 30px;

}



#copyright {

    background: var(--bgmain);

    color: #ffffff;

    padding: 15px 0;

    text-align: center;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

}



#copyright .wrap-content {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

}



.copy {

    margin: 0;

}



.thongke {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

}



.thongke p {}



.tieude {

    color: #fff;

    font-family: var(--fontB);

    font-size: 18px;

    text-transform: uppercase;

    margin-bottom: 20px;

    display: inline-block;

    margin-top: 0px;

    position: relative;

}



.tieude:before {

    position: absolute;

    content: '';

    background: #ffffff;

    height: 1px;

    width: 35px;

    left: 0;

    bottom: -7px;

}



.result-chinhanh iframe {

    width: 100% !important;

    height: 400px !important;

}





.baomapf {

    position: relative;

}



.result-chinhanh {

    height: 400px;

}



.chinhanh-all {

    list-style: none;

    display: flex;

    padding: 0px;

    position: absolute;

    top: 10px;

    left: 30px;

}



.chinhanh-all li {

    margin-right: 10px;

}



.chinhanh-all li a {

    display: inline-block;

    background: #333333;

    font-family: var(--font);

    font-size: 14px;

    padding: 15px 56px;

    font-size: 14px;

    cursor: pointer;

    color: #ffffff;

    transform: skew(-15deg, 0deg);

    -webkit-transform: skew(-15deg, 0deg);

    -moz-transform: skew(-15deg, 0deg);

    -o-transform: skew(-15deg, 0deg);

    -ms-transform: skew(-15deg, 0deg);

}



.chinhanh-all li a span {

    transform: skew(15deg, 0deg);

    -webkit-transform: skew(15deg, 0deg);

    -moz-transform: skew(15deg, 0deg);

    -o-transform: skew(15deg, 0deg);

    -ms-transform: skew(15deg, 0deg);

    display: inline-block;

}



.chinhanh-all li a.active_chinhanh,

.chinhanh-all li a:hover {

    background: #d70101;

    color: #fff;

}



@media (max-width: 1230px) {

    .chinhanh-all {

        flex-wrap: wrap;

    }



    .chinhanh-all li a {

        margin-bottom: 5px;

    }

}



@media (max-width: 526px) {

    .chinhanh-all li a {

        padding: 15px 25px;

    }

}



.dangkynhantin {

    width: 100%;

    padding: 22px 0px;

    background: #d70101;

}



#frm_mail {

    width: 100%;

    display: flex;

}



.left-dangky {

    width: 418px;

    line-height: 29px;

    margin-right: 35px;

}



.left-dangky img {

    float: left;

    margin-right: 15px;

}



.left-dangky h2 {

    font-family: var(--fontB);

    font-size: 23px;

    text-transform: uppercase;

    color: #fff;

    margin: 0;

}



.left-dangky p {

    font-size: 13px;

    font-family: var(--font);

    color: #fff;

    margin: 0;

}



.right-dangky {

    width: calc(100% - 453px);

    padding-top: 8px;

}







#newsletter {

    background: url(../images/nennhantin.jpg) center;

    background-size: cover;

    padding: 30px;

    height: 100%;

}



.title-newsletter {

    font-size: 30px;

    margin-bottom: 20px;

    text-transform: uppercase;

    color: #ffffff;

    font-family: var(--fontUTMAvoBold);

}



#newsletter p {

    font-size: 14px;

    font-style: italic;

    color: #fff;

    font-family: open;

    margin-bottom: 15px;

}



#newsletter h2 {

    color: #ffffff;

    text-transform: uppercase;

    font-size: 24px;

    font-weight: bold;

    font-family: open;

    background: url(../images/line-nhantin.png) bottom no-repeat;

    padding-bottom: 25px;

    margin-bottom: 15px;

}



.nhan_mail {

    display: inline-block;

    margin: 0px 0px 5px 0px;

}



.nhan_mail p {

    color: #fff;

    font-family: fu;

    margin-top: 0px;

}



.text-nhantin {

    border: none;

    width: 243px;

    height: 40px;

    outline: none;

    background: #fff;

    float: left;

    color: #787878;

    font-size: 14px;

    padding-left: 20px;

    margin-right: 10px;

    border-radius: 33px;

}



.bt-nhantin {

    height: 40px;

    float: left;

    background: url(../images/icon-send.png) center center #333333 no-repeat;

    border: none;

    outline: none;

    cursor: pointer;

    color: #333333;

    font-size: 13px;

    padding: 0px 32px;

    font-family: robotobb;

    text-transform: uppercase;

    border-radius: 33px;

}



.dangkynhantin .wrap-content {

    display: flex;

}





.box-advice {

    padding: 20px;

    box-shadow: 0px 0px 8px #ccc;

    border-radius: 10px;

}



.hinh-trong-oto {

    /* margin:  0; */

    text-align: center !important;

}



.hinh-trong-oto img {

    width: 100%;

}



.oto-recomment-title {

    margin: 0;

    padding: 10px;

    color: #fff;

    margin: 0;

    padding: 10px;

    color: #fff;

    font-size: 25px;

    font-weight: bold;

    text-transform: uppercase;

    text-align: center;

    margin-top: 0;

    margin-bottom: 20px;

    background: #f92525 !important;

}



.oto-recomment {

    margin-top: 35px;

}



.box-item-oto-tpl.box-oto-recomment {

    padding: 10px;

    border: 1px solid #ccc;

    margin-bottom: 20px;

}



.box-item-oto-tpl.box-oto-recomment .hinh-trong-oto {

    margin: 0;

}



.box-item-oto-tpl:hover {

    box-shadow: 0 0 5px #ccc;

    transition: 0.3s;

}



.box-1-right-advice a {

    display: flex;

    align-items: center;

    width: fit-content;

    margin: 0 auto;

}



.box-1-right-advice i {

    font-size: 44px;

    margin-right: 13px;

    margin-top: 10px;

}



.address-info .diachixemxe {

    font-size: 16px;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 20px;

    margin-bottom: 10px;

}



.box-advice {

    padding: 20px;

    box-shadow: 0px 0px 8px #ccc;

    border-radius: 10px;

}



.cta-phone {

    position: relative;

    display: inline-block;

    border-radius: 5px;

    padding: 10px 15px 17px;

    background: var(--background-hover);

}



.cta-phone .phone-cta,

.cta-phone .text-cta {

    height: 20px;

    font-size: 20px;

    letter-spacing: .1em;

    text-align: left;

}



.info-hotline-prod .cta-phone i {

    transform: rotate(100deg);

    font-size: 36px;

    top: 15px;

}



.address-info {

    text-align: center;

}



.box-btn-oato {

    text-align: center;

}



.box-btn-oato a {

    display: inline-block;

    background: #f5dc05;

    color: #000;

    padding: 10px 40px;

    font-size: 16px;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    font-weight: 700;

    border-radius: 4px;

    margin-top: 10px;

    border: 0;

    background: #27ae60;

    color: #fff;

}



.btn-tiktok {

    bottom: 400px
}



.ti_fixed {

    position: fixed;

    bottom: 130px;

    right: 20px;

    z-index: 111;

    font-family: Arial;

    color: #000;

    opacity: 1;

}



.ti_fixed:hover {

    /* opacity: 10; */

}



.icon_ti_fixed {

    width: 70px;

    height: 70px;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    position: relative
}



.icon_ti_fixed::before {

    content: "";

    z-index: 1;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    /* left: 0; */

    background-color: rgba(224, 56, 33, 0.1);

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

    transform: scale(0);

    -webkit-animation: icon_ti_fixed 1s infinite alternate;

    animation: icon_ti_fixed 1s infinite alternate
}



.icon_ti_fixed::after {

    content: "";

    z-index: 1;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background-color: rgba(224, 56, 33, 0.1);

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

    transform: scale(0);

    -webkit-animation: icon_ti_fixed 1.2s infinite alternate;

    animation: icon_ti_fixed 1.2s infinite alternate
}



.in_icon_ti_fixed {

    cursor: pointer;

    position: absolute;

    z-index: 2;

    width: 70px;

    height: 70px;

    background-color: #ff0000;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    text-align: center;

    color: #fff;

    font-size: 10px;

    line-height: 10px;

    font-weight: 700;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.icon_ti_fixed:hover .in_icon_ti_fixed {

    background-color: var(--bgmainhv);

}



.in_icon_ti_fixed p strong {

    display: block
}



.in_icon_ti_fixed::before {

    /* content: ""; */

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 3;

    width: 100%;

    height: 100%
}



.in_icon_ti_fixed.active::before {

    content: "x";

    line-height: 70px;

    font-size: 30px;

    background-color: #c62610;

    font-weight: 400
}



.in_icon_img {

    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

}



.phonering-alo-ph-circle {

    position: absolute;

    width: 170%;

    height: 170%;

    background-color: transparent;

    border-radius: 100% !important;

    border: 2px solid rgba(255, 0, 0, 0.4);

    border: 2px solid #FF0000 9;

    opacity: .1;

    -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;

    animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;

    transition: all .5s;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

}



@-webkit-keyframes phonering-alo-circle-anim {

    0% {

        -webkit-transform: rotate(0) scale(.5) skew(1deg);

        transform: rotate(0) scale(.5) skew(1deg);

        opacity: .1
    }



    30% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        transform: rotate(0) scale(.7) skew(1deg);

        opacity: .5
    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg);

        opacity: .1
    }

}



@keyframes phonering-alo-circle-anim {

    0% {

        -webkit-transform: rotate(0) scale(.5) skew(1deg);

        transform: rotate(0) scale(.5) skew(1deg);

        opacity: .1
    }



    30% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        transform: rotate(0) scale(.7) skew(1deg);

        opacity: .5
    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg);

        opacity: .1
    }

}



@-webkit-keyframes icon_ti_fixed {

    0% {

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        -ms-transform: scale(0);

        -o-transform: scale(0);

        transform: scale(0);

    }



    30% {

        -webkit-transform: scale(0.8);

        -moz-transform: scale(0.8);

        -ms-transform: scale(0.8);

        -o-transform: scale(0.8);

        transform: scale(0.8);

    }



    100% {

        -webkit-transform: scale(1.3);

        -moz-transform: scale(1.3);

        -ms-transform: scale(1.3);

        -o-transform: scale(1.3);

        transform: scale(1.3);

    }

}



@keyframes icon_ti_fixed {

    0% {

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        -ms-transform: scale(0);

        -o-transform: scale(0);

        transform: scale(0);

    }



    30% {

        -webkit-transform: scale(0.8);

        -moz-transform: scale(0.8);

        -ms-transform: scale(0.8);

        -o-transform: scale(0.8);

        transform: scale(0.8);

    }



    100% {

        -webkit-transform: scale(1.3);

        -moz-transform: scale(1.3);

        -ms-transform: scale(1.3);

        -o-transform: scale(1.3);

        transform: scale(1.3);

    }

}



@-webkit-keyframes phonering-alo-circle-img-anim {

    0% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg)
    }



    10% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);

        transform: rotate(-25deg) scale(1) skew(1deg)
    }



    20% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg);

        transform: rotate(25deg) scale(1) skew(1deg)
    }



    30% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);

        transform: rotate(-25deg) scale(1) skew(1deg)
    }



    40% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg);

        transform: rotate(25deg) scale(1) skew(1deg)
    }



    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg)
    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg)
    }

}



@keyframes phonering-alo-circle-img-anim {

    0% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg)
    }



    10% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);

        transform: rotate(-25deg) scale(1) skew(1deg)
    }



    20% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg);

        transform: rotate(25deg) scale(1) skew(1deg)
    }



    30% {

        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);

        transform: rotate(-25deg) scale(1) skew(1deg)
    }



    40% {

        -webkit-transform: rotate(25deg) scale(1) skew(1deg);

        transform: rotate(25deg) scale(1) skew(1deg)
    }



    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg)
    }



    100% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        transform: rotate(0) scale(1) skew(1deg)
    }

}



.nd_ti_fixed {

    display: none;

    min-width: 250px;

    white-space: nowrap;

    z-index: 3;

    padding: 10px 0;

    background-color: #fff;

    position: absolute;

    bottom: 90px;

    right: 0;

    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px
}



.nd_ti_fixed::before {

    border-top: 7px solid #fff;

    border-left: 7px solid transparent;

    border-right: 7px solid transparent;

    content: " ";

    cursor: pointer;

    display: block;

    width: 0;

    height: 0;

    position: absolute;

    bottom: -7px;

    right: 35px;

    z-index: 1
}



.ul_nd_ti_fixed>li {
    border-bottom: 1px dashed #ddd;
    border: 0;
    margin: 20px 0;
}



.ul_nd_ti_fixed>li:last-child {

    border-bottom: 0
}



.ul_nd_ti_fixed>li>a {
    padding: 2px;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    position: relative;
}

.ul_nd_ti_fixed>li>a::before {
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    /* left: 0; */
    background-color: rgba(224, 56, 33, 0.2);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-animation: icon_ti_fixed 1s infinite alternate;
    animation: icon_ti_fixed 1s infinite alternate
}



.ul_nd_ti_fixed>li>a::after {
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(224, 56, 33, 0.3);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-animation: icon_ti_fixed 1.2s infinite alternate;
    animation: icon_ti_fixed 1.2s infinite alternate
}



.ul_nd_ti_fixed>li>a:hover {

    background-color: #f0f0f0
}



.ul_nd_ti_fixed>li>a span {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #2898ac;
    /* margin-right: 10px; */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 9;
}



.ul_nd_ti_fixed>li:nth-child(1)>a span {

    background-color: #e03821
}



.ul_nd_ti_fixed>li:nth-child(2)>a span {

    background-color: #007ff6
}



.ul_nd_ti_fixed>li:nth-child(3)>a span {

    background-color: #35c4ff
}



.ul_nd_ti_fixed>li:nth-child(4)>a span {

    background-color: #567aff
}



.ul_nd_ti_fixed>li>a p {
    padding: 0;
    display: none;
}



.ul_nd_ti_fixed>li>a span>img {}



@media only screen and (max-width: 480px) {

    .ti_fixed {

        /* bottom: 3%; */

        right: 3%
    }

}



.bg-tieude {

    margin-bottom: 20px;

    border-bottom: 1px solid var(--color-red);

    display: flex;

    align-items: center;

    border-radius: 30px 0 0 30px;

    overflow: hidden;

}



.bg-tieude h2 {

    margin-right: 65px;

    font-size: 27px;

    font-family: var(--fontB);

    color: #fff;

    position: relative;

    padding: 0 10px 0 50px;

    line-height: 54px;

    min-width: 200px;

    background: var(--bgmain);

    display: inline-block;

    border-top-left-radius: 30px;

    border-bottom-left-radius: 30px;

    margin: 0;

}



.bg-tieude h2:before {

    content: '';

    position: absolute;

    left: 0;

    top: 23px;

    width: 33px;

    height: 10px;

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

}



.bg-tieude h2:after {

    content: '';

    position: absolute;

    left: 100%;

    top: 0px;

    width: 67px;

    height: 54px;

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

}





.item-product {

    margin: 10px 0;

    font-size: 15px;

    border: 1px dashed #CDCDCD;

    border-top-right-radius: 35px;

    border-bottom-left-radius: 35px;

    padding: 10px;

    position: relative;

    text-align: center;

}



.chay_i {

    overflow: hidden;

}



.chay_i .slick-list {

    margin: 0 -1%;

}



.item_i {

    width: 92%;

    margin: auto;

}



.item-product .phantram {

    position: absolute;

    top: 15px;

    right: 15px;

    color: #fff;

    background: var(--color-main);

    font-size: 11px;

    border-radius: 2px;

    width: 45px;

    height: 25px;

    text-align: center;

    line-height: 25px;

    z-index: 20;

}



.item-product .img_sp {

    overflow: hidden;

    border-top-right-radius: 35px;

    border-bottom-left-radius: 35px;

    margin-bottom: 10px;

}



.item-product .img_sp a {

    display: block;

    line-height: 0;

}



.item-product a img {

    width: 100%;

}



.item-product .name_sp {

    margin: 0;

}



.item-product .name_sp a,

.item-product .name_sp span {

    text-decoration: none;

    color: #444444;

    font-weight: normal;

    font-size: 13px;

    margin: 5px 0;

    font-family: var(--font);

    -webkit-line-clamp: 2;

    white-space: inherit;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    min-height: 36px;

}



.item-product .name_sp a:hover {

    transition: 0.4s;

    color: var(--colormainhv);

}



.item-product .gia_sp {

    color: var(--colormainhv);

    font-family: var(--fontB);

    margin: 10px 0;

}



.item-product .gia_sp .giacu {

    color: #666666;

    text-decoration: line-through;

    padding-left: 10px;

    font-family: 'body';

}



.btn-cart-product {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-gap: 5px;

}



.btn-cart-product span {

    cursor: pointer;

    color: #000;

    text-transform: capitalize;

    text-align: center;

    padding: 10px 21px;

    border-radius: 34px;

    font-size: 10px;

    display: flex;

    align-items: center;

    text-align: center;

    justify-content: center;

}



.btn-cart-add {

    background-color: #fff;

    border: 1px solid #f59000;

    padding: 5px;

}



.btn-cart-add:hover {

    background-color: var(--color-dark-red);

    color: #fff;

}



.btn-cart-buy {

    background-color: #fff;

    border: 1px solid #f59000;

    padding: 5px;

}





.btn-cart-buy:hover {

    background-color: var(--color-dark-red);

    color: #fff;

}



.feedback2 {

    text-align: center
}



.feedback2 img {

    margin: 0 auto;

}



.item_tin {

    margin: 10px 0;

}



.item_tin .img_post {}



.item_tin .mota {

    padding-top: 15px;

}



.item_tin .mota h3 {

    margin: 0;

}



.item_tin .name_post,

.news_left .name_post {

    font-size: 14px;

    color: #333333;

    display: block;

    font-family: var(--fontB);

}



.item_tin .name_post:hover,

.news_left .name_post:hover {

    color: var(--color-main);

}



.item_tin .desc_post {

    margin: 10px 0 0;

    -webkit-line-clamp: 3;

    white-space: inherit;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

}



.item_tin .desc_post,

.news_left .desc_post {

    text-align: justify;

}



.news_left .day_post {

    margin-bottom: 5px;

    color: #7d7c7c;

}



.news_left .view_post a {

    background: var(--color-red);

    display: inline-block;

    color: #ffffff;

    margin-top: 10px;

    padding: 10px 30px;

    display: none;

}



.social-footer {}



.social-footer img {

    max-height: 25px;

}



.chinhanh {

    padding-top: 30px;

    display: flex;

    align-items: center;

    flex-flow: wrap;

}



.chinhanh a {

    color: #ffffff;

    border: 1px solid #ffffff;

    border-radius: 5px;

    margin: 5px;

    padding: 8px 12px;

    display: block;

}



.chinhanh a:hover {

    color: #F9CD01;

    border-color: #F9CD01;

}





.quick_contact {

    position: fixed;

    bottom: 50px;

    left: 60px;

    z-index: 20;

}



.quick_contact a {

    display: block;

    position: relative;

    font-size: 18px;

    color: #fff;

    padding: 0 20px 0 35px;

    height: 45px;

    line-height: 45px;

    text-decoration: none;

    border-radius: 0 40px 40px 0;

}



.quick_contact a span {

    display: block;

    width: 45px;

    height: 45px;

    line-height: 40px;

    border-radius: 50%;

    text-align: center;

    position: absolute;

    left: -25px;

    top: -2.5px;

    border: solid 5px #fff;

}



.button_gradient {

    background-image: linear-gradient(90deg, #F9CD01 0%, #ee2200 100%);

    border: 2px #fff solid;

}



.quick_contact a span:before {

    content: "";

    position: absolute;

    top: -30px;

    left: -27px;

    width: 95px;

    height: 95px;

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

    animation: rotate 3s linear infinite;

}



.quick_contact a span .fa {

    font-size: 26px;

    color: #fff;

}



.contact-phone {

    float: left;

    width: 100%;

    text-align: center;

    font-size: 18px;

    height: 45px;

    font-weight: bold;

    animation-duration: 500ms;

    animation-name: calllink;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    line-height: 45px;

}



@-webkit-keyframes rotate {

    from {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg)
    }



    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)
    }

}



@keyframes rotate {

    from {

        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg)
    }



    to {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg)
    }

}



@keyframes calllink {

    0% {

        color: #eba11e;

    }



    50% {

        color: #fff;

    }



    100% {

        color: #ebfa48;

    }

}



.blink {

    -webkit-animation-name: blink;

    -webkit-animation-duration: 1s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blink;

    -moz-animation-duration: 1s;

    -moz-animation-timing-function: linear;

    -moz-animation-iteration-count: infinite;

    animation-name: blink;

    animation-duration: 1s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}



@-moz-keyframes blink {

    0% {

        opacity: 1.0;

    }



    50% {

        opacity: 0.0;

    }



    100% {

        opacity: 1.0;

    }

}



@-webkit-keyframes blink {

    0% {

        opacity: 1.0;

    }



    50% {

        opacity: 0.0;

    }



    100% {

        opacity: 1.0;

    }

}



@keyframes blink {

    0% {

        opacity: 1.0;

    }



    50% {

        opacity: 0.0;

    }



    100% {

        opacity: 1.0;

    }

}



.title-main {

    margin-bottom: 25px;

    overflow: hidden;

    font: 64px var(--fontB);

    color: #fff;

    text-align: center;

    position: relative;

}



.section-product .title-main {

    margin-bottom: 10px;

}



.title-main h2,

.title-main span {

    font-size: 28px;

    font-weight: 600;

    color: #fff;

    position: relative;

    padding-bottom: 10px;

}

.title-main:after {

    content: "";

    position: absolute;

    bottom: 0;

    width: 80px;

    height: 1px;

    border-radius: 1px;

    background: linear-gradient(90deg, #ff0000, #ff4500, #fffc59, #6fff90, #1effe1);

    left: 0;

    right: 0;

    margin: 0 auto;

}



.quantity-pro-detail {

    width: 150px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-align: center;

    height: 45px;

    border-radius: 30px;

    overflow: hidden;

    border: 1px solid #dfdfdf;

}



.quantity-pro-detail span {

    line-height: 25px;

    padding: 0px;

    width: 45px;

    height: 100%;

    color: #000;

    cursor: pointer;

    font-size: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 500;

}



.quantity-pro-detail span.quantity-plus-pro-detail {

    border-left: 0px;

}



.quantity-pro-detail span.quantity-minus-pro-detail {

    border-right: 0px;

}



.quantity-pro-detail input {

    height: 100%;

    border: none;

    width: calc(100% - 90px);

    text-align: center;

    font-size: 15px;

}



.div_kq_search {

    font: 14px var(--font);

    color: var(--colormain);

}



.div_kq_search span {

    color: var(--colormainhv);

    font-family: var(--fontB);

}



.cart-fixed {

    position: fixed;

    right: 20px;

    bottom: 290px;

    z-index: 10;

    background: #4b4f56;

    width: 50px;

    height: 50px;

    text-align: center;

    color: #fff !important;

    border-radius: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.cart-fixed i {

    font-size: 20px;

}



.cart-fixed span {

    position: absolute;

    top: 0px;

    right: -5px;

    color: #fff;

    width: 25px;

    height: 25px;

    background: var(--colormainhv);

    text-align: center;

    line-height: 25px;

    font-size: 11px;

    border-radius: 100%;

}



.price-discount {

    position: absolute;

    top: 10px;

    right: 10px;

    background: var(--bgmainhv);

    color: #fff;

    border-radius: 5px;

    padding: 5px 10px;

    font: 13px var(--fontB);

}



.row-footer {

    display: grid;

    grid-template-columns: 40% 20% 30%;

    grid-gap: 20px 5%;

}



.chinhanh-footer {

    position: relative;

    overflow: hidden;

}



.btn-chinhanh-footer {

    position: absolute;

    right: 10px;

    top: 10px;

    z-index: 99;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-content: center;

    justify-content: flex-end;

    align-items: center;

}



.btn-chinhanh-footer span {

    font: 14px var(--font);

    color: #fff;

    background: #676767;

    border-radius: 0;

    padding: 10px 25px;

    cursor: pointer;

    text-transform: uppercase;

}



.btn-chinhanh-footer span.active {

    background: var(--bgmain);

}



#bandoiframe-footer {

    border-radius: 20px;

    border: 4px solid #Fff;

    overflow: hidden;

    height: 400px;

}



#bandoiframe-footer iframe {

    width: 100% !important;

    margin: 0;

    height: 100% !important;

}



.gallery-detail {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

}



.list_khoahoc {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 40px 10px;

    position: relative;

}



.khoahoc-item-wrap {

    width: 36%;

    position: relative;

    z-index: 1;

}



.khoahoc-item {

    position: relative;

    overflow: hidden;

    border-radius: 10px;

}



.name_khoahoc {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    background: hsl(0deg 0% 0% / 50%);

    color: #fff;

    padding: 10px 20px;

    margin: 0;

}



.name_khoahoc a {

    color: #fff;

}



.xemthemkhoachoc {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    align-items: center;

}



.xemthemkhoachoc a {

    background: Var(--bgmain);

    color: #fff;

    border-radius: 5px;

    padding: 10px 20px;

    font: 14px var(--fontInterMedium);

}



/* Đường */

.road {

    position: relative;

    width: 100%;

    height: 107px;

    margin: auto;

    background: url("../images/road.png") center;

    background-size: cover;

    overflow: hidden;

}



/* Xe */

.car {

    position: absolute;

    bottom: 25px;

    left: -200px;

    /* bắt đầu ngoài màn hình */

    width: 180px;

    transition: transform 4s linear;

}



.banggia-item {

    border: 3px solid var(--bgmain);

    border-radius: 10px;

    padding: 10px;

    background: #B3CDE3;

    text-align: center;

    margin: 10px 0;

    /* height: 100%; */

}



.banggia-item-img {}



.banggia-item-img img {}



.banggia-item-name {}



.banggia-item-name a {

    font: 28px var(--fontInterBold);

    color: #fff;

}



.banggia-item-name a:hover {}



.banggia-item-price {

    font: 36px var(--fontInterBold);

    color: #FF0000;

    min-height: 45px;

}



.banggia-item-desc {

    text-align: left;

    color: #fff;

    font-size: 20px;

}

.xemtatcavideo {

    text-align: center;

    margin: 20px 0 0;

}

.xemtatcavideo a {

    display: inline-block;

    padding: 12px 20px;

    border-radius: 5px;

    background: var(--bgmain);

    color: #fff;

}

.xemtatcavideo a:hover {

    background: #0674d4;

}

.tailieu-row {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px 60px;

}

.tailieu-item {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0;

    background: #E0E5F7;

    border: 1px solid var(--bgmain);

}

.tailieu-img {}

.tailieu-content {

    padding: 10px 10px 5px 20px;

}

.tailieu-content h3 {

    line-height: initial;

    font-size: 14px;

}

.tailieu-content h3 .name_post {

    font: 16px var(--fontInterBold);

    text-transform: uppercase;

    color: #000;

}

.tailieu-item:hover h3 .name_post {

    color: var(--bgmain)
}

.desc_post {

    font: 14px var(--font);

}

.logo-footer {

    text-align: center;

    margin: 0 0 20px;

}

.logo-footer img {

    margin: 0 auto;

}



.tf-header .header-wrap-content {

    background: #091838;

    position: relative;

}

.tf-header .header-wrap-content:before {

    width: calc((100% - 1200px) / 2);

    content: "";

    height: 100%;

    position: absolute;

    left: 0px;

    top: 0px;

    background: rgb(28, 41, 56);

    z-index: 1;

}

.tf-header-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px 20px;

    flex-wrap: wrap;

}



.tf-logo img {

    max-height: 48px;

    width: auto;

}



.tf-header-nav {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1;

    justify-content: flex-start;

}



.tf-header-nav li a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 34px;

    border-radius: 999px;

    padding: 0 20px;

    background: linear-gradient(90deg, #283f6c 0%, #2d315f 100%);

    color: #f8f9ff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

}



.tf-header-nav li a.c-category__button {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    /* height: 55px; */

    color: transparent;

    -webkit-text-stroke: transparent;

    background-image: linear-gradient(90deg, #3863ff, #d92eff, #ff3485, #ff6477, #ffd014);

    -webkit-background-clip: text;

    background-clip: text;

    font-size: 20px;

    padding: 0;

    justify-content: flex-start;

}

.tf-header-nav li a.c-category__button svg {}

.tf-header-nav li a.c-category__button span {

    display: block;

    margin: 0 8px;

}



.tf-header-right {

    display: flex;

    align-items: center;

    gap: 10px;

}



.tf-auth-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 34px;

    padding: 0 14px;

    border-radius: 10px;

    /* border: 1px solid rgba(255, 255, 255, .35); */

    color: #ffffff;

    font-size: 14px;

    text-decoration: none;

}

a.tf-auth-link:hover {

    background: #fff;

    color: #000;

}

.tf-auth-link-register {

    width: 100px;

    /* display: -webkit-box; */

    display: -ms-flexbox;

    /* display: flex; */

    /* -webkit-box-align: center; */

    -ms-flex-align: center;

    /* align-items: center; */

    /* -webkit-box-pack: center; */

    -ms-flex-pack: center;

    /* justify-content: center; */

    /* height: 35px; */

    /* border-radius: 12px; */

    /* white-space: nowrap; */

    /* background: var(--color-01); */

    position: relative;

    padding: 1px 0;

}

.tf-auth-link-register span {

    position: relative;

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 34px;

    border-radius: 12px;

    white-space: nowrap;

    background: #304256;

    z-index: 2;

    /* display: block; */

    color: #fff;

}

.tf-auth-link-register:before {

    position: absolute;

    content: '';

    top: 0px;

    left: 0;

    width: calc(100% + 2px);

    height: calc(100% + 2px);

    background: -webkit-gradient(linear, left top, right top, from(#FF0000), color-stop(28%, #FF4500), color-stop(50%, #FFFC59), color-stop(75%, #6FFF90), color-stop(97.5%, #1EFFE1));

    background: linear-gradient(90deg, #FF0000 0%, #FF4500 28%, #FFFC59 50%, #6FFF90 75%, #1EFFE1 97.5%);

    background-size: 600% 600%;

    border-radius: 12px;

    animation: AnimateBorder 4s ease infinite;

    -webkit-animation: AnimateBorder 4s ease infinite;

    -moz-animation: AnimateBorder 4s ease infinite;

    z-index: 1;

    -webkit-transform: translate(-1px, -1px);

    transform: translate(-1px, -1px);

    -webkit-transition: -webkit-filter 1s ease-in;

    transition: -webkit-filter 1s ease-in;

    transition: filter 1s ease-in;

    transition: filter 1s ease-in, -webkit-filter 1s ease-in;

}



@-webkit-keyframes AnimateBorder {

    0% {

        background-position: 0% 50%
    }



    50% {

        background-position: 100% 50%
    }



    to {

        background-position: 0% 50%
    }

}



@keyframes AnimateBorder {

    0% {

        background-position: 0% 50%
    }



    50% {

        background-position: 100% 50%
    }



    to {

        background-position: 0% 50%
    }

}

a.tf-support-link {

    position: relative;

    height: 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 15px;

    line-height: 2rem;

    border: 0;

    background: linear-gradient(90deg, #0d5dd6 0%, #9747ff 100%);

    transition: all 0.3s ease-in-out;

    z-index: 10;

    margin-left: 18px;

    padding-left: 20px;

    padding-right: 20px;

    border-radius: 12px;

    white-space: nowrap;

    color: #fff;

}

a.tf-support-link:hover {

    transform: translateY(-4px) translateX(-2px);

    box-shadow: 2px 5px 0 0 #f66a20;

    color: #fff !important;

}

.tf-support-link:before,
.tf-support-link:after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border-radius: 0.8rem;

    z-index: 0;

    background: transparent;

}

.tf-support-link:before {

    animation: pulse-blue-medium-sm 3s infinite;

}

.tf-support-link:after {

    animation: pulse-blue-small-sm 3s infinite;

}

@keyframes pulse-blue-small-sm {

    0% {

        box-shadow: 0 0 0 0 rgba(18, 97, 211, 0.7);

    }

    100%,
    30% {

        box-shadow: 0 0 0 12px transparent;

    }

}

@keyframes pulse-blue-medium-sm {

    0% {

        box-shadow: 0 0 0 0 rgba(143, 81, 248, 0.7);

    }

    100%,
    30% {

        box-shadow: 0 0 0 20px transparent;

    }

}

.tf-user-dropdown {

    position: relative;

}



.tf-user-name {

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, .25);

    border-radius: 10px;

    display: inline-block;

}



.tf-user-menu {

    position: absolute;

    top: 100%;

    right: 0;

    min-width: 220px;

    border-radius: 10px;

    border: 1px solid #dde5f2;

    background: #fff;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);

    display: none;

    z-index: 20;

    overflow: hidden;

}



.tf-user-menu a {

    display: block;

    padding: 10px 12px;

    color: #203654;

    font-size: 14px;

    text-decoration: none;

    border-bottom: 1px solid #edf2fa;

}

.tf-user-menu a:hover {

    background: #203654;

    color: #fff;

}

.tf-user-menu a:last-child {

    border-bottom: 0;

}



.tf-user-dropdown:hover .tf-user-menu {

    display: block;

}



@media (max-width: 1200px) {

    .tf-header-nav {

        /* display: none; */

        order: 2;

        flex-wrap: wrap;

        justify-content: center;

    }

}



.c-header__link.is-video3d {

    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, 0.4)), color-stop(28%, rgba(255, 69, 0, 0.4)), color-stop(50%, rgba(255, 252, 89, 0.4)), color-stop(75%, rgba(111, 255, 144, 0.4)), color-stop(97.5%, rgba(30, 255, 225, 0.4))) padding-box, -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, 0.4)), color-stop(28%, rgba(255, 69, 0, 0.4)), color-stop(50%, rgba(255, 252, 89, 0.4)), color-stop(75%, rgba(111, 255, 144, 0.4)), color-stop(97.5%, rgba(30, 255, 225, 0.4))) border-box;

    background: linear-gradient(90deg, rgba(255, 0, 0, 0.4) 0%, rgba(255, 69, 0, 0.4) 28%, rgba(255, 252, 89, 0.4) 50%, rgba(111, 255, 144, 0.4) 75%, rgba(30, 255, 225, 0.4) 97.5%) padding-box, linear-gradient(90deg, rgba(255, 0, 0, 0.4) 0%, rgba(255, 69, 0, 0.4) 28%, rgba(255, 252, 89, 0.4) 50%, rgba(111, 255, 144, 0.4) 75%, rgba(30, 255, 225, 0.4) 97.5%) border-box;

    border-color: transparent;

    background-size: 240% 240%;

    -webkit-animation: gradient-animation 4s ease infinite;

    animation: gradient-animation 4s ease infinite;

}

.c-header__link.is-video3d:before {

    content: "";

    display: block;

    width: 25px;

    height: 25px;

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

    background-size: 25px 25px;

    margin-right: 8px;

}

.c-header__link {

    font-size: 14px;

    margin-left: 0px;

}

.c-header__link {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

    padding: 0 24px;

    height: 35px;

    min-height: 35px;

    border-radius: 100px;

    border: 1px solid #fff;

    margin-left: 8px;

    position: relative;

    overflow: hidden;

}

.c-header__link svg {

    margin-left: 8px;

}

@-webkit-keyframes gradient-animation {

    0% {

        background-position: 0% 50%
    }



    50% {

        background-position: 100% 50%
    }



    to {

        background-position: 0% 50%
    }

}



@keyframes gradient-animation {

    0% {

        background-position: 0% 50%
    }



    50% {

        background-position: 100% 50%
    }



    to {

        background-position: 0% 50%
    }

}

.c-header__link:after {

    content: "";

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 80%);

    -webkit-transform: rotate(30deg);

    transform: rotate(30deg);

    -webkit-animation: shineEffect 4s infinite linear;

    animation: shineEffect 4s infinite linear;

}





@-webkit-keyframes shineEffect {

    0% {

        -webkit-transform: translateX(-100%) rotate(30deg);

        transform: translateX(-100%) rotate(30deg)
    }



    to {

        -webkit-transform: translateX(100%) rotate(30deg);

        transform: translateX(100%) rotate(30deg)
    }

}



@keyframes shineEffect {

    0% {

        -webkit-transform: translateX(-100%) rotate(30deg);

        transform: translateX(-100%) rotate(30deg)
    }



    to {

        -webkit-transform: translateX(100%) rotate(30deg);

        transform: translateX(100%) rotate(30deg)
    }

}





.tf-header-nav li a.is-support {

    animation: gradient-animation 4s ease infinite;

    border-color: transparent;

    background-size: 240% 240%;

    background: linear-gradient(90deg, rgba(255, 0, 0, 0.4) 0%, rgba(255, 69, 0, 0.4) 28%, rgba(255, 252, 89, 0.4) 50%, rgba(255, 165, 0, 0.4) 75%, rgba(255, 192, 103, 0.4) 97.5%) padding-box, linear-gradient(90deg, rgba(255, 0, 0, 0.4) 0%, rgba(255, 69, 0, 0.4) 28%, rgba(255, 252, 89, 0.4) 50%, rgba(255, 165, 0, 0.4) 75%, rgba(255, 192, 103, 0.4) 97.5%) border-box;

}



.tf-header-nav li a.is-service {

    animation: gradient-animation 4s ease infinite;

    border-color: transparent;

    background-size: 240% 240%;

    background: linear-gradient(90deg, rgba(147, 112, 219, 0.4) 0%, rgba(138, 43, 226, 0.4) 28%, rgba(30, 144, 255, 0.4) 50%, rgba(111, 255, 144, 0.4) 75%, rgba(30, 255, 225, 0.4) 97.5%) padding-box, linear-gradient(90deg, rgba(147, 112, 219, 0.4) 0%, rgba(138, 43, 226, 0.4) 28%, rgba(30, 144, 255, 0.4) 50%, rgba(111, 255, 144, 0.4) 75%, rgba(30, 255, 225, 0.4) 97.5%) border-box;

}



.box-header__link>ul {

    left: 5px;

    z-index: 99;

    background: var(--color-01);

    min-width: 100%;

    display: flex;

    flex-direction: column;

    border-radius: 4px;

    position: absolute;

    transform: scaleY(0);

    visibility: hidden;

    transition: all 0.3s ease 0s;

    top: 100%;

}

.box-header__link:hover>ul {

    transform: scaleY(1);

    visibility: visible;

}

.tf-header-nav li {

    position: relative
}

.tf-header-nav>li ul {

    left: 0;

    z-index: 99;

    min-width: 100%;

    display: flex;

    flex-direction: column;

    border-radius: 4px;

    position: absolute;

    transform: scaleY(0);

    visibility: hidden;

    transition: all 0.3s ease 0s;

    top: 100%;

    background: linear-gradient(90deg, #283f6c 0%, #2d315f 100%);

    width: 200px;

}

.tf-header-nav li:hover>ul {

    transform: scaleY(1);

    visibility: visible;

}

.tf-header-nav li>ul li ul {

    left: 100%;

}

.tf-header-nav>li>ul li a {

    color: #fff;

    display: block;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding: 15px 10px;

    line-height: 1;

    font-size: 14px;

    white-space: nowrap;

    border-radius: 0;

    font-family: var(--font);

    height: inherit;

}

.tf-header-nav>li>ul li:last-child a {

    border: 0;

}



.marquee-container {

    overflow: hidden;

    width: 100%;

}



.c-marquee span {

    font-size: 20px;

    background: -webkit-gradient(linear, left top, right top, from(#5BFF79), color-stop(28%, #F5D4FF), color-stop(50%, #FFFC59), color-stop(75%, #6FFF90), color-stop(97.5%, #1EFFE1));

    background: linear-gradient(90deg, #5BFF79 0%, #F5D4FF 28%, #FFFC59 50%, #6FFF90 75%, #1EFFE1 97.5%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font: 18px var(--font);

}



.marquee {

    transform: translateX(100%);

    animation: marquee-reset 0.1s forwards;

}

.c-marquee {

    white-space: nowrap;

}

.c-marquee {

    display: block;

    padding: 10px 0;

}

@keyframes marquee-reset {

    0% {

        transform: translateX(100%);

    }

    100% {

        transform: translateX(0);

    }

}

.section-listCate {

    padding: 40px 0;

    background: var(--bgmain);

}

.c-listCate {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    gap: 5px 10px;

}



.c-listCate a {

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border-radius: 100px;

    border: 1px solid #fff;

    padding: 6px 28px;

    color: #fff;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

}

.c-listCate a:hover {

    background: #fff;

    color: var(--bgmain);

}

.body-main {

    padding: 30px 0;

}

.container-full {

    padding: 0 20px;

    width: 100%;

    margin: 0 auto;

}

.body-main-flex {

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    align-items: flex-start;

}

.body-main-left {

    width: 80%;

}

.body-main-right {

    width: 20%;

    padding-left: 20px;

    position: sticky;

}

.product-new {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-between;

    align-items: center;

    margin: 0 0 20px 0;

    gap: 0 20px;

}

.product-new h2 {

    color: #fff;

    margin: 0;

    font: 28px var(--fontInterMedium);

    text-transform: uppercase;

}

.product-new a {

    color: #fff;

    font: 14px var(--font);

}

.product-new span {

    flex-grow: 1;

    height: 1px;

    background: rgba(236, 236, 236, 0.4);

}



.product-link:hover .c-productCard__download {

    opacity: 1;

}

.c-productCard__download {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

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

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

    transition: all 0.3s ease-in-out;

    opacity: 0;

}

.c-productCard__btn {

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 35px;

    border-radius: 100px;

    padding: 0 24px;

    background: #73a1c5;

    color: #fff;

}

.c-productCard__btn svg {

    margin-left: 8px;

}

.quangcao {

    margin: 0 0 20px 0;

}

.nhomchiase {

    padding: 30px 0;

    background: var(--bgmain);

    position: relative;

}

.nhomchiase:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 403px;

    background: -webkit-gradient(linear, left bottom, left top, from(#6F21E4), color-stop(34.9%, rgba(113, 68, 179, 0.19)), to(rgba(115, 115, 115, 0)));

    background: linear-gradient(360deg, #6F21E4 0%, rgba(113, 68, 179, 0.19) 34.9%, rgba(115, 115, 115, 0) 100%);

}

.title-nhomchiase {

    position: relative;

    max-width: -webkit-fit-content;

    max-width: -moz-fit-content;

    max-width: fit-content;

    margin: 0 auto;

    z-index: 1;

    margin-bottom: 20px;

}

.title-nhomchiase span {

    position: relative;

    padding: 10px;

    font-size: 36px;

    font-weight: 700;

    text-align: center;

    margin-bottom: 20px;

    animation: blinkText 1s infinite;

    display: inline-block;

    color: transparent;

    -webkit-text-stroke: transparent;

    background-image: linear-gradient(90deg, #3863ff, #d92eff, #ff3485, #ff6477, #ffd014);

    -webkit-background-clip: text;

    background-clip: text;

    padding: 10px 20px;

}

.title-nhomchiase span::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 3px;

    border-radius: 100px;

    background: linear-gradient(90deg, #3863ff, #d92eff, #ff3485, #ff6477, #ffd014);

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

}

.nhomchiase-slick {

    position: relative;

    z-index: 9
}

.nhomchiase-item {

    padding: 0 10px;

    text-align: center;

}

.nhomchiase-item img {

    max-width: 200px;

    margin: 0 auto;

}

.solieuthongke-row {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    position: relative;

    z-index: 1;

    margin-top: 40px;

}

.solieuthongke-item {

    width: 25%;

    padding: 0 60px;

    position: relative;

    font-size: 20px;

    font-weight: 500;

    text-align: center;

    color: #fff;

    font-size: 18px;

    padding-left: 0;

}

.solieuthongke-item:after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 1px;

    height: 100%;

    background: -webkit-gradient(linear, left top, left bottom, from(#3DF352), to(#FF9B8A));

    background: linear-gradient(180deg, #3DF352 0%, #FF9B8A 100%);

}

.solieuthongke-number {

    font-size: 36px;

    color: #fff;

}

.solieuthongke-name {

    font-size: 18px;

}

.copyright {

    text-align: right;

}

.c-detailLayout__wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-wrap: wrap;

}



.c-detailLayout__img {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding: 0 20px 0 0;

}

.c-detailLayout__img {

    position: relative;

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

}

.c-detailLayout__content {

    max-width: 425px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}

.c-detailLayout__box {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    border-radius: 15px;

    background: -webkit-gradient(linear, left top, left bottom, from(var(--color-11)), to(var(--color-11))) padding-box, -webkit-gradient(linear, left top, right top, from(#FF0000), color-stop(28%, #FF4500), color-stop(50%, #FFFC59), color-stop(75%, #6FFF90), color-stop(97.5%, #1EFFE1)) border-box;

    background: linear-gradient(var(--color-11), var(--color-11)) padding-box, linear-gradient(90deg, #FF0000 0%, #FF4500 28%, #FFFC59 50%, #6FFF90 75%, #1EFFE1 97.5%) border-box;

    border: 1px solid transparent;

    padding: 24px;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    color: #fff;

    margin: 0 0 20px 0;

}



.c-detailLayout__title-download {

    height: 21px;

}

.c-detailLayout__title-download {

    margin-bottom: 15px;

}



.c-detailLayout__title {

    font-weight: bold;

    text-align: center;

    font-size: 17px;

}

.c-detailLayout__title-download .typing-text {

    background: linear-gradient(to right, #ec4899, #f59e0b);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    display: inline-block;

}



.c-detailLayout__download {

    margin-bottom: 0px;

}

.c-detailLayout__download {

    position: relative;

    cursor: pointer;

    max-width: -webkit-fit-content;

    max-width: -moz-fit-content;

    max-width: fit-content;

    z-index: 1;

    margin: 18px 0;

}



.c-detailLayout__download button,

.c-detailLayout__zalo button {

    height: 46px;

}

.c-detailLayout__download button,

.c-detailLayout__download a {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 240px;

    height: 56px;

    border-radius: 100px;

    font-size: 15px;

    line-height: 20px;

    font-weight: bold;

    background: -webkit-gradient(linear, left top, right top, from(#F10102), to(#480001));

    background: linear-gradient(90deg, #F10102 0%, #480001 100%);

    -webkit-box-shadow: 0px 2px 6.2px rgba(222, 51, 252, 0.49);

    box-shadow: 0px 2px 6.2px rgba(222, 51, 252, 0.49);

    background-size: 240% 240%;

    -webkit-animation: gradient-animation 4s ease infinite;

    animation: gradient-animation 4s ease infinite;

    color: #fff;

    border: none;

}

.btn-loading {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}



@-webkit-keyframes gradient-animation {

    0% {

        background-position: 0% 50%
    }



    50% {

        background-position: 100% 50%
    }



    to {

        background-position: 0% 50%
    }

}



@keyframes gradient-animation {

    0% {

        background-position: 0% 50%
    }



    50% {

        background-position: 100% 50%
    }



    to {

        background-position: 0% 50%
    }

}



.btn-loading span.spinner {

    display: none;

}

.spinner {

    position: relative;

    width: 160px;

    height: 160px;

}



.specs-table {

    display: block;

    width: 100%;

    margin-top: 18px;

    color: #fff;

}

.specs-table table {

    width: 100%;

}

.specs-table table th,

.specs-table table td {

    color: #fff;

    border: 0;

    margin: 0;

    outline: 0;

    padding: 0;

    text-align: left;

    padding-top: 2.5px;

    padding-bottom: 2.5px;

    font: 15px var(--fontInterMedium);

}



.c-detailLayout__zalo {

    animation: smooth-shake 0.6s ease-in-out infinite;

}

.c-detailLayout__zalo {

    margin-bottom: 0;

}

.c-detailLayout__zalo {

    position: relative;

    cursor: pointer;

    max-width: -webkit-fit-content;

    max-width: -moz-fit-content;

    max-width: fit-content;

    z-index: 1;

    margin: 18px 0;

}



@keyframes smooth-shake {

    0% {

        transform: translateY(0);

    }

    25% {

        transform: translateY(-4px);

    }

    50% {

        transform: translateY(0);

    }

    75% {

        transform: translateY(3px);

    }

    100% {

        transform: translateY(0);

    }

}





.c-detailLayout__zalo {

    position: relative;

    cursor: pointer;

    max-width: -webkit-fit-content;

    max-width: -moz-fit-content;

    max-width: fit-content;

    z-index: 1;

    margin: 18px 0
}



.c-detailLayout__zalo:hover .c-detailLayout__bg {

    -webkit-filter: blur(10px);

    filter: blur(10px);

    -webkit-transition: -webkit-filter 0.4s ease-in;

    transition: -webkit-filter 0.4s ease-in;

    transition: filter 0.4s ease-in;

    transition: filter 0.4s ease-in, -webkit-filter 0.4s ease-in
}



.c-detailLayout__zalo button {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 240px;

    height: 56px;

    border-radius: 100px;

    font-size: 15px;

    line-height: 20px;

    font-weight: bold;

    background: -webkit-gradient(linear, left top, right top, from(#00327A), color-stop(52%, #0462EC), to(#00327A));

    background: linear-gradient(90deg, #00327A 0%, #0462EC 52%, #00327A 100%);

    -webkit-box-shadow: 0px 2px 6.2px rgba(222, 51, 252, 0.49);

    box-shadow: 0px 2px 6.2px rgba(222, 51, 252, 0.49);

    background-size: 240% 240%;

    -webkit-animation: gradient-animation 4s ease infinite;

    animation: gradient-animation 4s ease infinite;

    overflow: hidden;

    position: relative;

    border: 0;

    color: #fff;

}



/* .c-detailLayout__zalo button:before {

    content: "";

    display: block;

    width: 34px;

    height: 34px;

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

    background-size: 34px 34px;

    margin-right: 12px

}

 */

.c-detailLayout__zalo button:after {

    content: "";

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 80%);

    -webkit-transform: rotate(30deg);

    transform: rotate(30deg);

    -webkit-animation: shineEffect 4s infinite linear;

    animation: shineEffect 4s infinite linear
}



.c-detailLayout__zalo svg {

    margin-right: 12px
}





.product-social {

    margin-top: auto;

    padding: 20px;

    border-radius: 15px;

    background: linear-gradient(var(--color-11), var(--color-11)) padding-box, linear-gradient(90deg, #ff0000 0%, #ff4500 28%, #fffc59 50%, #6fff90 75%, #1effe1 97.5%) border-box;

    margin: 20px 0 0;

}

.c-social {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-top: 40px;

    justify-content: center;

    gap: 10px;

}

.c-social li a {

    font-size: 13px;

    height: 34px;

    padding-left: 16px;

    padding-right: 16px;

}

.c-social li a {

    background: #64A3DA;

}

.c-social li a {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    height: 42px;

    padding: 0 24px;

    border-radius: 100px;

    cursor: pointer;

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

    transition: all 0.3s ease-in-out;

    color: #fff;

}

.c-social li a.facebook {

    background: #0169D9;

    color: #fff;

}



.c-social li a.pinterest {

    background: #FF0000
}



.c-social li a.zalo {

    background: #14A2B8
}



.c-social li a {

    background: #64A3DA
}



.c-social li a img,
.c-social li a svg {

    height: 18px;

    width: auto;

    margin-right: 10px
}



.c-social li a.btn-danger {

    -webkit-animation: pulse 1.5s infinite;

    animation: pulse 1.5s infinite
}



.c-group {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-top: 10px;

    justify-content: center;

}



@media only screen and (max-width: 1024px) {

    .c-group {

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center
    }

}



.c-rating {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 42px;

    border-radius: 100px;

    background: #28A745;

    padding: 0 24px;

    color: #fff;

}

.c-rating__star svg {

    max-width: 16px;

    height: auto;

}

@media only screen and (max-width: 1024px) {

    .c-rating {

        width: 100%;

        margin-bottom: 10px
    }

}



.c-rating__star {

    margin-left: 20px
}



.c-info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    flex-wrap: wrap;

    justify-content: center;

}





.c-info li {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    height: 42px;

    padding: 0 24px;

    border-radius: 100px;

    margin-left: 10px;

    background: #343A40;

    color: #fff;

}



@media only screen and (max-width: 767px) {

    .c-info li {

        margin-bottom: 12px
    }

}



@media only screen and (max-width: 767px) {

    .c-social {

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

    }

}





.c-login__wrap {

    background: linear-gradient(145deg, rgba(32, 45, 56, 0.9), rgba(53, 53, 53, 0.8));

    padding: 30px;

    border-radius: 15px;

    margin: 0 auto;

    width: 100%;

    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.05) inset, 0 -1px 2px rgba(0, 0, 0, 0.2) inset;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.05) inset, 0 -1px 2px rgba(0, 0, 0, 0.2) inset;

    border: 1px solid rgba(115, 161, 197, 0.1);

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

    max-width: 930px;

}



.c-login__title,
.c-signup__title {

    font-size: 30px;

    margin-bottom: 32px;

    padding-bottom: 12px;

    position: relative;

    text-align: center;

    color: #fff;

}



.c-login__title:after,
.c-signup__title:after {

    content: "";

    position: absolute;

    left: 50%;

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

    transform: translateX(-50%);

    bottom: 0;

    width: 60px;

    border-bottom: 1px solid var(--main-color);

}

.c-form__label {

    color: #fff;

    margin: 0 0 10px;

    width: 100%;

}

.c-form__item+.c-form__item {

    margin-top: 24px;

}



.c-form__item {

    width: 100%;

}



.c-form__item input {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid rgba(115, 161, 197, 0.4);

    border-radius: 8px;

    background: rgba(32, 45, 56, 0.6);

    color: #ffffff;

    font-size: 15px;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

}

.c-form__item .button-user {

    text-align: center;

}

.c-form__item .button-user input {

    background: -webkit-gradient(linear, left top, right top, from(#5a8bb0), to(#73a1c5));

    background: linear-gradient(to right, #5a8bb0, #73a1c5);

    color: #ffffff;

    padding: 14px 20px;

    border: none;

    width: 100%;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    letter-spacing: 0.5px;

    position: relative;

    overflow: hidden;

    max-width: 180px;

    margin: 32px auto 0;

}

.forgotpass {

    text-align: right;

    margin: 20px 0 0;

}

.forgotpass a {

    color: #fff;

    font: 14px var(--font);

}

.note-user {

    text-align: center;

    font-size: 15px;

    color: rgba(255, 255, 255, 0.7);

    margin: 20px 0 0;

}

.note-user a {

    color: #fff;

    font: 14px var(--font);

}


.bg-content {
    padding: 17px 15px 10px 15px;
    line-height: normal;
    background: rgba(255, 255, 255, 100);
    margin-top: 15px;
    border-radius: 5px;
}