#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 .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 }
.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 .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; }
.brand-item img { display: block; margin-inline: 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% }
.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, .swiper-slide-thumb-active .year-item, .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, .swiper-slide-thumb-active .year-item::before, .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: var(--font-primary);  font-style: 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) }
.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 .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 }
.swiper-slide-active .box-slide .slide-left, .box-slide.swiper-slide-active .slide-left { animation: 1s .5s forwards fadeInLeftBig }
.swiper-slide-active .box-slide .slide-right, .box-slide.swiper-slide-active .slide-right { animation: 1s 1s forwards fadeInRightBig }
.swiper-slide-active .box-slide .name-slide, .box-slide.swiper-slide-active .name-slide { animation: 1s 1.5s forwards fadeInUp }
.swiper-slide-active .box-slide .desc-slide, .box-slide.swiper-slide-active .desc-slide { animation: 1s 2s forwards fadeInUp }
.swiper-slide-active .box-slide .views-more-slide, .box-slide.swiper-slide-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 .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 }
#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-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-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; height: 471px; overflow: hidden }
.gallery-pro-detail__nav.has-video .slider-product-thumbs { height: 374px }
.gallery-pro-detail .slider-product-thumbs .item { padding: 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 .swiper-slide-thumb-active a, .gallery-pro-detail .slider-product-thumbs .swiper-slide-thumb-active .item 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 .swiper-button-prev, .gallery-pro-detail .slider-products .swiper-button-next { display: none }
.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-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; width: 100% }
.pro-news-sidebar__list.slick-pro-news.swiper-vertical { height: 470px }
.pro-news-sidebar__list.slick-pro-news .swiper-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 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 .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 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 }
.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 }
.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; 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 }
.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: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 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 }
.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 }
.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; max-width: 229px }
.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%; overflow: hidden; }
.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 }
.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 }
.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 }
.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: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: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__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.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 }
.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; }
.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: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) }
.swiper-slide-thumb-active .year-item span, .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; 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; height: 452px; overflow: hidden }
.wrap-pro-detail .gallery-pro-detail__nav.has-video .slider-product-thumbs { height: 334px }
.wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .item { padding: 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 .swiper-slide-thumb-active a, .wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .swiper-slide-thumb-active .item a { border-color: #d60c0c; box-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 .swiper-button-prev, .wrap-pro-detail .gallery-pro-detail .slider-products .swiper-button-next { 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__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-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-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-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 .swiper-slide { outline: 0 }
.wrap-pro-detail .pro-news-sidebar__list.slick-pro-news.swiper-vertical { height: 470px }
.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 { 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: 13px; 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); overflow: visible; align-items: stretch !important; }
.Heder__Nav-Menu .Header__Nav-Btn { display: flex; align-items: center; }
.Heder__Nav-Menu .menu-main { align-items: stretch !important; align-self: stretch; }
.Heder__Nav-Menu .menu-main > li { display: flex !important; align-items: center; }
.Heder__Nav-Menu .menu-main > li > a { display: flex; align-items: center; height: 100%; }
.Heder__Nav-Menu .menu-main > li.has-child::after { content: ""; position: absolute; left: 0; width: 100%; top: 100%; height: 18px; }
.Heder__Nav-Menu .menu-main > li.has-child > ul { top: 100%; left: 0; transform: none; pointer-events: auto; margin: 0; transition: opacity .12s ease, visibility .12s ease; transition-delay: .08s; }
.Heder__Nav-Menu .menu-main > li.has-child:hover > ul, .Heder__Nav-Menu .menu-main > li.has-child:focus-within > ul { transition-delay: 0s; }
.Heder__Nav-Menu .menu-main > li.has-child > ul > li { padding-right: 0; display: block; width: 100%; }
.Heder__Nav-Menu .menu-main > li.has-child > ul > li > a { height: auto; width: 100%; }
.Heder__Nav-Menu .menu-main li a.has-child { padding: 0; }
.Heder__Nav-Menu .menu-main li a.has-child:after { display: none !important; content: none !important; }
ul.header-ul a { color: #333; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; }
.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: 8px; transition: width .3s ease; }
.header-ul > li > a:hover:before, .header-ul > li > a.active::before { width: 100%; }
.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 .Header__Nav-Top-Phone { animation: 1s ease-in-out infinite blinkColor; }
.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-Account .Header__Nav-Top-Link { color: var(--color-main); }
.Header__Nav-Top-Account .Header__Nav-Top-Link span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.Header__Nav-Top-Account .Header__Nav-Top-Link:hover span { color: var(--color-submain); }
.Header__Account--icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--color-main); background: #f3f5f9; }
.Header__Account--icon:hover { color: var(--color-submain); background: #eef1f6; }
.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: 664 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; margin: 0; 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-primary);    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__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: 8px; padding: 0; margin: 0; background: transparent; border-radius: 0; list-style: none }
.breadCrumbs .breadcrumb-item { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: #a6a6a6 }
.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: #a6a6a6 }
.breadCrumbs .breadcrumb-item a, .breadCrumbs .breadcrumb-item__link { display: inline-flex; align-items: center; gap: 8px; color: #a6a6a6; text-decoration: none }
.breadCrumbs .breadcrumb-item a:hover { color: var(--color-main) }
.breadCrumbs .breadcrumb-item.active a, .breadCrumbs .breadcrumb-item.active a span { color: var(--color-main) }
.breadCrumbs .breadcrumb-item__home { display: inline-block; width: 14px; height: 16px; background: url(../images/eurowindow/breadcrumb-home.svg) center / contain no-repeat }
.breadCrumbs .breadcrumb-item:first-child > a::before { content: ''; display: inline-block; width: 14px; height: 16px; flex-shrink: 0; background: url(../images/eurowindow/breadcrumb-home.svg) center / contain no-repeat }
.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__name { margin: 0; max-width: 146px; color: #0A2C2C; font-family: var(--font-primary); font-size: 18px; font-weight: 700; line-height: 23px }
.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; max-width: 1.15em }
.service-hero__hotline:hover { color: #061238; background: rgba(8, 25, 76, .04) }
.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; max-width: 1.2em }
.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: stretch }
.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; padding: 8px 14px 12px; max-height: 240px; background: #fff }
.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; }
.Header__Nav-Top { border-bottom: 1px solid #D9D9D9; padding: 12px 0; }

/* ===== TRANGCHU ===== */
#Header.euro-menu { background: var(--color-white); box-shadow: 0 5px 4px var(--color-shadow); z-index: 1000 }
#Header.euro-menu.is-home:not(.fixed) { position: absolute; inset: 0 0 auto; background: transparent; box-shadow: none }
#Header.euro-menu form { max-width: 285px; background: var(--color-white) }
#Header.euro-menu input { min-width: 0; outline: none; color: var(--color-ink) }
#Header.euro-menu .header-top { background: var(--color-main); color: var(--color-white) }
#Header.euro-menu .text-end .btn-main { transition: background .25s ease, color .25s ease, box-shadow .25s ease }
#Header.euro-menu .text-end .btn-main:hover { color: var(--color-main); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-main) }
#Header.euro-menu form button img { transition: transform .25s ease }
#Header.euro-menu form button:hover img { transform: scale(1.15) }
#Header.euro-menu.is-home:not(.fixed) form { background: color-mix(in srgb, var(--color-white) 20%, transparent) }
#Header.euro-menu.is-home:not(.fixed) input, #Header.euro-menu.is-home:not(.fixed) input::placeholder { color: var(--color-white) }
.euro-nav a { color: var(--color-ink); text-decoration: none; transition: .3s; gap: 10px }
.euro-nav a > svg { flex-shrink: 0 }
.euro-nav ul a > svg { rotate: -90deg }
.euro-nav > li > a { white-space: nowrap }
.euro-nav > li:first-child { column-gap: 20px }
.euro-nav > li > ul, .euro-nav > li > ul ul { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--color-white); box-shadow: 0 5px 15px var(--color-shadow); visibility: hidden; opacity: 0; transition: .3s }
.euro-nav > li > ul ul { left: 100%; top: 0 }
.euro-nav li:hover > ul, .euro-nav li:focus-within > ul { visibility: visible; opacity: 1 }
.euro-nav a.active, .euro-nav a:hover, .euro-nav a:focus-visible { color: var(--color-main) }
#Header.euro-menu.is-home:not(.fixed) .euro-nav > li > a { color: var(--color-white) }
#Header.euro-menu.is-home:not(.fixed) .logo, #Header.euro-menu.is-home:not(.fixed) .euro-nav > li > a > img { filter: brightness(0) invert(1) }
#Header.euro-menu.is-home:not(.fixed) .euro-nav > li > a:hover { text-decoration: underline }
.euro-social a { transition: transform .3s }
.euro-social a:hover { transform: translateY(-4px) }
.euro-footer { color: var(--color-desc); background: var(--color-footer) }
.euro-footer hr { max-width: 592px; border-color: var(--color-main) }
.euro-footer a { color: var(--color-desc); transition: .3s; text-decoration: none; overflow-wrap: anywhere }
.euro-footer a:hover { color: var(--color-main); text-decoration: underline }
.euro-video { height: min(100vh, 800px); min-height: 480px; background: var(--color-black) }
.euro-video .swiper-slide { height: 100%; aspect-ratio: auto }
.euro-video .swiper-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-overlay), transparent, var(--color-overlay)); pointer-events: none }
.wrap-euro { overflow: hidden }
.wrap-euro .info { max-width: 608px; margin-left: auto }
.wrap-euro .attrs { border-radius: 50px; background: var(--color-soft-blue) }
.wrap-euro .desc { max-width: 502px; color: var(--color-muted) }
.seo-fold .content-text, .wrap-congtrinh .desc, .euro-partners .desc { color: var(--color-muted) }
.wrap-euro .image { overflow: hidden }
.wrap-euro .image img { display: block; height: 100%; object-fit: cover }
.wrap-chuluc { background: var(--bg-overlay-chuluc), url(../images/bg-san-pham-chu-luc.jpg) center / cover no-repeat }
.wrap-chuluc [role="tab"] { background: color-mix(in srgb, var(--color-white) 10%, transparent); border-color: var(--color-glass); color: var(--color-white) }
.wrap-chuluc [role="tab"].active, .wrap-chuluc [role="tab"]:hover { background: var(--color-white); color: var(--color-ink) }
.wrap-chuluc .title-main .line, .wrap-tintuc .title-main .line { filter: brightness(0) invert(1) }
.btn-main.outline .blob-txt { color: inherit }
.btn-main.outline.white .icon { content: url(../images/eurowindow/arrow-white.svg); filter: none }
.btn-main.outline.white:hover .icon { filter: none }
.card-sanpham { max-width: 290px }
.card-sanpham .image { width: fit-content; max-width: 100%; border-radius: 20px; overflow: hidden; isolation: isolate }
.card-sanpham .image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%, var(--color-overlay)); pointer-events: none }
.card-sanpham .image img { display: block; object-fit: contain; transition: .3s }
.card-sanpham .name { position: absolute; inset: auto 0 0; min-height: 60px; background: var(--color-glass); backdrop-filter: blur(5px); color: var(--color-white); z-index: 1 }
.card-sanpham:hover .image img, .card-duan:hover .image img, .card-tintuc:hover .image img { transform: scale(1.04) }
.wrap-duan .swiper-slide { width: 800px; max-width: calc(100% - 32px); transform: scaleY(.742); transition: transform .6s }
.wrap-duan .swiper-slide-active, .wrap-duan .swiper-slide:only-child { transform: none }
.card-duan .image, .wrap-congtrinh .image, .card-tintuc { border-radius: 20px; overflow: hidden; isolation: isolate }
.card-duan .image img, .card-tintuc .image img, .wrap-congtrinh .image img { display: block; object-fit: contain; transition: .3s }
.card-duan .image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45.192%, rgba(0,0,0,.8)); pointer-events: none }
.wrap-duan .swiper-slide-prev .image { border-radius: 0 20px 20px 0 }
.wrap-duan .swiper-slide-next .image { border-radius: 20px 0 0 20px }
.card-duan .info { position: absolute; inset: auto 0 0; opacity: 0; transition: .3s }
.card-duan .name { overflow-wrap: anywhere }
.swiper-slide-active .card-duan .info, .swiper-slide:only-child .card-duan .info { opacity: 1 }
.wrap-duan .swiper-button-next, .wrap-duan .swiper-button-prev { width: 63px; height: 63px; margin-top: -31.5px; color: var(--color-white); background: url(../images/eurowindow/project-prev.svg) center / 15px no-repeat; border: 0; border-radius: 50% }
.wrap-duan .swiper-button-next::after, .wrap-duan .swiper-button-prev::after { content: none; display: none }
.wrap-duan .swiper-button-next svg, .wrap-duan .swiper-button-prev svg { visibility: hidden }
.wrap-duan .swiper-button-next, .wrap-duan .swiper-button-prev { transition: opacity .25s ease, background .25s ease }
.wrap-duan .swiper-button-next:hover, .wrap-duan .swiper-button-prev:hover { background: url(../images/eurowindow/project-next.svg) center / contain no-repeat }
.wrap-duan .swiper-button-next { right: max(16px, calc((100% - 1200px) / 2)) }
.wrap-duan .swiper-button-prev { left: max(16px, calc((100% - 1200px) / 2)); scale: -1 1 }
.wrap-congtrinh .name { position: absolute; inset: auto 0 0; background: linear-gradient(transparent, var(--color-overlay)) }
.wrap-congtrinh .attrs { border: 0; border-radius: 20px; box-shadow: 0 0 10px var(--color-shadow); background: var(--color-white); color: var(--color-main); min-height: 140px; transition: .3s }
.wrap-congtrinh .attrs.active, .wrap-congtrinh .attrs:hover { background: var(--color-main); color: var(--color-white) }
.wrap-congtrinh .attrs.active { box-shadow: none }
[data-detail-panel] .content-text img { border-radius: 10px }
.wrap-congtrinh .attrs.active .icon, .wrap-congtrinh .attrs:hover .icon { filter: brightness(0) invert(1) }
.wrap-tintuc { padding-top: 121px; padding-bottom: 112px; background: url(../images/bg-tin-tuc.png) center 50px / 100% auto no-repeat }
.card-tintuc { max-width: 592px }
.card-tintuc .image { aspect-ratio: 592 / 450 }
.card-tintuc.small .image { aspect-ratio: 592 / 217 }
.card-tintuc .image img { width: 100%; height: 100%; object-fit: cover }
.card-tintuc .info { position: absolute; inset: auto 0 0 }
.card-tintuc .image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 36%, var(--color-news) 90%); pointer-events: none }
.card-tintuc.small .image::after { background: linear-gradient(transparent, var(--color-news) 90%) }
.card-tintuc:not(.small) { box-shadow: 0 0 25px var(--color-glow) }
.card-tintuc:not(:hover) .btn-main.outline.white { background: var(--color-glass-light) }
.card-tintuc:hover .btn-main { background: var(--color-main); color: var(--color-white) }
.card-tintuc .name a:hover { text-decoration: underline }
.card-tintuc:hover .btn-main .icon { filter: none }
.euro-partners > .d-flex { min-height: 150px; background: var(--color-white); border-block: .5px solid var(--color-main) }
.euro-partners .swiper-slide { width: 170px }
.wrap-thanhtich .swiper { mask-image: linear-gradient(to right, transparent, var(--color-black) 15%, var(--color-black) 85%, transparent) }
.seo-fold .hide-content { background: linear-gradient(transparent, var(--color-white) 80%) }
.seo-fold .btn-view-full-content .icon { transform: rotate(90deg) }
.seo-fold .btn-view-full-content.is-show .icon { transform: rotate(-90deg) }

