511 lines
51 KiB
CSS
511 lines
51 KiB
CSS
|
:root{--color-primary:#e45702;--color-secondary:#ffae0b;--white:#fff;--black:#000;--red:#d80d0d;--blue:#138eff;--green:#40b653;--gray:#959595;--gray-2:#505050;--box-shadow:0px 1px 5px rgba(0, 0, 0, 0.3);--liner-gradient:linear-gradient(180deg, #ff7522 0%, #e45702 100%)}
|
||
|
|
html{font-size:15px}
|
||
|
|
body{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Montserrat,sans-serif;color:#505050;word-break:break-word;line-height:1.5;font-weight:400;background-color:#fff;letter-spacing:.15px}
|
||
|
|
.container{max-width:1220px;width:100%;padding:0 10px;margin:0 auto}
|
||
|
|
.box-w{border-radius:15px;background-color:#fff;padding:10px}
|
||
|
|
.box-empty{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;font-size:24px;line-height:28px;width:100%;height:430px;color:var(--red);text-align:center;grid-column:1/-1}
|
||
|
|
.alert-mess{text-align:center;padding:50px 30px;font-size:20px;font-weight:500;color:var(--red);grid-column:1/-1}
|
||
|
|
.alert-text{font-size:13px;line-height:17px;font-weight:500;color:var(--red);margin:8px 8px 0}
|
||
|
|
.alert-error{padding-left:24px;margin:16px 0;color:var(--red);font-weight:600;line-height:1.5}
|
||
|
|
.accordion-icon{position:absolute;right:10px;font-size:22px;line-height:16px;color:#505050;top:40%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}
|
||
|
|
.accordion-icon.rotate{-webkit-transform:translateY(-50%) rotate(-180deg);-ms-transform:translateY(-50%) rotate(-180deg);transform:translateY(-50%) rotate(-180deg)}
|
||
|
|
.mb-display{display:none}
|
||
|
|
.scroll-mt{scroll-margin-top:90px}
|
||
|
|
.hover-zoom-w{-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
|
||
|
|
.hover-zoom-w:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
|
||
|
|
.text-capitalize{text-transform:capitalize}
|
||
|
|
.swiper-slide{display:-ms-inline-grid;display:inline-grid;height:auto}
|
||
|
|
.swiper-btn-custom{width:40px;height:60px;background-color:rgba(217,215,214,.8);color:#333;border-radius:0 40px 40px 0;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2)}
|
||
|
|
.swiper-btn-custom:after{font-size:24px}
|
||
|
|
.swiper-btn-custom.swiper-button-next{right:0;border-radius:40px 0 0 40px}
|
||
|
|
.swiper-btn-custom.swiper-button-next::after{-webkit-transform:translate(5px,1px);-ms-transform:translate(5px,1px);transform:translate(5px,1px)}
|
||
|
|
.swiper-btn-custom.swiper-button-prev{left:0;border-radius:0 40px 40px 0}
|
||
|
|
.swiper-btn-custom.swiper-button-prev::after{-webkit-transform:translate(-3px,1px);-ms-transform:translate(-3px,1px);transform:translate(-3px,1px)}
|
||
|
|
.heading-primary{font-size:32px;line-height:50px;font-weight:600;color:#3a3734;text-transform:capitalize;margin-bottom:20px;text-align:center}
|
||
|
|
.heading-secondary{font-size:18px;line-height:24px;font-weight:700;margin-bottom:8px}
|
||
|
|
.text-primary{font-size:16px;line-height:24px}
|
||
|
|
.btn-primary{display:inline-block;font-weight:500;padding:0 18px;text-transform:uppercase;color:#fff;background:var(--liner-gradient);text-align:center}
|
||
|
|
.btn-secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;font-size:16px;font-weight:600;color:var(--color-primary);margin:16px auto 0}
|
||
|
|
.box-primary{border:1px solid #dadada;border-radius:10px;margin-bottom:12px}
|
||
|
|
.vm-btn.show-less .vm-btn-icon{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}
|
||
|
|
.my-60px{margin:60px 0}
|
||
|
|
@-webkit-keyframes dash{
|
||
|
|
0%{stroke-dashoffset:0}
|
||
|
|
100%{stroke-dashoffset:822}
|
||
|
|
}
|
||
|
|
@keyframes dash{
|
||
|
|
0%{stroke-dashoffset:0}
|
||
|
|
100%{stroke-dashoffset:822}
|
||
|
|
}
|
||
|
|
.paging{padding:0 10px 32px;margin-top:42px;text-align:center}
|
||
|
|
.paging-link.active,.paging-link:hover{color:#fff;background:var(--color-primary);font-weight:500}
|
||
|
|
.paging-link{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:8px;border-radius:50%;color:#000;font-size:16px;line-height:16px;text-decoration:none;text-transform:capitalize;width:36px;height:36px}
|
||
|
|
.routing{white-space:nowrap;overflow:auto}
|
||
|
|
.routing .list{display:-webkit-box;display:-ms-flexbox;display:flex;padding:16px 0;list-style:none}
|
||
|
|
.routing .routing-link{position:relative;font-size:14px;font-weight:400;padding:0 10px;text-decoration:none}
|
||
|
|
.routing .routing-link:first-child{padding-left:0}
|
||
|
|
.routing .routing-link:last-child{color:var(--color-primary)}
|
||
|
|
.routing .routing-link:not(:last-child)::before{content:"";position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%) rotate(25deg);-ms-transform:translateY(-50%) rotate(25deg);transform:translateY(-50%) rotate(25deg);width:1px;height:70%;border-right:1px solid #000}
|
||
|
|
.search-bar{display:none;position:absolute;top:-10px;right:0}
|
||
|
|
.search-bar .search-bar-input{width:400px;padding:12px 16px;outline:0;border:1px solid #505050;background:#fff;font-size:14px}
|
||
|
|
.search-bar .search-bar-btn{position:absolute;top:50%;right:2px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);line-height:1;padding:8px}
|
||
|
|
.search-bar .search-bar-btn i{font-size:25px}
|
||
|
|
.search-bar .search-results{display:none;border:1px solid #505050;border-top:0;background:#fff;position:absolute;top:100%;right:0;width:100%;z-index:9999;-webkit-box-shadow:0 1px 5px rgb(0 0 0 / 20%);box-shadow:0 1px 5px rgb(0 0 0 / 20%)}
|
||
|
|
.search-bar .search-results .search-results-list{max-height:300px;overflow:auto;z-index:999}
|
||
|
|
.search-bar .search-results .item{background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;padding:10px;width:100%;position:relative;text-decoration:none;font-weight:400}
|
||
|
|
.search-bar .search-results .item:hover{background:#f0f2f5}
|
||
|
|
.search-bar .search-results .img{width:60px;height:60px;background:#fff}
|
||
|
|
.search-bar .search-results .title{font-size:14px;font-weight:500;line-height:20px;color:#333;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||
|
|
.search-bar .search-results .name{line-height:18px;height:36px}
|
||
|
|
.search-bar .search-results .price{display:block;margin-top:4px;color:#ec1c24}
|
||
|
|
.search-bar .search-results .search-results-total{display:block;padding:8px;border-top:1px solid #505050;text-align:center;font-size:13px;background:#ececec}
|
||
|
|
.rating-input{float:right;width:16px;height:16px;padding:0;margin:0 0 0 -16px;opacity:0}
|
||
|
|
.rating-star:hover{background-position:0 0}
|
||
|
|
.rating-star{position:relative;float:right;display:block;width:17px;height:17px;background:url(../images/star_rating_2022.png) 0 0;margin:0 3px}
|
||
|
|
.rating-star:hover,.rating-star:hover~.rating-star{background-position:0 0}
|
||
|
|
.rating-input:checked~.rating-star,.rating-star:hover,.rating-star:hover~.rating-star{background-position:0 0}
|
||
|
|
.rating-input:checked~.rating-star,.rating:hover .rating-star:hover,.rating:hover .rating-star:hover~.rating-star{background-position:0 0}
|
||
|
|
.rating-comment:hover .rating-star,.rating-star{position:relative;float:right;display:block;background:url("../images/star_rating_2022.png?v=2.1") 0 -28px}
|
||
|
|
.rating-comment:hover .rating-star:hover,.rating-comment:hover .rating-star:hover~.rating-star{background-position:0 -56px!important}
|
||
|
|
#star_tip{display:none;margin-left:10px;position:relative;background:#e20505;color:#fff;padding:2px 8px 3px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px}
|
||
|
|
#star_tip:after{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(82,184,88,0);border-right-color:#e20505;border-width:6px;margin-top:-6px}
|
||
|
|
.icon-star{display:inline-block;width:90px;height:19px;background-image:url("../images/star_sprite.png");background-repeat:no-repeat;vertical-align:text-bottom}
|
||
|
|
.icon-star.star0{background-position:0 -108px!important}
|
||
|
|
.icon-star.star1{background-position:0 -87px!important}
|
||
|
|
.icon-star.star2{background-position:0 -65px!important}
|
||
|
|
.icon-star.star3{background-position:0 -42px!important}
|
||
|
|
.icon-star.star4{background-position:0 -21px!important}
|
||
|
|
.icon-star.star5{background-position:0 1px!important}
|
||
|
|
.global-menu-container{position:fixed;top:0;left:-100%;bottom:0;right:100%;background:#fff;z-index:9999;-webkit-transition:.5s all;-o-transition:.5s all;transition:.5s all;height:100%;overflow:auto;line-height:20px;font-size:16px;-webkit-box-shadow:0 1px 5px rgb(0 0 0 / 20%);box-shadow:0 1px 5px rgb(0 0 0 / 20%)}
|
||
|
|
.global-menu-container.active{left:0;right:0}
|
||
|
|
.global-menu-container .menu-content{border-top:1px solid #e5eaf1;border-bottom:1px solid #e5eaf1}
|
||
|
|
.global-menu-container .menu-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:16px;color:#404d5f;line-height:44px}
|
||
|
|
.global-menu-container .menu-title.active{color:var(--color-primary)}
|
||
|
|
.global-menu-container .menu-title .heading{font-size:18px}
|
||
|
|
.global-menu-container .sub-menu{display:none}
|
||
|
|
.global-menu-container .sub-item{border-top:1px solid #e5eaf1}
|
||
|
|
.global-menu-container .cat-child{display:none;background:#f5f8fd;border-top:1px solid #e5eaf1}
|
||
|
|
.global-menu-container .cat-child .menu-title{margin-left:16px}
|
||
|
|
.global-menu-container .cat-child-2{background:#dfebff}
|
||
|
|
.global-menu-container .cat-child-2 .sub-item{border-top:1px solid #d2dbe7}
|
||
|
|
.global-menu-container .cat-child-2 .cat-icon{border-color:#d2dbe7}
|
||
|
|
.global-menu-container .cat-child-3{background:#b8d3ff}
|
||
|
|
.global-menu-container .cat-title{-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||
|
|
.global-menu-container .cat-thumb{width:24px;height:24px;margin-right:12px;background-repeat:no-repeat;background-position:center;background-size:24px;-webkit-filter:grayscale(1);filter:grayscale(1)}
|
||
|
|
.global-menu-container .cat-icon{width:44px;line-height:44px;text-align:center;border-left:1px solid #e5eaf1}
|
||
|
|
.global-menu-container .cat-icon i{-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}
|
||
|
|
.global-menu-container .cat-icon.active i{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
|
||
|
|
.global-menu-container .menu-support .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px 16px;min-height:40px}
|
||
|
|
.global-menu-container .fa-icon{width:24px;font-size:22px;margin-right:12px;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}
|
||
|
|
.viccos-icons{background-image:url(../images/viccos-icon-map.png);background-repeat:no-repeat;display:inline-block;background-size:333px 136px}
|
||
|
|
.icon-angle-down-primary{width:10.5px;height:6.5px;background-position:-2.5px -2.5px}
|
||
|
|
.icon-arrow-circle-o-right-primary{width:24.5px;height:24.5px;background-position:-18px -2.5px}
|
||
|
|
.icon-arrow-right{width:27px;height:15px;background-position:-47.5px -2.5px}
|
||
|
|
.icon-caret-down{width:10.5px;height:5.5px;background-position:-79.5px -2.5px}
|
||
|
|
.icon-caret-right-primary{width:8.5px;height:16.5px;background-position:-95px -2.5px}
|
||
|
|
.icon-check-green{width:16px;height:16px;background-position:-108.5px -2.5px}
|
||
|
|
.icon-check-green.out-stock{-webkit-filter:invert(51%) sepia(98%) saturate(7477%) hue-rotate(1deg) brightness(100%) contrast(80%);filter:invert(51%) sepia(98%) saturate(7477%) hue-rotate(1deg) brightness(100%) contrast(80%)}
|
||
|
|
.icon-clock{width:24.5px;height:24.5px;background-position:-129.5px -2.5px}
|
||
|
|
.icon-location-primary{width:31.5px;height:45.5px;background-position:-2.5px -32px}
|
||
|
|
.icon-location-primary-2{width:10.5px;height:14.5px;background-position:-39px -32px}
|
||
|
|
.icon-quote-primary{width:54.5px;height:34.5px;background-position:-54.5px -32px}
|
||
|
|
.icon-review-star-primary{width:32px;height:30.5px;background-position:-114px -32px}
|
||
|
|
.icon-review-star-yellow{width:13px;height:12.5px;background-position:-151px -32px}
|
||
|
|
.icon-scroll-top-1{width:40px;height:40px;background-position:-114px -67.5px}
|
||
|
|
.icon-search{width:20.5px;height:21px;background-position:-2.5px -112.5px}
|
||
|
|
.icon-special-offer-title-red{width:161px;height:44.5px;background-position:-169px -2.5px}
|
||
|
|
.icon-star-red{width:34px;height:32.5px;background-position:-160px -52px}
|
||
|
|
.icon-view-video{width:100.5px;height:51px;background-position:-198px -52px}
|
||
|
|
.p-item{font-size:14px;line-height:25px;padding:15px 13px;background:#fff;border:1px solid #ededed;border-radius:10px}
|
||
|
|
.p-item .p-img{border-radius:10px;overflow:hidden}
|
||
|
|
.p-item .p-img .hover-thumbs:first-child{opacity:0}
|
||
|
|
.p-item .p-img:hover .hover-thumbs:first-child{opacity:1}
|
||
|
|
.p-item .p-img:hover .hover-thumbs:nth-child(2){opacity:0}
|
||
|
|
.p-item .p-img:hover .hover-zoom{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
|
||
|
|
.p-item .p-pic{-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
|
||
|
|
.p-item .p-name{font-size:18px;font-weight:700;margin-top:8px;min-height:50px;o-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
|
||
|
|
.p-item .p-name:hover{color:var(--color-primary)}
|
||
|
|
.p-item .p-quantity{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px}
|
||
|
|
.p-list.style-list .p-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:16px;padding:12px;border-radius:15px;margin-bottom:12px}
|
||
|
|
.p-list.style-list .p-item .p-img{max-width:104px;width:100%;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:15px}
|
||
|
|
.p-list.style-list .p-item .p-name{margin-top:0;font-size:16px;line-height:22px;min-height:0;-webkit-line-clamp:1}
|
||
|
|
.p-list.style-list .p-item .p-content{-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||
|
|
.p-list.style-list .p-item .p-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
|
||
|
|
.global-header{position:sticky;top:0;z-index:99;background:#fff;-webkit-box-shadow:0 0 7px 0 rgba(130,130,130,.25);box-shadow:0 0 7px 0 rgba(130,130,130,.25)}
|
||
|
|
.global-header .row{height:80px}
|
||
|
|
.global-header .header-logo .logo{max-height:42px}
|
||
|
|
.global-header .header-navbar .list-item{position:relative}
|
||
|
|
.global-header .header-navbar .p-submenu{visibility:hidden;position:absolute;opacity:0;top:71px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background:#fff;padding:16px;width:280px;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.3);box-shadow:0 1px 5px rgba(0,0,0,.3);border-top:3px solid var(--color-primary);-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}
|
||
|
|
.global-header .header-navbar .p-submenu::after{content:"";position:absolute;top:-40px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:280px;height:50px}
|
||
|
|
.global-header .header-navbar .list-item:hover .p-submenu{visibility:visible;opacity:1;top:51px}
|
||
|
|
.global-header .header-navbar .p-submenu-list{line-height:2}
|
||
|
|
.global-footer .footer-line{height:4px;background:var(--liner-gradient)}
|
||
|
|
.global-footer .footer-title{font-size:18px;line-height:32px}
|
||
|
|
.global-footer .f-col .title{position:relative;font-size:15px;line-height:26px;font-weight:700;color:var(--color-primary);padding-bottom:4px;margin-bottom:10px}
|
||
|
|
.global-footer .f-col .title::after{content:"";position:absolute;bottom:0;left:0;width:50%;height:1px;background:#ededed}
|
||
|
|
.global-footer .f-col .list{font-size:13px;line-height:24px}
|
||
|
|
.global-footer .f-col .list a:hover{color:var(--color-primary)}
|
||
|
|
.global-footer .f-col .list .icon-location-primary-2{margin-top:3px}
|
||
|
|
.global-footer .copyright{font-size:14px;line-height:32px;background:#c6c6c6;text-align:center}
|
||
|
|
.homepage .section-hero{min-height:300px}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-content{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-title{font-size:40px;line-height:56px;font-weight:800;text-transform:capitalize;max-width:50%}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-summary{font-size:24px;line-height:30px;margin:12px 0 24px;max-width:70%}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-btn{font-size:18px;line-height:50px;border-radius:0 15px 15px 15px}
|
||
|
|
.homepage .section-hero .swiper-section-hero .swiper-pagination-bullet{width:16px;height:16px;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;background:#fff;opacity:.5}
|
||
|
|
.homepage .section-hero .swiper-section-hero .swiper-pagination-bullet-active{width:80px;border-radius:16px;background:#fff;opacity:1}
|
||
|
|
.homepage .section-profile .about-us .au-title{text-align:left}
|
||
|
|
.homepage .section-profile .certificate{background-repeat:no-repeat;background-size:cover;padding-bottom:120px}
|
||
|
|
.homepage .section-profile .certificate .certificate-btn::after{font-size:32px;color:#333}
|
||
|
|
.homepage .section-category-featured{padding-bottom:60px}
|
||
|
|
.homepage .section-category-featured .cat-item{color:#272727;background:#fbf4e6;padding:18px;border-radius:15px;text-align:center}
|
||
|
|
.homepage .section-category-featured .cat-img{padding-bottom:74%;border-radius:13px;overflow:hidden}
|
||
|
|
.homepage .section-category-featured .cat-title{font-size:20px;line-height:32px;font-weight:700;text-transform:capitalize}
|
||
|
|
.homepage .section-category-featured .cat-container:nth-child(2n+2) .cat-item{background:#fafaf0}
|
||
|
|
.homepage .section-category-featured .cat-container:nth-child(3n+3) .cat-item{background:#fcf5f3}
|
||
|
|
.homepage .section-features{background:#f8f6f6;padding:36px 0}
|
||
|
|
.homepage .section-features .f-slider-group{position:absolute;top:0;right:0}
|
||
|
|
.homepage .section-features .f-slider-group .f-slider-btn{width:50px;height:50px;background:#fff;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}
|
||
|
|
.homepage .section-features .f-slider-group .f-slider-btn.btn-prev{background:var(--color-primary)}
|
||
|
|
.homepage .section-features .f-slider-group .f-slider-btn.btn-prev .icon-arrow-right{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}
|
||
|
|
.homepage .section-features .f-item{padding:14px;border-radius:15px;background:#fff;-webkit-box-shadow:0 0 8px 0 rgba(149,149,149,.25);box-shadow:0 0 8px 0 rgba(149,149,149,.25)}
|
||
|
|
.homepage .section-features .f-img{border-radius:13px;overflow:hidden}
|
||
|
|
.homepage .section-article-featured .article-featured-link{border:1px solid var(--color-primary);border-radius:5px;color:var(--color-primary);background:#fff;font-size:16px;line-height:32px;font-weight:500;padding:0 12px}
|
||
|
|
.homepage .section-article-featured .article-featured-link:hover{background:var(--color-primary);color:#fff}
|
||
|
|
.homepage .section-article-featured .article-featured-link:hover .icon-caret-right-primary{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}
|
||
|
|
.homepage .section-article-featured .a-img{padding-bottom:61%;border-radius:15px;overflow:hidden}
|
||
|
|
.homepage .section-article-featured .a-title{font-size:20px;line-height:24px;font-weight:600}
|
||
|
|
.homepage .section-map .map{position:relative}
|
||
|
|
.homepage .section-map .map .line,.homepage .section-map .map .location{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
|
||
|
|
.homepage .section-map .map .line svg{position:absolute;width:auto;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation:28s linear 0s infinite alternate none running dash;animation:28s linear 0s infinite alternate none running dash}
|
||
|
|
.homepage .section-map .map .line svg:first-child{top:35%;left:28%;height:34%}
|
||
|
|
.homepage .section-map .map .line svg:nth-child(2){top:51%;left:22%;height:67%}
|
||
|
|
.homepage .section-map .map .line svg:nth-child(3){top:69%;left:28%;height:33%}
|
||
|
|
.homepage .section-map .map .location{pointer-events:all}
|
||
|
|
.homepage .section-map .map .location .name{position:absolute;width:auto;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;text-align:center;font-weight:700;font-size:18px;text-transform:uppercase}
|
||
|
|
.homepage .section-map .map .location .name i{-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
|
||
|
|
.homepage .section-map .map .location .name:hover i{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
|
||
|
|
.homepage .section-map .map .location .name.hn{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;top:15.6%;left:23.8%}
|
||
|
|
.homepage .section-map .map .location .name.dn{top:50%;left:30.6%}
|
||
|
|
.homepage .section-map .map .location .name.hcm{top:84%;left:26.5%}
|
||
|
|
.homepage .section-map .map .location .text{position:absolute;top:80%;left:115%;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:default}
|
||
|
|
.homepage .section-map .map .promos{position:absolute;top:50%;right:15%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#2e2e2e;text-align:center}
|
||
|
|
.homepage .section-map .map .promos .promos-item .number{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:60px;font-weight:700;line-height:66px;color:#2e2e2e}
|
||
|
|
.homepage .section-map .map .promos .promos-item .number::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#2e2e2e}
|
||
|
|
.homepage .section-map .map .promos .promos-item .number span{font-size:40px;line-height:66px;font-weight:900}
|
||
|
|
.homepage .section-map .map .promos .promos-item .title{font-size:24px;line-height:48px;font-weight:500}
|
||
|
|
.homepage .section-partners .list{row-gap:16px}
|
||
|
|
.homepage .section-partners .list .item img{max-height:50px}
|
||
|
|
.homepage .section-customer .c-item{padding:40px 22px 28px;border-radius:15px;background:#fff;-webkit-box-shadow:0 0 6px 0 rgba(176,176,176,.25);box-shadow:0 0 6px 0 rgba(176,176,176,.25)}
|
||
|
|
.homepage .section-customer .c-avatar{display:inline-block;width:68px;height:68px;background-repeat:no-repeat;background-size:100% 100%}
|
||
|
|
.homepage .section-customer .c-review{min-height:96px}
|
||
|
|
.homepage .section-customer .swiper-section-customer .swiper-pagination-bullet{width:12px;height:12px;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;background:#a9a9a9}
|
||
|
|
.homepage .section-customer .swiper-section-customer .swiper-pagination-bullet-active{width:60px;border-radius:12px;background:var(--color-primary)}
|
||
|
|
.homepage .section-contact{background-repeat:no-repeat;background-size:cover;background-position:center}
|
||
|
|
.homepage .section-contact .ct-btn{border-radius:10px;font-size:16px;line-height:40px}
|
||
|
|
.product-page .product-sort .list .item{display:inline-block;padding:6px 12px;font-weight:600;color:var(--color-primary);background:#fff;border:1px dashed var(--color-primary);border-radius:3px}
|
||
|
|
.product-page .product-sort .list .item.active,.product-page .product-sort .list .item:hover{background:var(--liner-gradient);color:#fff}
|
||
|
|
.product-page .product-sort .list .item.active{pointer-events:none}
|
||
|
|
.product-page .box-secondary .box-title{background:#d71c31;font-size:16px;text-align:center;color:#fff;padding:10px;text-transform:uppercase;margin-bottom:0;font-weight:700;margin-top:0}
|
||
|
|
.product-page .box-secondary .box-list{border:1px solid #ededed}
|
||
|
|
.product-page .box-secondary .box-list .p-item{border:0;border-radius:0;margin-bottom:0}
|
||
|
|
.product-page .box-secondary .box-list .p-item:not(:last-child){border-bottom:1px solid #ededed}
|
||
|
|
.product-detail-page .pro-thumbs .gallery-top .swiper-slide{border-radius:15px;overflow:hidden}
|
||
|
|
.product-detail-page .pro-thumbs .gallery-top .pro-video-gallery iframe{width:100%;height:inherit}
|
||
|
|
.product-detail-page .pro-thumbs .gallery-thumbs .swiper-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box}
|
||
|
|
.product-detail-page .pro-thumbs .gallery-thumbs .swiper-slide{border:1px solid transparent;border-radius:10px;overflow:hidden}
|
||
|
|
.product-detail-page .pro-thumbs .gallery-thumbs .swiper-slide-thumb-active{border-color:var(--color-primary)}
|
||
|
|
.product-detail-page .pro-thumbs .gallery-thumbs .swiper-btn-custom{width:24px;height:36px}
|
||
|
|
.product-detail-page .pro-thumbs .gallery-thumbs .swiper-btn-custom::after{font-size:17px}
|
||
|
|
.product-detail-page .pro-thumbs .pro-video-thumbs-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2)}
|
||
|
|
.product-detail-page .pro-name{font-size:20px;line-height:24px;font-weight:700}
|
||
|
|
.product-detail-page .pro-subtitle{border-bottom:1px solid #d9d9d9}
|
||
|
|
.product-detail-page .pro-subtitle .item{position:relative}
|
||
|
|
.product-detail-page .pro-subtitle .item:not(:last-child):after{content:"|";position:absolute;top:44%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:-14px;width:4px;font-size:14px;line-height:1;text-align:center;color:#d9d9d9}
|
||
|
|
.product-detail-page .pro-price{padding:12px 18px 16px;background:#f4f4f4;border-radius:10px}
|
||
|
|
.product-detail-page .pro-price-sale{color:#7e7e7e}
|
||
|
|
.product-detail-page .pro-buy-btn{display:block;border-radius:10px;font-size:24px;line-height:58px;font-weight:700}
|
||
|
|
.product-detail-page .pro-special-offer{position:relative;border-color:#b20d0d;padding:60px 16px 16px 10px}
|
||
|
|
.product-detail-page .pro-special-offer .pro-special-offer-title{position:absolute;top:10px;left:-7px}
|
||
|
|
.product-detail-page .pro-description .static-html{max-height:700px}
|
||
|
|
.product-detail-page .pro-spec{padding:16px 14px 16px 16px}
|
||
|
|
#fancybox-spec table,.product-detail-page .pro-spec table{border-collapse:collapse;border:0;border-radius:10px;overflow:hidden;width:100%}
|
||
|
|
#fancybox-spec table *,.product-detail-page .pro-spec table *{border:0}
|
||
|
|
#fancybox-spec table tr:nth-child(odd),.product-detail-page .pro-spec table tr:nth-child(odd){background:#f3f3f3}
|
||
|
|
#fancybox-spec table td,.product-detail-page .pro-spec table td{padding:10px}
|
||
|
|
#fancybox-spec table td:first-child,.product-detail-page .pro-spec table td:first-child{width:35%;padding-right:0}
|
||
|
|
#fancybox-spec table td:last-child,.product-detail-page .pro-spec table td:last-child{width:65%}
|
||
|
|
.product-detail-page .pro-customer .pro-customer-btn{font-size:14px;line-height:32px;font-weight:700;border-radius:5px;text-transform:inherit;padding:0 24px}
|
||
|
|
.product-detail-page .pro-customer .pro-customer-comment .comment-form{padding:0;border:0;border-radius:0;border-top:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3}
|
||
|
|
.product-detail-page .customer-rating .rating-top{padding:12px;border-top:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3}
|
||
|
|
.product-detail-page .customer-rating .box-rating-left{font-weight:300;font-size:32px;line-height:1;color:var(--color-primary)}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .name{color:#ffae0b;width:26px;text-align:right}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .ul{border-left:1px solid #f3f3f3}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .li{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;white-space:nowrap;font-size:14px;line-height:22px}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .line-rating{-webkit-box-flex:1;-ms-flex:1;flex:1;background:#d9d9d9;border-radius:3px;max-width:290px;width:100%;height:8px;margin:0 24px;position:relative;overflow:hidden}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .count{min-width:80px;text-align:center}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .percent{position:absolute;left:0;top:0;bottom:0;background:var(--color-secondary);border-radius:3px}
|
||
|
|
.product-detail-page .customer-form{display:none;padding:24px;border:1px solid #e1e1e1;border-radius:15px}
|
||
|
|
.product-detail-page .customer-form .customer-form-item{margin-bottom:12px}
|
||
|
|
.product-detail-page .customer-form .customer-form-item .r-input{background:#fff;border:1px solid #d9d9d9;border-radius:10px;height:42px;width:100%;font-size:14px;line-height:18px;padding:10px;outline-color:var(--color-primary)}
|
||
|
|
.product-detail-page .customer-form .customer-form-item textarea.r-input{height:106px;resize:none}
|
||
|
|
.product-detail-page .customer-form .customer-form-btn{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;width:212px;height:42px;background:var(--color-primary);border-radius:10px;font-size:16px;font-weight:700;color:#fff}
|
||
|
|
.product-detail-page .customer-form-reply{position:relative}
|
||
|
|
.product-detail-page .customer-form-reply::before{content:"";top:-12px;left:13px;position:absolute;width:0;height:0;border-style:solid;border-width:0 8px 12px 8px;border-color:transparent transparent #e1e1e1 transparent}
|
||
|
|
.product-detail-page .customer-form-reply::after{content:"";top:-11px;left:13px;position:absolute;width:0;height:0;border-style:solid;border-width:0 8px 14px 8px;border-color:transparent transparent #fff transparent}
|
||
|
|
.product-detail-page .customer-respond-item{width:100%;padding:10px 0;line-height:18px}
|
||
|
|
.product-detail-page .customer-respond-item .avatar{width:36px;height:36px;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;background:#ccc;border-radius:5px;font-weight:700}
|
||
|
|
.product-detail-page .customer-respond-item .avatar-name{width:12px;overflow:hidden;white-space:nowrap;font-size:16px;font-weight:700;text-transform:uppercase}
|
||
|
|
.product-detail-page .customer-respond-reply{padding:10px 12px;background:#f0f0f0;padding:10px;border-radius:10px;margin-top:10px;position:relative}
|
||
|
|
.product-detail-page .customer-respond-reply::after{content:"";position:absolute;top:-10px;left:15px;width:15px;height:10px;background:#f0f0f0;-webkit-clip-path:polygon(50% 0%,0% 100%,100% 100%);clip-path:polygon(50% 0%,0% 100%,100% 100%)}
|
||
|
|
.product-detail-page .section-pro-history{margin:52px 0}
|
||
|
|
.article-page .article-list .art-item{background:#fff}
|
||
|
|
.article-page .article-list .art-img{padding-bottom:62%}
|
||
|
|
.article-page .article-list .art-title{font-weight:700;font-size:16px;line-height:22px;margin-bottom:8px}
|
||
|
|
.article-page .article-list .summary{min-height:47px}
|
||
|
|
.article-page .article-list .art-view{color:var(--color-primary);font-size:14px;margin-top:15px;font-weight:700}
|
||
|
|
.article-page .article-list .art-view i{padding-left:4px;-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}
|
||
|
|
.article-page .article-list .art-item img{width:100%;-o-object-fit:cover;object-fit:cover}
|
||
|
|
.article-page .article-list .art-youtube-icon{position:absolute;width:80px;height:57px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-repeat:no-repeat}
|
||
|
|
.article-page .pd-tabs-container{margin-bottom:20px}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs{border:0;border-radius:7px;overflow:hidden}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs li{margin:0 5px 0 0;float:left;border-radius:7px}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs li:first-child a::before{left:-22px!important;right:0!important}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs a{font-size:18px;font-weight:700;color:#fff;display:block;position:relative;padding:12px 28px;text-transform:uppercase}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs a::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#707070;-webkit-transform:skew(23deg,0deg);-ms-transform:skew(23deg,0deg);transform:skew(23deg,0deg);border-radius:7px;z-index:-1}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs a.active{color:#fff}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs a.active::before{background:var(--color-primary)}
|
||
|
|
.article-page .pd-tabs-container .tab-content{display:none}
|
||
|
|
.article-page .pd-tabs-container .tab-content.current{display:block}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs-holder{margin:20px 0 40px 0}
|
||
|
|
.article-page .time-holder{font-size:14px;text-align:center;padding:6px 0;margin:12px 0;border-top:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3}
|
||
|
|
.article-page .time{color:#999;position:relative;display:inline-block;padding-left:24px;line-height:1.4}
|
||
|
|
.article-page .time::before{content:"";display:inline-block;position:absolute;top:0;left:0;bottom:0;background-image:url(../images/viccos-icon-map.png);background-repeat:no-repeat;background-size:240px 90px;width:18.5px;height:18.5px;background-position:-92.5px .5px}
|
||
|
|
.article-page .cat-title{font-weight:700;font-size:24px;text-transform:uppercase;position:relative;padding-bottom:10px;margin-bottom:25px}
|
||
|
|
.article-page .cat-title::after{content:"";position:absolute;bottom:0;border-bottom:2px solid var(--color-primary);width:56px;left:0}
|
||
|
|
.article-page .article-showcase .big-art .item::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2);-webkit-transition:.2s all;-o-transition:.2s all;transition:.2s all}
|
||
|
|
.article-page .article-showcase .big-art .item:hover::before{-webkit-transition:.2s all;-o-transition:.2s all;transition:.2s all;background:0}
|
||
|
|
.article-page .article-showcase .big-art .image{padding-bottom:61%}
|
||
|
|
.article-page .article-showcase .big-art .image img{width:100%;-o-object-fit:cover;object-fit:cover}
|
||
|
|
.article-page .article-showcase .big-art .content{position:absolute;bottom:25px;left:20px;right:10px;color:#fff;text-shadow:1px 1px #000}
|
||
|
|
.article-page .article-showcase .big-art .art-title{font-size:30px;font-weight:500;line-height:1.2}
|
||
|
|
.article-page .article-showcase .big-art .time{color:#fff}
|
||
|
|
.article-page .col-right{position:sticky;top:90px}
|
||
|
|
.article-page .col-right .cat-title{font-size:20px;margin-bottom:7px}
|
||
|
|
.article-page .col-right .item{padding:18px 0;border-top:1px solid #ebebeb}
|
||
|
|
.article-page .col-right .item::after{content:"";display:block;clear:both}
|
||
|
|
.article-page .col-right .item:first-child{border:0}
|
||
|
|
.article-page .col-right .art-img{float:left;width:115px;margin-right:10px;padding-bottom:0}
|
||
|
|
.article-page .col-right .art-text{float:left;width:calc(100% - 127px)}
|
||
|
|
.article-page .col-right .art-title{line-height:1.2!important;font-size:14px}
|
||
|
|
.article-page .col-right .big-item .art-img{margin:0 0 15px 0;padding-bottom:0;width:100%}
|
||
|
|
.article-page .col-right .big-item .art-text{width:100%}
|
||
|
|
.article-page .col-right .big-item .art-title{display:block;font-size:16px;margin-bottom:0;height:auto}
|
||
|
|
.article-page .col-right .pro-related-container{margin-top:35px}
|
||
|
|
.article-page .article-detail .art-related{padding:40px 0 25px 0}
|
||
|
|
.article-page .article-detail .art-detail-title{font-weight:700;font-size:24px;margin:22px 0 17px 0}
|
||
|
|
.article-page.article-category .article-list.grid{row-gap:20px}
|
||
|
|
.article-page .archor-text-group{display:inline-block;background:#f1f1f1;border-radius:10px;padding:15px;margin-bottom:15px}
|
||
|
|
.article-page .archor-text-group .toc_title{display:inline-block;cursor:pointer;font-size:16px}
|
||
|
|
.article-page .archor-text-group ul{padding:0!important;margin:0!important}
|
||
|
|
.article-page .archor-text-group a{color:#000}
|
||
|
|
.article-page .archor-text-group li *{font-size:14px!important;font-weight:700}
|
||
|
|
.article-page .archor-text-group a:hover{color:red}
|
||
|
|
.article-page .archor-text-group a p{margin-bottom:0}
|
||
|
|
.article-page .archor-text-group ol{margin-bottom:0;list-style:none;padding:0}
|
||
|
|
.article-page .archor-text-group ol li{margin-top:4px}
|
||
|
|
.article-page #js-outp li{display:table;counter-increment:item;margin-bottom:4px}
|
||
|
|
.article-page #js-outp ol{list-style-type:none;counter-reset:item;margin:0;padding:0!important;font-weight:400}
|
||
|
|
.article-page #js-outp li:before{width:28px;content:counters(item, ".") ". ";display:table-cell;font-weight:700;color:#363636!important}
|
||
|
|
.contact-page .contact-form-group{line-height:40px}
|
||
|
|
.contact-page .contact-form-group .form-control{line-height:19px;width:100%;border:1px solid #ced4da;border-radius:5px;margin:8px 0;padding:10px}
|
||
|
|
.contact-page .contact-form-group .col-form-label{margin:8px 0;font-size:14px;font-weight:500}
|
||
|
|
.contact-page .contact-form-group .btn{border-radius:5px}
|
||
|
|
.contact-page .alert-text{margin:0 8px}
|
||
|
|
.brand-page .main-brand{background-color:#fff;padding:15px 0}
|
||
|
|
.brand-page .main-brand .title{font-size:20px;color:#111;font-weight:600;line-height:32px;text-transform:uppercase;display:inline-block;position:relative}
|
||
|
|
.brand-page .main-brand .title::after{content:'';position:absolute;border-bottom:2px solid #111;width:100%;bottom:-2px;left:0}
|
||
|
|
.brand-page .main-brand .featured-brand ul{padding:50px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
|
||
|
|
.brand-page .main-brand .featured-brand ul li{-webkit-box-flex:0;-ms-flex:0 0 calc(100% / 8);flex:0 0 calc(100% / 8);max-width:calc(100% / 8)}
|
||
|
|
.brand-page .main-brand .brand-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
|
||
|
|
.brand-page .main-brand .brand-list ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-preferred-size:0;flex-basis:0%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;gap:24px}
|
||
|
|
.brand-page .main-brand .brand-list ul li{-ms-flex-preferred-size:0;flex-basis:0%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
|
||
|
|
.brand-page .main-brand .brand-list ul li a{display:inline-block;font-size:22px;margin:0 0 10px 0}
|
||
|
|
.brand-page .main-brand .brand-item{padding:25px 0}
|
||
|
|
.brand-page .main-brand .brand-list ul li a:hover{color:var(--color-primary)}
|
||
|
|
.brand-page .main-brand .brand-item .smallTitle{border-bottom:1px solid #e1e1e1;display:block;font-size:22px;font-weight:700;padding:0 0 10px 0;border-bottom:1px solid #ececec;margin-bottom:20px}
|
||
|
|
.brand-page .main-brand .brand-item ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:15px;-ms-flex-wrap:wrap;flex-wrap:wrap}
|
||
|
|
.brand-page .main-brand .brand-item ul li{max-width:calc(100% / 6 - 10px);margin-right:10px;text-align:center}
|
||
|
|
.customer-page .page-title::after{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
|
||
|
|
.customer-page .customer-content-group{max-width:600px;margin:20px auto 48px;background:#fff;padding:20px}
|
||
|
|
.customer-page .customer-content-title{text-align:center;font-size:18px;font-weight:600}
|
||
|
|
.customer-page .customer-content-title a{color:#222}
|
||
|
|
.customer-page .customer-content-title a:first-child{margin-right:16px}
|
||
|
|
.customer-page .customer-content-title a.current,.customer-page .customer-content-title a:hover{color:var(--color-primary);border-bottom:1px solid var(--color-primary)}
|
||
|
|
.customer-page .customer-form .item{margin-top:20px}
|
||
|
|
.customer-page .customer-form .item input{display:block;width:100%;border:1px solid #d7d7d7;padding:10px;height:40px;margin-top:5px;font-size:16px}
|
||
|
|
.customer-page .customer-form .item span{color:#d91605}
|
||
|
|
.customer-page .customer-form .item p{font-size:14px;font-weight:400}
|
||
|
|
.customer-page .btn-customer{display:inline-block;height:40px;line-height:40px;font-weight:500;background:var(--color-primary);color:#fff;padding:0 16px}
|
||
|
|
.customer-page .btn-customer:hover{opacity:.8;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.3);box-shadow:0 1px 5px rgba(0,0,0,.3)}
|
||
|
|
.customer-page .password-input{position:relative}
|
||
|
|
.customer-page .show-pass{position:absolute;top:13px;right:10px}
|
||
|
|
.customer-page .forgot-password{display:block;text-align:right;color:#208ce8;margin:8px 0 0;font-size:14px}
|
||
|
|
.customer-page .forgot-password-content{max-width:800px;padding-top:50px;margin:0 auto}
|
||
|
|
.customer-page .forgot-password-content h2{font-size:24px;font-weight:600;margin-bottom:8px}
|
||
|
|
.customer-page .forgot-password-content p{font-size:15px;margin-bottom:20px}
|
||
|
|
.customer-page .forgot-password-content table{width:100%}
|
||
|
|
.customer-page .forgot-password-content input{width:100%;padding:8px;font-size:18px;border-radius:5px;outline:0;border:1px solid var(--color-primary)}
|
||
|
|
.customer-page .forgot-password-content td:first-child{font-size:15px}
|
||
|
|
.customer-page .btn-forgot-password{display:block;width:50%;margin:30px auto}
|
||
|
|
.account-page .account{padding:30px 0;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;font-size:16px}
|
||
|
|
.account-page .account .col-left{border-right:1px solid #f5f5f5}
|
||
|
|
.account-page .account .left-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 60px 20px 0;width:220px}
|
||
|
|
.account-page .account .left-title span{font-size:16px;font-weight:400}
|
||
|
|
.account-page .account .left-title p{font-size:18px;margin-top:4px}
|
||
|
|
.account-page .account .title-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px}
|
||
|
|
.account-page .account .title-list a{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px 14px}
|
||
|
|
.account-page .account .title-list a:hover{background-color:#f5f5f5}
|
||
|
|
.account-page .account .col-right{padding:10px;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||
|
|
.account-page .account .col-right h2{font-size:22px;font-weight:600;margin-bottom:16px}
|
||
|
|
.account-page .info-page table{max-width:520px;width:100%}
|
||
|
|
.account-page .account .col-right .form-input{width:100%;padding-left:13px;border-radius:5px;border:1px solid #e1e1e1;height:38px;margin-bottom:8px}
|
||
|
|
.account-page .btn-change{padding:10px 20px;border:none;background-color:#ee2d24;color:#fff;border-radius:5px;font-size:16px;cursor:pointer}
|
||
|
|
.account-page .order-page table{font-size:16px;width:100%}
|
||
|
|
.account-page .order-page td{padding:10px;border:1px solid #ccc}
|
||
|
|
.account-page .red-bold{color:#d91605;font-weight:600}
|
||
|
|
.account-page .send-cart-info{padding:20px 15px;margin-top:12px;background:#f2f2f2;font-weight:300}
|
||
|
|
.account-page .send-cart-info p{margin-bottom:16px;width:100%}
|
||
|
|
.account-page .send-cart-info b{font-weight:700;width:200px;display:inline-block}
|
||
|
|
.account-page .send-cart-info span{width:calc(100% - 200px)}
|
||
|
|
.account-page .send-cart-detail-product{margin-top:15px;-webkit-box-shadow:0 0 5px 0 rgb(0 0 0 / 20%);box-shadow:0 0 5px 0 rgb(0 0 0 / 20%);border:1px solid #dee2e6!important}
|
||
|
|
.account-page .send-cart-product-title{padding:20px 15px;font-size:18px;font-weight:600;text-transform:uppercase;border-bottom:1px solid #dee2e6}
|
||
|
|
.account-page .send-cart-product-info{display:-webkit-box;display:-ms-flexbox;display:flex;padding:15px;width:100%;border-bottom:1px solid #dee2e6}
|
||
|
|
.account-page .send-cart-item-left{width:82px;margin-right:8px;text-align:center}
|
||
|
|
.account-page .send-cart-item-left img{width:100%}
|
||
|
|
.account-page .send-cart-item-center a{font-size:14px;font-weight:600;color:#222;text-decoration:none}
|
||
|
|
.account-page .send-cart-item-center{max-width:1000px;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||
|
|
.account-page .send-cart-item-right{text-align:right;line-height:20px;margin-left:8px}
|
||
|
|
.account-page .new-price{font-size:18px;color:#d60000;font-weight:700}
|
||
|
|
.account-page .old-price{font-size:16px;color:#888;text-decoration:line-through}
|
||
|
|
.account-page .number-item{font-weight:700;font-size:12px}
|
||
|
|
.account-page .total-item{color:#d91605;font-size:16px;font-weight:700}
|
||
|
|
.account-page .send-cart-total{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;padding:15px}
|
||
|
|
.account-page .send-cart-total p:first-child{font-size:16px;font-weight:700}
|
||
|
|
.account-page .again-cart{display:block;text-decoration:none;padding:22px 0 60px;text-align:center;color:#d60000;font-weight:600;font-size:22px;text-transform:uppercase}
|
||
|
|
.fixed-contact-group{position:fixed;bottom:10%;right:20px;z-index:99}
|
||
|
|
@media (max-width:1024px){
|
||
|
|
.search-bar{top:-5px}
|
||
|
|
.global-header .header-search{margin:0!important;padding:6px}
|
||
|
|
.global-header .header-navbar .list{font-size:16px}
|
||
|
|
.global-header .header-language select{font-size:16px}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-title{font-size:32px;line-height:42px}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-summary{font-size:20px;line-height:24px}
|
||
|
|
.homepage .section-map .map .promos .promos-item:not(:last-child){margin-bottom:16px!important}
|
||
|
|
.homepage .section-map .map .promos .promos-item .number{font-size:40px;line-height:50px}
|
||
|
|
.homepage .section-map .map .promos .promos-item .number span{font-size:30px;line-height:50px}
|
||
|
|
.homepage .section-map .map .promos .promos-item .title{font-size:18px;line-height:36px}
|
||
|
|
}
|
||
|
|
@media (max-width:768px){
|
||
|
|
html{font-size:14px}
|
||
|
|
.m-mb-0{margin:0!important}
|
||
|
|
.p-mb-0{padding:0!important}
|
||
|
|
.pc-display{display:none}
|
||
|
|
.mb-display{display:inline-block}
|
||
|
|
.page-padding{padding-top:0}
|
||
|
|
.scroll-mt{scroll-margin-top:10px}
|
||
|
|
.heading-primary{font-size:28px;line-height:46px}
|
||
|
|
.global-header .header-features{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;gap:8px}
|
||
|
|
.global-footer .f-col .title{padding-bottom:8px}
|
||
|
|
.global-footer .f-col .title::after{width:100%}
|
||
|
|
.global-footer .f-col .list{padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid #ededed}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-title{font-size:24px;line-height:30px;max-width:90%}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-summary{font-size:18px;line-height:24px;max-width:90%}
|
||
|
|
.homepage .section-hero .swiper-section-hero .b-btn{font-size:16px;line-height:40px;border-radius:0 12px 12px 12px}
|
||
|
|
.homepage .section-profile .about-us{text-align:center}
|
||
|
|
.homepage .section-profile .about-us .au-title{text-align:center}
|
||
|
|
.product-page .section-description{margin-bottom:36px}
|
||
|
|
.product-detail-page .detail-top .row-w{row-gap:16px}
|
||
|
|
.product-detail-page .detail-middle .row-w{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}
|
||
|
|
.article-page .pd-tabs-container .pd-tabs .list{overflow:auto;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex}
|
||
|
|
.article-page.article-video .article-list.grid{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}
|
||
|
|
.account-page .account{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
|
||
|
|
.account-page .account .title-list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow:auto;white-space:nowrap;gap:0}
|
||
|
|
.account-page .send-cart-info b{width:150px}
|
||
|
|
.contact-page .row-w{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;row-gap:32px}
|
||
|
|
}
|
||
|
|
@media (max-width:576px){
|
||
|
|
.grid{gap:10px}
|
||
|
|
.col-mb-12{-ms-flex:0 0 100%;-webkit-box-flex:0;flex:0 0 100%;max-width:100%}
|
||
|
|
.my-60px{margin:40px 0}
|
||
|
|
.scroll-mt{scroll-margin-top:70px}
|
||
|
|
.success-form .cart-success{width:320px;height:250px}
|
||
|
|
.success-form .text-cart-success{font-size:20px}
|
||
|
|
.search-bar{width:100%;top:101%}
|
||
|
|
.search-bar .search-bar-input{width:100%}
|
||
|
|
.heading-primary{font-size:24px;line-height:32px}
|
||
|
|
.text-primary{font-size:14px;line-height:20px}
|
||
|
|
.icon-quote-primary{width:36px;height:22px;background-position:-37px -22px;background-size:222px 91px}
|
||
|
|
.icon-clock{width:16px;height:16px;background-position:-86px -2px;background-size:222px 91px}
|
||
|
|
.icon-location-primary{width:21px;height:30px;background-position:-2px -22px;background-size:222px 91px}
|
||
|
|
.icon-star-red{width:23px;height:22px;background-position:-106px -35px;background-size:222px 91px}
|
||
|
|
.p-item{padding:12px 10px;line-height:22px}
|
||
|
|
.p-item .p-name{font-size:16px}
|
||
|
|
.p-item .p-sku{margin:4px 0}
|
||
|
|
.global-header .row{height:60px}
|
||
|
|
.global-header .col-1{position:unset}
|
||
|
|
.global-header .header-search{position:unset!important}
|
||
|
|
.global-footer .footer-title{font-size:16px;line-height:28px;margin-bottom:16px!important}
|
||
|
|
.global-footer .footer-content{padding-bottom:16px!important}
|
||
|
|
.homepage .section-hero .swiper-section-hero .swiper-pagination-bullet{width:10px;height:10px}
|
||
|
|
.homepage .section-hero .swiper-section-hero .swiper-pagination-bullet-active{width:60px}
|
||
|
|
.homepage .section-hero .hero-img{min-height:300px;-o-object-fit:cover;object-fit:cover}
|
||
|
|
.homepage .section-profile .certificate{padding-bottom:70px}
|
||
|
|
.homepage .section-profile .about-us .au-btn{font-size:16px}
|
||
|
|
.homepage .section-category-featured{padding-bottom:40px}
|
||
|
|
.homepage .section-category-featured .cat-item{padding:12px}
|
||
|
|
.homepage .section-category-featured .cat-title{font-size:18px;line-height:24px}
|
||
|
|
.homepage .section-article-featured .a-title{font-size:16px;line-height:20px}
|
||
|
|
.homepage .section-map .map .background .b-image-1{display:none}
|
||
|
|
.homepage .section-map .map .background .b-image-2{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}
|
||
|
|
.homepage .section-map .map .line svg:first-child{top:24%;left:46%;height:25%}
|
||
|
|
.homepage .section-map .map .line svg:nth-child(2){top:36%;left:32%;height:50%}
|
||
|
|
.homepage .section-map .map .line svg:nth-child(3){top:49%;left:45%;height:24%}
|
||
|
|
.homepage .section-map .map .location .name{font-size:14px}
|
||
|
|
.homepage .section-map .map .location .name.hn{top:9.5%;left:36%}
|
||
|
|
.homepage .section-map .map .location .name.dn{top:35%;left:52%}
|
||
|
|
.homepage .section-map .map .location .name.hcm{top:60%;left:42%}
|
||
|
|
.homepage .section-map .map .location .text{top:70%}
|
||
|
|
.homepage .section-map .map .promos{top:unset;left:50%;bottom:10px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);width:100%;padding:0 10px}
|
||
|
|
.homepage .section-map .map .promos .promos-item:not(:last-child){margin-bottom:0!important}
|
||
|
|
.homepage .section-map .map .promos .promos-item .title{font-size:14px}
|
||
|
|
.homepage .section-partners .list{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:auto}
|
||
|
|
.homepage .section-partners .list .item{min-width:100px}
|
||
|
|
.homepage .section-customer .swiper{padding-bottom:4px!important}
|
||
|
|
.homepage .section-customer .c-item{padding:16px 14px}
|
||
|
|
.homepage .section-customer .c-review{margin:16px 0 24px!important;min-height:80px}
|
||
|
|
.homepage .section-customer .c-avatar{width:50px;height:50px}
|
||
|
|
.homepage .section-customer .c-info{gap:8px}
|
||
|
|
.homepage .section-contact .ct-title{font-size:22px;line-height:32px}
|
||
|
|
.homepage .section-contact .ct-text{font-size:16px;line-height:20px}
|
||
|
|
.product-page .product-list{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}
|
||
|
|
.product-detail-page .customer-rating .rating-top{padding:10px}
|
||
|
|
.product-detail-page .customer-rating .box-rating-left{font-size:24px;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;gap:4px}
|
||
|
|
.product-detail-page .customer-rating .box-rating-left span{-webkit-transform:translateY(2px)!important;-ms-transform:translateY(2px)!important;transform:translateY(2px)!important}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .ul{padding-left:8px}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .count{font-size:13px;min-width:70px}
|
||
|
|
.product-detail-page .customer-rating .box-rating-middle .line-rating{margin:0 12px}
|
||
|
|
.product-detail-page .customer-form{padding:16px}
|
||
|
|
.product-detail-page .section-pro-history{margin:40px 0}
|
||
|
|
.article-page .page-title{font-size:24px}
|
||
|
|
.article-page .article-showcase .big-art .art-title{font-size:24px}
|
||
|
|
.article-page .article-wrapper{margin-top:24px!important}
|
||
|
|
.article-page .cat-title{font-size:20px;margin-bottom:20px}
|
||
|
|
.article-page.article-category .article-list.grid{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}
|
||
|
|
.article-page .article-related .article-list{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}
|
||
|
|
.article-page .article-iframe iframe{height:350px}
|
||
|
|
.brand-page .main-brand .brand-item ul li{max-width:calc(100% / 3 - 10px)}
|
||
|
|
.contact-page .row-w iframe{height:350px}
|
||
|
|
.customer-page .customer-content-group{padding:10px}
|
||
|
|
.fixed-contact-group{right:10px}
|
||
|
|
}
|