#CategoriesCat {
    padding: 15px 0 18px
}

#CategoriesCat .CategoriesCat__Wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 9px;
    padding: 27px 12px
}

.header-nav.header_nav_mobile {
    display: none
}

.CategoriesCat__Item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100% / 8 - 8px);
    padding: 10px 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease;
    text-decoration: none;
    color: #000
}

.CategoriesCat__Item:hover {
    border-color: #40b604;
    color: #000
}

.CategoriesCat__Thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 6px
}

.CategoriesCat__Thumb img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 6px
}

.CategoriesCat__Name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.banner-top {
    padding-bottom: 15px !important;
    background-color: #fff
}

.dropdown-center {
    z-index: 10
}

.banner-top .logo {
    max-width: 166px;
    max-height: 46px
}

div#header {
    position: relative;
    min-height: 47px;
    font-size: 16px;
    font-weight: 600;
    background: #fff
}

.header-top {
    color: #fff;
    background-color: var(--color-main)
}

.header-top marquee {
    padding-top: 9px;
    margin-right: 20px
}

.header-top ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
    gap: 10px
}

.header-top ul li.line {
    width: 0;
    height: 50px;
    border-left: .5px solid rgba(0, 0, 0, .3);
    border-right: .5px solid rgba(255, 255, 255, .3)
}

.header-top ul li a {
    display: block;
    font-family: Oswald;
    font-weight: 300;
    font-size: 15px
}

.header-top ul li a:hover {
    color: #000
}

.header-nav {
    padding-bottom: 7px
}

.header-nav .cart {
    position: relative
}

.header-nav .cart b {
    position: absolute;
    top: 0;
    right: -3px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: #ff0004;
    border-radius: 50%;
    text-align: center
}

.header-nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    padding: 5px 0 !important
}

.header-nav.fixed .cart {
    display: flex !important
}

#Header {
    position: relative;
    background: #FFF;
    box-shadow: 0 6px 13.1px 0 rgba(181, 181, 181, 0.25);
}

#Header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff
}

#Header.fixed .fixed-hide {
    display: none !important
}

#Header.fixed .menu {
    margin-top: 0
}

.header-bottom .logo {
    position: relative;
    display: block
}

.header-bottom .logo img {
    position: relative;
    z-index: 10
}

.header-bottom .btn-main {
    font-size: 16px;
    background: var(--color-main);
    font-weight: 600;
    text-align: center;
    margin: auto;
    padding: 0;
    line-height: 48px;
    text-transform: uppercase
}

.header-bottom .btn-main:hover {
    background: var(--color-main)
}

.header-bottom .header-ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 21
}

.header-bottom .header-ul .line {
    width: 1px;
    height: 20px;
    margin: 0 5px;
    background-color: #cfcfcf
}

.header-bottom .header-ul a {
    display: block;
    color: var(--color-main);
    text-transform: math-auto;
    line-height: 47px;
    font-size: 17px;
    font-weight: 500;
    background-repeat: no-repeat;
    background-size: 24px 23px;
    background-position: 0 center
}

.header-bottom .header-ul a i {
    font-size: 14px
}

.header-bottom .header-ul .btn-main {
    padding: 6px 10px
}

.header-bottom .header-ul a.active, .header-bottom .header-ul a:hover {
    color: var(--color-red)
}

.header-bottom .header-ul .lang a {
    display: flex;
    cursor: pointer;
    border: 1px solid #fff
}

.header-bottom .header-ul .lang a img {
    width: 34px
}

.header-bottom .header-ul .has-child {
    position: relative
}

.header-bottom .header-ul .submenu, .header-bottom .header-ul>li>ul {
    position: absolute;
    background-color: #fafafa;
    border-radius: .25rem;
    opacity: 0;
    visibility: hidden
}

.header-bottom .header-ul ul {
    padding: 0;
    margin: 0;
    list-style: none;
    transition: .3s
}

.header-bottom .header-ul ul li a {
    font-size: 14px;
    color: #757575;
    border-bottom: 0 solid #ececec;
    padding: 7px 10px;
    text-transform: capitalize;
    line-height: 25px
}

.header-bottom .header-ul>li>ul {
    min-width: 250px;
    top: 100%;
    -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
    -webkit-transform: perspective(600px) rotateX(-90deg);
    transform: perspective(600px) rotateX(-90deg);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    z-index: 1
}

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

.header-bottom .header-ul .submenu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    min-width: 900px;
    max-height: 500px;
    overflow: auto;
    top: 104%;
    padding: 10px 5px;
    -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
    -webkit-transform: perspective(600px) rotateX(-90deg) translateX(-40%);
    transform: perspective(600px) rotateX(-90deg) translateX(-40%);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    z-index: 5
}

.header-bottom .header-ul .has-child:hover>.submenu {
    -webkit-transform: perspective(600px) rotateX(0) translateX(-40%);
    transform: perspective(600px) rotateX(0) translateX(-40%);
    transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    opacity: 1;
    visibility: visible
}

.header-bottom .header-ul .submenu ul {
    padding: 0;
    list-style: none
}

.header-bottom .header-ul .has-child ul.submenu>li {
    width: 16.6666666667%
}

.header-bottom .header-ul .has-child>ul.submenu>li {
    padding: 0 5px;
    margin-bottom: 5px
}

.header-bottom .header-ul .has-child ul.submenu .list {
    padding: 7px 0;
    font-weight: 700;
    color: var(--color-main)
}

.header-bottom .header-ul .has-child ul.submenu .cat {
    font-size: 13px;
    padding: 0
}

.header-bottom .header-ul .has-child ul.submenu>li a {
    display: flex;
    align-items: center;
    padding: 0
}

.header-bottom .header-ul .has-child ul.submenu>li a:hover {
    color: var(--color-submain)
}

.header-bottom .header-ul .has-child ul.submenu>li>a {
    margin: 0 auto;
    background: 0 0;
    border-radius: 0
}

.header-bottom .header-ul .has-child ul.submenu>li p {
    margin-bottom: 0
}

.effect-text {
    animation: 1s ease-in-out infinite effectText;
    transition: color .3s ease-in-out
}

@keyframes effectText {
    0% {
        color: var(--color-main)
    }

    100% {
        color: var(--color-submain)
    }
}

.header-bottom .cart, .header-bottom .hotline {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2
}

.header-bottom .cart svg, .header-bottom .hotline svg {
    fill: var(--color-submain)
}

.header-bottom .cart a {
    color: var(--color-submain)
}

.header-bottom .hotline a {
    animation: 1s ease-in-out infinite blinkColor;
    transition: color .3s ease-in-out
}

@keyframes blinkColor {
    0%, 100% {
        color: var(--color-main);
        border-color: var(--color-main)
    }

    50% {
        color: #ff0004;
        border-color: #ff0004
    }
}

.category-item:hover .name, .product-item .name a {
    color: var(--color-submain)
}

.news-index .name, .news-index::after {
    transition: .3s;
    left: 0;
    position: absolute;
    width: 100%
}

.slide-video {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden
}

.slide-video video {
    width: 100%;
    min-height: 100%
}

.slide-content {
    position: absolute;
    bottom: 5%;
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
    text-shadow: 0 0 3px #333
}

.service-list, .uudai-item, .wrap-tuvan, .wrap-uudai {
    position: relative
}

.wrap-service-list {
    background-color: #fdfdfd
}

.service-list {
    display: block;
    background-color: #fff
}

.service-list .image {
    width: 128px;
    margin: 0 auto
}

.service-list .name {
    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 0
}

.wrap-tuvan {
    background: url(../images/bg_tuvan.jpg) center center no-repeat
}

.wrap-tuvan::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

#frm-advisory .form-control {
    color: #fff;
    border-radius: 0;
    border: 1px solid #ccc;
    background-color: transparent
}

#frm-advisory .form-control::placeholder {
    color: #fff
}

.wrap-uudai {
    z-index: 2;
    transform: translateY(-50%)
}

.wrap-uudai .col-md-7 {
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .35);
    background: #fff
}

.uudai-item {
    padding: 8px
}

.uudai-item::after {
    content: "";
    width: 1px;
    height: 40%;
    background: var(--color-main);
    position: absolute;
    top: 30%;
    left: -12px
}

.news-index, .product-item, .product-list {
    position: relative
}

.wrap-uudai .owl-item:first-child .uudai-item::after {
    display: none
}

.uudai-item .image {
    position: relative;
    display: inline-block
}

.uudai-item img {
    display: block;
    width: 30px
}

.category-item {
    width: calc(100% / 8);
    display: block;
    padding: 10px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: .3s ease-in-out
}

.category-item .image {
    margin-bottom: 10px
}

.category-item .image img {
    width: 48px;
    border-radius: 5px
}

.category-item .name {
    font-size: 14px;
    font-weight: 700
}

.category-item:hover {
    border: 1px solid #86f1ff
}

.news-index, .product-item .image img, .product-list {
    border-radius: 10px
}

.product-list {
    display: block;
    overflow: hidden
}

.product-list .name {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    background-color: var(--color-submain);
    border-bottom-right-radius: 10px
}

.product-list .desc {
    padding: 20px;
    background-color: #f2f2f2
}

.product-item .image {
    border-radius: 10px;
    overflow: hidden;
    width: 62%
}

.product-item .info {
    width: 35%
}

.product-item .name a {
    display: block;
    font-size: 18px
}

.product-item .attrs {
    margin: 0 0 20px;
    padding: 0;
    list-style: none
}

.product-item .attrs li {
    padding: 5px 0 3px;
    border-top: 1px solid #989898;
    color: #989898
}

.product-item .attrs li svg {
    margin-top: -2px
}

.product-item .attrs li b {
    color: #000
}

.slick-arrow {
    z-index: 999;
    width: 50px;
    height: 50px
}

.slick-prev {
    left: 5px
}

.slick-next {
    right: 5px
}

.slick-next:before, .slick-prev:before {
    font-size: 35px
}

.wrap-brand .brand-item, .wrap-doitac .brand-item {
    width: calc(100% / 4 - .5rem)
}

.filter-brand .filter-dropdown-item {
    width: calc(100% / 10 - .5rem)
}

.brand-item {
    display: block;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #C9C9C9;
    overflow: hidden;
}

.brand-item img {
    display: block;
    width: 100%;
    height: auto
}

.partners-swiper {
    width: 100%
}

.partners-swiper .swiper-slide {
    height: auto
}

.brand-item .image {
    overflow: hidden;
    padding: 5px;
    margin-bottom: 8px;
    text-align: center
}

.brand-item .name {
    font-size: 14px;
    font-weight: 600;
    text-align: center
}

.news-index {
    display: block;
    margin-bottom: 1rem;
    overflow: hidden
}

.news-index::after {
    content: "";
    bottom: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #000 100%)
}

.news-index .name {
    bottom: 0;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
    padding: 10px 15px;
    color: #fff;
    z-index: 10
}

.news-index:hover::after {
    height: 30%
}

.wrap-cauchuyen, .wrap-search-multiple {
    background: linear-gradient(to bottom, #f8f8f8 0, #ececec 100%)
}

.visao-item .image img, .visao-item .info {
    position: relative;
    z-index: 2
}

.title-tieuchi {
    width: 50%;
    margin-left: auto;
    padding: 0 20px;
    border-radius: 50px;
    border: 1px solid #000
}

.product-inner {
    background-color: #fffbec
}

.product-hot {
    padding: 2rem 0;
    background-color: #fff
}

.product-hot .desc ol li, .product-hot .desc ul li {
    position: relative;
    list-style: none;
    padding: 10px 10px 10px 35px;
    font-weight: 500
}

.product-hot .desc ol li::before, .product-hot .desc ul li::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../images/icon_check.png) center center/28px no-repeat;
    position: absolute;
    left: 0;
    top: 10px
}

.wrap-top .container {
    padding-top: 20px
}

.owl-menu-cat {
    width: calc(100% - 450px)
}

.wrap-doitac .owl-item {
    padding: 10px 0
}

.doitac-item {
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #eae9e9;
    border-radius: 5px;
    overflow: hidden
}

.category-lists, .wrap-category ul {
    padding: 30px;
    background-color: #ececec
}

.wrap-category ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 40px
}

.wrap-category ul li {
    width: 12%
}

.wrap-category ul li img {
    height: 60px
}

.visao-item:hover .num, .wrap-counter {
    background: var(--color-main)
}

.category-lists a {
    display: block;
    text-align: center;
    font-size: 15px
}

.category-lists span {
    position: relative;
    display: block;
    margin: 0 auto 10px;
    padding: 10px;
    border-radius: 20px;
    background-color: #fff
}

.category-lists img {
    border-radius: 20px
}

.counter-item {
    position: relative;
    font-size: 16px;
    text-align: center
}

.counter-item .number {
    font-size: clamp(30px, 4vw, 46px);
    color: var(--color-main);
    font-weight: 600;
    line-height: 65px
}

.counter-item sup {
    position: absolute;
    top: 0;
    font-size: 2.5rem
}

.counter-item p {
    margin-bottom: 0
}

.counter-item .name {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase
}

.visao-item .name, .visao-item .num {
    color: var(--color-main);
    font-weight: 700
}

.visao-item {
    max-width: 75%;
    margin-top: 30px;
    margin-bottom: 50px;
    cursor: pointer;
    font-family: "Playfair Display", sans-serif
}

.visao-item:nth-child(3) {
    margin-left: 30%
}

.visao-item:nth-child(2), .visao-item:nth-child(4) {
    margin-left: 15%
}

.visao-item:last-child {
    margin-bottom: 30px
}

.visao-item .num {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    background-color: #f1f1f1;
    border-radius: 50rem;
    font-family: Mulish, sans-serif
}

.visao-item .image {
    position: relative;
    width: 30px
}

.visao-item .info {
    width: calc(100% - 60px)
}

.visao-item .name {
    font-size: 16px;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    transition: .3s
}

.visao-item .desc {
    margin-bottom: 0;
    color: #454545;
    font-size: 13px;
    font-weight: 600
}

.visao-item:hover .num {
    color: #fff
}

.visao-item:hover .name {
    color: var(--color-main)
}

.accordion-item, .wrap-diadiem-hot .service-list, .wrap-diadiem-hot .service-list .info {
    border-radius: 0
}

.wrap-diadiem-hot .row {
    margin: 0
}

.wrap-diadiem-hot .row [class^=col] {
    padding: 0
}

.wrap-diadiem-hot .service-list .name {
    background: 0 0;
    text-align: left;
    transform: translateY(0)
}

.wrap-diadiem-hot .service-list .info {
    transform: translateY(-150%)
}

.wrap-diadiem-hot .service-list h2.name {
    font-size: 1.75rem
}

.wrap-diadiem-hot .service-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #000 100%);
    transition: .3s
}

.wrap-diadiem-hot .service-list:hover::before {
    opacity: 0
}

.wrap-service .title-main::before {
    display: none
}

.service-item .image {
    border-radius: 20px;
    overflow: hidden
}

.service-item .name {
    font-family: Inter;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 10px
}

.service-item .desc {
    color: #979494
}

.wrap-cauhoi .hide-content {
    background: linear-gradient(transparent, #f7f7f7 100%)
}

.accordion-item {
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
    color: #000;
    font-size: 20px;
    border: 0 solid;
    border-bottom: 2px solid #e8e8e8
}

.accordion-body {
    padding: 0 0 10px
}

.accordion-button {
    position: relative;
    padding: 1rem 0;
    background: #fff;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700
}

.accordion-button:not(.collapsed) {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--color-red) !important;
    background: 0 0;
    color: #000
}

.news-item .time, .project-item .name, .whyus-list, .wrap-about .about-img, .year-item {
    text-align: center
}

#chuyenkhoaTabs .nav-link.active img, .item-giatri .bg img {
    filter: brightness(0) invert(1)
}

.hinhthuc-item .name, .project-item .name, .slide-center a, .slide-center h4, .video-item .name, .wrap-about .about-count p {
    text-transform: uppercase
}

.news-item .more a:hover, .slide-center h4 {
    letter-spacing: 2px
}

.blog-l h3 a, .desc-home-cl.text-split, .hinhthuc-item .desc, .name-news.text-split, .name-newshome.text-split, .news .news-name a.text-split, .news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc.text-split, .news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a .text-split, .tieuchi-item .name {
    -webkit-line-clamp: 2
}

.owl-cat a {
    color: #8d8d8d
}

.owl-cat a.active, .owl-cat a:hover {
    color: var(--color-main);
    text-decoration: underline
}

.wrap-about .title-main h2, .wrap-doitac .title-main h2, .wrap-giatri .title-main h2, .wrap-history .title-main h2, .wrap-sumenh .title-main h2, .wrap-tamnhin .title-main h2, .wrap-vanhoa .title-main h2 {
    font-size: clamp(23px, 2vw, 31px)
}

.news-item .time span:last-child, .project-item, .slideshow .banner-item, .support-online a:hover span, .wrap-about .title-main h2 span {
    display: block
}

.wrap-about .about-img {
    position: sticky;
    top: 0
}

.wrap-about .about-img img:nth-child(2) {
    margin-left: -43%;
    margin-top: 15%
}

.wrap-about .about-info .btn {
    font-size: 18px;
    text-transform: uppercase
}

.wrap-about .about-info .btn-more {
    padding: 12px 20px;
    color: #fff;
    background: var(--color-main);
    margin-right: 20px
}

.wrap-about .about-info .btn-more:hover {
    background: #1f9607
}

.wrap-about .about-info .btn-video {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #111;
    background: var(--color-submain)
}

.wrap-about .about-info .btn-video:hover {
    background-color: #efe20c
}

.wrap-about .about-count .counter, .wrap-about .about-count sup {
    font-family: "1FTV Avilock";
    font-size: 65px;
    color: var(--color-main)
}

.wrap-about .about-count .counter {
    line-height: 55px
}

.wrap-about .about-count p {
    font-size: 18px
}

.wrap-goikham {
    background-color: #f8f8f8
}

.goikham-item .info {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding: 20px;
    margin-top: -40px
}

.goikham-item .name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px
}

.baogia-item:hover, .blog-l h3 a:hover, .box-newsi h3 a:hover, .doingu-item, .doingu-item .name a, .goikham-item .name a, .khachhang-item:hover .icon svg, .news-item .name a:hover, .news-item:hover .name a, .owl-item.active.center .khachhang-item .icon svg, .quytrinh-item:hover .name, .tieuchi-item:hover .name, .whyus-list:hover .name, .year-item.slick-current {
    color: var(--color-main)
}

#frm-newsletter .frm-title, .goikham-item .name a:hover, .name-product:hover, .search-res .icon-search.active {
    color: var(--color-submain)
}

.goikham-item .more .btn-main {
    width: 50%
}

#chuyenkhoaTabs {
    justify-content: space-between
}

#chuyenkhoaTabs .nav-link {
    font-size: 14px;
    padding: 5px;
    color: #999;
    background: #f0f0f0
}

#chuyenkhoaTabs .nav-link.active, .choose-list button.choosed, .choose-list button:hover {
    color: #fff;
    background: #40b604
}

#chuyenkhoaTabsContent {
    border: 1px solid #dee2e6;
    border-top: 0;
    box-shadow: .5rem .5rem 1rem rgba(0, 160, 227, .15)
}

.wrap-doingu {
    background: url(../images/bg_doingu.jpg) right bottom no-repeat #f8f9f8
}

.doingu-item .image, .wrap-video .image {
    border-radius: 10px;
    overflow: hidden
}

.doingu-item .name {
    font-family: "Playfair Display", sans-serif;
    font-size: 18px;
    font-weight: 700
}

.tieuchi-item .name, .tieuchi-item .num {
    font-family: Inter, serif;
    transition: .3s
}

.doingu-item .desc {
    color: #7e7e7e;
    font-size: 14px
}

.wrap-appointment, .wrap-tieuchi {
    background: #f7f7f7
}

.tieuchi-inner {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px
}

.tieuchi-item {
    padding: 0;
    max-width: 85%;
    cursor: pointer
}

.tieuchi-item .num {
    font-size: 75px;
    line-height: 1;
    background: linear-gradient(to bottom, #ffcb0f 0, #fff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.tieuchi-item .image {
    position: relative;
    width: 30px
}

.hinhthuc-item .image img, .tieuchi-item .image img, .wrap-tiktok .tiktok-container .tiktok-iframe {
    position: relative;
    z-index: 2
}

.tieuchi-item .info {
    position: relative;
    width: calc(100% - 60px);
    z-index: 2
}

.tieuchi-item .name {
    color: #000;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5
}

.tieuchi-item .desc {
    margin-bottom: 0;
    color: #868686;
    font-size: 14px
}

.tieuchi-item:hover .num {
    background: var(--bg-linear-hover);
    background-clip: text;
    -webkit-background-clip: text
}

.showroomSwiper .swiper-slide, .slide-left {
    width: 300px
}

.panorama-slider {
    width: 100%;
    padding: 60px 0;
    perspective: 1000px;
    overflow: visible
}

.panorama-slider .swiper-slide {
    width: 250px;
    transition: transform .5s;
    transform-origin: center center;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1)
}

.hinhthuc-item {
    margin-bottom: 15px
}

.hinhthuc-item .num {
    font-family: Dynalight;
    font-size: 75px;
    line-height: 65px;
    color: #eaeaea;
    transition: .3s
}