/* ===== GIOITHIEU ===== */
.euro-about [data-sec="gioithieu-banner"] h1 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-shadow: 0 4px 4px var(--color-shadow) }
.wrap-vision .image { border-radius: 20px; overflow: hidden; isolation: isolate }
.wrap-vision .image img { border-radius: 20px }
.wrap-vision .image img, .euro-values .image img, .euro-history .image img { display: block; object-fit: contain }
.wrap-vision .info { background: #e8f3ff; border-radius: 20px; isolation: isolate }
.wrap-vision .info::before { content: ''; position: absolute; inset: 12px -57px auto auto; width: 277px; height: 277px; background: url(../images/eurowindow/vision-decor.svg) center / contain no-repeat; filter: brightness(0) invert(1); opacity: .7; z-index: -1 }
.wrap-vision .info.dark { background: var(--color-main) }
.wrap-vision .info.dark::before { background-image: url(../images/eurowindow/mission-decor.svg); opacity: .15 }
.wrap-vision .desc, .euro-history .desc { color: var(--color-muted) }
.euro-history .about-history__slide .desc { max-width: 792px }
.euro-values article { overflow: hidden; isolation: isolate }
.euro-values .image::after { content: ''; position: absolute; inset: 0; background: var(--bg-overlay-values); pointer-events: none }
.euro-values .attrs { position: absolute; top: 42%; left: 0; right: 0; text-align: center; opacity: .8; transition: transform .4s, opacity .4s }
.euro-values .row { max-width: 1200px }
.euro-values .info { position: absolute; inset: auto 10px 10px; border-radius: 10px; background: var(--color-glass-dark); backdrop-filter: blur(5px); transition: background .4s, transform .4s; min-height: 116px }
.euro-values .image img { transition: transform .6s, filter .6s }
.euro-values article:hover .image img { transform: scale(1.08); filter: brightness(.8) }
.euro-values article:hover .attrs { opacity: 1; transform: translateY(-12px) }
.euro-values article:hover .info { background: var(--color-main); transform: translateY(-4px) }
.euro-stats .stat-item__label { max-width: 250px }
.euro-stats { background: var(--bg-overlay-stats), url(../images/bg-con-so.jpg) center / cover no-repeat }
.euro-stats .stat-item { border-radius: 10px; background: radial-gradient(circle at 10px 11px, rgba(255,255,255,.8) 2px, transparent 2px), radial-gradient(circle at calc(100% - 10px) 11px, rgba(255,255,255,.8) 2px, transparent 2px), radial-gradient(circle at 10px calc(100% - 10px), rgba(255,255,255,.8) 2px, transparent 2px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(255,255,255,.8) 2px, transparent 2px), rgba(255,255,255,.2); min-height: 172px; text-align: left }
.euro-history > .container + div { border-top: .5px solid var(--color-main) }
.euro-history .about-history__years { min-width: 0; border-right: .5px solid var(--color-main) }
.euro-history .about-history__nav { height: 560px; margin-right: -8px; padding-right: 8px }
.euro-history .year-item { border-right: 0; padding-bottom: 0 }
.euro-history .about-history__slide .image { width: fit-content; max-width: 100%; margin-inline: auto; border-radius: 20px; overflow: hidden; isolation: isolate }
.euro-history .year-item span { color: var(--color-muted) }
.euro-history .year-item > span + span { display: none }
.euro-history .swiper-slide-thumb-active .year-item > span:first-child { display: none }
.euro-history .swiper-slide-thumb-active .year-item > span + span { display: flex }
.euro-history .swiper-slide-thumb-active .year-item span { color: var(--color-main) }
.euro-history .image { border-radius: 20px; overflow: hidden }

/* ===== SANPHAM ===== */
.euro-products .position-sticky { top: 120px }
.euro-cats { width: 100%; max-height: none; border: 0; border-radius: 20px; overflow: hidden; background: #f5faff }
.euro-cats a { color: var(--color-desc); text-decoration: none; transition: .3s }
.euro-cats a:hover { color: var(--color-main) }
.euro-cats a.text-main { color: var(--color-main) }
.euro-cats .icon { rotate: -90deg; flex-shrink: 0 }
.euro-cats > ul > li { border-bottom: .5px solid var(--color-main) }
.euro-cats > ul > li:last-child { border-bottom: 0 }
.euro-cats a.text-main:hover { text-decoration: underline }
.euro-cats [data-category-toggle] { border-radius: 50%; transition: .3s }
.euro-cats [data-category-toggle]:hover { background: var(--color-soft) }
.euro-products [data-sec="sanpham-cta"] .image { width: fit-content; max-width: 100%; border-radius: 20px; overflow: hidden }
.euro-products .btn-load-more-product { transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease }
.euro-products .btn-load-more-product:hover, .euro-products .btn-load-more-product:focus-visible { border-color: var(--color-main) }
.euro-products .btn-show-more-filter .icon { transform: rotate(90deg) }

/* ===== CHITIET ===== */
.euro-detail .slider-products .image, .euro-detail .slider-product-thumbs .image { width: fit-content; max-width: 100%; border-radius: 10px; overflow: hidden }
.euro-detail .slider-products img, .euro-detail .slider-product-thumbs img { display: block; object-fit: contain }
.euro-detail .slider-product-thumbs { height: 562px }
.euro-detail .desc { color: var(--color-muted) }
.euro-detail [data-detail-tab] { background: var(--color-soft); color: var(--color-main) }
.euro-detail [data-detail-tab].active, .euro-detail [data-detail-tab]:hover { background: var(--color-main); color: var(--color-white) }
.euro-detail [data-detail-panel] { background: var(--color-white); box-shadow: 0 0 10px var(--color-shadow); border-radius: 10px }
.euro-detail [data-detail-panel] .content-text { position: relative; max-height: 600px; padding-bottom: 70px; overflow: hidden }
.euro-detail [data-detail-panel] .content-text.show-full-content { max-height: none }
.euro-fit .image { width: fit-content; max-width: 100%; border-radius: 30px; overflow: hidden }
.euro-fit .image img { display: block }
.euro-fit .image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 26%, var(--color-overlay) 90%); pointer-events: none }
.euro-fit .name { position: absolute; inset: auto 0 0; z-index: 1 }
.euro-detail .btn-main.danger { background: var(--color-call) }
.euro-detail .btn-main.danger a { text-decoration: none }
.euro-detail .btn-main.danger a:hover { text-decoration: underline }
.euro-detail .slider-product-thumbs .image img { transition: .3s }
.euro-detail .slider-product-thumbs .image:hover img { opacity: .75 }
.scrollToTop.is-visible:hover { transform: translateY(-4px); box-shadow: 0 8px 20px var(--color-shadow) }


/* ===== TINTUC ===== */
.euro-news .card-duan .info { opacity: 1 }
.euro-news .card-tintuc, .euro-news .card-duan { max-width: 100% }
.euro-news .news-load-more .icon { transform: rotate(90deg) }
.euro-history .year-item::before { width: 8px; height: 8px; border-radius: 50%; rotate: 0deg; left: auto; right: -4px; top: 50%; bottom: auto; transform: translateY(-50%) }
.euro-history .year-item::after { content: ''; display: none; position: absolute; width: 16px; height: 16px; right: -8px; top: 50%; transform: translateY(-50%); background: url(../images/eurowindow/history-ring.svg) center / contain no-repeat; pointer-events: none }
.euro-history .swiper-slide-thumb-active .year-item::after { display: block }