.banner-top { padding-bottom: 15px !important; background-color: white; }
.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: white; z-index: 99; }
.header-top { color: rgb(255, 255, 255); background-color: var(--color-main); }
.header-top marquee { padding-top: 9px; margin-right: 20px; }
.header-top ul { margin: 0px; padding: 0px; display: flex; align-items: center; list-style: none; gap: 10px; }
.header-top ul li.line { width: 0px; height: 50px; border-left: 0.5px solid rgba(0, 0, 0, 0.3); border-right: 0.5px solid rgba(255, 255, 255, 0.3); }
.header-top ul li a { display: block; font-family: Oswald; font-weight: 300; font-size: 15px; }
.header-top ul li a:hover { color: rgb(0, 0, 0); }
.header-nav { padding-bottom: 7px; }
.header-nav .cart { position: relative; }
.header-nav .cart b { position: absolute; top: 0px; right: -3px; min-width: 18px; height: 18px; line-height: 18px; font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); background-color: rgb(255, 0, 4); border-radius: 50%; text-align: center; }
.header-nav.fixed { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; background: rgb(255, 255, 255); padding: 5px 0px !important; }
.header-nav.fixed .cart { display: flex !important; }
.header-bottom { position: relative; }
.header-bottom.fixed { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; background: rgb(255, 255, 255); }
.header-bottom.fixed .fixed-hide { display: none !important; }
.header-bottom.fixed .menu { margin-top: 0px; }
.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: 0px; 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: 0px; margin: 0px; z-index: 21; max-width: 694px; }
.header-bottom .header-ul .line { width: 1px; height: 20px; margin: 0px 5px; background-color: rgb(207, 207, 207); }
.header-bottom .header-ul a { display: block; color: rgb(92, 94, 98); text-transform: math-auto; line-height: 47px; font-size: 16px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; background-repeat: no-repeat; background-size: 24px 23px; background-position: 0px center; border-bottom: 2px solid transparent; }
.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-black); border-color: var(--color-black); }
.header-bottom .header-ul .lang a { display: flex; cursor: pointer; border: 1px solid rgb(255, 255, 255); }
.header-bottom .header-ul .lang a img { width: 34px; }
.header-bottom .header-ul .has-child { position: relative; }
.header-bottom .header-ul a.dropdown::after { content: ""; display: block; position: absolute; bottom: calc(50% - 1.75px); right: -15px; width: 5px; height: 5px; border-width: 0px 1px 1px 0px; border-style: none solid solid none; border-color: currentcolor; border-image: initial; transform: rotate(45deg); }
.header-bottom .header-ul .submenu, .header-bottom .header-ul > li > ul { position: absolute; background-color: rgb(250, 250, 250); border-radius: 0.25rem; opacity: 0; visibility: hidden; }
.header-bottom .header-ul ul { padding: 0px; margin: 0px; list-style: none; transition: 0.3s; }
.header-bottom .header-ul ul li a { font-size: 14px; color: rgb(117, 117, 117); border-bottom: 0px solid rgb(236, 236, 236); padding: 7px 10px; text-transform: capitalize; line-height: 25px; }
.header-bottom .header-ul > li > ul { min-width: 250px; top: 100%; box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 15px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0px 0px 0px; z-index: 1; }
.header-bottom .header-ul li:hover > ul { transform: perspective(600px) rotateX(0deg); transform-origin: 0px 0px 0px; 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; box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 15px; transform: perspective(600px) rotateX(-90deg) translateX(-40%); transform-origin: 0px 0px 0px; z-index: 5; }
.header-bottom .header-ul .has-child:hover > .submenu { transform: perspective(600px) rotateX(0deg) translateX(-40%); transform-origin: 0px 0px 0px; opacity: 1; visibility: visible; }
.header-bottom .header-ul .submenu ul { padding: 0px; list-style: none; }
.header-bottom .header-ul .has-child ul.submenu > li { width: 16.6667%; }
.header-bottom .header-ul .has-child > ul.submenu > li { padding: 0px 5px; margin-bottom: 5px; }
.header-bottom .header-ul .has-child ul.submenu .list { padding: 7px 0px; font-weight: 700; color: var(--color-main); }
.header-bottom .header-ul .has-child ul.submenu .cat { font-size: 13px; padding: 0px; }
.header-bottom .header-ul .has-child ul.submenu > li a { display: flex; align-items: center; padding: 0px; }
.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: 0px auto; background: 0px 0px; border-radius: 0px; }
.header-bottom .header-ul .has-child ul.submenu > li p { margin-bottom: 0px; }
.effect-text { animation: 1s ease-in-out 0s infinite normal none running effectText; transition: color 0.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; 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 a.hotline { animation: 1s ease-in-out 0s infinite normal none running blinkColor; transition: color 0.3s ease-in-out; }
@keyframes blinkColor {
0%, 100% { color: var(--color-main); border-color: var(--color-main); }
50% { color: rgb(255, 0, 4); border-color: rgb(255, 0, 4); }
}
.category-item:hover .name, .product-item .name a { color: var(--color-submain); }
.news-index .name, .news-index::after { transition: 0.3s; left: 0px; 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: rgb(241, 241, 241); width: 100%; padding: 20px; text-shadow: rgb(51, 51, 51) 0px 0px 3px; }
.service-list, .uudai-item, .wrap-tuvan, .wrap-uudai { position: relative; }
.wrap-service-list { background-color: rgb(253, 253, 253); }
.service-list { display: block; background-color: rgb(255, 255, 255); }
.service-list .image { width: 128px; margin: 0px auto; }
.service-list .name { font-family: "Playfair Display", serif; font-size: 21px; font-weight: 600; margin-bottom: 0px; }
.wrap-tuvan { background: url("../images/bg_tuvan.jpg") center center no-repeat; }
.wrap-tuvan::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
#frm-advisory .form-control { color: rgb(255, 255, 255); border-radius: 0px; border: 1px solid rgb(204, 204, 204); background-color: transparent; }
#frm-advisory .form-control::placeholder { color: rgb(255, 255, 255); }
.wrap-uudai { z-index: 2; transform: translateY(-50%); }
.wrap-uudai .col-md-7 { border-radius: 30px; box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px; background: rgb(255, 255, 255); }
.uudai-item { padding: 8px; }
.uudai-item::after { content: ""; width: 1px; height: 40%; background: var(--color-main); position: absolute; top: 30%; left: -12px; }
.news-index, .product-item, .product-list { position: relative; }
.wrap-uudai .owl-item:first-child .uudai-item::after { display: none; }
.uudai-item .image { position: relative; display: inline-block; }
.uudai-item img { display: block; width: 30px; }
.category-item { width: calc(12.5%); display: block; padding: 10px; text-align: center; border: 1px solid transparent; border-radius: 5px; transition: 0.3s ease-in-out; }
.category-item .image { margin-bottom: 10px; }
.category-item .image img { width: 48px; border-radius: 5px; }
.category-item .name { font-size: 14px; font-weight: 700; }
.category-item:hover { border: 1px solid rgb(134, 241, 255); }
.news-index, .product-item .image img, .product-list { border-radius: 10px; }
.product-list { display: block; overflow: hidden; }
.product-list .name { position: absolute; top: 0px; left: 0px; padding: 10px 20px; color: rgb(255, 255, 255); font-size: 15px; text-align: center; background-color: var(--color-submain); border-bottom-right-radius: 10px; }
.product-list .desc { padding: 20px; background-color: rgb(242, 242, 242); }
.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: 0px 0px 20px; padding: 0px; list-style: none; }
.product-item .attrs li { padding: 5px 0px 3px; border-top: 1px solid rgb(152, 152, 152); color: rgb(152, 152, 152); }
.product-item .attrs li svg { margin-top: -2px; }
.product-item .attrs li b { color: rgb(0, 0, 0); }
.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(25% - 0.5rem); }
.filter-brand .filter-dropdown-item { width: calc(10% - 0.5rem); }
.brand-item { display: block; width: 100%; }
.brand-item .image { overflow: hidden; background: rgb(255, 255, 255); padding: 5px; margin-bottom: 8px; }
.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: 0px; height: 50%; background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgb(0, 0, 0) 100%); }
.news-index .name { bottom: 0px; font-size: 13px; font-weight: 400; margin-bottom: 0px; padding: 10px 15px; color: rgb(255, 255, 255); z-index: 10; }
.news-index:hover::after { height: 30%; }
.wrap-cauchuyen, .wrap-search-multiple { background: linear-gradient(rgb(248, 248, 248) 0px, rgb(236, 236, 236) 100%); }
.wrap-product-hot { }
.visao-item .image img, .visao-item .info { position: relative; z-index: 2; }
.title-tieuchi { width: 50%; margin-left: auto; padding: 0px 20px; border-radius: 50px; border: 1px solid rgb(0, 0, 0); }
.product-inner { background-color: rgb(255, 251, 236); }
.product-hot { padding: 2rem 0px; background-color: rgb(255, 255, 255); }
.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: 0px; top: 10px; }
.wrap-top .container { padding-top: 20px; }
.owl-menu-cat { width: calc(100% - 450px); }
.wrap-doitac .owl-item { padding: 10px 0px; }
.doitac-item { display: flex; align-items: center; padding: 5px; background-color: rgb(255, 255, 255); border: 1px solid rgb(234, 233, 233); border-radius: 5px; overflow: hidden; }
.category-lists, .wrap-category ul { padding: 30px; background-color: rgb(236, 236, 236); }
.wrap-category ul { list-style: none; margin: 0px; display: flex; flex-wrap: wrap; gap: 40px; }
.wrap-category ul li { width: 12%; }
.wrap-category ul li img { height: 60px; }
.visao-item:hover .num, .wrap-counter { background: var(--color-main); }
.category-lists a { display: block; text-align: center; font-size: 15px; }
.category-lists span { position: relative; display: block; margin: 0px auto 10px; padding: 10px; border-radius: 20px; background-color: rgb(255, 255, 255); }
.category-lists img { border-radius: 20px; }
.counter-item { position: relative; font-size: 16px; text-align: center; }
.counter-item .number { color: var(--color-main); }
.counter-item sup { position: absolute; top: 0px; font-size: 2.5rem; }
.counter-item p { margin-bottom: 0px; }
.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: rgb(241, 241, 241); 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: 0.3s; }
.visao-item .desc { margin-bottom: 0px; color: rgb(69, 69, 69); font-size: 13px; font-weight: 600; }
.visao-item:hover .num { color: rgb(255, 255, 255); }
.visao-item:hover .name { color: var(--color-main); }
.accordion-item, .wrap-diadiem-hot .service-list, .wrap-diadiem-hot .service-list .info { border-radius: 0px; }
.wrap-diadiem-hot .row { margin: 0px; }
.wrap-diadiem-hot .row [class^="col"] { padding: 0px; }
.wrap-diadiem-hot .service-list .name { background: 0px 0px; text-align: left; transform: translateY(0px); }
.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: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgb(0, 0, 0) 100%); transition: 0.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: rgb(151, 148, 148); }
.wrap-cauhoi .hide-content { background: linear-gradient(transparent, rgb(247, 247, 247) 100%); }
.accordion-item { margin-bottom: 20px; overflow: hidden; background: rgb(255, 255, 255); color: rgb(94, 94, 94); font-weight: 500; font-size: 16px; border-width: 0px 0px 2px; border-style: solid solid dashed; border-color: currentcolor currentcolor rgb(232, 232, 232); border-image: initial; }
.accordion-body { padding: 0px 0px 10px; }
.accordion-button { position: relative; padding: 1rem 0px; background: rgb(255, 255, 255); font-size: clamp(17px, 2vw, 18px); font-weight: 600; color: rgb(21, 21, 21) !important; }
.accordion-button:not(.collapsed) { background: 0px 0px; outline: 0px !important; border: 0px !important; box-shadow: none !important; color: var(--color-red) !important; }
.accordion-button::after { width: 30px; height: 30px; background: url("../images/plus.png") center center no-repeat; }
.accordion-button:not(.collapsed)::after { background: url("../images/minus.png") center center no-repeat; transform: rotate(0deg); }
.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: rgb(141, 141, 141); }
.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: 0px; }
.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: rgb(255, 255, 255); background: var(--color-main); margin-right: 20px; }
.wrap-about .about-info .btn-more:hover { background: rgb(31, 150, 7); }
.wrap-about .about-info .btn-video { display: flex; align-items: center; padding: 8px 15px; color: rgb(17, 17, 17); background: var(--color-submain); }
.wrap-about .about-info .btn-video:hover { background-color: rgb(239, 226, 12); }
.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: rgb(248, 248, 248); }
.goikham-item .info { position: relative; width: 90%; margin-left: auto; margin-right: auto; background: rgb(255, 255, 255); padding: 20px; margin-top: -40px; }
.goikham-item .name { font-size: 18px; font-weight: 700; margin-bottom: 15px; }
.baogia-item:hover, .blog-l h3 a:hover, .box-newsi h3 a:hover, .doingu-item, .doingu-item .name a, .goikham-item .name a, .khachhang-item:hover .icon svg, .news-item .name a:hover, .news-item:hover .name a, .owl-item.active.center .khachhang-item .icon svg, .quytrinh-item:hover .name, .tieuchi-item:hover .name, .whyus-list:hover .name, .year-item.slick-current { color: var(--color-red); }
#frm-newsletter .frm-title, .goikham-item .name a:hover, .name-product:hover, .search-res .icon-search.active { color: var(--color-red); }
.goikham-item .more .btn-main { width: 50%; }
#chuyenkhoaTabs { justify-content: space-between; }
#chuyenkhoaTabs .nav-link { font-size: 14px; padding: 5px; color: rgb(153, 153, 153); background: rgb(240, 240, 240); }
#chuyenkhoaTabs .nav-link.active, .choose-list button.choosed, .choose-list button:hover { color: rgb(255, 255, 255); background: var(--color-main); }
#chuyenkhoaTabsContent { border-width: 0px 1px 1px; border-style: none solid solid; border-color: currentcolor rgb(222, 226, 230) rgb(222, 226, 230); border-image: initial; box-shadow: rgba(0, 160, 227, 0.15) 0.5rem 0.5rem 1rem; }
.wrap-doingu { background: url("../images/bg_doingu.jpg") right bottom no-repeat rgb(248, 249, 248); }
.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: 0.3s; }
.doingu-item .desc { color: rgb(126, 126, 126); font-size: 14px; }
.wrap-appointment, .wrap-tieuchi { background: rgb(247, 247, 247); }
.tieuchi-inner { background-repeat: no-repeat; background-position: center center; background-size: 250px; }
.tieuchi-item { padding: 0px; max-width: 85%; cursor: pointer; }
.tieuchi-item .num { font-size: 75px; line-height: 1; background: linear-gradient(rgb(255, 203, 15) 0px, rgb(255, 255, 255) 100%) 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: rgb(0, 0, 0); font-weight: 600; font-size: 16px; line-height: 1.5; }
.tieuchi-item .desc { margin-bottom: 0px; color: rgb(134, 134, 134); font-size: 14px; }
.tieuchi-item:hover .num { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; }
.showroomSwiper .swiper-slide, .slide-left { width: 300px; }
.panorama-slider { width: 100%; padding: 60px 0px; perspective: 1000px; overflow: visible; }
.panorama-slider .swiper-slide { width: 250px; transition: transform 0.5s; transform-origin: center center; border-radius: 16px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px; }
.hinhthuc-item { margin-bottom: 15px; }
.hinhthuc-item .num { font-family: Dynalight; font-size: 75px; line-height: 65px; color: rgb(234, 234, 234); transition: 0.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-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; 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: rgb(51, 51, 51); font-size: 16px; margin-bottom: 0.5rem; }
.hinhthuc-item .desc { margin-bottom: 0px; color: rgb(51, 51, 51); 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: 0px; right: 0px; 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: rgb(255, 255, 255); }
#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: 0px -0.5rem; }
.gallery-pro-detail .slider-products .item img, .video-item { margin: 0px 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(rgb(47, 208, 255) 0px, rgb(11, 177, 225) 100%); color: rgb(255, 255, 255); font-family: Goldman, sans-serif; font-size: 16px; border-radius: 3px; margin-bottom: 0px; transform: rotate(-90deg); }
.video-item .btn-play { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); transition: 0.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, 0.5); }
.video-item .btn-play .kenit-alo-circle-fill { background: rgba(255, 255, 255, 0.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: rgb(255, 255, 255); }
#frm-newsletter .form-control { color: rgb(148, 148, 148); border: 0px; background-color: transparent; outline: 0px !important; box-shadow: none !important; }
#frm-newsletter button[type="submit"] { border: 1px solid rgb(255, 255, 255); background: 0px 0px; color: rgb(255, 255, 255); font-size: 14px; }
.form-check-input:checked { border-color: var(--color-submain); }
#frm-newsletter .frm-content { padding: 40px 20px; background-color: rgb(243, 243, 243); border-radius: 20px; }
#frm-newsletter .frm-title span { color: rgb(117, 117, 117); }
.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: rgb(255, 255, 255); border-radius: 5px; }
.newsletter-input label { padding-left: 10px; padding-top: 0.25rem; white-space: nowrap; margin: 0px; color: rgb(117, 117, 117); font-size: 14px; }
.newsletter-input input, .newsletter-input select, .newsletter-input textarea { font-size: 16px; height: 35px; border: 1px solid rgb(204, 204, 204); box-shadow: none !important; outline: 0px !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: 0px 10px; height: 31px; border: 0px; background: var(--color-main); color: rgb(255, 255, 255); border-radius: 0.25rem; }
.wrap-whyus { background: url("../images/bg_whyus.jpg") center center / cover no-repeat; color: rgb(255, 255, 255); }
.whyus-list:hover .image-rotate img { animation: 2s linear 0s infinite normal none running continuousRotateY; }
.quytrinhtm-item { margin: 0px 5px 10px 0px; 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: linear-gradient(rgb(255, 255, 255) 0px, rgb(238, 238, 238) 100%); }
.quytrinh-item:nth-child(2n+1) { 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") 0px 0px / 100% no-repeat; }
.quytrinh-item:nth-child(2n)::before { background: url("../images/arrow_quytrinh2.png") no-repeat; }
.quytrinh-item:last-child::before { background: 0px 0px; }
.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; }
.wrap-filter .filter-counter { display: inline-block; margin-left: 2px; font-size: 12px; line-height: 12px; width: 14px; height: 14px; text-align: center; border: 1px solid rgb(229, 229, 229); opacity: 0; }
.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: 0px; background: rgb(255, 255, 255); display: flex; justify-content: end; outline: 0px; overflow: hidden; transition: 0.4s ease-in-out; width: 200px; border: 1px solid rgb(207, 207, 207); }
.filter-search input { position: absolute; top: 0px; left: 0px; width: calc(100% - 30px); height: 100%; display: block; z-index: 1; outline: 0px !important; border: 0px !important; background: rgb(255, 255, 255) !important; box-shadow: none !important; }
.filter-search .btn { display: flex; justify-content: center; padding: 0px; border-radius: 5px; width: 30px; cursor: pointer; background: 0px 0px; border-color: transparent; z-index: 2; }
.filter-dropdown { position: absolute; left: 0px; width: 100%; background-color: rgb(255, 255, 255); top: 100%; border-radius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 15px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0px 0px 0px; opacity: 0; visibility: hidden; padding: 15px; transition: 0.3s ease-in-out; z-index: 10; }
.filter-dropdown.show { transform: perspective(600px) rotateX(0deg); transform-origin: 0px 0px 0px; opacity: 1; visibility: visible; }
.filter-dropdown-item a, .search-multiple .giaban-item .name, .search-multiple .hangxe-item .name { font-size: 13px; }
.wrap-project { background: rgb(255, 255, 255); }
.project-item .name { font-size: 18px; }
.news-item { overflow: hidden; border-color: rgb(232, 232, 232) !important; }
.news-item .image { position: relative; margin-bottom: 0px; }
.news-item .info { position: relative; width: 100%; z-index: 10; }
.news-item .time { margin: 0px auto 15px; width: 65px; height: 82px; border-bottom: 1px solid var(--color-main); color: rgb(34, 34, 34); font-size: 16px; padding-top: 25px; line-height: 20px; background: url("../images/bg_time.png") center top / 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 rgb(34, 34, 34); }
.news-item .author { font-size: 14px; color: rgb(170, 170, 170); }
.news-item .name { height: 52px; }
.news-item .name a { position: relative; color: var(--color-main); }
.news-item .name:hover a { }
.news-item .desc { height: 81px; color: rgb(156, 156, 156); }
.news-item .more a { font-size: 12px; color: rgb(133, 133, 133); }
.news-item .meta { position: absolute; top: 10px; left: 10px; }
.news-item .meta span { display: block; font-size: 0.875rem; color: rgb(255, 255, 255); padding: 3px 5px 2px; border-radius: 3px; background-color: var(--color-main); }
.news-item .line { margin-top: 30px; margin-bottom: 5px; width: 50px; height: 2px; background: rgb(137, 176, 232); }
.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); }
.giatri-item, .pic-video, .pic-video-2 { position: relative; cursor: pointer; height: 100%;}
/* .pic-video img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
} */
.giatri-item .image, .khachhang-item .image { width: 70px; }
.giatri-item .name { }
.giatri-item .desc { font-size: clamp(14px, 1.5vw, 16px); font-weight: 500; color: rgb(110, 110, 110); }
.wrap-doingu-inner { background: linear-gradient(rgb(255, 255, 255) 0px, rgb(207, 207, 207) 100%); }
.choose-list button.choosed::before, .choose-list button:hover::before, .item-giatri, .slide-center a, .year-item.slick-current::before { background-color: var(--color-main); }
.wrap-vanhoa .wrap-content { padding: 40px; border-radius: 20px; box-shadow: rgba(234, 230, 230, 0.5) 5px 5px 0px; }
.vanhoa-item .image { width: 56px; }
.vanhoa-item .name { font-size: 16px; font-weight: 600; color: var(--color-main); }
.vanhoa-item .desc { color: rgb(102, 102, 102); font-size: 15px; font-weight: 500; }
.history-item .name { }
.history-item .p { font-size: 24px; font-family: var(--font-bold); margin-bottom: 0px; }
.item-giatri .name, .item_history .name { font-family: "Playfair Display", sans-serif; }
.year-item { font-size: 16px; position: relative; color: rgb(185, 185, 185); padding-bottom: 20px; z-index: 98; }
.year-item span { display: flex; align-items: center; justify-content: center; height: 40px; font-size: 21px; font-weight: 500; }
.year-item.slick-current span { font-size: 24px; font-weight: bold; }
#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: 9; }
.year-item::before { content: ""; position: absolute; bottom: 2px; margin: auto; right: 0px; left: 0px; width: 8px; height: 8px; background-color: rgb(217, 217, 217); z-index: 3; transform: rotate(45deg); }
.item-giatri .icon, .slideshow .banner-item:first-child { margin-bottom: 20px; }
.wrap-history .slider-nav::after { content: ""; position: absolute; bottom: 5px; width: 100%; height: 1px; background-color: rgb(198, 198, 198); z-index: 0; }
.gallery-pro-detail .slider-products .slick-arrow svg, .wrap-history .slider-nav .slick-arrow { width: 30px; height: 30px; }
.wrap-history .slider-nav .slick-arrow::before { font-size: 25px; color: var(--color-main); }
.pic-news img, .pic-newshome-normal img, .pic-product img, .pic-video img, .pic-video-2 img, .tags-pro-detail, .wrap-history .slider-for { width: 100%; }
.item-giatri { position: relative; padding: 20px; border-radius: 10px; }
.item-giatri .bg { position: absolute; width: 30%; height: 65%; top: 0px; right: 0px; opacity: 0.5; }
.item-giatri .bg img { max-width: 100%; max-height: 100%; }
.item-giatri .icon { position: relative; width: 40px; }
.item-giatri .name { position: relative; font-size: 18px; font-weight: 700; color: rgb(255, 255, 255); }
.item-giatri .desc { position: relative; font-size: 15px; color: rgb(135, 197, 223); 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: 0px; left: 0px; width: 100%; height: 50%; background: linear-gradient(rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 100%); }
.item_history .info { position: absolute; padding: 10px 20px; bottom: 10px; left: 10px; width: 100%; color: rgb(255, 255, 255); }
.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: rgb(255, 255, 255); }
.item_history .desc { font-size: 16px; color: rgb(255, 255, 255); }
a.play .btn-frame { width: 50px; height: 50px; }
a.play .btn-frame i { color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.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: 0px 10px; justify-content: center; }
#hamburger { position: relative; display: block; width: 34px; height: 30px; border: 1px solid rgb(255, 255, 255); }
#hamburger span, #hamburger::after, #hamburger::before { background: rgb(255, 255, 255); content: ""; display: block; width: 60%; height: 1px; position: absolute; left: 20%; transition: transform 0.5s 0.5s, top, bottom, left, opacity; }
.search-multiple .giaban-item, .search-multiple .hangxe-item, .search-multiple .loaixe-item { transition: 0.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: rotate(45deg); }
.mm-wrapper_opening #hamburger::after { transform: rotate(-45deg); }
.mm-menu_opened { display: block !important; z-index: 99999 !important; }
.mm-navbar, .mm-panel, .mm-panels { background: rgb(255, 255, 255) !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: rgb(0, 0, 0); }
.mm-btn::after, .mm-btn::before { border-color: rgb(0, 0, 0); }
.mm-listitem-product .mm-listitem__text { font-size: 15px; flex-basis: auto; flex-grow: 0; white-space: normal; padding: 2px 3px; margin: 2px; }
.search-res .icon-search { cursor: pointer; text-align: center; color: rgb(255, 255, 255); font-size: 16px; margin: 0px 0px 0px 10px; }
.search-res .search-grid { position: absolute; top: 35px; right: -12px; width: 0px; height: 40px; overflow: hidden; background: rgb(255, 255, 255); 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: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; margin: 0px; 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: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--color-main); }
.search-res .search-grid input::-webkit-input-placeholder { color: rgb(49, 49, 49); }
@keyframes dance {
0% { transform: scale(0.5); }
100% { transform: scale(1.5); }
}
@keyframes moveBounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(20px); }
}
@keyframes moveUpBounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(35px); }
}
@keyframes moveLeftBounceright {
0%, 100% { transform: translateX(0px); }
50% { transform: translateX(35px); }
}
@keyframes rotateme {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotateme {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.slideshow { position: relative; overflow: hidden; z-index: 1; }
.slideshow .slider { position: relative; width: 100%; }
.slideshow-image { display: block; width: 100%; height: 100%; }
.slideshow-image img { width: 100%; height: 100%; object-fit: cover; }
.slideshow .banner { width: 37%; }
.slbannerhh { display: table; table-layout: fixed; width: 100%; }
.slbannerhh video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
.banvdimg { width: 100%; height: 100%; }
.ssvideo { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0px; }
.slbannerhh .item { aspect-ratio: 1920 / 1050; overflow: hidden; position: relative; }
.slide-text .wrap-content { position: absolute; top: 20%; right: 0px; left: 0px; width: 100%; padding: 100px 0px; }
.slide-text .star { position: absolute; top: 0px; left: 10%; animation: 1.5s ease 0s infinite alternate none running dance; }
.slide-text .arrow { position: absolute; bottom: -40px; left: 20%; animation: 2s linear 0s infinite normal none running moveLeftBounceright; }
.slide-text .triangle { position: absolute; z-index: 22; bottom: -4%; left: 69%; color: rgb(255, 255, 255); width: 72px; height: 82px; min-height: 0px; min-width: 0px; max-height: none; max-width: none; transform-origin: 50% 50%; opacity: 1; transform: translate(0px, 0px); visibility: visible; animation: 2s linear 0s infinite normal none running moveBounce; }
.slide-right span, .slide-text .rotateme { inset: 5px 0px 0px 10px; position: absolute; }
.blink, .slide-text .rotateme { animation-iteration-count: infinite; }
.slide-text .rotateme { animation-name: rotateme; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear; }
.slide-center { width: 540px; text-align: center; color: rgb(255, 255, 255); }
.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: rgb(202, 198, 198); margin-bottom: 20px; }
.slide-center a { display: inline-block; padding: 15px 30px 12px; color: rgb(255, 255, 255); border-radius: 30px; box-shadow: rgb(255, 255, 255) 1px 1px 0px; }
.cart-product span, .web-item .info .d-flex a { text-transform: capitalize; }
.slide-center a:hover { background-color: rgb(190, 18, 23); }
.box-slide.slick-current.slick-active .slide-left { animation: 1s ease 0.5s 1 normal forwards running fadeInLeftBig; }
.box-slide.slick-current.slick-active .slide-right { animation: 1s ease 1s 1 normal forwards running fadeInRightBig; }
.box-slide.slick-current.slick-active .name-slide { animation: 1s ease 1.5s 1 normal forwards running fadeInUp; }
.box-slide.slick-current.slick-active .desc-slide { animation: 1s ease 2s 1 normal forwards running fadeInUp; }
.box-slide.slick-current.slick-active .views-more-slide { animation: 1s ease 2.5s 1 normal forwards running scaleLarge; }
.slide-text .slick-next, .slide-text .slick-prev { width: 40px; height: 50px; border-radius: 5px; background: rgba(0, 0, 0, 0.3); }
.slide-text .slick-prev { left: 5px; }
.slide-text .slick-next { right: 5px; }
.slide-text .slick-prev::before { font-family: FontAwesome; font-weight: 400; content: "ï“"; }
.slide-text .slick-next::before { font-family: FontAwesome; font-weight: 400; content: "ï”"; }
.news-control#down, .slide-text .slick-dots { bottom: 20px; }
.news-slick h3, .slide-text .slick-dots li { margin: 0px; }
.slide-text .slick-dots li button::before { color: rgb(255, 255, 255); font-size: 15px; }
.search-multiple { position: relative; z-index: 10; margin-top: -70px; background: linear-gradient(rgba(248, 248, 248, 0) 0px, rgb(242, 242, 242) 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 rgb(0, 0, 0); }
.search-multiple .col-lg-7 { border-right: 1px solid rgb(204, 204, 204); }
.search-multiple .loaixe-item { cursor: pointer; padding: 0px 10px; border-radius: 5px; background-color: rgb(238, 238, 238); }
.box-product.hot .pic-product, .cart-product, .search-multiple .loaixe-item .image, .thongso p { margin-bottom: 0px; }
.search-multiple .loaixe-item .image img { height: 80px; }
.search-multiple .loaixe-item .name { font-size: 18px; font-weight: 700; }
.search-multiple .hangxe-item { border-radius: 5px; padding: 7px 5px 5px; }
.search-multiple .hangxe-item .image { margin: 0px auto 5px; }
.search-multiple .hangxe-item .image img { height: 20px; }
#my-phone-circle, .blog-r .vert .simply-scroll-list li { height: 50px !important; }
.search-multiple .giaban-item { padding: 5px; background: rgb(238, 238, 238); 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: rgb(49, 49, 49); }
.wrap-intro { background-color: rgb(238, 238, 238); }
.news-intro::before { content: ""; position: absolute; width: 1px; height: calc(100% - 50px); top: 10px; left: 90px; background-color: rgb(202, 202, 202); }
.news-scroll::after, .news-scroll::before { content: ""; position: absolute; width: 10px; height: 10px; left: 85px; border-radius: 100%; background-color: rgb(202, 202, 202); }
.news-scroll::before { top: 10px; }
.news-scroll::after { bottom: 40px; }
.news-control { left: 85px; font-size: 13px; opacity: 0.5; z-index: 1; cursor: pointer; }
.news-control:hover { opacity: 1; color: rgb(236, 45, 63); }
.news-control#up { top: -10px; }
.news-shadow { padding-bottom: 30px; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-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% - 10px); right: -26px; background-repeat: no-repeat; background-position: center 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: rgb(255, 255, 255); border: 1px solid rgb(206, 202, 187); display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start; }
.news-shadow .news-shadow-article::before { content: ""; position: absolute; top: calc(50% - 13px); left: -13px; z-index: 0; border-top: 13px solid transparent; border-right: 13px solid rgb(206, 202, 187); border-bottom: 13px solid transparent; }
.news-shadow .news-shadow-article::after { content: ""; position: absolute; top: calc(50% - 12px); left: -11px; z-index: 1; border-top: 12px solid transparent; border-right: 11px solid rgb(255, 255, 255); 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: rgb(34, 34, 34); }
.news .news-name a:hover, .news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a:hover { color: rgb(236, 45, 63); }
.news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc { height: 38px; font-size: 13px; }
.video { cursor: pointer; }
.video .video-image { position: relative; margin-bottom: 0.75rem; }
.video .video-image::before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 25px); left: calc(50% - 17.5px); z-index: 1; background-repeat: no-repeat; background-image: url("../images/play.png"); }
.video .video-name { text-align: center; font-size: 16px; color: rgb(33, 37, 41); margin-bottom: 0px; }
.wrap-khuyenmai { background: url("../images/bg_khuyenmai.jpg") center bottom / cover no-repeat; }
.khachhang-item { width: 450px; border-radius: 15px; padding: 15px; background-color: rgb(248, 248, 248); transition: 0.3s ease-in-out; }
.owl-item.active.center .khachhang-item { transform: scale(1.2); }
.khachhang-item:hover, .owl-item.active.center .khachhang-item { color: rgb(255, 255, 255); background-color: var(--color-main); }
.khachhang-item:hover .name, .owl-item.active.center .khachhang-item .name { color: rgb(255, 255, 255) !important; }
.khachhang-item .icon { width: 60px; margin-bottom: 15px; }
.khachhang-item .icon svg { color: rgb(208, 213, 217); }
.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: 0px; }
.khachhang-item .info .name span { display: block; color: rgb(152, 152, 152); font-size: 13px; font-weight: 400; }
.web-item .photo { width: 100%; height: 0px; padding-bottom: 100%; position: relative; }
.web-item:hover .photo span { background-position: center bottom; background-repeat: no-repeat; }
.web-item .photo span { position: absolute; width: 100%; height: 100%; background-size: 100%; transition: 2s ease-in-out; background-position: center top; background-repeat: no-repeat; }
.web-item:hover .info { opacity: 1; visibility: visible; bottom: 0px; }
.web-item .info { position: absolute; padding: 10px; width: 100%; text-align: center; left: 0px; bottom: -20px; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(20px); transition: 0.3s ease-in; color: rgb(255, 255, 255); }
.color-pro-detail, .size-pro-detail { transition: 0.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: rgb(255, 255, 255); border-bottom: 2px solid; font-size: 0.9rem; padding: 2px 14px; transition: 0.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 { }
.left-pro-detail { width: 517px; }
.camket-pro-detail { width: 250px; }
.camket-pro-detail ol, .camket-pro-detail ul { list-style: none; padding: 0px; }
.camket-pro-detail ul li { padding-left: 25px; background: url("data:image/svg+xml,") left 5px no-repeat; }
.right-pro-detail { width: calc(100% - 570px); }
.product-video { width: 71px; height: 71px; padding: 5px; border-radius: 10px; overflow: hidden; background: rgb(255, 255, 255); margin: 5px; box-shadow: rgb(51, 51, 51) 0px 0px 2px; }
.gallery-pro-detail { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; }
.gallery-pro-detail .gallery-pro-detail-left { width: 100%; margin: -5px; }
.gallery-pro-detail .slider-product-thumbs { flex: 1 1 0%; }
.gallery-pro-detail .slider-product-thumbs .item, .info-product { padding: 5px; }
.gallery-pro-detail .slider-product-thumbs .item.slick-active.slick-current a { box-shadow: 0 0 2px var(--color-main); }
.gallery-pro-detail .slider-product-thumbs .item a { display: block; border-radius: 10px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 0px 0px 2px; }
.gallery-pro-detail .slider-product-thumbs .item a img { border-radius: 10px; }
.gallery-pro-detail .slider-products { width: 100%; background: rgb(255, 255, 255); border-radius: 10px; overflow: hidden; box-shadow: rgb(204, 204, 204) 0px 0px 2px; }
.gallery-pro-detail .slider-products .item { padding: 10px; text-align: center; }
.gallery-pro-detail .slider-products .slick-arrow { width: 25px; color: rgb(51, 51, 51); background-color: rgba(255, 255, 255, 0.5); }
.title-pro-detail h2 { font-size: 24px; font-weight: 500; color: var(--color-main); margin-bottom: 0px; }
.comment-pro-detail { display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start; }
.social-plugin-pro-detail { margin-bottom: 1rem; margin-top: 0px !important; }
.desc-pro-detail .attrs { margin: 0px 0px 20px; padding: 0px; list-style: none; }
.desc-pro-detail .attrs li:first-child { border-top: 0px; }
.desc-pro-detail .attrs li { padding: 10px 0px 7px; border-top: 1px solid rgb(152, 152, 152); color: rgb(152, 152, 152); }
.desc-pro-detail .attrs li svg { margin-top: -2px; }
.attr-pro-detail { width: 100%; list-style: none; padding: 0px; margin-left: 0px; }
.attr-pro-detail li { margin-bottom: 5px; }
.attr-label-pro-detail { font-size: 16px; font-weight: 600; margin: 0px 5px 0px 0px; }
.attr-content-pro-detail { display: inline-block; margin-bottom: 0px; }
.brand-pro-detail a { background: var(--color-red); color: rgb(255, 255, 255); border-radius: 2px; padding: 2px 5px; }
.price-new-pro-detail { font-weight: 600; font-size: 21px; }
.price-old-pro-detail { font-size: 15px; font-weight: 400; color: rgb(102, 102, 102); text-decoration: line-through; padding-left: 10px; }
.price-discount-pro-detail { font-size: 12px; font-weight: 600; color: rgb(231, 0, 4); border: 1px solid rgb(231, 0, 4); background: rgb(224, 168, 168); padding: 2px 5px; border-radius: 4px; margin-left: 10px; }
.color-pro-detail { vertical-align: top; width: 25px; height: 25px; border-radius: 100%; margin: 0px 8px 5px 0px; background-repeat: no-repeat; background-size: contain; background-position: center center; border: 1px solid rgb(218, 218, 218); }
.size-pro-detail { display: flex; align-items: center; justify-content: center; padding: 5px 10px; margin: 0px 8px 0px 0px; border: 1px solid rgb(218, 218, 218); background-color: rgb(255, 255, 255); border-radius: 5px; font-size: 13px; }
.btn-option input:checked + span, .color-option input:checked + .circle, .size-pro-detail.active { border-color: var(--color-main); }
.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,") 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 rgb(223, 223, 223); }
.quantity-pro-detail span { line-height: 25px; padding: 0px; width: 45px; height: 100%; color: rgb(0, 0, 0); cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.btn-option, .btn-option span, .color-option, .img-option, .img-option span { display: inline-block; }
.quantity-pro-detail span.quantity-plus-pro-detail { border-left: 0px; }
.quantity-pro-detail span.quantity-minus-pro-detail { border-right: 0px; }
.quantity-pro-detail input { height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; width: calc(100% - 90px); text-align: center; font-size: 15px; }
.cart-pro-detail a { text-align: center; color: rgb(255, 255, 255); text-transform: uppercase; cursor: pointer; width: calc(50% - 5px); height: 60px; border-radius: 5px; padding: 5px; }
.cart-pro-detail a.addnow { background: rgb(255, 255, 255); color: var(--color-red); }
.cart-pro-detail a.addnow:hover { color: rgb(255, 255, 255); background: var(--color-red); }
.cart-pro-detail a.buynow { background-color: rgb(51, 51, 51); }
.cart-pro-detail a.buynow:hover { background-color: var(--color-dark-red); color: rgb(255, 255, 255); }
.cart-pro-detail a i { vertical-align: top; margin-right: 8px; font-size: 24px; position: relative; top: -2px; }
.tags-pro-detail a { font-size: 12px; padding-bottom: 0.175rem; margin: 0px 5px 5px 0px; }
.tags-pro-detail a i { font-size: 11px; margin: 5px 5px 0px 0px; }
.tabs-pro-detail { margin-top: 2rem; }
.tabs-pro-detail .nav-tabs .nav-link { border-top-width: 3px; color: rgb(51, 51, 51); 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: rgb(85, 85, 85); }
.thongso-pro-detail table { width: 100%; border-collapse: collapse; }
.thongso-pro-detail table td, .thongso-pro-detail table th { border: 1px solid rgb(204, 204, 204); padding: 10px 12px; text-align: left; vertical-align: top; }
.thongso-pro-detail table th { background-color: rgb(247, 247, 247); font-weight: 600; width: 220px; }
.product-attr .attr-options { gap: 8px; }
.color-option { cursor: pointer; position: relative; }
.color-option .circle { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgb(204, 204, 204); display: inline-block; }
.btn-option { cursor: pointer; }
.btn-option span { padding: 6px 12px; border: 1px solid rgb(204, 204, 204); border-radius: 4px; background: rgb(255, 255, 255); transition: 0.2s; }
.img-option { cursor: pointer; margin: 4px; }
.img-option span { border: 1px solid rgb(204, 204, 204); border-radius: 4px; overflow: hidden; width: 60px; height: 60px; position: relative; }
.img-option img { width: 100%; height: 100%; object-fit: cover; }
.img-option input:checked + span { border-color: var(--color-main); box-shadow: rgb(0, 0, 0) 0px 0px 0px 2px inset; }
.btn-option.disabled span, .color-option.disabled .circle, .img-option.disabled span { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
#advisory-modal .btn-close { position: absolute; top: 5px; right: 5px; }
#advisory-modal .modal-dialog { max-width: 700px; }
.thongso { line-height: 1; }
.pic-news { width: 210px; }
.info-news { width: calc(100% - 210px); padding-left: 20px; }
.name-news { color: rgb(37, 37, 37); 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: rgb(103, 103, 103); }
.news .news-name { margin-bottom: 0.5rem; }
.news .news-name a { color: rgb(51, 51, 51); font-size: 16px; }
.news .news-time { color: rgb(132, 135, 138); margin-bottom: 0.25rem; }
.news .news-desc { color: rgb(51, 51, 51); }
.othernews b { margin-bottom: 10px; font-size: 15px; }
.othernews { position: sticky; top: 60px; z-index: 11; }
.contact-input, .contact-map { position: relative; }
.pic-news-other { width: 40%; border-radius: 7px; overflow: hidden; }
.info-news-other { width: 60%; padding: 0px 10px; }
.name-news-other { color: rgb(37, 37, 37); font-weight: 600; margin-bottom: 0px; padding: 0px !important; display: -webkit-box !important; font-size: 14px !important; }
.desc-news-other { color: rgb(102, 102, 102); 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: 0px 10px; font-size: 16px; margin-bottom: 0px; }
.baogia-item span { font-size: 18px; transition: 0.3s; background: var(--color-main); color: rgb(255, 255, 255); display: flex; width: 80px; height: 66px; justify-content: center; align-items: center; text-transform: uppercase; border-radius: 3px; }
.bg { background: linear-gradient(0deg, rgb(204, 204, 204) 0px, rgba(153, 153, 153, 0) 100%); }
.author-item .image, .news-slick .img { width: 150px; }
.author-item .info { width: calc(100% - 175px); }
.author-item .name, .fixbar ul li a i { font-size: 20px; }
.author-item .subname { color: rgb(153, 153, 153); }
.form-floating-cus > select, .form-floating.form-floating-cus > input { height: 45px; padding: 0.7rem 0.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: 0px; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-left-width: medium; border-left-style: none; border-left-color: currentcolor; border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
.contact-input input:focus, .contact-input textarea:focus { box-shadow: none; outline: 0px; }
.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: 0px; left: 0px; width: 100% !important; height: 100% !important; }
.blink { 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: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }
.btn-frame i svg { color: rgb(255, 255, 255); fill: rgb(255, 255, 255); }
.btn-frame .animated.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-width: 2px; border-style: solid; border-image: initial; border-color: var(--color-main); opacity: 0.5; }
.btn-frame .zoomIn { animation-name: zoomIn; }
.btn-frame .animated, .js-facebook-messenger-box.animated { animation-duration: 1s; 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, 0.35); opacity: 0.4; }
.btn-frame .pulse { animation-name: pulse; }
.btn-frame span { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); opacity: 0; padding: 6px 45px 6px 20px; border-radius: 30px; color: rgb(255, 255, 255); background-color: var(--color-main); white-space: nowrap; transition: 0.3s ease-in-out; width: 0px; overflow: hidden; }
.fixbar ul, .plugbar ul, .toolbar ul { list-style: none; padding: 0px; }
.js-facebook-messenger-box svg#close-icon, .js-facebook-messenger-box svg#fb-msng-icon { 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: rgb(72, 125, 252); color: rgb(255, 255, 255); height: 35px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 5px 5px 0px 0px; }
.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, 0.1); box-shadow: rgba(0, 0, 0, 0.15) 0px 2pt 10pt; }
.js-facebook-messenger-close-tooltip { width: 10px; height: 10px; display: inline-block; cursor: pointer; margin-left: 10px; }
.js-facebook-messenger-box.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: rgb(17, 130, 252); border-radius: 100%; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 4px 0px; }
.js-facebook-messenger-box.rotate svg#fb-msng-icon, .js-facebook-messenger-box.rotate.open svg#close-icon { transform: rotate(0deg); }
.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 { 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; transform: translateY(50px); bottom: 110px; right: 90px; border-radius: 10px; pointer-events: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px, rgba(0, 0, 0, 0.16) 0px 2px 32px; 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: rgb(255, 255, 255); background: rgb(17, 130, 252); 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: rgb(64, 64, 64); background: rgb(255, 255, 255); bottom: 97px; right: 97px; }
.js-facebook-messenger-container.open { transform: translateY(0px); 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: rgb(75, 79, 86); width: 50px; height: 50px; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: rgb(255, 255, 255) !important; }
.fixbar, .toolbar { position: fixed; z-index: 500; bottom: 0px; }
.fixbar, .toolbar ul li a { width: 100%; display: block; }
.cart-fixed:hover { background: var(--color-main); }
.cart-fixed span { position: absolute; top: 0px; right: -5px; color: rgb(255, 255, 255); width: 25px; height: 25px; background: rgb(236, 45, 63); line-height: 25px; font-size: 11px; }
.support-online a, .support-online i { width: 40px; height: 40px; position: relative; }
@keyframes tada {
0%, 100% { transform: scaleX(1); }
10%, 20% { transform: scale3d(0.9, 0.9, 0.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: 0px; max-height: 65px; }
.toolbar ul { display: flex; align-items: center; justify-content: space-between; margin: 0px; }
.toolbar ul li { text-align: center; width: 25%; }
.toolbar ul li a { cursor: pointer; }
.toolbar ul li a img { height: 20px; width: 20px; animation: 1.2s ease 0s infinite normal none running tada; }
.toolbar ul li a span { color: rgb(255, 255, 255); font-size: 10px; }
.fixbar { background: rgb(240, 239, 244); border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; margin: 0px; backface-visibility: hidden; height: 50px; }
.plugbar ul, .wcircle-icon { display: -webkit-box; -webkit-box-align: center; }
.fixbar ul { margin: 0px; }
.fixbar ul li { margin: 0px 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 0px; }
.fixbar .icon-cart-mobile { background: url("../images/cart-mobile.png") no-repeat; }
.cart-total-head-mobile { font-size: 10px; position: absolute; background: red; border-radius: 50%; height: 15px; width: 15px; line-height: 15px; top: 5px; margin-left: 5px; color: rgb(255, 255, 255) !important; }
.desc-newshome, .listvideos, .name-newshome, .name-video { color: var(--color-black); }
.fixbar ul li a { font-size: 11px; text-decoration: none; color: rgb(51, 51, 51); }
.plugbar { position: fixed; bottom: 0px; left: 0px; border-top: 1px solid rgb(234, 230, 230); width: 100%; right: 0px; max-width: 767px; margin: 0px auto; background: rgb(255, 255, 255); padding: 9px 10px 10px 7px; z-index: 10; }
.listvideos, .newshome-intro .view-newshome, .owl-video { margin-top: 10px; }
.plugbar ul { margin: 0px; display: flex; align-items: center; -webkit-box-pack: justify; justify-content: space-between; }
.plugbar ul li { width: 20%; float: left; }
.plugbar ul li a { display: block; color: rgb(105, 105, 105); font-size: 12px; text-align: center; position: relative; }
.plugbar ul li a i { font-size: 20px; color: rgb(105, 105, 105); }
.plugbar ul li a span { position: absolute; width: 50px; height: 50px; top: -40px; left: calc(50% - 25px); font-size: 14px; display: block; border: 1px solid rgba(234, 230, 230, 0.5); border-radius: 100%; }
.support-online { position: fixed; z-index: 999; left: 10px; bottom: 0px; }
.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: rgb(255, 255, 255); }
.support-online i { background: rgb(67, 161, 243); border-radius: 100%; font-size: 20px; line-height: 1.9; }
.support-online a span { border-radius: 2px; background: rgb(103, 182, 52); padding: 9px; display: none; width: 180px; margin-left: 10px; position: absolute; top: 0px; left: 40px; transition: 0.2s ease-in-out; animation: 0.7s ease 0s 1 normal none running headAnimation; }
.support-online a span::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 10px 0px; border-color: transparent rgb(103, 182, 52) transparent transparent; position: absolute; left: -10px; top: 10px; }
.support-online .kenit-alo-circle-fill { width: 60px; height: 60px; top: -10px; position: absolute; border-radius: 100%; border: 2px solid transparent; background-color: rgba(0, 175, 242, 0.5); opacity: 0.75; right: -10px; }
.wcircle-menu-item, .wcircle-menu-item img { height: 50px; border-radius: 50%; width: 50px; }
.support-online .kenit-alo-circle { width: 50px; height: 50px; top: -5px; right: -5px; position: absolute; background-color: transparent; border-radius: 100%; border: 2px solid rgb(0, 137, 185); opacity: 0.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%; transform: translateX(-50%); bottom: 10px; z-index: 9999999; }
#my-phone-circle { position: relative; width: 50px !important; }
.wcircle-open .wcircle-icon i::before { content: "ï€"; }
.wcircle-icon { border-radius: 50%; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative !important; display: flex !important; }
.wcircle-icon::before { position: absolute; content: ""; width: 60px; height: 60px; border: 1px solid rgb(255, 255, 255); border-radius: 50%; left: -5px; top: -5px; animation: 1s ease-in-out 0s infinite normal none running pulse; }
.wcircle-icon::after { position: absolute; content: ""; width: 80px; height: 80px; background: rgba(204, 44, 50, 0.5); border-radius: 50%; left: -15px; top: -15px; animation: 2s ease-in-out 0s infinite normal none running zoomIn; }
.wcircle-menu { left: 0px; top: 0px; display: none; position: absolute !important; }
.box-product, .color-product, .pic-product, .video-main { position: relative; }
.wcircle-menu-item { display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }
.wcircle-icon i, .wcircle-menu-item i { font-size: 25px; color: rgb(255, 255, 255); position: relative; z-index: 9999; }
.shake-anim { animation: 1s ease-in-out 0s infinite normal none running shake-anim; transform-origin: 50% 50%; }
.video-main { height: 400px; }
.listvideos, .view-newshome { height: 40px; border: 1px solid rgb(204, 204, 204); }
.video-main iframe { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; }
.listvideos { width: 100%; padding: 0px 10px; cursor: pointer; }
.item-video1 img { max-height: 292px; }
.item-video2 img { height: 102px; }
.pic-video-2::before, .pic-video::before { content: ""; position: absolute; width: 50px; height: 50px; top: calc(50% - 25px); left: calc(50% - 25px); z-index: 1; background: url("../images/play.png") center center / cover no-repeat; cursor: pointer; }
.name-video { font-size: 16px; margin-bottom: 0px; }
.attr-product, .name-newshome { font-size: 14px; }
.newshome-intro .name-newshome { margin: 10px 0px; }
.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: wrap; justify-content: space-between; }
.newshome-intro { width: calc(50% - 20px); }
.pic-newshome-normal { float: left; width: 34%; margin-right: 3%; margin-bottom: 0px; }
.info-newshome-normal { float: left; width: calc(63%); }
.name-newshome { line-height: normal; }
.desc-newshome { margin-bottom: 0px; text-align: justify; }
.view-newshome { width: 140px; display: flex; align-items: center; justify-content: center; color: rgb(0, 0, 0); }
.box-product { overflow: hidden; height: 100%; }
.box-product .icon { width: 80px; height: 2px; background: rgb(51, 51, 51); margin: 0px auto 1rem; }
.color-product { width: 20px; height: 20px; border-radius: 100%; cursor: pointer; margin-left: 2px; }
.color-product.active::after { content: ""; position: absolute; top: -2px; left: -2px; width: 24px; height: 24px; border: 1px solid rgb(204, 204, 204); border-radius: 100%; background: url("data:image/svg+xml,") center center no-repeat; }
.pic-product { margin-bottom: 0px; overflow: hidden; border-radius: 5px; }
.product-tool { opacity: 0; visibility: hidden; position: absolute; width: 100%; left: 0px; bottom: 0px; z-index: 1; }
.product-tool a { cursor: pointer; width: 50%; padding: 10px; text-align: center; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.6); }
.product-tool a:hover { background-color: rgba(0, 0, 0, 0.8); }
.product-tool a svg { margin-right: 5px; }
.product-tool a span { text-transform: capitalize; font-size: 12px; font-weight: 300; }
.box-product:hover .product-tool { opacity: 1; visibility: visible; }
.info-product .desc { max-height: 100px; overflow: auto; height: 100px; }
.name-product { }
.price-product { margin-bottom: 0px; line-height: 1; }
.price-new { position: relative; display: block; font-size: 18px; font-weight: 600; letter-spacing: -1px; }
.price-old { font-size: 12px; color: var(--color-gray); text-decoration: line-through; }
.box-product.hot { margin: 0px; padding: 0px; border-radius: 20px; overflow: hidden; }
.box-product.hot .info { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 15px 0px; background-color: rgba(105, 215, 249, 0.5); }
.product-inner .slider-index-thumbs { margin: -10px 0px; }
.box-product-list { display: flex; padding: 5px 10px; }
.box-product-list .info-product { width: calc(68%); }
.box-product-list .pic-product { width: 30%; padding: 0px; margin: 0px auto; text-align: center; }
.price-per { position: absolute; top: 6px; left: 7px; color: rgb(255, 255, 255); background: red; border: 1px solid var(--color-red); font-size: 11px; border-radius: 30px; width: 40px; text-align: center; line-height: 20px; font-weight: 600; z-index: 2; }
.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: rgb(255, 255, 255); text-transform: capitalize; text-align: center; padding: 7px 5px; border-radius: 3px; }
.blog-l-img a, .box-images img { width: 100%; transition: 0.5s; }
.bg-red, .cart-add { background-color: var(--color-red); }
.cart-add:hover { background-color: var(--color-dark-red); }
.cart-buy { background-color: var(--color-green); }
.cart-buy:hover { background-color: var(--color-dark-green); }
.dm-noibat { max-width: 1000px; margin: auto auto 40px; }
.dm-noibat a { cursor: pointer; color: rgb(51, 51, 51); transition: 0.4s; text-transform: capitalize; font-weight: 400; font-size: 16px; text-align: center; display: block; background: rgb(247, 247, 247); border-radius: 5px; border: 1px solid rgb(234, 234, 234); height: 100%; padding: 10px; }
.dm-noibat a.active, .dm-noibat a:hover { background: var(--background-static); color: rgb(255, 255, 255); }
.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: rgb(80, 80, 80); transition: 0.3s; }
.cats-bar-icon span + span { margin-top: 5px; }
.cats-bar-icon.active span:first-child { animation: 0.7s ease 0s 1 normal forwards running top; }
.cats-bar-icon.not-active span:first-child { animation: 0.7s ease 0s 1 normal forwards running top-2; }
.cats-bar-icon.active span:nth-child(2) { animation: 0.7s ease 0s 1 normal forwards running scaled; }
.cats-bar-icon.not-active span:nth-child(2) { animation: 0.7s ease 0s 1 normal forwards running scaled-2; }
.cats-bar-icon.active span:nth-child(3) { animation: 0.7s ease 0s 1 normal forwards running bottom; }
.cats-bar-icon.not-active span:nth-child(3) { animation: 0.7s ease 0s 1 normal forwards running bottom-2; }
@keyframes top {
0% { top: 0px; transform: rotate(0deg); }
50% { top: 6px; transform: rotate(0deg); }
100% { top: 6px; transform: rotate(45deg); }
}
@keyframes top-2 {
0% { top: 6px; transform: rotate(45deg); }
50% { top: 6px; transform: rotate(0deg); }
100% { top: 0px; transform: rotate(0deg); }
}
@keyframes bottom {
0% { bottom: 0px; transform: rotate(0deg); }
50% { bottom: 8px; transform: rotate(0deg); }
100% { bottom: 8px; transform: rotate(135deg); }
}
@keyframes bottom-2 {
0% { bottom: 8px; transform: rotate(135deg); }
50% { bottom: 8px; transform: rotate(0deg); }
100% { bottom: 0px; transform: rotate(0deg); }
}
@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: 7px 20px 4px; background-color: transparent; font-weight: 600; font-size: 14px; border: 1px solid rgb(232, 232, 232); outline: 0px; border-radius: 30px; transition: 0.3s ease-in-out; }
.blog-l p, .box-newsi { font-weight: 400; color: rgb(102, 102, 102); }
.choose-list button span { position: relative; z-index: 3; font-size: 20px; }
.fancybox-tiktok-layout { padding: 0px; background: 0px 0px; width: auto !important; }
.blog-flex { display: flex; flex-flow: wrap; justify-content: space-between; align-items: flex-start; }
.blog-l { float: left; width: 46.1538%; line-height: 24px; }
.blog-l-img { max-width: 100%; overflow: hidden; margin-bottom: 7px; }
.blog-l-img:hover img { transform: scale(1.1); }
.blog-l h3 a { font-size: 16px; color: rgb(47, 47, 47); line-height: 20px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.blog-l p { margin: 9px 0px 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: rgb(47, 47, 47); background: rgb(255, 255, 255); display: inline-block; vertical-align: top; padding: 8px 38px 7px; transition: 0.5s; border-radius: 0px; border: 1px solid rgb(51, 51, 51); text-transform: uppercase; }
.blog-l a.blog-l-more:hover { background: rgb(47, 47, 47); color: rgb(255, 255, 255); }
.blog-r { float: right; width: 51.2821%; height: 317px; overflow: hidden; }
.blog-r ul li { border-bottom: 1px solid rgb(232, 232, 232); margin-bottom: 10px !important; }
.box-newsi-img { width: 104px; max-width: 36%; float: left; margin-right: 10px; }
.box-newsi h3 { font-weight: 500; margin: 0px 0px 7px; padding: 0px; }
.box-newsi h3 a { color: rgb(51, 51, 51); 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); gap: 15px; }
.box-images { overflow: hidden; border-radius: 10px; }
.box-images img { position: absolute; object-fit: cover; object-position: center center; left: 0px; top: 0px; height: 100% !important; }
.box-images:first-child { grid-area: 1 / 1 / 3 / 3; }
.border-1 { border: 1px solid; }
.color-yellow { color: rgb(255, 255, 0); }
.hotline a { font-size: 16px; font-weight: 700; animation: 1s ease-in-out 0s infinite normal none running blinkColor; transition: color 0.3s ease-in-out; }
.gradien-pro { background: linear-gradient(86deg, rgb(255, 229, 227) 20%, rgb(206, 209, 254) 70%); border: 3px solid var(--color-submain); }
.gradient-title { background: linear-gradient(178deg, rgb(183, 196, 255) 20%, rgb(113, 133, 252) 70%); border-radius: 0px 0px 90px 90px; width: 404px; text-align: center; justify-content: center; color: rgb(255, 255, 255); }
.why-icon { width: 49px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); }
.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: rgb(102, 102, 102); }
.line-height-15 { line-height: 1.5; }
.team { background-color: rgb(249, 251, 250); }
.bg-duhoc, .bg-f7 { background-color: rgb(255, 247, 247); }
.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-teacher { background-image: url("../images/bg-duhoc.png"); }
.newsletter-input2 input, .newsletter-input2 select { padding: 11px 10px; }
.teacher-item .info { position: absolute; bottom: 0px; left: 0px; right: 0px; background: rgba(255, 255, 255, 0); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 30px; 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(2n+1) .order { order: -1; }
.bg-khac { background-image: url("../images/bg-khac.png"); background-position: center center; }
.wrap-hinhanh { background: linear-gradient(178deg, rgb(229, 207, 255) 0px, rgb(255, 235, 206) 38%, rgb(255, 255, 255) 70%, rgb(255, 255, 255) 84%); }
#langDropdownBtn { background-image: url("../images/dro.png"); background-repeat: no-repeat; background-position: right center; padding-right: 20px; width: 52px !important; background-color: transparent !important; }
.right-0 { right: 0px !important; }
.car-card { border-radius: 24px; margin-top: 24px; }
.car-card__image-container { position: absolute; right: -35px; top: -34px; width: 100%; height: auto; }
.car-frame { position: absolute; display: none; right: 0px; transition: opacity cubic-bezier(0.22, 0.61, 0.36, 1), transform cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; backface-visibility: hidden; }
.car-frame.active { display: block; z-index: 2; }
.info-list { transition: 0.35s; padding-top: 46px !important; }
.swiper-car { width: 100%; height: 100%; }
.swiper-slide { }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-car { width: 100%; height: 300px; margin-left: auto; margin-right: auto; }
.swiper-slide { background-size: cover; background-position: center center; }
.car-slider { width: 100%; }
.swiper-car-index1 { height: 20%; box-sizing: border-box; padding: 10px 0px; }
.swiper-car-index1 .swiper-slide { width: 25%; height: 100%; opacity: 0.4; }
.swiper-car-index1 .swiper-slide-thumb-active { opacity: 1; }
.car-showcase { overflow: hidden; background: rgb(245, 245, 245); position: relative; }
.car-showcase__content { position: relative; width: 100%; pointer-events: none; }
.car-content { max-width: 300px; }
.car-slider { padding-top: 20px; }
.car-slider .swiper-slide { opacity: 0.45; transform: scale(0.82); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.7s; }
.car-slider .swiper-slide-active { opacity: 1; transform: scale(1.3); }
.car-image { display: flex; justify-content: center; align-items: center; }
.car-image img { width: 100%; max-width: 900px; object-fit: contain; transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.car-slider .swiper-slide-active:hover img { transform: scale(1.03); }
.custom-prev, .custom-next { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); top: 90px; transition: 0.3s; }
.custom-prev:hover, .custom-next:hover { }
.custom-prev::after, .custom-next::after { font-size: 14px; font-weight: bold; display:none; }
.swiper-button-prev {transform:rotate(180deg);}
.custom-prev { right: 0px; left: 0px; }
.custom-next { right: 0px; }
.custom-pagination { position: relative; margin-top: 30px; background: rgb(221, 221, 221); height: 2px !important; }
.swiper-pagination-progressbar-fill { background: rgb(17, 17, 17) !important; }
.swiper-button-next, .swiper-button-prev {
& ::slotted(svg), & svg { height: 16px; width: 16px; }
}
.btn-dark:hover { background-color: transparent; color: var(--color-black); filter: brightness(0);
-webkit-filter: brightness(0); }
.bg-car-showcase { background-image: url("../images/bg-car-showcase.png"); background-size: cover; }
.right-1rem { right: 1rem; }
.text-a { color: rgb(0, 103, 255); }
.cronpage .nav-pills .nav-item a.active, .cronpage .nav-pills .nav-link.active, .cronpage .nav-pills .show > .nav-link { background: var(--color-main); color: black; }
.bg-lir { background: linear-gradient(rgb(245, 245, 245) 0%, rgba(253, 205, 142, 0.18) 18%); }
.intro-nav {position: sticky;top: var(--nav-offset, 77px);right: 0px;left: 0px;z-index: 9;}
.intro-nav__item.active, .intro-nav__item.no-action { border-color: rgb(0, 103, 255); }
.intro-nav__item { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; gap: 0.375rem; flex-shrink: 0; background-color: transparent; padding: 0.85rem 1rem; transition: 0.3s ease-out; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; }
.product-color-group { width: 100%; }
.carSwiper { }
.carSwiper img { }
.car-colors { display: flex; align-items: center; justify-content: center; gap: 14px; }
.color-item { cursor: pointer; }
.circle {width: 30px;height: 30px;border-radius: 50%;display: block;border: 2px solid rgb(221, 221, 221);transition: 0.3s;position: relative;}
.color-item input:checked + .circle { transform: scale(1.15); border-color: rgb(79, 70, 229); box-shadow: rgba(79, 70, 229, 0.15) 0px 0px 0px 4px; }
select.form-control2 { width: calc(100% - 120px); border-radius: 10px; color: rgb(39, 38, 38); background-color: transparent; border: 1px solid var(--color-gray); transition: 0.3s; outline: none; padding: 0px 10px !important; height: 41px !important; }
.w-100px { width: 100px; }
.bg-F9F9F9 { background-color: rgb(249, 249, 249); }
.text-input { position: relative; width: calc(100% - 120px); }
.text-input span.quantitative { width: 65px; display: inline-block; text-align: right; padding-right: 10px; position: absolute; z-index: 1; right: 0px; top: 50%; transform: translateY(-50%); }
.text-input input.txt-input { width: 100%; background: transparent; outline: 0px; border-radius: 10px; border: 1px solid var(--color-gray); color: rgb(39, 38, 38); margin: 0px; padding: 0px 70px 0px 10px !important; height: 41px !important; }
.form-datlichbaoduongxe label { font-weight: bold; margin-bottom: 5px; color: white; }
.bg-video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bg-dark-car { background-color: rgba(0, 0, 0, 0.32); }
.Tooltip_tooltipContent__rWuDv { position: absolute; top: auto; bottom:3rem; left: 50%; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-50%);}
.color-item:hover .Tooltip_tooltipContent__rWuDv {opacity:1; z-index: 1;}
.wrap-hdh-zalo { position:relative; /* width:100%; */ /* height:100vh; */ display:flex; justify-content:center; align-items: center; background:#001300;flex-direction:column;animation: changeColor 5s linear infinite;border-radius: 4px;}
@keyframes changeColor{
0%{filter: hue-rotate(0deg)}
100%{ filter: hue-rotate(360deg)}
}
.wrap-hdh-zalo a{ color:#00ff0a; font-size: 16px; font-weight: 600;}
.wrap-hdh-zalo .loader-hdh{ position:relative; display:flex; height: 17px;}
.wrap-hdh-zalo .loader-hdh .dot{ position:relative; display:block; width: 12px; height: 12px; background:#00ff0a;
box-shadow: 0 0 10px #00ff0a,
0 0 20px #00ff0a,
0 0 40px #00ff0a,
0 0 60px #00ff0a,
0 0 80px #00ff0a,
0 0 100px #00ff0a;
margin: 2px 6px;transform:scale(0.1); border-radius:50%;animation: animateDot 2s linear infinite; animation-delay:calc(0.1s * var(--i));}
.wrap-hdh-zalo .loader-hdh:last-child .dot{animation-delay:calc(-0.1s * var(--i));}
@keyframes animateDot{
0%{
transform:scale(0.1);
}
10%{
transform:scale(1);
}
50%,100%{
transform:scale(0.1);
}
}