.hinhthuc-item:hover .num {
    color: var(--color-main);
    transform: scale(1.2)
}

.hinhthuc-item .char {
    font-family: SVN-Poppins;
    font-size: 100px;
    font-weight: 600;
    line-height: 100px;
    color: transparent;
    background: var(--linear-2);
    background-clip: text;
    transform: translate(-7%, 65%)
}

.hinhthuc-item .image {
    position: relative;
    width: 94px;
    padding: 20px;
    background-color: var(--color-main);
    border-radius: 100%
}

.hinhthuc-item .info {
    position: relative;
    width: calc(100% - 90px);
    z-index: 2
}

.hinhthuc-item .name {
    font-weight: 600;
    color: #333;
    font-size: 16px;
    margin-bottom: .5rem
}

.hinhthuc-item .desc {
    margin-bottom: 0;
    color: #333;
    font-size: 15px;
    min-height: 45px
}

.wrap-sumenh h3, .wrap-tamnhin h3 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--color-main);
    margin-top: 10px
}

.wrap-tamnhin h3::after {
    content: "";
    display: none;
    width: 50px;
    height: 2px;
    background-color: var(--color-submain)
}

.as-layer.as-vertical {
    width: 65%
}

.wrap-tiktok .tiktok-container {
    position: relative;
    width: 100%;
    height: 568px;
    padding: 14px
}

.wrap-tiktok .tiktok-container .tiktok-iframe iframe {
    overflow: hidden;
    border-radius: 20px
}

.wrap-tiktok .tiktok-container .tiktok-button {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    width: 127px;
    height: 125px;
    background: url(../images/bg_tiktok_icon.png) no-repeat
}

.wrap-tiktok .tiktok-container .tiktok-button:hover {
    color: red
}

.wrap-tiktok .tiktok-container .tiktok-button .btn-frame {
    position: absolute;
    top: 50px;
    left: 50px;
    color: #fff
}

#frm-appointment-2 {
    padding: 30px;
    background: url(../images/bg_datlich.jpg) center center/cover no-repeat;
    border-radius: 10px;
    overflow: hidden
}

#frm-appointment-2 label {
    margin-bottom: 5px;
    font-weight: 700;
    color: var(--color-main)
}

#frm-appointment-2 .form-control, #frm-appointment-2 .form-select {
    background-color: transparent
}

.slider-video-thumb {
    margin: 0 -.5rem
}

.gallery-pro-detail .slider-products .item img, .video-item {
    margin: 0 auto
}

.video-item, .video-item .image {
    position: relative;
    overflow: hidden
}

.video-item .name {
    position: absolute;
    left: -85px;
    bottom: 100px;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #2fd0ff 0, #0bb1e1 100%);
    color: #fff;
    font-family: Goldman, sans-serif;
    font-size: 16px;
    border-radius: 3px;
    margin-bottom: 0;
    transform: rotate(-90deg)
}

.video-item .btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    transition: .3s;
    opacity: 1
}

#frm-newsletter, .giatri-item .info, .newsletter-input, .quytrinh-item, .search-res, .slide-left, .slide-right, .wrap-history .slider-nav, a.play {
    position: relative
}

.video-item .btn-play .kenit-alo-circle, a.play .btn-frame .kenit-alo-circle {
    border-color: rgba(255, 255, 255, .5)
}

.video-item .btn-play .kenit-alo-circle-fill {
    background: rgba(255, 255, 255, .3)
}

.support-online .sms i, .video-item .btn-play i {
    background: red
}

.form-check-input:checked, .newsletter-button button:hover {
    background: var(--color-submain)
}

.box-product.hot .name-product, .box-product.hot .price-product, .box-product.hot .price-product .price-new, .video-item .btn-play svg, .wrap-video .btn-play svg {
    color: #fff
}

#frm-newsletter .form-control {
    color: #949494;
    border: 0;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: transparent
}

#frm-newsletter button[type=submit] {
    border: 1px solid #fff;
    background: 0 0;
    color: #fff;
    font-size: 14px
}

.form-check-input:checked {
    border-color: var(--color-submain)
}

#frm-newsletter .frm-content {
    padding: 40px 20px;
    background-color: #f3f3f3;
    border-radius: 20px
}

#frm-newsletter .frm-title span {
    color: #757575
}

.newsletter-input svg {
    display: none;
    position: absolute;
    top: 20px;
    right: 10px
}

.newsletter-input {
    display: flex;
    align-items: center;
    width: calc(100%);
    margin-bottom: 25px;
    background-color: #fff;
    border-radius: 5px
}

.newsletter-input label {
    padding-left: 10px;
    padding-top: .25rem;
    white-space: nowrap;
    margin: 0;
    color: #757575;
    font-size: 14px
}

.newsletter-input input, .newsletter-input select, .newsletter-input textarea {
    font-size: 16px;
    height: 35px;
    border: 1px solid #ccc;
    box-shadow: none !important;
    outline: 0 !important
}

.newsletter-input input::placeholder, .newsletter-input textarea::placeholder {
    font-size: 16px
}

.newsletter-input textarea {
    height: 120px;
    resize: none
}

.newsletter-button {
    position: absolute;
    right: 2px;
    top: 2px
}

.newsletter-button button {
    padding: 0 10px;
    height: 31px;
    border: 0;
    background: var(--color-main);
    color: #fff;
    border-radius: .25rem
}

.wrap-whyus {
    background: url(../images/bg_whyus.jpg) center center/cover no-repeat;
    color: #fff
}

.whyus-list:hover .image-rotate img {
    animation: 2s linear infinite continuousRotateY
}

.quytrinhtm-item {
    margin: 0 5px 10px 0;
    border-radius: 10px;
    overflow: hidden
}

.quytrinhtm-item .num {
    font-size: 60px
}

.quytrinhtm-item .name {
    font-family: Inter;
    font-size: 18px;
    font-weight: 600
}

.wrap-quytrinh {
    background: #fff;
    background: linear-gradient(180deg, #fff 0, #eee 100%)
}

.quytrinh-item:nth-child(odd) {
    padding-bottom: 5rem
}

.quytrinh-item:nth-child(2n) {
    padding-top: 5rem
}

.quytrinh-item::before {
    content: "";
    display: block;
    position: absolute;
    top: 30%;
    right: -14%;
    width: 83px;
    height: 24px;
    background: url(../images/arrow_quytrinh.png) 0 0/100% no-repeat
}

.quytrinh-item:nth-child(2n)::before {
    background: url(../images/arrow_quytrinh2.png) no-repeat
}

.quytrinh-item:last-child::before {
    background: 0 0
}

.wrap-filter .search input {
    border-radius: 80px;
    height: 50px
}

.wrap-filter .search .buttons-common {
    position: absolute;
    top: 4px;
    right: 4px
}

.wrap-filter .search input::placeholder {
    font-size: 16px
}

.filter-page-title {
    margin: 0 0 18px;
    color: #20150f;
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase
}

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

.wrap-filter .filter-item {
    position: relative
}

.wrap-filter .filter-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 20px;
    border-radius: 63px;
    border: 1px solid #dfdfdf;
    background: #fff;
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-decoration: none !important;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease
}

.wrap-filter .filter-title:hover {
    border-color: #40b604;
    color: #40b604
}

.wrap-filter .filter-item.is-open .filter-title, .wrap-filter .filter-title.is-active {
    border-color: #40b604;
    color: #40b604;
    box-shadow: 0 0 0 3px rgba(64, 182, 4, .12)
}

.wrap-filter .filter-title--primary {
    background: #40b604;
    border-color: #40b604;
    color: #fff
}

.wrap-filter .filter-item.is-open .filter-title--primary, .wrap-filter .filter-title--primary:hover {
    background: #38a003;
    border-color: #38a003;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(64, 182, 4, .18)
}

.wrap-filter .filter-title__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block
}

.wrap-filter .filter-title__chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: .75;
    transition: transform .2s ease
}

.wrap-filter .filter-item.is-open .filter-title__chevron {
    transform: rotate(180deg);
    opacity: 1
}

.wrap-filter .filter-title__text {
    display: inline-block
}

.wrap-filter .filter-counter {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 0;
    border-radius: 999px;
    border: 0;
    background: rgba(64, 182, 4, .12);
    color: #40b604;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    opacity: 1
}

.wrap-filter .filter-title--primary .filter-counter {
    background: rgba(255, 255, 255, .22);
    color: #fff
}

.wrap-filter .filter-counter.show {
    display: inline-flex
}

.wrap-filter .btn-filter.is-context:not(.active) {
    border-color: #40b604;
    color: #40b604
}

.wrap-filter .btn-filter.outline.gray {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none !important;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease
}

.wrap-filter .btn-filter.outline.gray:hover {
    border-color: #40b604;
    background: #f7fbf3;
    color: #2f8a04 !important
}

.wrap-filter .btn-filter.outline.gray.active, .wrap-filter .btn-filter.outline.gray.active:hover {
    border-color: #40b604;
    background: #f3faeb;
    color: #2f8a04 !important;
    padding-right: 22px
}

.wrap-filter .btn-filter.outline.gray.active::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border: 11px solid #40b604;
    border-top-color: transparent;
    border-left-color: transparent
}

.wrap-filter .btn-filter.outline.gray.active::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 4px;
    width: 4px;
    height: 7px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(45deg);
    pointer-events: none
}

.filter-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid rgba(0, 0, 0, .08);
    vertical-align: middle
}

.filter-price-slider {
    padding: 4px 4px 8px
}

.filter-price-slider__values {
    font-size: 13px;
    font-weight: 600;
    color: #222
}

.filter-price-slider .irs {
    margin-top: 8px
}

.filter-price-slider .irs--flat .irs-bar, .filter-price-slider .irs--round .irs-bar {
    background: #40b604
}

.filter-price-slider .irs--flat .irs-handle>i:first-child, .filter-price-slider .irs--round .irs-handle {
    background: #40b604;
    border-color: #40b604
}

.filter-price-slider .irs--flat .irs-from, .filter-price-slider .irs--flat .irs-single, .filter-price-slider .irs--flat .irs-to, .filter-price-slider .irs--round .irs-from, .filter-price-slider .irs--round .irs-single, .filter-price-slider .irs--round .irs-to {
    background: #40b604
}

.filter-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    min-height: 40px;
    padding: 8px 24px;
    border-radius: 8px;
    background: #40b604;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    transition: background .2s ease, box-shadow .2s ease
}

.filter-apply-btn:hover {
    background: #38a003;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(64, 182, 4, .25)
}

.filter-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 40px;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #cfcfcf;
    background: #fff;
    color: #333 !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease
}

.filter-reset-btn:hover {
    background: #f5f5f5;
    border-color: #999;
    color: #111 !important
}

.filter-search, .filter-search .btn {
    position: relative;
    align-items: center;
    height: 30px
}

.js-facebook-messenger-box.open svg#close-icon, .wrap-filter .filter-counter.show {
    opacity: 1
}

.filter-search {
    border-radius: 0;
    background: #fff;
    display: flex;
    justify-content: end;
    outline: 0;
    overflow: hidden;
    transition: .4s ease-in-out;
    width: 200px;
    border: 1px solid #cfcfcf
}

.filter-search input {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px);
    height: 100%;
    outline: 0 !important;
    border: 0 !important;
    display: block;
    z-index: 1;
    background: #fff !important;
    box-shadow: none !important
}

.filter-search .btn {
    display: flex;
    justify-content: center;
    padding: 0;
    border-radius: 5px;
    width: 30px;
    cursor: pointer;
    background: 0 0;
    border-color: transparent;
    z-index: 2
}

.filter-dropdown {
    position: absolute;
    left: 0;
    min-width: 320px;
    width: max-content;
    max-width: min(720px, calc(100vw - 40px));
    background-color: #fff;
    top: calc(100% + 8px);
    border-radius: 12px;
    border: 1px solid #ececec;
    -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    box-shadow: 0 16px 40px rgba(32, 21, 15, .12);
    -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;
    padding: 16px 18px 14px;
    transition: .3s ease-in-out;
    z-index: 20
}

.wrap-filter .filter-item:first-child .filter-dropdown-all {
    width: min(720px, calc(100vw - 40px))
}

.filter-dropdown.show {
    -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
}

.filter-dropdown h6 {
    margin: 0 0 10px;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3
}

.filter-dropdown h6:not(:first-child) {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0
}

.filter-dropdown-list {
    gap: 8px !important;
    margin-bottom: 12px !important
}

.filter-dropdown-item {
    display: inline-flex
}

.filter-dropdown .border-top {
    margin-top: 2px;
    padding-top: 14px !important;
    border-top: 1px solid #f0f0f0 !important
}

.filter-dropdown-item a, .search-multiple .giaban-item .name, .search-multiple .hangxe-item .name {
    font-size: 13px
}

.wrap-project {
    background: #fff
}

.project-item .name {
    font-size: 18px
}

.news-item {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.news-item__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none !important
}

.news-item__thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 14px;
    background: #eee;
    aspect-ratio: 5/3
}

.news-item__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease
}

.news-item__link:hover .news-item__thumb img {
    transform: scale(1.05)
}

.news-item__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0
}

.news-item__date {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #888
}

.news-item__name {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #222;
    transition: color .25s ease
}

.news-item__link:hover .news-item__name {
    color: #40b604
}

.news-item__desc {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #727272
}

.news-item__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #40b604;
    transition: gap .25s ease, color .25s ease
}

.news-item__link:hover .news-item__more {
    gap: 10px;
    color: #349503
}

.news-item .image {
    position: relative;
    margin-bottom: 0
}

.news-item .info {
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: 0 0
}

.news-item .time {
    margin: 0 auto 15px;
    width: 65px;
    height: 82px;
    border-bottom: 1px solid var(--color-main);
    color: #222;
    font-size: 16px;
    padding-top: 25px;
    line-height: 20px;
    background: url(../images/bg_time.png) top center/cover no-repeat
}

.news-item .time span:first-child {
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 1px solid #222
}

.news-item .author {
    font-size: 14px;
    color: #aaa
}

.news-item .name {
    height: auto;
    margin: 0 0 8px
}

.news-item .name a {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    color: #222;
    text-decoration: none
}

.news-item .name a:hover, .news-item:hover .name a {
    color: #40b604
}

.news-item .desc {
    font-size: 14px;
    color: #727272
}

.news-item .more a {
    font-size: 14px;
    color: #40b604
}

.news-item .meta {
    position: absolute;
    top: 10px;
    left: 10px
}

.news-item .meta span {
    display: block;
    font-size: .875rem;
    color: #fff;
    padding: 3px 5px 2px;
    border-radius: 3px;
    background-color: #40b604
}

.news-item .line {
    margin-top: 30px;
    margin-bottom: 5px;
    width: 50px;
    height: 2px;
    background: #40b604
}

.news-item.list {
    display: flex;
    margin-bottom: 15px
}

.news-item.list .image {
    width: 200px
}

.news-item.list .info {
    padding: 10px 20px;
    width: calc(100% - 210px)
}

.news-page {
    padding-bottom: 40px
}

.news-page__grid {
    --news-gap: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--news-gap);
    margin: 0;
    padding: 0;
    list-style: none
}

.news-page--with-sidebar .news-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.news-page__grid>* {
    min-width: 0
}

.news-page__head {
    margin-bottom: 22px
}

.news-page__head .title-main {
    margin-bottom: 0
}

.news-page__more {
    display: flex;
    justify-content: center;
    margin-top: 8px
}

.news-load-more.disabled {
    opacity: .6;
    pointer-events: none;
    cursor: default
}

.giatri-item, .pic-video, .pic-video-2 {
    position: relative;
    cursor: pointer
}

.giatri-item .image, .khachhang-item .image {
    width: 70px
}

.giatri-item .name {
    font-size: clamp(18px, 2vw, 21px);
    font-weight: 700
}

.giatri-item .desc {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 500;
    color: #6e6e6e
}

.wrap-doingu-inner {
    background: linear-gradient(to bottom, #fff 0, #cfcfcf 100%)
}

.choose-list button.choosed::before, .choose-list button:hover::before, .item-giatri, .slide-center a, .year-item.slick-current::before {
    background-color: var(--color-main)
}

.wrap-vanhoa .wrap-content {
    padding: 40px;
    border-radius: 20px;
    box-shadow: 5px 5px 0 rgba(234, 230, 230, .5)
}

.vanhoa-item .image {
    width: 56px
}

.vanhoa-item .name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-main)
}

.vanhoa-item .desc {
    color: #666;
    font-size: 15px;
    font-weight: 500
}

.history-item .name {
    font-size: 21px;
    margin-bottom: 15px;
    font-weight: 700
}

.history-item .p {
    font-size: 24px;
    font-family: var(--font-bold);
    margin-bottom: 0
}

.item-giatri .name, .item_history .name {
    font-family: "Playfair Display", sans-serif
}

.year-item {
    font-size: 16px;
    position: relative;
    color: #b9b9b9;
    padding-bottom: 12px;
    z-index: 98
}

.year-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    color: #7e7e7e;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

#menu, .box-product.hot::before, .btn-option input, .checkbox-card input[type=checkbox], .checkbox-card input[type=radio], .color-option input, .color-pro-detail input[type=radio], .gallery-pro-detail .slider-products .slick-next:before, .gallery-pro-detail .slider-products .slick-prev:before, .img-option input, .menu-res, .size-pro-detail input[type=radio] {
    display: none
}

.slick-list {
    z-index: 99
}

.year-item::before {
    content: "";
    position: absolute;
    bottom: 3px;
    margin: auto;
    right: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #d9d9d9;
    z-index: 3;
    rotate: 45deg
}

.item-giatri .icon, .slideshow .banner-item:first-child {
    margin-bottom: 20px
}

.wrap-history .slider-nav:after {
    content: '';
    position: absolute;
    bottom: 8px;
    width: 100%;
    height: 1px;
    background-color: #c6c6c6;
    z-index: 0
}

.gallery-pro-detail .slider-products .slick-arrow svg, .wrap-history .slider-nav .slick-arrow {
    width: 30px;
    height: 30px
}

.wrap-history .slider-nav .slick-arrow::before {
    font-size: 25px;
    color: var(--color-main)
}

.pic-news img, .pic-newshome-normal img, .pic-product img, .pic-video img, .pic-video-2 img, .tags-pro-detail, .wrap-history .slider-for {
    width: 100%
}

.item-giatri {
    position: relative;
    padding: 20px;
    border-radius: 10px
}

.item-giatri .bg {
    position: absolute;
    width: 30%;
    height: 65%;
    top: 0;
    right: 0;
    opacity: .5
}

.item-giatri .bg img {
    max-width: 100%;
    max-height: 100%
}

.item-giatri .icon {
    position: relative;
    width: 40px
}

.item-giatri .name {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #fff
}

.item-giatri .desc {
    position: relative;
    font-size: 15px;
    color: #87c5df;
    line-height: 2
}

.item_history {
    position: relative;
    border-radius: 10px;
    overflow: hidden
}

#hamburger, .menu-bar-res {
    border-radius: 5px;
    background: var(--color-main)
}

.item_history::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%)
}

.item_history .info {
    position: absolute;
    padding: 10px 20px;
    bottom: 10px;
    left: 10px;
    width: 100%;
    color: #fff
}

.wrap-video .btn-play, a.play .btn-frame {
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%
}

.item_history .name {
    font-size: 31px;
    margin-bottom: 15px;
    color: #fff
}

.item_history .desc {
    font-size: 16px;
    color: #fff
}

a.play .btn-frame {
    width: 50px;
    height: 50px
}

a.play .btn-frame i {
    color: #fff;
    background-color: rgba(255, 255, 255, .3)
}

.wrap-video .btn-play {
    display: inline-block
}

.menu-res {
    z-index: 100;
    background: var(--color-main);
    position: relative
}

.menu-bar-res {
    display: none;
    height: 34px;
    padding: 0 10px;
    justify-content: center
}

#hamburger {
    position: relative;
    display: block;
    width: 34px;
    height: 30px;
    border: 1px solid #fff
}

#hamburger span, #hamburger:after, #hamburger:before {
    background: #fff;
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    position: absolute;
    left: 20%;
    -webkit-transition: transform .5s .5s, top .5s .5s, bottom .5s .5s, left .5s .5s, opacity .5s .5s;
    transition: none .5s .5s;
    transition-property: transform, top, bottom, left, opacity
}

.search-multiple .giaban-item, .search-multiple .hangxe-item, .search-multiple .loaixe-item {
    transition: .2s ease-in-out;
    text-align: center
}

#hamburger:before {
    top: 7px
}

#hamburger span, .mm-wrapper_opening #hamburger:after, .mm-wrapper_opening #hamburger:before {
    top: 14px
}

#hamburger:after {
    top: 21px
}

.mm-wrapper_opening #hamburger span {
    left: -50px;
    opacity: 0
}

.mm-wrapper_opening #hamburger:before {
    transform: translateY(-50%) rotate(45deg) !important;
}

.mm-wrapper_opening #hamburger:after {
    transform: translateY(-50%) rotate(-45deg) !important;
}

.mm-menu_opened {
    display: block !important;
    z-index: 99999 !important
}

