@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; } body { color: #222; font-family: "Inter", sans-serif; margin: 0 auto; background: #fff; font-weight: normal; } html { font-size: 100%; font-family: "Inter", sans-serif; } img { max-width: 100%; height: auto; } a { text-decoration: none; color: black; } .clearfix { content: ""; clear: both; } ul, li { list-style: none; } table { border-collapse: collapse; width: 100%; } .ul, .ol { margin: 0; padding: 0; list-style: none; } .d-flex { display: flex !important; } .d-block { display: block; } .flex-wrap { flex-wrap: wrap !important; } .text-center { text-align: center !important; } .align-items { align-items: center !important; } .space-between { justify-content: space-between !important; } .space-center { justify-content: center !important; } .d-block { display: block !important; } .flex-direction { flex-direction: column; } .container { padding: 0 10px; max-width: 1210px; margin: 0 auto; } .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .icon_2023 { background: url(../images/icon_2023.png) no-repeat; background-size: 150px 108px; display: block; } .global-header { .content-main-header { padding: 25px 0; } .logo { width: 130px; margin-right: 50px; } .header-mid { width: 570px; margin-right: 30px; .item { margin-right: 20px; text-transform: uppercase; &:last-child { margin-right: 0; } &:hover { color: #ff5c00; } } } .header-right { width: calc(100% - 130px - 80px - 570px); .item { margin: 0 10px; &:last-child { margin-right: 0; } } .txt { padding-left: 10px; span { padding-left: 5px; } } .box-cart { position: relative; .icon-counter { position: absolute; top: -2px; right: -8px; width: 17px; height: 17px; background: #ff5c00; font-size: 13px; font-weight: 700; text-align: center; color: #fff; border-radius: 50%; line-height: 17px; } } } .icon_2023 { &.account { width: 25px; height: 28px; background-position: 0px 0px; filter: grayscale(100%); } &.cart { width: 27px; height: 30px; background-position: -43px 0px; filter: grayscale(100%); } } } .form__input { width: 185px; border-radius: 20px; &:focus-within { border: 1px solid #ff5c00; .search-form { border: none; } } } .form__input .search-form { border-radius: 20px; overflow: hidden; background: #fff; position: relative; width: 100%; border: 1px solid #ff5c00; } .form__input .submit-search { position: absolute; right: 0; bottom: 0; border: 0; width: 40px; height: 40px; font-weight: 300; background: transparent; cursor: pointer; } .form__input .icon_2023.search { width: 25px; height: 25px; background-position: -124px -33px; } .form__input .text_search { border: 0; padding: 0 5px 0 10px; width: calc(100% - 40px); height: 100%; outline: none; color: #a0a0a0; font-size: 14px; } .form__input .searh-form-container { float: left; width: calc(100% - 60px); height: 40px; } .product-flash-sale { margin-top: 35px; .title { display: flex; align-items: center; justify-content: center; h2 { font-family: "Playfair Display"; font-size: 40px; color: #ff5c00; font-weight: 400; text-transform: uppercase; padding-right: 20px; } } .product-time-holder { display: flex; align-items: center; margin-left: 10px; .item-time { margin-right: 14px; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; flex-direction: column; b { background: linear-gradient(180deg, #595959 0%, #000000 100%); border-radius: 5px; width: 35px; height: 35px; text-align: center; line-height: 35px; color: #fff; font-weight: 700; position: relative; font-size: 16px; &:last-child { margin: 0; } &::after { content: ":"; position: absolute; right: -10px; color: #000; } } &:last-child { b { margin: 0; &::after { content: none; } } } } } .more-all { color: #ff5c00; font-weight: 700; } .product-list { margin-top: 20px; } } .product-item-deal { background: #ffffff; border: 1px solid #ff5c00; border-radius: 30px; padding: 20px; width: calc(100% / 3 - 15px); margin-right: 15px; .image-product { display: block; position: relative; height: 450px; overflow: hidden; border-radius: 26px; img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0 auto; transition: 0.5s all; transform: scale(1); object-fit: cover; } &:hover { img { transform: scale(1.05); object-fit: cover; } } .saleoff { position: absolute; left: 0; top: 0; width: 70px; height: 40px; background: #ff5c00; color: #fff; font-weight: 600; font-size: 15px; line-height: 40px; text-align: center; border-radius: 25px; &:hover { background: #fff; color: #ff5c00; } } } .info-product { .product-title { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 35px; margin-top: 20px; font-weight: 500; &:hover { color: #ff5c00; } } } .content-info { margin-right: 30px; } .price { font-size: 20px; font-weight: 700; text-align: center; color: #000; display: block; margin-right: 10px; } .old-price { font-size: 14px; color: #b4b4b4; text-align: center; display: block; } .product-price-main { margin: 10px 0; } .buy-cart { width: 50px; height: 50px; border-radius: 50%; background: #ffc09c; display: flex; align-items: center; justify-content: center; margin-top: 30px; &:hover { background: #ff5c00; } } .icon_2023 { &.cart { width: 27px; height: 30px; background-position: -88px -35px; } } .deal-count { position: relative; width: 100%; height: 18px; background: #f0f0f0; border-radius: 9px; b { text-align: center; color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; display: block; z-index: 9; position: absolute; left: 50%; transform: translate(-50%, 0); } .count-bg { position: absolute; left: 1px; bottom: 0; background: linear-gradient(90deg, #ff5c00 50%, #ff9900 100%); border-radius: 9px; height: 18px; display: block; z-index: 1; } } } .homepage { .banner-sale-home { margin-top: 10px; .item { display: block; width: 50%; margin-right: 10px; &:last-child { margin-right: 0; } } } .product-new { margin-top: 57px; .title { margin-bottom: 28px; h2 { font-size: 36px; font-weight: 400; font-family: "Playfair Display"; text-transform: uppercase; margin-bottom: 10px; } p { color: #575757; font-weight: 400; font-size: 20px; margin-bottom: 15px; } a { color: #ff5c00; font-weight: 700; font-size: 16px; } i { font-weight: 700; } } .product-list { margin-right: -15px; } } .list-product-collection { margin-top: 10px; .item { margin-right: 15px; &:last-child { margin-right: 0; } } } .product-saleoff { margin-top: 57px; .title { margin-bottom: 28px; h2 { font-size: 36px; font-weight: 400; font-family: "Playfair Display"; text-transform: uppercase; margin-bottom: 10px; } a { color: #ff5c00; font-weight: 700; font-size: 16px; } i { font-weight: 700; } } .product-list { margin-right: -15px; .product-item { border: 1px solid #959595; &:hover { } } } } .feedback-customer { margin-top: 57px; .title { margin-bottom: 28px; h2 { font-size: 36px; font-weight: 400; font-family: "Playfair Display"; text-transform: uppercase; margin-bottom: 10px; } a { color: #ff5c00; font-weight: 700; font-size: 16px; } i { font-weight: 700; } } .list-feedback { margin-right: -15px; } } .item-review { width: calc(100% / 2 - 15px); margin-right: 15px; img { display: block; margin-bottom: 15px; border-radius: 20px; } .txt { display: block; margin: 15px 0; } .info { img { width: 50px; height: 50px; } b { margin: 0 10px; } } } } .product-item { background: #ffffff; border: 1px solid #00a3ff; border-radius: 30px; padding: 20px; width: calc(100% / 3 - 15px); margin-right: 15px; margin-bottom: 15px; position: relative; .image-product { display: block; position: relative; height: 450px; overflow: hidden; border-radius: 26px; img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0 auto; transition: 0.5s all; transform: scale(1); object-fit: cover; } &:hover { img { transform: scale(1.05); object-fit: cover; } } } .box-sale { position: absolute; left: 20px; top: 18px; width: 70px; height: 40px; font-weight: 600; font-size: 15px; line-height: 40px; text-align: center; border-radius: 25px; &.new { background: #00a3ff; color: #fff; &:hover { background: #fff; color: #00a3ff; } } &.saleoff { background: #ff5c00; color: #fff; &:hover { background: #fff; color: #ff5c00; } } } .info-product { .product-title { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 35px; margin-top: 20px; font-weight: 500; &:hover { color: #ff5c00; } } } .content-info { margin-right: 30px; } .price { font-size: 20px; font-weight: 700; text-align: center; color: #000; display: block; margin-right: 10px; } .old-price { font-size: 14px; color: #b4b4b4; text-align: center; display: block; } .product-price-main { margin: 10px 0; } .buy-cart { width: 50px; height: 50px; border-radius: 50%; background: #ffc09c; display: flex; align-items: center; justify-content: center; margin-top: 30px; &:hover { background: #ff5c00; } } .icon_2023 { &.cart { width: 27px; height: 30px; background-position: -88px -35px; } } .deal-count { position: relative; width: 100%; height: 18px; background: #f0f0f0; border-radius: 9px; b { text-align: center; color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; display: block; z-index: 9; position: absolute; left: 50%; transform: translate(-50%, 0); } .count-bg { position: absolute; left: 1px; bottom: 0; background: linear-gradient(90deg, #ff5c00 50%, #ff9900 100%); border-radius: 9px; height: 18px; display: block; z-index: 1; } } } .icon_star { display: block; background: url(../images/star_2023.png) no-repeat; height: 12px; width: 75px; &.star5 { background-position: 0 0; } &.star4 { background-position: 0 -15px; } &.star3 { background-position: 0 -30px; } &.star2 { background-position: 0 -45px; } &.star1 { background-position: 0 -60px; } &.star0 { background-position: 0 -75px; } } .global-footer { margin-top: 20px; .left { width: 50%; margin-right: 15px; } .right { width: 50%; } .box-form-email, .box-media { background: #efefef; border-radius: 30px 0px; height: 92px; padding: 0 20px; .title { width: 50%; margin-right: 15px; font-family: "Playfair Display"; font-size: 20px; font-weight: 400; text-align: center; text-transform: uppercase; } } .content-form { width: 310px; background: #fafcfe; border: 1px solid #ff5c00; border-radius: 10px; height: 45px; display: flex; position: relative; } #email-newsletter { border-radius: 10px 0 0 10px; border: 0; padding: 0 5px 0 10px; width: calc(100% - 40px); height: 100%; outline: none; color: #a0a0a0; font-size: 14px; } .send-newsletter { position: absolute; right: 0; bottom: 0; border: 0; width: 40px; height: 40px; font-weight: 300; background: transparent; cursor: pointer; .icon_2023.send-form { width: 31px; height: 40px; background-position: 0 -73px; } } .list-social { .item { width: 46px; height: 46px; background: #000000; border-radius: 8px; margin-right: 12px; text-align: center; line-height: 46px; i { margin-top: 13px; color: #fff; font-size: 23px; } } } .content-footer-top { margin-top: 20px; .item { width: calc(100% / 3 - 15px); margin-right: 15px; } p { font-size: 14px; display: block; margin-bottom: 15px; } .phone { display: block; margin-bottom: 5px; font-size: 22px; font-weight: 600; } .link-showrrom { margin-top: 5px; display: block; text-decoration: underline; } } .content-footer-main { margin-top: 30px; padding: 20px 0; background: #efefef; border-radius: 30px 0px; .item { width: calc(100% / 3); } .title { text-align: center; justify-content: center; font-size: 16px; margin-top: 5px; cursor: pointer; i { margin-left: 5px; margin-bottom: 3px; font-size: 20px; } } .content { margin-top: 10px; padding-left: 15px; display: none; } .show-footer { &.active { .content { display: block; } } } } .content-footer-bottom { padding: 5px 0; } } .global-breadcrumb { padding: 30px 0; background: #efe2da; } .breadcrumb ol { width: 100%; padding: 0; margin: 0; background: none; display: flex; align-items: center; } .breadcrumb ol li { list-style: none; display: flex; align-items: center; } .breadcrumb ol li a span { font-size: 15px; color: #333; display: flex; align-items: center; text-transform: uppercase; &:hover { color: #f90012; } } .breadcrumb ol li a:last-child { color: #222; } .breadcrumb ol li a { display: flex; align-items: center; } .breadcrumb ol li i { margin-left: 10px; margin-right: 10px; color: #000; font-style: normal; } .breadcrumb ol li:last-child i { display: none; } .breadcrumb .name { font-size: 25px; padding-top: 20px; text-transform: uppercase; font-weight: 700; } .product-detail { .main-product-detail { margin-top: 20px; } .product-image-detail { width: 55%; margin-right: 30px; } #sync1 { .item { img { border-radius: 26px; } } } #sync2 { margin-top: 15px; img { height: 115px; object-fit: cover; border-radius: 8px; } } .product-info-detail { width: calc(45% - 30px); .name { font-size: 28px; margin-bottom: 10px; display: block; } .sku { font-size: 15px; margin-right: 40px; } .total-review { span { font-size: 14px; } } .main-price { margin: 15px 0; } .price { font-size: 30px; font-weight: 700; margin-right: 10px; } .old-price { font-size: 20px; color: #8e8e8e; } .click-size { display: flex; align-items: center; margin-bottom: 15px; .icon_2023.size { width: 20px; height: 10px; background-position: -38px -85px; } span { color: #0083cc; font-size: 15px; margin-left: 10px; } } .btn-buy { height: 50px; background: #000000; border-radius: 15px; margin-bottom: 15px; text-align: center; a { color: #fff; font-weight: 600; font-size: 18px; text-transform: uppercase; line-height: 50px; width: 100%; display: block; } &.showrrom { border: 1px solid #000000; background: #fff; a { color: #000; font-weight: 400; display: flex; align-items: center; justify-content: center; } .icon_2023.map { width: 21px; height: 23px; background-position: -71px -79px; margin-bottom: 3px; } span { margin-left: 5px; } } } .note-detail { div { margin-bottom: 15px; } span { font-size: 14px; } } } .content-product-detail { margin-top: 30px; border-top: 1px solid #efe2da; padding-top: 20px; } .list-tab { display: flex; align-items: center; margin-bottom: 20px; .item-tab { margin-right: 50px; font-weight: 600; font-size: 20px; text-align: center; text-transform: uppercase; &.active { color: #ff5c00; } } } .content-tab { display: none; &.active { display: block; } } .product-related { margin-top: 20px; padding-top: 20px; border-top: 1px solid #efe2da; .title { font-size: 20px; font-weight: 600; margin-bottom: 20px; } } .box-related { background: #efefef; border-radius: 26px 0 0 26px; .left { width: 340px; margin-right: 30px; img { display: block; } } .right { width: calc(100% - 370px); } .product-list { padding: 20px 20px 0 0; .product-item { border: none; padding: 0; background: transparent; border-radius: 0; margin-bottom: 0; } .box-sale { left: -1px; top: 0; width: 60px; } .image-product { height: 320px; } .content-info { width: calc(100% - 75px); } .buy-cart { width: 45px; height: 45px; margin-top: 0; } .product-price-main { flex-wrap: wrap; margin: 0; } .product-title { margin: 10px 0; font-size: 14px; display: block; } } } .box-list-size { background: #ffffff; width: 794px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; padding: 10px; .title { font-size: 24px; font-weight: 700; margin-bottom: 20px; } table { border: 1px solid #e6e6e8; } td { padding: 15px; } tr { &:nth-child(2n) { background: #f5f5f6; } } .click-close { position: absolute; right: -10px; top: -10px; width: 36px; height: 36px; background: #959595; border: 2px solid #ffffff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); line-height: 35px; text-align: center; border-radius: 50%; i { color: #fff; } } } } .custom-nav .owl-nav { margin: 0 !important; } .custom-nav .owl-nav button { margin: 0 !important; background: rgba(0, 0, 0, 0.2) !important; color: #222 !important; width: 25px; height: 50px; font-size: 25px !important; text-align: left; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #ffffff !important; border: 1px dashed #f2f2f2; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25) !important; } .custom-nav .owl-nav button:hover { color: #222 !important; background: transparent !important; } .custom-nav .owl-nav .owl-prev { left: -15px; border-radius: 50% !important; width: 30px; height: 30px; } .custom-nav .owl-nav .owl-next { right: -15px; border-radius: 50% !important; width: 30px; height: 30px; } .custom-nav .owl-nav i { margin: 0 auto; text-align: center; display: flex; align-items: center; justify-content: center; } .custom-nav .owl-nav .owl-prev i { padding-right: 3px; } .custom-nav .owl-nav .owl-next i { padding-left: 3px; } .nd * { line-height: 25px; } .product-category { .breadcrumb .name { padding-top: 0; } .name-cate { padding-top: 20px; } .content-filter { .item { width: 25%; position: relative; height: 60px; &.mid { width: 50%; } &.left { line-height: 60px; } &.right { justify-content: end; border-right: none; } border-right: 1px solid #efe2da; &:hover { .hover-content { opacity: 1; visibility: visible; } } } .content-filter { display: block; } .title { font-size: 15px; p { margin: 0 5px; } i { margin-top: -3px; line-height: 60px; } } .hover-content { position: absolute; left: 0; top: 100%; opacity: 0; visibility: hidden; background: #f5f5f6; width: 90%; a { padding: 0 10px; font-size: 14px; display: block; height: 45px; line-height: 45px; text-transform: uppercase; width: 100%; &:hover { background: #ff5c00; color: #fff; } } } .content-filter-price { margin-left: 10px; } } #slider-range { border-radius: 4px; height: 4px; background: #ff5c00; border: 0; margin-left: 9px; width: 219px; } .filter-category { border-bottom: 1px solid #efe2da; } .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-max { background: #d9d9d9; } span.ui-slider-handle.ui-corner-all.ui-state-default { background: #ff5c00; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ff5c00; } .vertical-price-filter-child { display: flex; align-items: center; } .vertical-price-filter { margin: 0 10px; } .button-filter { display: block; padding: 5px 20px; border-radius: 30px; background: #ff5c00; color: #fff; cursor: pointer; &:hover { background: #fff; border: 1px solid #ff5c00; color: #ff5c00; } } .sort-pro { margin-left: 10px; border: none; } .list-product { margin-top: 20px; margin-right: -15px; .product-item { border: 1px solid #959595; &:hover { border: 1px solid #ff5c00; } } } }