.banner-top { background-color: transparent; ; }
div#header { position: relative; min-height: 76px; background: #fff; font-size: 14px; font-weight: 400; ; }
.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: 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: #000; ; }
.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: #fff; background-color: #ff0004; border-radius: 50%; text-align: center; ; }
.header-nav.fixed { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; background: #fff; 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: #fff; padding: 5px 0px !important; ; }
.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;width: 153px;}
.header-bottom .btn-main {background: var(--color-dark);color: var(--color-yellow);}
.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: 0px 5px; background-color: #cfcfcf; ; }
.header-bottom .header-ul a {display: block;font-size: 16px;color: #333;text-transform: capitalize;font-family: var(--font-500);}
.header-bottom .header-ul .btn-main { padding: 6px 10px; ; }
.header-bottom .header-ul a:hover,.header-bottom .header-ul a.active { color: var(--color-submain); ; }
.header-bottom .header-ul .lang a { display: flex; cursor: pointer; border: 1px solid #fff; ; }
.header-bottom .header-ul .lang a img { width: 34px; ; }
.header-bottom .header-ul .has-child { position: relative; ; }
.header-bottom .header-ul ul { padding: 0px; margin: 0px; list-style: none; transition: all 0.3s ease; ; }
.header-bottom .header-ul ul li a { font-size: 14px; color: #757575; border-bottom: 0px solid #ececec; padding: 7px 10px; text-transform: capitalize; line-height: 25px; ; }
.header-bottom .header-ul > li > ul { position: absolute; min-width: 250px; top: 100%; background-color: #fafafa; border-radius: 0.25rem; -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15); -webkit-transform: perspective(600px) rotateX(-90deg); transform: perspective(600px) rotateX(-90deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; opacity: 0; visibility: hidden; 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 { position: absolute; display: flex; flex-wrap: wrap; list-style: none; min-width: 900px; max-height: 500px; overflow: auto; top: 120%; padding: 10px 5px 10px; background-color: #fafafa; border-radius: 0.25rem; -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15); -webkit-transform: perspective(600px) rotateX(-90deg) translateX(-40%); transform: perspective(600px) rotateX(-90deg) translateX(-40%); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; opacity: 0; visibility: hidden; 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: 0px; 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: 0px 5px; margin-bottom: 5px; ; }
.header-bottom .header-ul .has-child ul.submenu .list { padding: 7px 0px; font-weight: bold; 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: transparent; border-bottom: 2px solid #000; border-radius: 0px; ; }
.header-bottom .header-ul .has-child ul.submenu > li p { margin-bottom: 0px; ; }
.effect-text { animation: effectText 1s infinite ease-in-out; 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;font-weight: 600;line-height: 44px;background-color: #EDEDED;border-radius: 30px;width: 188px;justify-content: center;}
.header-bottom .cart svg, .header-bottom .hotline svg {fill: var(--color-orange);border-radius: 100%;border: 2px solid var(--color-orange);padding: 5px;}
.header-bottom .cart a { color: var(--color-submain); ; }
.header-bottom .hotline a { animation: blinkColor 1s infinite ease-in-out; transition: color 0.3s ease-in-out; ; }
@keyframes blinkColor { 0%, 100% { color: var(--color-main); border-color: var(--color-main); ; }
50% { color: var(--color-orange); border-color: var(--color-orange); ; }
}
/* Slide Video */ .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: 0px 0px 3px #333; ; }
.wrap-service-list { background-color: #fdfdfd; ; }
.service-list { position: relative; display: block; background-color: #fff; ; }
.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 { position: relative; background: url(../images/bg_tuvan.jpg) no-repeat center center; ; }
.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: #fff; border-radius: 0px; border: 1px solid #ccc; background-color: transparent; ; }
#frm-advisory .form-control::placeholder { color: #fff; ; }
.wrap-uudai { position: relative; z-index: 2; transform: translateY(-50%); ; }
.wrap-uudai .col-md-7 { border-radius: 30px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35); background: #fff; ; }
.uudai-item { position: relative; padding: 8px; ; }
.uudai-item::after { content: ""; width: 1px; height: 40%; background: var(--color-main); position: absolute; top: 30%; left: -12px; ; }
.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; ; }
.wrap-category { }
.category-item { width: calc(100% / 8); display: block; padding: 10px; text-align: center; border: 1px solid transparent; border-radius: 5px; transition: all 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: bold; ; }
.category-item:hover { border: 1px solid #86f1ff; ; }
.category-item:hover .name { color: var(--color-main); ; }
.wrap-product-list { }
.wrap-product-list:nth-child(odd) { background-color:#F9F9F9;}
.product-list { display: block; position: relative; border-radius: 10px; overflow: hidden; ; }
.product-list .name { position: absolute; top: 0px; left: 0px; 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 { position: relative; ; }
.product-item .image { border-radius: 10px; overflow: hidden; width: 62%; ; }
.product-item .image img { border-radius: 10px; ; }
.product-item .info { width: 35%; ; }
.product-item .name a { display: block; font-size: 18px; color: var(--color-submain); ; }
.product-item .attrs { margin: 0; padding: 0; list-style: none; margin-bottom: 20px; ; }
.product-item .attrs li { padding: 5px 0px 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 { width: 50px; height: 50px; ; }
.slick-prev { left: 5px; ; }
.slick-next { right: 5px; ; }
.slick-prev:before, .slick-next:before { font-size: 35px; ; }
.wrap-brand .brand-item, .wrap-doitac .brand-item {width: calc(100% / 5 - 0.5rem);}
.filter-brand .filter-dropdown-item { width: calc(100% / 10 - 0.5rem); ; }
.brand-item { display: block; width: 100%; ; }
.brand-item .image {border-radius: 4px;overflow: hidden;padding: 10px;margin-bottom: 8px;}
.brand-item .name { font-size: 14px; font-weight: 600; text-align: center; ; }
.news-index { position: relative; display: block; margin-bottom: 1rem; border-radius: 10px; overflow: hidden; ; }
.news-index::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #000 100%); transition: all 0.3s ease; ; }
.news-index .name { position: absolute; bottom: 0px; left: 0px; width: 100%; font-size: 13px; font-weight: 400; margin-bottom: 0px; padding: 10px 15px; color: #fff; transition: all 0.3s ease; z-index: 10; ; }
.news-index:hover .name { }
.news-index:hover::after { height: 30%; ; }
.wrap-search-multiple, .wrap-cauchuyen { background: linear-gradient(to bottom, rgba(248, 248, 248, 1) 0%, rgba(236, 236, 236, 1) 100%); ; }
.wrap-product-hot { }
.title-tieuchi { width: 50%; margin-left: auto; padding: 0px 20px; border-radius: 50px; border: 1px solid #000; ; }
.product-inner { background-color: #fffbec; ; }
.product-hot { padding: 2rem 0; background-color: #fff; ; }
.product-hot .desc ul li, .product-hot .desc ol li { position: relative; list-style: none; padding: 10px 10px 10px 35px; font-weight: 500; ; }
.product-hot .desc ul li::before, .product-hot .desc ol li::before { content: ""; display: block; width: 28px; height: 28px; background: url(../images/icon_check.png) no-repeat center center; background-size: 28px; position: absolute; left: 0px; top: 10px; ; }
.wrap-top .container { padding-top: 20px; ; }
.owl-menu-cat { width: calc(100% - 450px); ; }
.wrap-doitac { }
.wrap-doitac .owl-item { padding: 10px 0px; ; }
.doitac-item { display: flex; align-items: center; padding: 5px; background-color: #fff; border: 1px solid #eae9e9; border-radius: 5px; overflow: hidden; ; }
.wrap-category ul { list-style: none; margin: 0; padding: 30px; display: flex; flex-wrap: wrap; gap: 40px; background-color: #ececec; ; }
.wrap-category ul li { width: 12%; ; }
.wrap-category ul li a span { }
.wrap-category ul li img { height: 60px; ; }
.category-lists { padding: 30px; background-color: #ececec; ; }
.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; ; }
.wrap-counter { background: var(--color-main); ; }
.counter-item { position: relative; font-size: 16px; text-align: center; ; }
.counter-item .number { font-size: 34px; color: #000; font-weight: bold; ; }
.counter-item sup { position: absolute; top: 0px; font-size: 2.5rem; ; }
.counter-item p { margin-bottom: 0px; ; }
.counter-item .name { font-size: 14px; font-family: "Playfair Display", sans-serif; color: #7a7a7a; ; }
.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; color: var(--color-main); border-radius: 50rem; font-family: "Mulish", sans-serif; font-weight: bold; ; }
.visao-item .image { position: relative; width: 30px; ; }
.visao-item .image img { position: relative; z-index: 2; ; }
.visao-item .info { position: relative; width: calc(100% - 60px); z-index: 2; ; }
.visao-item .name { color: var(--color-main); font-weight: bold; font-size: 16px; -webkit-line-clamp: 2; line-height: 1.5; transition: all 0.3s ease; ; }
.visao-item .desc { margin-bottom: 0px; color: #454545; font-size: 13px; font-weight: 600; ; }
.visao-item:hover .num { color: #fff; background: var(--color-main); ; }
.visao-item:hover .name { color: var(--color-main); ; }
.wrap-diadiem-hot .row { margin: 0px; ; }
.wrap-diadiem-hot .row [class^="col"] { padding: 0px; ; }
.wrap-diadiem-hot .service-list, .wrap-diadiem-hot .service-list .info { border-radius: 0px; ; }
.wrap-diadiem-hot .service-list .name { background: transparent; 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: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #000 100%); transition: all 0.3s ease; ; }
.wrap-diadiem-hot .service-list:hover::before { opacity: 0; ; }
.wrap-service .title-main::before { display: none; ; }
.wrap-service { }
.service-item { }
.service-item .image { border-radius: 20px; overflow: hidden; ; }
.service-item .name { font-family: "Inter"; font-weight: bold; font-size: 21px; margin-bottom: 10px; ; }
.service-item .desc { color: #979494; ; }
.wrap-cauhoi { }
.wrap-cauhoi .hide-content { background: linear-gradient(transparent, #f7f7f7 100%); ; }
.wrap-cauhoi .accordion { }
.accordion-item {border-radius: 0px !important;margin-bottom: 20px;overflow: hidden;background: transparent;color: #000;font-size: 16px;border: 0px;border-bottom: 2px solid #e8e8e8;/* box-shadow: 0.5rem 0.5rem 1rem rgba(0, 160, 227, 0.15); */}
.accordion-body {padding: 0px 0 15px;}
.accordion-button {position: relative;font-size: 18px;font-family: var(--font-600);color: #333333;padding: 1rem 0rem;background: transparent;}
.accordion-button:not(.collapsed) { outline: none !important; border: 0px !important; box-shadow: none !important; color: var(--color-submain); background: transparent; color: #000; ; }
/* .accordion-button::after { display: none; width: 30px; height: 30px; background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.2832 19.9316"><g><rect height="19.9316" opacity="0" width="20.2832" x="0" y="0"/><path d="M9.96094 19.9219C15.459 19.9219 19.9219 15.459 19.9219 9.96094C19.9219 4.46289 15.459 0 9.96094 0C4.46289 0 0 4.46289 0 9.96094C0 15.459 4.46289 19.9219 9.96094 19.9219ZM9.96094 18.2617C5.37109 18.2617 1.66016 14.5508 1.66016 9.96094C1.66016 5.37109 5.37109 1.66016 9.96094 1.66016C14.5508 1.66016 18.2617 5.37109 18.2617 9.96094C18.2617 14.5508 14.5508 18.2617 9.96094 18.2617Z" fill="white" fill-opacity="0.5"/><path d="M11.8164 12.7246C12.5488 13.4082 13.4375 12.5781 12.7246 11.8164L11.0449 10.0195L7.45117 6.42578C7.30469 6.28906 7.12891 6.20117 6.89453 6.20117C6.46484 6.20117 6.17188 6.48438 6.17188 6.92383C6.17188 7.11914 6.26953 7.31445 6.40625 7.45117L10.0098 11.0449ZM12.3047 10L12.5781 12.5977L10.0879 12.3047L8.31055 12.3047C7.8418 12.3047 7.53906 12.5977 7.53906 13.0273C7.53906 13.457 7.83203 13.7402 8.29102 13.7402L12.9199 13.7402C13.418 13.7402 13.7402 13.5156 13.7402 12.9297L13.7402 8.33008C13.7402 7.87109 13.4473 7.54883 13.0176 7.54883C12.5879 7.54883 12.3047 7.8418 12.3047 8.31055Z" fill="black"/></g></svg>') no-repeat center; ; }
.accordion-button:not(.collapsed)::after { background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.2832 19.9316"><g><rect height="19.9316" opacity="0" width="20.2832" x="0" y="0"/><path d="M9.96094 19.9219C15.459 19.9219 19.9219 15.459 19.9219 9.96094C19.9219 4.46289 15.459 0 9.96094 0C4.46289 0 0 4.46289 0 9.96094C0 15.459 4.46289 19.9219 9.96094 19.9219ZM9.96094 18.2617C5.37109 18.2617 1.66016 14.5508 1.66016 9.96094C1.66016 5.37109 5.37109 1.66016 9.96094 1.66016C14.5508 1.66016 18.2617 5.37109 18.2617 9.96094C18.2617 14.5508 14.5508 18.2617 9.96094 18.2617Z" fill="black"/><path d="M11.8164 7.19727L10.0098 8.87695L6.41602 12.4805C6.26953 12.6172 6.18164 12.8125 6.18164 13.0078C6.18164 13.4473 6.46484 13.7305 6.89453 13.7305C7.12891 13.7305 7.31445 13.6426 7.45117 13.5059L11.0449 9.91211L12.7246 8.11523C13.4375 7.35352 12.5488 6.51367 11.8164 7.19727ZM12.3047 9.93164L12.3047 11.6211C12.3047 12.0801 12.5879 12.3828 13.0273 12.3828C13.457 12.3828 13.7402 12.0508 13.7402 11.6016L13.7402 6.99219C13.7402 6.41602 13.4277 6.19141 12.9297 6.19141L8.29102 6.19141C7.83203 6.19141 7.53906 6.47461 7.53906 6.9043C7.53906 7.33398 7.8418 7.61719 8.31055 7.61719L10.0879 7.61719L12.5781 7.32422Z" fill="black"/></g></svg>') no-repeat center; transform: rotate(0deg); ; }
*/ .owl-cat a { color: #8d8d8d; ; }
.owl-cat a:hover, .owl-cat a.active { color: var(--color-main); text-decoration: underline; ; }
.wrap-doitac {}
.wrap-about .title-main h2, .wrap-history .title-main h2, .wrap-tamnhin .title-main h2, .wrap-sumenh .title-main h2, .wrap-vanhoa .title-main h2, .wrap-giatri .title-main h2, .wrap-doitac .title-main h2 {font-size: clamp(21px, 2vw, 31px);}
.wrap-about .title-main h2 span {/* display: block; */}
.wrap-about .about-img { position: sticky; top: 0px; text-align: center; ; }
.wrap-about .about-img img {/* max-width: 300px !important; */}
.wrap-about .about-img img:nth-child(2) { margin-left: -43%; margin-top: 15%; ; }
.wrap-about .about-info { }
.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 { }
.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 { text-transform: uppercase; 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: bold; margin-bottom: 15px; ; }
.goikham-item .name a { color: var(--color-main); ; }
.goikham-item .name a:hover { color: var(--color-submain); ; }
.goikham-item .more .btn-main { width: 50%; ; }
.wrap-chuyenkhoa-list { }
#chuyenkhoaTabs { justify-content: space-between; ; }
#chuyenkhoaTabs .nav-link { font-size: 14px; padding: 5px; color: #999999; background: #f0f0f0; ; }
#chuyenkhoaTabs .nav-link.active { color: #fff; background: var(--color-main); ; }
#chuyenkhoaTabs .nav-link.active img { filter: brightness(0) invert(1); ; }
#chuyenkhoaTabsContent { border: 1px solid #dee2e6; border-top: 0px; box-shadow: 0.5rem 0.5rem 1rem rgba(0, 160, 227, 0.15); ; }
.wrap-doingu { background: #f8f9f8 url(../images/bg_doingu.jpg) no-repeat right bottom; ; }
.doingu-item { color: var(--color-main); ; }
.doingu-item .image { border-radius: 10px; overflow: hidden; ; }
.doingu-item .name { font-family: "Playfair Display", sans-serif; font-size: 18px; font-weight: bold; ; }
.doingu-item .name a { color: var(--color-main); ; }
.doingu-item .desc { color: #7e7e7e; font-size: 14px; ; }
.wrap-tieuchi { background: #f7f7f7; ; }
.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-family: "Inter", serif; font-size: 75px; line-height: 1; background: linear-gradient(to bottom, rgba(255, 203, 15, 1) 0%, rgba(255, 255, 255, 1) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; transition: all 0.3s ease; ; }
.tieuchi-item .image { position: relative; width: 30px; ; }
.tieuchi-item .image img { position: relative; z-index: 2; ; }
.tieuchi-item .info { position: relative; width: calc(100% - 60px); z-index: 2; ; }
.tieuchi-item .name { font-family: "Inter", serif; color: #000; font-weight: 600; font-size: 16px; -webkit-line-clamp: 2; line-height: 1.5; transition: all 0.3s ease; ; }
.tieuchi-item .desc { margin-bottom: 0px; color: #868686; font-size: 14px; ; }
.tieuchi-item:hover .num { background: var(--bg-linear-hover); background-clip: text; -webkit-background-clip: text; ; }
.tieuchi-item:hover .name { color: var(--color-main); ; }
.showroomSwiper .swiper-slide { width: 300px; ; }
.panorama-slider { width: 100%; padding: 60px 0; perspective: 1000px; overflow: visible; ; }
.panorama-slider .swiper-slide { width: 250px; transition: transform 0.5s ease; transform-origin: center center; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); ; }
.hinhthuc-item { margin-bottom: 15px; ; }
.hinhthuc-item .num { font-family: "Dynalight"; font-size: 75px; line-height: 65px; color: #eaeaea; transition: all 0.3s ease; ; }
.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 .image img { position: relative; z-index: 2; ; }
.hinhthuc-item .info { position: relative; width: calc(100% - 90px); z-index: 2; ; }
.hinhthuc-item .name { font-weight: 600; color: #333; font-size: 16px; text-transform: uppercase; margin-bottom: 0.5rem; ; }
.hinhthuc-item .desc { margin-bottom: 0px; color: #333; font-size: 15px; min-height: 45px; -webkit-line-clamp: 2; ; }
.wrap-tamnhin { }
.wrap-tamnhin h3, .wrap-sumenh h3 {font-size: clamp(24px, 3vw, 31px);font-family: var(--font-600);font-weight: bold;}
.wrap-tamnhin h3::after { content: ""; display: none; width: 50px; height: 2px; background-color: var(--color-submain); ; }
.as-layer.as-vertical { width: 65%; ; }
.wrap-banner { }
.wrap-tiktok .tiktok-container { position: relative; width: 100%; height: 568px; padding: 14px; ; }
/* .wrap-tiktok .tiktok-container::before { content: ''; display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/bg_tiktok.png) no-repeat; z-index: 1; ; }
*/ .wrap-tiktok .tiktok-container .tiktok-iframe { position: relative; z-index: 2; ; }
.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: #f00; ; }
.wrap-tiktok .tiktok-container .tiktok-button .btn-frame { position: absolute; top: 50px; left: 50px; color: #fff; ; }
.wrap-appointment { background: #f7f7f7; ; }
#frm-appointment-2 { padding: 30px; background: url(../images/bg_datlich.jpg) no-repeat center center; background-size: cover; border-radius: 10px; overflow: hidden; ; }
#frm-appointment-2 label { margin-bottom: 5px; font-weight: bold; color: var(--color-main); ; }
#frm-appointment-2 .form-control, #frm-appointment-2 .form-select { background-color: transparent; ; }
.slider-video-thumb { margin: 0px -0.5rem; ; }
.video-item { position: relative; overflow: hidden; margin: 0px auto; ; }
.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; text-transform: uppercase; 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: all 0.3s; opacity: 1; ; }
.video-item .btn-play .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); ; }
.video-item .btn-play i { background: #ff0000; ; }
.video-item .btn-play svg { color: #fff; ; }
#frm-newsletter .form-control {color: #949494;border: 0px;outline: none !important;box-shadow: none !important;background-color: transparent;line-height: 50px;padding: 0 15px;font-size: 18px;font-family: var(--font-500);}
#frm-newsletter button[type="submit"] {background: transparent;color: #fff;font-size: 14px;}
#frm-newsletter {position: relative;border-radius: 10px;border: 1px solid #848484;}
.form-check-input:checked { border-color: var(--color-submain); background: var(--color-submain); ; }
#frm-newsletter .frm-content { padding: 40px 20px; background-color: #f3f3f3; border-radius: 20px; ; }
#frm-newsletter .frm-title { color: var(--color-submain); ; }
#frm-newsletter .frm-title span { color: #757575; ; }
.newsletter-input svg { display: none; position: absolute; top: 20px; right: 10px; ; }
/* Newsletter */ .newsletter-input { position: relative; 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: 0.25rem; white-space: nowrap; margin: 0px; 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: none !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: #fff; border-radius: 0.25rem; ; }
.newsletter-button button:hover { background: var(--color-submain); ; }
.wrap-whyus { background: url(../images/bg_whyus.jpg) no-repeat center center; background-size: cover; color: #fff; ; }
.whyus-list { text-align: center; ; }
.whyus-list:hover .name { color: var(--color-main); ; }
.whyus-list:hover .image-rotate img { animation: continuousRotateY 2s linear infinite; ; }
.whyus-list .desc { }
.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: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%); ; }
.quytrinh-item { position: relative; ; }
.quytrinh-item:hover .name { color: var(--color-main); ; }
.quytrinh-item:nth-child(odd) { padding-bottom: 5rem; ; }
.quytrinh-item:nth-child(even) { 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) no-repeat; background-size: 100%; ; }
.quytrinh-item:nth-child(even)::before { background: url(../images/arrow_quytrinh2.png) no-repeat; ; }
.quytrinh-item:last-child::before { background: none; ; }
.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 #e5e5e5; opacity: 0; ; }
.wrap-filter .filter-counter.show { opacity: 1; ; }
.filter-search { border-radius: 0px; background: #fff; display: flex; align-items: center; justify-content: end; outline: none; overflow: hidden; transition: 400ms ease-in-out; position: relative; width: 200px; height: 30px; border: 1px solid #cfcfcf; ; }
.filter-search input { position: absolute; top: 0; left: 0; width: calc(100% - 30px); height: 100%; outline: none !important; border: 0px !important; display: block; z-index: 1; background: #fff !important; box-shadow: none !important; ; }
.filter-search .btn { position: relative; display: flex; align-items: center; justify-content: center; padding: 0px; border-radius: 5px; width: 30px; height: 30px; cursor: pointer; background: transparent; border-color: transparent; z-index: 2; ; }
.filter-dropdown { position: absolute; left: 0px; width: 100%; background-color: #fff; top: 100%; border-radius: 0.5rem; -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15); -webkit-transform: perspective(600px) rotateX(-90deg); transform: perspective(600px) rotateX(-90deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; opacity: 0; visibility: hidden; padding: 15px; transition: all 0.3s ease-in-out; z-index: 10; ; }
.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-item a { font-size: 13px; ; }
.wrap-project { background: #fff; ; }
.project-item { display: block; ; }
.project-item .name { text-align: center; font-size: 18px; text-transform: uppercase; ; }
.wrap-news { }
.news-item { border-radius: 0px; overflow: hidden; background-color: #fff; ; }
.news-item .image { position: relative; margin-bottom: 0px; ; }
.news-item .image img { }
.news-item .info {position: relative;width: 100%;padding: 10px 0;z-index: 10;}
.news-item .info svg { }
.news-item .time { margin: 0px auto; width: 65px; height: 82px; border-bottom: 1px solid var(--color-main); text-align: center; color: #222; font-size: 16px; padding-top: 25px; margin-bottom: 15px; line-height: 20px; background: url(../images/bg_time.png) no-repeat top center; background-size: cover; ; }
.news-item .time span:first-child { display: inline-block; font-size: 30px; font-weight: bold; padding-bottom: 5px; border-bottom: 1px solid #222; ; }
.news-item .time span:last-child { display: block; ; }
.news-item .author { font-size: 14px; color: #aaaaaa; ; }
.news-item .name {height: 50px;}
.news-item .name a {position: relative;font-size: 21px;font-family: var(--font-600);color: #333;}
.news-item .name a:hover { color: var(--color-main); ; }
.news-item .desc {font-size: 16px;color: #9c9c9c;font-family: var(--font-500);}
.news-item .more a { font-size: 12px; color: #858585; ; }
.news-item .more a:hover { letter-spacing: 2px; ; }
.news-item .meta { position: absolute; top: 10px; left: 10px; ; }
.news-item .meta span { display: block; font-size: 0.875rem; color: #fff; 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: #89b0e8; ; }
.news-item:hover .name a { color: var(--color-main); ; }
.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); ; }
.wrap-giatri { background-color: #f7f7f7; ; }
.giatri-item { position: relative; cursor: pointer; text-align: center; ; }
.giatri-item .info { position: relative; ; }
.giatri-item .image {width: 51px;margin: 0px auto 10px;}
.giatri-item .image img { }
.giatri-item .name {font-size: 16px;line-height: 23px;color: #000;font-family: var(--font-500);}
.giatri-item .desc { color: #888888; font-size: 16px; ; }
.wrap-doingu-inner { background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(207, 207, 207, 1) 100%); ; }
.wrap-vanhoa .wrap-content { padding: 40px; border-radius: 20px; box-shadow: 5px 5px 0px rgba(234, 230, 230, 0.5); ; }
.vanhoa-item {background-color: #F1F1F1;border-radius: 10px;max-height: 185px;height: 185px;overflow: auto;}
.vanhoa-item .image {width: 26px;}
.vanhoa-item .name {font-size: 16px;font-family: var(--font-600);height: 40px;}
.vanhoa-item .desc { color: #767676; ; }
.wrap-history { background: #f8f8f8 url(../images/bg_history.png) no-repeat 95% 90%; ; }
.history-item .info { }
.history-item .name { font-size: 24px; font-weight: 600; margin-bottom: 15px; color: #000; ; }
.year-item { font-size: 16px; text-align: center; position: relative; color: #b9b9b9; ; }
.year-item span { display: flex; align-items: center; height: 40px; ; }
.year-item.slick-current { font-weight: 500; color: #000; font-size: 32px; ; }
.year-item.slick-current::before { content: ""; position: absolute; top: calc(50% - 6px); right: 15px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #000; ; }
.wrap-history .slider-nav { width: 120px; ; }
.wrap-history .slider-nav .slick-arrow { width: 30px; height: 30px; ; }
.wrap-history .slider-nav .slick-arrow::before { font-size: 25px; color: var(--color-main); ; }
.wrap-history .slider-for { width: calc(100% - 120px); ; }
.item-giatri { position: relative; padding: 20px; background-color: var(--color-main); 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%; filter: brightness(0) invert(1); ; }
.item-giatri .icon { position: relative; width: 40px; margin-bottom: 20px; ; }
.item-giatri .name { position: relative; font-family: "Playfair Display", sans-serif; font-size: 18px; font-weight: bold; color: #fff; ; }
.item-giatri .desc { position: relative; font-size: 15px; color: #87c5df; line-height: 2; ; }
.item_history { position: relative; border-radius: 10px; overflow: hidden; ; }
.item_history::before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); ; }
.item_history .info { position: absolute; padding: 10px 20px; bottom: 10px; left: 10px; width: 100%; color: #fff; ; }
.item_history .name { font-family: "Playfair Display", sans-serif; font-size: 31px; margin-bottom: 15px; color: #fff; ; }
.item_history .desc { font-size: 16px; color: #fff; ; }
a.play { position: relative; ; }
a.play .btn-frame { position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%); ; }
a.play .btn-frame i { color: #fff; background-color: rgba(255, 255, 255, 0.3); ; }
a.play .btn-frame .kenit-alo-circle { border-color: rgba(255, 255, 255, 0.5); ; }
.wrap-video .image { border-radius: 10px; overflow: hidden; ; }
.wrap-video .btn-play { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); ; }
.wrap-video .btn-play svg { color: #fff; ; }
/* Mmenu */ .menu-res { z-index: 100; background: var(--color-main); position: relative; display: none; ; }
.menu-bar-res { display: none; height: 34px; padding: 0px 10px; border-radius: 5px; background: var(--color-main); justify-content: center; ; }
#menu { display: none; ; }
#hamburger { position: relative; display: block; width: 34px; height: 30px; border-radius: 5px; border: 1px solid #fff; background: var(--color-main); ; }
#hamburger:before, #hamburger:after, #hamburger span { background: #fff; content: ""; display: block; width: 60%; height: 1px; position: absolute; left: 20%; ; }
#hamburger:before { top: 7px; ; }
#hamburger span { top: 14px; ; }
#hamburger:after { top: 21px; ; }
#hamburger:before, #hamburger:after, #hamburger span { -webkit-transition: none 0.5s ease 0.5s; transition: none 0.5s ease 0.5s; -webkit-transition-property: transform, top, bottom, left, opacity; transition-property: transform, top, bottom, left, opacity; ; }
.mm-wrapper_opening #hamburger:before, .mm-wrapper_opening #hamburger:after { top: 14px; ; }
.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-panels, .mm-panel { background: #fff !important; ; }
.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited { 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: 2px 3px; margin: 2px; ; }
/* Search Responsive */ .search-res { position: relative; ; }
.search-res .icon-search { cursor: pointer; text-align: center; color: #ffffff; font-size: 16px; margin: 0px; margin-left: 10px; ; }
.search-res .icon-search.active { color: var(--color-submain); ; }
.search-res .search-grid { position: absolute; top: 35px; right: -12px; width: 0px; height: 40px; overflow: hidden; background: #ffffff; 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: none; border: none; 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: none; 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; ; }
/* Slideshow */ @keyframes dance { 0% { -webkit-transform: scale(0.5); ; }
100% { -webkit-transform: scale(1.5); ; }
}
@keyframes moveBounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); ; }
50% { -webkit-transform: translateY(20px); transform: translateY(20px); ; }
100% { -webkit-transform: translateY(0px); transform: translateY(0px); ; }
}
@keyframes moveUpBounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); ; }
50% { -webkit-transform: translateY(35px); transform: translateY(35px); ; }
100% { -webkit-transform: translateY(0); transform: translateY(0); ; }
}
@keyframes moveLeftBounceright { 0% { -webkit-transform: translateX(0); transform: translateX(0); ; }
50% { -webkit-transform: translateX(35px); transform: translateX(35px); ; }
100% { -webkit-transform: translateX(0); transform: translateX(0); ; }
}
@keyframes rotateme { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); ; }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); ; }
}
@-webkit-keyframes rotateme { from { -webkit-transform: rotate(0deg); ; }
to { -webkit-transform: rotate(360deg); ; }
}
.slideshow { position: relative; overflow: hidden; ; }
.slideshow .slider { position: relative; width: 100%; ; }
.slideshow .banner { width: 37%; ; }
.slideshow .banner-item { display: block; ; }
.slideshow .banner-item:nth-child(1) { margin-bottom: 20px; ; }
.slbannerhh { display: table; table-layout: fixed; width: 100%; ; }
.slbannerhh .banvdimg { padding-top: 32.7%; position: relative; overflow: hidden; ; }
.slbannerhh video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; ; }
.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%; -webkit-animation: dance 1.5s alternate infinite; animation: dance 1.5s alternate infinite; ; }
.slide-text .arrow { position: absolute; bottom: -40px; left: 20%; -webkit-animation: moveLeftBounceright 2s linear infinite; animation: moveLeftBounceright 2s linear infinite; ; }
.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; -webkit-animation: moveBounce 2s linear infinite; animation: moveBounce 2s linear infinite; ; }
.slide-text .rotateme { position: absolute; left: 10px; top: 5px; right: 0px; bottom: 0px; -webkit-animation-name: rotateme; animation-name: rotateme; -webkit-animation-duration: 20s; animation-duration: 20s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; ; }
.slide-left, .slide-right { position: relative; ; }
.slide-left { width: 340px; ; }
.slide-left { width: 300px; ; }
.slide-right span { position: absolute; left: 10px; top: 5px; right: 0px; bottom: 0px; ; }
.slide-center { width: 540px; text-align: center; color: #fff; ; }
.slide-center h4 { text-transform: uppercase; color: var(--color-main); letter-spacing: 2px; 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; text-transform: uppercase; color: #fff; background-color: var(--color-main); border-radius: 30px; box-shadow: 1px 1px 0px #fff; ; }
.slide-center a:hover { background-color: #be1217; ; }
/* .slideshow { position: relative; width: calc(100%); overflow: hidden; ; }
.slideshow .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; ; }
.slideshow .scroll-down { color: var(--color-main); text-transform: uppercase; position: absolute; bottom: 65px; left: 50%; transform: translateX(-50%); text-align: center; padding-bottom: 40px; line-height: 1.4em; z-index: 99; ; }
.scroll-down .icon { position: relative; ; }
.slideshow .scroll-down .icon span { position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-left: 2px solid var(--color-main); border-bottom: 2px solid var(--color-main); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: scrolldown 2s infinite; animation: scrolldown 2s infinite; opacity: 0; box-sizing: border-box; ; }
.slideshow .scroll-down .icon span:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; ; }
.slideshow .scroll-down .icon span:nth-of-type(2) { top: 5px; -webkit-animation-delay: .15s; animation-delay: .15s; border-left-width: 2px; border-bottom-width: 2px; width: 12px; height: 12px; margin-left: -6px; ; }
.slideshow .scroll-down .icon span:nth-of-type(3) { top: 10px; -webkit-animation-delay: .3s; animation-delay: .3s; border-left-width: 2px; border-bottom-width: 2px; width: 12px; height: 12px; margin-left: -6px; ; }
@keyframes scrolldown { 0% { opacity: 0; ; }
50% { opacity: 1; ; }
100% { opacity: 0; ; }
}
.slideshow-item { position: relative; display: block; ; }
.slideshow-item::before { content: ''; display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 2; ; }
.slideshow-image { display: block; position: relative; z-index: 1; overflow: hidden; ; }
.slideshow:hover .control-slideshow { opacity: 1; ; }
.control-slideshow { opacity: 0; ; }
.slideshow h2 { font-size: 5rem; color: #fff; text-transform: uppercase; font-weight: bold; ; }
.slideshow h5 { color: #fff; font-weight: 300; ; }
.banner { position: relative; ; }
.banner::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .3); ; }
.banner h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-bottom: 0px; text-transform: uppercase; text-align: center; color: #fff; z-index: 2; ; }
.info-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; ; }
*/ .name-slide { }
.desc-slide { }
.views-more-slide { }
.box-slide.slick-current.slick-active .slide-left { animation: fadeInLeftBig; animation-duration: 1s; animation-delay: 0.5s; animation-fill-mode: forwards; ; }
.box-slide.slick-current.slick-active .slide-right { animation: fadeInRightBig; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; ; }
.box-slide.slick-current.slick-active .name-slide { animation: fadeInUp; animation-duration: 1s; animation-delay: 1.5s; animation-fill-mode: forwards; ; }
.box-slide.slick-current.slick-active .desc-slide { animation: fadeInUp; animation-duration: 1s; animation-delay: 2s; animation-fill-mode: forwards; ; }
.box-slide.slick-current.slick-active .views-more-slide { animation: scaleLarge; animation-duration: 1s; animation-delay: 2.5s; animation-fill-mode: forwards; ; }
.slide-text .slick-prev, .slide-text .slick-next { width: 40px; height: 50px; border-radius: 5px; background: rgba(0, 0, 0, 0.3); ; }
.slide-text .slick-prev { left: 5px; ; }
.slide-text .slick-next { right: 5px; ; }
.slide-text .slick-prev:before { font-family: "FontAwesome"; font-weight: 400; content: "\f053"; ; }
.slide-text .slick-next:before { font-family: "FontAwesome"; font-weight: 400; content: "\f054"; ; }
.slide-text .slick-dots { bottom: 20px; ; }
.slide-text .slick-dots li { margin: 0; ; }
.slide-text .slick-dots li button:before { color: #fff; font-size: 15px; ; }
.search-multiple { position: relative; z-index: 10; margin-top: -70px; background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0%, rgba(242, 242, 242, 1) 100%); ; }
.checkbox-card { display: block; cursor: pointer; ; }
.checkbox-card input[type="radio"], .checkbox-card input[type="checkbox"] { display: none; ; }
.checkbox-card input[type="radio"]:checked + .content, .checkbox-card input[type="checkbox"]: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: 0px 10px; border-radius: 5px; text-align: center; background-color: #eeeeee; transition: all 0.2s ease-in-out; ; }
.search-multiple .loaixe-item .image { margin-bottom: 0px; ; }
.search-multiple .loaixe-item .image img { height: 80px; ; }
.search-multiple .loaixe-item .name { font-size: 18px; font-weight: bold; ; }
.search-multiple .hangxe-item { border-radius: 5px; padding: 7px 5px 5px; text-align: center; transition: all 0.2s ease-in-out; ; }
.search-multiple .hangxe-item .name { font-size: 13px; ; }
.search-multiple .hangxe-item .image { margin: 0px auto; margin-bottom: 5px; ; }
.search-multiple .hangxe-item .image img { height: 20px; ; }
.search-multiple .giaban-item { padding: 5px; background: #eeeeee; text-align: center; border-radius: 5px; transition: all 0.2s ease-in-out; ; }
.search-multiple .giaban-item .name { font-size: 13px; ; }
.search-multiple .loaixe-item:hover, .search-multiple .hangxe-item:hover, .search-multiple .giaban-item:hover { background: var(--bg-linear); ; }
/* Search */ .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; ; }
/* Intro */ .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:before, .news-scroll:after { content: ""; position: absolute; width: 10px; height: 10px; left: 85px; border-radius: 100%; background-color: #cacaca; ; }
.news-scroll:before { top: 10px; ; }
.news-scroll:after { bottom: 40px; ; }
.news-control { left: 85px; font-size: 13px; opacity: 0.5; z-index: 1; cursor: pointer; ; }
.news-control:hover { opacity: 1; color: #ec2d3f; ; }
.news-control#up { top: -10px; ; }
.news-control#down { bottom: 20px; ; }
.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: #ffffff; 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 #ffffff; 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: #222222; ; }
.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-name a .text-split { -webkit-line-clamp: 2; ; }
.news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc { height: 38px; font-size: 13px; ; }
.news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc.text-split { -webkit-line-clamp: 2; ; }
/* Video */ .video { cursor: pointer; margin-bottom: 1rem; ; }
.video .video-image { position: relative; margin-bottom: 0.75rem; ; }
.video .video-image:before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 50px / 2); left: calc(50% - 35px / 2); z-index: 1; background-repeat: no-repeat; background-image: url(../images/play.png); ; }
.video .video-name { text-align: center; font-size: 16px; color: #212529; margin-bottom: 0px; ; }
.wrap-khuyenmai { background: url(../images/bg_khuyenmai.jpg) no-repeat bottom center; background-size: cover; ; }
.wrap-khachhang .owl-item { }
.khachhang-item { width: 450px; border-radius: 15px; padding: 15px; background-color: #f8f8f8; transition: all 0.3s ease-in-out; ; }
.owl-item.active.center .khachhang-item { transform: scale(1.2); ; }
.owl-item.active.center .khachhang-item, .khachhang-item:hover { color: #fff; background-color: var(--color-main); ; }
.owl-item.active.center .khachhang-item .name, .khachhang-item:hover .name { color: #fff !important; ; }
.khachhang-item .icon { width: 60px; margin-bottom: 15px; ; }
.khachhang-item .icon svg { color: #d0d5d9; ; }
.owl-item.active.center .khachhang-item .icon svg, .khachhang-item:hover .icon svg { color: var(--color-main); ; }
.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 { width: 70px; ; }
.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: #989898; font-size: 13px; font-weight: 400; ; }
.web-item { }
.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: all 3s ease-in-out 0s; -moz-transition: all 2s ease-in-out 0s; -ms-transition: all 2s ease-in-out 0s; transition: all 2s ease-in-out 0s; background-position: top; background-repeat: no-repeat; ; }
.web-item:hover .info { opacity: 1; visibility: visible; bottom: 0; ; }
.web-item .info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; width: 100%; text-align: center; padding: 10px 10px; left: 0; bottom: -20px; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; color: #fff; ; }
.web-item .info .name { font-size: 1.1rem; ; }
.web-item .info .price { }
.web-item .info .price span { font-size: 1.4rem; ; }
.web-item .info .d-flex { }
.web-item .info .d-flex a { color: #fff; border-bottom: 2px solid; font-size: 0.9rem; padding: 2px 14px; transition: 0.4s ease; text-transform: capitalize; ; }
.web-item .info .d-flex a:hover { color: var(--second); ; }
/* Product */ .cart-product { margin-bottom: 0px; ; }
.cart-product span { cursor: pointer; color: #ffffff; text-transform: capitalize; text-align: center; ; }
.wrap-pro-info { }
#frm-sellcar { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); ; }
#frm-sellcar .frm-content { width: 450px; max-width: 100%; ; }
/* Product Detail */ #product-title {/* width: 560px; */line-height: 29px;}
.left-pro-detail {width: 50%;}
.camket-pro-detail { width: 250px; ; }
.camket-pro-detail ul, .camket-pro-detail ol { list-style: none; padding: 0px; ; }
.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>') no-repeat left 5px; ; }
.right-pro-detail {width: 46%;}
.product-video { width: 71px; height: 71px; padding: 5px; border-radius: 10px; overflow: hidden; background: #fff; margin: 5px; box-shadow: 0px 0px 2px #333; ; }
.gallery-pro-detail { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; ; }
.gallery-pro-detail .gallery-pro-detail-left {width: 106px;margin: -5px;}
.gallery-pro-detail .slider-product-thumbs { flex: 1; ; }
.gallery-pro-detail .slider-product-thumbs .item {padding: 5px;margin-bottom: 8px;}
.gallery-pro-detail .slider-product-thumbs .item.slick-active.slick-current a { box-shadow: 0px 0px 2px var(--color-main); ; }
.gallery-pro-detail .slider-product-thumbs .item a { display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0px 0px 2px #ccc; ; }
.gallery-pro-detail .slider-product-thumbs .item a img { border-radius: 10px; ; }
.gallery-pro-detail .slider-products {width: calc(100% - 115px);background: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0px 0px 2px #ccc;}
.gallery-pro-detail .slider-products .item { padding: 10px; text-align: center; ; }
.gallery-pro-detail .slider-products .item img { margin: 0px auto; ; }
.gallery-pro-detail .slider-products .slick-prev:before, .gallery-pro-detail .slider-products .slick-next:before { display: none; ; }
.gallery-pro-detail .slider-products .slick-arrow { width: 25px; color: #333; background-color: rgba(255, 255, 255, 0.5); ; }
.gallery-pro-detail .slider-products .slick-arrow svg { width: 30px; height: 30px; ; }
.title-pro-detail h2 { font-size: 24px; font-weight: 500; color: var(--color-main); margin-bottom: 0px; ; }
.comment-pro-detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; ; }
.social-plugin-pro-detail { margin-bottom: 1rem; margin-top: 0px !important; ; }
.desc-pro-detail { /* padding: 20px; background-color: #e0e0e0; margin-bottom: 1rem; */; }
.desc-pro-detail .attrs { margin: 0; padding: 0; list-style: none; margin-bottom: 20px; ; }
.desc-pro-detail .attrs li:first-child { border-top: 0px; ; }
.desc-pro-detail .attrs li { padding: 10px 0px 7px; border-top: 1px solid #989898; color: #989898; ; }
.desc-pro-detail .attrs li svg { margin-top: -2px; ; }
.desc-pro-detail .attrs li b { color: #000; ; }
/* .desc-pro-detail ul li, .desc-pro-detail ol li { position: relative; list-style: none; padding: 10px 10px 10px 35px; font-weight: 500; ; }
.desc-pro-detail ul li::before, .desc-pro-detail ol li::before { content: ''; display: block; width: 28px; height: 28px; background: url(../images/icon_check.png) no-repeat center center; background-size: 28px; position: absolute; left: 0px; top: 10px; ; }
*/ .attr-pro-detail {width: 100%;list-style: none;padding: 0px;margin: 0;}
.attr-pro-detail li {padding-left: 0;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 { }
.brand-pro-detail a { background: var(--color-red); color: #fff; border-radius: 2px; padding: 2px 5px; ; }
.price-new-pro-detail {font-family: var(--font-600);font-size: 28px;color: #e70004;}
.price-old-pro-detail {font-size: 16px;font-family: var(--font-600);color: #6A6A6A;text-decoration: line-through;padding-left: 10px;}
.price-discount-pro-detail { font-size: 12px; font-weight: 600; color: #e70004; border: 1px solid #e70004; background: #eaeaea; padding: 2px 5px; border-radius: 4px; margin-left: 10px; ; }
.color-pro-detail { cursor: pointer; vertical-align: top; position: relative; 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; transition: 0.3s; ; }
.size-pro-detail { cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; padding: 5px 10px; margin: 0 8px 0 0; border: 1px solid #dadada; background-color: #fff; border-radius: 5px; font-size: 13px; transition: 0.3s; ; }
.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,<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>') no-repeat center center; ; }
.color-pro-detail input[type="radio"], .size-pro-detail input[type="radio"] { display: none; ; }
.quantity-pro-detail { width: 150px; display: flex; align-items: center; justify-content: space-between; text-align: center; height: 45px; border-radius: 30px; overflow: hidden; border: 1px solid #dfdfdf; ; }
.quantity-pro-detail span { line-height: 25px; padding: 0px; width: 45px; height: 100%; color: #000; cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; font-weight: 500; ; }
.quantity-pro-detail span.quantity-plus-pro-detail { border-left: 0px; ; }
.quantity-pro-detail span.quantity-minus-pro-detail { border-right: 0px; ; }
.quantity-pro-detail input { height: 100%; border: none; width: calc(100% - 90px); text-align: center; font-size: 15px; ; }
.cart-pro-detail a { text-align: center; color: #fff; text-transform: uppercase; cursor: pointer; width: calc(100% / 2 - 5px); height: 45px; border-radius: 5px; ; }
.cart-pro-detail a.addnow { background: #fff; color: var(--color-red); ; }
.cart-pro-detail a.addnow:hover { color: #fff; background: var(--color-red); ; }
.cart-pro-detail a.buynow { background-color: #333; ; }
.cart-pro-detail a.buynow:hover { background-color: var(--color-dark-red); color: #fff; ; }
.cart-pro-detail a i { vertical-align: top; margin-right: 8px; font-size: 24px; position: relative; top: -2px; ; }
.tags-pro-detail { width: 100%; ; }
.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; font-size: 15px; color: #333; text-transform: uppercase; font-weight: 600; font-size: 1.1rem; ; }
.tabs-pro-detail .nav-tabs .nav-link.active, .tabs-pro-detail .nav-tabs .nav-item.show .nav-link { border-top-color: #555555; ; }
.thongso-pro-detail table { width: 100%; border-collapse: collapse; ; }
.thongso-pro-detail table th, .thongso-pro-detail table td { 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; /* cố định cột trái */; }
/* New Product Css */ .product-attr .attr-options { gap: 8px; ; }
.color-option { display: inline-block; cursor: pointer; position: relative; ; }
.color-option input { display: none; ; }
.color-option .circle { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ccc; display: inline-block; ; }
.color-option input:checked + .circle { border-color: var(--color-main); ; }
.btn-option { display: inline-block; cursor: pointer; ; }
.btn-option input { display: none; ; }
.btn-option span { display: inline-block; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; transition: 0.2s; ; }
.btn-option input:checked + span { border-color: var(--color-main); ; }
.img-option { display: inline-block; cursor: pointer; margin: 4px; ; }
.img-option input { display: none; ; }
.img-option span { display: inline-block; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; width: 60px; height: 60px; position: relative; ; }
.img-option img { width: 100%; height: 100%; object-fit: cover; ; }
.img-option input:checked + span { border-color: var(--color-main); box-shadow: 0 0 0 2px #000 inset; ; }
.btn-option.disabled span, .color-option.disabled .circle, .img-option.disabled span { opacity: 0.4; cursor: not-allowed; pointer-events: none; ; }
/* End */ #advisory-modal .btn-close { position: absolute; top: 5px; right: 5px; ; }
#advisory-modal .modal-dialog { max-width: 700px; ; }
.thongso { line-height: 1; ; }
.thongso p { margin-bottom: 0px; ; }
/* News */ .pic-news { width: 210px; ; }
.pic-news img { width: 100%; ; }
.info-news { width: calc(100% - 210px); padding-left: 20px; ; }
.name-news { color: #252525; font-size: 17px; line-height: normal; font-weight: 600; ; }
.name-news.text-split { -webkit-line-clamp: 2; ; }
.name-news:hover { color: var(--background-static); ; }
.time-news { color: var(--color-gray); margin-bottom: 10px; ; }
.desc-news { color: #676767; margin-top: 5px; line-height: 22px; ; }
.news .news-name { margin-bottom: 0.5rem; ; }
.news .news-name a { color: #333; font-size: 16px; ; }
.news .news-name a.text-split { -webkit-line-clamp: 2; ; }
.news .news-name a:hover { color: #ec2d3f; ; }
.news .news-time { color: #84878a; margin-bottom: 0.25rem; ; }
.news .news-desc { color: #333333; margin-top: 5px; line-height: 22px; ; }
.othernews b { margin-bottom: 10px; font-size: 15px; ; }
/*News orther*/ .othernews { position: sticky; top: 60px; z-index: 11; ; }
.news-other { }
.pic-news-other { width: 40%; border-radius: 7px; overflow: hidden; ; }
.info-news-other { width: 60%; padding: 0px 10px; ; }
.name-news-other { color: #252525; font-weight: 600; padding: 0px !important; display: -webkit-box !important; font-size: 14px !important; margin-bottom: 0px; ; }
.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: 0px 10px; font-size: 16px; margin-bottom: 0px; ; }
.baogia-item span { font-size: 18px; transition: 0.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; ; }
.baogia-item:hover { color: var(--color-main); ; }
.bg { background: linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(153, 153, 153, 0) 100%); ; }
.author-item { }
.author-item .image { width: 150px; ; }
.author-item .info { width: calc(100% - 175px); ; }
.author-item .name { font-size: 20px; ; }
.author-item .subname { color: #999; ; }
/* Contact */ .form-floating.form-floating-cus > input, .form-floating-cus > select { 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 { position: relative; 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: none; ; }
.contact-input textarea { resize: none; height: 150px; ; }
.contact-input .custom-file-label::after { content: attr(title); ; }
.contact-map { position: relative; overflow: hidden; height: 350px; ; }
.contact-map iframe { position: absolute; top: 0px; left: 0px; width: 100% !important; height: 100% !important; ; }
/* Blink */ .blink { -webkit-animation-name: blink; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blink; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blink; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; ; }
.wrap-frame { position: fixed; width: 50px; height: auto; right: 20px; bottom: 100px; z-index: 10; ; }
/* Button Frame */ .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, 0.8); opacity: 0.1; border-color: var(--color-main); opacity: 0.5; ; }
.btn-frame .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; ; }
.btn-frame .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, 0.35); opacity: 0.4; ; }
.btn-frame .pulse { -webkit-animation-name: 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: #fff; background-color: var(--color-main); white-space: nowrap; transition: all 0.3s ease-in-out; width: 0px; overflow: hidden; ; }
.btn-frame:hover span { opacity: 1; width: 265px; ; }
/* Messenger */ .js-facebook-messenger-top-header { background: #487dfc; color: #fff; height: 35px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 5px 5px 0 0; ; }
.js-facebook-messenger-container.closed { display: none !important; ; }
.js-facebook-messenger-tooltip { bottom: 97px; right: 97px; color: #404040; background: #fff; ; }
.js-facebook-messenger-tooltip.closed { display: none !important; ; }
.js-facebook-messenger-box, .js-facebook-messenger-button { z-index: 999; ; }
.js-facebook-messenger-tooltip { z-index: 999; display: none; position: fixed; text-align: center; border-radius: 10px; overflow: hidden; font-size: 12px; line-height: 1; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt; box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt; z-index: 1000000000000000019884624838656; ; }
.js-facebook-messenger-close-tooltip { width: 10px; height: 10px; display: inline-block; cursor: pointer; margin-left: 10px; ; }
.js-facebook-messenger-box { z-index: 999; ; }
.js-facebook-messenger-box.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; ; }
.js-facebook-messenger-box.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; ; }
.js-facebook-messenger-button, .js-facebook-messenger-tooltip { z-index: 999; ; }
.js-facebook-messenger-box { display: block; position: fixed; cursor: pointer; bottom: 150px; right: 17px; width: 56px; height: 56px; text-align: center; background: #1182fc; border-radius: 100%; overflow: hidden; z-index: 99; -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3); ; }
.js-facebook-messenger-box.rotate svg#fb-msng-icon { -webkit-transform: rotate(0deg); transform: rotate(0deg); ; }
.js-facebook-messenger-box svg#fb-msng-icon { width: 32px; height: 33px; position: absolute; top: 13px; left: 12px; opacity: 1; overflow: hidden; -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out; ; }
.js-facebook-messenger-box.rotate svg#close-icon { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); ; }
.js-facebook-messenger-box svg#close-icon { opacity: 0; width: 19px; height: 20px; position: absolute; top: 19px; left: 19px; -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out; ; }
.js-facebook-messenger-container, .js-facebook-messenger-container-button { z-index: 1000; ; }
.js-facebook-messenger-container { width: 250px; position: fixed; opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); bottom: 110px; right: 90px; border-radius: 10px; pointer-events: none; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); -webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out; -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: transform 160ms ease-in-out, opacity 160ms ease-in-out; transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; ; }
.js-facebook-messenger-top-head { width: 220px; color: #ffffff; background: #1182fc; display: block; position: relative; width: 220px; background: #1182fc; color: #ffffff; text-align: center; line-height: 1; padding: 10px; font-size: 14px; border-top-left-radius: 10px; border-top-right-radius: 10px; ; }
.js-facebook-messenger-container iframe, .js-facebook-messenger-container-button iframe { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; ; }
.js-facebook-messenger-box, .js-facebook-messenger-button, .js-facebook-messenger-tooltip { z-index: 999; ; }
.js-facebook-messenger-container, .js-facebook-messenger-container-button { z-index: 1000; ; }
.js-facebook-messenger-top-head { color: #ffffff; background: #1182fc; width: 220px; ; }
.js-facebook-messenger-tooltip { color: #404040; background: #fff; ; }
.js-facebook-messenger-container.open { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; pointer-events: all; ; }
.js-facebook-messenger-tooltip { bottom: 97px; right: 97px; ; }
.js-facebook-messenger-box.open svg#fb-msng-icon { opacity: 0; ; }
.js-facebook-messenger-box.rotate.open svg#close-icon { -webkit-transform: rotate(0deg); transform: rotate(0deg); ; }
.js-facebook-messenger-box.open svg#close-icon { opacity: 1; ; }
/* Cart Fix */ .cart-fixed { position: fixed; right: 20px; bottom: 290px; z-index: 10; background: #4b4f56; width: 50px; height: 50px; text-align: center; color: #fff !important; border-radius: 100%; display: -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; ; }
.cart-fixed:hover { background: var(--color-main); ; }
.cart-fixed span { position: absolute; top: 0px; right: -5px; color: #ffffff; width: 25px; height: 25px; background: #ec2d3f; text-align: center; line-height: 25px; font-size: 11px; border-radius: 100%; ; }
/* Toolbar */ @keyframes tada { 0% { 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); ; }
to { transform: scaleX(1); ; }
}
.toolbar { background: var(--background-static); width: 100%; padding: 3vw; bottom: 0px; position: fixed; z-index: 500; height: auto; left: 0px; max-height: 65px; ; }
.toolbar ul { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0px; margin: 0px; ; }
.toolbar ul li { text-align: center; width: 25%; ; }
.toolbar ul li a { display: block; width: 100%; cursor: pointer; ; }
.toolbar ul li a img { height: 20px; width: 20px; animation: tada 1.2s infinite; ; }
.toolbar ul li a span { color: #fff; font-size: 10px; ; }
/* Fixbar */ .fixbar { bottom: 0; display: block; background: #f0eff4; border-top: 1px solid #ddd; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; margin: 0; z-index: 500; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 50px; ; }
.fixbar ul { margin: 0px; padding: 0px; list-style: none; ; }
.fixbar ul li { margin: 0 auto 10px; text-align: center; width: 25%; float: left; ; }
.fixbar .icon-cart-mobile, .fixbar .icon-cart-new, .fixbar .icon-home-new, .fixbar .icon-hotdeal-new { width: 20px; height: 20px; display: block; margin: 8px auto 0; ; }
.fixbar .icon-cart-mobile { background: url(../images/cart-mobile.png) no-repeat; ; }
.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; ; }
.fixbar ul li a { font-size: 11px; text-decoration: none; color: #333; ; }
.fixbar ul li a i { font-size: 20px; ; }
/* Plugbar */ .plugbar { position: fixed; bottom: 0; left: 0; border-top: 1px solid #eae6e6; width: 100%; right: 0; max-width: 767px; margin: 0 auto; background: #ffffff; padding: 9px 10px 10px 7px; z-index: 10; ; }
.plugbar ul { list-style: none; padding: 0; margin: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; ; }
.plugbar ul li { width: 20%; float: left; ; }
.plugbar ul li a { display: block; color: #696969; font-size: 12px; text-align: center; position: relative; ; }
.plugbar ul li a i { font-size: 20px; color: #696969; ; }
.plugbar ul li a span { position: absolute; width: 50px; height: 50px; top: -40px; left: calc(50% - 50px / 2); font-size: 14px; display: block; border: 1px solid rgba(234, 230, 230, 0.5); border-radius: 100%; ; }
/* Combo Phone */ .support-online { position: fixed; z-index: 999; left: 10px; bottom: 0px; ; }
.support-online a { position: relative; margin: 20px 10px; text-align: left; width: 40px; height: 40px; ; }
.support-online i { width: 40px; height: 40px; background: #43a1f3; color: #ffffff; border-radius: 100%; font-size: 20px; text-align: center; line-height: 1.9; position: relative; z-index: 999; ; }
.support-online a { display: block; ; }
.support-online a span { border-radius: 2px; text-align: center; background: #67b634; padding: 9px; display: none; width: 180px; margin-left: 10px; position: absolute; color: #ffffff; z-index: 999; top: 0px; left: 40px; -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; -webkit-animation: headAnimation 0.7s 1; animation: headAnimation 0.7s 1; ; }
.support-online a:hover span { display: block; ; }
.support-online a span:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #67b634 transparent transparent; position: absolute; left: -10px; top: 10px; ; }
.support-online .kenit-alo-circle-fill { width: 60px; height: 60px; top: -10px; position: absolute; border-radius: 100%; border: 2px solid transparent; background-color: rgba(0, 175, 242, 0.5); opacity: 0.75; right: -10px; ; }
.support-online .kenit-alo-circle { width: 50px; height: 50px; top: -5px; right: -5px; position: absolute; background-color: transparent; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: 0.1; border-color: #0089b9; opacity: 0.5; ; }
.support-online .support-online .btn-support { cursor: pointer; ; }
.support-online .mes i { background: orange; ; }
.support-online .sms i { background: red; ; }
.support-online .call-now i { background: green; ; }
/* Phone Switch */ .widget-mobile { position: fixed; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 10px; z-index: 9999999; ; }
#my-phone-circle { position: relative; width: 50px !important; height: 50px !important; ; }
.wcircle-open .wcircle-icon i:before { content: "\f00d"; ; }
.wcircle-icon { background: var(--color-main); border-radius: 50%; position: relative !important; display: -webkit-box; display: -ms-flexbox; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; ; }
.wcircle-icon:before { position: absolute; content: ""; width: 60px; height: 60px; background: var(--color-main); border: 1px solid #ffffff; border-radius: 50%; left: -5px; top: -5px; -webkit-animation: pulse 1s infinite ease-in-out; animation: pulse 1s infinite ease-in-out; ; }
.wcircle-icon:after { position: absolute; content: ""; width: 80px; height: 80px; background: rgba(204, 44, 50, 0.5); border-radius: 50%; left: -15px; top: -15px; -webkit-animation: zoomIn 2s infinite ease-in-out; animation: zoomIn 2s infinite ease-in-out; ; }
.wcircle-menu { position: absolute !important; left: 0; top: 0; display: none; ; }
.wcircle-menu-item { width: 50px; height: 50px; background: var(--color-main); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; ; }
.wcircle-menu-item img { width: 50px; height: 50px; border-radius: 50%; ; }
.wcircle-menu-item i { font-size: 25px; color: #ffffff; position: relative; z-index: 9999; ; }
.wcircle-icon i { font-size: 25px; color: #ffffff; position: relative; z-index: 9999; ; }
.shake-anim { -webkit-animation: shake-anim 1s infinite ease-in-out; animation: shake-anim 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; ; }
.video-main { position: relative; height: 400px; ; }
.video-main iframe { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; ; }
.listvideos { width: 100%; height: 40px; padding: 0px 10px; border: 1px solid #ccc; color: var(--color-black); margin-top: 10px; cursor: pointer; ; }
.item-video1 img { max-height: 292px; ; }
.item-video2 img { height: 102px; ; }
.pic-video { position: relative; cursor: pointer; ; }
.pic-video:before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 50px / 2); left: calc(50% - 35px / 2); z-index: 1; background: url(../images/play.png) no-repeat center center; cursor: pointer; background-size: cover; ; }
.pic-video img { width: 100%; ; }
.pic-video-2 { position: relative; cursor: pointer; ; }
.pic-video-2:before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 50px / 2); left: calc(50% - 35px / 2); z-index: 1; background: url(../images/play.png) no-repeat center center; cursor: pointer; background-size: cover; ; }
.pic-video-2 img { width: 100%; ; }
.name-video { font-size: 16px; color: var(--color-black); margin-bottom: 0px; ; }
.owl-video { margin-top: 10px; ; }
.newshome-intro .name-newshome { margin: 10px 0; ; }
.newshome-intro .view-newshome { margin-top: 10px; ; }
.newshome-scroll { width: 50%; overflow: hidden; max-height: 406px; ; }
.news-slick { display: flex; margin-bottom: 20px; ; }
.news-slick h3 { margin: 0; ; }
.news-slick h3 a.name-newshome { margin-bottom: 10px; ; }
.news-slick .img { width: 150px; ; }
.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: 0px; ; }
.pic-newshome-normal img { width: 100%; ; }
.info-newshome-normal { float: left; width: calc(100% - 37%); ; }
.name-newshome { color: var(--color-black); font-size: 14px; line-height: normal; ; }
.name-newshome.text-split { -webkit-line-clamp: 2; ; }
.name-newshome.text-split a { color: #000; ; }
.time-newshome { color: var(--color-gray); margin-bottom: 10px; ; }
.desc-newshome { color: var(--color-black); margin-bottom: 0px; text-align: justify; ; }
.desc-home-cl.text-split { -webkit-line-clamp: 2; ; }
.view-newshome { width: 140px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; color: #000; ; }
.view-newshome:hover { color: #000; ; }
.box-product {position: relative;overflow: hidden;}
.box-product .icon { width: 80px; height: 2px; background: #333; margin: 0 auto 1rem; ; }
.color-product { position: relative; 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 #ccc; 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>') no-repeat center center; ; }
.attr-product { font-size: 14px; ; }
.pic-product { position: relative; margin-bottom: 0; overflow: hidden; ; }
.pic-product img {width: 100%;border-radius: 10px;border: 1px solid #e8e8e8;}
.product-tool { opacity: 0; visibility: hidden; position: absolute; width: 100%; left: 0px; bottom: 0px; z-index: 1; ; }
.product-tool a { cursor: pointer; width: 50%; padding: 10px; text-align: center; color: #ffffff; background-color: rgb(0 0 0 / 0.6); ; }
.product-tool a:hover { background-color: rgb(0 0 0 / 0.8); ; }
.product-tool a svg { margin-right: 5px; ; }
.product-tool a span { text-transform: capitalize; font-size: 12px; font-weight: 300; ; }
.box-product:hover .product-tool { opacity: 1; visibility: visible; ; }
.info-product {padding: 8px 0;}
.name-product {font-size: 18px;color: var(--color-black);-webkit-line-clamp: 2;font-family: var(--font-600);margin-bottom: 5px;min-height: 36px;line-height: 23px;}
.name-product:hover { color: var(--color-submain); ; }
.price-product { position: relative; margin-bottom: 0px; line-height: 1; ; }
.price-product span { position: relative; ; }
.price-new {position: relative;display: block;font-size: 18px;color: #A3A3A3;font-family: var(--font-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::before { display: none; ; }
.box-product.hot .pic-product { margin-bottom: 0px; ; }
.box-product.hot .info { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 15px 0px; background-color: rgba(105, 215, 249, 0.5); ; }
.box-product.hot .name-product, .box-product.hot .price-product, .box-product.hot .price-product .price-new { color: #fff; ; }
.product-inner .slider-index-thumbs { margin: -10px 0px; ; }
.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: 0px; margin: 0px auto; text-align: center; ; }
.price-per { color: var(--color-red); background: #eaeaea; border: 1px solid var(--color-red); font-size: 11px; border-radius: 4px; width: 40px; text-align: center; line-height: 20px; font-weight: 600; z-index: 2; ; }
.cart-product { margin-bottom: 0px; ; }
.cart-product span { cursor: pointer; width: calc(50% - 3px); color: #ffffff; text-transform: capitalize; text-align: center; padding: 7px 5px; border-radius: 3px; ; }
.cart-add { background-color: var(--color-red); ; }
.cart-add:hover { background-color: var(--color-dark-red); ; }
.cart-buy { background-color: var(--color-green); ; }
.cart-buy:hover { background-color: var(--color-dark-green); ; }
.dm-noibat { max-width: 1000px; position: relative; margin: auto; margin-bottom: 40px; ; }
.dm-noibat a { cursor: pointer; color: #333; transition: 0.4s; text-transform: capitalize; font-weight: 400; font-size: 16px; text-align: center; position: relative; display: block; background: #f7f7f7; border-radius: 5px; border: 1px solid #eaeaea; height: 100%; padding: 10px; ; }
.dm-noibat a:hover, .dm-noibat a.active { background: var(--background-static); color: #fff; ; }
.cats-bar { width: 50px; padding-top: 3px; position: relative; ; }
.cats-bar-icon { width: 30px; cursor: pointer; ; }
.cats-bar-icon span { display: block; width: 100%; height: 2px; background: #505050; transition: all 0.3s; position: relative; ; }
.cats-bar-icon span + span { margin-top: 5px; ; }
.cats-bar-icon.active span:nth-child(1) { animation: ease 0.7s top forwards; ; }
.cats-bar-icon.not-active span:nth-child(1) { animation: ease 0.7s top-2 forwards; ; }
.cats-bar-icon.active span:nth-child(2) { animation: ease 0.7s scaled forwards; ; }
.cats-bar-icon.not-active span:nth-child(2) { animation: ease 0.7s scaled-2 forwards; ; }
.cats-bar-icon.active span:nth-child(3) { animation: ease 0.7s bottom forwards; ; }
.cats-bar-icon.not-active span:nth-child(3) { animation: ease 0.7s bottom-2 forwards; ; }
@keyframes top { 0% { top: 0; transform: rotate(0); ; }
50% { top: 6px; transform: rotate(0); ; }
100% { top: 6px; transform: rotate(45deg); ; }
}
@keyframes top-2 { 0% { top: 6px; transform: rotate(45deg); ; }
50% { top: 6px; transform: rotate(0deg); ; }
100% { top: 0; transform: rotate(0deg); ; }
}
@keyframes bottom { 0% { bottom: 0; transform: rotate(0); ; }
50% { bottom: 8px; transform: rotate(0); ; }
100% { bottom: 8px; transform: rotate(135deg); ; }
}
@keyframes bottom-2 { 0% { bottom: 8px; transform: rotate(135deg); ; }
50% { bottom: 8px; transform: rotate(0); ; }
100% { bottom: 0; transform: rotate(0); ; }
}
@keyframes scaled { 50% { transform: scale(0); ; }
100% { transform: scale(0); ; }
}
@keyframes scaled-2 { 0% { transform: scale(0); ; }
50% { transform: scale(0); ; }
100% { transform: scale(1); ; }
}
.cats-owl.list-hot { width: calc(100% - 50px); ; }
.choose-list { }
.choose-list button { position: relative; cursor: pointer; display: inline-block; padding: 7px 20px 4px; margin-bottom: 10px; background-color: transparent; color: #333; font-weight: 500; font-size: 18px; border: 0px; outline: none; border-radius: 5px; transition: all 0.3s ease-in-out; ; }
.choose-list button span { position: relative; z-index: 3; font-size: 20px; ; }
.choose-list button:hover, .choose-list button.choosed { background: #71be11; color: #fff; ; }
.choose-list button.choosed::before, .choose-list button:hover::before { background-color: var(--color-main); ; }
.fancybox-tiktok-layout { width: auto !important; padding: 0; background: transparent; ; }

/* Tin tức */
.blog-flex { display: flex; flex-flow: wrap; justify-content: space-between; align-items: flex-start; } 
.blog-l { float: left; width: 46.1538461538%; line-height: 24px; } 
.blog-l-img {max-width: 100%;overflow: hidden;margin-bottom: 7px;} 
.blog-l-img a {width: 100%;transition: all 0.5s;/* border-radius:10px; */} 
.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-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-weight: 600;} 
.blog-l h3 a:hover { color: var(--color-main); } 
.blog-l p {margin: 9px 0 10px;font-weight: 400;font-size: 14px;color: #666;line-height: 18px;display: -webkit-box;-webkit-line-clamp: 4;-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: all 0.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 { line-height: 20px; font-weight: 400; font-size: 13px; color: #666; } 
.box-newsi-img {width: 104px;max-width: 36%;float: left;margin-right: 10px;} 
.box-newsi-img img {/* border-radius:10px; */} 
.box-newsi h3 {font-weight: 500;line-height: 20px;font-size: 13px;margin: 0 0 7px;padding: 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} 
.box-newsi h3 a {color: #333333;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-size: 16px;} 
.box-newsi h3 a:hover { color: var(--color-main); } 
.box-newsi-more { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } 
.blog-r  .vert .simply-scroll-list li {height: 50px !important;}


/* gird ảnh */
.gird-images {display: grid;grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 238px); grid-gap: 15px 15px;}
.box-images {position: relative; overflow: hidden;border-radius: 10px}
.box-images img { position: absolute;  width: 100%;  height: 100% !important;  object-fit: cover;  object-position: center;  left: 0;  top: 0;  transition: all 0.5s}
.box-images:nth-child(1) { grid-column: 1/3;  grid-row: 1 / 2;}
.box-images:nth-child(2) { grid-column: 3 / 5;  grid-row: 1 / 2;}
.box-images:nth-child(3) { grid-column: 5 / 7; grid-row: 1 / 2;}
.box-images:nth-child(4) { grid-column: 1 / 4; grid-row: 2 / 3;}
.box-images:nth-child(5) {  grid-column: 4 / 7;  grid-row: 2 / 3;}

.border-1 {border:1px solid}
.color-yellow {color:yellow;}

.feedback-item {background-image: url(../images/bg-feedback.png);background-size: 100% 100%;height: 328px;}
.feedback-item .desc{font-size: 18px;font-family: var(--font-500);color: #6A6A6A;height: 208px;overflow: auto;}
.feedback-item .image {width: 50px;}
.feedback-item .info {width: calc(100% - 60px)}
.feedback-item .info h4 {font-size: 18px; font-family: var(--font-600);}
.feedback-item .info p {font-size: 16px;font-family: var(--font-500);}


.feedback{ background-color: #F9F9F9;}
.accordion  {background-color: #F1F1F1;border-radius: 10px;}

.btn-view-full-content {background-color: #000; color: white !important;font-family: var(--font-600);font-size: 16px;}
.bg-xame {background-color: #F1F1F1;}

.br-l {border-left: 5px solid var(--color-main);font-size: 18px;font-family: var(--font-500); padding-left: 20px;}