diff --git a/demo-thoitrang-2/assets/css/style.css b/demo-thoitrang-2/assets/css/style.css new file mode 100644 index 0000000..6cb5c9e --- /dev/null +++ b/demo-thoitrang-2/assets/css/style.css @@ -0,0 +1,1342 @@ +@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; +} +.global-header .logo { + width: 130px; + margin-right: 50px; +} +.global-header .header-mid { + width: 570px; + margin-right: 30px; +} +.global-header .header-mid .item { + margin-right: 20px; + text-transform: uppercase; +} +.global-header .header-mid .item:last-child { + margin-right: 0; +} +.global-header .header-mid .item:hover { + color: #ff5c00; +} +.global-header .header-right { + width: calc(100% - 130px - 80px - 570px); +} +.global-header .header-right .item { + margin: 0 10px; +} +.global-header .header-right .item:last-child { + margin-right: 0; +} +.global-header .header-right .txt { + padding-left: 10px; +} +.global-header .header-right .txt span { + padding-left: 5px; +} +.global-header .header-right .box-cart { + position: relative; +} +.global-header .header-right .box-cart .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; +} +.global-header .icon_2023.account { + width: 25px; + height: 28px; + background-position: 0px 0px; + filter: grayscale(100%); +} +.global-header .icon_2023.cart { + width: 27px; + height: 30px; + background-position: -43px 0px; + filter: grayscale(100%); +} + +.form__input { + width: 185px; + border-radius: 20px; +} +.form__input:focus-within { + border: 1px solid #ff5c00; +} +.form__input:focus-within .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; +} +.product-flash-sale .title { + display: flex; + align-items: center; + justify-content: center; +} +.product-flash-sale .title h2 { + font-family: "Playfair Display"; + font-size: 40px; + color: #ff5c00; + font-weight: 400; + text-transform: uppercase; + padding-right: 20px; +} +.product-flash-sale .product-time-holder { + display: flex; + align-items: center; + margin-left: 10px; +} +.product-flash-sale .product-time-holder .item-time { + margin-right: 14px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; +} +.product-flash-sale .product-time-holder .item-time 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; +} +.product-flash-sale .product-time-holder .item-time b:last-child { + margin: 0; +} +.product-flash-sale .product-time-holder .item-time b::after { + content: ":"; + position: absolute; + right: -10px; + color: #000; +} +.product-flash-sale .product-time-holder .item-time:last-child b { + margin: 0; +} +.product-flash-sale .product-time-holder .item-time:last-child b::after { + content: none; +} +.product-flash-sale .more-all { + color: #ff5c00; + font-weight: 700; +} +.product-flash-sale .product-list { + margin-top: 20px; +} + +.product-item-deal { + background: #ffffff; + border: 1px solid #ff5c00; + border-radius: 30px; + padding: 20px; + width: calc(33.3333333333% - 15px); + margin-right: 15px; +} +.product-item-deal .image-product { + display: block; + position: relative; + height: 450px; + overflow: hidden; + border-radius: 26px; +} +.product-item-deal .image-product 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); + -o-object-fit: cover; + object-fit: cover; +} +.product-item-deal .image-product:hover img { + transform: scale(1.05); + -o-object-fit: cover; + object-fit: cover; +} +.product-item-deal .image-product .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; +} +.product-item-deal .image-product .saleoff:hover { + background: #fff; + color: #ff5c00; +} +.product-item-deal .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; +} +.product-item-deal .info-product .product-title:hover { + color: #ff5c00; +} +.product-item-deal .content-info { + margin-right: 30px; +} +.product-item-deal .price { + font-size: 20px; + font-weight: 700; + text-align: center; + color: #000; + display: block; + margin-right: 10px; +} +.product-item-deal .old-price { + font-size: 14px; + color: #b4b4b4; + text-align: center; + display: block; +} +.product-item-deal .product-price-main { + margin: 10px 0; +} +.product-item-deal .buy-cart { + width: 50px; + height: 50px; + border-radius: 50%; + background: #ffc09c; + display: flex; + align-items: center; + justify-content: center; + margin-top: 30px; +} +.product-item-deal .buy-cart:hover { + background: #ff5c00; +} +.product-item-deal .icon_2023.cart { + width: 27px; + height: 30px; + background-position: -88px -35px; +} +.product-item-deal .deal-count { + position: relative; + width: 100%; + height: 18px; + background: #f0f0f0; + border-radius: 9px; +} +.product-item-deal .deal-count 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); +} +.product-item-deal .deal-count .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; +} +.homepage .banner-sale-home .item { + display: block; + width: 50%; + margin-right: 10px; +} +.homepage .banner-sale-home .item:last-child { + margin-right: 0; +} +.homepage .product-new { + margin-top: 57px; +} +.homepage .product-new .title { + margin-bottom: 28px; +} +.homepage .product-new .title h2 { + font-size: 36px; + font-weight: 400; + font-family: "Playfair Display"; + text-transform: uppercase; + margin-bottom: 10px; +} +.homepage .product-new .title p { + color: #575757; + font-weight: 400; + font-size: 20px; + margin-bottom: 15px; +} +.homepage .product-new .title a { + color: #ff5c00; + font-weight: 700; + font-size: 16px; +} +.homepage .product-new .title i { + font-weight: 700; +} +.homepage .product-new .product-list { + margin-right: -15px; +} +.homepage .list-product-collection { + margin-top: 10px; +} +.homepage .list-product-collection .item { + margin-right: 15px; +} +.homepage .list-product-collection .item:last-child { + margin-right: 0; +} +.homepage .product-saleoff { + margin-top: 57px; +} +.homepage .product-saleoff .title { + margin-bottom: 28px; +} +.homepage .product-saleoff .title h2 { + font-size: 36px; + font-weight: 400; + font-family: "Playfair Display"; + text-transform: uppercase; + margin-bottom: 10px; +} +.homepage .product-saleoff .title a { + color: #ff5c00; + font-weight: 700; + font-size: 16px; +} +.homepage .product-saleoff .title i { + font-weight: 700; +} +.homepage .product-saleoff .product-list { + margin-right: -15px; +} +.homepage .product-saleoff .product-list .product-item { + border: 1px solid #959595; +} +.homepage .feedback-customer { + margin-top: 57px; +} +.homepage .feedback-customer .title { + margin-bottom: 28px; +} +.homepage .feedback-customer .title h2 { + font-size: 36px; + font-weight: 400; + font-family: "Playfair Display"; + text-transform: uppercase; + margin-bottom: 10px; +} +.homepage .feedback-customer .title a { + color: #ff5c00; + font-weight: 700; + font-size: 16px; +} +.homepage .feedback-customer .title i { + font-weight: 700; +} +.homepage .feedback-customer .list-feedback { + margin-right: -15px; +} +.homepage .item-review { + width: calc(50% - 15px); + margin-right: 15px; +} +.homepage .item-review img { + display: block; + margin-bottom: 15px; + border-radius: 20px; +} +.homepage .item-review .txt { + display: block; + margin: 15px 0; +} +.homepage .item-review .info img { + width: 50px; + height: 50px; +} +.homepage .item-review .info b { + margin: 0 10px; +} + +.product-item { + background: #ffffff; + border: 1px solid #00a3ff; + border-radius: 30px; + padding: 20px; + width: calc(33.3333333333% - 15px); + margin-right: 15px; + margin-bottom: 15px; + position: relative; +} +.product-item .image-product { + display: block; + position: relative; + height: 450px; + overflow: hidden; + border-radius: 26px; +} +.product-item .image-product 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); + -o-object-fit: cover; + object-fit: cover; +} +.product-item .image-product:hover img { + transform: scale(1.05); + -o-object-fit: cover; + object-fit: cover; +} +.product-item .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; +} +.product-item .box-sale.new { + background: #00a3ff; + color: #fff; +} +.product-item .box-sale.new:hover { + background: #fff; + color: #00a3ff; +} +.product-item .box-sale.saleoff { + background: #ff5c00; + color: #fff; +} +.product-item .box-sale.saleoff:hover { + background: #fff; + color: #ff5c00; +} +.product-item .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; +} +.product-item .info-product .product-title:hover { + color: #ff5c00; +} +.product-item .content-info { + margin-right: 30px; +} +.product-item .price { + font-size: 20px; + font-weight: 700; + text-align: center; + color: #000; + display: block; + margin-right: 10px; +} +.product-item .old-price { + font-size: 14px; + color: #b4b4b4; + text-align: center; + display: block; +} +.product-item .product-price-main { + margin: 10px 0; +} +.product-item .buy-cart { + width: 50px; + height: 50px; + border-radius: 50%; + background: #ffc09c; + display: flex; + align-items: center; + justify-content: center; + margin-top: 30px; +} +.product-item .buy-cart:hover { + background: #ff5c00; +} +.product-item .icon_2023.cart { + width: 27px; + height: 30px; + background-position: -88px -35px; +} +.product-item .deal-count { + position: relative; + width: 100%; + height: 18px; + background: #f0f0f0; + border-radius: 9px; +} +.product-item .deal-count 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); +} +.product-item .deal-count .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; +} +.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 -45px; +} +.icon_star.star1 { + background-position: 0 -60px; +} +.icon_star.star0 { + background-position: 0 -75px; +} + +.global-footer { + margin-top: 20px; +} +.global-footer .left { + width: 50%; + margin-right: 15px; +} +.global-footer .right { + width: 50%; +} +.global-footer .box-form-email, +.global-footer .box-media { + background: #efefef; + border-radius: 30px 0px; + height: 92px; + padding: 0 20px; +} +.global-footer .box-form-email .title, +.global-footer .box-media .title { + width: 50%; + margin-right: 15px; + font-family: "Playfair Display"; + font-size: 20px; + font-weight: 400; + text-align: center; + text-transform: uppercase; +} +.global-footer .content-form { + width: 310px; + background: #fafcfe; + border: 1px solid #ff5c00; + border-radius: 10px; + height: 45px; + display: flex; + position: relative; +} +.global-footer #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; +} +.global-footer .send-newsletter { + position: absolute; + right: 0; + bottom: 0; + border: 0; + width: 40px; + height: 40px; + font-weight: 300; + background: transparent; + cursor: pointer; +} +.global-footer .send-newsletter .icon_2023.send-form { + width: 31px; + height: 40px; + background-position: 0 -73px; +} +.global-footer .list-social .item { + width: 46px; + height: 46px; + background: #000000; + border-radius: 8px; + margin-right: 12px; + text-align: center; + line-height: 46px; +} +.global-footer .list-social .item i { + margin-top: 13px; + color: #fff; + font-size: 23px; +} +.global-footer .content-footer-top { + margin-top: 20px; +} +.global-footer .content-footer-top .item { + width: calc(33.3333333333% - 15px); + margin-right: 15px; +} +.global-footer .content-footer-top p { + font-size: 14px; + display: block; + margin-bottom: 15px; +} +.global-footer .content-footer-top .phone { + display: block; + margin-bottom: 5px; + font-size: 22px; + font-weight: 600; +} +.global-footer .content-footer-top .link-showrrom { + margin-top: 5px; + display: block; + text-decoration: underline; +} +.global-footer .content-footer-main { + margin-top: 30px; + padding: 20px 0; + background: #efefef; + border-radius: 30px 0px; +} +.global-footer .content-footer-main .item { + width: 33.3333333333%; +} +.global-footer .content-footer-main .title { + text-align: center; + justify-content: center; + font-size: 16px; + margin-top: 5px; + cursor: pointer; +} +.global-footer .content-footer-main .title i { + margin-left: 5px; + margin-bottom: 3px; + font-size: 20px; +} +.global-footer .content-footer-main .content { + margin-top: 10px; + padding-left: 15px; + display: none; +} +.global-footer .content-footer-main .show-footer.active .content { + display: block; +} +.global-footer .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; +} +.breadcrumb ol li a span: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-detail .product-image-detail { + width: 55%; + margin-right: 30px; +} +.product-detail #sync1 .item img { + border-radius: 26px; +} +.product-detail #sync2 { + margin-top: 15px; +} +.product-detail #sync2 img { + height: 115px; + -o-object-fit: cover; + object-fit: cover; + border-radius: 8px; +} +.product-detail .product-info-detail { + width: calc(45% - 30px); +} +.product-detail .product-info-detail .name { + font-size: 28px; + margin-bottom: 10px; + display: block; +} +.product-detail .product-info-detail .sku { + font-size: 15px; + margin-right: 40px; +} +.product-detail .product-info-detail .total-review span { + font-size: 14px; +} +.product-detail .product-info-detail .main-price { + margin: 15px 0; +} +.product-detail .product-info-detail .price { + font-size: 30px; + font-weight: 700; + margin-right: 10px; +} +.product-detail .product-info-detail .old-price { + font-size: 20px; + color: #8e8e8e; +} +.product-detail .product-info-detail .click-size { + display: flex; + align-items: center; + margin-bottom: 15px; +} +.product-detail .product-info-detail .click-size .icon_2023.size { + width: 20px; + height: 10px; + background-position: -38px -85px; +} +.product-detail .product-info-detail .click-size span { + color: #0083cc; + font-size: 15px; + margin-left: 10px; +} +.product-detail .product-info-detail .btn-buy { + height: 50px; + background: #000000; + border-radius: 15px; + margin-bottom: 15px; + text-align: center; +} +.product-detail .product-info-detail .btn-buy a { + color: #fff; + font-weight: 600; + font-size: 18px; + text-transform: uppercase; + line-height: 50px; + width: 100%; + display: block; +} +.product-detail .product-info-detail .btn-buy.showrrom { + border: 1px solid #000000; + background: #fff; +} +.product-detail .product-info-detail .btn-buy.showrrom a { + color: #000; + font-weight: 400; + display: flex; + align-items: center; + justify-content: center; +} +.product-detail .product-info-detail .btn-buy.showrrom .icon_2023.map { + width: 21px; + height: 23px; + background-position: -71px -79px; + margin-bottom: 3px; +} +.product-detail .product-info-detail .btn-buy.showrrom span { + margin-left: 5px; +} +.product-detail .product-info-detail .note-detail div { + margin-bottom: 15px; +} +.product-detail .product-info-detail .note-detail span { + font-size: 14px; +} +.product-detail .content-product-detail { + margin-top: 30px; + border-top: 1px solid #efe2da; + padding-top: 20px; +} +.product-detail .list-tab { + display: flex; + align-items: center; + margin-bottom: 20px; +} +.product-detail .list-tab .item-tab { + margin-right: 50px; + font-weight: 600; + font-size: 20px; + text-align: center; + text-transform: uppercase; +} +.product-detail .list-tab .item-tab.active { + color: #ff5c00; +} +.product-detail .content-tab { + display: none; +} +.product-detail .content-tab.active { + display: block; +} +.product-detail .product-related { + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid #efe2da; +} +.product-detail .product-related .title { + font-size: 20px; + font-weight: 600; + margin-bottom: 20px; +} +.product-detail .box-related { + background: #efefef; + border-radius: 26px 0 0 26px; +} +.product-detail .box-related .left { + width: 340px; + margin-right: 30px; +} +.product-detail .box-related .left img { + display: block; +} +.product-detail .box-related .right { + width: calc(100% - 370px); +} +.product-detail .box-related .product-list { + padding: 20px 20px 0 0; +} +.product-detail .box-related .product-list .product-item { + border: none; + padding: 0; + background: transparent; + border-radius: 0; + margin-bottom: 0; +} +.product-detail .box-related .product-list .box-sale { + left: -1px; + top: 0; + width: 60px; +} +.product-detail .box-related .product-list .image-product { + height: 320px; +} +.product-detail .box-related .product-list .content-info { + width: calc(100% - 75px); +} +.product-detail .box-related .product-list .buy-cart { + width: 45px; + height: 45px; + margin-top: 0; +} +.product-detail .box-related .product-list .product-price-main { + flex-wrap: wrap; + margin: 0; +} +.product-detail .box-related .product-list .product-title { + margin: 10px 0; + font-size: 14px; + display: block; +} +.product-detail .box-list-size { + background: #ffffff; + width: 794px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 999; + padding: 10px; +} +.product-detail .box-list-size .title { + font-size: 24px; + font-weight: 700; + margin-bottom: 20px; +} +.product-detail .box-list-size table { + border: 1px solid #e6e6e8; +} +.product-detail .box-list-size td { + padding: 15px; +} +.product-detail .box-list-size tr:nth-child(2n) { + background: #f5f5f6; +} +.product-detail .box-list-size .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%; +} +.product-detail .box-list-size .click-close 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%; + 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; +} +.product-category .name-cate { + padding-top: 20px; +} +.product-category .content-filter .item { + width: 25%; + position: relative; + height: 60px; + border-right: 1px solid #efe2da; +} +.product-category .content-filter .item.mid { + width: 50%; +} +.product-category .content-filter .item.left { + line-height: 60px; +} +.product-category .content-filter .item.right { + justify-content: end; + border-right: none; +} +.product-category .content-filter .item:hover .hover-content { + opacity: 1; + visibility: visible; +} +.product-category .content-filter .content-filter { + display: block; +} +.product-category .content-filter .title { + font-size: 15px; +} +.product-category .content-filter .title p { + margin: 0 5px; +} +.product-category .content-filter .title i { + margin-top: -3px; + line-height: 60px; +} +.product-category .content-filter .hover-content { + position: absolute; + left: 0; + top: 100%; + opacity: 0; + visibility: hidden; + background: #f5f5f6; + width: 90%; +} +.product-category .content-filter .hover-content a { + padding: 0 10px; + font-size: 14px; + display: block; + height: 45px; + line-height: 45px; + text-transform: uppercase; + width: 100%; +} +.product-category .content-filter .hover-content a:hover { + background: #ff5c00; + color: #fff; +} +.product-category .content-filter .content-filter-price { + margin-left: 10px; +} +.product-category #slider-range { + border-radius: 4px; + height: 4px; + background: #ff5c00; + border: 0; + margin-left: 9px; + width: 219px; +} +.product-category .filter-category { + border-bottom: 1px solid #efe2da; +} +.product-category .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-max { + background: #d9d9d9; +} +.product-category span.ui-slider-handle.ui-corner-all.ui-state-default { + background: #ff5c00; + width: 16px; + height: 16px; + border-radius: 50%; + border: 1px solid #ff5c00; +} +.product-category .vertical-price-filter-child { + display: flex; + align-items: center; +} +.product-category .vertical-price-filter { + margin: 0 10px; +} +.product-category .button-filter { + display: block; + padding: 5px 20px; + border-radius: 30px; + background: #ff5c00; + color: #fff; + cursor: pointer; +} +.product-category .button-filter:hover { + background: #fff; + border: 1px solid #ff5c00; + color: #ff5c00; +} +.product-category .sort-pro { + margin-left: 10px; + border: none; +} +.product-category .list-product { + margin-top: 20px; + margin-right: -15px; +} +.product-category .list-product .product-item { + border: 1px solid #959595; +} +.product-category .list-product .product-item:hover { + border: 1px solid #ff5c00; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/demo-thoitrang-2/assets/css/style.css.map b/demo-thoitrang-2/assets/css/style.css.map new file mode 100644 index 0000000..b3ae27d --- /dev/null +++ b/demo-thoitrang-2/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/demo-thoitrang-2/assets/css/style.scss b/demo-thoitrang-2/assets/css/style.scss new file mode 100644 index 0000000..3f758fc --- /dev/null +++ b/demo-thoitrang-2/assets/css/style.scss @@ -0,0 +1,1361 @@ +@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; + } + } + } +} diff --git a/demo-thoitrang-2/assets/images/avatar.png b/demo-thoitrang-2/assets/images/avatar.png new file mode 100644 index 0000000..d2dab7d Binary files /dev/null and b/demo-thoitrang-2/assets/images/avatar.png differ diff --git a/demo-thoitrang-2/assets/images/banner-bst-1.png b/demo-thoitrang-2/assets/images/banner-bst-1.png new file mode 100644 index 0000000..9f7bde1 Binary files /dev/null and b/demo-thoitrang-2/assets/images/banner-bst-1.png differ diff --git a/demo-thoitrang-2/assets/images/banner-bst-2.png b/demo-thoitrang-2/assets/images/banner-bst-2.png new file mode 100644 index 0000000..6bbd273 Binary files /dev/null and b/demo-thoitrang-2/assets/images/banner-bst-2.png differ diff --git a/demo-thoitrang-2/assets/images/banner-bst-3.png b/demo-thoitrang-2/assets/images/banner-bst-3.png new file mode 100644 index 0000000..2841c5c Binary files /dev/null and b/demo-thoitrang-2/assets/images/banner-bst-3.png differ diff --git a/demo-thoitrang-2/assets/images/banner-bst-4.png b/demo-thoitrang-2/assets/images/banner-bst-4.png new file mode 100644 index 0000000..59967f8 Binary files /dev/null and b/demo-thoitrang-2/assets/images/banner-bst-4.png differ diff --git a/demo-thoitrang-2/assets/images/banner-sale-1.png b/demo-thoitrang-2/assets/images/banner-sale-1.png new file mode 100644 index 0000000..5a1b880 Binary files /dev/null and b/demo-thoitrang-2/assets/images/banner-sale-1.png differ diff --git a/demo-thoitrang-2/assets/images/banner-sale-2.png b/demo-thoitrang-2/assets/images/banner-sale-2.png new file mode 100644 index 0000000..9ffa69f Binary files /dev/null and b/demo-thoitrang-2/assets/images/banner-sale-2.png differ diff --git a/demo-thoitrang-2/assets/images/banner.png b/demo-thoitrang-2/assets/images/banner.png new file mode 100644 index 0000000..2ce7b6b Binary files /dev/null and b/demo-thoitrang-2/assets/images/banner.png differ diff --git a/demo-thoitrang-2/assets/images/bct.png b/demo-thoitrang-2/assets/images/bct.png new file mode 100644 index 0000000..b7c264f Binary files /dev/null and b/demo-thoitrang-2/assets/images/bct.png differ diff --git a/demo-thoitrang-2/assets/images/fanpage-footer.png b/demo-thoitrang-2/assets/images/fanpage-footer.png new file mode 100644 index 0000000..3dfa1e3 Binary files /dev/null and b/demo-thoitrang-2/assets/images/fanpage-footer.png differ diff --git a/demo-thoitrang-2/assets/images/feeback-user-1.png b/demo-thoitrang-2/assets/images/feeback-user-1.png new file mode 100644 index 0000000..a40749c Binary files /dev/null and b/demo-thoitrang-2/assets/images/feeback-user-1.png differ diff --git a/demo-thoitrang-2/assets/images/feeback-user-2.png b/demo-thoitrang-2/assets/images/feeback-user-2.png new file mode 100644 index 0000000..2f0d70b Binary files /dev/null and b/demo-thoitrang-2/assets/images/feeback-user-2.png differ diff --git a/demo-thoitrang-2/assets/images/icon_2023.png b/demo-thoitrang-2/assets/images/icon_2023.png new file mode 100644 index 0000000..9065dc1 Binary files /dev/null and b/demo-thoitrang-2/assets/images/icon_2023.png differ diff --git a/demo-thoitrang-2/assets/images/image-big-detail-1.png b/demo-thoitrang-2/assets/images/image-big-detail-1.png new file mode 100644 index 0000000..f057a59 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-big-detail-1.png differ diff --git a/demo-thoitrang-2/assets/images/image-big-detail-2.png b/demo-thoitrang-2/assets/images/image-big-detail-2.png new file mode 100644 index 0000000..861ede0 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-big-detail-2.png differ diff --git a/demo-thoitrang-2/assets/images/image-big-detail-3.jpg b/demo-thoitrang-2/assets/images/image-big-detail-3.jpg new file mode 100644 index 0000000..ef11cd6 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-big-detail-3.jpg differ diff --git a/demo-thoitrang-2/assets/images/image-big-detail-4.jpg b/demo-thoitrang-2/assets/images/image-big-detail-4.jpg new file mode 100644 index 0000000..834be40 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-big-detail-4.jpg differ diff --git a/demo-thoitrang-2/assets/images/image-big-detail-5.jpg b/demo-thoitrang-2/assets/images/image-big-detail-5.jpg new file mode 100644 index 0000000..0323d03 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-big-detail-5.jpg differ diff --git a/demo-thoitrang-2/assets/images/image-big-detail-6.jpg b/demo-thoitrang-2/assets/images/image-big-detail-6.jpg new file mode 100644 index 0000000..61a63b3 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-big-detail-6.jpg differ diff --git a/demo-thoitrang-2/assets/images/image-small-detail-1.png b/demo-thoitrang-2/assets/images/image-small-detail-1.png new file mode 100644 index 0000000..b6f82a5 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-small-detail-1.png differ diff --git a/demo-thoitrang-2/assets/images/image-small-detail-2.png b/demo-thoitrang-2/assets/images/image-small-detail-2.png new file mode 100644 index 0000000..1e1cd07 Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-small-detail-2.png differ diff --git a/demo-thoitrang-2/assets/images/image-small-detail-3.png b/demo-thoitrang-2/assets/images/image-small-detail-3.png new file mode 100644 index 0000000..956a9ff Binary files /dev/null and b/demo-thoitrang-2/assets/images/image-small-detail-3.png differ diff --git a/demo-thoitrang-2/assets/images/logo.png b/demo-thoitrang-2/assets/images/logo.png new file mode 100644 index 0000000..e2a5d3b Binary files /dev/null and b/demo-thoitrang-2/assets/images/logo.png differ diff --git a/demo-thoitrang-2/assets/images/pay.png b/demo-thoitrang-2/assets/images/pay.png new file mode 100644 index 0000000..5d600bf Binary files /dev/null and b/demo-thoitrang-2/assets/images/pay.png differ diff --git a/demo-thoitrang-2/assets/images/product-deal.png b/demo-thoitrang-2/assets/images/product-deal.png new file mode 100644 index 0000000..9ec76f8 Binary files /dev/null and b/demo-thoitrang-2/assets/images/product-deal.png differ diff --git a/demo-thoitrang-2/assets/images/shorrom-footer.png b/demo-thoitrang-2/assets/images/shorrom-footer.png new file mode 100644 index 0000000..3a8426c Binary files /dev/null and b/demo-thoitrang-2/assets/images/shorrom-footer.png differ diff --git a/demo-thoitrang-2/assets/images/star_2023.png b/demo-thoitrang-2/assets/images/star_2023.png new file mode 100644 index 0000000..aa963b8 Binary files /dev/null and b/demo-thoitrang-2/assets/images/star_2023.png differ diff --git a/demo-thoitrang-2/assets/images/star_feeback.png b/demo-thoitrang-2/assets/images/star_feeback.png new file mode 100644 index 0000000..df84f87 Binary files /dev/null and b/demo-thoitrang-2/assets/images/star_feeback.png differ diff --git a/demo-thoitrang-2/assets/js/main.js b/demo-thoitrang-2/assets/js/main.js new file mode 100644 index 0000000..2e62800 --- /dev/null +++ b/demo-thoitrang-2/assets/js/main.js @@ -0,0 +1,162 @@ +$(document).ready(function () { + + $(".content-footer-main .item .title").click(function () { + $(this).parents(".show-footer").toggleClass("active"); + }); +}) + + + +$(document).ready(function () { + + var sync1 = $("#sync1"); + var sync2 = $("#sync2"); + var slidesPerPage = 7; //globaly define number of elements per page + var syncedSecondary = true; + + sync1.owlCarousel({ + items: 2, + slideSpeed: 2000, + nav: true, + center: false, + autoplay: false, + autoplayTimeout: 2000, + autoplaySpeed: 1000, + autoplayHoverPause: true, + dots: false, + loop: false, + lazyLoad: true, + responsiveRefreshRate: 200, + margin: 20, + navText: ["", ""] + }).on('changed.owl.carousel', syncPosition); + + sync2 + .on('initialized.owl.carousel', function () { + sync2.find(".owl-item").eq(0).addClass("current"); + }) + .owlCarousel({ + items: slidesPerPage, + margin: 15, + loop: false, + dots: false, + nav: false, + navText: ['', ''], + slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel + responsiveRefreshRate: 100 + }).on('changed.owl.carousel', syncPosition2); + + function syncPosition(el) { + //if you set loop to false, you have to restore this next line + //var current = el.item.index; + + //if you disable loop you have to comment this block + var count = el.item.count - 1; + var current = Math.round(el.item.index - (el.item.count / 2) - .5); + + if (current < 0 && 1 < 2) { + current = count; + } + if (current > count) { + current = 0; + } + + //end block + + sync2 + .find(".owl-item") + .removeClass("current") + .eq(current) + .addClass("current"); + var onscreen = sync2.find('.owl-item.active').length - 1; + var start = sync2.find('.owl-item.active').first().index(); + var end = sync2.find('.owl-item.active').last().index(); + + if (current > end) { + sync2.data('owl.carousel').to(current, 100, true); + } + if (current < start && 1 < 2) { + sync2.data('owl.carousel').to(current - onscreen, 100, true); + } + } + + function syncPosition2(el) { + if (syncedSecondary) { + var number = el.item.index; + sync1.data('owl.carousel').to(number, 100, true); + } + } + + sync2.on("click", ".owl-item", function (e) { + e.preventDefault(); + var number = $(this).index(); + sync1.data('owl.carousel').to(number, 300, true); + }); + + $("#title_tab_scroll_pro a").click(function () { + $("#title_tab_scroll_pro a").removeClass("active"); + $(this).addClass("active"); + var idTab = $(this).attr('href'); + + $('.content-tab').removeClass('active'); + $(idTab).addClass('active') + return false; + }); +}); + +const MIN_PAGE_PRICE = parseInt('0'); +const MAX_PAGE_PRICE = parseInt('1000000'); + +var current_min = parseInt('0'); +var current_max = parseInt('1000000'); + +$(document).ready(function () { + $('.max-price-filter').html(formatCurrency(current_max) + ' đ'); + $('#input-min-price-filter').val(formatCurrency(current_min)) + $('#input-max-price-filter').val(formatCurrency(current_max)); + $("#slider-range").slider({ + range: "max", + max: 0, + min: 0, + max: MAX_PAGE_PRICE, + values: 2, + slide: function (event, ui) { + console.log(ui) + var max = Math.floor(ui.value); + $('.max-price-filter').html(formatCurrency(max) + ' đ'); + $('#input-max-price-filter').html(formatCurrency(max)); + }, + }); + + $("#slider-range").slider("option", "max", MAX_PAGE_PRICE); +}) + + +function formatCurrency(a) { + var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + var len = b.length; + b = b.substring(0, len - 3); + return b; +} + +function finterPriceSli() { + var getMinPriceString = $('#input-min-price-filter').val(); + var getMaxPriceString = $('#input-max-price-filter').val(); + var getMinPrice = parseInt(getMinPriceString.replace(/\./g, '')); + var getMaxPrice = parseInt(getMaxPriceString.replace(/\./g, '')); + var textMinPrice = 'trieu'; + var textMaxPrice = 'trieu'; + if (getMinPrice < 1000000) { + var minPrice = Math.floor(getMinPrice / 1000); + textMinPrice = 'ngan'; + } else { + var minPrice = Math.floor(getMinPrice / 1000000); + } + if (getMaxPrice < 1000000) { + var maxPrice = Math.round(getMaxPrice / 1000); + textMaxPrice = 'ngan'; + } else { + var maxPrice = Math.round(getMaxPrice / 1000000); + } + window.location.href = '?p=' + minPrice + textMinPrice + '-' + maxPrice + textMaxPrice; +} diff --git a/demo-thoitrang-2/cart.html b/demo-thoitrang-2/cart.html new file mode 100644 index 0000000..fcd6ab2 --- /dev/null +++ b/demo-thoitrang-2/cart.html @@ -0,0 +1,23 @@ + + + + + + + + Document + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo-thoitrang-2/category.html b/demo-thoitrang-2/category.html new file mode 100644 index 0000000..ef6aa2b --- /dev/null +++ b/demo-thoitrang-2/category.html @@ -0,0 +1,237 @@ + + + + + + + + Document + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+ DANH MỤC: +

THỜI TRANG NỮ

+ +
+
+ Thời trang nam + Thời trang nam + Thời trang nam +
+
+
+ Giá bán +
+
+
+
+
0
+
đ
+
+
+
+ Lọc +
+
+
+
+ SẮP XẾP THEO: + +
+
+
+
+
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/demo-thoitrang-2/huongdan.html b/demo-thoitrang-2/huongdan.html new file mode 100644 index 0000000..a505358 --- /dev/null +++ b/demo-thoitrang-2/huongdan.html @@ -0,0 +1,370 @@ +
+ +

1. Cài đặt webpack

+

Bước 1: Cài đặt Node.js và npm

+

Webpack cần Node.js và npm để hoạt động. Nếu chưa cài đặt Node.js và npm, có thể tải xuống từ trang chủ + của + Node.js (https://nodejs.org).

+

Bước 2: Khởi tạo npm

+ +
+

npm install

+
+

Sau khi chạy xong lên trên thì trong thư mục sẽ có 1 file package.json

+

Bước 3: Cài đặt webpack

+

Sử dụng lệnh sau để cài đặt webpack và webpack-cli:

+
+

npm install webpack webpack-cli --save-dev

+
+

Sau khi hoàn thành thì file package.json sẽ có nội dung như thế này:

+ Ví dụ: + + +

Bước 4: Tạo một tệp cấu hình webpack

+

Webpack sử dụng một tệp cấu hình để cấu hình cách webpack hoạt động. Tạo một tệp webpack.config.js mới + trong thư + mục gốc dự án và thêm các cài đặt sau:

+ Ví dụ: + + 
+
+    const path = require('path');       
+        module.exports = {
+            entry: './src/index.js',
+            output: {
+                path: path.resolve(__dirname, 'dist'),
+                filename: 'bundle.js'
+            }
+    };
+
+
+ + Ghi chú: +

Cần cài thêm path bằng lệnh sau:

+
+

npm install --save-dev path

+
+ +

Cần chia thành 2 Folder lớn: disc và src

+ + +

Entry: Là file webpack sẽ bắt đầu làm việc và thực hiện viêc nạp file để thực hiện việc + bundler, + cần phải trỏ tên và đúng đường dẫn đến file code cần bundler

+

Output : Nó sẽ có tác dụng chỉ cho webpack biết cần phải lưu file tên gì và được compile ra + đâu +

+

Bước 6: Chạy webpack

+

Để chạy webpack, sử dụng lệnh sau:

+
+

npx webpack

+
+

Lệnh này sẽ đóng gói mã nguồn JavaScript của bạn và lưu trữ nó trong thư mục đầu ra được chỉ định trong tệp + cấu + hình webpack.

+ +

2. Hướng dẫn chi tiết về các cài đặt cơ bản webpack.config.js

+

2.1 Cấu hình đường dẫn đến tệp JavaScript chính với Entry

+ + Ví dụ: + 
+    
+        module.exports = {
+            entry: './src/index.js',
+            // ...
+        };
+    
+
+ + +

2.1.2 Cấu hình tên và đường dẫn cho tệp đầu ra với Output

+ + Ví dụ: + 
+    
+        const path = require('path');
+        
+        module.exports = {
+            entry: './src/index.js',
+            output: {
+                filename: 'bundle.js',
+                path: path.resolve(__dirname, 'dist')
+            },
+            // ...
+        };
+    
+
+ + +

2.1.3 Cấu hình các loader để xử lý các loại tệp khác nhau với module

+ + Ví dụ: + 
+    
+        module.exports = {
+            entry: './src/index.js',
+                output: {
+                    filename: 'bundle.js',
+                    path: path.resolve(__dirname, 'dist')
+                },
+            module: {
+                rules: [
+                    { test: /\.tsx?$/, use: 'ts-loader' },
+                ]
+            },
+            // ...
+        };
+    
+
+ + Có thể tham khảo thêm các ứng dụng khác như xử lý css,image Tại đây + +

2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack

+ +

2.1.4.1 HtmlWebpackPlugin có tác dụng tạo ra một tệp html có tiêu đề là + webpack demo và đặt + tên + là + index.html như ví dụ ở bên dưới: +

+ +
+

npm install --save-dev html-webpack-plugin

+
+ + 
+    
+        const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+        module.exports = {
+            plugins: [
+                new HtmlWebpackPlugin({
+                title: 'webpack demo',
+                    filename: 'index.html',
+                    template: 'src/template.html'
+                })
+            ],
+            // ...
+        };
+    
+
+ +

2.1.4.2 CleanWebpackPlugin có tác dụng xóa bỏ các tệp js,html,css.. đã + được bundler trước đấy: +

+ +
+

npm install --save-dev clean-webpack-plugin

+
+ + 
+    
+        const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+        
+        module.exports = {
+            // ...
+            plugins: [
+                new CleanWebpackPlugin()
+            ]
+        };
+    
+
+ +

2.1.5 Sử dụng optimization cho cấu hình của webpack

+ + + +

Thêm các dòng bên dưới vào file webpack.config.js để tối ưu hóa đóng gói file bundler:

+ 
+        
+        optimization: {
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    test: /\.js(\?.*)?$/i,
+                }),
+            ],
+        },
+        
+
+ Ghi chú: + + +

