284 lines
34 KiB
CSS
284 lines
34 KiB
CSS
|
:root{--color-primary:#ff9d06;--color-secondary:#041e42;--white:#fff;--black:#000;--red:#e80000;--gray:#b7b7b7;--gray-2:#d9d9d9;--box-shadow:0px 1px 6px rgba(0, 0, 0, 0.2)}
|
||
|
|
*,::after,::before{padding:0;margin:0;-webkit-box-sizing:inherit;box-sizing:inherit}
|
||
|
|
html{font-size:16px}
|
||
|
|
body{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Inter,sans-serif;color:#000;min-width:1220px;word-break:break-word;line-height:1.3;font-weight:400;background-color:#fff}
|
||
|
|
input[type=number]::-webkit-inner-spin-button{opacity:1}
|
||
|
|
@-webkit-keyframes gradient-bg-antimation{
|
||
|
|
0%{background-position:0 0}
|
||
|
|
100%{background-position:-200% 0}
|
||
|
|
}
|
||
|
|
@keyframes gradient-bg-antimation{
|
||
|
|
0%{background-position:0 0}
|
||
|
|
100%{background-position:-200% 0}
|
||
|
|
}
|
||
|
|
.container{max-width:1620px;width:100%;padding:0 10px;margin:0 auto}
|
||
|
|
.box-w{border-radius:15px;background-color:#fff;padding:12px}
|
||
|
|
.border-none{border:0!important}
|
||
|
|
.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:red}
|
||
|
|
.alert-mess{text-align:center;padding:50px 30px;font-size:20px;font-weight:500;color:red}
|
||
|
|
.static-html{max-height:500px;overflow:hidden;-webkit-transition:.8s;-o-transition:.8s;transition:.8s;position:relative}
|
||
|
|
.static-html.blur:after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:-o-linear-gradient(transparent,#fff);background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(#fff));background:linear-gradient(transparent,#fff)}
|
||
|
|
.static-html iframe{display:block;margin:0 auto}
|
||
|
|
.paging{padding:0 10px 32px;margin-top:56px;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:5px;color:#000;font-size:20px;line-height:21px;text-decoration:none;text-transform:capitalize;width:40px;height:40px}
|
||
|
|
.routing .list{display:-webkit-box;display:-ms-flexbox;display:flex;padding:16px 0;margin-bottom:16px;border-bottom:1px solid #e9e9e9;list-style:none;text-transform:uppercase}
|
||
|
|
.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);max-width:700px;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}
|
||
|
|
.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:80%;border-right:1px solid #000}
|
||
|
|
.success-form{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,.5);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}
|
||
|
|
.success-form .cart-success{width:500px;height:300px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed}
|
||
|
|
.success-form .success-form-svg{display:block;height:80px;width:80px;color:var(--color-primary)}
|
||
|
|
.success-form .text-cart-success{font-size:24px;font-weight:600;line-height:1.6;padding-top:30px}
|
||
|
|
.header-cart:hover .cart-ttip{display:block}
|
||
|
|
.cart-ttip{display:none;position:absolute;background-color:#fff;border-radius:10px;width:400px;height:auto;right:0;top:40px;z-index:3;-webkit-box-shadow:0 1px 6px rgb(0 0 0 / 25%);box-shadow:0 1px 6px rgb(0 0 0 / 25%)}
|
||
|
|
.cart-ttip .cart-ttip-price-button{border-radius:5px;padding:10px;background:var(--color-primary);text-align:center;margin:0 12px 12px}
|
||
|
|
.cart-ttip .cart-ttip-item-container{max-height:300px;overflow:auto}
|
||
|
|
.cart-ttip .cart-ttip-item-container .compare-item{height:auto;margin:0;max-width:unset;-webkit-box-shadow:none;box-shadow:none}
|
||
|
|
.cart-ttip .cart-ttip .header-null-cart{width:100%!important;text-align:center;padding:30px;color:#000;font-weight:600}
|
||
|
|
.cart-ttip .header-cart-item-price{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;margin-top:10px}
|
||
|
|
.cart-ttip .cart-ttip-price,.compare-item,.header-nav-menu a{display:-webkit-box;display:-ms-flexbox}
|
||
|
|
.cart-ttip .header-cart-item-price p{font-weight:700;width:auto}
|
||
|
|
.cart-ttip .cart-ttip-price{padding:10px 20px 10px 10px;border-top:3px solid var(--color-primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;gap:6px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}
|
||
|
|
.cart-ttip .cart-ttip-price p{color:#000;width:auto;padding:0;margin:0}
|
||
|
|
.cart-ttip .cart-ttip-price p:first-child{font-size:15px;font-weight:700;text-transform:uppercase;-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px)}
|
||
|
|
.cart-ttip .cart-ttip-price p:nth-child(2){font-size:13px;font-weight:200;color:var(--color-primary);margin-left:0!important}
|
||
|
|
.cart-ttip .cart-ttip-price p:last-child{font-size:15px;font-weight:700}
|
||
|
|
.cart-ttip .compare-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;-webkit-box-shadow:0 1px 8px rgb(0 0 0 / 25%);box-shadow:0 1px 8px rgb(0 0 0 / 25%);padding:10px;border-radius:10px;max-width:360px;background:#fff}
|
||
|
|
.cart-ttip .compare-item img{width:80px;border:5px}
|
||
|
|
.cart-ttip .compare-item .compare-item-text{display:inline-block;padding:0 10px;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||
|
|
.cart-ttip .compare-item .compare-item-text p{background:0 0;color:#000;padding:0;width:100%;word-break:break-word;font-size:14px;line-height:20px;margin-left:0;height:40px}
|
||
|
|
.cart-ttip .header-null-cart{width:100%;text-align:center;padding:24px;color:#000;font-size:14px;font-weight:600}
|
||
|
|
.scroll-top-btn{display:none;-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;width:55px;height:55px;position:fixed;bottom:100px;right:20px;background:var(--color-primary);border-radius:50%;z-index:999;-webkit-box-shadow:0 1px 5px rgb(0 0 0 / 20%);box-shadow:0 1px 5px rgb(0 0 0 / 20%);color:#fff}
|
||
|
|
.view-more-content-btn{display:block;text-align:center;margin:20px 0;font-size:16px;line-height:20px;font-weight:600;color:var(--color-secondary)}
|
||
|
|
.static-icons{background-image:url(/images/static-icons-map.png);background-repeat:no-repeat;display:inline-block;background-size:296.5px 236px}
|
||
|
|
.static-icon-5-stars{width:96px;height:15px;background-position:-3px -3px}
|
||
|
|
.static-icon-customer-avatar{width:30px;height:30px;background-position:-104px -3px}
|
||
|
|
.static-icon-feature-cart{width:45px;height:27px;background-position:-139px -3px}
|
||
|
|
.static-icon-feature-delivery{width:52px;height:52px;background-position:-3px -35px}
|
||
|
|
.static-icon-feature-fly-gift{width:23px;height:38px;background-position:-60px -35px}
|
||
|
|
.static-icon-feature-mail{width:33px;height:26px;background-position:-139px -35px}
|
||
|
|
.static-icon-feature-money-pig{width:35px;height:35px;background-position:-88px -66px}
|
||
|
|
.static-icon-feature-phone{width:31px;height:32px;background-position:-177px -35px}
|
||
|
|
.static-icon-feature-reward{width:42px;height:42px;background-position:-128px -72px}
|
||
|
|
.static-icon-feature-support{width:42px;height:42px;background-position:-3px -119px}
|
||
|
|
.static-icon-feature-support-2{width:42px;height:42px;background-position:-50px -119px}
|
||
|
|
.static-icon-filter-mb{width:21px;height:20px;background-position:-175px -72px}
|
||
|
|
.static-icon-gift{width:18px;height:18px;background-position:-189px -3px}
|
||
|
|
.static-icon-gray-close{width:31px;height:31px;background-position:-174px -96px}
|
||
|
|
.static-icon-gray-close-mb{width:21px;height:21px;background-position:-96px -131px}
|
||
|
|
.static-icon-green-box{width:13px;height:13px;background-position:-3px -97px}
|
||
|
|
.static-icon-grid-style{width:22px;height:23px;background-position:-122px -131px}
|
||
|
|
.static-icon-header-cart{width:35px;height:39px;background-position:-149px -132px}
|
||
|
|
.static-icon-header-cart-mb{width:29px;height:32px;background-position:-3px -176px}
|
||
|
|
.static-icon-header-user{width:40px;height:40px;background-position:-212px -3px}
|
||
|
|
.static-icon-list-style{width:25px;height:23px;background-position:-212px -46px}
|
||
|
|
.static-icon-location{width:14px;height:15px;background-position:-87px -46px}
|
||
|
|
.static-icon-menu{width:30px;height:23px;background-position:-210px -74px}
|
||
|
|
.static-icon-menu-mb{width:30px;height:23px;background-position:-210px -102px}
|
||
|
|
.static-icon-phone-shake{width:14px;height:14px;background-position:-105px -47px}
|
||
|
|
.static-icon-sale-fire{width:22px;height:26px;background-position:-210px -130px}
|
||
|
|
.static-icon-social-fb{width:15px;height:28px;background-position:-237px -130px}
|
||
|
|
.static-icon-social-fb-logo{width:38px;height:38px;background-position:-97px -161px}
|
||
|
|
.static-icon-social-gg-news{width:28px;height:28px;background-position:-189px -161px}
|
||
|
|
.static-icon-social-instagram{width:28px;height:28px;background-position:-221px -163px}
|
||
|
|
.static-icon-social-instagram-logo{width:38px;height:38px;background-position:-37px -196px}
|
||
|
|
.static-icon-social-twitter{width:33px;height:26px;background-position:-140px -196px}
|
||
|
|
.static-icon-social-youtube{width:37px;height:26px;background-position:-177px -196px}
|
||
|
|
.static-icon-social-youtube-logo{width:38px;height:38px;background-position:-256px -3px}
|
||
|
|
.global-logo{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:230px;margin-left:auto}
|
||
|
|
.global-socials{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}
|
||
|
|
.global-socials .item .link{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;height:100%;border-left:1px solid #fff;border-top:1px solid transparent;border-bottom:1px solid transparent}
|
||
|
|
.global-socials .item .link:hover{background-color:#fff;border-color:var(--color-primary)}
|
||
|
|
.global-socials .item .link:hover i{-webkit-filter:invert(30%) sepia(57%) saturate(2610%) hue-rotate(352deg) brightness(101%) contrast(106%);filter:invert(30%) sepia(57%) saturate(2610%) hue-rotate(352deg) brightness(101%) contrast(106%)}
|
||
|
|
.global-socials .item:last-child{border-right:1px solid #fff}
|
||
|
|
.section-deal .line-block{width:100%;height:2px;background-color:var(--red)}
|
||
|
|
.section-deal .global-deal-time-countdown{padding:10px 22px;background-color:red;border-radius:12px;font-size:24px;line-height:30px;font-weight:600;color:#fff}
|
||
|
|
.p-item{min-width:0}
|
||
|
|
.p-item .p-thumbs{position:relative;border:1px solid var(--gray-2);border-radius:15px;overflow:hidden}
|
||
|
|
.p-item .p-thumbs .p-image{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:100%}
|
||
|
|
.p-item .p-thumbs .p-image img{position:absolute;bottom:0;right:0;top:0;left:0;margin:auto 0}
|
||
|
|
.p-item .p-thumbs .swiper-pagination{width:unset;left:12px}
|
||
|
|
.p-item .p-thumbs .swiper-pagination-bullet{width:10px;height:10px}
|
||
|
|
.p-item .p-thumbs .swiper-pagination-bullet-active{background-color:var(--color-primary)}
|
||
|
|
.p-item .p-price-sale-off{position:absolute;top:16px;left:16px;padding:9px;background-color:var(--red);color:#fff;font-size:15px;line-height:18px;border-radius:8px;z-index:9}
|
||
|
|
.p-item .p-name{font-weight:500;font-size:16px;line-height:19px}
|
||
|
|
.p-item .p-price-sale{font-size:20px;line-height:24px;font-weight:700;color:var(--color-primary)}
|
||
|
|
.p-item .p-price-stock{font-size:16px;line-height:24px;font-weight:500;color:#b7b7b7}
|
||
|
|
.p-item .p-quantity{font-size:13px;line-height:12px;font-weight:500;color:#099268;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px}
|
||
|
|
.p-item .p-quantity-deal{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;color:var(--gray)}
|
||
|
|
.p-item .p-quantity-deal .deal-quantity{color:#000}
|
||
|
|
.p-item .p-wrapper-deal{height:10px;width:100%}
|
||
|
|
.p-item .p-wrapper-deal .deal-line{position:absolute;top:0;left:0;bottom:0;width:100%;border-radius:5px;background:-o-linear-gradient(right,var(--color-primary) 0,var(--red) 100%);background:-webkit-gradient(linear,right top,left top,color-stop(0,var(--color-primary)),to(var(--red)));background:-o-linear-gradient(right,var(--color-primary) 0,var(--red) 100%);background:linear-gradient(270deg,var(--color-primary) 0,var(--red) 100%)}
|
||
|
|
.p-item .p-wrapper-deal .deal-line.total{opacity:.3}
|
||
|
|
.p-item .p-wrapper-deal .deal-line.remaining{background:-o-repeating-linear-gradient(left,var(--color-primary) 0,var(--red) 50%,var(--color-primary) 100%);background:repeating-linear-gradient(to right,var(--color-primary) 0,var(--red) 50%,var(--color-primary) 100%);background-size:200% auto;background-position:0 100%;-webkit-animation:2s linear infinite forwards gradient-bg-antimation;animation:2s linear infinite forwards gradient-bg-antimation}
|
||
|
|
.global-header .header-top{height:124px;padding-top:16px}
|
||
|
|
.global-header .header-search{margin-left:52px}
|
||
|
|
.global-header .search-bar{position:relative;max-width:874px;height:52px;margin:0 auto;margin-top:12px}
|
||
|
|
.global-header .search-bar .search-bar-input{width:100%;height:52px;border:1px solid var(--color-secondary);border-radius:10px;padding-left:18px;outline-color:#041a38;font-size:16px;line-height:20px}
|
||
|
|
.global-header .search-bar .search-bar-btn{width:110px;height:52px;color:#fff;background-color:var(--color-secondary);font-size:16px;line-height:20px;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;border-radius:0 10px 10px 0;border:0;position:absolute;top:0;right:0;cursor:pointer}
|
||
|
|
.global-header .search-bar .search-bar-btn::after{content:"";position:absolute;top:50%;left:-9px;width:10px;height:10px;-webkit-transform:rotate(45deg) translateY(-50%);-ms-transform:rotate(45deg) translateY(-50%);transform:rotate(45deg) translateY(-50%);background-color:var(--color-secondary)}
|
||
|
|
.global-header .header-func{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:14px;color:#888;font-weight:600}
|
||
|
|
.global-header .header-cart .header-cart-amount{width:26px;height:26px;background-color:var(--color-primary);border-radius:50%;position:absolute;top:-13px;right:-10px;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:14px;font-weight:700;font-style:normal;color:#000}
|
||
|
|
.global-header .header-bottom{background-color:var(--color-primary)}
|
||
|
|
.global-header .header-navbar{position:relative}
|
||
|
|
.global-header .header-navbar-list{position:absolute;top:100%;left:0;right:0;background-color:#fff;font-size:15px;line-height:32px;padding:8px 12px;-webkit-box-shadow:0 1px 8px rgba(0,0,0,.15);box-shadow:0 1px 8px rgba(0,0,0,.15);z-index:999}
|
||
|
|
.global-header .header-navbar-list .item .image{width:30px;height:30px}
|
||
|
|
.global-header .header-navbar .header-navbar-menu{width:308px;height:60px;font-size:22px;line-height:26px;font-weight:600;text-transform:uppercase;color:#fff;background-color:var(--color-secondary);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:8px;cursor:pointer}
|
||
|
|
.homepage .section-hero{background-color:#12051f}
|
||
|
|
.homepage .section-hero .swiper-section-hero{margin-left:308px}
|
||
|
|
.homepage .section-hero .section-hero-features{display:-ms-grid;display:grid;-ms-grid-rows:(1fr)[3];grid-template-rows:repeat(3,1fr);height:100%;background-color:#fff}
|
||
|
|
.homepage .section-hero .section-hero-features .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:36px;text-align:center;gap:16px;border-bottom:1px solid var(--gray-2)}
|
||
|
|
.homepage .section-category .heading{background-color:#e9e9e9;border-radius:8px}
|
||
|
|
.homepage .section-category .heading .title{padding:15px 20px;font-size:24px;line-height:32px;background-color:var(--color-primary);color:#fff;display:inline-block;border-radius:8px 0 0 8px;position:relative}
|
||
|
|
.homepage .section-category .heading .title::after{content:"";position:absolute;top:50%;right:-2px;width:15px;height:15px;-webkit-transform:rotate(45deg) translateY(-50%);-ms-transform:rotate(45deg) translateY(-50%);transform:rotate(45deg) translateY(-50%);background-color:var(--color-primary)}
|
||
|
|
.homepage .section-category .content .banner{border-radius:15px;overflow:hidden}
|
||
|
|
.homepage .section-category .product-best-seller{background:#fff;border:1px solid var(--gray-2);border-radius:15px;overflow:hidden}
|
||
|
|
.homepage .section-category .product-best-seller .header{background:#e9e9e9;border-bottom:1px solid var(--gray-2);border-radius:15px 15px 0 0;font-size:20px;line-height:24px;font-weight:700;text-transform:uppercase;text-align:center;padding:22px 0 18px}
|
||
|
|
.homepage .section-category .product-best-seller .p-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}
|
||
|
|
.homepage .section-category .product-best-seller .item:not(:last-child){margin-bottom:38px}
|
||
|
|
.homepage .section-category .product-best-seller .p-thumbs{max-width:148px;width:100%;height:-webkit-max-content;height:-moz-max-content;height:max-content}
|
||
|
|
.homepage .section-category .product-best-seller .p-name{font-size:14px;line-height:18px;margin-top:0!important}
|
||
|
|
.homepage .section-category .product-best-seller .p-price-sale{font-size:18px;line-height:18px}
|
||
|
|
.homepage .section-category .product-best-seller .p-price-stock{font-size:14px;line-height:14px}
|
||
|
|
.homepage .section-category .product-best-seller .p-quantity{margin:8px 0 0!important}
|
||
|
|
.homepage .section-category .product-best-seller .p-price-sale-off{font-size:13px;line-height:14px;padding:6px;top:10px;left:10px}
|
||
|
|
.homepage .section-customer{background-color:#f5f5f5;margin-bottom:-24px}
|
||
|
|
.homepage .section-customer .heading{position:relative;font-size:32px;line-height:38px;font-weight:600;text-align:center;padding:55px 0}
|
||
|
|
.homepage .section-customer .heading::after{content:"";position:absolute;top:72%;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);max-width:254px;width:100%;height:2px;background-color:#888}
|
||
|
|
.homepage .section-customer .item{position:relative;padding-bottom:92px}
|
||
|
|
.homepage .section-customer .item .bg-image{border-radius:15px;overflow:hidden;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2)}
|
||
|
|
.homepage .section-customer .item .content{position:absolute;bottom:0;left:16px;right:16px;background:#fff;-webkit-box-shadow:0 1px 6px rgba(0,0,0,.25);box-shadow:0 1px 6px rgba(0,0,0,.25);border-radius:15px;padding:16px}
|
||
|
|
.homepage .section-customer .item .line-block{width:100%;height:1px;background-color:var(--gray-2)}
|
||
|
|
.product-page .category-child .list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:80px;padding:0 50px}
|
||
|
|
.product-page .category-child .list .list-item{max-width:150px;width:100%}
|
||
|
|
.product-page .category-child .item .image{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:100%}
|
||
|
|
.product-page .category-child .item .picture{position:absolute;bottom:0;right:0;top:0;left:0;margin:auto 0}
|
||
|
|
.product-page .grid--product-page{-ms-grid-columns:1fr 4fr;grid-template-columns:1fr 4fr;border-top:1px solid #e9e9e9}
|
||
|
|
.product-page .sort{border-bottom:1px solid #f0f0f0}
|
||
|
|
.product-page .sort .sort-by-collection select{width:156px;height:42px;font-size:16px;line-height:20px;outline:0;border-radius:8px;padding:0 10px;border:1px solid #e9e9e9}
|
||
|
|
.product-page .sort .sort-by-display .static-icons.active,.product-page .sort .sort-by-display .static-icons:hover{-webkit-filter:invert(30%) sepia(57%) saturate(2610%) hue-rotate(352deg) brightness(101%) contrast(106%);filter:invert(30%) sepia(57%) saturate(2610%) hue-rotate(352deg) brightness(101%) contrast(106%)}
|
||
|
|
.product-page .filter{border:1px solid #e9e9e9;border-radius:12px;padding:16px 8px}
|
||
|
|
.product-page .filter .filter-item{border-top:1px solid #e9e9e9;padding-top:12px}
|
||
|
|
.product-page .filter .filter-item .list .check-box{display:inline-block;width:16px;height:16px;background-color:#e9e9e9;border-radius:3px}
|
||
|
|
.product-page .description{padding-top:16px;border-top:1px solid #e9e9e9}
|
||
|
|
.product-detail-page .line-gray-block{width:100%;height:1px;background-color:#e9e9e9}
|
||
|
|
.product-detail-page .product-features .box{border:1px solid #d9d9d9;border-radius:15px;overflow:hidden}
|
||
|
|
.product-detail-page .product-features .box .title{border-bottom:2px solid var(--color-primary);padding:16px 16px 12px}
|
||
|
|
.product-detail-page .product-features .box .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:75px;padding:0 16px}
|
||
|
|
.product-detail-page .product-features .box .item:not(:last-child){border-bottom:1px solid #e9e9e9}
|
||
|
|
.product-detail-page .product-support.box .title{border-bottom:1px solid #d9d9d9}
|
||
|
|
.product-detail-page .product-support.box .item:first-child{border:0}
|
||
|
|
.product-detail-page .product-thumbs .gallery-top{border:1px solid #d9d9d9;border-radius:15px}
|
||
|
|
.product-detail-page .product-thumbs .gallery-thumbs .swiper-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box}
|
||
|
|
.product-detail-page .product-thumbs .gallery-thumbs .swiper-slide{border:1px solid #d9d9d9;border-radius:10px}
|
||
|
|
.product-detail-page .product-thumbs .gallery-thumbs .swiper-slide-thumb-active{border-color:var(--color-primary)}
|
||
|
|
.product-detail-page .product-info .pro-name{font-size:24px;line-height:32px;font-weight:600;text-transform:uppercase}
|
||
|
|
.product-detail-page .product-info .pro-price-sale{font-weight:700;font-size:26px;line-height:24px;color:var(--color-primary)}
|
||
|
|
.product-detail-page .product-info .pro-price-stock{font-size:16px;line-height:24px}
|
||
|
|
.product-detail-page .product-info .pro-price-sale-off{font-size:15px;font-weight:600;line-height:24px;border-radius:8px;padding:6px;background-color:var(--red);color:#fff}
|
||
|
|
.product-detail-page .product-info .pro-status{color:#099268;font-weight:500}
|
||
|
|
.product-detail-page .product-info .pro-status .static-icons{background-size:444.75px 354px;width:18.5px;height:18.5px;background-position:-4.5px -145.5px}
|
||
|
|
.product-detail-page .product-info .pro-special-offer{position:relative;margin-top:36px}
|
||
|
|
.product-detail-page .product-info .pro-special-offer .title{position:absolute;top:-21px;left:28px;height:42px;color:#fff;background-color:var(--red);border-radius:21px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:0 16px}
|
||
|
|
.product-detail-page .product-info .pro-special-offer .list-w{padding:30px 15px 15px 40px;border:1px solid var(--red);border-radius:20px;line-height:28px}
|
||
|
|
.product-detail-page .section-product .pro-cart .pro-cart-quantity{max-width:72px;width:100%;height:52px;background:#f0f0f0;border-radius:5px;outline:0;border:0;padding:12px 18px;font-size:16px;font-weight:700}
|
||
|
|
.product-detail-page .section-product .pro-cart .pro-cart-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;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:52px;border-radius:8px;color:#fff;background-color:var(--color-primary);border:1px solid var(--color-primary)}
|
||
|
|
.product-detail-page .section-product .pro-cart .pro-cart-btn.buy-now:hover{color:var(--color-primary);background-color:#fff}
|
||
|
|
.product-detail-page .section-product .pro-cart .pro-cart-btn.installment{background:#0085ff;border-color:#0085ff}
|
||
|
|
.product-detail-page .section-product .pro-cart .pro-cart-btn.installment:hover{color:#0085ff;background-color:#fff}
|
||
|
|
.product-detail-page .section-product .pro-deal{background-color:var(--red);border-radius:10px;padding:8px}
|
||
|
|
.product-detail-page .section-product .pro-deal .global-deal-time-countdown{color:var(--red);background-color:#fff;border-radius:10px;font-size:20px;line-height:24px;padding:7px 8px}
|
||
|
|
.product-detail-page .section-product .pro-deal .deal-line.total{background:#fff;opacity:1}
|
||
|
|
.product-detail-page .section-product .pro-deal .deal-line.remaining{background:-o-repeating-linear-gradient(left,#e89900 0,#ffc806 50%,#e89900 100%);background:repeating-linear-gradient(to right,#e89900 0,#ffc806 50%,#e89900 100%)}
|
||
|
|
.product-detail-page .section-product .pro-deal .p-quantity-deal{color:#fff;font-weight:400}
|
||
|
|
.product-detail-page .section-product .pro-deal .p-quantity-deal .deal-quantity{color:#fff}
|
||
|
|
.product-detail-page .section-product-attr .attr-list-name .item{position:relative;font-weight:700;font-size:24px;line-height:29px;color:#b9b9b9;cursor:pointer}
|
||
|
|
.product-detail-page .section-product-attr .attr-list-name .title{font-size:inherit;line-height:inherit}
|
||
|
|
.product-detail-page .section-product-attr .attr-list-name .item:not(:first-child)::before{content:"/";position:absolute;top:0;left:-20px}
|
||
|
|
.product-detail-page .section-product-attr .attr-list-name .title.active,.product-detail-page .section-product-attr .attr-list-name .title:hover{color:#000}
|
||
|
|
.product-detail-page .section-product-attr .pro-spec table{width:100%;border-collapse:collapse}
|
||
|
|
.product-detail-page .section-product-attr .pro-spec table tr:nth-child(odd){background:#f0f0f0}
|
||
|
|
.product-detail-page .section-product-attr .pro-spec table td:nth-child(odd),.product-detail-page .section-product-attr .pro-spec table th:nth-child(odd){font-weight:700;width:30%}
|
||
|
|
.product-detail-page .section-product-attr .pro-spec table td,.product-detail-page .section-product-attr .pro-spec table th{padding:10px;text-align:left}
|
||
|
|
.cart-page .form-input{font-size:16px;line-height:20px;width:100%;background:#f5f5f5;border-radius:8px;border:0;outline-color:var(--color-secondary);padding:13px 12px;margin-bottom:16px}
|
||
|
|
.cart-page .form-btn{width:100%;height:52px;border-radius:8px;font-weight:700;font-size:18px;line-height:23px;text-align:center;text-transform:uppercase;color:#fff;border:0;cursor:pointer}
|
||
|
|
.cart-page .line-blue-block{height:4px;width:100%;background-color:var(--color-secondary)}
|
||
|
|
.c-item{padding:16px 0;border-bottom:1px solid #ddd;font-size:18px;line-height:24px}
|
||
|
|
.c-item .c-img{max-width:158px}
|
||
|
|
.c-item .c-delete:hover{cursor:pointer;-webkit-filter:invert(30%) sepia(57%) saturate(2610%) hue-rotate(352deg) brightness(101%) contrast(106%);filter:invert(30%) sepia(57%) saturate(2610%) hue-rotate(352deg) brightness(101%) contrast(106%)}
|
||
|
|
.c-item .c-name{font-size:inherit;line-height:inherit}
|
||
|
|
.c-item .c-quantity{max-width:80px;width:100%;height:52px;background:#f0f0f0;border-radius:5px;outline:0;border:0;padding:12px 20px;font-size:16px;font-weight:700}
|
||
|
|
.cart-page .section-product{border:1px solid var(--color-secondary);padding-bottom:28px}
|
||
|
|
.cart-page .section-product .title{padding:19px 0}
|
||
|
|
.cart-page .section-product .voucher{padding-top:16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
|
||
|
|
.cart-page .section-product .voucher .voucher-input{padding:14px 12px;max-width:372px;margin:0 16px;font-size:18px;line-height:24px}
|
||
|
|
.cart-page .section-product .voucher .voucher-btn{max-width:168px}
|
||
|
|
.cart-page .section-login .title{background-color:#f5f5f5;padding:22px 16px}
|
||
|
|
.cart-page .section-login .login-btn{max-width:253px}
|
||
|
|
.cart-page .customer .customer-form textarea{max-height:114px;resize:none}
|
||
|
|
.cart-page .col-right .list-radio .item:not(:last-child){margin-bottom:16px}
|
||
|
|
.cart-page .col-right .list-radio .item label{position:relative;display:block}
|
||
|
|
.cart-page .col-right .list-radio .item label:before{content:"";display:inline-block;position:relative;top:0;margin:0 5px 0 0;width:13px;height:13px;border-radius:50%;border:1px solid var(--color-primary);background-color:transparent}
|
||
|
|
.cart-page .col-right .list-radio .item input[type=radio]:checked+label:after{content:"";border-radius:50%;width:9px;height:9px;position:absolute;top:5px;left:2.5px;display:block;background:var(--color-primary)}
|
||
|
|
.cart-page .col-right .cart-send{border:1px solid #ddd}
|
||
|
|
.cart-page .col-right .cart-send .cart-send-item{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;font-size:16px;line-height:60px;padding:0 20px}
|
||
|
|
.cart-page .col-right .cart-send .cart-send-item:not(:last-child){border-bottom:1px solid #e9e9e9}
|
||
|
|
.cart-page .col-right .cart-send-submit-btn{max-width:372px}
|
||
|
|
.global-footer .global-logo{margin-left:unset}
|
||
|
|
.global-footer .col-title{font-size:16px;line-height:20px;font-weight:600;margin-bottom:12px}
|
||
|
|
.global-footer .col-list{line-height:32px}
|
||
|
|
.global-footer a:hover{color:var(--color-primary)}
|
||
|
|
.global-footer .footer-top{background-color:var(--color-primary)}
|
||
|
|
.global-footer .footer-top .row{height:60px}
|
||
|
|
.global-footer .newsletter .newsletter-input{width:100%;height:42px;border:0;border-radius:10px;padding-left:18px;outline:0;font-size:16px;line-height:20px}
|
||
|
|
.global-footer .newsletter .newsletter-btn{width:110px;height:42px;color:#fff;background-color:var(--color-secondary);font-size:16px;line-height:20px;font-weight:600;text-transform:uppercase;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;border-radius:0 10px 10px 0;border:0;position:absolute;top:0;right:0;cursor:pointer}
|
||
|
|
.global-footer .newsletter .newsletter-btn::after{content:"";position:absolute;top:50%;left:-9px;width:10px;height:10px;-webkit-transform:rotate(45deg) translateY(-50%);-ms-transform:rotate(45deg) translateY(-50%);transform:rotate(45deg) translateY(-50%);background-color:var(--color-secondary)}
|
||
|
|
.global-footer .copy-right{background-color:#f5f5f5;color:#555}
|
||
|
|
@media (max-width:1600px){
|
||
|
|
html{font-size:14px}
|
||
|
|
.container{max-width:1220px}
|
||
|
|
.grid{gap:12px}
|
||
|
|
.grid--5-cols{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}
|
||
|
|
.row{margin-right:-6px;margin-left:-6px}
|
||
|
|
.no-gutters{margin-right:0;margin-left:0}
|
||
|
|
.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto{padding-left:6px;padding-right:6px}
|
||
|
|
.routing .list{padding:12px 0}
|
||
|
|
.global-header .header-navbar .header-navbar-menu{font-size:18px;line-height:24px;height:52px;width:280px}
|
||
|
|
.global-header .header-routing .list{font-size:16px;line-height:20px}
|
||
|
|
.global-footer .footer-top .row{height:52px}
|
||
|
|
.global-footer .footer-top .row .text-20{font-size:16px;line-height:20px}
|
||
|
|
.section-deal .heading .text-32{font-size:28px;line-height:32px}
|
||
|
|
.section-deal .global-deal-time-countdown{font-size:20px;line-height:24px}
|
||
|
|
.homepage .section-hero .swiper-section-hero{margin-left:280px}
|
||
|
|
.homepage .section-hero .section-hero-features .item{font-size:13px;padding:15px}
|
||
|
|
.homepage .section-category .heading .title{line-height:26px}
|
||
|
|
.homepage .section-category .product-best-seller .list{padding:16px 12px!important}
|
||
|
|
.homepage .section-category .product-best-seller .p-item{gap:8px}
|
||
|
|
.homepage .section-category .product-best-seller .p-thumbs{max-width:120px}
|
||
|
|
.homepage .section-category .product-best-seller .p-price-sale{font-size:16px;line-height:16px}
|
||
|
|
.homepage .section-category .product-best-seller .p-rating{margin:8px 0!important}
|
||
|
|
.homepage .section-category .product-best-seller .p-rating i{width:64px;height:11px;background-position:-1.5px -1.5px;background-size:198px 157px}
|
||
|
|
.homepage .section-category .product-best-seller .p-rating span{display:none}
|
||
|
|
.product-page .filter .title{font-size:18px}
|
||
|
|
.product-page .product-list{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}
|
||
|
|
.product-detail-page .product-features .box .title{font-size:16px;line-height:20px}
|
||
|
|
.product-detail-page .product-features .box .item{height:60px}
|
||
|
|
.product-detail-page .product-info .pro-name{font-size:20px;line-height:24px}
|
||
|
|
.product-detail-page .product-info .pro-sub-info{font-size:13px;gap:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
|
||
|
|
.product-detail-page .product-info .pro-price-sale{font-size:24px}
|
||
|
|
.product-detail-page .product-info .pro-price-sale-off,.product-detail-page .product-info .pro-price-stock{font-size:14px}
|
||
|
|
.product-detail-page .section-product .pro-deal{padding:4px 8px}
|
||
|
|
.product-detail-page .section-product .global-deal-time-countdown{font-size:16px;line-height:20px}
|
||
|
|
.product-detail-page .section-product .pro-deal-time-left .title{font-size:13px}
|
||
|
|
.product-detail-page .section-product .pro-deal-quantity{margin-left:20px!important}
|
||
|
|
.product-detail-page .section-product .pro-cart .pro-cart-btn b{font-size:16px}
|
||
|
|
.product-detail-page .section-product .pro-cart .pro-cart-btn span{font-size:11px}
|
||
|
|
.c-item{font-size:16px;line-height:20px}
|
||
|
|
.c-item .c-img{max-width:130px}
|
||
|
|
.cart-page .form-btn{font-size:16px;line-height:20px}
|
||
|
|
.cart-page .section-product .voucher .voucher-input{padding:13px 12px;font-size:16px;line-height:20px;margin:0 12px 0 16px}
|
||
|
|
.cart-page .section-product .voucher .voucher-btn{height:46px;max-width:140px}
|
||
|
|
.cart-page .col-right .list-radio .item input[type=radio]:checked+label:after{top:3px;left:2px;width:8px;height:8px}
|
||
|
|
}
|