.sidebar_title {
    background-color: var(--cl-2);
    text-align: center;
    color: var(--cl-1);
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 0 !important
}

.sidebar_list_post .item {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px
}

.sidebar_list_post .item .thumb {
    flex: 0 0 70px
}

.sidebar_list_post .item img {
    width: 70px;
    height: 70px;
    object-fit: cover
}

.sidebar_list_post .item .title {
    flex-grow: 1;
    margin-left: 10px;
    text-align: left;
    font-size: 14px
}

.sidebar_list_post .item .title a {
    color: inherit
}

.sidebar_list_post .item .title a:hover {
    color: var(--cl-1)
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }

}

@-webkit-keyframes shine {
    100% {
        left: 125%
    }

}

@keyframes shine {
    100% {
        left: 125%
    }

}

.hover1 {
    overflow: hidden;
    position: relative;
    display: block
}

.hover1:hover:before {
    -webkit-animation: shine 1.1s;
    animation: shine 1.1s
}

.hover1:before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    cursor: pointer
}

.hover2 {
    overflow: hidden;
    position: relative;
    display: block
}

.hover2 img {
    -webkit-transition: .4s linear;
    -ms-transition: .4s linear;
    transition: .4s linear;
    -webkit-transform: rotate(0) scale(1);
    -ms-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1)
}

.hover2:hover img {
    -webkit-transform: rotate(-3deg) scale(1.1);
    -ms-transform: rotate(-3deg) scale(1.1);
    transform: rotate(-3deg) scale(1.1)
}

.hover3 {
    overflow: hidden;
    position: relative;
    display: block
}

.hoverListImg {
    border-radius: 10px;
    overflow: hidden;
    display: block
}

.hover3 img {
    display: block;
    margin: 0;
    height: auto;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out
}

.hover3:before, .hover3:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s
}

.hover3:before {
    top: 0;
    left: 0;
    z-index: 1
}

.hover3:after {
    bottom: 0;
    right: 0;
    z-index: 2
}

.hover3:hover:before, .hover3:hover:after {
    width: 100%;
    height: 100%
}

.line-clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

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

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

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

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

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

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

.about-desc {
    color: #515151;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 1rem
}

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

@keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }

}

@keyframes shake-anim {
    0% {
        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)
    }

}

@keyframes rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }

}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }

}

@keyframes pulse-animation {
    0% {
        transform: scale3d(1, 1, 1);
        opacity: 0
    }

    10% {
        transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1
    }

    100% {
        transform: scale3d(1.6, 1.6, 1.6);
        opacity: 0
    }

}

@keyframes border-animation {
    0% {
        transform: scale3d(0.6, 0.6, 0.6);
        opacity: 0
    }

    20% {
        transform: scale3d(1.2, 1.2, 1.2);
        opacity: 1
    }

    100% {
        transform: scale3d(1.4, 1.4, 1.4);
        opacity: 0
    }

}

@keyframes slideAnimationlinear {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }

}

.wrap-content {
    max-width: 1300px;
    margin: auto
}

.listProductNBGrid.wrap-content {
    display: block;
    padding: 60px 13px 60px 13px;
    border-radius: 15px;
    background: #FFF
}

.sliderBox.wrap-content {
    margin: 15px auto;
    border-radius: 10px;
    background: #FFF;
    padding: 15px 17px;
    align-items: center;
    gap: 18px;
    display: grid;
    grid-template-columns: 957px 1fr
}

:root {
    --cl-0:#FFBA00;
    --cl-1:#FFBA00;
    --cl-2:#FFBA00;
    --cl-3:#D0011B;
    --maincolor: #151515;
    --color-social: #272626;
    --color-hover: #2557ae;
    --color-text: #2557ae;
    --color-2:#363533;
    --color-3:#2B2B2B;
    --color-4:#CE1C1C;
    --m1:linear-gradient(90deg, #E9402D 0%, #F8CA36 100%)
}

.wap_between {
    max-width: 1200px;
    margin: auto
}

@font-face {
    font-family: WinnerSans;
    src: url(../fonts/WinnerSans-Bold.otf);
    font-display: swap
}

body {
    font-size: 1rem;
    font-family: 'Roboto', 'WinnerSans', sans-serif;
    overflow-x: hidden;
    background: #F4F4F4;
    color: #2b2b2b
}

.tieuchiGrid {
    visibility: visible;
    margin: 30px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0px;
    align-items: center
}

.max-width {
    width: 100%;
    max-width: 1300px;
    margin: 0px auto
}

.max-width.mw1000 {
    max-width: 1000px;
    margin: 0 auto
}

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

* {
    box-sizing: border-box
}

.langGroup {
    display: flex;
    align-items: center;
    gap: 10px;
}

button.btnLang {
    border: 0;
    outline: 0;
    cursor: pointer;
    background: transparent;
    padding: 0;
    transition: 0.3s;
}

button.btnLang:hover {
    opacity: 0.8;
}

.procart-extension {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
    margin: 1em 0 0;
}

.procart-extension a {
    background: var(--cl-0);
    color: #2b2b2b;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 20px;
    transition: 0.3s;
}

.procart-extension a:hover {
    background: #2b2b2b !important;
    color: #FFF !important;
}

.procart-extension a:nth-child(2) {
    background: #d0011b;
    color: #FFF;
}

ul.bankList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    padding: 0;
    list-style: none;
    margin: 0;
}

ul.bankList li a {
    display: flex;
    align-items: center;
    gap: .5em;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    padding: 1em;
    font-size: 14px;
    color: inherit;
    box-shadow: 0px 3px 5px rgb(0 0 0 / 5%);
    transition: 0.3s;
}

ul.bankList li a:hover {
    background: var(--cl-0);
    font-weight: bold;
}

ul.bankList li a img {
    width: 24px !important;
    order: -1;
}

ul.bankList li {
    min-width: 100%;
    width: 100%;
}

div#quickViewModal .btn-close {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    margin-right: 1em;
    margin-top: 1em;
}

div#quickViewModal .modal-dialog {
    max-width: 1300px;
}

.fotorama__thumb-border {
    border-color: var(--cl-0);
}

span.price-old-pro-detail {
    font-size: 1.65em;
    color: #777;
    text-decoration: line-through;
    margin-left: 10px;
    vertical-align: middle;
}

.contactPlugin {
    position: fixed;
    top: 50%;
    right: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
    transform: translateY(-50%);
    z-index: 9;
}

.contactPlugin a {
    display: block;
    position: relative;
    z-index: 0;
}

.contactPlugin a span {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    color: #FFF;
    background: #d0011b;
    font-size: 12px;
    font-weight: bold;
    padding: 1px;
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 2px #d0011b inset, 0px 0px 0px 3px #FFF inset;
}

.contactPlugin a img {
    display: block;
    width: 100%;
}

.menuDrop ul li .dropdown p {
    margin-bottom: .5em;
    font-weight: bold;
    font-size: 14px;
    color: inherit;
    transition: 0.3s;
}

.menuDrop ul li .dropdown p:hover {
    color: var(--cl-0);
}

.menuDrop ul li .dropdown p.dropdownItemEle {
    font-weight: 400;
}

.menuDrop ul li .dropdown a {
    color: inherit;
}

.menuDrop ul li .dropdown .dropdownCat {
    min-width: 100%;
    width: 100%;
}

.footerMap {
    min-width: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 10px
}

.footerMap iframe {
    height: 164px;
    display: block;
    border: 0;
    outline: 0;
    width: 100%
}

.footer-news:nth-child(5) {
    width: 285px
}

.footer-news {
    visibility: visible
}

.grid3 {
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px
}

.grid3 textarea {
    grid-row: 1 / 3;
    height: 100% !important
}

.grid3 input:nth-child(3) {
    grid-row: 2 / 3;
    grid-column: span 2
}

.grid3 textarea {
    height: auto;
    resize: none
}

.grid3 input, .grid3 textarea {
    min-width: 100%;
    width: 100%;
    height: 45.467px;
    border-radius: 4px;
    background: #FFF;
    border: 0
}