Tuy nhiên optimization còn có tùy chọn SplitChunks:

+ + +

Sử dụng đoạn mã code bên dưới vào file webpack.config.js

+ + 
+            
+            optimization: {
+                splitChunks: {
+                chunks: 'all',
+                },
+            },
+        
+
+ +

2.1.6 Tùy chọn resolve

+ +

Sử dụng đoạn mã code bên dưới vào file webpack.config.js

+ 
+                
+                resolve: {
+                    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+                },
+            
+
+ + 
+                    
+                    resolve: {
+                        extensions: ['.js', '.jsx', '.json'],
+                    },
+                
+
+ Ghi chú: + + Tham khảo thêm ở đây + + +

2.1.7 Chế độ (mode) trong Webpack

+ + +

Sử dụng đoạn mã code bên dưới vào file webpack.config.js

+ 
+        
+        module.exports = {
+            mode: 'development'
+        }
+        
+
+ Ghi chú: + +

2.1.7 Watch mode trong webpack.config.js

+ + 
+        
+        module.exports = {
+            watch: true // Thêm mới dòng này
+        }
+        
+
+ +
+

npm run dev

+
+ +
\ No newline at end of file diff --git a/demo-thoitrang-2/index.html b/demo-thoitrang-2/index.html new file mode 100644 index 0000000..f03d15b --- /dev/null +++ b/demo-thoitrang-2/index.html @@ -0,0 +1,504 @@ + + + + + + + + Document + + + + + + + +
+
+
+ +
+ Sản phẩm + Bộ sưu tập + FASHION SHOW + Giới thiệu + Cửa hàng +
+
+
+
+
+ + +
+
+
+
+ + + + +
+ +
1
+
+
+ Giỏ hàng + (2) +
+ +
+
+
+
+
+
+ +
+
+
+

