:root { --color-primary: #ff5c00; --color-secondary: #1f1f1f; --white: #fff; --black: #000; --gray: #b7b7b7; --gray-2: #999999; --box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2); --marker-color: #d9d9d9; } *, ::after, ::before { padding: 0; margin: 0; -webkit-box-sizing: inherit; box-sizing: inherit; } html { font-size: 16px; } body { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Inter", sans-serif; color: #000; min-width: 1220px; word-break: break-word; line-height: 1.3; font-weight: 400; background-color: #fff; } .container { max-width: 1220px; width: 100%; padding: 0 10px; margin: 0 auto; } .box-w { border-radius: 15px; background-color: #fff; padding: 12px; } .alert-mess { text-align: center; padding: 50px 30px; font-size: 20px; font-weight: 500; color: red; } .paging { padding: 56px 10px 32px; text-align: center; } .paging-link.active, .paging-link:hover { color: #fff; background: var(--color-secondary); font-weight: 500; border-color: var(--color-secondary); } .paging-link { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 8px; border-radius: 5px; color: #fff; font-size: 16px; line-height: 20px; text-decoration: none; background: #fff; text-transform: capitalize; width: 34px; height: 34px; color: #000; } .routing ol { margin: 0; list-style: none; } .routing-link { position: relative; font-size: 14px; font-weight: 400; padding: 0 10px; color: #888; text-decoration: none; } .routing-link:first-child { padding-left: 0; } .routing-link:last-child { color: #333; max-width: 700px; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .routing-link:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%) rotate(25deg); -ms-transform: translateY(-50%) rotate(25deg); transform: translateY(-50%) rotate(25deg); width: 1px; height: 80%; border-right: 1px solid #dfdfdf; } .success-form { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(0, 0, 0, 0.5); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .success-form .cart-success { width: 500px; height: 300px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; } .success-form .success-form-svg { display: block; height: 80px; width: 80px; color: var(--color-primary); } .success-form .text-cart-success { font-size: 24px; font-weight: 600; line-height: 1.6; padding-top: 30px; } .cart:hover .cart-ttip { display: block; } .cart-ttip { display: none; position: absolute; background-color: #fff; border-radius: 10px; width: 400px; height: auto; right: 0; top: 24px; z-index: 3; -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 25%); box-shadow: 0 1px 6px rgb(0 0 0 / 25%); } .cart-ttip .cart-ttip-price-button { border-radius: 5px; padding: 10px; background: var(--color-primary); text-align: center; margin: 0 12px 12px; } .cart-ttip .cart-ttip-item-container { max-height: 300px; overflow: auto; } .cart-ttip .cart-ttip-item-container .compare-item { height: auto; margin: 0; max-width: unset; -webkit-box-shadow: none; box-shadow: none; } .cart-ttip .cart-ttip .header-null-cart { width: 100% !important; text-align: center; padding: 30px; color: #000; font-weight: 600; } .cart-ttip .header-cart-item-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 10px; } .cart-ttip .cart-ttip-price, .compare-item, .header-nav-menu a { display: -webkit-box; display: -ms-flexbox; } .cart-ttip .header-cart-item-price p { font-weight: 700; width: auto; } .cart-ttip .cart-ttip-price { padding: 10px 20px 10px 10px; border-top: 3px solid var(--color-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; gap: 6px; } .cart-ttip .cart-ttip-price p { color: #000; width: auto; padding: 0; margin: 0; } .cart-ttip .cart-ttip-price p:first-child { font-size: 15px; font-weight: 700; text-transform: uppercase; } .cart-ttip .cart-ttip-price p:nth-child(2) { font-size: 13px; font-weight: 200; color: var(--color-primary); margin-left: 0 !important; } .cart-ttip .cart-ttip-price p:last-child { font-size: 15px; font-weight: 700; } .cart-ttip .compare-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-shadow: 0 1px 8px rgb(0 0 0 / 25%); box-shadow: 0 1px 8px rgb(0 0 0 / 25%); padding: 10px; border-radius: 10px; max-width: 360px; background: #fff; } .cart-ttip .compare-item img { width: 80px; border: 5px; } .cart-ttip .compare-item .compare-item-text { display: inline-block; padding: 0 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cart-ttip .compare-item .compare-item-text p { background: 0 0; color: #000; padding: 0; width: 100%; word-break: break-word; line-height: 24px; margin-left: 0; } .cart-ttip .header-null-cart { width: 100%; text-align: center; padding: 24px; color: #000; font-size: 14px; font-weight: 600; } .static-icons { background-image: url(../images/static-icons-map-pc.png); background-repeat: no-repeat; display: inline-block; background-size: 240px 227px; } .static-icons-static-icon-category-grid { width: 23px; height: 20px; background-position: -2px -2px; } .static-icons-static-icon-category-list { width: 23px; height: 20px; background-position: -30px -2px; } .static-icons-static-icon-feature-calendar { width: 32px; height: 32px; background-position: -57px -2px; } .static-icons-static-icon-feature-calendar-orange { width: 36px; height: 36px; background-position: -94px -2px; } .static-icons-static-icon-feature-delivery { width: 32px; height: 26px; background-position: -135px -2px; } .static-icons-static-icon-feature-delivery-orange { width: 46px; height: 36px; background-position: -2px -33px; } .static-icons-static-icon-feature-phone { width: 32px; height: 32px; background-position: -135px -33px; } .static-icons-static-icon-feature-wallet { width: 32px; height: 31px; background-position: -53px -70px; } .static-icons-static-icon-fire { width: 21px; height: 30px; background-position: -90px -70px; } .static-icons-static-icon-header-cart { width: 20px; height: 20px; background-position: -116px -70px; } .static-icons-static-icon-header-cart-pro { width: 20px; height: 20px; background-position: -141px -70px; } .static-icons-static-icon-header-cart-pro-big { width: 26px; height: 25px; background-position: -2px -95px; } .static-icons-static-icon-header-delivery { width: 24px; height: 20px; background-position: -166px -70px; } .static-icons-static-icon-header-phone { width: 24px; height: 24px; background-position: -116px -95px; } .static-icons-static-icon-header-search { width: 20px; height: 20px; background-position: -145px -95px; } .static-icons-static-icon-header-user { width: 22px; height: 24px; background-position: -33px -120px; } .static-icons-static-icon-location { width: 13px; height: 14px; background-position: -172px -2px; } .static-icons-static-icon-phone-ct { width: 14px; height: 14px; background-position: -172px -21px; } .static-icons-static-icon-phone-ct-orange { width: 26px; height: 28px; background-position: -60px -120px; } .static-icons-static-icon-red-gift { width: 16px; height: 16px; background-position: -53px -40px; } .static-icons-static-icon-review-user { width: 31px; height: 31px; background-position: -145px -120px; } .static-icons-static-icon-social-fb { width: 42px; height: 42px; background-position: -191px -2px; } .static-icons-static-icon-social-fb-orange { width: 34px; height: 34px; background-position: -195px -49px; } .static-icons-static-icon-social-gg-news { width: 42px; height: 42px; background-position: -195px -88px; } .static-icons-static-icon-social-gg-news-orange { width: 34px; height: 34px; background-position: -91px -135px; } .static-icons-static-icon-social-instagram { width: 42px; height: 42px; background-position: -181px -135px; } .static-icons-static-icon-social-instagram-orange { width: 34px; height: 34px; background-position: -2px -182px; } .static-icons-static-icon-social-twitter { width: 42px; height: 42px; background-position: -41px -182px; } .static-icons-static-icon-social-youtube { width: 42px; height: 42px; background-position: -88px -182px; } .static-icons-static-icon-star-orange { width: 13px; height: 12px; background-position: -75px -50px; } .static-icons-static-icon-thunder { width: 27px; height: 41px; background-position: -135px -182px; } @-webkit-keyframes gradient-bg-antimation { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } @keyframes gradient-bg-antimation { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } .heading-primary .title { font-size: 32px; line-height: 38px; font-weight: 700; padding: 24px 0; } .heading-primary .offsite-wrapper { width: 100%; flex: 1; line-height: 24px; border-bottom: 2px solid var(--color-secondary); text-align: right; } .heading-primary .view-more { position: relative; display: inline-block; color: var(--color-primary); transform: translateY(-2px); line-height: 20px; margin-right: 4px; } .heading-primary .view-more::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid var(--color-primary); } .global-time-deal { font-size: 20px; line-height: 30px; gap: 4px; } .global-time-deal p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #171717; border-radius: 5px; min-width: 26px; line-height: 36px; padding: 0 4px; } .header { box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25); } .header .header-top .row { height: 40px; } .header .header-bottom .row { height: 105px; } .header .header-bottom .category .image { height: 25px; } .header .header-bottom .function .icon { height: 40px; width: 40px; display: inline-flex; align-items: center; justify-content: center; background-color: #ebe9eb; border-radius: 5px; } .homepage .swiper-section-hero .swiper-pagination-bullet { width: 14px; height: 14px; border: 2px solid #fff; background-color: transparent; opacity: 1; } .homepage .swiper-section-hero .swiper-pagination-bullet-active { background-color: var(--color-primary); border-color: transparent; } .homepage .swiper-section-hero .wrapper-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .homepage .swiper-section-hero .wrapper-content .title { font-size: 64px; line-height: 78px; font-weight: 600; max-width: 484px; margin: 0 auto; } .homepage .swiper-section-hero .wrapper-content .text { font-size: 20px; line-height: 24px; max-width: 666px; margin: 12px auto 0; } .homepage .section-brand { border-radius: 15px; } .homepage .section-brand .swiper { margin: 0 30px; padding: 30px 0; } /* */ .homepage .section-deal .heading-deal { background-color: var(--color-primary); border-radius: 15px; padding: 10px 16px; color: white; margin-bottom: 20px; } .homepage .section-deal .heading-deal .wrapper-title { font-size: 40px; line-height: 48px; font-weight: 900; } .homepage .section-deal .product-deal .wrapper-deal { height: 20px; width: 100%; } .homepage .section-deal .product-deal .wrapper-deal .deal-line { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; border-radius: 10px; background: linear-gradient(270deg, #ffb800 0%, #ff7a30 100%); } .homepage .section-deal .product-deal .wrapper-deal .deal-line.total { opacity: 0.3; } .homepage .section-deal .product-deal .wrapper-deal .deal-line.remaining { background: -o-repeating-linear-gradient( left, #ffb800 0, #ff7a30 50%, #ffb800 100% ); background: repeating-linear-gradient( to right, #ffb800 0, #ff7a30 50%, #ffb800 100% ); background-size: 200% auto; background-position: 0 100%; -webkit-animation: 2s linear infinite forwards gradient-bg-antimation; animation: 2s linear infinite forwards gradient-bg-antimation; } .homepage .section-deal .product-deal .wrapper-deal .static-icons { position: absolute; bottom: 2px; left: 0; } .homepage .section-deal .product-deal .wrapper-deal .sold { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .homepage .section-deal .product-deal .p-deal-featured .p-cart { height: 50px; border: 1px solid var(--color-primary); border-radius: 10px; } .homepage .section-deal .product-deal .p-deal-featured .p-image { border-radius: 25px; border: 4px solid var(--color-primary); } .homepage .section-deal .product-deal .p-deal-other .p-image { max-width: 124px; width: 100%; padding-bottom: 0; border-radius: 8px; } .homepage .section-deal .product-deal .p-deal-other .swiper { height: 392px; } .homepage .section-deal .banner-deal-image { position: relative; border-radius: 15px; overflow: hidden; display: block; } .homepage .section-deal .banner-deal-image .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .homepage .section-deal .banner-deal-image .wrapper-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; max-width: 335px; width: 100%; text-align: center; } .homepage .section-deal .banner-deal-image .wrapper-content .title { font-size: 36px; line-height: 44px; font-weight: 600px; } .homepage .section-deal .banner-deal-image .wrapper-content .btn { padding: 13px 33px; width: max-content; margin: 0 auto; border-radius: 10px; } /* */ .homepage .section-category .category-child { border-bottom: 1px solid #d9d9d9; } .homepage .section-category .category-child .list { gap: 50px; } .homepage .section-category .category-child .item { position: relative; cursor: pointer; padding-bottom: 10px; transform: translateY(1px); } .homepage .section-category .category-child .item.selected { color: var(--color-primary); } .homepage .section-category .category-child .item.selected::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid var(--color-primary); } .homepage .section-customer .list { margin: 12px 0 38px; } .homepage .section-customer .customer-product-review { border-top: 1px solid var(--color-primary); } .homepage .section-customer .customer-product-image { border-radius: 15px; } /* */ .p-item .p-image { position: relative; padding-bottom: 100%; overflow: hidden; display: flex; } .p-item .p-img { margin: auto 0; bottom: 0; right: 0; top: 0; left: 0; position: absolute; } .p-item .p-name { display: block; font-size: 14px; line-height: 18px; font-weight: 600; margin: 12px 0 8px; } .p-item .p-price-sale { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--color-primary); } .p-item .p-price-stock { font-size: 14px; line-height: 24px; font-weight: 500; color: #b7b7b7; text-decoration: line-through; margin-left: 8px; } .p-item .p-summary { font-size: 13px; line-height: 18px; max-width: 190px; } .p-item .p-cart { width: 40px; height: 40px; border: 1px solid var(--color-primary); border-radius: 5px; display: flex; align-items: center; justify-content: center; } .footer .footer-top .features { border-top: 1px solid #f0f0f0; height: 110px; } .footer .footer-mid { background-color: #f0f0f0; } .footer .footer-mid .row { height: 180px; } .footer .footer-bottom { padding: 30px 0 40px; } .footer .footer-bottom .list li:not(:last-child) { margin-bottom: 8px; } .footer .footer-bottom .list a:hover { color: var(--color-primary); } .footer .footer-bottom .ministry-of-industry-and-trade { max-width: 140px; margin-top: 30px; } .footer .copy-right { border-top: 1px solid rgba(255, 255, 255, 0.3); } /* */ .category-page .banner .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); font-size: 40px; line-height: 48px; font-weight: 700; text-transform: uppercase; color: #fff; } .category-page .sort { border-bottom: 1px solid #f0f0f0; } .category-page .sort .sort-by-collection select { width: 156px; height: 36px; border-radius: 8px; background-color: #f0f0f0; outline: 0; border: 0; padding: 4px; } .category-page .filter { background-color: #f0f0f0; border-radius: 15px; padding: 16px 8px; } .category-page .filter .filter-item { border-top: 1px solid #1f1f1f; padding-top: 12px; } .category-page .filter .filter-item .list .check-box { display: inline-block; width: 16px; height: 16px; background-color: #ffffff; border-radius: 3px; } /* */ .color-green { color: #64c800; } .color-blue { color: #0079c8; } .gray-line { width: 100%; height: 1px; border-bottom: 1px solid #e1e1e1; } .detail-page .section-product .pro-name { font-size: 32px; line-height: 40px; font-weight: 600; margin-bottom: 8px; } .detail-page .section-product .pro-sub-title { line-height: 26px; } .detail-page .section-product .pro-price .title { font-size: 16px; line-height: 20px; font-weight: 700; display: inline-block; width: 90px; } .detail-page .section-product .pro-status .pro-status-item { padding: 8px 12px; background: #f0f0f0; border-radius: 8px; display: inline-block; } .detail-page .section-product .pro-gift .title { font-size: 16px; line-height: 26px; font-weight: 700; color: var(--color-primary); } .detail-page .section-product .pro-gift .list { position: relative; padding: 16px; background: #f0f0f0; border-radius: 15px; } .detail-page .section-product .pro-gift .list::after { position: absolute; content: ""; top: -12px; left: 60px; width: 20px; height: 12px; clip-path: polygon(50% 0%, 0 100%, 100% 100%); background: #f0f0f0; } .detail-page .section-product .pro-gift .list .item { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .detail-page .section-product .pro-gift .list .marker { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-primary); font-size: 12px; line-height: 13px; font-weight: 700; color: #fff; } .detail-page .section-product .pro-cart .pro-cart-quantity { max-width: 72px; width: 100%; height: 50px; background: #f0f0f0; border-radius: 5px; outline: 0; border: 0; padding: 12px 18px; font-size: 16px; font-weight: 700; } .detail-page .section-product .pro-cart .pro-cart-btn { display: inline-flex; align-items: center; justify-content: center; max-width: 245px; width: 100%; height: 50px; border-radius: 25px; border: 1px solid var(--color-primary); font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase; } .detail-page .section-review .review-form { padding: 20px 12px 30px; border: 1px solid #e1e1e1; border-radius: 15px; } .detail-page .section-review .review-form .review-form-item { margin-bottom: 20px; } .detail-page .section-review .review-form .review-form-item .r-input { background: #ffffff; border: 1px solid #d9d9d9; border-radius: 10px; height: 42px; width: 100%; font-size: 14px; line-height: 18px; padding: 10px; outline-color: #d7d7d7; } .detail-page .section-review .review-form .review-form-item textarea.r-input { height: 106px; resize: none; margin-bottom: -4px; } .detail-page .section-review .review-form .review-btn { display: flex; align-items: center; justify-content: center; width: 212px; height: 42px; background: #1f1f1f; border-radius: 10px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; }