.wrapBaoGiaGridBox h2 span {
    color: var(--Ph, #D0011B)
}

.wrapBaoGiaGridBox h2 {
    color: var(--text-ch-3, #333);
    text-align: center;
    font-family: WinnerSans;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 15px
}

.wrapBaoGiaGridBox {
    max-width: 1030px;
    margin: 0 auto;
    text-align: center
}

.grid2 {
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px
}

.grid2 a {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #F39621;
    color: var(--Trng-nn, #FFF);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px
}

.grid2 button {
    display: flex;
    padding: 17px 46px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--Ph, #D0011B);
    color: var(--Trng-nn, #FFF);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    border: 0
}

.wrapBaoGiaGridBox p {
    margin: 0;
    color: var(--text-ch-3, #333);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 1.5px
}

.wrapBaoGiaGrid {
    background: url(../images/17.png) top right no-repeat;
    background-size: cover;
    padding: 54px 0px;
    margin: 60px 0px
}

.chuyenmucItemEle a picture {
    border-radius: 15px;
    display: block;
    overflow: hidden;
    margin-bottom: 15px
}

.chuyenmucItemEle h3 {
    margin: 0;
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    transition: 0.3s
}

.chuyenmucItemEle:hover h3 {
    color: var(--cl-0)
}

.wrapListProductCol {
    min-width: 100%;
    width: 100%
}

.wrapListProductCol .grid-product {
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.wrapListProduct {
    display: grid;
    grid-template-columns: 412px 1fr;
    gap: 14px
}

.wrapListProduct {
    visibility: visible
}

.productItemEleTool {
    position: relative;
    z-index: 0
}

.product-tool {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.60);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    transition: 0.3s;
    opacity: 0
}

.product-tool:hover {
    opacity: 1
}

.product-tool:hover a {
    transform: unset
}

.product-tool a {
    display: block;
    transition: 0.3s;
    transform: scale(0.5);
    cursor: pointer
}

span.price-old {
    color: #CECECE;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    text-decoration-line: line-through;
    text-transform: capitalize;
    margin-left: 5px
}

span.price-discount {
    display: inline-flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: #F5F5FA;
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase
}

span.price-new {
    color: var(--Ph, #D0011B);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    text-transform: capitalize;
    margin-bottom: 5px;
    display: block
}

p.price-product {
    margin-bottom: 20px;
    min-height: 53px
}

.productItemEle {
    border-radius: 7px;
    border: 1px solid #DFDFDF;
    background: #FFF;
    overflow: hidden
}

.productItemEle section {
    padding: 15px 10px 10px
}

.productItemEle h3 {
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 5px
}

.productItemEle h3 a {
    color: inherit;
    transition: 0.3s;
}

.productItemEle:hover h3 a {
    color: var(--cl-1)
}

.productItemEle:hover .contact-product {
    background: var(--cl-3);
    color: #FFF
}

.productItemEle picture {
    display: block;
    margin: 0;
    overflow: hidden;
    margin-bottom: 0
}

.mHeadingCustom {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mHeadingCustom h2 {
    margin: 0;
    color: var(--Chnh, #FFBA00);
    leading-trim: both;
    text-edge: cap;
    font-family: WinnerSans;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    text-transform: lowercase;
    background: url(../images/14.png) left center no-repeat;
    padding-left: 48px
}

.mHeadingCustom a {
    display: flex;
    padding: 13px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    background: var(--Chnh, #FFBA00);
    color: #000;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: capitalize;
    transition: 0.3s;
}

.mHeadingCustom a:hover {
    background: var(--cl-3);
    color: #FFF
}

.mHeading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-bottom: 30px
}

.mHeading h2:after, .mHeading h2:before {
    content: '';
    width: 71px;
    height: 6px;
    background: url(../images/13.png) center center no-repeat
}

.mHeading h2:before {
    transform: scale(-1)
}

.mHeading h2 {
    margin: 0;
    color: var(--Chnh, #FFBA00);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: WinnerSans;
    font-size: 30px;
    font-style: normal;
    line-height: 25px;
    text-transform: lowercase;
    display: flex;
    gap: 25px;
    align-items: center
}

.tieuchiGridCol {
    min-width: 100%;
    width: 100%;
    background: url(../images/12.png) center center no-repeat;
    background-size: 100% auto;
    height: 99px
}

.tieuchiGridCol {
    display: grid;
    grid-template-columns: 53px 1fr;
    align-items: center;
    gap: 10px;
    padding: 0px 20px
}

.tieuchiGridCol h3 {
    margin: 0;
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize
}

.tieuchiGridCol section {
    min-width: 100%;
    width: 100%;
    padding-left: 15px;
    border-left: 1px dashed var(--Chnh, #FFBA00);
    padding-top: 10px;
    padding-bottom: 10px
}

.sliderBoxEle {
    min-width: 100%;
    width: 100%
}

.hotlineTop {
    display: flex;
    background: url(../images/4.png) left center no-repeat;
    padding-left: 53px;
    flex-direction: column;
    gap: 5px;
    padding-top: 5px;
    padding-bottom: 5px
}

.hotlineTop.cart {
    background-image: url(../images/5.png)
}

.hotlineTop b {
    margin: 0;
    color: var(--Ph, #D0011B);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize
}

.hotlineTop > span {
    display: block;
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

.menuDrop {
    position: relative;
    z-index: 0
}

.menuDrop ul li .dropdown {
    position: absolute;
    top: 0;
    left: 100%;
    width: 750px;
    background: #FFF;
    box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    transition: 0.1s;
    opacity: 0;
    visibility: hidden;
    height: 100%;
}

.menuDrop ul li:hover .dropdown {
    opacity: 1;
    visibility: visible;
}

.menuDrop > ul {
    position: absolute;
    top: 100%;
    width: 200px;
    background: #FFF;
    z-index: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
    left: 0;
    transition: 0.1s;
    opacity: 0;
    visibility: hidden;
}

.menuDrop:hover > ul {
    opacity: 1;
    visibility: visible;
}

.menuDrop > ul > li {
    display: block;
}

.menuDrop > ul > li > a {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    font-size: 14px;
    color: inherit;
    border-bottom: 1px solid #ebebeb;
    transition: 0.3s;
}

.menuDrop > ul > li > a:hover {
    color: var(--cl-0);
}

.menuDrop h2 {
    margin: 0;
    display: flex;
    padding: 14px 20px;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid var(--text-ch-3, #333);
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    cursor: pointer
}

.menuBottom {
    background: var(--Chnh, #FFBA00);
    position: relative;
    z-index: 2;
}

.menuBottom .wrap-content {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.menuTop {
    background: var(--Chnh, #FFBA00)
}

.menuTop ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center
}

.menuTop ul + ul {
    margin-left: auto
}

.menuTop ul li+li:before {
    content: '';
    width: 1px;
    height: 7px;
    background: #333333;
    display: block;
    margin: 0 10px
}

.menuTop ul li a {
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    transition: 0.3s;
}

.menuTop ul li.paynow {
    display: inline-flex;
    padding: 4px 30px 4px 4px;
    align-items: center;
    gap: 10px;
    border-radius: 0px 0px 0px 20px;
    background: var(--Ph, #D0011B);
    margin-left: 19px;
    min-height: 44px
}

.menuTop ul li.paynow a {
    color: var(--Trng-nn, #FFF);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 10px
}

.menuTop ul li.paynow a:hover {
    color: var(--cl-2)
}

.menuTop ul li.paynow:before {
    display: none
}

.menuTop ul li a:hover {
    color: var(--cl-3)
}

.menuTop ul li {
    display: flex;
    align-items: center;
    flex-wrap: nowrap
}

.menuTop .wrap-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 44px;
    flex-shrink: 0
}

.share b {
    font-size: 14px;
    font-weight: 600
}

.tagsOwl {
    margin: 1rem 0;
    font-size: 1rem
}

.tagsOwl b {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px
}

.tagsOwl a {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 7px;
    margin-bottom: 5px;
    background: var(--cl-1);
    padding: 5px 15px;
    color: var(--cl-2);
    font-size: 14px;
    align-items: center;
    gap: 10px
}

.col-lg-3.sticky {
    position: sticky;
    position: -webit-sticky;
    top: 90px;
    z-index: 1
}

.tt-toc {
    display: inline-flex;
    vertical-align: top;
    font-weight: bold;
    color: #000;
    font-size: 15px;
    align-items: center;
    gap: 10px
}

.tt-toc i {
    position: relative;
    top: 1px
}

.box_meta_single_title {
    background-color: var(--cl-2);
    color: #fff;
    text-align: center;
    padding: 10px 10px;
    font-weight: 500
}

.box_meta_single_galleryBottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
    margin: 15px 0 0
}

.box_meta_single_galleryBottom a {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: block
}

.box_meta_single_galleryBottom section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 51%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem
}

.box_meta_single_galleryBottom a section {
    display: none
}

.box_meta_single_galleryBottom a:last-child section {
    display: flex
}

.box_meta_single_galleryBottom strong {
    font-size: 2rem;
    color: #ffba00;
    font-weight: 600
}

.zalo-share-button {
    position: relative;
    z-index: 0
}

.grid-product {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 25px 14px;
    margin-bottom: 1em
}

.grid-product {
    visibility: visible
}

.catProduct_i {
    padding: 0;
    color: var(--tiu, #333);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    z-index: 0;
    margin-left: -1px
}

.catProduct_i a:before {
    background: var(--nhn, #EFEFEF);
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    z-index: 1;
    top: 1px;
    left: 1px;
    content: ''
}

.box_meta_single_title .title {
    color: var(--cl-1);
    font-weight: 400
}

.box_meta_single_content {
    background-color: var(--cl-1);
    color: var(--cl-2);
    display: flex;
    margin-bottom: 30px
}

.box_meta_single_content .item:first-child {
    border-left: 0
}

.box_meta_single_content .item {
    flex: 0 0 20%;
    padding: 10px 3px;
    display: flex;
    align-items: center;
    border-left: 1px solid #f3f3f3
}

.box_meta_single_content .item img {
    width: 45px;
    margin-right: 5px
}

.box_meta_single_content .fw-b {
    letter-spacing: -0.5px;
    font-size: 13px
}

.fw-b {
    font-weight: bold
}

.fs-12 {
    font-size: 12px
}

.catProduct_i a {
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
    background: linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%);
    padding: 14px 10px 9px 10px;
    color: var(--tiu, #333);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.catProduct_i a.active:before {
    =:100%;
    background: #FFF;
    height: 100%
}

.catProduct_i a span {
    position: relative;
    z-index: 2
}

.catProduct {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 40px
}

.catProduct:after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%);
    z-index: -1
}

.wrap-product-nb {
    margin: 60px auto
}

.wrap-product-nb.wrap-content {
    margin: 60px auto;
    padding: 60px 16px;
    border-radius: 15px;
    background: #FFF;
    padding-bottom: 40px
}

.duanGridCol {
    width: 100%;
    min-width: 100%
}

.duanGridCol {
    border-radius: 10px;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 0
}

.duanGridCol section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 181px;
    height: 89px;
    background: url(../images/4.png) 0 0 no-repeat;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    padding-bottom: 5px;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden
}

.duanGridCol:hover section {
    opacity: 1;
    visibility: visible
}

.duanGridCol span {
    text-align: center;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 5px;
    right: 7px;
    z-index: -1
}

.duanGridCol h3 {
    margin: 0;
    color: var(--tiu, #333);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.duanGridCol p {
    margin: 0;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.duanGrid {
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 19px 22px
}

.duanWrap {
    padding: 50px 0px;
    background: #F9F9F9
}

.chuyenmucItem {
    margin: 1rem 0 0
}

.chuyenmucItem a:hover h3 {
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.chuyenmucItem a {
    display: block;
    border-radius: 10px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 10px
}

.chuyenmucItem a picture {
    overflow: hidden;
    border-radius: 10px 10px 0 0
}

.chuyenmucItem a h3 {
    margin: 0;
    color: var(--tiu, #333);
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px
}

.chuyenmucItem a section {
    padding: 15px 30px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 10px 10px
}

.chuyenmucWrap {
    border-radius: 15px;
    background: #FFF;
    padding: 60px 15px 50px 15px;
    margin: 60px auto
}

.wrapCopy .wrap-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4D4D4D;
    text-align: right;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    border-top: 1px solid #E6E6E6;
    padding: 1em 0
}

p.footer-title2 {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px
}

.gioithieuGridColInfo {
    width: 215px;
    height: auto;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    color: var(--tiu, #333);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 1
}

.gioithieuGridColInfo p {
    margin: 0
}

.gioithieuGridColInfo b {
    color: var(--tiu, #333);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 5px;
    display: block
}

.content-text {
    margin: 1rem 0 0
}

.tabs-pro-detail .nav-link {
    color: #FFF;
    background: #2b2b2b;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: var(--cl-0);
    color: #000;
}

span.price-new-pro-detail {
    text-align: center;
    font-size: 1.65em;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    color: var(--cl-3);
}

ul.attr-pro-detail {
    padding: 0;
    margin: 0;
    margin-bottom: 1rem
}

.groupAdd {
    background: url(../images/11.png) top center no-repeat;
    background-size: 100% auto
}

.socialH {
    transform: rotate(-90deg);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.50);
    text-align: center;
    padding-bottom: 8px;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 3rem;
    left: -2rem;
    z-index: -1;
    padding-left: 10px;
    padding-right: 10px
}

.socialH span {
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2.24px;
    text-transform: uppercase;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

ul.vechungtoiList {
    list-style: none;
    margin: 0;
    padding: 0
}

ul.vechungtoiList {
    color: #4D4D4D;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px
}

ul.vechungtoiList li {
    min-width: 100%;
    width: 100%
}

ul.vechungtoiList li a {
    display: block;
    color: inherit
}

ul.vechungtoiList li a:hover {
    color: var(--cl-0)
}

a.chinhanhListMore {
    display: block;
    margin: 1rem 0 0;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.chinhanhListItem {
    min-width: 100%;
    width: 100%;
    cursor: pointer
}

.chinhanhListItem h3 {
    margin: 0;
    min-width: 250px;
    height: 40px;
    flex-shrink: 0;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    color: var(--Tiu, #111);
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    margin: 0
}

.chinhanhListItem section {
    background: #FFF;
    padding: 20px 30px 20px 20px;
    color: var(--Ni-dung, #333);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.chinhanhListItem section p {
    margin: 0
}

.chinhanhList {
    display: grid;
    gap: 30px
}

.chinhanhListItemMap {
    display: none
}

.chinhanhListItemMap.act {
    display: block
}

.chinhanhListItemMap iframe {
    display: block;
    width: 100%;
    height: 600px;
    outline: 0;
    box-shadow: none
}

.chinhanhListMap {
    display: block
}

.chinhanhGroupCol {
    min-width: 100%;
    width: 100%
}

.chinhanhGroup {
    padding: 40px;
    padding-left: 0;
    display: grid;
    grid-template-columns: 730px 1fr;
    gap: 40px;
    align-items: center;
    background: url(../images/17.png) right center no-repeat
}

.chinhanhBox {
    margin: 50px 0px
}

.videoItem a {
    display: block;
    position: relative;
    z-index: 0
}

.videoItem a picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.30) url(../images/12.png) center center no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.videoItem {
    display: block;
    text-align: center
}

.videoItem h3 {
    margin: 0;
    color: var(--Text, #FFF);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 15px
}

.videoBox {
    margin: 50px 0px;
    display: block
}

.albumItem {
    min-width: 100%;
    width: 100%
}

.albumItem a img {
    max-height: 250px;
    width: 100%;
    object-fit: cover
}

.albumItem a {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block
}

.albumItem section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-align: center;
    top: 0;
    left: 0;
    z-index: 1;
    transition: 0.3s;
    opacity: 0
}

.albumItem:hover section {
    opacity: 1;
    visibility: visible
}

.albumItem h3 {
    width: 100%;
    background: linear-gradient(90deg, rgba(184, 0, 0, 0.00) 0%, #B80000 50%, rgba(184, 0, 0, 0.00) 100%);
    margin: 0;
    padding: 1rem
}

.albumItem h3 span {
    color: var(--Text, #FFF);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

.albumItem:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2
}

.albumItem:nth-child(1) a img {
    max-height: unset
}

.albumItem picture {
    display: block
}

.albumOwl {
    margin: 25px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px
}

.consoDescH {
    color: var(--Text, #FFF);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.albumOwlGrid {
    padding: 50px 0px;
    background: url(../images/10.png) top center no-repeat;
    background-size: cover
}

.groupBu {
    display: block
}

.newsletter-button {
    margin: 29px 0 0
}

.validation-newsletter_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin: .5rem 0 0
}

section.sec1 {
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.65);
    padding: 15px;
    text-align: center;
    transition: 0.3s;
    opacity: 1;
    visibility: visible
}

section.sec1 h3 {
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase
}

section.sec2 {
    display: flex;
    background: rgba(0, 0, 0, 0.50);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 2;
    text-align: center;
    color: var(--Text, #FFF);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: 0.3s;
    opacity: 0;
    visibility: hidden
}

section.sec2 p {
    margin: 1rem 0
}

section.sec2 button {
    border: 0;
    outline: 0;
    box-shadow: none;
    width: 110px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    color: var(--Tiu, #111);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

section.sec2 p strong {
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

section.sec2 h3 {
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0
}

.productItem {
    display: block;
    position: relative;
    z-index: 0;
    min-width: 100%;
    width: 100%;
    border-radius: 8px;
    overflow: hidden
}

.productItem section {
    background: linear-gradient(0deg, #000 0%, rgba(102, 102, 102, 0.00) 56.29%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: 0.5s;
    opacity: 0
}

.productItem:hover section {
    opacity: 1
}

.productItem:hover section h3 {
    opacity: 1;
    visibility: visible;
    transform: unset
}

.productItem h3 {
    margin: 0;
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: 0.5s;
    text-shadow: 1px 1px 0px #000;
    transform: scale(0.5);
    opacity: 0;
    visibility: hidden
}

.productItem:hover .sec1 {
    opacity: 0;
    visibility: hidden
}

.productItem:hover .sec2 {
    opacity: 1;
    visibility: visible
}

.productItem a {
    display: block;
    position: relative;
    z-index: 0
}

.productItem picture {
    display: block
}

.tintuc_listGroupBox h2 {
    margin: 0;
    margin-bottom: 29px
}

.tintuc_listGroupBox h2 a {
    color: var(--Text, #FFF);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    display: block;
    position: relative;
    z-index: 0;
    padding: 15px 0px
}

.tintuc_listGroupBox h2 a:before, .tintuc_listGroupBox h2 a:after {
    content: '';
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.tintuc_listGroupBox h2 a:after {
    bottom: 0;
    top: unset
}

.tintuc_listGroupBox {
    min-width: 100%;
    width: 100%
}

.tintuc_listGrid {
    padding: 50px 0px
}

.vanhoaItem.custom a {
    display: grid;
    grid-template-columns: 636px 1fr;
    align-items: center;
    gap: 3rem;
    text-align: left
}

.vanhoaItem.custom a h3 {
    text-align: left;
    margin-bottom: 1rem
}

.vanhoaItem.custom a p {
    text-align: left
}

.vanhoaItem.custom a h3:after {
    display: none
}

.newsHoverListItem a h3 {
    color: #0f2a51;
    margin-bottom: 10px;
    font-size: 1.2rem
}

.newsHoverListItem a:hover h3 {
    color: #d90000
}

.newsHoverListItem a p {
    font-size: 1rem;
    color: #212529;
    margin: 0
}

.newsHoverListItem a {
    display: block;
    padding: 1rem 0;
    border-top: 1px solid #00285A
}

.newsHoverListItem {
    display: block
}

.tintuc_listItem {
    margin: 50px 0px;
    display: block
}

.tintuc_listItem h2 {
    margin: 0;
    font-weight: bold;
    color: #0f2a51;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-size: 2.5rem
}

.tintuc_listItem h2 a {
    color: inherit
}

.tintuc_listGroup {
    display: block
}

.tintuc_listGroup {
    display: grid;
    gap: 50px;
    grid-template-columns: 1fr
}

.flex-news_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

.flex-news_list a {
    display: block;
    color: inherit;
    padding-left: 1rem;
    position: relative;
    z-index: 0;
    font-size: 14px;
    transition: 0.3s;
}

.flex-news_list a:before {
    content: '';
    width: 4px;
    height: 4px;
    position: absolute;
    top: 9px;
    left: 0px;
    z-index: -1;
    background: var(--cl-0);
}

.flex-news_list a:hover {
    color: var(--cl-0)
}

.flex-news_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 21px
}

.flex-news_grid.custom {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin: 2rem 0
}

.policies-footer {
    color: var(--Ni-dung, #333);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px
}

.policies-footer a {
    display: block;
    color: var(--Text, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 10px
}

.policies-footer a:hover {
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.logoPhotoFooterGrid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 50px;
    align-items: center
}

.logoPhotoFooterGrid:before, .logoPhotoFooterGrid:after {
    content: '';
    height: 80px;
    background: url(../images/21.png) left top no-repeat
}

.logoPhotoFooterGrid:before {
    transform: scale(-1);
    background: url(../images/21.png) left top no-repeat;
    url(
    ../images/21.png) right top background: no-repeat
}

.doitacItem {
    min-width: 100%;
    width: 100%
}

.doitacItem a {
    display: block;
    position: relative;
    z-index: 0;
    border-radius: 50%;
    overflow: hidden
}

.doitacOwl {
    display: block
}

.consoHeadingDesc {
    color: var(--Ni-dung, #333);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    max-width: 860px;
    margin: auto
}

.doitacGrid {
    padding: 0;
    border-radius: 15px;
    background: #FFF;
    padding: 5px 0px
}

input.check-btn {
    width: 180px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    color: var(--Tiu, #111);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    border: 0;
    outline: 0;
    box-shadow: none
}

.slogan_dangkyCol:nth-child(1) h2 {
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.slogan_dangkyCol {
    min-width: 100%
}

.slogan_dangkyCol {
    color: var(--tiu, #333);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px
}

.slogan_dangkyGridList {
    display: block
}

.slogan_dangkyGrid {
    padding: 50px 0px;
    background: #FFF;
    background-size: cover
}

.vanhoaItem p {
    margin: 0;
    color: var(--Ni-dung, #999);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px
}

.vanhoaItem a {
    display: block;
    text-align: center
}

.vanhoaItem a h3 {
    color: #2b2b2b;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 5px;
    margin-top: 10px;
    transition: 0.3s;
}

.vanhoaItem a:hover h3 {
    color: var(--cl-0);
}

.vanhoaItem a h3:after {
    content: '';
    width: 30px;
    height: 2px;
    flex-shrink: 0;
    background: #CACACA;
    display: block;
    margin: auto;
    margin-top: 10px
}

.vanhoaGrid {
    margin: 60px 0 0
}

button.owl-prev, button.owl-next {
    width: 16px;
    height: 28px;
    color: transparent;
    background: url(../images/22.png) 0 0 no-repeat !important;
    text-indent: -9999rem;
    position: absolute;
    top: calc(50% - 28px / 2);
    z-index: 1;
    right: 0
}

button.owl-prev {
    background: url(../images/23.png) 0 0 no-repeat !important;
    left: 0;
    right: unset
}

.connguoiItem {
    display: grid;
    grid-template-columns: 430px 1fr;
    align-items: center;
    gap: 0px;
    padding-left: 3rem
}

.connguoiItem h3 {
    color: var(--Ch-o, #0F2A51);
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
    margin-left: 50px
}

.connguoiItem span {
    margin: 0;
    color: var(--Ni-dung, #333);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 50px;
    margin-top: 5px;
    display: block
}

.connguoiItem p {
    margin: 0;
    color: var(--Ni-dung, #333);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    background: #FFF;
    filter: drop-shadow(3px 3px 20px rgba(15, 42, 81, 0.20));
    padding: 46px 70px 46px 70px;
    border-radius: 0 6rem 2rem 0;
    margin-top: 4rem;
    margin-left: -20px;
    z-index: -1;
    position: relative;
    margin-right: 3rem
}

.connguoiItem picture {
    min-width: 100%;
    background: url(../images/17.png) top left no-repeat;
    background-size: 100% 100%;
    padding: 20px
}

.connguoiItem picture img {
    padding: 20px;
    border: 4px solid #606060;
    background: #FFF;
    border-radius: 0 10rem 0 10rem
}

.connguoiHeading.custom {
    color: var(--Ch-o, #0F2A51)
}

.connguoiGrid {
    padding: 50px 0px;
    background: url(../images/16.png) top center no-repeat;
    background-size: cover
}

.consoGridCol {
    min-width: 100%;
    height: 100px;
    background: url(../images/15.png) 0 0 no-repeat;
    background-size: 100% 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.consoGridCol h3 {
    margin: 0;
    color: #FFF;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 0
}

.consoGridCol p {
    margin: 0;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.consoHeading {
    color: var(--tiu, #333);
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 1rem
}

.consoHeading h1 {
    font-weight: inherit;
    font-size: inherit;
    text-transform: capitalize
}

.consoHeading h2 {
    font-weight: inherit;
    font-size: inherit
}

.consoHeading.custom {
    background: var(--Ph, linear-gradient(90deg, #C7830F 0%, #FBE2B0 50.48%, #C7830F 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px
}

.consoHeading.slogan_doanhnghiep.custom {
    margin-bottom: 15px
}

.consoGridList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 27px;
    align-items: center
}

.consoGrid {
    padding: 50px 0px;
    background: url(../images/14.png) top center no-repeat;
    background-size: cover
}

.gioithieuGridColContent {
    color: var(--tiu, #333);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    margin-bottom: 2rem
}

h2.gioithieuGridColHeading {
    margin: 0;
    color: var(--tiu, #333);
    font-size: 37px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 7px
}

h2.gioithieuGridColHeading span {
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.gioithieuGridCol {
    min-width: 100%;
    width: 100%
}

.gioithieuGridCol.custom {
    position: relative;
    z-index: 0
}

.gioithieuGridRow {
    display: grid;
    grid-template-columns: 578px 1fr;
    gap: 70px;
    align-items: flex-start
}

.gioithieuGrid {
    padding: 50px 0px;
    background: #F9F9F9
}

.social {
    display: flex;
    align-items: center;
    gap: 10px
}

.menuTopGroup {
    height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px
}

.menuTopGroup p {
    margin: 0;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.menuTopGroup p:nth-child(3) {
    margin-left: auto
}

.menuTopGroup p i {
    margin-right: 5px
}

a {
    text-decoration: none
}

a.contact-product {
    display: block;
    padding: 10px 64px;
    align-items: center;
    gap: 6px;
    border-radius: 5px;
    background: #F4F4F4;
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transition: 0.3s;
}

a.listProductNBGridCol {
    text-align: center;
    margin-right: 16px;
    display: block;
    margin-bottom: 16px;
}

a.listProductNBGridCol:hover h2 {
    color: var(--cl-2)
}

a.listProductNBGridCol h2 {
    margin: 0;
    text-align: center;
    color: var(--text-ch-3, #333);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    margin: 15px 0 0;
    transition: 0.3s
}

a.listProductNBGridCol picture {
    border-radius: 15px;
    overflow: hidden;
    display: block
}

a.d-block.quangcaoOwlItem {
    display: block;
    border-radius: 10px;
    overflow: hidden
}

a.d-block.quangcaoOwlItem img {
    min-height: 488px;
    width: 100%;
    object-fit: cover
}

a.text-dark {
    color: #FFF !important;
}

a.logo-desktop {
    display: flex;
    justify-content: center;
    align-items: center
}

a.slideshow-image {
    display: block;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 10px
}

a.slideshow-image section {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

a.slideshow-image h3 {
    color: var(--Text, #FFF);
    text-align: center;
    font-size: 90px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase
}

a.slideshow-image p {
    color: var(--Text, #FFF);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 2rem
}

a.slideshow-image button {
    width: 160px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--Ch-o, #FFC300);
    color: var(--Tiu, #111);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    text-transform: uppercase;
    border: 0;
    outline: 0;
    box-shadow: none
}

a.banner-header {
    display: block;
    width: 100%;
    position: relative;
    z-index: 0
}

a.gioithieuGridColImage {
    display: block;
    position: relative;
    z-index: 0
}

a.gioithieuGridColImage:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 20%) url(../images/9.png) center center no-repeat;
    transition: 0.3s
}

a.gioithieuGridColMore {
    width: 176px;
    height: 54px;
    flex-shrink: 0;
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0
}

a.gioithieuGridColMore.duan {
    width: 225px;
    margin: auto
}

a.gioithieuGridColMore:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: #F9F9F9;
    z-index: -1
}

a.gioithieuGridColMore span {
    text-align: justify;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

a.gioithieuGridColMore:hover:before {
    opacity: 0
}

a.gioithieuGridColMore:hover span {
    color: #FFF;
    background: transparent;
    -webkit-text-fill-color: unset
}

a.logo-header {
    position: relative;
    z-index: 1;
    margin-top: -4rem;
    margin-left: 8rem;
    margin-right: 10rem
}

.menu.menu-fix a.logo-header {
    margin-top: 0
}

.social-plugin {
    display: flex;
    margin-top: 10px
}

.social-plugin.custom {
    align-items: center;
    gap: 2px
}

.scale-img img {
    transform: scale(1, 1);
    display: block
}

.scale-img:hover > img {
    transform: scale(1.1, 1.1)
}

.hover-img {
    position: relative;
    overflow: hidden;
    display: block
}

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

.p-relative {
    position: relative
}

.transition, .btn-frame .kenit-alo-circle-fill, .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, .support-online .kenit-alo-circle-fill {
    transition: 0.3s all
}

.header {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    transition: 1s ease
}

.header2 {
    position: relative;
    background: rgba(0, 0, 0, 0.6)
}

.cart-head {
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    color: #fff
}

.cart-head:hover {
    color: #fed402
}

.cart-head i {
    font-size: 20px
}

.cart-head .count-cart {
    position: absolute;
    z-index: 999;
    color: #fff;
    background: #f00;
    border-radius: 50%;
    top: -10px;
    right: 20px;
    width: 20px;
    height: 20px;
    text-align: center
}

.menu-head {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center
}

.menu-head a {
    color: #fff
}

.menu-head a:hover {
    color: #fed402
}

.line-head {
    background-color: #72b2fd;
    height: 32px;
    width: 1px
}

.slideshow {
    position: relative;
    z-index: 0;
    margin-top: 0
}

.search {
    display: flex;
    height: 44px;
    padding: 4px 4px 4px 20px;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #F5F5F5;
    width: 30%
}

.search > .d-flex {
    width: 100%;
    height: 100%
}

.search p {
    min-width: 37px;
    height: 36px;
    background: var(--cl-3);
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    margin: 0
}

.search input {
    width: calc(100% - 37px);
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    height: 100%
}

.search input::-webkit-input-placeholder {
    color: var(--text-ch-3, #333)
}

.search input:-moz-placeholder {
    color: var(--text-ch-3, #333)
}

.search input::-moz-placeholder {
    color: var(--text-ch-3, #333)
}

.search input:-ms-input-placeholder {
    color: var(--text-ch-3, #333)
}

.ds-item-search {
    width: calc(100% - 70px)
}

.ds-item-search a {
    font-size: 14px;
    color: #333
}

.show-search {
    position: absolute;
    z-index: 9999;
    top: 100%;
    background: #fff;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3)
}

.box-search .price-product {
    width: 100%;
    margin: 0px;
    text-align: left
}

.box-search .price-product .price-new {
    color: #f00;
    font-size: 14px;
    font-weight: bold
}

.box-search .price-product .price-old {
    color: #999;
    text-decoration-line: line-through
}

.fix_menu {
    position: fixed !important;
    box-shadow: 0 0 1px #999;
    background: #fff
}

.menu {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999
}

.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: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: auto;
    gap: 2rem
}

.menu ul {
    width: 100%;
    padding: 0;
    margin: auto;
    list-style: none
}

.menu ul li {
    position: relative;
    z-index: 1;
    margin: 0
}

.menu ul li.line {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    margin: 0;
    background: #FFF;
    border-radius: 50%
}

.menu ul li.li-sp {
}

.menu ul li.li-sp>a {
    background: #fff url(../images/icmn.png)left 32px center no-repeat;
    color: var(--color-3);
    padding-left: 60px;
    border-radius: 5px
}

.menu ul li.li-home {
    margin-left: 0
}

.menu ul li.li-contact {
    margin-right: 0
}

.menu ul li .li-tim a {
    min-width: 32px;
    justify-content: center;
    cursor: pointer;
    color: var(--maincolor);
    padding: 0;
    height: 32px;
    line-height: 27px;
    text-align: center
}

.menu ul li .li-tim a i {
    font-weight: 400;
    font-size: 16px
}

.menu ul li a {
    display: block;
    color: var(--tiu, #333);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.menu ul li a p {
    margin-bottom: 0 !important
}

.menu ul li:hover > a, .menu ul li a.active {
    background: var(--ch-o, linear-gradient(270deg, #87590B 0%, #E7CD77 49.4%, #87590B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.menu ul li a.active {
    border-bottom: none
}

.menu ul li:hover > a.has-child::after, .menu ul li a.has-child.active::after {
    border-color: #fff
}

.menu ul li.menu-line {
    width: 2px;
    height: 16px;
    background: url(../images/line.png) no-repeat;
    margin: 0
}

.menu ul li a.has-child {
    padding-right: 16px;
    margin-right: 16px
}

.menu ul li a.has-child:after {
    content: "";
    position: absolute;
    bottom: calc(50% - 1px / 2);
    right: 15px;
    width: 5px;
    height: 5px;
    border: 1px solid #fff;
    border-top: 0;
    border-left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.menu ul li ul {
    position: absolute;
    min-width: 250px;
    margin-top: 0;
    background: #FFF;
    -webkit-box-shadow: 1px 1px 15px #00000026;
    box-shadow: 1px 1px 15px #00000026;
    -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
}

.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 {
    margin: 0;
    background: transparent
}

.menu ul li ul li a {
    font-size: 15px;
    color: #000;
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
    text-transform: capitalize;
    border-radius: 0;
    transition: 0.8s ease;
    text-align: left
}

.menu ul li ul li:last-child a {
    padding-bottom: 10px
}

.menu ul li ul li a.has-child {
    margin-right: 0
}

.menu ul li ul li a.has-child:after {
    border-color: #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.menu ul li ul li a.active, .menu ul li ul li:hover > a {
    color: #000;
    transition: 0.8s ease
}

.menu ul li ul li:last-child > a {
    border-bottom: 0
}

.menu ul li ul li ul {
    left: 100%;
    top: 0
}

.menu_mobi, .menu_mobi_add {
    display: none
}

a.cart-header {
    position: relative;
    background: url(../images/icxe.png)left center no-repeat;
    color: #1A1A1A;
    font-weight: 500;
    padding: 10px 0px 10px 50px;
    width: 96px;
    font-size: 14px
}

a.cart-header span {
    position: absolute;
    top: 8px;
    left: 26px;
    color: #1a1a1a;
    font-size: 14px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: var(--m1)
}

.control-owl {
    position: absolute;
    width: 100%;
    z-index: 2;
    left: 0px;
    top: calc(50% - 22.5px)
}

.control-owl button {
    opacity: 0.5;
    top: 0px;
    position: absolute;
    outline: none;
    border: 2px solid #fff;
    padding: 0px;
    margin: 0px;
    display: block;
    cursor: pointer;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    font-size: 25px;
    margin: 0px;
    background-color: #00a3ff;
    display: flex;
    align-items: center;
    justify-content: center
}

.control-owl button:hover {
    opacity: 1
}

.control-owl button.owl-prev {
    left: 20px
}

.control-owl button.owl-next {
    right: 20px
}

.box-photo-ct {
    border-radius: 20px;
    overflow: hidden
}

.title-detail {
    position: relative;
    margin: 20px 0px
}

.title-detail h1 {
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 1rem
}

.title-main {
    margin-bottom: 1.5rem;
    position: relative
}

.title-main span, .title-main h1, .title-main h2 {
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    text-transform: capitalize
}

.tt-week {
    font-size: 25px;
    text-align: center;
    margin: 20px 0px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase
}

.title-cat-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0px;
    gap: 20px
}

.title-cat-main span {
    display: block;
    color: #999;
    background: linear-gradient(64.85deg, #fca600 23.67%, #ffd41d 106.12%);
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer
}

.title-cat-main span:hover, .title-cat-main span.active {
    background: linear-gradient(64.85deg, #ffd41d 23.67%, #fca600 106.12%);
    color: #000
}

.box-readmore {
    padding: 15px;
    border: 0;
    margin-bottom: 2rem;
    border-radius: 0;
    background-color: var(--cl-1)
}

.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;
    font-size: 13px;
    color: #FFF;
    display: none
}

.box-readmore ul li {
    display: table;
    counter-increment: item;
    margin-bottom: 5px
}

.box-readmore ul li:before {
    content: counters(item, '.') '. ';
    display: table-cell;
    padding-right: 5px
}

.box-readmore ul li a {
    color: #FFF;
    cursor: pointer
}

.box-readmore ul li a:hover {
    color: #3175e4 !important
}

.box-readmore ul li:hover > a {
    color: #3175e4 !important;
    1px dotted !important: dotted;
    border-bottom: 1px dotted !important
}

.box-readmore ul li:hover {
    color: #3175e4 !important
}

.info-partner {
    background: #f8f8f8;
    padding: 15px 0px
}

.info-footer .flex-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.info-footer .flex-footer .box-footer .social-footer {
    display: flex;
    gap: 5px;
    margin: 10px 0px
}

.info-footer .flex-footer .box-footer:nth-child(1) {
    width: 33.3%
}

.info-footer .flex-footer .box-footer:nth-child(2) {
    width: 40%
}

.info-footer .flex-footer .box-footer:nth-child(3) {
    width: 25%
}

.info-footer .flex-footer .title-footer {
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 14px
}

.info-footer .flex-footer .service-footer {
    margin-top: 20px
}

.info-footer .flex-footer .service-footer ul {
    padding: 0px;
    margin: 0px
}

.info-footer .flex-footer .service-footer ul li {
    list-style: none;
    padding: 5px 0px
}

.info-footer a {
    color: #fff
}

.title-tags {
    position: relative;
    font-size: 1em;
    font-weight: 600;
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: #777
}

.title-tags:after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.1);
    display: block;
    height: 3px;
    width: 30px
}

.flex-tags {
    display: flex;
    gap: 5px
}

.flex-tags a {
    color: #333;
    border: 1px solid;
    border-radius: 3px;
    display: inline-block;
    font-size: 0.8em !important;
    opacity: 0.8;
    padding: 2px 5px
}

.flex-tags a:hover {
    background-color: #446084;
    border-color: #446084;
    color: #fff;
    opacity: 1
}

.footer-powered {
    padding: 16px 10px;
    background: var(--color-4);
    border-top: 1px solid #fff
}

.sort-select {
    display: flex;
    justify-content: end;
    margin: 20px 0px;
    position: relative
}

.sort-select .click-sort {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 10px 6px 8px;
    margin: 0px
}

.sort-select-main {
    display: grid;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
    position: absolute;
    padding: 0 7px;
    top: 30px;
    right: 0;
    width: 160px;
    z-index: 2
}

.sort-select-main p {
    border-bottom: 1px solid #f1f1f1;
    margin: 0px;
    order: 2
}

.sort-select-main p:has(.check) {
    order: 1
}

.sort a {
    color: #000;
    font-size: 14px;
    line-height: 17px;
    padding: 11px 3px;
    display: block;
    cursor: pointer
}

.sort a.check i {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 16px;
    border: 2px solid transparent;
    border-radius: 100px;
    vertical-align: middle
}

.sort a.check i::after {
    content: '';
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 3px;
    top: -4px;
    width: 6px;
    height: 10px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    transform-origin: bottom left;
    transform: rotate(45deg)
}

.sort-select .sort-show {
    padding-right: 12px;
    position: relative
}

.sort-select .sort-show::before {
    content: '';
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #333;
    content: '';
    height: 0;
    position: absolute;
    top: 6px;
    right: 0;
    width: 0
}

.modal-detail::-webkit-scrollbar {
    width: 10px
}

.modal-detail::-webkit-scrollbar-thumb {
    width: 10px;
    background: #4d90e0;
    border-radius: 10px;
    height: 50px
}

.modal-detail {
    position: fixed;
    z-index: 999;
    background: #000000c4;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow-y: scroll
}

.content-modal-detail {
    background: #fff;
    max-width: 1200px;
    margin: 0px auto;
    min-height: 100vh
}

.content-modal-detail .tabs {
    display: flex;
    cursor: pointer;
    padding: 0;
    list-style: none;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0px;
    background: #fff;
    z-index: 99
}

.content-modal-detail .tabs li {
    padding: 20px 20px;
    margin-right: 5px;
    font-weight: bold;
    position: relative;
    border-bottom: 4px solid #fff
}

.content-modal-detail .tabs li.active {
    color: #2d9cdb;
    border-bottom: 4px solid #2d9cdb
}

.content-modal-detail .tab-content {
    padding: 20px;
    max-width: 900px;
    margin: 0px auto
}

.content-modal-detail .tab-content.active {
    display: block
}

.close-tab {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 10
}

.btn-closemenu {
    position: fixed;
    top: 10px;
    right: 20px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    line-height: 21px;
    padding: 7px;
    text-align: right;
    width: 72px
}

.btn-closemenu::before {
    transform: rotate(45deg)
}

.btn-closemenu::after {
    transform: rotate(-45deg)
}

.btn-closemenu::before, .btn-closemenu::after {
    background-color: #333;
    content: '';
    left: 13px;
    height: 14px;
    position: absolute;
    top: 10px;
    width: 1px
}

.cursor-pointer {
    cursor: pointer
}

.wrap-ti {
    padding: 20px 0px
}

.box-ti {
    background: #f1f1f1;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    min-height: 135px
}

.wrap-ti .owl-item:nth-child(n + 1) .box-ti {
    background-color: rgb(220, 238, 255)
}

.wrap-ti .owl-item:nth-child(n + 2) .box-ti {
    background-color: rgb(254, 245, 207)
}

.wrap-ti .owl-item:nth-child(n + 3) .box-ti {
    background-color: rgb(255, 239, 219)
}

.wrap-ti .owl-item:nth-child(n + 4) .box-ti {
    background-color: rgb(225, 254, 207)
}

.ds-ti {
    width: calc(100% - 45px)
}

.ds-ti h3 {
    font-size: 15px
}

.ds-ti h3 a {
    color: #333
}

.ds-ti h3 a:hover {
    color: #f00
}

.contact-map {
    position: relative;
    height: 500px;
    margin-top: 30px
}

.contact-map iframe {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%
}

.breadCrumbs {
    padding: 10px 0px;
    background: transparent
}

.breadCrumbs ol {
    margin: 0px
}

.breadCrumbs ol li a {
    color: inherit;
    transition: 0.3s;
}

.breadCrumbs ol li a:hover {
    color: var(--cl-0)
}

.wrap-xh {
    background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
    padding: 10px;
    border-radius: 10px
}

.title-xh {
    font-size: 25px;
    margin: 20px 0px;
    color: #333;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase
}

.image-xh {
    border-radius: 10px;
    overflow: hidden
}

.name-xh {
    text-align: center;
    color: #333;
    font-size: 16px;
    margin: 10px 0px 0px
}

.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
}

.grecaptcha-badge {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    visibility: hidden !important;
    overflow: hidden
}

[x-cloak] {
    display: none !important
}

.scale-img {
    overflow: hidden;
    display: inline-block
}

picture {
    display: block;
    position: relative;
    z-index: 0;
    display: block
}

.sp_flex {
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap
}

.sp_flex .product {
    width: calc(100%/4 - 20px);
    margin: 0 10px 20px
}

.tintuc {
    width: calc(100%/3 - 20px)
}

.tintuc-slick {
    margin: 0 -10px
}

.box-cp1 {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    gap: 10px;
    flex-wrap: wrap
}

.cp1 {
    background: transparent;
    color: #000;
    padding: 4px 17px;
    font-size: 17px;
    border-radius: 100px;
    border: 1px solid lightskyblue;
    cursor: pointer
}

.cp1.active, .cp1:hover {
    color: #fff;
    background: lightskyblue
}

.title {
    text-align: center
}

.btn-frame {
    display: block;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    z-index: 10;
    cursor: pointer
}

.btn-frame i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #1182fc;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.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;
    border-radius: 100%;
    border: 2px solid rgba(7, 41, 103, 0.8);
    opacity: 0.1;
    border-color: #1182fc;
    opacity: 0.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;
    border-radius: 100%;
    border: 2px solid transparent;
    background-color: rgba(7, 41, 103, 0.35);
    opacity: 0.4
}

.btn-frame .pulse {
    animation-name: pulse
}

.hidden-seoh {
    visibility: hidden;
    height: 0px;
    margin: 0px;
    overflow: hidden
}

.thongtin-mb {
    padding: 0 20px;
    margin-top: 20px
}

.thongtin-mb i {
    color: var(--maincolor);
    margin-right: 10px
}

.thongtin-mb span {
    color: #000
}

.load-menu .search {
    display: none
}

.ml-auto {
    margin-left: auto !important
}

.footer {
    background: #FFF;
    background-size: cover
}

.footer-article .wrap-content {
    position: relative;
    padding: 50px 0px
}

.wap_footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #fff
}

.footer-news:nth-child(1) {
    width: 263px
}

.footer-news:nth-child(2) {
    width: 185px
}

.footer-news:nth-child(3) {
    width: 215px;
    text-align: left
}

.footer-news:nth-child(4) {
    width: 90px;
    position: relative;
    z-index: 0;
    text-align: left
}

.footer-title {
    color: var(--text-ch-3, #333);
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    margin-bottom: 1em
}

.footer-info {
    color: #4D4D4D;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px
}

.footer-info p {
    margin: 0 0 10px 0px
}

.footer-policy li {
    margin-bottom: 5px;
    list-style: none
}

.footer-policy a {
    color: #fff;
    font-size: 15px
}

.footer-policy a::before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.footer-policy a:hover {
    color: var(--maincolor)
}

.footer-policy a:hover::before {
    background-color: #fff600
}

.fb-page {
    border-radius: 0
}

.fb-page.fb_iframe_widget {
    overflow: hidden;
    border-radius: 20px;
    background: var(--trng, #FFF)
}

.fb-page iframe {
    border-radius: 0;
    width: 100% !important
}

.grid-pro-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.left-pro-detail {
    width: calc(40% - 20px);
}

.right-pro-detail {
    width: 60%;
}

.product {
    width: calc(100%/4 - 20px);
    margin: 10px 10px;
    position: relative;
    text-align: center
}

.pic-product a {
    display: block;
    border-radius: 10px
}

.name-product {
    margin-top: 12px;
    margin-bottom: 3px
}

.name-product a {
    font-size: 20px;
    color: var(--color-3);
    font-weight: 500;
    text-transform: capitalize;
    line-height: normal
}

.product:hover .name-product a {
    transition: 0.5s ease;
    color: var(--maincolor)
}

.product .price-product {
    margin-bottom: 5px;
    color: #555;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.product .price-new {
    text-align: center;
    color: var(--maincolor);
    font-size: 20px;
    font-weight: 600
}

.product .price-new b {
    color: var(--color-3);
    font-weight: normal;
    font-size: 15px
}

.product .price-old {
    padding: 0 10px;
    font-size: 13px;
    text-decoration: line-through;
    display: block;
    color: #808080
}

.product .price-per {
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--maincolor);
    background-size: 100%;
    width: 40px;
    height: 21px;
    line-height: 21px;
    border-radius: 5px
}

.flex-product {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 25px 14px;
    margin-bottom: 1em;
}

ul.footer-policy {
    padding: unset;
    margin-bottom: unset;
    list-style: inside
}

.page-item.active .page-link {
    background: var(--cl-0);
    border-color: transparent
}

.page-link {
    color: inherit;
    cursor: pointer;
    font-weight: 400
}

.hotline-header {
    background: url(../images/dt.png) no-repeat;
    background-position: left center;
    padding: 1px 0;
    padding-left: 28px;
    font-size: 15px;
    width: 46%
}

.header-top {
    background: var(--maincolor);
    color: #fff;
    padding: 10px 0
}

.hotline-header p {
    color: var(--m1);
    margin-bottom: unset
}

.hotline-header span {
    font-weight: 700;
    color: var(--maincolor)
}

div#footer-map iframe {
    width: 100%;
    height: 100%;
    display: block;
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important
}

.flex-news {
    display: flex;
    flex-wrap: wrap
}

.item_tt {
    width: calc(100%/3 - 20px);
    margin: 0 10px 20px
}

input:focus {
    box-shadow: unset !important
}

.hidden {
    display: none
}

.newsHome {
    position: relative;
    display: block;
    margin: 10px 10px;
    transition: 1s ease;
    width: calc(100%/3 - 20px)
}

.pic-newsHome {
    margin-bottom: 15px;
    display: block;
    border-radius: 10px
}

.info-newsHome {
}

.time-newsHome {
    color: #4F4F4F;
    font-size: 12px;
    margin-bottom: 5px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 47px;
    padding: 14px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--maincolor);
    display: none
}

.name-newsHome {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-3);
    margin-bottom: 6px;
    line-height: normal;
    -webkit-line-clamp: 2;
    text-transform: capitalize
}

.newsHome:hover .name-newsHome {
    transition: 0.5s ease;
    color: var(--maincolor)
}

.desc-newsHome {
    color: #333;
    line-height: 22px;
    margin-bottom: 2px;
    font-size: 14px;
    -webkit-line-clamp: 3;
    font-weight: 300;
    text-transform: capitalize
}

.grid-news {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px
}

.newsletter-form {
    align-items: center
}

.w-newsletter {
    width: 70%;
    display: flex;
    flex-wrap: wrap
}

.newsletter-input {
    margin-bottom: 0;
    min-width: 100%;
    width: 100%
}

.newsletter-input .invalid-feedback {
    text-align: left
}

.newsletter-input input {
    height: 50px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #FFF;
    color: var(--Ni-dung, #333);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 10px 15px;
    border: 0;
    outline: 0;
    box-shadow: none
}

.newsletter-btn {
    width: 100%;
    margin-top: 10px;
    text-align: center
}

.newsletter-input input::placeholder, .newsletter-input textarea::placeholder {
    color: var(--Ni-dung, #333)
}

.newsletter-input textarea {
    height: 75px
}

.newsletter-btn input {
    width: 140px;
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
    height: 50px;
    padding-right: 32px;
    border-radius: 8px;
    background: var(--maincolor) url(../images/mt.png)right 14px center no-repeat;
    border: 1px solid var(--maincolor);
    color: #ffff
}

.newsletter-btn input:hover {
    background-color: var(--color-4);
    color: #fff;
    border-color: var(--color-4)
}

.ul-social-footer {
    list-style: none;
    gap: 15px;
    justify-content: center
}

.ul-social-footer a {
    display: inline-block;
    margin-top: 0;
    transition: 0.7s ease
}

.ul-social-footer a:hover {
    transition: 0.7s ease;
    transform: rotateY(180deg)
}

.wap_copy {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.statistic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px
}

.item-news {
    position: relative;
    width: calc(100%/3 - 20px);
    margin: 10px 10px;
    text-align: center
}

.ds-news h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-3)
}

.item-news:hover .ds-news h3 {
    transition: 0.5s;
    color: var(--maincolor)
}

.menu-fix {
    position: fixed !important;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
    transition: 1s ease;
    animation: slideInDown 1s ease
}

.menu-fix .logo-header img {
    transition: 0.7s ease;
    max-width: 60px
}

.logo-header img {
    transition: 0.7s ease
}

#footer-map {
    width: 100%;
    height: 240px;
    overflow: hidden
}

.lang-head a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    margin-left: 20px
}

.lang-head a:first-child {
    margin-left: 0
}

.lang-head a::after {
    content: '';
    position: absolute;
    left: -10px;
    height: 15px;
    background: #ffff;
    width: 1px;
    top: 5px;
    opacity: 0.3
}

.lang-head a:first-child::after {
    display: none
}

.lang-head a:hover {
    transition: 0.5s;
    color: var(--maincolor)
}

.wrap-aboutHome {
    position: relative;
    background: url(../images/v1.png)center top no-repeat, url(../images/bg2.png)bottom right no-repeat, url(../images/bg3.png)top 9% left 23% no-repeat;
    background-size: 100% 75%, auto, auto;
    overflow: hidden
}

.wap-aboutHome {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1366px;
    margin: auto;
    padding: 120px 0 80px;
    padding-right: calc(50% - 600px)
}

.left-aboutHome {
    width: 30%;
    position: relative;
    padding-top: 84px
}

.center-aboutHome {
    width: 39%
}

.right-aboutHome {
    width: 25%;
    position: relative;
    padding-top: 45px
}

.pic-aboutHome {
    overflow: hidden;
    position: relative;
    z-index: 2;
    display: table;
    border-radius: 50vw 50vw 0 50vw;
    margin: 55px 25px 0 auto
}

.pic2-aboutHome {
    border-radius: 50vw
}

.pic3-aboutHome {
    border-radius: 0 50vw 50vw;
    display: table;
    margin-left: auto
}

.aboutHome-info {
    position: relative;
    z-index: 3;
    display: block
}

.since {
    letter-spacing: 5px;
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 300;
    padding-left: 43px;
    padding-bottom: 10px
}

.title-aboutHome {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--maincolor);
    font-size: 150px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: transparent;
    line-height: 1;
    margin-bottom: 0
}

.desc-aboutHome {
    color: var(--color-3);
    line-height: 25px
}

.desc2-aboutHome {
}

.title-about-1 {
    color: #141414;
    font-size: 120px;
    font-style: normal;
    text-transform: capitalize;
    line-height: 1;
    margin-left: -40%;
    margin-bottom: -45px
}

.title-about-2 {
    font-size: 100px;
    color: var(--maincolor);
    line-height: 1
}

.view-about {
    font-size: 15px;
    font-weight: 500;
    color: #484340;
    padding: 18px 40px;
    display: inline-block;
    margin-top: 20px;
    text-transform: uppercase;
    border-radius: 5px;
    background: url(../images/xt.png)center no-repeat;
    background-size: 100% 100%
}

.view-about:hover {
    transition: 0.5s ease;
    color: var(--color-4)
}

.view-about:hover svg path {
    fill: var(--maincolor)
}

.header-bottom {
}

.header-bottom .wrap-content {
    padding: 8px 0
}

.header-bottom .menu .wrap-content {
    padding: 0
}

.header-top .wrap-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.left-header-top {
    width: 45%
}

.box-info-top {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 500;
    overflow: hidden
}

.box-info-top p {
    margin-bottom: 0;
    animation: slideAnimationlinear 8s linear infinite;
    white-space: nowrap
}

.hotline-top {
    font-size: 14px;
    color: var(--color-3) !important;
    max-width: 16%;
    background: url(../images/ICTIME.png)left center no-repeat;
    padding-left: 48px
}

.hotline-top p {
    margin-bottom: 0
}

.hotline-top-2 {
    background-image: url(../images/ICHOTLINE.png);
    padding-left: 40px
}

.hotline-top-2 span {
    font-size: 18px;
    font-weight: 700;
    background: var(--m1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.title-main-index h2 {
    color: var(--maincolor);
    text-align: center;
    font-size: 55px;
    text-transform: capitalize;
    margin-bottom: 25px;
    background: url(../images/d1.png)center top no-repeat;
    background-size: auto 74px;
    padding-top: 90px
}

.pic-aboutHome:nth-child(3) {
    margin-top: -205px;
    margin-right: 0
}

.menu {
    display: none;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 0;
    background: #FFF
}

.menu.menu-fix {
    height: auto;
    =:1rem 0
}

.menu.menu-fix .menuTop {
    display: none
}

.menu.inside {
    position: unset
}

.menu.inside.menu-fix {
    position: fixed
}

.menu_mobi_all {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    margin: auto;
    background: #FFF;
    display: none
}

.hidden_mobi, #arcontactus, #messages-facebook, .quick_contact {
    display: none
}

.hidden_destop {
    display: block
}

.menu_baophu {
    background: #000;
    opacity: 0.8;
    z-index: 998;
    left: 0px;
    top: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    display: none
}

.icon_menu_mobi {
    color: #FFF;
    font-size: 1rem;
    text-decoration: none;
    width: auto;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: bold
}

.icon_menu_mobi i {
    display: block
}

a.home_mobi {
    color: #000;
    text-decoration: none;
    float: right;
    font-size: 20px
}

.logo-mobi {
    display: block;
    text-align: center;
    padding: 10px 0px;
    position: relative;
    left: 0.5rem;
}

a.phone_mobi {
    color: #fff;
    text-decoration: none;
    float: left;
    font-size: 18px
}

a.phone_mobi i {
    margin-right: 12px;
    -webkit-animation: my 700ms infinite;
    -moz-animation: my 700ms infinite;
    -o-animation: my 700ms infinite;
    animation: my 700ms infinite
}

.menu_mobi {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    padding: 0px 10px;
    width: 100%;
    cursor: pointer;
    display: flex;
    height: 100%;
    cursor: pointer;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1007;
    background: #fff;
    align-items: center;
    justify-content: space-between
}

.menu_mobi_add {
    display: grid;
    position: fixed;
    left: -100%;
    top: 0;
    background: #fff;
    z-index: 9999999;
    color: #fff;
    height: 100vh;
    overflow: auto;
    line-height: 1.5;
    padding-top: 35px;
    padding-bottom: 20px;
    width: 85%;
    min-width: 140px;
    max-width: 440px;
    box-shadow: inset -4px 0px 8px rgba(0, 0, 0, 0.3);
    transition: 0.5s
}

.menu_mobi_active {
    left: 0;
    transition: 0.5s;
    overflow-x: hidden
}

.menu_mobi_add ul {
    list-style: none;
    padding: 0;
    margin-bottom: unset
}

.menu_mobi_add ul li.li-tim, .menu_mobi_add ul li.li-search {
    display: none
}

.menu_mobi_add ul li h2 {
    font-size: 17px;
    margin-bottom: 0
}

.menu_mobi_add ul li b {
    display: inline-block;
    vertical-align: top;
    margin-right: 8px
}

.menu_mobi_add ul li b img {
    display: inline-block;
    vertical-align: top
}

.menu_mobi_add ul li a {
    text-decoration: none;
    color: #191919;
    display: block;
    border-bottom: 1px solid rgb(132 132 132 / 20%);
    padding: 10px 40px 10px 0;
    margin-left: 20px;
    position: relative;
    text-transform: uppercase;
    font-size: 1rem
}

.menu_mobi_add ul li a.active2 {
    color: var(--maincolor)
}

.menu_mobi_add ul li a i {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    text-align: center;
    padding-top: 13px;
    transform: rotate(90deg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.menu_mobi_add ul li a.active2 i {
    transform: rotate(0deg);
    border-left: 1px solid rgba(255, 255, 255, 0.2)
}

.menu_mobi_add ul ul {
    display: none;
    padding-left: 0
}

.menu_mobi_add ul li ul li a {
    padding-left: 20px;
    color: #6f6f6f
}

.menu_mobi_add ul li ul li ul li a {
    padding-left: 40px
}

.close_menu {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1rem;
    width: auto;
    text-align: center;
    line-height: normal;
    cursor: pointer;
    color: var(--maincolor);
    padding: .5rem 1rem;
    z-index: 2
}

.search-res {
    position: relative;
    width: 40px
}

.search-res .icon-search {
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
    line-height: 42px;
    color: var(--maincolor);
    font-size: 17px;
    margin: 0px;
    margin-top: 0px
}

.search-res .icon-search.active {
    background: #fdefd5;
    border-radius: 100%;
    color: #7e4a3d
}

.search-res .search-grid {
    position: absolute;
    top: 66px;
    right: 0px;
    width: 0px;
    height: 33px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--maincolor);
    z-index: 2;
    opacity: 0;
    border-radius: 25px;
    line-height: normal
}

.search-res .search-grid p {
    float: left;
    width: 35px;
    height: 32px;
    cursor: pointer;
    outline: none;
    border: none;
    margin: 0px;
    font-size: 17px;
    display: block;
    color: #7e4a3d;
    line-height: 33px;
    text-align: center
}

.search-res .search-grid input {
    width: calc(100% - 35px);
    float: right;
    line-height: 31px;
    outline: none;
    border: none;
    color: #666363;
    font-size: 13px;
    padding: unset
}

.search-res .search-grid input::-webkit-input-placeholder {
    color: #ccc
}

.search-res .search-grid input:-moz-placeholder {
    color: #ccc
}

.search-res .search-grid input::-moz-placeholder {
    color: #ccc
}

.search-res .search-grid input:-ms-input-placeholder {
    color: #ccc
}

a.logo-mb {
    display: inline-block;
    margin: auto
}

.head_mobi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 260px
}

.hotline-mobi {
    display: inline-block;
    font-size: 17px;
    color: var(--maincolor) !important;
    border: 1px solid var(--maincolor);
    padding: 4px 11px;
    border-radius: 50vw;
    margin-right: 14px
}

.wrap-serviceHome {
    background: url(../images/bg4.jpg)no-repeat;
    background-size: cover;
    padding: 50px 0 100px
}

.serviceHome {
    position: relative;
    margin: 10px 10px;
    width: calc(25% - 20px);
    display: block
}

.pic-serviceHome {
    margin-bottom: 0;
    display: block;
    border-radius: 50px 50px 0 0;
    position: relative
}

.pic-serviceHome::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid #fff;
    border-radius: 50px 50px 0 0;
    pointer-events: none
}

.info-serviceHome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 10px;
    text-align: center
}

.name-serviceHome {
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: normal
}

.desc-serviceHome {
    font-weight: 300;
    letter-spacing: 3.4px;
    text-transform: capitalize;
    font-size: 17px;
    color: #ffff;
    margin-bottom: 0px
}

.wrap-serviceHome .serviceHome {
    width: auto;
    margin: 0
}

.wrap-album {
    padding: 110px 0 50px;
    position: relative
}

.wrap-album::after {
    content: '';
    position: absolute;
    background: url(../images/bg2.png)no-repeat;
    width: 646px;
    height: 504px;
    right: 0;
    bottom: -140px;
    z-index: -1;
    pointer-events: none
}

.wap-album {
    display: grid;
    grid-template-columns: 312px 140px 155px 170px 290px;
    grid-template-rows: 105px 305px 295px 72px 40px;
    grid-auto-columns: 1fr;
    gap: 30px 30px;
    grid-auto-flow: row;
    grid-template-areas: "a1 a1 . . ." "a1 a1 a2 a2 a3" "a4 a5 a5 a6 a6" "a4 . . a6 a6" ". . . a6 a6"
}

.albumHome:nth-child(1) {
    grid-area: a1;
    border-radius: 50vw 50vw 0 0
}

.albumHome:nth-child(2) {
    grid-area: a2
}

.albumHome:nth-child(3) {
    grid-area: a3
}

.albumHome:nth-child(4) {
    grid-area: a4
}

.albumHome:nth-child(5) {
    grid-area: a5
}

.albumHome:nth-child(6) {
    grid-area: a6;
    border-radius: 0 0 50vw 50vw
}

.albumHome {
    display: block;
    position: relative
}

.albumHome img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.wrap-listPrice {
    padding: 90px 0
}

.box-title-listPrice {
    width: 13%;
    padding-right: 3%;
    padding-top: 7%
}

.title-listPrice {
    position: relative
}

.title-listPrice h2 {
    font-size: 75px;
    word-break: break-all;
    text-align: center
}

.title-listPrice::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 115px;
    background: #524138
}

.slogan-listPrice {
    font-size: 35px;
    letter-spacing: -0.7px;
    text-transform: capitalize;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    white-space: nowrap;
    height: 200px;
    width: 231px;
    pointer-events: none
}

.wap-listPrice {
    width: 87%;
    border: 1px solid var(--color-3);
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.listPrice {
    width: calc(50% - 10px);
    margin: 0 5px
}

.pic-videoHome {
    position: relative;
    display: block;
    margin-bottom: 0
}

.pic-videoHome::after {
    content: '';
    position: absolute;
    bottom: 14%;
    left: calc(50% - 600px);
    background: url(../images/vd.png)center no-repeat;
    width: 403px;
    height: 91px
}

.wrap-trainHome {
    padding: 60px 0
}

.w-trainHome {
    position: relative
}

.w-trainHome .title-main-index-2 {
    position: absolute;
    top: 0;
    left: calc(50% + 20px);
    right: 0
}

.title-main-index-2 h2 {
    padding-top: 76px
}

.wap-trainHome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 -25px
}

.wrap-trainHome .trainHome {
    width: calc(50% - 50px);
    margin: 20px 25px
}

.wrap-trainHome .trainHome:nth-child(2) {
    margin-top: 160px
}

.trainHome {
    position: relative;
    display: block;
    width: calc(50% - 20px);
    margin: 10px 10px
}

.pic-trainHome {
}

.info-trainHome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

.box-trainHome {
    flex: 1
}

.name-trainHome {
    font-size: 27px;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 17px
}

.desc-trainHome {
    color: #2B2B2B;
    line-height: 25px;
    -webkit-line-clamp: 4
}

.view-trainHome {
    font-size: 17px;
    text-transform: capitalize;
    color: #000;
    margin-top: 30px;
    display: table;
    padding-left: 16px;
    position: relative
}

.view-trainHome::after {
    content: 'Xem';
    position: absolute;
    top: -13px;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    line-height: 50px;
    text-align: right
}

.trainHome:hover .name-trainHome {
    transition: 0.5s ease;
    color: var(--color-4)
}

.trainHome:hover .view-trainHome::after {
    transition: 0.5s ease;
    background-color: var(--color-4)
}

.stt-trainHome {
    font-size: 60px;
    color: #141414;
    width: 84px;
    border-bottom: 1px solid #000;
    margin-right: 40px;
    position: relative;
    line-height: 1;
    text-align: center
}

.stt-trainHome::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 144px;
    background-color: #000;
    width: 1px
}

.view-more {
    background: var(--maincolor);
    color: #fff;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 17px;
    position: absolute;
    bottom: 36px;
    left: 0;
    right: calc(50% + 25px);
    padding: 17px 10px
}

.view-more:hover {
    transition: 0.5s ease;
    color: var(--color-4)
}

.wrap_album {
    display: flex;
    flex-wrap: wrap
}

.album {
    position: relative;
    display: block;
    width: calc(100%/4 - 20px);
    margin: 10px 10px
}

.pic-album a {
    display: block
}

.wap-album2 {
    position: relative
}

.title-album {
    position: absolute;
    top: -40px;
    left: 42%;
    z-index: 2
}

.title-album p {
    font-size: 120px;
    color: #E9E9E9;
    line-height: 1;
    margin-bottom: -13px
}

.title-album h2 {
    font-size: 45px;
    text-transform: capitalize;
    line-height: 1;
    margin-bottom: 0;
    position: relative
}

.title-album h2::after {
    content: '';
    position: absolute;
    right: calc(100% + 16px);
    top: 50%;
    width: 105px;
    height: 1px;
    background: #000
}

.view-more2 {
    position: absolute;
    right: 46px;
    top: 7px
}

.slogan-album {
    font-size: 35px;
    font-weight: 300;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    color: #363533;
    position: absolute;
    left: 32%;
    bottom: 7%;
    line-height: 42px
}

.slogan-album span {
    display: block;
    padding-left: 50px
}

.wrap-newsHome {
    padding: 30px 0 50px
}

.title-main-index-3 h2 {
    background: none;
    padding: 0;
    font-size: 45px;
    margin-bottom: 7px;
    text-align: right;
    padding-right: 9%
}

.w-newsHome {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.newsBest {
    position: relative;
    display: flex !important;
    flex-wrap: wrap;
    background: #fff;
    margin: 8px 10px;
    padding: 20px 30px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10)
}

.box-newsBest {
    position: relative;
    display: block;
    text-align: center
}

.box-newsBest .name-newsBest {
    text-transform: uppercase;
    line-height: normal
}

.box-newsBest:hover .name-newsBest {
    transition: 0.5s ease;
    color: var(--color-4)
}

.pic-newsBest {
    border-radius: 0 150px 0 0
}

.info-newsBest {
    flex: 1
}

.name-newsBest {
    color: #2B2B2B;
    font-size: 22px;
    margin-bottom: 3px
}

.newsBest:hover .name-newsBest {
    transition: 0.5s ease;
    color: var(--color-4)
}

.view-newsBest {
    font-size: 17px;
    font-weight: 300;
    color: var(--maincolor);
    letter-spacing: 5.1px;
    border-top: 1px solid var(--maincolor);
    display: block;
    padding: 11px 0 0;
    margin-bottom: 0
}

.box-newsBest:hover .view-newsBest {
    transition: 0.5s ease;
    color: var(--color-4)
}

.view-newsBest span {
    display: inline-block;
    position: relative;
    padding: 0 34px 0 35px
}

.view-newsBest span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2B2B2B
}

.view-newsBest span::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2B2B2B
}

.desc-newsBest {
    color: #575757;
    font-size: 15px;
    font-weight: 300;
    -webkit-line-clamp: 1;
    margin-bottom: 0
}

.stt-newsBest {
    color: #C7C7C7;
    font-size: 45px;
    width: 75px;
    margin-right: 10px
}

.slick_ndcn {
    width: 43%
}

.right-newsBest {
    width: 63%;
    margin-left: -6%;
    padding: 45px 90px 30px 0;
    position: relative
}

.right-newsBest::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 270px;
    height: 306px;
    background: #F2F2F2
}

.right-newsBest::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50px;
    width: 310px;
    height: 391px;
    background: url(../images/tt.png)no-repeat;
    background-size: 100% 100%
}

.social-footer {
    padding: 0;
    display: flex;
    gap: 5px;
    justify-content: center
}

.social-footer.follow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0
}

.social-footer.follow a {
    color: #4D4D4D;
    text-align: justify;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    transition: 0.3s
}

.social-footer.follow a:hover {
    color: var(--cl-0)
}

.social-footer.payment {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3px
}

.social-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--Text, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px
}

.social-footer p {
    font-size: 60px;
    margin-bottom: 0;
    line-height: 1.2
}

.fb {
    border-radius: 0;
    padding: 0
}