Giá sốc hôm nay

+
+
09
+
51
+
54
+
+
+ + Xem thêm + +
+
+
+ + +
- 35%
+ +
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+ Đã bán 28 + +
+
+
+ + +
- 35%
+ +
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+ Đã bán 28 + +
+
+
+ + +
- 35%
+ +
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+ Đã bán 28 + +
+
+
+
+ +
+
+

NEW ARRIVAL

+

Các sản phẩm bắt nhịp quốc tế, nàng thời thượng không nên bỏ lỡ

+ Xem thêm +
+
+
+ + + +
NEW
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + +
NEW
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + +
NEW
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + +
NEW
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+
+
+ + + + +
+
+
+

Gợi ý dành riêng cho bạn

+ Xem thêm +
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+ + + + +
- 17%
+
+
+ + Cream Cropped Woven Vest (Áo vest) + +
+ + 37.490.000 đ + + 38.490.000 đ +
+
+ + + +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
Kết nối ngay
+
+ + + + + + + + + + + + + + + +
+
+
+
+
+
+
+

GỌI MUA HÀNG ONLINE (08: 00 - 21: 00 mỗi ngày)

+ 1800 1162 +

Tất cả các ngày trong tuần (Trừ tết Âm Lịch)

+
+
+

GỢI Ý & KHIẾU NẠI (08:30 - 20:30)