.mm-navbar, .mm-panel, .mm-panels {
    background: #fff !important
}

.desc-pro-detail .attrs li b, .mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited, .name-newshome.text-split a, .view-newshome:hover {
    color: #000
}

.mm-btn:after, .mm-btn:before {
    border-color: #000
}

.mm-listitem-product .mm-listitem__text {
    font-size: 15px;
    flex-basis: auto;
    flex-grow: 0;
    white-space: normal;
    padding: 5px 8px !important;
    margin: 2px
}

.search-res .icon-search {
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin: 0 0 0 10px
}

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

.search-res .search-grid p {
    float: left;
    width: 35px;
    height: 38px;
    cursor: pointer;
    outline: 0;
    border: none;
    margin: 0;
    font-size: 17px;
    display: block;
    color: var(--color-main);
    line-height: 35px;
    text-align: center
}

.search-res .search-grid input {
    width: calc(100% - 35px);
    float: right;
    line-height: 38px;
    outline: 0;
    border: none;
    color: var(--color-main)
}

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

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

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

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

@keyframes dance {
    0% {
        -webkit-transform: scale(.5)
    }

    100% {
        -webkit-transform: scale(1.5)
    }
}

@keyframes moveBounce {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@keyframes moveUpBounce {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(35px);
        transform: translateY(35px)
    }
}

@keyframes moveLeftBounceright {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(35px);
        transform: translateX(35px)
    }
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotateme {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

.slideshow {
    position: relative;
    overflow: hidden;
    z-index: 1
}

.slideshow-swiper {
    width: 100%
}

.slideshow-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1440 / 550
}

.slideshow-image, .slideshow-video {
    display: block;
    width: 100%;
    height: 100%
}

.slideshow-image img, .slideshow-video video, .ssvideo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.slideshow-image img {
    transform-origin: 40% 50%;
    transform: scale(1)
}

.slideshow-swiper .swiper-slide-active .slideshow-image img {
    animation: aboutHeroKen 22s ease-out forwards
}

.slideshow .banner {
    width: 37%
}

.slideshow-swiper .swiper-button-prev, .slideshow-swiper .swiper-button-next {
    width: 50px;
    height: 50px;
    margin-top: 0;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    color: #fff;
    background: rgba(8, 25, 76, .55);
    border-radius: 50%
}

.slideshow-swiper .swiper-button-prev {
    left: 16px
}

.slideshow-swiper .swiper-button-next {
    right: 16px
}

.slideshow-swiper .swiper-button-prev:after, .slideshow-swiper .swiper-button-next:after {
    font-size: 16px
}

.slideshow-swiper .swiper-button-prev:hover, .slideshow-swiper .swiper-button-next:hover {
    background: #08194C
}

.slideshow-swiper .swiper-pagination {
    display: none;
    bottom: 16px
}

.slideshow-swiper.is-single .swiper-button-prev, .slideshow-swiper.is-single .swiper-button-next, .slideshow-swiper.is-single .swiper-pagination {
    display: none
}

.slideshow-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: .45
}

.slideshow-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff
}

.slideshow-caption {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none
}

.slideshow-caption .widthBox {
    width: 100%
}

.slideshow-text {
    max-width: 424px
}

.slideshow-text__btn, .slideshow-text__desc, .slideshow-text__subtitle, .slideshow-text__title {
    opacity: 0
}

.slideshow-text__title {
    margin: 0;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 34px;
    font-weight: 500;
    line-height: normal;
    transform: translateX(-36px)
}

.slideshow-text__subtitle {
    margin: 0;
    color: #e6ddd0;
    font-family: "Playfair Display", serif;
    font-size: 37px;
    font-weight: 500;
    font-style: italic;
    line-height: normal;
    transform: translateX(-28px)
}

.slideshow-text__desc {
    margin: 9px 0 0;
    color: #a9a9a9;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 20px;
    transform: translateY(18px)
}

.slideshow-text__btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 206px;
    height: 42px;
    margin-top: 22px;
    background: #bc9a71;
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    pointer-events: auto;
    transform: translateY(16px) scale(.96);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease
}

.slideshow-text__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .4) 50%, transparent 80%);
    transform: translateX(-120%);
    pointer-events: none
}

.slideshow-text__btn:hover {
    color: #000;
    background: #a88760;
    box-shadow: 0 8px 18px rgba(188, 154, 113, .35)
}

.slideshow-swiper .swiper-slide-active .slideshow-text__title {
    animation: slideshowFadeLeft .75s cubic-bezier(.22, .61, .36, 1) .12s forwards
}

.slideshow-swiper .swiper-slide-active .slideshow-text__subtitle {
    animation: slideshowFadeLeft .8s cubic-bezier(.22, .61, .36, 1) .32s forwards
}

.slideshow-swiper .swiper-slide-active .slideshow-text__desc {
    animation: slideshowFadeUp .7s cubic-bezier(.22, .61, .36, 1) .52s forwards
}

.slideshow-swiper .swiper-slide-active .slideshow-text__btn {
    animation: slideshowBtnIn .65s cubic-bezier(.22, .61, .36, 1) .78s forwards
}

.slideshow-swiper .swiper-slide-active .slideshow-text__btn::after {
    animation: slideshowShine .85s ease 1.35s forwards
}

@keyframes slideshowFadeLeft {
    0% {
        opacity: 0;
        transform: translateX(-36px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideshowFadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideshowBtnIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(.96)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes slideshowShine {
    0% {
        transform: translateX(-120%)
    }

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

@media (prefers-reduced-motion:reduce) {
    .slideshow-text__btn, .slideshow-text__desc, .slideshow-text__subtitle, .slideshow-text__title {
        opacity: 1;
        transform: none;
        animation: none
    }

    .slideshow-text__btn::after {
        display: none
    }
}

.slide-text .wrap-content {
    position: absolute;
    top: 20%;
    right: 0;
    left: 0;
    width: 100%;
    padding: 100px 0
}

.slide-text .star {
    position: absolute;
    top: 0;
    left: 10%;
    -webkit-animation: 1.5s infinite alternate dance;
    animation: 1.5s infinite alternate dance
}

.slide-text .arrow {
    position: absolute;
    bottom: -40px;
    left: 20%;
    -webkit-animation: 2s linear infinite moveLeftBounceright;
    animation: 2s linear infinite moveLeftBounceright
}

.slide-text .triangle {
    position: absolute;
    z-index: 22;
    bottom: -4%;
    left: 69%;
    color: #fff;
    width: 72px;
    height: 82px;
    min-height: 0;
    min-width: 0;
    max-height: none;
    max-width: none;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0, 0);
    visibility: visible;
    -webkit-animation: 2s linear infinite moveBounce;
    animation: 2s linear infinite moveBounce
}

.slide-right span, .slide-text .rotateme {
    left: 10px;
    top: 5px;
    position: absolute;
    bottom: 0;
    right: 0
}

.blink, .slide-text .rotateme {
    -webkit-animation-iteration-count: infinite
}

.slide-text .rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.slide-center {
    width: 540px;
    text-align: center;
    color: #fff
}

.slide-center h4 {
    color: var(--color-main);
    font-weight: 400;
    font-size: 20px
}

.slide-center h2 {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    margin-bottom: 30px
}

.slide-center p {
    color: #cac6c6;
    margin-bottom: 20px
}

.slide-center a {
    display: inline-block;
    padding: 15px 30px 12px;
    color: #fff;
    border-radius: 30px;
    box-shadow: 1px 1px 0 #fff
}

.cart-product span, .web-item .info .d-flex a {
    text-transform: capitalize
}

.slide-center a:hover {
    background-color: #be1217
}

.box-slide.slick-current.slick-active .slide-left {
    animation: 1s .5s forwards fadeInLeftBig
}

.box-slide.slick-current.slick-active .slide-right {
    animation: 1s 1s forwards fadeInRightBig
}

.box-slide.slick-current.slick-active .name-slide {
    animation: 1s 1.5s forwards fadeInUp
}

.box-slide.slick-current.slick-active .desc-slide {
    animation: 1s 2s forwards fadeInUp
}

.box-slide.slick-current.slick-active .views-more-slide {
    animation: 1s 2.5s forwards scaleLarge
}

.slide-text .slick-next, .slide-text .slick-prev {
    width: 40px;
    height: 50px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .3)
}

.slide-text .slick-prev {
    left: 5px
}

.slide-text .slick-next {
    right: 5px
}

.slide-text .slick-prev:before {
    font-family: FontAwesome;
    font-weight: 400;
    content: "\f053"
}

.slide-text .slick-next:before {
    font-family: FontAwesome;
    font-weight: 400;
    content: "\f054"
}

.news-control#down, .slide-text .slick-dots {
    bottom: 20px
}

.news-slick h3, .slide-text .slick-dots li {
    margin: 0
}

.slide-text .slick-dots li button:before {
    color: #fff;
    font-size: 15px
}

.search-multiple {
    position: relative;
    z-index: 10;
    margin-top: -70px;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0, #f2f2f2 100%)
}

.checkbox-card {
    display: block;
    cursor: pointer
}

.checkbox-card input[type=checkbox]:checked+.content, .checkbox-card input[type=radio]:checked+.content {
    background: var(--bg-linear);
    border-left: 3px solid #000
}

.search-multiple .col-lg-7 {
    border-right: 1px solid #ccc
}

.search-multiple .loaixe-item {
    cursor: pointer;
    padding: 0 10px;
    border-radius: 5px;
    background-color: #eee
}

.box-product.hot .pic-product, .cart-product, .search-multiple .loaixe-item .image, .thongso p {
    margin-bottom: 0
}

.search-multiple .loaixe-item .image img {
    height: 80px
}

.search-multiple .loaixe-item .name {
    font-size: 18px;
    font-weight: 700
}

.search-multiple .hangxe-item {
    border-radius: 5px;
    padding: 7px 5px 5px
}

.search-multiple .hangxe-item .image {
    margin: 0 auto 5px
}

.search-multiple .hangxe-item .image img {
    height: 20px
}

#my-phone-circle, .blog-r .vert .simply-scroll-list li {
    height: 50px !important
}

.search-multiple .giaban-item {
    padding: 5px;
    background: #eee;
    border-radius: 5px
}

.search-multiple .giaban-item:hover, .search-multiple .hangxe-item:hover, .search-multiple .loaixe-item:hover {
    background: var(--bg-linear)
}

.search {
    display: flex;
    width: 100%
}

.search input::-webkit-input-placeholder {
    color: #313131
}

.search input:-moz-placeholder {
    color: #313131
}

.search input::-moz-placeholder {
    color: #313131
}

.search input:-ms-input-placeholder {
    color: #313131
}

.wrap-intro {
    background-color: #eee
}

.news-intro:before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 50px);
    top: 10px;
    left: 90px;
    background-color: #cacaca
}

.news-scroll:after, .news-scroll:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 85px;
    border-radius: 100%;
    background-color: #cacaca
}

.news-scroll:before {
    top: 10px
}

.news-scroll:after {
    bottom: 40px
}

.news-control {
    left: 85px;
    font-size: 13px;
    opacity: .5;
    z-index: 1;
    cursor: pointer
}

.news-control:hover {
    opacity: 1;
    color: #ec2d3f
}

.news-control#up {
    top: -10px
}

.news-shadow {
    padding-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.news-shadow .news-shadow-time {
    font-size: 13px;
    width: 75px;
    margin-right: 45px
}

.news-shadow .news-shadow-time:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 20px / 2);
    right: -26px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/pattern-news.png)
}

.news-shadow .news-shadow-article {
    width: calc(100% - 120px);
    padding: 14px 15px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #cecabb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.news-shadow .news-shadow-article:before {
    content: "";
    position: absolute;
    top: calc(50% - 26px / 2);
    left: -13px;
    z-index: 0;
    border-top: 13px solid transparent;
    border-right: 13px solid #cecabb;
    border-bottom: 13px solid transparent
}

.news-shadow .news-shadow-article:after {
    content: "";
    position: absolute;
    top: calc(50% - 24px / 2);
    left: -11px;
    z-index: 1;
    border-top: 12px solid transparent;
    border-right: 11px solid #fff;
    border-bottom: 12px solid transparent
}

.news-shadow .news-shadow-article .news-shadow-image {
    margin-right: 10px;
    width: 90px
}

.news-shadow .news-shadow-article .news-shadow-info {
    width: calc(100% - 100px)
}

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-name {
    height: 36px;
    font-size: 15px;
    font-weight: 700
}

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a {
    color: #222
}

.news .news-name a:hover, .news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a:hover {
    color: #ec2d3f
}

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc {
    height: 38px;
    font-size: 13px
}

.video {
    cursor: pointer;
    margin-bottom: 1rem
}

.video .video-image {
    position: relative;
    margin-bottom: .75rem
}

.video .video-image:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 35px;
    top: calc(50% - 50px / 2);
    left: calc(50% - 35px / 2);
    z-index: 1;
    background-repeat: no-repeat;
    background-image: url(../images/play.png)
}

.video .video-name {
    text-align: center;
    font-size: 16px;
    color: #212529;
    margin-bottom: 0
}

.wrap-khuyenmai {
    background: url(../images/bg_khuyenmai.jpg) bottom center/cover no-repeat
}

.khachhang-item {
    width: 450px;
    border-radius: 15px;
    padding: 15px;
    background-color: #f8f8f8;
    transition: .3s ease-in-out
}

.owl-item.active.center .khachhang-item {
    transform: scale(1.2)
}

.khachhang-item:hover, .owl-item.active.center .khachhang-item {
    color: #fff;
    background-color: var(--color-main)
}

.khachhang-item:hover .name, .owl-item.active.center .khachhang-item .name {
    color: #fff !important
}

.khachhang-item .icon {
    width: 60px;
    margin-bottom: 15px
}

.khachhang-item .icon svg {
    color: #d0d5d9
}

.khachhang-item .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    padding: 15px;
    border-radius: 15px;
    transform: translate(-15px, 15px)
}

.khachhang-item .image, .khachhang-item .image img {
    border-radius: 100%
}

.khachhang-item .info .name {
    width: calc(100% - 80px);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--color-main);
    font-weight: 600;
    margin-bottom: 0
}

.khachhang-item .info .name span {
    display: block;
    color: #989898;
    font-size: 13px;
    font-weight: 400
}

.web-item .photo {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative
}

.web-item:hover .photo span {
    background-position: bottom;
    background-repeat: no-repeat
}

.web-item .photo span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -ms-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
    background-position: top;
    background-repeat: no-repeat
}

.web-item:hover .info {
    opacity: 1;
    visibility: visible;
    bottom: 0
}

.web-item .info {
    position: absolute;
    padding: 10px;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: -20px;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-transition: .3s ease-in;
    transition: .3s ease-in;
    color: #fff
}

.color-pro-detail, .size-pro-detail {
    transition: .3s;
    cursor: pointer;
    position: relative
}

.web-item .info .name {
    font-size: 1.1rem
}

.web-item .info .price span {
    font-size: 1.4rem
}

.web-item .info .d-flex a {
    color: #fff;
    border-bottom: 2px solid;
    font-size: .9rem;
    padding: 2px 14px;
    transition: .4s
}

.web-item .info .d-flex a:hover {
    color: var(--second)
}

#frm-sellcar {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%)
}

#frm-sellcar .frm-content {
    width: 450px;
    max-width: 100%
}

#product-title, .pro-detail-title {
    margin: 0 0 12px;
    color: #20150f;
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 38px;
    text-transform: capitalize
}

.left-pro-detail {
    width: 660px;
    max-width: 100%
}

.camket-pro-detail {
    width: 250px
}

.camket-pro-detail ol, .camket-pro-detail ul {
    list-style: none;
    padding: 0
}

.camket-pro-detail ul li {
    padding-left: 25px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/></svg>') left 5px no-repeat
}

.right-pro-detail {
    width: calc(100% - 682px)
}

.pro-detail-info {
    margin-bottom: 20px
}

.pro-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px
}

.pro-detail-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1.4
}

.pro-detail-meta__check {
    width: 17px;
    height: 17px;
    flex-shrink: 0
}

.pro-detail-meta__label {
    color: #717171;
    font-weight: 500
}

.pro-detail-meta__value {
    color: #ec3338;
    font-weight: 500
}

.pro-detail-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px
}

.pro-detail-price__label {
    color: #000;
    font-size: 16px;
    font-weight: 700
}

.price-new-pro-detail, .pro-detail-price__new {
    font-weight: 700;
    font-size: 21px;
    color: #ec3338;
    letter-spacing: 0
}

.price-old-pro-detail, .pro-detail-price__old {
    font-size: 16px;
    font-weight: 500;
    color: #838383;
    text-decoration: line-through;
    padding-left: 0
}

.pro-detail-attrs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px
}

.pro-detail-attr {
    display: flex;
    gap: 10px 14px;
    align-items: center
}

.pro-detail-attr .attr-label-pro-detail, .pro-detail-attr__label {
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2
}

.pro-detail-attr__options {
    flex: 1 1 auto;
    gap: 5px !important
}

.pro-detail-desc {
    margin-bottom: 18px;
    color: #727272;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px
}

.pro-detail-desc p {
    margin-bottom: .5rem
}

.pro-detail-desc p:last-child {
    margin-bottom: 0
}

.pro-detail-cart.cart-pro-detail {
    gap: 12px;
    margin-bottom: 18px
}

.pro-detail-cart__add, .pro-detail-cart__buy {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.pro-detail-cart__buy {
    flex: 1 1 280px;
    padding: 8px 16px;
    background: #40b604;
    color: #fff !important
}

.pro-detail-cart__buy:hover {
    background: #38a003;
    color: #fff !important
}

.pro-detail-cart__buy-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2
}

.pro-detail-cart__buy-sub {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    opacity: .95
}

.pro-detail-cart__add {
    flex: 0 1 210px;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    background: #f4f4f4;
    border: 1px solid rgba(64, 182, 4, .35);
    color: #40b604 !important;
    font-size: 16px;
    font-weight: 600
}

.pro-detail-cart__add:hover {
    background: #fff;
    border-color: #40b604;
    color: #40b604 !important
}

.pro-detail-cart__add img {
    width: 20px;
    height: 18px;
    flex-shrink: 0
}

.pro-detail-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px
}

.pro-detail-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.pro-detail-share__label {
    color: #000;
    font-size: 16px;
    font-weight: 600
}

.pro-detail-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 14px;
    font-weight: 500
}

.pro-detail-views img {
    width: 16px;
    height: 16px
}

.pro-detail-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid rgba(0, 0, 0, .1);
    vertical-align: -1px
}

.product-video {
    width: 71px;
    height: 71px;
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin: 5px;
    box-shadow: 0 0 2px #333
}

.gallery-pro-detail {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: nowrap;
    width: 100%
}

.gallery-pro-detail__nav {
    width: 84px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.gallery-pro-detail .slider-product-thumbs {
    width: 84px
}

.gallery-pro-detail .slider-product-thumbs .slick-list {
    height: 471px !important
}

.gallery-pro-detail__nav.has-video .slider-product-thumbs .slick-list {
    height: 374px !important
}

.gallery-pro-detail .slider-product-thumbs .item {
    padding: 0 0 14px
}

.gallery-pro-detail .slider-product-thumbs .item:last-child {
    padding-bottom: 0
}

.gallery-pro-detail .slider-product-thumbs .item a, .product-video-thumb {
    display: block;
    position: relative;
    width: 84px;
    height: 83px;
    border-radius: 6px;
    overflow: hidden;
    background: #f4f4f4;
    border: 1px solid transparent;
    transition: border-color .2s ease
}

.gallery-pro-detail .slider-product-thumbs .item.slick-active.slick-current a, .gallery-pro-detail .slider-product-thumbs .item.slick-current a {
    border-color: #40b604;
    box-shadow: none
}

.gallery-pro-detail .slider-product-thumbs .item a img, .product-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px
}

.product-video-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .18);
    pointer-events: none
}

.product-video-thumb__play img {
    width: 27px;
    height: 27px;
    object-fit: contain
}

.gallery-pro-detail .slider-products {
    flex: 1;
    min-width: 0;
    background: #fff;
    overflow: hidden;
    border: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}

.gallery-pro-detail .slider-products .item {
    padding: 0;
    text-align: center
}

.gallery-pro-detail .slider-products .item a {
    display: block;
    border-radius: 10px;
    overflow: hidden
}

.gallery-pro-detail .slider-products .item img {
    width: 100%;
    height: 471px;
    max-height: 471px;
    object-fit: cover;
    border-radius: 10px
}

.gallery-pro-detail .slider-products .slick-arrow {
    width: 32px;
    height: 32px;
    color: #333;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 50%;
    z-index: 2
}

.title-pro-detail h2 {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-main);
    margin-bottom: 0
}

.comment-pro-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.social-plugin-pro-detail {
    margin-bottom: 1rem;
    margin-top: 0 !important
}

.desc-pro-detail .attrs {
    margin: 0 0 20px;
    padding: 0;
    list-style: none
}

.desc-pro-detail .attrs li:first-child {
    border-top: 0
}

.desc-pro-detail .attrs li {
    padding: 10px 0 7px;
    border-top: 1px solid #989898;
    color: #989898
}

.desc-pro-detail .attrs li svg {
    margin-top: -2px
}

