1282 lines
24 KiB
CSS
1282 lines
24 KiB
CSS
:root {
|
|
--color-global: #462f91;
|
|
--color-title: #0d0d9c;
|
|
--color-hover: #1877f2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: #f5f5f5;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #462f91;
|
|
border-radius: 20px;
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #462f91), color-stop(0.5, transparent), to(transparent));
|
|
}
|
|
|
|
html {
|
|
font-size: 100%;
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px !important;
|
|
margin: 0 auto;
|
|
width: 1400px !important;
|
|
}
|
|
|
|
body {
|
|
font-family: "Roboto", sans-serif;
|
|
font-size: 16px;
|
|
background: #fff;
|
|
min-width: 1400px;
|
|
color: #303030;
|
|
}
|
|
|
|
html {
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
|
|
.icon_2025 {
|
|
background: url(../images/icon_2025.png) no-repeat;
|
|
background-size: 228px 260px;
|
|
display: block;
|
|
}
|
|
.icon_2025.map {
|
|
width: 20px;
|
|
height: 26px;
|
|
background-position: 1px 0px;
|
|
}
|
|
.icon_2025.search {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -70px 0;
|
|
}
|
|
.icon_2025.search-2 {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -102px 0;
|
|
}
|
|
.icon_2025.user {
|
|
width: 26px;
|
|
height: 26px;
|
|
background-position: -133px 0px;
|
|
}
|
|
.icon_2025.bar {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-position: 1px -38px;
|
|
}
|
|
.icon_2025.buildpc {
|
|
width: 36px;
|
|
height: 24px;
|
|
background-position: -24px -35px;
|
|
}
|
|
.icon_2025.shop {
|
|
width: 22px;
|
|
height: 24px;
|
|
background-position: -70px -35px;
|
|
}
|
|
.icon_2025.shop-3 {
|
|
width: 22px;
|
|
height: 24px;
|
|
background-position: -180px -186px;
|
|
}
|
|
.icon_2025.shop-hover {
|
|
width: 22px;
|
|
height: 24px;
|
|
background-position: -46px -65px;
|
|
}
|
|
.icon_2025.map-2 {
|
|
width: 15px;
|
|
height: 23px;
|
|
background-position: -26px -3px;
|
|
}
|
|
.icon_2025.map-3 {
|
|
width: 13px;
|
|
height: 18px;
|
|
background-position: -49px -3px;
|
|
}
|
|
.icon_2025.question {
|
|
width: 25px;
|
|
height: 25px;
|
|
background-position: -100px -35px;
|
|
}
|
|
.icon_2025.prduct-save {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -133px -35px;
|
|
}
|
|
.icon_2025.prduct-save-hover {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -140px -65px;
|
|
}
|
|
.icon_2025.article {
|
|
width: 30px;
|
|
height: 24px;
|
|
background-position: -162px -35px;
|
|
}
|
|
.icon_2025.article-hover {
|
|
width: 30px;
|
|
height: 24px;
|
|
background-position: -170px -63px;
|
|
}
|
|
.icon_2025.heart {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -98px -147px;
|
|
}
|
|
.icon_2025.heart-2 {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -126px -173px;
|
|
}
|
|
.icon_2025.shop-blue {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -96px -172px;
|
|
}
|
|
.icon_2025.link {
|
|
width: 14px;
|
|
height: 12px;
|
|
background-position: -212px -130px;
|
|
}
|
|
.icon_2025.time {
|
|
width: 15px;
|
|
height: 14.5px;
|
|
background-position: -188px -172px;
|
|
}
|
|
.icon_2025.time-gray {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-position: -34px -96px;
|
|
}
|
|
.icon_2025.mouse {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -160px -170px;
|
|
}
|
|
.icon_2025.facebook {
|
|
width: 41px;
|
|
height: 40px;
|
|
background-position: 0 -159px;
|
|
}
|
|
.icon_2025.zalo {
|
|
width: 41px;
|
|
height: 40px;
|
|
background-position: -50px -159px;
|
|
}
|
|
.icon_2025.home {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -207px -152px;
|
|
}
|
|
.icon_2025.angle-right {
|
|
width: 11px;
|
|
height: 17px;
|
|
background-position: -212px -176px;
|
|
}
|
|
.icon_2025.view {
|
|
width: 22px;
|
|
height: 16px;
|
|
background-position: -205px -9px;
|
|
}
|
|
.icon_2025.time-big {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -2px -93px;
|
|
}
|
|
.icon_2025.share {
|
|
width: 21px;
|
|
height: 21px;
|
|
background-position: -198px -36px;
|
|
}
|
|
.icon_2025.map-4 {
|
|
width: 18px;
|
|
height: 25px;
|
|
background-position: -152px -92px;
|
|
}
|
|
.icon_2025.link-review {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-position: -27px -128px;
|
|
}
|
|
.icon_2025.angle-bottom {
|
|
width: 15px;
|
|
height: 12px;
|
|
background-position: -188px -156px;
|
|
}
|
|
.icon_2025.angle-top {
|
|
width: 15px;
|
|
height: 12px;
|
|
background-position: -190px -156px;
|
|
transform: rotate(180deg);
|
|
}
|
|
.icon_2025.upload_image {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -86px -91px;
|
|
}
|
|
.icon_2025.remove {
|
|
width: 24px;
|
|
height: 26px;
|
|
background-position: -126px -147px;
|
|
}
|
|
.icon_2025.showroom {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -119px -92px;
|
|
}
|
|
.icon_2025.phone {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-position: -167px -4px;
|
|
}
|
|
.icon_2025.earth {
|
|
width: 22px;
|
|
height: 24px;
|
|
background-position: 0 -125px;
|
|
}
|
|
.icon_2025.copy {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -208px -94px;
|
|
}
|
|
.icon_2025.history {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -45px -126px;
|
|
}
|
|
.icon_2025.download {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -74px -126px;
|
|
}
|
|
.icon_2025.return {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-position: -155px -129px;
|
|
}
|
|
.icon_2025.close {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-position: -160px -149px;
|
|
}
|
|
.icon_2025.print {
|
|
width: 18px;
|
|
height: 19px;
|
|
background-position: -187px -2px;
|
|
}
|
|
.icon_2025.filter {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: 0px -209px;
|
|
}
|
|
.icon_2025.comment {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -84px -25px;
|
|
background-size: 190px 200px;
|
|
}
|
|
.icon_2025.faq {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -129px -127px;
|
|
}
|
|
.icon_2025.tag {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -102px -127px;
|
|
}
|
|
.icon_2025.images {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -164px -209px;
|
|
}
|
|
.icon_2025.like {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -209px -234px;
|
|
}
|
|
.icon_2025.sort_list {
|
|
width: 34px;
|
|
height: 22px;
|
|
background-position: -50px -209px;
|
|
}
|
|
.icon_2025.sort_gird {
|
|
width: 22px;
|
|
height: 23px;
|
|
background-position: -96px -209px;
|
|
}
|
|
.icon_2025.spec {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -130px -209px;
|
|
}
|
|
.icon_2025.list_faq {
|
|
width: 21px;
|
|
height: 24px;
|
|
background-position: -1px -236px;
|
|
}
|
|
.icon_2025.list_raovat {
|
|
width: 21px;
|
|
height: 25px;
|
|
background-position: -52px -236px;
|
|
}
|
|
.icon_2025.list_inbox {
|
|
width: 22px;
|
|
height: 25px;
|
|
background-position: -105px -236px;
|
|
}
|
|
.icon_2025.info_save {
|
|
width: 22px;
|
|
height: 25px;
|
|
background-position: -164px -236px;
|
|
}
|
|
|
|
.icon-star {
|
|
background: url(../images/icon_star.png) no-repeat;
|
|
display: block;
|
|
width: 80px;
|
|
height: 15px;
|
|
background-size: 79px 95px;
|
|
}
|
|
.icon-star.star5 {
|
|
background-position: 0 0;
|
|
}
|
|
.icon-star.star4 {
|
|
background-position: 0 -15px;
|
|
}
|
|
.icon-star.star3 {
|
|
background-position: 0 -30px;
|
|
}
|
|
.icon-star.star2 {
|
|
background-position: 0 -47px;
|
|
}
|
|
.icon-star.star1 {
|
|
background-position: 0 -63px;
|
|
}
|
|
.icon-star.star0 {
|
|
background-position: 0 -78px;
|
|
}
|
|
.icon-star.star-small {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.bg-global {
|
|
background: var(--color-global);
|
|
}
|
|
|
|
.box-select {
|
|
position: relative;
|
|
width: 80px;
|
|
}
|
|
.box-select .select {
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
color: #fff;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
z-index: 2;
|
|
position: relative;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
}
|
|
.box-select .select:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2);
|
|
border-color: var(--color-global);
|
|
}
|
|
.box-select .select option {
|
|
background: var(--color-global);
|
|
}
|
|
.box-select::after {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 7px;
|
|
content: "";
|
|
display: block;
|
|
width: 11px;
|
|
height: 5px;
|
|
z-index: 1;
|
|
background: #d9d9d9;
|
|
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
}
|
|
|
|
.icon_arrow {
|
|
background: #d9d9d9;
|
|
width: 10px;
|
|
height: 6px;
|
|
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
display: block;
|
|
}
|
|
|
|
.header-bottom .box-menu-hover .item {
|
|
border-bottom: 1px solid #ebebeb;
|
|
padding: 6px 10px;
|
|
}
|
|
.header-bottom .box-menu-hover .item:hover .cate-name {
|
|
color: var(--color-global);
|
|
}
|
|
.header-bottom .box-menu-hover .cate-img {
|
|
width: 23px;
|
|
text-align: center;
|
|
margin-right: 15px;
|
|
}
|
|
.header-bottom .box-menu-hover .cate-name {
|
|
width: calc(100% - 38px);
|
|
}
|
|
.header-bottom .box-menu-hover .item:hover .sub-menu {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
.header-bottom .sub-menu {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
left: 225px;
|
|
top: -1px;
|
|
width: 860px;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
|
|
padding: 6px 10px;
|
|
height: 453px;
|
|
opacity: 0;
|
|
transition: opacity 0.5s, transform 0.5s;
|
|
transition: all 0.45s ease-out 0s;
|
|
transform: translate(20px, 0);
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.header-bottom .sub-cate {
|
|
width: 33.3333333333%;
|
|
padding: 10px 10px 0 0;
|
|
margin-top: 10px;
|
|
border-top: 1px solid #efefef;
|
|
}
|
|
.header-bottom .sub-cate li {
|
|
line-height: 30px;
|
|
}
|
|
.header-bottom .sub-cate a:hover {
|
|
color: var(--color-global);
|
|
font-weight: bold;
|
|
}
|
|
.header-bottom .sub-cate:nth-child(1),
|
|
.header-bottom .sub-cate:nth-child(2),
|
|
.header-bottom .sub-cate:nth-child(3) {
|
|
padding: 0 10px 0 0;
|
|
margin-top: 0;
|
|
border-top: 0;
|
|
}
|
|
.header-bottom .header-bottom-right a:hover .buildpc {
|
|
width: 36px;
|
|
height: 24px;
|
|
background-position: -4px -65px;
|
|
}
|
|
.header-bottom .header-bottom-right a:hover .shop {
|
|
background-position: -46px -65px;
|
|
}
|
|
.header-bottom .header-bottom-right a:hover .map-2 {
|
|
background-position: -77px -65px;
|
|
}
|
|
.header-bottom .header-bottom-right a:hover .question {
|
|
background-position: -104px -64px;
|
|
}
|
|
.header-bottom .header-bottom-right a:hover .prduct-save {
|
|
background-position: -140px -64px;
|
|
}
|
|
.header-bottom .header-bottom-right a:hover .article {
|
|
background-position: -172px -63px;
|
|
}
|
|
|
|
.effect-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.effect-image:before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
z-index: 2;
|
|
display: block;
|
|
content: "";
|
|
width: 50%;
|
|
height: 100%;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
|
|
transform: skewX(-25deg);
|
|
cursor: pointer;
|
|
}
|
|
.effect-image:hover:before {
|
|
animation: image 1.1s;
|
|
}
|
|
@keyframes image {
|
|
100% {
|
|
left: 125%;
|
|
}
|
|
}
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
border: 1px solid #d9d9d9;
|
|
}
|
|
|
|
.swiper-button-next:after,
|
|
.swiper-button-prev:after {
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
|
|
#js-slider-big .swiper-button-next {
|
|
right: 0;
|
|
}
|
|
#js-slider-big .swiper-button-prev {
|
|
left: 0;
|
|
}
|
|
|
|
.tabs-list .tabs-item.active {
|
|
background: var(--color-global);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
.tabs-list .tabs-item {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.product-item {
|
|
padding: 12px;
|
|
border: 1px solid #d3d3d3;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
.product-item .product-image {
|
|
display: block;
|
|
height: 240px;
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 5px;
|
|
}
|
|
.product-item .product-image img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
transform: translatey(0);
|
|
transition: 0.2s all ease-in;
|
|
}
|
|
.product-item .product-image:hover img {
|
|
transform: translatey(-5px);
|
|
}
|
|
.product-item .product-image .box-saleoff {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #da251c;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 52px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
.product-item .product-image .box-saleoff::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 42px;
|
|
height: 42px;
|
|
border: 1px dashed #fff;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
}
|
|
.product-item .product-image .icon-save {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.product-item .product-image .icon-remove {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.product-item .name-product {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: #000;
|
|
margin-bottom: 5px;
|
|
}
|
|
.product-item .name-product:hover {
|
|
color: var(--color-title);
|
|
}
|
|
.product-item .price {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: #d80a00;
|
|
}
|
|
.product-item .old-price {
|
|
color: #b0b0b0;
|
|
}
|
|
.product-item .box-shop {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #ff7a00;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.product-item .box-shop .icon_2025.shop {
|
|
width: 15px;
|
|
height: 19px;
|
|
background-position: -49px -23px;
|
|
background-size: 160px 180px;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
.product-item .summary {
|
|
margin-bottom: 5px;
|
|
color: #595959;
|
|
}
|
|
.product-item.save .icon-save {
|
|
right: 30px;
|
|
}
|
|
|
|
.box-best-rated-products .swiper-button-next {
|
|
right: -20px;
|
|
}
|
|
.box-best-rated-products .swiper-button-prev {
|
|
left: -20px;
|
|
}
|
|
|
|
.box-category-homepage .item p:hover {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.item-article {
|
|
display: flex;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #efefef;
|
|
align-items: flex-start;
|
|
}
|
|
.item-article .image-article {
|
|
width: 90px;
|
|
margin-right: 10px;
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
.item-article .image-article img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
transform: translatey(0);
|
|
transition: 0.2s all ease-in;
|
|
}
|
|
.item-article .info {
|
|
width: calc(100% - 100px);
|
|
}
|
|
.item-article .name-article {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #000;
|
|
margin-bottom: 3px;
|
|
}
|
|
.item-article .name-article:hover {
|
|
color: var(--color-title);
|
|
}
|
|
.item-article .summary {
|
|
margin-bottom: 3px;
|
|
font-size: 16px;
|
|
color: #161616;
|
|
}
|
|
.item-article .link-article {
|
|
margin-top: 5px;
|
|
color: var(--color-global);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.more-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 130px;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
font-size: 16px;
|
|
color: var(--color-global);
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
border: 1px solid var(--color-global);
|
|
border-radius: 4px;
|
|
}
|
|
.more-link span {
|
|
font-weight: 700;
|
|
margin-right: 5px;
|
|
}
|
|
.more-link:hover {
|
|
background: var(--color-global);
|
|
color: #fff;
|
|
border: 1px solid var(--color-global);
|
|
}
|
|
.more-link:hover i {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.item-classifieds {
|
|
display: flex;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #efefef;
|
|
align-items: flex-start;
|
|
}
|
|
.item-classifieds .image-classifieds {
|
|
width: 90px;
|
|
margin-right: 10px;
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
.item-classifieds .image-classifieds img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
transform: translatey(0);
|
|
transition: 0.2s all ease-in;
|
|
}
|
|
.item-classifieds .info {
|
|
width: calc(100% - 100px);
|
|
}
|
|
.item-classifieds .summary {
|
|
font-size: 15px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.item-classifieds .name-classifieds {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
.item-classifieds .price {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #d80a00;
|
|
}
|
|
|
|
.box-promotions .box-big {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.box-promotions .box-big::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52.88%, #000000 100%);
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.box-promotions .box-big::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 60px;
|
|
height: 47px;
|
|
background: url(../images/icon-play.png) no-repeat;
|
|
top: 50%;
|
|
left: 50%;
|
|
transition: 0.2s all ease-in;
|
|
transform: translate(-50%, -50%);
|
|
background-size: contain;
|
|
}
|
|
.box-promotions .box-big:hover::after {
|
|
top: 51%;
|
|
}
|
|
.box-promotions .box-big.active::after, .box-promotions .box-big.active::before {
|
|
display: none;
|
|
}
|
|
|
|
.main-footer a {
|
|
display: block;
|
|
margin-bottom: 15px;
|
|
font-size: 16px;
|
|
font-weight: 550;
|
|
}
|
|
.main-footer a:hover {
|
|
color: var(--color-title);
|
|
text-decoration: underline;
|
|
}
|
|
.main-footer .title {
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
padding-bottom: 10px;
|
|
font-size: 22px;
|
|
}
|
|
.main-footer .title::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 75px;
|
|
height: 2px;
|
|
background: var(--color-title);
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.breadcrumb span {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.page-category .list-cate a.active {
|
|
font-weight: 600;
|
|
}
|
|
.page-category .list-cate a:hover {
|
|
color: var(--color-title);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: block;
|
|
border: 1px solid #d3d3d3;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.box-filter label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.page-detail #js-slider-big {
|
|
height: 680px;
|
|
width: 100%;
|
|
}
|
|
|
|
.page-detail #js-slider-big .item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-detail #js-slider-small .item img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
margin: 0 auto;
|
|
}
|
|
.page-detail #js-slider-small .swiper-slide {
|
|
border: 1px solid #b1b1b1;
|
|
width: 100%;
|
|
height: 130px;
|
|
border-radius: 12px;
|
|
}
|
|
.page-detail #js-slider-small .swiper-slide-thumb-active {
|
|
border: 1.5px solid var(--color-title);
|
|
}
|
|
|
|
.box-product-detail .box-shop {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #ff7a00;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.box-product-detail .box-shop .icon_2025.shop {
|
|
width: 15px;
|
|
height: 19px;
|
|
background-position: -49px -23px;
|
|
background-size: 160px 180px;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
.box-product-detail .box-shop p {
|
|
font-weight: 700;
|
|
}
|
|
.box-product-detail .box-summary {
|
|
font-size: 16px;
|
|
}
|
|
.box-product-detail .box-summary li {
|
|
list-style: inside;
|
|
}
|
|
.box-product-detail .btn-more-review {
|
|
font-weight: bold;
|
|
}
|
|
.box-product-detail .box-desc .content {
|
|
width: 100%;
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.box-product-detail .box-desc .content::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100px;
|
|
background: linear-gradient(transparent, #fff);
|
|
}
|
|
.box-product-detail .box-desc .content.active {
|
|
height: auto !important;
|
|
}
|
|
.box-product-detail .box-desc .content.active::after {
|
|
display: none;
|
|
}
|
|
.box-product-detail .box-spec .content {
|
|
width: 100%;
|
|
height: 580px;
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.box-product-detail .box-spec .content::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100px;
|
|
background: linear-gradient(transparent, #fff);
|
|
}
|
|
.box-product-detail .box-spec .content.active {
|
|
height: auto !important;
|
|
}
|
|
.box-product-detail .box-spec .content.active::after {
|
|
display: none;
|
|
}
|
|
.box-product-detail .more-all {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #ff7a00;
|
|
}
|
|
.box-product-detail .more-all i {
|
|
margin-bottom: 4px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.nd p,
|
|
.nd span {
|
|
line-height: 23px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.nd ul {
|
|
margin-top: 10px;
|
|
}
|
|
.nd li {
|
|
list-style: inside;
|
|
}
|
|
|
|
.table table {
|
|
width: 100%;
|
|
}
|
|
|
|
.table td {
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.table td:first-child {
|
|
width: 230px;
|
|
font-weight: bold;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.table tr {
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
.table tr:nth-child(2n+1) {
|
|
background: #fff;
|
|
}
|
|
|
|
#backgroundPopup {
|
|
display: none;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.2784313725);
|
|
border: 1px solid #cecece;
|
|
z-index: 99;
|
|
}
|
|
#backgroundPopup.active {
|
|
display: block;
|
|
}
|
|
|
|
.rating-selection {
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
|
|
.rating-selection input {
|
|
float: right;
|
|
width: 15px;
|
|
height: 15px;
|
|
padding: 0;
|
|
margin: 0 0 0 -15px;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rating-selection .rating-star {
|
|
position: relative;
|
|
float: right;
|
|
display: block;
|
|
width: 28px;
|
|
height: 26px;
|
|
background: url(../images/star_min.png) 0 -33px;
|
|
cursor: pointer;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.rating-selection .rating-star:hover {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.rating-selection .rating-star:hover,
|
|
.rating-star:hover ~ .rating-star {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.rating-selection .rating:hover .rating-star:hover,
|
|
.rating:hover .rating-star:hover ~ .rating-star,
|
|
.rating-input:checked ~ .rating-star {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.form-input input,
|
|
.form-input textarea {
|
|
width: 100%;
|
|
height: 44px;
|
|
padding: 0 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid #c1c1c1;
|
|
font-size: 13px;
|
|
color: #9c9c9c;
|
|
}
|
|
.form-input input:focus,
|
|
.form-input textarea:focus {
|
|
outline: 2px solid var(--color-global);
|
|
border: none;
|
|
}
|
|
.form-input textarea {
|
|
height: 100px;
|
|
padding: 15px 20px;
|
|
resize: none;
|
|
}
|
|
|
|
.padding {
|
|
border: 1px solid #cdcdcd;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
margin: 20px auto 0 auto;
|
|
border-radius: 4px;
|
|
}
|
|
.padding a {
|
|
border-right: 1px solid #cdcdcd;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.padding a:last-child {
|
|
border: 0;
|
|
}
|
|
.padding a:hover,
|
|
.padding .active {
|
|
border-radius: 4px;
|
|
border: 1px solid #1877f2;
|
|
color: #1877f2;
|
|
}
|
|
|
|
.select-two-arrow {
|
|
position: relative;
|
|
background: #fff;
|
|
height: 40px;
|
|
border: 1px solid #d5d5d5;
|
|
border-radius: 4px;
|
|
line-height: 40px;
|
|
}
|
|
.select-two-arrow select {
|
|
position: relative;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
outline: 0;
|
|
width: 100%;
|
|
padding: 0 30px 0 10px;
|
|
z-index: 2;
|
|
}
|
|
.select-two-arrow::before {
|
|
position: absolute;
|
|
content: "";
|
|
right: 7px;
|
|
top: 5px;
|
|
width: 11px;
|
|
height: 17px;
|
|
background: url(../images/icon_2025.png) no-repeat;
|
|
background-size: 228px 260px;
|
|
display: block;
|
|
background-position: -212px -176px;
|
|
transform: rotate(270deg);
|
|
z-index: 1;
|
|
}
|
|
.select-two-arrow::after {
|
|
position: absolute;
|
|
content: "";
|
|
right: 7px;
|
|
bottom: 5px;
|
|
width: 11px;
|
|
height: 17px;
|
|
background: url(../images/icon_2025.png) no-repeat;
|
|
background-size: 228px 260px;
|
|
display: block;
|
|
background-position: -212px -176px;
|
|
transform: rotate(90deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.select-arrow {
|
|
position: relative;
|
|
background: #fff;
|
|
height: 40px;
|
|
border: 1px solid #d5d5d5;
|
|
border-radius: 4px;
|
|
line-height: 40px;
|
|
}
|
|
.select-arrow select {
|
|
position: relative;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
outline: 0;
|
|
width: 100%;
|
|
padding: 0 30px 0 10px;
|
|
z-index: 2;
|
|
}
|
|
.select-arrow::before {
|
|
position: absolute;
|
|
content: "";
|
|
right: 10px;
|
|
top: 15px;
|
|
z-index: 1;
|
|
width: 16px;
|
|
height: 8px;
|
|
background: #777777;
|
|
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
}
|
|
|
|
.box-form-store input {
|
|
height: 40px;
|
|
}
|
|
|
|
.form-input.faq input {
|
|
height: 65px;
|
|
background: #f8f8f8;
|
|
border: 0;
|
|
border-bottom: 1px solid #dddddd;
|
|
outline: 0;
|
|
}
|
|
|
|
.sort_list .product-item {
|
|
border: 0;
|
|
border-bottom: 1px solid #efefef;
|
|
border-radius: 0;
|
|
}
|
|
.sort_list .product-image {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
.sort_list .info-product {
|
|
width: calc(100% - 170px);
|
|
}
|
|
|
|
#content-desciption .content.active {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.page-form-classifieds textarea {
|
|
height: 230px;
|
|
}
|
|
|
|
.page-account .left .item.active,
|
|
.page-account .left .item:hover {
|
|
background: #f5f2ff;
|
|
border-left: 3px solid #ac8cb4;
|
|
}
|
|
.page-account .left .item.active span,
|
|
.page-account .left .item:hover span {
|
|
font-weight: bold;
|
|
color: #462f91;
|
|
}
|
|
.page-account .left .item.active .list_faq,
|
|
.page-account .left .item:hover .list_faq {
|
|
background-position: -25px -211px;
|
|
}
|
|
.page-account .left .item.active .list_raovat,
|
|
.page-account .left .item:hover .list_raovat {
|
|
background-position: -75px -211px;
|
|
}
|
|
.page-account .left .item.active .list_inbox,
|
|
.page-account .left .item:hover .list_inbox {
|
|
background-position: -135px -211px;
|
|
}
|
|
.page-account .left .item.active .info_save,
|
|
.page-account .left .item:hover .info_save {
|
|
background-position: -187px -235px;
|
|
}
|
|
.page-account .icon_2025.shop {
|
|
width: 15px;
|
|
height: 19px;
|
|
background-position: -49px -23px;
|
|
background-size: 160px 180px;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) and (max-width: 1550px) {
|
|
.box-product-detail #js-slider-big img {
|
|
display: block;
|
|
height: 470px;
|
|
margin: 0 auto;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
@media (max-width: 1600px) {
|
|
#js-box-list-review .list-review {
|
|
max-height: 450px;
|
|
}
|
|
}/*# sourceMappingURL=style.css.map */ |