: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 236px; display: block; &.map { width: 20px; height: 26px; background-position: 1px 0px; } &.search { width: 24px; height: 24px; background-position: -70px 0; } &.search-2 { width: 24px; height: 24px; background-position: -102px 0; } &.user { width: 26px; height: 26px; background-position: -133px 0px; } &.bar { width: 18px; height: 18px; background-position: 1px -40px; } &.buildpc { width: 36px; height: 24px; background-position: -24px -35px; } &.shop { width: 22px; height: 24px; background-position: -70px -35px; } &.shop-3 { width: 22px; height: 24px; background-position: -180px -163px; } &.map-2 { width: 15px; height: 23px; background-position: -26px -3px; } &.map-3 { width: 13px; height: 18px; background-position: -49px -3px; } &.question { width: 25px; height: 25px; background-position: -100px -35px; } &.prduct-save { width: 24px; height: 24px; background-position: -133px -35px; } &.article { width: 30px; height: 24px; background-position: -162px -35px; } &.heart { width: 24px; height: 24px; background-position: -98px -123px; } &.heart-2 { width: 24px; height: 24px; background-position: -126px -151px; } &.shop-blue { width: 24px; height: 24px; background-position: -100px -147px; } &.link { width: 14px; height: 10px; background-position: -212px -108px; } &.time { width: 15px; height: 14.5px; background-position: -188px -147.5px; } &.time-gray { width: 16px; height: 16px; background-position: -34px -73px; } &.mouse { width: 20px; height: 20px; background-position: -160px -145px; } &.facebook { width: 41px; height: 40px; background-position: 0 -135px; } &.zalo { width: 41px; height: 40px; background-position: -50px -135px; } &.home { width: 20px; height: 20px; background-position: -207px -129px; } &.angle-right { width: 11px; height: 17px; background-position: -212px -152px; } &.view { width: 22px; height: 16px; background-position: -205px -8px; } &.time-big { width: 22px; height: 22px; background-position: -2px -70px; } &.share { width: 21px; height: 21px; background-position: -198px -36px; } &.map-4 { width: 18px; height: 25px; background-position: -152px -69px; } &.link-review { width: 18px; height: 18px; background-position: -27px -104px; } &.angle-bottom { width: 15px; height: 12px; background-position: -190px -133px; } &.angle-top { width: 15px; height: 12px; background-position: -190px -133px; transform: rotate(180deg); } &.upload_image { width: 24px; height: 24px; background-position: -88px -70px; } &.remove { width: 24px; height: 26px; background-position: -126px -124px; } &.showroom { width: 24px; height: 24px; background-position: -119px -69px; } &.phone { width: 18px; height: 18px; background-position: -167px -4px; } &.earth { width: 22px; height: 24px; background-position: 0 -102px; } &.copy { width: 20px; height: 20px; background-position: -208px -71px; } &.history { width: 24px; height: 24px; background-position: -45px -102px; } &.download { width: 22px; height: 22px; background-position: -74px -102px; } &.return { width: 18px; height: 18px; background-position: -155px -105px; } &.close { width: 16px; height: 16px; background-position: -160px -126px; } &.print { width: 18px; height: 19px; background-position: -187px -4px; } &.filter { width: 20px; height: 20px; background-position: 0px -187px; } &.comment { width: 20px; height: 20px; background-position: -84px -25px; background-size: 190px 175px; } &.faq { width: 20px; height: 20px; background-position: -129px -105px; } &.tag { width: 20px; height: 20px; background-position: -102px -105px; } &.images { width: 22px; height: 22px; background-position: -164px -186px; } &.like { width: 22px; height: 22px; background-position: -209px -213px; } &.sort_list { width: 34px; height: 22px; background-position: -50px -185px; } &.sort_gird { width: 22px; height: 22px; background-position: -96px -186px; } &.spec { width: 22px; height: 22px; background-position: -130px -186px; } &.list_faq { width: 21px; height: 24px; background-position: -1px -211px; } &.list_raovat { width: 21px; height: 25px; background-position: -52px -211px; } &.list_inbox { width: 22px; height: 25px; background-position: -105px -211px; } &.info_save { width: 22px; height: 25px; background-position: -164px -211px; } } .icon-star { background: url(../images/icon_star.png) no-repeat; display: block; width: 80px; height: 15px; background-size: 79px 95px; &.star5 { background-position: 0 0; } &.star4 { background-position: 0 -15px; } &.star3 { background-position: 0 -30px; } &.star2 { background-position: 0 -47px; } &.star1 { background-position: 0 -63px; } &.star0 { background-position: 0 -78px; } &.star-small { width: 15px; height: 15px; background-position: 0 0; } } .bg-global { background: var(--color-global); } .box-select { position: relative; width: 80px; .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; &:focus { outline: none; box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2); border-color: var(--color-global); } option { background: var(--color-global); } } &::after { position: absolute; right: 10px; 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: #d9d9d9; width: 10px; height: 6px; 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; &:hover .cate-name { color: var(--color-global); } } .cate-img { width: 23px; text-align: center; margin-right: 15px; } .cate-name { width: calc(100% - 38px); } .item:hover .sub-menu { visibility: visible; opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .sub-menu { position: absolute; visibility: hidden; left: 225px; top: -1px; width: 860px; background: #fff; border-radius: 5px; -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1); padding: 6px 10px; height: 453px; opacity: 0; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; -webkit-transition: all 0.45s ease-out 0s; transition: all 0.45s ease-out 0s; -webkit-transform: translate(20px, 0); transform: translate(20px, 0); overflow: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .sub-cate { width: calc(100% / 3); padding: 10px 10px 0 0; margin-top: 10px; border-top: 1px solid #efefef; li { line-height: 30px; } a:hover { color: var(--color-global); font-weight: bold; } } .sub-cate:nth-child(1), .sub-cate:nth-child(2), .sub-cate:nth-child(3) { padding: 0 10px 0 0; margin-top: 0; border-top: 0; } } .effect-image { position: relative; overflow: hidden; &:before { position: absolute; top: 0; left: -100%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); cursor: pointer; } &:hover:before { -webkit-animation: image 1.1s; animation: image 1.1s; } } @-webkit-keyframes image { 100% { left: 125%; } } @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; } .tabs-list { .tabs-item.active { background: var(--color-global); color: #fff; font-weight: 700; } .tabs-item { font-weight: 400; } } .product-item { padding: 12px; border: 1px solid #d3d3d3; background: #fff; border-radius: 8px; .product-image { display: block; height: 240px; width: 100%; position: relative; margin-bottom: 5px; img { display: block; width: 100%; height: 100%; object-fit: contain; transform: translatey(0); transition: 0.2s all ease-in; } &:hover { img { transform: translatey(-5px); } } .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; &::before { position: absolute; content: ""; width: 42px; height: 42px; border: 1px dashed #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; } } .icon-save { position: absolute; right: 0; top: 0; } .icon-remove { position: absolute; right: 0; top: 0; } } .name-product { font-weight: 700; font-size: 18px; color: #000; margin-bottom: 5px; &:hover { color: var(--color-title); } } .price { font-weight: 700; font-size: 18px; color: #d80a00; margin-bottom: 5px; } .old-price { color: #b0b0b0; } .box-shop { width: 24px; height: 24px; background: #ff7a00; border-radius: 50%; display: flex; align-items: center; justify-content: center; .icon_2025.shop { width: 15px; height: 19px; background-position: -49px -23px; background-size: 160px 160px; filter: brightness(0) invert(1); } } .summary { margin-bottom: 5px; color: #595959; } &.save { .icon-save { right: 30px; } } } .box-best-rated-products { .swiper-button-next { right: -20px; } .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; .image-article { width: 90px; margin-right: 10px; display: block; margin-top: 4px; img { display: block; width: 100%; height: 100%; object-fit: contain; transform: translatey(0); transition: 0.2s all ease-in; } } .info { width: calc(100% - 100px); } .name-article { font-weight: bold; font-size: 16px; color: #000; margin-bottom: 3px; &:hover { color: var(--color-title); } } .summary { margin-bottom: 3px; font-size: 16px; color: #161616; } .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; span { font-weight: 700; margin-right: 5px; } &:hover { background: var(--color-global); color: #fff; border: 1px solid var(--color-global); i { filter: brightness(0) invert(1); } } } .item-classifieds { display: flex; padding-bottom: 10px; border-bottom: 1px solid #efefef; align-items: flex-start; .image-classifieds { width: 90px; margin-right: 10px; display: block; margin-top: 4px; img { display: block; width: 100%; height: 100%; object-fit: contain; transform: translatey(0); transition: 0.2s all ease-in; } } .info { width: calc(100% - 100px); } .summary { font-size: 15px; margin-bottom: 5px; } .name-classifieds { font-weight: bold; font-size: 18px; } .price { font-weight: bold; font-size: 20px; color: #d80a00; } } .box-promotions { .box-big { position: relative; border-radius: 12px; overflow: hidden; &::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; } &::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; } &:hover { &::after { top: 51%; } } &.active { &::after, &::before { display: none; } } } } .main-footer { a { display: block; margin-bottom: 15px; font-size: 16px; font-weight: 550; &:hover { color: var(--color-title); text-decoration: underline; } } .title { margin-bottom: 15px; position: relative; padding-bottom: 10px; font-size: 22px; &::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; } &: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%; object-fit: contain; display: block; margin: 0 auto; } } .page-detail #js-slider-small { .item { img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0 auto; } } .swiper-slide { border: 1px solid #b1b1b1; width: 100%; height: 130px; border-radius: 12px; } .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; .icon_2025.shop { width: 15px; height: 19px; background-position: -49px -23px; background-size: 160px 160px; filter: brightness(0) invert(1); } p { font-weight: 700; } } .box-summary { font-size: 16px; li { list-style: inside; } } .btn-more-review { font-weight: bold; } .box-desc { .content { width: 100%; display: block; overflow: hidden; position: relative; &::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff)); background: linear-gradient(transparent, #fff); } &.active { height: auto !important; &::after { display: none; } } } } .box-spec { .content { width: 100%; height: 580px; display: block; overflow: hidden; position: relative; &::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff)); background: linear-gradient(transparent, #fff); } &.active { height: auto !important; &::after { display: none; } } } } .more-all { display: flex; justify-content: center; align-items: center; color: #ff7a00; i { margin-bottom: 4px; margin-left: 5px; } } } .nd { p, span { line-height: 23px; margin-bottom: 10px; } ul { margin-top: 10px; } 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: #00000047; border: 1px solid #cecece; z-index: 99; &.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, textarea { width: 100%; height: 44px; padding: 0 20px; border-radius: 4px; border: 1px solid #c1c1c1; font-size: 13px; color: #9c9c9c; &:focus { outline: 2px solid var(--color-global); border: none; } } textarea { height: 100px; padding: 15px 20px; resize: none; } } .padding { border: 1px solid #cdcdcd; width: fit-content; margin: 20px auto 0 auto; border-radius: 4px; a { border-right: 1px solid #cdcdcd; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 40px; width: 40px; height: 40px; &:last-child { border: 0; } } a:hover, .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 { position: relative; appearance: none; border: 0; background: transparent; outline: 0; width: 100%; padding: 0 30px 0 10px; z-index: 2; } &::before { position: absolute; content: ""; right: 7px; top: 5px; width: 11px; height: 17px; background: url(../images/icon_2025.png) no-repeat; background-size: 228px 175px; display: block; background-position: -212px -152px; transform: rotate(270deg); z-index: 1; } &::after { position: absolute; content: ""; right: 7px; bottom: 5px; width: 11px; height: 17px; background: url(../images/icon_2025.png) no-repeat; background-size: 228px 175px; display: block; background-position: -212px -152px; 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 { position: relative; appearance: none; border: 0; background: transparent; outline: 0; width: 100%; padding: 0 30px 0 10px; z-index: 2; } &::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); } } .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; } .product-image { width: 160px; height: 160px; } .info-product { width: calc(100% - 170px); } } #content-desciption { .content.active { height: 100% !important; } } .page-form-classifieds textarea { height: 230px; } .page-account { .left { .item.active, .item:hover { background: #f5f2ff; border-left: 3px solid #ac8cb4; span { font-weight: bold; color: #462f91; } .list_faq { background-position: -25px -211px; } .list_raovat { background-position: -75px -211px; } .list_inbox { background-position: -135px -211px; } .info_save { background-position: -185px -211px; } } } .icon_2025.shop { width: 15px; height: 19px; background-position: -49px -23px; background-size: 160px 160px; filter: brightness(0) invert(1); } } @media (max-width: 1600px) { #js-box-list-review { .list-review { max-height: 450px; } } }