.attr-pro-detail {
    width: 100%;
    list-style: none;
    padding: 0;
    margin-left: 0
}

.attr-pro-detail li {
    margin-bottom: 5px
}

.attr-label-pro-detail {
    font-size: 16px;
    font-weight: 600;
    margin: 0 !important;
}

.attr-content-pro-detail {
    display: inline-block;
    margin-bottom: 0
}

.brand-pro-detail a {
    background: var(--color-red);
    color: #fff;
    border-radius: 2px;
    padding: 2px 5px
}

.price-new-pro-detail {
    font-weight: 700;
    font-size: 18px;
    color: #ec3338
}

.price-old-pro-detail {
    font-size: 16px;
    font-weight: 500;
    color: #838383;
    text-decoration: line-through;
    padding-left: 0
}

.price-discount-pro-detail {
    font-size: 12px;
    font-weight: 600;
    color: #ec3338;
    border: 1px solid #ec3338;
    background: rgba(236, 51, 56, .08);
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 4px
}

.color-pro-detail {
    vertical-align: top;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    margin: 0 8px 5px 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 1px solid #dadada
}

.size-pro-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    margin: 0 8px 0 0;
    border: 1px solid #dadada;
    background-color: #fff;
    border-radius: 5px;
    font-size: 13px
}

.btn-option input:checked+span, .color-option input:checked+.circle, .size-pro-detail.active {
    border-color: #40b604;
    background: #40b604;
    color: #fff
}

.btn-option {
    cursor: pointer;
    margin: 0
}

.btn-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 20px;
    min-height: 28px;
    border: 1px solid #40b604;
    border-radius: 5px;
    background: #fff;
    color: #40b604;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    transition: .2s
}

.btn-option:hover span {
    background: rgba(64, 182, 4, .08)
}

.btn-option input:checked+span {
    background: #40b604;
    border-color: #40b604;
    color: #fff
}

.cart-pro-detail a {
    text-align: center;
    cursor: pointer;
    text-transform: none
}

.product-attr .attr-options {
    gap: 5px
}

.color-pro-detail.active:after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 29px;
    height: 29px;
    border: 1px solid var(--color-main);
    border-radius: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23cccccc" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/></svg>') center center no-repeat
}

.quantity-pro-detail {
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    height: 45px;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #dfdfdf
}

.quantity-pro-detail span {
    line-height: 25px;
    padding: 0;
    width: 45px;
    height: 100%;
    color: #000;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500
}

.btn-option, .color-option, .img-option, .img-option span {
    display: inline-block
}

.quantity-pro-detail span.quantity-plus-pro-detail {
    border-left: 0
}

.quantity-pro-detail span.quantity-minus-pro-detail {
    border-right: 0
}

.quantity-pro-detail input {
    height: 100%;
    border: none;
    width: calc(100% - 90px);
    text-align: center;
    font-size: 15px
}

.tags-pro-detail a {
    font-size: 12px;
    padding-bottom: .175rem;
    margin: 0 5px 5px 0
}

.tags-pro-detail a i {
    font-size: 11px;
    margin: 5px 5px 0 0
}

.tabs-pro-detail {
    margin-top: 2rem
}

.tabs-pro-detail .nav-tabs .nav-link {
    border-top-width: 3px;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.1rem
}

.tabs-pro-detail .nav-tabs .nav-item.show .nav-link, .tabs-pro-detail .nav-tabs .nav-link.active {
    border-top-color: #555
}

.thongso-pro-detail table {
    width: 100%;
    border-collapse: collapse
}

.thongso-pro-detail table td, .thongso-pro-detail table th {
    border: 1px solid #ccc;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top
}

.thongso-pro-detail table th {
    background-color: #f7f7f7;
    font-weight: 600;
    width: 220px
}

.pro-info-main, .pro-news-sidebar {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px 18px 24px
}

.pro-info-main__title, .pro-news-sidebar__title {
    margin: 0 0 16px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: #20150f
}

.pro-news-sidebar__title {
    color: #000
}

.pro-info-main .pro-info-toc .wrap-toc {
    margin: 0 0 18px;
    padding: 0 14px;
    min-height: 40px;
    background: #f4f4f4;
    border: 1px solid #40b604;
    border-radius: 4px
}

.pro-info-main .pro-info-toc .toc-head {
    min-height: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #412921
}

.pro-info-main .pro-info-toc .pro-info-toc__icon, .pro-info-main .pro-info-toc .toc-head svg {
    color: #412921;
    fill: #412921
}

.pro-info-main .pro-info-toc .pro-info-toc__icon {
    display: inline-flex;
    align-items: center;
    margin-right: 10px
}

.pro-info-main .pro-info-toc .toc-list {
    display: none;
    margin-top: 0;
    padding-bottom: 10px
}

.pro-info-main .pro-info-toc .pro-info-toc__label {
    display: none
}

.pro-info-main .pro-info-toc .toc-list li a {
    color: #412921 !important
}

.pro-info-content#noidung {
    max-height: 615px;
    padding-bottom: 70px;
    overflow: hidden
}

.pro-info-content#noidung.show-full-content {
    max-height: none;
    overflow: visible;
    padding-bottom: 70px
}

.pro-info-content h1, .pro-info-content h2, .pro-info-content h3 {
    color: #412921;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    margin: 1.1em 0 .55em
}

.pro-info-content li, .pro-info-content p {
    color: #727272;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px
}

.pro-info-content img {
    max-width: 100%;
    height: auto;
    margin: 12px 0
}

.pro-info-more.hide-content {
    background: linear-gradient(transparent, #f9f9f9 72%);
    padding: 80px 0 8px
}

.pro-info-more__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 217px;
    height: 51px;
    padding: 0 24px;
    background: #40b604;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    border-radius: 0;
    text-decoration: none !important;
    transition: background .2s ease, opacity .2s ease
}

.pro-info-more__btn:hover {
    background: #369a03;
    color: #fff !important
}

.pro-info-empty {
    color: #888;
    font-size: 14px
}

.pro-news-sidebar__list.slick-pro-news {
    margin: 0;
    overflow: hidden
}

.pro-news-sidebar__list.slick-pro-news .slick-list {
    margin: 0;
    overflow: hidden !important
}

.pro-news-sidebar__list.slick-pro-news .slick-slide {
    height: auto
}

.pro-news-slide {
    outline: 0;
    margin: 0 !important;
    padding: 0 0 22px
}

.pro-news-slide .pro-news-card {
    display: block
}

.pro-news-card {
    display: block;
    color: inherit;
    text-decoration: none !important
}

.pro-news-card:hover .pro-news-card__name {
    color: #40b604
}

.pro-news-card__thumb {
    overflow: hidden;
    margin-bottom: 12px;
    background: #eee
}

.pro-news-card__thumb img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover
}

.pro-news-card__name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #000;
    transition: color .2s ease;
    min-height: 43px
}

.pro-news-card__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20.2px;
    color: #888
}

.pro-related {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 22px 20px 18px;
    position: relative
}

.pro-related__title {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: #20150f;
    text-transform: uppercase
}

.pro-related .control-other {
    margin-top: 8px
}

.color-option {
    cursor: pointer;
    position: relative
}

.color-option .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: inline-block
}

.img-option {
    cursor: pointer;
    margin: 4px
}

.img-option span {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    width: 60px;
    height: 60px;
    position: relative
}

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

.img-option input:checked+span {
    border-color: var(--color-main);
    box-shadow: 0 0 0 2px #000 inset
}

.btn-option.disabled span, .color-option.disabled .circle, .img-option.disabled span {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none
}

#advisory-modal .btn-close {
    position: absolute;
    top: 5px;
    right: 5px
}

#advisory-modal .modal-dialog {
    max-width: 700px
}

#quote-modal .modal-dialog {
    max-width: 480px
}

#quote-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden
}

#quote-modal .modal-body {
    padding: 28px 24px 24px
}

.quote-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2
}

.quote-modal__title {
    margin: 0 36px 18px 0;
    color: #08194C;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35
}

.quote-modal__form {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.thongso {
    line-height: 1
}

.pic-news {
    width: 210px
}

.info-news {
    width: calc(100% - 210px);
    padding-left: 20px
}

.name-news {
    color: #252525;
    font-size: 17px;
    line-height: normal;
    font-weight: 600
}

.desc-news, .news .news-desc {
    margin-top: 5px;
    line-height: 22px
}

.name-news:hover {
    color: var(--background-static)
}

.time-news, .time-newshome {
    color: var(--color-gray);
    margin-bottom: 10px
}

.desc-news {
    color: #676767
}

.news .news-name {
    margin-bottom: .5rem
}

.news .news-name a {
    color: #333;
    font-size: 16px
}

.news .news-time {
    color: #84878a;
    margin-bottom: .25rem
}

.news .news-desc {
    color: #333
}

.othernews b {
    margin-bottom: 10px;
    font-size: 15px
}

.othernews {
    position: sticky;
    top: 60px;
    z-index: 11
}

.contact-input, .contact-map {
    position: relative
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start
}

.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch
}

.contact-form .form-consult__btn {
    width: auto;
    flex: 1 1 220px;
    min-width: 0;
    margin-top: 0
}

.contact-form__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 140px;
    height: 59px;
    padding: 0 24px;
    border: 1px solid #C6C6C6;
    border-radius: 104px;
    background: #fff;
    color: #333;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer
}

.contact-form__reset:hover {
    border-color: #08194C;
    color: #08194C
}

.pic-news-other {
    width: 40%;
    border-radius: 7px;
    overflow: hidden
}

.info-news-other {
    width: 60%;
    padding: 0 10px
}

.name-news-other {
    color: #252525;
    font-weight: 600;
    padding: 0 !important;
    display: -webkit-box !important;
    font-size: 14px !important;
    margin-bottom: 0
}

.desc-news-other {
    color: #666;
    font-size: 13px
}

.baogia-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--color-main);
    border-radius: 5px
}

.baogia-item h3 {
    padding: 0 10px;
    font-size: 16px;
    margin-bottom: 0
}

.baogia-item span {
    font-size: 18px;
    transition: .3s;
    background: var(--color-main);
    color: #fff;
    display: flex;
    width: 80px;
    height: 66px;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    border-radius: 3px
}

.bg {
    background: linear-gradient(0deg, #ccc 0, rgba(153, 153, 153, 0) 100%)
}

.author-item .image, .news-slick .img {
    width: 150px
}

.author-item .info {
    width: calc(100% - 175px)
}

.author-item .name, .fixbar ul li a i {
    font-size: 20px
}

.author-item .subname {
    color: #999
}

.form-floating-cus>select, .form-floating.form-floating-cus>input {
    height: 45px;
    padding: .7rem .5rem
}

.form-floating.form-floating-cus>textarea {
    height: 100px
}

.form-floating.form-floating-cus>label {
    padding: 10px 5px;
    color: var(--color-gray)
}

.contact-article {
    margin-bottom: 1.5rem
}

.contact-input, .news-slick h3 a.name-newshome {
    margin-bottom: 10px
}

.contact-input input, .contact-input textarea {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none
}

.contact-input input:focus, .contact-input textarea:focus {
    box-shadow: none;
    outline: 0
}

.contact-input textarea {
    resize: none;
    height: 150px
}

.contact-input .custom-file-label::after {
    content: attr(title)
}

.contact-map {
    overflow: hidden;
    height: 350px
}

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

.blink {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: blink;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

.wrap-frame {
    position: fixed;
    width: 50px;
    height: auto;
    right: 20px;
    bottom: 100px;
    z-index: 10
}

.btn-frame {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-bottom: 30px
}

.btn-frame i {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: var(--color-main);
    position: relative;
    z-index: 1;
    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
}

.btn-frame i svg {
    color: #fff;
    fill: #fff
}

.btn-frame .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.btn-frame .kenit-alo-circle {
    width: 120%;
    height: 120%;
    top: -10%;
    right: -10%;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid rgba(7, 41, 103, .8);
    opacity: .1;
    border-color: var(--color-main);
    opacity: .5
}

.btn-frame .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

.btn-frame .animated, .js-facebook-messenger-box.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.btn-frame .kenit-alo-circle-fill {
    width: 140%;
    height: 140%;
    top: -20%;
    right: -20%;
    position: absolute;
    border-radius: 100%;
    border: 2px solid transparent;
    background-color: rgba(7, 41, 103, .35);
    opacity: .4
}

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

.btn-frame span {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    opacity: 0;
    padding: 6px 45px 6px 20px;
    border-radius: 30px;
    color: #fff;
    background-color: var(--color-main);
    white-space: nowrap;
    transition: .3s ease-in-out;
    width: 0;
    overflow: hidden
}

.fixbar ul, .plugbar ul, .toolbar ul {
    list-style: none;
    padding: 0
}

.js-facebook-messenger-box svg#close-icon, .js-facebook-messenger-box svg#fb-msng-icon {
    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    position: absolute
}

.btn-frame:hover span {
    opacity: 1;
    width: 265px
}

.js-facebook-messenger-top-header {
    background: #487dfc;
    color: #fff;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 5px 5px 0 0
}

.js-facebook-messenger-container.closed, .js-facebook-messenger-tooltip.closed {
    display: none !important
}

.js-facebook-messenger-tooltip {
    display: none;
    position: fixed;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    -webkit-box-shadow: rgba(0, 0, 0, .15) 0 2pt 10pt;
    box-shadow: rgba(0, 0, 0, .15) 0 2pt 10pt
}

.js-facebook-messenger-close-tooltip {
    width: 10px;
    height: 10px;
    display: inline-block;
    cursor: pointer;
    margin-left: 10px
}

.js-facebook-messenger-box.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

.js-facebook-messenger-box {
    display: block;
    position: fixed;
    cursor: pointer;
    bottom: 150px;
    right: 17px;
    width: 56px;
    height: 56px;
    text-align: center;
    background: #1182fc;
    border-radius: 100%;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3)
}

.js-facebook-messenger-box.rotate svg#fb-msng-icon, .js-facebook-messenger-box.rotate.open svg#close-icon {
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.js-facebook-messenger-box svg#fb-msng-icon {
    width: 32px;
    height: 33px;
    top: 13px;
    left: 12px;
    opacity: 1;
    overflow: hidden;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out
}

.js-facebook-messenger-box.rotate svg#close-icon {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.js-facebook-messenger-box svg#close-icon {
    opacity: 0;
    width: 19px;
    height: 20px;
    top: 19px;
    left: 19px;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out
}

.js-facebook-messenger-container {
    width: 250px;
    position: fixed;
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    bottom: 110px;
    right: 90px;
    border-radius: 10px;
    pointer-events: none;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out
}

.js-facebook-messenger-top-head {
    display: block;
    position: relative;
    text-align: center;
    line-height: 1;
    padding: 10px;
    font-size: 14px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    background: #1182fc;
    width: 220px
}

.js-facebook-messenger-container iframe, .js-facebook-messenger-container-button iframe {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.cart-fixed, .cart-fixed span {
    border-radius: 100%;
    text-align: center
}

.js-facebook-messenger-box, .js-facebook-messenger-button, .js-facebook-messenger-tooltip {
    z-index: 999
}

.js-facebook-messenger-container, .js-facebook-messenger-container-button {
    z-index: 1000
}

.js-facebook-messenger-tooltip {
    color: #404040;
    background: #fff;
    bottom: 97px;
    right: 97px
}

.js-facebook-messenger-container.open {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    pointer-events: all
}

.js-facebook-messenger-box.open svg#fb-msng-icon {
    opacity: 0
}

.cart-fixed {
    position: fixed;
    right: 20px;
    bottom: 290px;
    z-index: 10;
    background: #4b4f56;
    width: 50px;
    height: 50px;
    color: #fff !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.fixbar, .toolbar {
    position: fixed;
    z-index: 500;
    bottom: 0
}

.fixbar, .toolbar ul li a {
    width: 100%;
    display: block
}

.cart-fixed:hover {
    background: var(--color-main)
}

.cart-fixed span {
    position: absolute;
    top: 0;
    right: -5px;
    color: #fff;
    width: 25px;
    height: 25px;
    background: #ec2d3f;
    line-height: 25px;
    font-size: 11px
}

.support-online a, .support-online i {
    width: 40px;
    height: 40px;
    position: relative
}

@keyframes tada {
    0%, to {
        transform: scaleX(1)
    }

    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.3, 1.3, 1.3) rotate(3deg)
    }

    40%, 60%, 80% {
        transform: scale3d(1.3, 1.3, 1.3) rotate(-3deg)
    }
}

.toolbar {
    background: var(--background-static);
    width: 100%;
    padding: 3vw;
    height: auto;
    left: 0;
    max-height: 65px
}

.toolbar ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0
}

.toolbar ul li {
    text-align: center;
    width: 25%
}

.toolbar ul li a {
    cursor: pointer
}

.toolbar ul li a img {
    height: 20px;
    width: 20px;
    animation: 1.2s infinite tada
}

.toolbar ul li a span {
    color: #fff;
    font-size: 10px
}

.fixbar {
    background: #f0eff4;
    border-top: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 50px
}

.plugbar ul, .wcircle-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center
}

.fixbar ul {
    margin: 0
}

.fixbar ul li {
    margin: 0 auto 10px;
    text-align: center;
    width: 25%;
    float: left
}

.fixbar .icon-cart-mobile, .fixbar .icon-cart-new, .fixbar .icon-home-new, .fixbar .icon-hotdeal-new {
    width: 20px;
    height: 20px;
    display: block;
    margin: 8px auto 0
}

.fixbar .icon-cart-mobile {
    background: url(../images/cart-mobile.png) no-repeat
}

.cart-total-head-mobile {
    font-size: 10px;
    position: absolute;
    background: red;
    color: #fff !important;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    line-height: 15px;
    top: 5px;
    margin-left: 5px
}

.desc-newshome, .listvideos, .name-newshome, .name-video {
    color: var(--color-black)
}

.fixbar ul li a {
    font-size: 11px;
    text-decoration: none;
    color: #333
}

.plugbar {
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #eae6e6;
    width: 100%;
    right: 0;
    max-width: 767px;
    margin: 0 auto;
    background: #fff;
    padding: 9px 10px 10px 7px;
    z-index: 10
}

.listvideos, .newshome-intro .view-newshome, .owl-video {
    margin-top: 10px
}

.plugbar ul {
    margin: 0;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.plugbar ul li {
    width: 20%;
    float: left
}

.plugbar ul li a {
    display: block;
    color: #696969;
    font-size: 12px;
    text-align: center;
    position: relative
}

.plugbar ul li a i {
    font-size: 20px;
    color: #696969
}

.plugbar ul li a span {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -40px;
    left: calc(50% - 50px / 2);
    font-size: 14px;
    display: block;
    border: 1px solid rgba(234, 230, 230, .5);
    border-radius: 100%
}

.support-online {
    position: fixed;
    z-index: 999;
    left: 10px;
    bottom: 0
}

.support-online a {
    margin: 20px 10px;
    text-align: left;
    display: block
}

.support-online a span, .support-online i {
    text-align: center;
    z-index: 999;
    color: #fff
}

.support-online i {
    background: #43a1f3;
    border-radius: 100%;
    font-size: 20px;
    line-height: 1.9
}

.support-online a span {
    border-radius: 2px;
    background: #67b634;
    padding: 9px;
    display: none;
    width: 180px;
    margin-left: 10px;
    position: absolute;
    top: 0;
    left: 40px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -webkit-animation: .7s headAnimation;
    animation: .7s headAnimation
}

.support-online a span:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #67b634 transparent transparent;
    position: absolute;
    left: -10px;
    top: 10px
}

.support-online .kenit-alo-circle-fill {
    width: 60px;
    height: 60px;
    top: -10px;
    position: absolute;
    border-radius: 100%;
    border: 2px solid transparent;
    background-color: rgba(0, 175, 242, .5);
    opacity: .75;
    right: -10px
}

.wcircle-menu-item, .wcircle-menu-item img {
    height: 50px;
    border-radius: 50%;
    width: 50px
}

.support-online .kenit-alo-circle {
    width: 50px;
    height: 50px;
    top: -5px;
    right: -5px;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid #0089b9;
    opacity: .1;
    opacity: .5
}

.wcircle-icon, .wcircle-icon:before, .wcircle-menu-item {
    background: var(--color-main)
}

.support-online .support-online .btn-support {
    cursor: pointer
}

.support-online .mes i {
    background: orange
}

.support-online .call-now i {
    background: green
}

.widget-mobile {
    position: fixed;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 9999999
}

#my-phone-circle {
    position: relative;
    width: 50px !important
}

.wcircle-open .wcircle-icon i:before {
    content: "\f00d"
}

.wcircle-icon {
    border-radius: 50%;
    position: relative !important;
    display: flex !important;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.wcircle-icon:before {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    border-radius: 50%;
    left: -5px;
    top: -5px;
    -webkit-animation: 1s ease-in-out infinite pulse;
    animation: 1s ease-in-out infinite pulse
}

.wcircle-icon:after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background: rgba(204, 44, 50, .5);
    border-radius: 50%;
    left: -15px;
    top: -15px;
    -webkit-animation: 2s ease-in-out infinite zoomIn;
    animation: 2s ease-in-out infinite zoomIn
}

.wcircle-menu {
    position: absolute !important;
    left: 0;
    top: 0;
    display: none
}

