1032 lines
19 KiB
CSS
1032 lines
19 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;
|
||
|
|
height: 3px;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-mb {
|
||
|
|
max-width: 640px !important;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 12px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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.buildpc {
|
||
|
|
width: 36px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -24px -35px;
|
||
|
|
}
|
||
|
|
.icon_2025.shop {
|
||
|
|
width: 22px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -70px -35px;
|
||
|
|
}
|
||
|
|
.icon_2025.map-2 {
|
||
|
|
width: 15px;
|
||
|
|
height: 23px;
|
||
|
|
background-position: -26px -3px;
|
||
|
|
}
|
||
|
|
.icon_2025.prduct-save {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -133px -35px;
|
||
|
|
}
|
||
|
|
.icon_2025.article {
|
||
|
|
width: 30px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -162px -35px;
|
||
|
|
}
|
||
|
|
.icon_2025.question {
|
||
|
|
width: 25px;
|
||
|
|
height: 25px;
|
||
|
|
background-position: -100px -35px;
|
||
|
|
}
|
||
|
|
.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.time {
|
||
|
|
width: 15px;
|
||
|
|
height: 14.5px;
|
||
|
|
background-position: -188px -172px;
|
||
|
|
}
|
||
|
|
.icon_2025.link {
|
||
|
|
width: 14px;
|
||
|
|
height: 12px;
|
||
|
|
background-position: -212px -130px;
|
||
|
|
}
|
||
|
|
.icon_2025.map-3 {
|
||
|
|
width: 13px;
|
||
|
|
height: 18px;
|
||
|
|
background-position: -49px -3px;
|
||
|
|
}
|
||
|
|
.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.faq {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -129px -127px;
|
||
|
|
}
|
||
|
|
.icon_2025.article {
|
||
|
|
width: 30px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -162px -35px;
|
||
|
|
}
|
||
|
|
.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.mouse {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -160px -170px;
|
||
|
|
}
|
||
|
|
.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.filter {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: 0px -209px;
|
||
|
|
}
|
||
|
|
.icon_2025.time-gray {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
background-position: -34px -96px;
|
||
|
|
}
|
||
|
|
.icon_2025.spec {
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
background-position: -130px -209px;
|
||
|
|
}
|
||
|
|
.icon_2025.tag {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -102px -127px;
|
||
|
|
}
|
||
|
|
.icon_2025.comment {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -84px -25px;
|
||
|
|
background-size: 190px 200px;
|
||
|
|
}
|
||
|
|
.icon_2025.earth {
|
||
|
|
width: 22px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: 0 -125px;
|
||
|
|
}
|
||
|
|
.icon_2025.images {
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
background-position: -164px -209px;
|
||
|
|
}
|
||
|
|
.icon_2025.like {
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
background-position: -209px -234px;
|
||
|
|
}
|
||
|
|
.icon_2025.shop-blue {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -99px -172px;
|
||
|
|
}
|
||
|
|
.icon_2025.showroom {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -119px -92px;
|
||
|
|
}
|
||
|
|
.icon_2025.phone {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
background-position: -167px -4px;
|
||
|
|
}
|
||
|
|
.icon_2025.upload_image {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-position: -86px -91px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-star {
|
||
|
|
background: url(../images/icon_star.png) no-repeat;
|
||
|
|
display: block;
|
||
|
|
width: 58px;
|
||
|
|
height: 10px;
|
||
|
|
background-size: 58px 75px;
|
||
|
|
}
|
||
|
|
.icon-star.star5 {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
.icon-star.star4 {
|
||
|
|
background-position: 0 -14px;
|
||
|
|
}
|
||
|
|
.icon-star.star3 {
|
||
|
|
background-position: 0 -26px;
|
||
|
|
}
|
||
|
|
.icon-star.star2 {
|
||
|
|
background-position: 0 -39px;
|
||
|
|
}
|
||
|
|
.icon-star.star1 {
|
||
|
|
background-position: 0 -52px;
|
||
|
|
}
|
||
|
|
.icon-star.star0 {
|
||
|
|
background-position: 0 -64px;
|
||
|
|
}
|
||
|
|
.icon-star.star-small {
|
||
|
|
width: 15px;
|
||
|
|
height: 15px;
|
||
|
|
background-position: 0 0;
|
||
|
|
background-size: 85px 105px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-select {
|
||
|
|
position: relative;
|
||
|
|
width: 75px;
|
||
|
|
}
|
||
|
|
.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: 0;
|
||
|
|
top: 7px;
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 11px;
|
||
|
|
height: 5px;
|
||
|
|
z-index: 1;
|
||
|
|
background: #d9d9d9;
|
||
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_arrow {
|
||
|
|
background: #fff;
|
||
|
|
width: 10px;
|
||
|
|
height: 6px;
|
||
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_bar {
|
||
|
|
width: 25px;
|
||
|
|
height: 25px;
|
||
|
|
display: block;
|
||
|
|
background: url(../images/icon_bar.png) no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_fix {
|
||
|
|
display: block;
|
||
|
|
background: url(../images/icon_fixed.png) no-repeat;
|
||
|
|
background-size: 100px 40px;
|
||
|
|
}
|
||
|
|
.icon_fix.home {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: 1px 1px;
|
||
|
|
}
|
||
|
|
.icon_fix.product {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -19px 2px;
|
||
|
|
}
|
||
|
|
.icon_fix.settings {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -40px 2px;
|
||
|
|
}
|
||
|
|
.icon_fix.faq {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -60px 2px;
|
||
|
|
}
|
||
|
|
.icon_fix.user {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-position: -80px 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_edit {
|
||
|
|
display: block;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(../images/icon_edit.png) no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_remove {
|
||
|
|
display: block;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(../images/icon_remove.png) no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-pagination-bullet {
|
||
|
|
width: 7px;
|
||
|
|
height: 7px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #cdcdcd;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||
|
|
width: 31px;
|
||
|
|
background: #ff7a00;
|
||
|
|
border-radius: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banner .swiper-pagination-bullet {
|
||
|
|
width: 7px;
|
||
|
|
height: 7px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #fff;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||
|
|
width: 31px;
|
||
|
|
background: #f9ef06;
|
||
|
|
border-radius: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-item {
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #d3d3d3;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
.product-item .product-image {
|
||
|
|
display: block;
|
||
|
|
height: 170px;
|
||
|
|
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: 35px;
|
||
|
|
height: 35px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #da251c;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 36px;
|
||
|
|
font-size: 9px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.product-item .product-image .box-saleoff::before {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
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: 13px;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.product-item .name-product:hover {
|
||
|
|
color: var(--color-title);
|
||
|
|
}
|
||
|
|
.product-item .price {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 15px;
|
||
|
|
color: #d80a00;
|
||
|
|
}
|
||
|
|
.product-item .old-price {
|
||
|
|
font-size: 15px;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.homepage .box-category-homepage .swiper-wrapper {
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.homepage .box-category-homepage .swiper-slide {
|
||
|
|
margin-top: 0 !important;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.homepage .box-category-homepage .swiper-pagination {
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
.homepage .box-menu-homepage .faq {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-size: 130px 52px;
|
||
|
|
background-position: -82px 1px;
|
||
|
|
filter: brightness(0) saturate(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
#main-menu .faq {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-size: 130px 52px;
|
||
|
|
background-position: -82px 1px;
|
||
|
|
filter: brightness(0) saturate(100%);
|
||
|
|
}
|
||
|
|
#main-menu .product {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-size: 125px 52px;
|
||
|
|
background-position: -27px 2px;
|
||
|
|
filter: brightness(0) saturate(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-article {
|
||
|
|
display: flex;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
border-bottom: 1px solid #efefef;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
.item-article .image-article {
|
||
|
|
width: 80px;
|
||
|
|
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% - 90px);
|
||
|
|
}
|
||
|
|
.item-article .name-article {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 15px;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
}
|
||
|
|
.item-article .name-article:hover {
|
||
|
|
color: var(--color-title);
|
||
|
|
}
|
||
|
|
.item-article .summary {
|
||
|
|
margin-bottom: 3px;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #161616;
|
||
|
|
}
|
||
|
|
.item-article .link-article {
|
||
|
|
margin-top: 5px;
|
||
|
|
color: var(--color-global);
|
||
|
|
text-decoration: underline;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-classifieds {
|
||
|
|
display: flex;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-bottom: 1px solid #efefef;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
.item-classifieds .image-classifieds {
|
||
|
|
width: 80px;
|
||
|
|
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% - 90px);
|
||
|
|
}
|
||
|
|
.item-classifieds .summary {
|
||
|
|
font-size: 15px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.item-classifieds .name-classifieds {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
.item-classifieds .price {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 18px;
|
||
|
|
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: 10px;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fix-icon-footer .item.active .home, .fix-icon-footer .item:hover .home {
|
||
|
|
background-position: 1px -20px;
|
||
|
|
}
|
||
|
|
.fix-icon-footer .item.active .product, .fix-icon-footer .item:hover .product {
|
||
|
|
background-position: -19px -19px;
|
||
|
|
}
|
||
|
|
.fix-icon-footer .item.active .settings, .fix-icon-footer .item:hover .settings {
|
||
|
|
background-position: -40px -19px;
|
||
|
|
}
|
||
|
|
.fix-icon-footer .item.active .faq, .fix-icon-footer .item:hover .faq {
|
||
|
|
background-position: -60px -19px;
|
||
|
|
}
|
||
|
|
.fix-icon-footer .item.active .user, .fix-icon-footer .item:hover .user {
|
||
|
|
background-position: -80px -19px;
|
||
|
|
}
|
||
|
|
.fix-icon-footer .item.active span, .fix-icon-footer .item:hover span {
|
||
|
|
color: var(--color-title);
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay {
|
||
|
|
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: 99999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
#main-menu {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: -125%;
|
||
|
|
bottom: 0;
|
||
|
|
width: 80%;
|
||
|
|
background: #fff;
|
||
|
|
z-index: 999999;
|
||
|
|
transition: all 0.5s ease;
|
||
|
|
box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.1490196078);
|
||
|
|
}
|
||
|
|
|
||
|
|
#main-menu.active {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#main-menu .background-menu {
|
||
|
|
padding: 12px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-product-detail #js-slider-small .item img {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
-o-object-fit: cover;
|
||
|
|
object-fit: cover;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-radius: 12px;
|
||
|
|
}
|
||
|
|
.page-product-detail #js-slider-small .swiper-slide {
|
||
|
|
border: 1px solid #b1b1b1;
|
||
|
|
width: 100%;
|
||
|
|
height: 80px;
|
||
|
|
border-radius: 12px;
|
||
|
|
}
|
||
|
|
.page-product-detail #js-slider-small .swiper-slide-thumb-active {
|
||
|
|
border: 1.5px solid var(--color-title);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-product-detail .box-shop {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background: #ff7a00;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-shop .icon_2025.shop {
|
||
|
|
width: 15px;
|
||
|
|
height: 19px;
|
||
|
|
background-position: -49px -23px;
|
||
|
|
background-size: 160px 180px;
|
||
|
|
filter: brightness(0) invert(1);
|
||
|
|
}
|
||
|
|
.page-product-detail .box-shop p {
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-summary {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-summary li {
|
||
|
|
list-style: inside;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-desc .content {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-desc .content::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
height: 100px;
|
||
|
|
background: linear-gradient(transparent, #fff);
|
||
|
|
}
|
||
|
|
.page-product-detail .box-desc .content.active {
|
||
|
|
height: auto !important;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-desc .content.active::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-spec .content {
|
||
|
|
width: 100%;
|
||
|
|
height: 580px;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-spec .content::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
height: 100px;
|
||
|
|
background: linear-gradient(transparent, #fff);
|
||
|
|
}
|
||
|
|
.page-product-detail .box-spec .content.active {
|
||
|
|
height: auto !important;
|
||
|
|
}
|
||
|
|
.page-product-detail .box-spec .content.active::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.page-product-detail .more-all {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
color: #ff7a00;
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
.page-product-detail .more-all i {
|
||
|
|
margin-bottom: 2px;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.page-product-detail .more-all .angle-top {
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nd p,
|
||
|
|
.nd span {
|
||
|
|
line-height: 23px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.nd ul {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.nd li {
|
||
|
|
list-style: inside;
|
||
|
|
}
|
||
|
|
|
||
|
|
#backgroundPopup {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
border: 1px solid #cecece;
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
#backgroundPopup.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||
|
|
}/*# sourceMappingURL=style.css.map */
|