+ 1800 1162 +

Tất cả các ngày trong tuần (Trừ tết Âm Lịch)

+
+
+
+

HỆ THỐNG SHOWROOM

+ + showroom + + Xem địa chỉ hệ thống 67 showroom +
+
+

FANPAGE CỦA CHÚNG TÔI

+ + fanpage + +
+
+
+
+
+
+

HỖ TRỢ KHÁCH HÀNG

+ +
+
+ test +
+
+
+
+
+
+

VỀ THỜI TRANG

+ +
+
+ Giới thiệu + Liên hệ +
+
+
+
+
+
+

FASHION SHOW

+ +
+
+ test +
+
+
+
+
+ + pay + +

©2023 Sixdo.vn

+ + btc + +
+
+
+ + + + + + \ No newline at end of file diff --git a/demo-thoitrang-2/product-detail.html b/demo-thoitrang-2/product-detail.html new file mode 100644 index 0000000..b930c46 --- /dev/null +++ b/demo-thoitrang-2/product-detail.html @@ -0,0 +1,280 @@ + + + + + + + + Document + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+ + +
+
+

Beige Midi Woven Dress

+
+
MSP: 68220804001DI0210
+
+ + (1) +
+
+
+ 1.148.000đ + 2.296.000đ +
+ + + Hướng dẫn kích thước + +
+
+ + Mua ngay + +
+
+ + + TÌM SẢN PHẨM TẠI SHOWROOM + +
+
+
+
+