.box-product, .color-product, .pic-product, .video-main {
    position: relative
}

.wcircle-menu-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.wcircle-icon i, .wcircle-menu-item i {
    font-size: 25px;
    color: #fff;
    position: relative;
    z-index: 9999
}

.shake-anim {
    -webkit-animation: 1s ease-in-out infinite shake-anim;
    animation: 1s ease-in-out infinite shake-anim;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.video-main {
    height: 400px
}

.listvideos, .view-newshome {
    height: 40px;
    border: 1px solid #ccc
}

.video-main iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.listvideos {
    width: 100%;
    padding: 0 10px;
    cursor: pointer
}

.item-video1 img {
    max-height: 292px
}

.item-video2 img {
    height: 102px
}

.pic-video-2:before, .pic-video:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 35px;
    top: calc(50% - 50px / 2);
    left: calc(50% - 35px / 2);
    z-index: 1;
    background: url(../images/play.png) center center/cover no-repeat;
    cursor: pointer
}

.name-video {
    font-size: 16px;
    margin-bottom: 0
}

.attr-product, .name-newshome {
    font-size: 14px
}

.newshome-intro .name-newshome {
    margin: 10px 0
}

.newshome-scroll {
    width: 50%;
    overflow: hidden;
    max-height: 406px
}

.news-slick {
    display: flex;
    margin-bottom: 20px
}

.news-slick .info {
    width: calc(100% - 150px);
    padding-left: 15px
}

.flex_ttnb {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between
}

.newshome-intro {
    width: calc(50% - 20px)
}

.pic-newshome-normal {
    float: left;
    width: 34%;
    margin-right: 3%;
    margin-bottom: 0
}

.info-newshome-normal {
    float: left;
    width: calc(100% - 37%)
}

.name-newshome {
    line-height: normal
}

.desc-newshome {
    margin-bottom: 0;
    text-align: justify
}

.view-newshome {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000
}

.box-product {
    border-radius: 8px;
    overflow: visible;
    background: 0 0;
    border: 0;
    padding: 0;
    height: 100%;
    border: 1px solid transparent;
    padding: 4px 5px
}

.box-product .icon {
    width: 80px;
    height: 2px;
    background: #333;
    margin: 0 auto 1rem
}

.color-product {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    cursor: pointer;
    margin-left: 2px;
    border: 1px solid rgba(0, 0, 0, .12);
    flex-shrink: 0
}

.colors-product {
    gap: 4px;
    margin: 8px 0 0;
    min-height: 20px
}

.color-product.active::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 24px;
    height: 24px;
    border: 1px solid #40b604;
    border-radius: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23ffffff" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/></svg>') center center no-repeat
}

.pic-product {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 7px;
    border: .73px solid #dfdfdf;
    background: #fff;
    transition: border-color .25s ease
}

.pic-product .scale-img {
    display: block;
    width: 100%;
    height: 100%
}

.pic-product .scale-img:before {
    display: none
}

.pic-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    transition: transform .45s ease
}

.product-tool {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1
}

.product-tool a {
    cursor: pointer;
    width: 50%;
    padding: 10px;
    text-align: center;
    color: #fff;
    background-color: rgb(0 0 0 / .6)
}

.product-tool a:hover {
    background-color: rgb(0 0 0 / .8)
}

.product-tool a svg {
    margin-right: 5px
}

.product-tool a span {
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 300
}

.box-product:hover .product-tool {
    opacity: 1;
    visibility: visible
}

.info-product {
    padding-top: 12px
}

.info-product .desc {
    max-height: 100px;
    overflow: auto;
    height: 100px
}

.info-product h3 {
    margin: 0
}

.name-product {
    margin: 0;
    min-height: 36px;
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    text-transform: capitalize;
    transition: color .2s ease
}

.price-product {
    margin: 17px 0 0;
    line-height: 1;
    gap: 12px
}

.price-new {
    position: relative;
    display: inline-block;
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #e30000;
    font-weight: 700;
    letter-spacing: 0
}

.price-old {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #727272;
    text-decoration: line-through
}

.box-product.hot {
    margin: 0;
    padding: 0;
    border-radius: 20px;
    overflow: hidden
}

.box-product.hot .info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    background-color: rgba(105, 215, 249, .5)
}

.product-inner .slider-index-thumbs {
    margin: -10px 0
}

.box-product-list {
    display: flex;
    padding: 5px 10px
}

.box-product-list .info-product {
    width: calc(100% - 32%)
}

.box-product-list .pic-product {
    width: 30%;
    padding: 0;
    margin: 0 auto;
    text-align: center
}

.price-per {
    position: absolute;
    top: 8px;
    right: 7px;
    background: #e30000;
    border: 0;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    text-align: center;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 10.26px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    pointer-events: none
}

.box-images, .cats-bar, .cats-bar-icon span, .choose-list button, .dm-noibat, .dm-noibat a {
    position: relative
}

.cart-product span {
    cursor: pointer;
    width: calc(50% - 3px);
    color: #fff;
    text-transform: capitalize;
    text-align: center;
    padding: 7px 5px;
    border-radius: 3px
}

.blog-l-img a, .box-images img {
    width: 100%;
    transition: .5s
}

.bg-red, .cart-add {
    background-color: var(--color-red)
}

.cart-add:hover {
    background-color: var(--color-dark-red)
}

.cart-buy {
    background-color: var(--color-green)
}

.cart-buy:hover {
    background-color: var(--color-dark-green)
}

.dm-noibat {
    max-width: 1000px;
    margin: auto auto 40px
}

.dm-noibat a {
    cursor: pointer;
    color: #333;
    transition: .4s;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    display: block;
    background: #f7f7f7;
    border-radius: 5px;
    border: 1px solid #eaeaea;
    height: 100%;
    padding: 10px
}

.dm-noibat a.active, .dm-noibat a:hover {
    background: var(--background-static);
    color: #fff
}

.cats-bar {
    width: 50px;
    padding-top: 3px
}

.cats-bar-icon {
    width: 30px;
    cursor: pointer
}

.cats-bar-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #505050;
    transition: .3s
}

.cats-bar-icon span+span {
    margin-top: 5px
}

.cats-bar-icon.active span:first-child {
    animation: .7s forwards top
}

.cats-bar-icon.not-active span:first-child {
    animation: .7s forwards top-2
}

.cats-bar-icon.active span:nth-child(2) {
    animation: .7s forwards scaled
}

.cats-bar-icon.not-active span:nth-child(2) {
    animation: .7s forwards scaled-2
}

.cats-bar-icon.active span:nth-child(3) {
    animation: .7s forwards bottom
}

.cats-bar-icon.not-active span:nth-child(3) {
    animation: .7s forwards bottom-2
}

@keyframes top {
    0% {
        top: 0;
        transform: rotate(0)
    }

    50% {
        top: 6px;
        transform: rotate(0)
    }

    100% {
        top: 6px;
        transform: rotate(45deg)
    }
}

@keyframes top-2 {
    0% {
        top: 6px;
        transform: rotate(45deg)
    }

    50% {
        top: 6px;
        transform: rotate(0)
    }

    100% {
        top: 0;
        transform: rotate(0)
    }
}

@keyframes bottom {
    0% {
        bottom: 0;
        transform: rotate(0)
    }

    50% {
        bottom: 8px;
        transform: rotate(0)
    }

    100% {
        bottom: 8px;
        transform: rotate(135deg)
    }
}

@keyframes bottom-2 {
    0% {
        bottom: 8px;
        transform: rotate(135deg)
    }

    50% {
        bottom: 8px;
        transform: rotate(0)
    }

    100% {
        bottom: 0;
        transform: rotate(0)
    }
}

@keyframes scaled {
    100%, 50% {
        transform: scale(0)
    }
}

@keyframes scaled-2 {
    0%, 50% {
        transform: scale(0)
    }

    100% {
        transform: scale(1)
    }
}

.cats-owl.list-hot {
    width: calc(100% - 50px)
}

.choose-list button {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid #e8e8e8;
    outline: 0;
    border-radius: 30px;
    transition: .3s ease-in-out;
    border-radius: 63px;
    border: 1px solid #dfdfdf;
    background: #fff
}

.blog-l p, .box-newsi {
    font-weight: 400;
    color: #666
}

.choose-list button span {
    position: relative;
    z-index: 3;
    font-size: 20px
}

.fancybox-tiktok-layout {
    width: auto !important;
    padding: 0;
    background: 0 0
}

.blog-flex {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.blog-l {
    float: left;
    width: 46.1538461538%;
    line-height: 24px
}

.blog-l-img {
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 7px
}

.blog-l-img:hover img {
    transform: scale(1.1)
}

.blog-l h3 a {
    font-size: 16px;
    color: #2f2f2f;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600
}

.blog-l p {
    margin: 9px 0 10px;
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.box-newsi, .box-newsi h3 {
    line-height: 20px;
    font-size: 13px
}

.box-newsi h3, .box-newsi h3 a {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.blog-l a.blog-l-more {
    font-weight: 500;
    font-size: 13px;
    color: #2f2f2f;
    background: #fff;
    display: inline-block;
    vertical-align: top;
    padding: 8px 38px 7px;
    transition: .5s;
    border-radius: 0;
    text-transform: none;
    border: 1px solid #333;
    text-transform: uppercase
}

.blog-l a.blog-l-more:hover {
    background: #2f2f2f;
    color: #fff
}

.blog-r {
    float: right;
    width: 51.282051%;
    height: 317px;
    overflow: hidden
}

.blog-r ul li {
    margin-bottom: 10px !important;
    border-bottom: 1px solid #e8e8e8
}

.box-newsi-img {
    width: 104px;
    max-width: 36%;
    float: left;
    margin-right: 10px
}

.box-newsi h3 {
    font-weight: 500;
    margin: 0 0 7px;
    padding: 0
}

.box-newsi h3 a {
    color: #333;
    font-size: 16px
}

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

.gird-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 238px);
    grid-gap: 15px 15px
}

.box-images {
    overflow: hidden;
    border-radius: 10px
}

.box-images img {
    position: absolute;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    left: 0;
    top: 0
}

.box-images:first-child {
    grid-column: 1/3;
    grid-row: 1/3
}

.border-1 {
    border: 1px solid
}

.color-yellow {
    color: #ff0
}

.hotline a {
    font-size: 14px;
    font-weight: 600;
    animation: 1s ease-in-out infinite blinkColor;
    transition: color .3s ease-in-out;
    line-height: 16px
}

.gradien-pro {
    background: #ffe5e3;
    background: linear-gradient(86deg, #ffe5e3 20%, #ced1fe 70%);
    border: 3px solid var(--color-submain)
}

.gradient-title {
    background: #b7c4ff;
    background: linear-gradient(178deg, #b7c4ff 20%, #7185fc 70%);
    border-radius: 0 0 90px 90px;
    width: 404px;
    text-align: center;
    justify-content: center;
    color: #fff
}

.why-icon {
    width: 49px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff
}

.bg-duhoc, .bg-form, .bg-khoahoc, .bg-teacher {
    background-repeat: no-repeat
}

.why-center-img, .why-icon img {
    object-fit: contain
}

.why-title {
    line-height: 1.25;
    font-size: clamp(16px, 2vw, 24px);
    margin-bottom: 10px
}

.color-666666 {
    color: #666
}

.line-height-15 {
    line-height: 1.5
}

.team {
    background-color: #f9fbfa
}

.bg-duhoc, .bg-f7 {
    background-color: #fff7f7
}

.text-shadow {
    text-shadow: 2px 4px 2px var(--color-main)
}

.bg-duhoc {
    background-image: url(../images/bg-duhoc.png)
}

.bg-khoahoc {
    background-image: url(../images/bg-khoahoc.png)
}

.bg-form {
    background-image: url(../images/bg-form.png)
}

.bg-teacher {
    background-image: url(../images/bg-duhoc.png)
}

.newsletter-input2 input, .newsletter-input2 select {
    padding: 11px 10px
}

.teacher-item .info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(7.7px);
    -webkit-backdrop-filter: blur(7.7px)
}

.text-red {
    color: var(--color-red) !important
}

.journey .col-12:first-child, .journey .col-12:nth-child(4) {
    margin-top: 20px
}

.text-yellow {
    color: gold
}

.feedback-item .p-2 {
    background-image: url(../images/six.png);
    background-repeat: no-repeat;
    background-position: 96% 96%
}

.feedback-item .description {
    height: 147px
}

.wrap-khoa-hoc:nth-child(odd) .order {
    order: -1
}

.bg-khac {
    background-image: url(../images/bg-khac.png);
    background-position: center
}

.wrap-hinhanh {
    background: #e5cfff;
    background: linear-gradient(178deg, #e5cfff 0, #ffebce 38%, #fff 70%, #fff 84%)
}

a.category__btn {
    border-radius: 9px;
    border: 1px solid silver;
    background: #fff;
    padding: 15px;
    display: inline-block;
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

a.category__btn svg {
    margin-right: 4px
}

.CategoriesCat__Item:hover .CategoriesCat__Name {
    color: #40b604
}

.BannerSales__list {
    display: flex;
    gap: 20px
}

a.BannerSaleItem {
    width: 50%;
    border-radius: 15px;
    overflow: hidden
}

.cart b {
    background: red
}

.cart b {
    font-family: Inter;
    font-size: 10px !important;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #fff !important;
    width: 17px;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

section#FlashSale {
    margin: 24px 0 32px
}

section#FlashSale .widthBox {
    position: relative
}

.bannerFlashSale {
    position: relative;
    z-index: 2;
    max-width: 944px;
    width: 100%;
    margin: 0 auto -36px
}

.bannerFlashSale a, .bannerFlashSale img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px
}

.FlashSale__List {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 8px;
    border-radius: 20px;
    border: 5px solid #e31c23;
    background: #f6f6f6;
    padding: 52px 12px 16px;
    margin-top: 0
}

.FlashSale__List .box-product {
    min-width: 0;
    background: #fff;
    border-radius: 10px
}

section.wrap-product-list .container {
    border-radius: 9.246px;
    border: .925px solid #d2d2d2;
    background: #fff;
    margin: 15px auto;
    padding: 21px 13px
}

.box-product:hover .pic-product {
    border-color: #d0d0d0
}

.box-product:hover .name-product {
    color: #40b604
}

.box-product:hover .pic-product .scale-img img, .box-product:hover .pic-product .scale-img:hover img:first-child {
    transform: scale(1.04)
}

.product-loadmore-btn-wrap {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 8px
}

.btn-load-more-product {
    display: inline-block;
    color: #5bb348;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    border-bottom: 1px solid #5bb348;
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease, opacity .2s ease
}

.btn-load-more-product:focus, .btn-load-more-product:hover {
    color: #4a9a3a;
    border-bottom-color: #4a9a3a;
    text-decoration: none
}

.btn-load-more-product.disabled {
    opacity: .6;
    pointer-events: none
}

.wrap-pro-detail, .wrap-pro-info {
    background: #fff;
    padding: 10px 0 40px
}

.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px
}

.home-section-head__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
    text-transform: uppercase
}

.home-section-link {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: #40b604 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #40b604;
    padding-bottom: 2px;
    white-space: nowrap;
    transition: opacity .2s ease
}

.home-section-link:hover {
    opacity: .85
}

.project-accordion {
    display: flex;
    gap: 11px;
    height: 574px;
    width: 100%
}

.project-accordion__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #4e4e4e;
    cursor: pointer;
    transition: flex .45s cubic-bezier(.25, .8, .25, 1)
}

.project-accordion__item.is-active {
    flex: 4.6 1 0;
    border-color: #565656
}

.project-accordion__media {
    position: absolute;
    inset: 0
}

.project-accordion__media img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transform: scale(1.02);
    transition: filter .45s ease, transform .45s ease
}

.project-accordion__shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    transition: background .45s ease, opacity .45s ease
}

.project-accordion__item.is-active .project-accordion__media img {
    filter: none;
    transform: scale(1)
}

.project-accordion__item.is-active .project-accordion__shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .91) 85%)
}

.project-accordion__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px 32px 36px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .35s ease, visibility .3s;
    pointer-events: none
}

.project-accordion__item.is-active .project-accordion__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
}

.project-accordion__name {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-transform: capitalize
}

.project-accordion__meta {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
    color: #fff
}

.project-accordion__meta li {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 2px
}

.project-accordion__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 165px;
    height: 50px;
    padding: 0 22px;
    border: 1px solid #fff;
    border-radius: 54px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    background: 0 0;
    transition: background .2s ease, color .2s ease
}

.project-accordion__btn:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff !important
}

.project-accordion__btn img {
    width: 12px;
    height: 12px;
    transform: scaleX(1) rotate(90deg);
    flex-shrink: 0
}

.home-news {
    padding: 30px 0
}

.home-news__title {
    margin: 0 0 16px;
    color: var(--primary-color);
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase
}

.home-news__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.home-news-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 214px;
    min-height: 214px;
    padding: 5px 6px 13px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    color: inherit;
    text-decoration: none !important;
    transition: box-shadow .25s ease
}

.home-news-card__thumb {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 140px;
    margin: 0 0 10px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #eee;
    box-sizing: border-box;
    transition: border-color .25s ease, box-shadow .25s ease
}

.home-news-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease
}

.home-news-card:hover .home-news-card__thumb img {
    transform: scale(1.04)
}

.home-news-card__name {
    margin: 0;
    height: 46px;
    overflow: hidden;
    color: #4e4e4e;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    transition: font-weight .2s ease
}

.home-news-card:hover {
    box-shadow: 0 0 10px rgba(8, 91, 50, .3)
}

.home-news-card:hover .home-news-card__thumb {
    border-color: var(--primary-color)
}

.home-news-card:hover .home-news-card__name {
    font-weight: 700
}

.home-news__more {
    display: flex;
    justify-content: center;
    margin-top: 30px
}

.home-newsletter {
    background: 0 0;
    padding: 0
}

.home-newsletter__banner {
    position: relative;
    min-height: 114px;
    overflow: hidden;
    background: url(../images/newsletter_bg.png);
    background-size: cover
}

.home-newsletter__bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.home-newsletter__base {
    position: absolute;
    inset: 0;
    background: #085b32
}

.home-newsletter__pattern {
    position: absolute;
    inset: 0;
    opacity: .3;
    background: repeating-linear-gradient(-35deg, transparent 0, transparent 70px, rgba(255, 255, 255, .22) 70px, rgba(255, 255, 255, .22) 140px), linear-gradient(115deg, rgba(0, 0, 0, .12) 0, transparent 45%, rgba(255, 255, 255, .08) 100%)
}

.home-newsletter__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2)
}

.home-newsletter__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    min-height: 114px;
    padding: 25px 0
}

.home-newsletter__copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 383px;
    flex: 0 1 383px
}

.home-newsletter__title {
    margin: 0;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase
}

.home-newsletter__desc {
    margin: 0;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal
}

.home-newsletter__form {
    flex: 0 1 588px;
    max-width: 588px;
    width: 100%;
    margin-left: auto
}

.home-newsletter__field {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 50px;
    overflow: hidden;
    border-radius: 50px
}

.home-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 50px;
    padding: 0 25px;
    border: 0;
    outline: 0;
    border-radius: 50px 0 0 50px;
    background: #fff !important;
    color: #333;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none
}

.home-newsletter__input::placeholder {
    color: #888787
}

.home-newsletter__input:-webkit-autofill, .home-newsletter__input:-webkit-autofill:active, .home-newsletter__input:-webkit-autofill:focus, .home-newsletter__input:-webkit-autofill:hover {
    -webkit-text-fill-color: #333 !important;
    caret-color: #333;
    transition: background-color 99999s ease-out 0s;
    box-shadow: 0 0 0 1000px #fff inset !important;
    background-color: #fff !important;
    background-image: none !important
}

.home-newsletter__input:autofill {
    background: #fff !important;
    color: #333
}

.home-newsletter__btn {
    flex-shrink: 0;
    width: 194px;
    height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: 0 50px 50px 0;
    background: #efb713;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background .2s ease, opacity .2s ease, filter .2s ease
}

.home-newsletter__btn:focus, .home-newsletter__btn:hover {
    background: #e0a80f;
    color: #085b32;
    filter: brightness(1.02)
}

.home-newsletter__btn:disabled {
    opacity: .75;
    cursor: not-allowed
}

.site-footer {
    position: relative;
    color: #333;
    background: #fff
}

.site-footer a {
    color: inherit;
    text-decoration: none !important
}

.site-footer a:hover {
    color: #08194C
}

.site-footer__main {
    position: relative;
    padding: 41px 0 48px;
    background: #FFF;
    box-shadow: 0 -6px 47.3px 0 rgba(178, 178, 178, 0.25);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 285px) minmax(0, 311px) minmax(0, 200px) minmax(0, 1fr);
    gap: 40px 38px;
    align-items: start
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 285px
}

.site-footer__logo {
    display: inline-block;
    margin: 0
}

.site-footer__logo img {
    display: block;
    width: 100%;
    max-width: 229px !important;
    height: auto
}

.site-footer__desc {
    margin: 0;
    color: #333;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px
}

.site-footer__title {
    margin: 0 0 21px;
    color: #333;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 23px
}

