:root{
    --btn-color: #c51031;
}

.promotion-page {
    background: #17629c;
}

.promotion-page .product-item .price-wishlist {
    position: inherit;
}

.promotion-page .banner {
    cursor: pointer;
}

.promotion-page .banner img {
    width: 100%;
    height: auto;
}

.promotion-page .title {
    margin-bottom: 15px;
}

.promotion-page h1 {
    font-size: 18px;
    text-transform: capitalize;
}

.promotion-page h2 {
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

.promotion-page h2 a {
    color: #fff;
}

.promotion-page h3 {
    font-size: 16px;
}

.arrow-btn {
    text-align: right;
    margin-bottom: 15px;
}

.arrow-btn button {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border: none;
    background: #fff;
    box-shadow: 0px 1px 4px rgba(34, 34, 34, 0.4);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.arrow-btn button:hover {
    background: var(--primary-color);
}

.arrow-btn button:hover i {
    color: #fff;
}

.arrow-btn button i {
    font-size: 20px;
    color: #333;
    font-weight: 700;
}

.category-banner,
.banner-section .item {
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.category-banner .info,
.banner-section .info {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    padding: 5px 15px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: var(--btn-color);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.category-banner .info:hover,
.banner-section .info:hover {
    background: var(--primary-color);
    color: #fff;
}

.banner-section-1 .item {
    height: 53.34vw;
}

.banner-section-2 .item {
    height: 27.2vw;
}

.banner-section-3 .item {
    height: 37.33vw;
}

.banner-section-4 .item {
    height: 48.8vw;
}

.banner-section-5 .item {
    height: 25.6vw;
}

.category-banner {
    height: 27.2vw;
    margin-bottom: 10px;
}

.category-banner-1{
    height: 31.7vw;
}

.product-section,
.category-tab,
.banner-section {
    margin-top: 20px;
}

.pro-content {
    width: 100%;
    height: auto;
}

.pro-content .title {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 0 10px;
}

.product-item {
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
}

.pro-content .product-item .buy {
    display: block;
    width: 100%;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-family: "OpenSans-Bold";
    background: var(--btn-color);
    margin: 10px 0 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.pro-content .product-item .buy a {
    color: #fff;
    font-weight: 600;
}

.pro-content .product-item:hover .buy {
    background: var(--primary-color);
}

.pro-content .discount {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 6px 0 0;
}

.pro-content .discount span {
    display: inline-block;
    width: 100%;
    height: 36px;
    text-align: center;
    color: var(--btn-color);
    border: 1px dashed var(--btn-color);
    position: relative;
    line-height: 36px;
}

.pro-content .discount span i {
    font-size: 16px;
    color: var(--btn-color);
    position: absolute;
    right: -8px;
    bottom: -2px;
}

.pro-content .no-discount {
    text-align: center;
    margin: 6px 0 0;
}

.pro-content .no-discount span {
    display: flex;
    width: 100%;
    height: 36px;
    color: #e53a88;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.nav-list,
.tab-content {
    margin-top: 15px;
}

.nav-tabs .nav-link {
    display: block !important;
}

.nav-list {
    display: flex;
    justify-content: center;
    -ms-flex-wrap: nowrap;
    gap: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
    border: none;
}

.nav-list .nav-item .nav-link {
    border: none;
    color: #333;
    font-weight: 500;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid #333;
    padding: 10px;
    margin: 0;
    background: #fff;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.nav-list .nav-item .nav-link.active,
.nav-list .nav-item .nav-link:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.promotion-page .view-more {
    margin-top: 5px;
    text-align: center;
}

.promotion-page .view-more a {
    display: inline-block;
    color: #333;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
    white-space: nowrap;
    background-color: #fff;
    line-height: 1;
    border: 1px solid #e5e5e5;
    padding: 10px;
    font-weight: 700;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.promotion-page .view-more a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.product-item .reviews-number {
    color: #888;
    font-size: 12px;
}

.product-item .rating-box {
    width: 60px;
    height: 12px;
}

.product-item .rating-box:before {
    font-size: 12px;
    height: 12px;
    line-height: 12px;
}

.product-item .rating-box .rating {
    height: 12px;
}

.product-item .rating-box .rating:before {
    font-size: 12px;
    height: 12px;
    line-height: 12px;
}

.category-tab .menu li {
    margin-left: 20px;
    flex: 1;
    margin-left: 20px;
    cursor: pointer;
    opacity: 0.4;
}

.category-tab .menu li.active,
.category-tab .menu li:hover {
    opacity: 1;
}

.category-tab .menu li:first-child {
    margin-left: 0 !important;
}

.category-tab .menu li img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.category-tab .category-1 .view-more a:hover,
.category-tab .category-1 .buy {
    background: #052dc2;
}

.category-tab .category-2 .view-more a:hover,
.category-tab .category-2 .buy {
    background: #141414;
}

.category-tab .category-3 .view-more a:hover,
.category-tab .category-3 .buy {
    background: #ff5bbe;
}

.category-tab .category-4 .view-more a:hover,
.category-tab .category-4 .buy {
    background: #2092d0;
}

.brand-list li {
    margin-bottom: 10px;
}

.brand-list li a {
    display: block;
    background: #fff;
}

@media (max-width: 991px) {
    .category-list > div {
        margin-top: 20px;
    }

    .category-list .category-1 {
        margin-top: 0 !important;
    }

    .category-list h3 a {
        color: #fff;
        text-transform: uppercase;
    }

    .category-list .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .category-list .arrow-btn {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .nav-list .nav-item {
        width: 48%;
    }

    .nav-list .nav-item button {
        width: 100%;
        height: auto;
    }

    .day-list ul {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .flash-sale .count-down {
        margin: 0 auto;
    }

    .flash-sale .count-down:before {
        content: "";
        flex: 1;
        height: 1px;
        background: #9a4a43;
        top: 6px;
        position: relative;
    }

    .flash-sale .count-down .availability {
        font-size: 14px;
        font-weight: 700;
        color: #fee7b1;
        white-space: nowrap;
        position: absolute;
        right: 165px;
        top: -2px;
    }

    .flash-sale .item .info {
        text-align: center;
    }

    .flash-sale .item .product-name a {
        overflow: hidden;
        max-height: 36px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 18px;
        color: #fff;
    }

    .flash-sale .shop-now {
        display: inline-block;
    }
}

@media (max-width: 575px) {
    .product-item .product-image {
        width: calc(calc(100vw - 84px) / 2);
        width: -moz-calc(calc(100vw - 84px) / 2);
        width: -webkit-calc(calc(100vw - 84px) / 2);
        width: -ms-calc(calc(100vw - 84px) / 2);
        height: calc(calc(100vw - 84px) / 2);
        height: -moz-calc(calc(100vw - 84px) / 2);
        height: -webkit-calc(calc(100vw - 84px) / 2);
        height: -ms-calc(calc(100vw - 84px) / 2);
    }

    .flash-sale .shop-now {
        height: 28px;
        line-height: 28px;
        padding: 0 35px 0 15px;
        margin-top: 5px;
    }

    .flash-sale .shop-now a {
        font-size: 12px;
    }

    .flash-sale .shop-now span {
        width: 28px;
        height: 28px;
        font-size: 16px;
        line-height: 28px;
    }
}

@media (min-width: 350px) {
    .day-list li {
        height: 8.53vw;
        line-height: 8.53vw;
        font-size: 14px;
    }

    .flash-sale .count-down {
        width: 90%;
    }
}

@media (min-width: 414px) {
    .day-list li {
        font-size: 16px;
    }

    .flash-sale .count-down {
        width: 360px;
    }

    .flash-sale .count-down .availability {
        right: 174px;
    }

    .flash-sale .count-down .time b {
        margin: 0 3px;
    }
}

@media (min-width: 576px) {
    .banner-section-1 .item {
        height: 294px;
    }

    .banner-section-2 .item {
        height: 149px;
    }

    .banner-section-3 .item {
        height: 209px;
    }

    .banner-section-4 .item {
        height: 268px;
    }

    .banner-section-5 .item {
        height: 140px;
    }

    .category-banner {
        height: 150px;
    }

    .category-banner-1{
        height: 174px;
    }

    .product-item .product-image {
        width: 228px;
        height: 228px;
    }

    .category-list .product-item {
        width: 250px;
        margin-right: 20px;
    }
}

@media (min-width: 768px) {
    .promotion-page h1 {
        font-size: 24px;
    }

    .promotion-page h2 {
        font-size: 20px;
        text-align: center;
    }

    .promotion-page h3 {
        font-size: 20px;
        color: #fff;
    }

    .banner-section-1 .item {
        height: 192px;
    }

    .banner-section-2 .item {
        height: 188px;
    }

    .banner-section-3 .item {
        height: 284px;
    }

    .banner-section-4 .item {
        height: 175px;
    }

    .banner-section-5 .item {
        height: 188px;
    }

    .category-banner {
        height: 160px;
        margin-bottom: 15px;
    }

    .category-banner-1{
        height: 234px;
    }

    .nav-list .nav-item .nav-link {
        min-width: 100px;
    }

    .product-item .product-image {
        width: 318px;
        height: 318px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .category-list .product-item {
        width: 220px;
        margin-right: 20px;
    }

    .category-list .product-image {
        width: 198px;
        height: 198px;
    }
}

@media (min-width: 992px) {
    .promotion-page .title {
        margin-bottom: 20px;
    }

    .product-section,
    .category-tab,
    .banner-section {
        margin-top: 40px;
    }

    .promotion-page h1 {
        font-size: 34px;
    }

    .promotion-page h2 {
        font-size: 30px;
        text-align: center;
    }

    .promotion-page h3 {
        font-size: 26px;
    }

    .banner-section-1 .item {
        height: 260px;
    }

    .banner-section-2 .item {
        height: 253px;
    }

    .banner-section-3 .item {
        height: 184px;
    }

    .banner-section-4 .item {
        height: 237px;
    }

    .category-banner,
    .banner-section-5 .item {
        height: 253px;
    }

    .category-banner-1{
        height: 314px;
    }

    .category-banner .info,
    .banner-section .info {
        font-size: 18px;
        padding: 8px 25px;
    }

    .pro-content .discount,
    .pro-content .no-discount {
        margin-top: 10px;
    }

    .promotion-page .view-more {
        margin-top: 20px;
    }

    .product-item .product-image {
        width: 200px;
        height: 200px;
    }

    .nav-list .nav-item .nav-link {
        min-width: 120px;
        padding: 15px 0;
    }

    .nav-list .nav-item .nav-link,
    .promotion-page .view-more a {
        font-size: 16px;
    }

    .promotion-page .view-more a {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .nav-list,
    .tab-content {
        margin-top: 20px;
    }

    .promotion-page .product-item,
    .banner-section .item {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .category-content {
        background: #e5e5e5;
        padding: 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .category-tab .menu ul {
        display: flex;
        justify-content: center;
    }

    .category-list {
        margin-top: 20px;
    }

    .category-list > div {
        display: none;
    }

    .category-list > div.active {
        display: block !important;
    }

    .category-list .product-item {
        display: flex;
        align-items: center;
        margin-bottom: 0 !important;
    }

    .category-list .product-image img {
        width: 100%;
        height: auto;
    }

    .category-list .box-content {
        margin-left: 10px;
        flex: 1;
    }
}

@media (min-width: 1200px) {
    .banner-section-1 .item {
        height: 203px;
    }

    .banner-section-2 .item {
        height: 300px;
    }

    .banner-section-3 .item {
        height: 218px;
    }

    .banner-section-4 .item {
        height: 281px;
    }

    .category-banner,
    .banner-section-5 .item {
        height: 300px;
    }

    .category-banner-1{
        height: 373px;
    }

    .category-banner .info,
    .banner-section .info {
        font-size: 20px;
        padding: 10px 30px;
    }

    .product-item .product-image {
        width: 240px;
        height: 240px;
    }
}

@media (min-width: 1400px) {
    .banner-section-1 .item {
        height: 236px;
    }

    .banner-section-2 .item {
        height: 349px;
    }

    .banner-section-3 .item {
        height: 255px;
    }

    .banner-section-4 .item {
        height: 327px;
    }

    .category-banner,
    .banner-section-5 .item {
        height: 349px;
    }

    .category-banner-1{
        height: 433px;
    }

    .product-item .product-image {
        width: 286px;
        height: 286px;
    }

    .category-list .product-image {
        width: 180px;
        height: 180px;
    }
}

@media (min-width: 1500px) {
    .banner-section-1 .item {
        height: 251px;
    }

    .banner-section-2 .item {
        height: 370px;
    }

    .banner-section-3 .item {
        height: 272px;
    }

    .banner-section-4 .item {
        height: 348px;
    }

    .category-banner,
    .banner-section-5 .item {
        height: 370px;
    }

    .category-banner-1{
        height: 459px;
    }

    .product-item .product-image {
        width: 306px;
        height: 306px;
    }

    .category-list .product-image {
        width: 200px;
        height: 200px;
    }
}