MIỄN PHÍ GIAO HÀNG TOÀN QUỐC

+ (Cho hóa đơn từ 300.000đ) +
+
+

ĐỔI TRẢ DỄ DÀNG

+ (Đổi trả trong 7 ngày với lỗi do nhà sản xuất) +
+
+

TỔNG ĐÀI BÁN HÀNG 1800 1162

+ (Miễn phí từ 8h00 - 21:00 mỗi ngày) +
+
+
+
+
+ +
+

- Áo sọc sát nách cổ lọ thiết kế tối giản, trẻ trung

+

- Trang phục phù hợp dạo phố, đi chơi, đi học....

+

- Kích thước áo: S - M - L

+

- Chiều dài: 

+

S: 51 cm - M: 52 cm - L: 53 cm

+

Hướng dẫn sử dụng
- Giặt tay bằng nước lạnh

+

- Không ngâm, không tẩy 

+

- Giặt riêng các sản phẩm khác màu

+

- Không vắt

+

- Là ủi ở nhiệt độ thấp.

+

- Khuyến kích giặt khô

+
+
+
+
Sản phẩm liên quan
+
+
+ product +
+
+
+
+ + + + +
- 17%
+ + Cream Cropped Woven Vest (Áo vest) + +
+
+ + 37.490.000 đ + + 38.490.000 đ +
+ + + +
+
+
+ + + + +
- 17%
+ + Cream Cropped Woven Vest (Áo vest) + +
+
+ + 37.490.000 đ + + 38.490.000 đ +
+ + + +
+
+
+ + + + +
- 17%
+ + Cream Cropped Woven Vest (Áo vest) + +
+
+ + 37.490.000 đ + + 38.490.000 đ +
+ + + +
+
+
+
+
+
+
+
+
Hướng dẫn chọn kích thước
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Thông số/ CỡS (27)M (28)L (29)XL (30)XXL (31)
Chiều cao (cm)150 - 155155 - 163160 - 165162 - 166163 - 168
Cân nặng (kg)41 - 4647 - 5253 - 5859 - 6465 - 69
Vòng ngực (cm)79 - 8282 - 8788 - 9494 - 9999 - 104
Rộng mông (cm)88 - 9090 - 9494 - 9898 - 102102 - 107
+
+
+ + + + + + + \ No newline at end of file