.site-footer__info, .site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.site-footer__info a, .site-footer__info span, .site-footer__links a {
    color: #717171;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px
}

.site-footer__links a:hover, .site-footer__info a:hover {
    color: #08194C
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.site-footer__social a {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.site-footer__social img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.site-footer__bottom {
    background: #08194C;
    padding: 11px 0
}

.site-footer__copyright {
    margin: 0;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-align: center
}

.site-footer__copyright a {
    color: #fff
}

.site-footer__copyright a:hover {
    color: #fff;
    text-decoration: underline !important
}

.site-footer__copyright b, .site-footer__copyright strong {
    font-weight: 700;
}

.info-product h3 {
    margin: 0
}

.box-product:hover {
    border-color: #40b604
}

.col.d-flex .box-product {
    margin: 0 -5px
}

.rounded-10 {
    border-radius: 10px
}

.border-pi {
    border: .925px solid #d2d2d2
}

.tagsPro__Wrapper {
    border-top: 1px solid #ddd;
    overflow: hidden
}

.tagsPro__track {
    overflow: hidden;
    width: 100%
}

ul.tagsPro__list {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding: 10px 0;
    margin: 0;
    will-change: transform
}

.tagsPro__list.is-marquee {
    animation: tagsProMarquee var(--tags-marquee-duration, 30s) linear infinite
}

.tagsPro__track:hover ul.tagsPro__list.is-marquee {
    animation-play-state: paused
}

.tagsPro__item {
    flex: 0 0 auto;
    white-space: nowrap
}

.tagsPro__item a {
    position: relative;
    display: inline-block;
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease
}

.tagsPro__item a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1.5px;
    background: #42b603;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s ease
}

.tagsPro__item a:focus-visible, .tagsPro__item a:hover {
    color: #42b603;
    background: rgba(44, 49, 147, .08);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(44, 49, 147, .1);
    outline: 0
}

.tagsPro__item a:focus-visible::after, .tagsPro__item a:hover::after {
    transform: scaleX(1)
}

.tagsPro__item a:active {
    transform: translateY(0);
    box-shadow: none
}

@keyframes tagsProMarquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(var(--tags-marquee-shift, -50%))
    }
}

@media (prefers-reduced-motion:reduce) {
    .tagsPro__list.is-marquee {
        animation: none
    }
}

.AboutUs__left h2 {
    color: #085b32;
    font-family: Roboto;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: 50px;
    margin: 20px 0;
    padding-right: 4rem
}

span.AboutUs__left-subTitle {
    color: #efb713;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px
}

.AboutUs__left-desc {
    color: #7e7e7e;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px
}

.AboutUs__Container {
    gap: 44px
}

.AboutUs__Wrapper {
    padding: 30px 0
}

.btn-cta, .about-intro__cta {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: auto;
    min-width: 213px;
    height: 50px;
    margin-top: 20px;
    padding: 5px 0 5px 5px;
    border: 0;
    border-radius: 66px;
    background: #08194C;
    color: inherit;
    font: inherit;
    text-decoration: none !important;
    cursor: pointer;
    appearance: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease
}

.btn-cta__label, .about-intro__cta-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 162px;
    height: 40px;
    padding: 0 16px;
    border-radius: 66px;
    background: #fff;
    color: #333;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    white-space: nowrap
}

.btn-cta__icon, .about-intro__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 46px;
    height: 40px;
    padding-left: 13px
}

.btn-cta__icon svg, .about-intro__cta-icon svg {
    display: block;
    width: 13px;
    height: 12px
}

.btn-cta:hover, .about-intro__cta:hover {
    background: #061238;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(8, 25, 76, .28)
}

.section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 16px;
    text-align: center
}

.section-heading--left {
    align-items: flex-start;
    text-align: left
}

.section-heading__eyebrow {
    margin: 0;
    color: #0A2C2C;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 34px;
    text-transform: uppercase
}

.section-heading__title {
    margin: 0;
    color: #333;
    font-family: var(--font-anton);
    font-size: clamp(24px, 5vw, 41px);
    font-weight: 400;
    line-height: 1.56;
    text-transform: uppercase
}

.section-heading__bar {
    display: block;
    width: 99px;
    height: 6px;
    margin-top: 9px;
    background: #08194C
}

.home-products {
    padding: 30px 0
}

.home-products__title {
    margin: 0 0 16px;
    color: var(--primary-color);
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase
}

.home-products__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 16px
}

.card-post {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    background: #fff;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease
}

.card-post:hover {
    border-color: #08194C;
    box-shadow: 0 8px 24px rgba(8, 25, 76, .08);
}

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

.card-post__thumb img {
    display: block;
    width: 100%;
    height: auto
}

.card-post__body {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 15px
}

.card-post__text {
    flex: 1;
    min-width: 0
}

.card-post__name {
    margin: 0 0 10px;
    color: #0A2C2C;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 23px
}

.card-post__desc {
    margin: 0;
    color: #333;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px
}

.card-post__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 51px;
    height: 51px;
    border: 1px solid #d5d5d5;
    border-radius: 50%;
    color: #333;
    transition: border-color .2s ease, color .2s ease, background .2s ease
}

.card-post__more svg {
    display: block;
    width: 14px;
    height: 10px
}

.card-post:hover .card-post__more {
    border-color: #08194C;
    color: #08194C;
    background: var(--color-main);
}

.card-post:hover .card-post__more svg path {
    stroke: #fff;
}

.project-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none !important;
    color: inherit
}

.project-item__thumb {
    display: block;
    overflow: hidden;
    border-radius: 20px
}

.project-item__thumb img {
    display: block;
    width: 100%;
    height: auto
}

.project-item__name {
    margin: 10px 0 0;
    color: #0A2C2C;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

.project-item__desc {
    margin: 13px 0 0;
    color: #666;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px
}

.project-item__more {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 4px
}

.project-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 51px;
    height: 51px;
    border: 1px solid #C2C2C2;
    border-radius: 50%;
    color: #333;
    transition: border-color .2s ease, color .2s ease, background .2s ease
}

.project-item__icon svg {
    display: block;
    width: 14px;
    height: 10px
}

.project-item__more-text {
    color: #333;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

.project-item:hover .project-item__icon {
    border-color: #08194C;
    color: #08194C;
    background: var(--color-main)
}

.project-item:hover .project-item__icon svg path {
    stroke: #fff
}

.project-item:hover .project-item__more-text {
    color: #08194C
}

.card-news {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none !important;
    color: inherit
}

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

.card-news__thumb img {
    display: block;
    width: 100%;
    height: auto
}

.card-news__name {
    margin: 18px 0 0;
    color: #333;
    font-family: var(--font-primary);
    font-size: 19px;
    font-weight: 700;
    line-height: 24px
}

.card-news__desc {
    margin: 14px 0 0;
    color: #333;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px
}

.card-news:hover .card-news__name {
    color: #08194C
}

.card-news-title {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid #DFDFDF;
    text-decoration: none !important;
    color: inherit
}

.card-news-title:first-child {
    padding-top: 9px
}

.card-news-title__name {
    margin: 0;
    color: #221B2F;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px
}

.card-news-title:hover .card-news-title__name {
    color: #08194C
}

.card-testimonial {
    position: relative;
    width: 100%;
    padding-top: 46px;
    padding: 46px 10px;
    padding-bottom: 10px;
}

.card-testimonial__avatar {
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 1;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #eee;
    box-shadow: 0 0 19.4px rgba(207, 207, 207, .25)
}

.card-testimonial__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.card-testimonial__body {
    padding: 53px 20px 19px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 2px 4px 9px rgba(166, 166, 166, .25)
}

.card-testimonial__quote {
    margin: 0;
    color: #666;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px
}

.card-testimonial__line {
    display: block;
    height: 1px;
    margin: 28px 0 13px;
    background: #D9D9D9
}

.card-testimonial__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.card-testimonial__name {
    margin: 0;
    color: #333;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 21px
}

.card-testimonial__role {
    margin: 0;
    color: #666;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px
}

.card-testimonial__stars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    color: #EFD306
}

.card-testimonial__stars svg {
    display: block;
    width: 15px;
    height: 13px
}

.home-product-card {
    display: flex;
    flex-direction: column;
    min-height: 375px;
    background: #fff;
    box-shadow: 0 0 7.397px 0 rgba(0, 0, 0, .1);
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow .25s ease
}

.home-product-card:hover {
    box-shadow: 0 0 10px rgba(8, 91, 50, .3)
}

.home-product-card__thumb {
    max-height: 279px;
    padding: 34px 8px 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent
}

.home-product-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .35s ease
}

.home-product-card:hover .home-product-card__thumb img {
    transform: scale(1.04)
}

.home-product-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 7px 18px;
    text-align: center
}

.home-product-card__name {
    margin: 0;
    width: 100%;
    color: var(--primary-color);
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: normal;
    text-transform: capitalize
}

.home-product-card__desc {
    margin: 0;
    width: 100%;
    color: #7e7e7e;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px
}

.home-products__more {
    display: flex;
    justify-content: center;
    margin-top: 30px
}

.home-products__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    height: 45px;
    padding: 0 20px;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    background: #fff;
    color: var(--primary-color) !important;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease
}

.home-products__btn img {
    display: block;
    width: 38px;
    height: 31px;
    flex-shrink: 0;
    transition: filter .2s ease
}

.home-products__btn:hover {
    background: var(--primary-color);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(8, 91, 50, .3)
}

.home-products__btn:hover img {
    filter: brightness(0) invert(1)
}

.home-services {
    padding: 30px 0
}

.home-services__title {
    margin: 0 0 16px;
    color: var(--primary-color);
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase
}

.home-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 242px 242px;
    gap: 16px;
    height: 500px
}

.home-service-card {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    text-decoration: none !important;
    min-height: 0
}

.home-service-card--lg {
    grid-row: 1/3;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%)
}

.home-service-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: revert-rule;
    display: block;
    transition: transform .45s ease
}

.home-service-card:hover img {
    transform: scale(1.04)
}

.home-service-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000)
}

.home-service-card--lg .home-service-card__shade {
    background: linear-gradient(180deg, rgba(8, 91, 50, 0), #085b32)
}

.home-service-card__content {
    position: absolute;
    left: 21px;
    right: 21px;
    bottom: 21px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 16px
}

.home-service-card__bar {
    width: 3px;
    background: #fff;
    flex-shrink: 0
}

.home-service-card--lg .home-service-card__bar {
    height: 90px
}

.home-service-card--sm .home-service-card__bar {
    height: 30px
}

.home-service-card__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0
}

.home-service-card__name {
    margin: 0;
    color: #fff;
    font-family: Inter, sans-serif;
    font-weight: 800;
    line-height: 24px;
    text-transform: uppercase
}

.home-service-card--lg .home-service-card__name {
    font-size: 20px;
    white-space: nowrap
}

.home-service-card--sm .home-service-card__name {
    font-size: 18px;
    padding-top: 3px
}

.home-service-card__desc {
    margin: 0;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.home-why {
    padding: 30px 0
}

.home-why__title {
    margin: 0 0 15px;
    color: var(--primary-color);
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase
}

.home-why__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 592px));
    gap: 16px;
    justify-content: center;
    align-items: start
}

.home-why__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 288px));
    gap: 25px 10px;
    justify-content: space-between;
    padding-top: 46px
}

.home-why__item {
    max-width: 288px;
    transition: transform .25s ease
}

.home-why__item:hover {
    transform: translateY(-4px)
}

.home-why__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 63px;
    height: 63px;
    margin: 0 0 16px;
    border-radius: 50%;
    background: #ffcd3a;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
    transition: transform .25s ease, box-shadow .25s ease
}

.home-why__item:hover .home-why__num {
    transform: scale(1.06);
    box-shadow: 0 0 10px rgba(239, 183, 19, .4)
}

.home-why__name {
    margin: 0 0 10px;
    color: #085b32;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize
}

.home-why__desc {
    margin: 0;
    color: #7e7e7e;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.home-why__visual {
    position: relative;
    width: 592px;
    max-width: 100%;
    overflow: hidden
}

.home-why__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease
}

.home-why__visual:hover img {
    transform: scale(1.04)
}

.ArcVsPartner .about-shine {
    display: block;
    border-radius: 6px
}

.ArcVsPartner .about-shine img {
    transition: transform .35s ease
}

.ArcVsPartner .brand-item:hover .about-shine img {
    transform: scale(1.04)
}

.home-newsletter__btn {
    transition: background .2s ease, opacity .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease
}

.home-newsletter__btn:focus, .home-newsletter__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(239, 183, 19, .45)
}

.about-page {
    background: #fff;
    color: #282828
}

.about-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0a1628
}

.about-hero__img, .about-hero__media {
    width: 100%;
    height: 100%
}

.about-hero__img {
    display: block;
    object-fit: cover;
    object-position: 40% center;
    transform: scale(1);
    transform-origin: 40% 50%;
    animation: aboutHeroKen 22s ease-out forwards
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8.33%;
    background: linear-gradient(90deg, rgba(8, 20, 40, .15) 0, rgba(8, 20, 40, .45) 55%, rgba(8, 20, 40, .55) 100%);
    pointer-events: none
}

.about-hero__copy {
    width: min(520px, 100%);
    text-align: center;
    pointer-events: auto
}

.about-hero__title {
    margin: 0 0 14px;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    font-style: italic;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(120, 190, 255, .45)
}

.about-hero__subtitle {
    margin: 0 0 22px;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.4;
    text-transform: uppercase
}

.about-hero__desc {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .9);
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.about-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 28px;
    border: 1px solid rgba(180, 220, 255, .85);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(20, 40, 80, .85), rgba(8, 18, 40, .95));
    box-shadow: 0 0 18px rgba(120, 190, 255, .35);
    color: #fff !important;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: box-shadow .2s ease, transform .2s ease
}

.about-hero__cta:hover {
    box-shadow: 0 0 24px rgba(120, 190, 255, .55);
    transform: translateY(-1px);
    color: #fff !important
}

.about-intro {
    position: relative;
    padding: 12px 0 60px;
    overflow: hidden
}

.about-intro__layout {
    position: relative
}

.about-intro__vertical {
    position: absolute;
    width: 42px;
    height: 418px;
    flex-shrink: 0;
    pointer-events: none;
    right: 100%;
    top: 10px
}

.about-intro__vertical img {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 418px;
    height: 42px;
    max-width: none;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center
}

.about-intro__main {
    min-width: 0;
    padding-top: 8px
}

.about-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 570px) minmax(280px, 1fr);
    gap: 20px 36px;
    align-items: start
}

.about-intro__eyebrow {
    margin: 0 0 20px;
    color: #efb713;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.about-intro__title {
    margin: 0 0 20px;
    color: #0A2C2C;
    font-family: var(--font-anton);
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.about-intro__desc {
    color: #656565;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 23px;
    /* 143.75% */
}

.about-intro__desc p {
    margin: 0 0 16px
}

.about-intro__desc p:last-child {
    margin-bottom: 0
}

.about-intro__visual {
    position: relative;
}

.about-intro__collage {
    border-radius: 10px;
    overflow: hidden;
}

.about-intro__more {
    position: relative;
    margin-top: 28px;
    max-width: 1194px;
    max-height: 66px;
    overflow: hidden;
    transition: max-height .4s ease
}

.about-intro.is-open .about-intro__more {
    max-height: 5000px
}

.about-intro__more-text {
    color: #727272;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: justify
}

.about-intro__more-text p {
    margin: 0 0 12px
}

.about-intro__more-text p:last-child {
    margin-bottom: 0
}

.about-intro__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65px;
    pointer-events: none;
    background: linear-gradient(360deg, #fff 0, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
    transition: opacity .3s ease
}

.about-intro.is-open .about-intro__fade {
    opacity: 0
}

.about-intro__actions {
    display: flex;
    justify-content: center;
    margin-top: 20px
}

.about-intro__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    height: 45px;
    padding: 0 20px;
    border: 1px solid #085b32;
    border-radius: 10px;
    background: #fff;
    color: #085b32 !important;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease
}

.about-intro__btn img {
    display: block;
    width: 38px;
    height: 31px;
    flex-shrink: 0;
    transition: filter .2s ease, transform .25s ease
}

.about-intro.is-open .about-intro__btn img {
    transform: rotate(180deg)
}

.about-intro__btn:hover {
    background: #085b32;
    color: #fff !important
}

.about-intro__btn:hover img {
    filter: brightness(0) invert(1)
}

a.home-product-card:hover .home-product-card__thumb {
    border-color: #d60c0c
}

.ArcVsPartner {
    background: #f9f9f9;
    padding: 30px 0
}

.partner__overlay {
    position: relative
}

.partner__overlay:after, .partner__overlay:before {
    position: absolute;
    content: '';
    width: 150px;
    height: 120px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99
}

.partner__overlay:before {
    left: 0;
    background: linear-gradient(90deg, #f9f9f9 23.18%, rgba(255, 255, 255, 0) 144.12%)
}

.partner__overlay:after {
    right: 0;
    background: linear-gradient(280deg, #f9f9f9 23.18%, rgba(255, 255, 255, 0) 144.12%)
}

.bg-F9F9F9 {
    background: #f9f9f9
}

section.StatWrapper {
    --stat-bg-image: url(../images/stat-bg.jpg);
    --stat-bg-color: #00592d;
    --stat-bg-tint: rgb(0 89 45 / 57%);
    --stat-bg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, .9) 92%);
    --stat-curve: 46px;
    position: relative;
    z-index: 0;
    background: none;
    min-height: 542px;
    padding: 30px 0
}

section.StatWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--stat-bg-color);
    background-image: var(--stat-bg-overlay), linear-gradient(var(--stat-bg-tint), var(--stat-bg-tint)), var(--stat-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask: linear-gradient(#fff, #fff) top center/100% calc(100% - var(--stat-curve)) no-repeat, url(../images/stat-curve-bottom.svg) bottom center/100% var(--stat-curve) no-repeat;
    mask: linear-gradient(#fff, #fff) top center/100% calc(100% - var(--stat-curve)) no-repeat, url(../images/stat-curve-bottom.svg) bottom center/100% var(--stat-curve) no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add
}

.photoStatMain {
    position: relative
}

.photoStatMain {
    text-align: center
}

.Stat__List {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 15px
}

.about-stats__item {
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    padding: 30px 10px 10px
}

p.about-stats__num {
    color: #fff;
    text-align: center;
    font-family: Roboto;
    font-size: 51px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
    transition: color .25s ease
}

p.about-stats__label {
    color: #fff;
    text-align: center;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.photoStatMain {
    margin-bottom: -30px
}

.value-card {
    position: relative;
    min-height: 620px;
    padding: 120px 90px
}

.value-card__shap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.value-card__content {
    position: relative;
    z-index: 1
}

.about-values {
    background: #F8F8F8;
    padding: 50px 0 70px
}

.about-values__compass {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr);
    grid-template-areas: ". top ." "left core right" ". bottom .";
    align-items: center;
    justify-items: center;
    column-gap: 5%;
    row-gap: 28px
}

.about-values__item {
    min-width: 0;
    width: 100%;
    text-align: center
}

.about-values__item--top {
    grid-area: top
}

.about-values__item--left {
    grid-area: left
}

.about-values__item--right {
    grid-area: right
}

.about-values__item--bottom {
    grid-area: bottom
}

.about-values__core {
    grid-area: core;
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1
}

.about-values__ring {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #717171;
    border-radius: 50%;
    grid-area: 1 / 1
}

.about-values__dot {
    position: absolute;
    width: 4%;
    aspect-ratio: 1;
    background: #08194C;
    border-radius: 50%
}

.about-values__dot--top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

.about-values__dot--right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%)
}

.about-values__dot--bottom {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%)
}

.about-values__dot--left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%)
}

.about-values__title {
    grid-area: 1 / 1;
    z-index: 1;
    margin: 0;
    max-width: 70%;
    color: #0A2C2C;
    font-family: var(--font-anton);
    font-size: clamp(22px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1.46;
    text-align: center
}

.about-values__name {
    margin: 0 0 7px;
    color: #333;
    font-family: var(--font-primary);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 800;
    line-height: 1.26;
    text-align: center;
    transition: all .4s linear;
}

.about-values__desc {
    margin: 0;
    color: #717171;
    font-family: var(--font-primary);
    font-size: clamp(13px, 1.2vw, 14px);
    font-weight: 500;
    line-height: 1.5;
    text-align: center
}

.about-vm {
    padding: 0 0 50px
}

.about-vm__row {
    display: flex;
    align-items: flex-start;
    gap: 76px;
}

.about-vm__row + .about-vm__row {
    margin-top: 50px
}

.about-vm__row--reverse {
    flex-direction: row-reverse
}

.about-vm__content, .about-vm__visual {
    flex: 1;
    min-width: 0
}

.about-vm__content {
    padding-top: 20px
}

.about-vm__title {
    margin: 0 0 22px;
    color: #0A2C2C;
    font-family: var(--font-anton);
    font-size: 34px;
    font-weight: 400;
    line-height: 50px
}

.about-vm__desc {
    color: #656565;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 23px
}

.about-vm__desc p {
    margin: 0 0 12px
}

.about-vm__desc p:last-child {
    margin-bottom: 0
}

.about-vm__visual {
    overflow: hidden;
    border-radius: 10px
}

.about-vm__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 562 / 331;
    object-fit: cover
}

@keyframes aboutHeroKen {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.04)
    }
}

.about-intro__visual {
    overflow: hidden;
    border-radius: 10px;
    max-width: 562px;
    transition: all .3s linear;
}

.about-intro__collage {
    transition: transform .35s ease
}

.about-intro__visual:hover .about-intro__collage {
    transform: scale(1.04)
}

.about-intro__btn {
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease
}

.about-intro__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(8, 91, 50, .3)
}

.about-stats__item {
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease
}

.about-stats__item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 0 10px rgba(239, 183, 19, .28)
}

.about-stats__item:hover .about-stats__num {
    color: #efb713
}

.photoStatMain .about-shine {
    display: inline-block;
    max-width: 100%;
    border-radius: 10px;
    transition: box-shadow .25s ease
}

.photoStatMain img {
    display: block;
    max-width: 100%;
    transition: transform .4s ease
}

.photoStatMain:hover img {
    transform: scale(.97)
}

.about-values__item {
    transition: transform .25s ease
}

.about-values__item:hover {
    transform: translateY(-4px)
}

.about-vm__img {
    transition: transform .4s ease
}

.about-vm__visual:hover .about-vm__img {
    transform: scale(1.04)
}

.about-history__media .about-shine {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    transition: box-shadow .25s ease
}

.about-history__media img {
    display: block;
    transition: transform .35s ease
}

.about-history__media:hover .about-shine {
    box-shadow: 0 0 10px rgba(8, 91, 50, .3)
}

.about-history__media:hover img {
    transform: scale(1.04)
}

.year-item span {
    transition: color .25s ease, font-size .25s ease, font-weight .25s ease
}

.year-item:hover span {
    color: #085b32
}

@media (prefers-reduced-motion:reduce) {
    .ArcVsPartner .about-shine img, .about-hero__img, .about-history__media img, .about-intro__btn, .about-intro__collage, .about-shine:before, .about-stats__item, .about-values__item, .about-vm__img, .btn-cta, .about-intro__cta, .btn-custom, .home-news-card, .home-news-card__thumb img, .home-newsletter__btn, .card-post, .home-product-card, .home-product-card__thumb img, .home-products__btn, .home-service-card img, .home-why__item, .home-why__num, .home-why__visual img, .photoStatMain img, .slideshow-image img, .value-card__info--icon img, .year-item span {
        animation: none !important;
        transition: none !important;
        transform: none !important
    }

    .about-shine:hover:before {
        left: -90%
    }
}

h2.about-section-title.about-section-title--plain {
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 30px
}

a.text-normal.active {
    color: var(--primary-color)
}

.year-item.slick-current span {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 26px
}

.slider.slider-nav.my-3.slick-initialized.slick-slider .slick-track {
    width: 100%
}

.slider.slider-nav.my-3 {
    margin-bottom: 37px !important
}

.HeaderMenu__Logo {
    max-width: 112px
}

.product-listing-page {
    padding: 10px .5rem 40px
}

.product-listing {
    display: grid;
    grid-template-columns: 289px minmax(0, 1fr);
    column-gap: 15px;
    row-gap: 16px;
    align-items: start
}

.product-cats {
    width: 289px;
    height: auto;
    max-height: 640px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #085b32;
    border-radius: 10px;
    overflow: hidden
}

.product-cats__title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    height: 66px;
    background: #085b32;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    text-transform: uppercase
}

.product-cats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto
}

.product-cats__item+.product-cats__item {
    border-top: .5px solid #979393
}

.product-cats__item>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
    padding: 20px 9px 20px 22px;
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    text-decoration: none;
    transition: color .25s ease, background .25s ease
}

.product-cats__item>a span {
    min-width: 0
}

.product-cats__item>a svg {
    flex-shrink: 0;
    width: 7px;
    height: 16px;
    color: #333;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .25s ease
}

.product-cats__item.has-children.is-open>a svg {
    transform: rotate(90deg)
}

.product-cats__item>a:hover, .product-cats__item.is-active>a, .product-cats__item.is-open>a {
    color: #085b32;
    font-weight: 800;
    text-decoration: none
}

.product-cats__item>a:hover svg, .product-cats__item.is-active>a svg, .product-cats__item.is-open>a svg {
    color: #085b32
}

.product-cats__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1)
}

.product-cats__item.is-open>.product-cats__sub {
    grid-template-rows: 1fr
}

.product-cats__sub-inner {
    overflow: hidden;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0 10px 10px 12px;
    background: linear-gradient(180deg, #f4f8f6 0, #fff 100%)
}

.product-cats__sub-item {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1)
}

.product-cats__item.is-open .product-cats__sub-item {
    opacity: 1;
    transform: none
}

.product-cats__item.is-open .product-cats__sub-item:nth-child(1) {
    transition-delay: .04s
}

.product-cats__item.is-open .product-cats__sub-item:nth-child(2) {
    transition-delay: .08s
}

.product-cats__item.is-open .product-cats__sub-item:nth-child(3) {
    transition-delay: .12s
}

.product-cats__item.is-open .product-cats__sub-item:nth-child(4) {
    transition-delay: .16s
}

.product-cats__item.is-open .product-cats__sub-item:nth-child(5) {
    transition-delay: .2s
}

.product-cats__item.is-open .product-cats__sub-item:nth-child(6) {
    transition-delay: .24s
}

.product-cats__sub-item a {
    position: relative;
    display: flex;
    align-items: center;
    margin: 2px 0;
    padding: 8px 12px 8px 20px;
    border-radius: 6px;
    color: #555;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    transition: color .22s ease, background .22s ease, padding-left .22s ease
}

.product-cats__sub-item a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c5d4cb;
    transform: translateY(-50%);
    transition: background .22s ease, transform .22s ease
}

.product-cats__sub-item.is-active a, .product-cats__sub-item a:hover {
    color: #085b32;
    background: rgba(8, 91, 50, .08);
    padding-left: 24px;
    font-weight: 600;
    text-decoration: none
}

.product-cats__sub-item.is-active a::before, .product-cats__sub-item a:hover::before {
    background: #085b32;
    transform: translateY(-50%) scale(1.15)
}

.product-listing__title {
    margin: 0 0 16px;
    color: #085b32;
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 50px;
    text-transform: uppercase
}

.product-listing__main .wrap-filter {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none
}

.product-listing__grid {
    display: grid;
    grid-template-columns: repeat(3, 288px);
    gap: 30px 16px;
    justify-content: start
}

.product-card {
    display: flex;
    flex-direction: column;
    width: 288px;
    height: 375px;
    min-height: 375px;
    background: #fff;
    box-shadow: 0 0 7.397px 0 rgba(0, 0, 0, .1);
    color: inherit;
    text-decoration: none !important;
    transition: box-shadow .25s ease
}

.product-card:hover {
    box-shadow: 0 0 7.397px 0 rgba(8, 91, 50, .3)
}

.product-card__thumb {
    display: block;
    height: 279px;
    overflow: hidden;
    border: .74px solid transparent
}

.product-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.product-card:hover .product-card__thumb {
    border-color: #d60c0c
}

.product-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 274px;
    margin: 15px auto 0;
    padding: 0;
    text-align: center
}

.product-card__name {
    margin: 0;
    width: 100%;
    color: #085b32;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-transform: capitalize
}

.product-card__desc {
    margin: 0;
    width: 100%;
    color: #7e7e7e;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px
}

.product-listing__more {
    display: flex;
    justify-content: center;
    margin-top: 30px
}

.product-listing__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    height: 45px;
    padding: 0 20px;
    border: 1px solid #085b32;
    border-radius: 10px;
    background: #fff;
    color: #085b32 !important;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease
}

.product-listing__btn img {
    display: block;
    width: 38px;
    height: 31px;
    flex-shrink: 0;
    transition: filter .2s ease
}

.product-listing__btn:hover {
    background: #085b32;
    color: #fff !important
}

.product-listing__btn:hover img {
    filter: brightness(0) invert(1)
}

.wrap-pro-detail {
    background: #fff;
    padding: 10px 0 40px
}

.pro-detail {
    max-width: 1200px;
    margin: 0 auto
}

.pro-detail-top {
    display: flex;
    align-items: stretch;
    gap: 20px
}

.wrap-pro-detail .left-pro-detail {
    width: 588px;
    max-width: 100%;
    flex-shrink: 0
}

.wrap-pro-detail .right-pro-detail {
    width: 592px;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0
}

.wrap-pro-detail .gallery-pro-detail {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    flex-wrap: nowrap
}

.wrap-pro-detail .gallery-pro-detail__nav {
    width: 101px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs {
    width: 102px
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .slick-list {
    height: 452px !important
}

.wrap-pro-detail .gallery-pro-detail__nav.has-video .slider-product-thumbs .slick-list {
    height: 334px !important
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .item {
    padding: 0
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .slick-slide {
    height: 98px !important;
    margin-bottom: 20px
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .slick-slide:last-child {
    margin-bottom: 0
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .item a, .wrap-pro-detail .product-video-thumb {
    display: block;
    position: relative;
    width: 100px;
    height: 95px;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid transparent;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
    transition: border-color .2s ease, box-shadow .2s ease
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .item.slick-active.slick-current a, .wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .item.slick-current a {
    border-color: #d60c0c;
    ox-shadow: none
}

.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .item a img, .wrap-pro-detail .product-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0
}

.wrap-pro-detail .gallery-pro-detail .slider-products .slick-arrow {
    display: none !important
}

.wrap-pro-detail .gallery-pro-detail .slider-products .item a {
    display: block;
    border-radius: 0;
    overflow: hidden
}

.wrap-pro-detail .gallery-pro-detail .slider-products .item img {
    width: 100%;
    height: 452px !important;
    max-height: 452px;
    object-fit: cover;
    border-radius: 0
}

.wrap-pro-detail .pro-detail-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 452px;
    margin: 0
}

.wrap-pro-detail #product-title, .wrap-pro-detail .pro-detail-title {
    margin: 0 0 16px;
    color: #085b32;
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 26px;
    text-transform: uppercase
}

.pro-detail-row {
    margin: 0 0 16px;
    color: #333;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px
}

.pro-detail-row__label {
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.pro-detail-row__sku {
    color: #e30000;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px
}

.pro-detail-desc-label {
    margin: 0 0 10px;
    color: #333;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px
}

.wrap-pro-detail .pro-detail-desc {
    flex: 1 1 auto;
    /* max-height: 240px; */
    overflow: hidden;
    margin: 0;
    color: #727272;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.wrap-pro-detail .pro-detail-desc p {
    margin: 0 0 12px
}

.wrap-pro-detail .pro-detail-desc p:last-child {
    margin-bottom: 0
}

.pro-detail-cta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    padding-top: 30px;
    border-top: .5px solid #e9202a
}

.pro-detail-cta__phone, .pro-detail-cta__zalo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    box-sizing: border-box;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .2s ease, transform .2s ease
}

.pro-detail-cta__phone:hover, .pro-detail-cta__zalo:hover {
    color: #fff !important;
    opacity: .92
}

.pro-detail-cta__zalo {
    width: 235px;
    gap: 5px;
    padding: 0 16px;
    background: #0068ff;
    border-radius: 504px;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: .04em;
    text-transform: capitalize
}

.pro-detail-cta__zalo img {
    width: 23px;
    height: 23px;
    flex-shrink: 0
}

.pro-detail-cta__phone {
    width: 230px;
    gap: 14px;
    padding: 0 16px;
    background: #d60c0c;
    border-radius: 50px;
    font-family: Roboto, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 26px
}

.pro-detail-cta__phone img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    animation: headerHotlineShake 2.4s ease-in-out infinite;
}

.pro-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    margin-top: 30px;
    align-items: start
}

.pro-detail-body.has-aside {
    grid-template-columns: minmax(0, 795px) 390px
}

.wrap-pro-detail .pro-info-main {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    padding: 20px 0 24px;
    min-height: 952px
}

.wrap-pro-detail .pro-info-main__title {
    margin: 0 0 20px;
    padding: 0 22px;
    color: #085b32;
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px
}

.wrap-pro-detail .pro-info-main .pro-info-toc .wrap-toc, .wrap-pro-detail .pro-info-toc .wrap-toc {
    margin: 0 0 14px;
    padding: 0;
    min-height: 40px;
    background: #085b32;
    border: 0;
    border-radius: 0
}

.wrap-pro-detail .pro-info-main .pro-info-toc .toc-head, .wrap-pro-detail .pro-info-toc .toc-head {
    min-height: 40px;
    height: 40px;
    padding: 0 28px 0 32px;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px
}

.wrap-pro-detail .pro-info-main .pro-info-toc .pro-info-toc__icon, .wrap-pro-detail .pro-info-main .pro-info-toc .toc-head svg {
    color: #fff;
    fill: #fff
}

.wrap-pro-detail .pro-info-toc .pro-info-toc__icon {
    display: inline-flex;
    align-items: center;
    margin-right: 12px
}

.wrap-pro-detail .pro-info-toc .pro-info-toc__icon img {
    display: block;
    width: 16px;
    height: 11px
}

.wrap-pro-detail .pro-info-main .pro-info-toc .pro-info-toc__label {
    display: inline;
    color: #fff
}

.wrap-pro-detail .pro-info-toc .pro-info-toc__chevron {
    margin-left: auto;
    width: 9px;
    height: 5px;
    flex-shrink: 0
}

.wrap-pro-detail .pro-info-main .pro-info-toc .toc-list {
    display: none;
    margin: 0;
    padding: 10px 32px 14px;
    background: #fff;
    max-height: 280px
}

.wrap-pro-detail .pro-info-main .pro-info-toc .toc-list li a {
    color: #085b32 !important
}

.wrap-pro-detail #toc-content, .wrap-pro-detail .pro-info-content-wrap {
    padding: 0 22px
}

.wrap-pro-detail .pro-info-content#noidung {
    position: relative;
    max-height: 770px;
    padding-bottom: 70px;
    overflow: hidden
}

.wrap-pro-detail .pro-info-content#noidung.show-full-content {
    max-height: none;
    overflow: visible;
    padding-bottom: 70px
}

.wrap-pro-detail .pro-info-content h1, .wrap-pro-detail .pro-info-content h2, .wrap-pro-detail .pro-info-content h3 {
    color: #085b32;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 11px
}

.wrap-pro-detail .pro-info-content li, .wrap-pro-detail .pro-info-content p {
    color: #727272;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px
}

.wrap-pro-detail .pro-info-content img {
    max-width: 100%;
    height: auto;
    margin: 12px 0
}

.wrap-pro-detail .pro-info-more.hide-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7%, #fff 88%);
    padding: 80px 0 8px
}

.wrap-pro-detail a.pro-info-more__btn, .wrap-pro-detail a.pro-info-more__btn.product-listing__btn {
    min-width: 0;
    height: 45px;
    padding: 0 20px;
    background: #fff !important;
    border: 1px solid #085b32;
    border-radius: 10px;
    color: #085b32 !important;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.wrap-pro-detail a.pro-info-more__btn .blob-txt {
    color: #085b32 !important
}

.wrap-pro-detail a.pro-info-more__btn:hover, .wrap-pro-detail a.pro-info-more__btn:hover .blob-txt {
    background: #085b32 !important;
    color: #fff !important
}

.wrap-pro-detail .pro-info-empty {
    padding: 0 22px;
    color: #888;
    font-size: 14px
}

.pro-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 390px;
    max-width: 100%;
    min-width: 0
}

.pro-specs, .wrap-pro-detail .pro-news-sidebar {
    width: 390px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    padding: 27px 20px 21px
}

.wrap-pro-detail .pro-news-sidebar {
    padding: 18px 20px 10px
}

.pro-specs__title, .wrap-pro-detail .pro-news-sidebar__title {
    margin: 0 0 16px;
    color: #085b32;
    font-family: Inter, sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase
}

.pro-specs__list {
    list-style: none;
    margin: 0;
    padding: 16px 5px 0;
    border-top: .5px solid #979393;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pro-specs__item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #727272;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    min-height: 23px
}

.pro-specs__dash {
    flex-shrink: 0
}

.pro-specs__html b, .pro-specs__html strong, .pro-specs__item b, .pro-specs__item strong {
    font-weight: 800;
    color: #727272
}

.pro-specs__html {
    padding-top: 16px;
    border-top: .5px solid #979393;
    color: #727272;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px
}

.wrap-pro-detail .pro-news-sidebar__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 0
}

.wrap-pro-detail .pro-news-card {
    display: block;
    width: 288px;
    height: 214px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    color: inherit;
    text-decoration: none !important;
    overflow: hidden
}

.wrap-pro-detail .pro-news-card:hover .pro-news-card__name {
    color: #085b32
}

.wrap-pro-detail .pro-news-card__thumb {
    display: block;
    width: 276px;
    height: 140px;
    margin: 5px 6px 0;
    overflow: hidden;
    border-radius: 10px;
    background: #eee
}

.wrap-pro-detail .pro-news-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.wrap-pro-detail .pro-news-card__name {
    max-width: 276px;
    min-height: 0;
    margin: 10px 6px 0;
    color: #4e4e4e;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.wrap-pro-detail .pro-news-sidebar__list.slick-pro-news {
    display: block;
    gap: 0
}

.wrap-pro-detail .pro-news-sidebar__list.slick-pro-news .slick-slide {
    outline: 0
}

.wrap-pro-detail .pro-news-sidebar__list.slick-pro-news.slick-vertical .slick-slide {
    display: block;
    float: none;
    height: auto
}

.wrap-pro-detail .pro-news-slide {
    padding: 4px 0 22px
}

.wrap-pro-detail .pro-news-slide .pro-news-card {
    margin: 0 auto
}

.wrap-pro-detail .pro-news-horizontal .pro-news-slide {
    padding: 6px 8px 10px
}

.wrap-pro-detail .pro-related {
    background: 0 0;
    border: 0;
    border-radius: 0;
    padding: 30px 0 0;
    margin: 0
}

.wrap-pro-detail .pro-related__title {
    margin: 0 0 30px;
    color: #085b32;
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase
}

.pro-related__grid {
    display: grid;
    grid-template-columns: repeat(4, 288px);
    gap: 16px;
    justify-content: start
}

.wrap-pro-detail .pro-related--viewed {
    padding-top: 40px
}

.product-listing__grid.mt-30 {
    margin-top: 30px
}

.header__hotline {
    flex: 0 0 auto
}

.header__hotline-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a6f3d 0, #085b32 55%, #064a29 100%);
    box-shadow: 0 6px 16px rgba(8, 91, 50, .28);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease
}

.header__hotline-link:focus-visible, .header__hotline-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(8, 91, 50, .38)
}

.header__hotline-link:active {
    transform: translateY(0)
}

.header__hotline-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: #fff;
    color: #085b32
}

.header__hotline-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    animation: headerHotlinePulse 1.8s ease-out infinite
}

.header__hotline-icon svg {
    animation: headerHotlineShake 2.4s ease-in-out infinite
}

.header__hotline-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0
}

.header__hotline-label {
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em
}

.header__hotline-number {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em
}

@keyframes headerHotlinePulse {
    0% {
        transform: scale(1);
        opacity: .8
    }

    100% {
        transform: scale(1.45);
        opacity: 0
    }
}

@keyframes headerHotlineShake {
    0%, 100%, 70% {
        transform: rotate(0)
    }

    75%, 85% {
        transform: rotate(-12deg)
    }

    80%, 90% {
        transform: rotate(12deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    .header__hotline-icon svg, .header__hotline-icon::before, .Header__Nav-Top-Link .Header__Nav-Top-Phone { animation: none }
}

ul.site-footer__links li {
    width: 100%
}

.search-wrapper.active input:focus {
    background: #f1f1f1
}

.HeaderMenu__Search {
    position: relative
}

article.home-why__item:hover {
    border-color: var(--primary-color);
}

article.home-why__item {
    border: 1px solid transparent;
    padding: 7px 7px;
    border-radius: 10px;
}

input#keyword::placeholder {
    color: #888;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.call__ani {
    animation: headerHotlineShake 2.4s ease-in-out infinite;
}

ul.Header__Nav-Top-List {
    list-style: none;
    padding: 0;
    margin: 0;
}

.Header__Logo {
    max-width: 230px;
    margin-right: 48px;
}

.Header__Nav-Btn-Link {
    position: relative;
    overflow: hidden;
    border-radius: 48px;
    background: var(--color-main);
    padding: 15px 35px;
    gap: 10px;
    max-width: 210px;
    width: 210px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.Header__Nav-Btn-Link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%);
    transform: translateX(-120%);
    pointer-events: none;
    animation: headerCtaShine 2.8s ease-in-out infinite;
}

.Header__Nav-Btn-Link span {
    position: relative;
    z-index: 1;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.Header__Nav-Btn-Link svg {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-block;
    animation: headerHotlineShake 2.4s ease-in-out infinite;
}

.Header__Nav-Btn-Link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(8, 25, 76, .28);
}

.Header__Nav-Btn-Link:hover::after {
    animation-duration: 1.2s;
}

@keyframes headerCtaShine {
    0%, 55% {
        transform: translateX(-120%);
    }

    80%, 100% {
        transform: translateX(120%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .Header__Nav-Btn-Link::after, .Header__Nav-Btn-Link svg {
        animation: none;
    }

    .Header__Nav-Btn-Link:hover {
        transform: none;
        box-shadow: none;
    }
}

.Heder__Nav-Menu {
    padding: 9px 0 14px 0;
    gap: calc(30px - 13px);
}


.header-ul li {
    padding-right: 13px;
    position: relative;
}

.header-ul li a:before {
    position: absolute;
    content: '';
    width: 0%;
    height: 2px;
    background: var(--color-main);
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    transition: all .3s linear;
}

.header-ul li a:hover:before, .header-ul li a.active::before {
    width: 100%;
}

.about-intro__visual img {
    max-width: 100%;
    border-radius: 10px;
    transition: all.3s linear;
}

.tags__about {
    color: #08194C;
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    /* 156.25% */
    margin-bottom: 9px;
    display: block;
}

.Header__Nav-Top-Link span {
    color: #333;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.Header__Nav-Top-Link svg {
    flex-shrink: 0;
    display: inline-block;
}

.Header__Nav-Top-Link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.Header__Nav-Top {
    border-bottom: 1px solid #D9D9D9;
    padding: 12px 0;
}

.our-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.our-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 24px;
}

.customer-feedback__grid {
    width: 100%;
    overflow: hidden
}

.feedback-swiper {
    width: 100%;
    overflow: hidden
}

.feedback-swiper .swiper-slide {
    height: auto
}

.feedback-swiper .card-testimonial {
    height: 100%;
    display: flex;
    flex-direction: column
}

.feedback-swiper .card-testimonial__body {
    flex: 1
}

.featured-news {
    display: flex;
    align-items: stretch;
}

.featured-news__main {
    flex: 646;
    min-width: 0;
}

.featured-news__divider {
    flex-shrink: 0;
    width: 1px;
    margin: 0 39px 0 27px;
    background: #DFDFDF;
}

.featured-news__list {
    flex: 488;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bg-dark-main {
    background: #F8F8F8;
}

.form-consult {
    display: flex;
    align-items: stretch;
    gap: 48px;
}

.form-consult__visual {
    flex: 664px 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 41px;
}

.form-consult__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-consult__panel {
    flex: 488 1 0;
    min-width: 0;
}

.form-consult__title {
    margin: 0 0 17px;
    color: #333;
    font-family: var(--font-anton);
    font-size: 41px;
    font-weight: 400;
    line-height: 64px;
    text-transform: uppercase;
}

.form-consult__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    min-width: 0;
}

.form-field__label {
    margin: 0;
    color: #221B2F;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.form-field__control {
    position: relative;
    flex: 0 0 auto;
}

.form-field__icon {
    position: absolute;
    left: 21px;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    color: #515151;
    transform: translateY(-50%);
    pointer-events: none;
}

.form-field__icon svg {
    display: block;
}

.form-field__input {
    display: block;
    width: 100%;
    height: 49px;
    padding: 0 20px;
    border: 1px solid #C6C6C6;
    border-radius: 90px;
    background: #fff;
    color: #333;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    outline: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-field--icon .form-field__input {
    padding-left: 55px;
}

.form-field__input::placeholder {
    color: #515151;
}

.form-field__input--area {
    height: 140px;
    padding: 17px 20px;
    border-radius: 20px;
    resize: vertical;
}

.form-field__input:focus {
    border-color: #08194C;
}

.form-field__input--select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2308194C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    cursor: pointer
}

.form-field__input--select:invalid, .form-field__input--select:has(option[value=""]:checked) {
    color: #515151;
}

.form-field__input--select option {
    color: #333;
}

.form-field__feedback {
    min-height: 18px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.was-validated .form-field__input:invalid {
    border-color: #dc3545
}

.was-validated .form-field:has(.form-field__input:invalid) .form-field__feedback {
    display: block
}

.form-consult__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: 100%;
    height: 59px;
    margin-top: -2px;
    padding: 0 24px;
    border: 0;
    border-radius: 104px;
    background: #08194C;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.form-consult__btn svg {
    display: block;
    flex-shrink: 0;
}

.form-consult__btn:hover, .form-consult__btn:focus {
    background: #061238;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(8, 25, 76, .28);
}

.form-consult__btn:disabled {
    opacity: .75;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.home-stats {
    background: #08194C;
    padding: 38px 0;
}

.home-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

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

.stat-item__num {
    margin: 0;
    color: #fff;
    font-family: var(--font-anton);
    font-size: 51px;
    font-weight: 400;
    line-height: 77px;
    white-space: nowrap;
}

.stat-item__label {
    margin: 0;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.content-more {
    position: relative;
    margin-top: 28px;
    padding-bottom: 17px
}

.content-more__body {
    position: relative;
    max-height: 75px;
    overflow: hidden;
    transition: max-height .4s ease
}

.content-more.is-open .content-more__body {
    max-height: 5000px
}

.content-more__text {
    color: #666;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 25px
}

.content-more__text p {
    margin: 0 0 12px
}

.content-more__text p:last-child {
    margin-bottom: 0
}

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

.content-more__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 100%);
    opacity: 1;
    transition: opacity .3s ease
}

.content-more.is-open .content-more__fade {
    opacity: 0
}

.content-more .btn-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: fit-content;
    margin: 0 auto;
    transform: none
}

.content-more .btn-cta:hover, .content-more .btn-cta:focus {
    transform: translateY(-2px)
}

.content-more.is-open {
    padding-bottom: 0
}

.content-more.is-open .btn-cta {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    margin: 20px auto 0
}

.breadCrumbs .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    list-style: none
}

.breadCrumbs .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    color: #717171;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 25px
}

.breadCrumbs .breadcrumb-item + .breadcrumb-item {
    padding-left: 0
}

.breadCrumbs .breadcrumb-item + .breadcrumb-item::before {
    display: block;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    content: "/";
    background: none;
    color: #717171;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 25px
}

.breadCrumbs .breadcrumb-item a, .breadCrumbs .breadcrumb-item__link {
    display: inline-flex;
    align-items: center;
    color: #717171;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    text-decoration: none
}

.breadCrumbs .breadcrumb-item a:hover {
    color: #08194C
}

.breadCrumbs .breadcrumb-item.active a, .breadCrumbs .breadcrumb-item.active a span {
    color: #08194C;
    font-weight: 700
}

.breadCrumbs .breadcrumb-item__home {
    display: none
}

.about-criteria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 20px;
    margin-top: 36px
}

.about-criteria__item {
    display: flex;
    align-items: center;
    gap: 19px
}

.about-criteria__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 63px;
    height: 63px;
    border-radius: 50%;
}

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

.about-criteria__name {
    margin: 0;
    max-width: 146px;
    color: #0A2C2C;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 23px
}

.about-quote {
    padding: 50px 0
}

.about-quote__title {
    margin: 0 0 30px;
    color: #333;
    font-family: var(--font-anton);
    font-size: clamp(28px, 3.4vw, 41px);
    font-weight: 400;
    line-height: 1.56;
    text-transform: uppercase;
}

.about-quote__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6%
}

.about-quote__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0
}

.about-quote__head {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px
}

.about-quote__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 35%;
    aspect-ratio: 1;
    border: 1px solid #08194C;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box
}

.about-quote__icon-inner {
    display: grid;
    place-items: center;
    width: 84%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #08194C
}

.about-quote__icon-inner img {
    display: block;
    width: 42%;
    height: auto
}

.about-quote__item:not(:last-child) .about-quote__head::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 80%;
    width: 134px;
    height: 12px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMzQgMTIiIGZpbGw9Im5vbmUiPgogIDxwYXRoIGQ9Ik0xMzQgNS43NzM0NEwxMjQgLTYuNTMyNjdlLTA1VjExLjU0NjlMMTM0IDUuNzczNDRaTTAgNS43NzM0NFY2Ljc3MzQ0SDQuMTg3NVY1Ljc3MzQ0VjQuNzczNDRIMFY1Ljc3MzQ0Wk0xMi41NjI1IDUuNzczNDRWNi43NzM0NEgyMC45Mzc1VjUuNzczNDRWNC43NzM0NEgxMi41NjI1VjUuNzczNDRaTTI5LjMxMjUgNS43NzM0NFY2Ljc3MzQ0SDM3LjY4NzVWNS43NzM0NFY0Ljc3MzQ0SDI5LjMxMjVWNS43NzM0NFpNNDYuMDYyNSA1Ljc3MzQ0VjYuNzczNDRINTQuNDM3NVY1Ljc3MzQ0VjQuNzczNDRINDYuMDYyNVY1Ljc3MzQ0Wk02Mi44MTI1IDUuNzczNDRWNi43NzM0NEg3MS4xODc1VjUuNzczNDRWNC43NzM0NEg2Mi44MTI1VjUuNzczNDRaTTc5LjU2MjUgNS43NzM0NFY2Ljc3MzQ0SDg3LjkzNzVWNS43NzM0NFY0Ljc3MzQ0SDc5LjU2MjVWNS43NzM0NFpNOTYuMzEyNSA1Ljc3MzQ0VjYuNzczNDRIMTA0LjY4OFY1Ljc3MzQ0VjQuNzczNDRIOTYuMzEyNVY1Ljc3MzQ0Wk0xMTMuMDYyIDUuNzczNDRWNi43NzM0NEgxMjEuNDM4VjUuNzczNDRWNC43NzM0NEgxMTMuMDYyVjUuNzczNDRaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMl85NikiLz4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8yXzk2IiB4MT0iMCIgeTE9IjYuMjczNDQiIHgyPSIxMzQiIHkyPSI2LjI3MzQ0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwODE5NEMiIHN0b3Atb3BhY2l0eT0iMC4yOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwODE5NEMiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4=");
    transform: translateY(-50%)
}

.about-quote__num {
    display: block;
    margin: 0 0 8px;
    color: #0A2C2C;
    font-family: var(--font-primary);
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.26
}

.about-quote__name {
    margin: 0 0 8px;
    color: #0A2C2C;
    font-family: var(--font-primary);
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 700;
    line-height: 1.26
}

.about-quote__desc {
    margin: 0;
    max-width: 85%;
    color: #666;
    font-family: var(--font-primary);
    font-size: clamp(13px, 1.1vw, 14px);
    font-weight: 500;
    line-height: 1.26
}

.service-hero {
    padding: 10px 0 40px
}

.service-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.7%;
    align-items: start
}

.service-hero__gallery {
    display: grid;
    grid-template-columns: 13% minmax(0, 1fr);
    gap: 2.4%;
    align-items: start;
    width: 100%;
    min-width: 0
}

.service-hero__gallery--single {
    grid-template-columns: minmax(0, 1fr)
}

.service-hero__thumbs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden
}

.service-hero__thumbs .swiper-slide {
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer
}

.service-hero__thumbs .swiper-slide-thumb-active {
    border-color: #08194C
}

.service-hero__thumbs img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 76 / 75;
    object-fit: cover
}

.service-hero__main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 10px
}

.service-hero__main .swiper-slide {
    height: auto
}

.service-hero__main .swiper-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 500 / 328;
    object-fit: cover
}

.service-hero__content {
    min-width: 0
}

.service-hero__title {
    margin: 0 0 11px;
    color: #08194C;
    font-family: var(--font-primary);
    font-size: clamp(20px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.26
}

.service-hero__desc {
    margin: 0 0 17px;
    color: #666;
    font-family: var(--font-primary);
    font-size: clamp(13px, 1.1vw, 14px);
    font-weight: 500;
    line-height: 1.43
}

.service-hero__desc p {
    margin: 0 0 8px
}

.service-hero__desc p:last-child {
    margin-bottom: 0
}

.service-hero__hotline {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    padding: .7em 1.4em;
    border: 1px solid #08194C;
    border-radius: 48px;
    color: #08194C;
    font-family: var(--font-primary);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 700;
    line-height: 1.26;
    text-decoration: none
}

.service-hero__hotline img {
    display: block;
    width: 1.15em;
    aspect-ratio: 1
}

.service-hero__hotline:hover {

    background: rgb(8 25 76 / 20%)
}
a.service-hero__hotline img {
    animation: headerHotlineShake 1.4s ease-in-out infinite;
}
.service-hero__form-title {
    margin: 0 0 14px;
    color: #08194C;
    font-family: var(--font-primary);
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 700;
    line-height: 1.39
}

.service-hero__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 1.7%;
    margin-bottom: 11px
}

.form-field--compact {
    gap: 0
}

.form-field--compact .form-field__input {
    height: auto;
    padding: .75em 1.1em;
    border-radius: 48px;
    font-size: 14px;
    line-height: 1.26
}

.service-hero__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    width: 100%;
    padding: .85em 1.2em;
    border: 0;
    border-radius: 48px;
    background: #08194C;
    color: #fff;
    font-family: var(--font-primary);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 700;
    line-height: 1.26;
    cursor: pointer
}

.service-hero__submit img {
    display: block;
    width: 1.2em;
    aspect-ratio: 1
}

.service-hero__submit:hover, .service-hero__submit:focus {
    background: #061238;
    color: #fff
}

.service-hero__submit:disabled {
    opacity: .75;
    cursor: not-allowed
}

.card-post__action {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px
}

.card-post--article {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent
}

.card-post--article:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none
}

.card-post--article .card-post__thumb {
    border-radius: 10px
}

.card-post--article .card-post__thumb img {
    aspect-ratio: 358 / 208;
    object-fit: cover;
    transition: transform .45s ease
}

.card-post--article:hover .card-post__name {
    color: #08194C
}

.card-post--article:hover .card-post__more-text {
    color: #08194C
}

.card-post--article:hover .scale-img img:first-child {
    transform: scale(1.08)
}

.card-post--article:hover .scale-img:before {
    transition: 1s;
    left: 130%
}

.card-post--article .card-post__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px
}

.card-post--article .card-post__name {
    margin: 0 0 9px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.265
}

.card-post--article .card-post__desc {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5
}

.card-post--article .card-post__action {
    gap: 11px
}

.card-post--article .card-post__more {
    background: #08194C;
    border-color: #08194C;
    color: #fff
}

.card-post--article .card-post__more svg {
    width: 14px;
    height: 10px
}

.card-post--article .card-post__more svg path {
    stroke: #fff
}

.card-post--article:hover .card-post__more {
    background: #061238;
    border-color: #061238;
    color: #fff
}

.card-post--article .card-post__more-text {
    color: #333;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.265
}

.service-body {
    padding: 0 0 40px
}

.service-body__grid { display: grid; grid-template-columns: minmax(0, 793fr) minmax(0, 387fr); gap: 1.67%; align-items: start }
.service-body__main, .service-body__aside { display: flex; flex-direction: column; min-width: 0; padding: 16px 14px; border: 1px solid #D4D4D4; border-radius: 13px; background: #fff }
@media (min-width: 992px) {
    .service-body__aside {position: sticky;top: 130px;align-self: start;z-index: 2;max-height: calc(100vh - 130px);overflow: hidden}
    .service-body__news { max-height: calc(100vh - 200px) }
}

.service-body__main, .service-body__aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 14px;
    border: 1px solid #D4D4D4;
    border-radius: 13px;
    background: #fff
}

.service-body__title {
    margin: 0 0 16px;
    color: #20150F;
    font-family: var(--font-primary);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.265
}

.service-body__empty {
    margin: 0;
    color: #727272;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.service-body__toc {
    margin: 0 0 15px
}

.service-body .wrap-toc {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #F2FFF8;
    border: 1px solid #2A3C72;
    border-radius: 4px;
    font-size: inherit;
    overflow: hidden;
}

.service-body .toc-head {
    min-height: 40px;
    padding: 0 14px;
    color: #412921;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.265
}

.service-body .toc-head svg {
    display: none
}

.service-body__toc-icon {
    display: block;
    width: 16px;
    height: auto;
    aspect-ratio: 16 / 11;
    margin-right: 12px
}

.service-body__toc-chevron {
    display: block;
    width: 12px;
    height: auto;
    aspect-ratio: 12 / 6;
    margin-left: auto
}

.service-body .toc-list {
    margin: 0;
}

.service-body .toc-list li a {
    color: #412921 !important;
    font-family: var(--font-primary)
}

.service-body .toc-list li a:hover, .service-body .toc-list li a.active {
    color: #08194C !important
}

.service-body__more {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 0;
    padding-bottom: 0
}

.service-body__more.content-more {
    margin-top: 0
}

.service-body__more .content-more__body {
    max-height: clamp(280px, 43vw, 517px)
}

.service-body__more .content-more__text {
    color: #727272;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.service-body__more .content-more__text h1, .service-body__more .content-more__text h2, .service-body__more .content-more__text h3, .service-body__more .content-more__text h4 {
    margin: 0 0 12px;
    color: #222;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.265
}

.service-body__more .content-more__text img {
    border-radius: 10px
}

.service-body__more .content-more__fade {
    z-index: 1;
    height: 15.5%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 18.75%, #fff 100%)
}

.service-body__news {
    position: relative;
    isolation: isolate;
    flex: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 358 / 647;
    overflow: hidden;
    background: #fff
}

.service-body__news::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 12.4%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 18.75%, #fff 100%)
}

.service-body__news-swiper {
    position: relative;
    z-index: 0 !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 87.6%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 87.6%, rgba(0, 0, 0, 0) 100%)
}

.service-body__news-swiper .swiper-wrapper, .service-body__news-swiper .swiper-slide {
    z-index: 0 !important
}

.service-body__news-swiper .swiper-slide {
    height: auto
}

.service-body__news-fade {
    display: none
}

.service-related {
}

.service-related .section-heading {
    margin-bottom: 20px
}

.service-related__swiper {
    width: 100%;
    overflow: hidden
}

.service-related__swiper .swiper-slide {
    height: auto
}

.service-related .card-post {
    height: 100%
}

.service-related .card-post__thumb img {
    aspect-ratio: 354 / 232;
    object-fit: cover
}

.header-nav-mb {
    display: none;
}

.AboutUs__w {
    position: relative;
}

.AboutUs__w:after {
    position: absolute;
    content: '';
    width: 114px;
    height: 114px;
    background: url("../images/about_cycle.png") no-repeat;
    z-index: 0;
    right: 0;
    top: 100%;
}

a.Header__Nav-Top-Link svg {
    
    animation: headerHotlineShake 2.4s ease-in-out infinite;
}


.site-footer__social a:hover img {
    -webkit-animation: rubberBand 1s;
    animation: rubberBand 1s;
}

span.about-quote__icon-inner img {
    animation: headerHotlineShake 2.4s ease-in-out infinite;
}
.about-criteria__icon img {
    animation: headerHotlineShake 2.4s ease-in-out infinite;
}

.card-testimonial:hover .card-testimonial__body {
    box-shadow: 0 0 10px 0 #3f4c73;
    transition: all .3s linear;
}

article.card-testimonial:hover .card-testimonial__avatar {
    border-color: #162554;
    transition: all .3s linear;
}
.d-flex.align-items-center.AboutUs__w.AboutUs__w-i:after {
    content: unset;
}

.Header__Nav-Top-Phone { animation: 1s ease-in-out infinite blinkColor; }
article.about-vm__row.about-vm__row--reverse {
    gap: 38px;
}
section#tam-nhin-su-menh {
    padding-bottom: 1em;
}
.service-hero__main { position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; border-radius: 10px }
.service-hero__main .swiper-slide { height: auto }
.service-hero__main .swiper-slide img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 500 / 328; object-fit: cover }
.service-hero__main .swiper-button-prev, .service-hero__main .swiper-button-next { width: 40px; height: 40px; margin-top: 0; top: 50%; z-index: 3; transform: translateY(-50%); color: #fff; background: rgba(8, 25, 76, .55); border-radius: 50%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease, background .2s ease }
.service-hero__main .swiper-button-prev { left: 12px }
.service-hero__main .swiper-button-next { right: 12px }
.service-hero__main .swiper-button-prev:after, .service-hero__main .swiper-button-next:after { font-size: 14px }
.service-hero__main:hover .swiper-button-prev, .service-hero__main:hover .swiper-button-next, .service-hero__main:focus-within .swiper-button-prev, .service-hero__main:focus-within .swiper-button-next { opacity: 1; visibility: visible; pointer-events: auto }
.service-hero__main .swiper-button-prev:hover, .service-hero__main .swiper-button-next:hover { background: #08194C }
@media (hover: none) {
    .service-hero__main .swiper-button-prev, .service-hero__main .swiper-button-next { opacity: 1; visibility: visible; pointer-events: auto }
}
.container.AboutUs__space {padding-top: 20px;padding-bottom: 43px;}

.about-values__name {
    display: inline-block;
}
.service-body__main {
    height: 100%;
}
article.about-values__item:hover .about-values__name {
    transform: rotateX(360deg);
}
a.service-hero__hotline span {
    animation: 1s ease-in-out infinite blinkColor;
}.mm-menu-footer { padding: 12px 20px 20px; color: var(--mm-color-text, #333); font-size: 14px; line-height: 1.5; white-space: normal }
.mm-menu-footer p, .mm-menu-footer div, .mm-menu-footer ul { margin: 0 0 8px; white-space: normal }
.mm-menu-footer p:last-child, .mm-menu-footer div:last-child { margin-bottom: 0 }