:root {
    --linear-bg-1m: linear-gradient(135deg, #2ea2aa 0%, #5038c8 100%);
    --linear-bg-2m: linear-gradient(135deg, #3f41a7 0%, #27acd1 100%);
    --linear-bg-3m: linear-gradient(135deg, #9971d3 0%, #4538c8 100%);
    --linear-bg-4m: linear-gradient(110deg, #6936b3 0%, #228382 100%);
    --linear-bg-5m: linear-gradient(117deg, #e987f2 0%, #6f2d94 100%);
    --linear-bg-6m: linear-gradient(117deg, #845eea 0%, #cd3e6f 100%);
    --linear-bg-7m: linear-gradient(117deg, #e29a78 0%, #ce5656 100%);
    --linear-bg-8m: linear-gradient(117deg, #77ad5e 0%, #20778f 100%);
    --linear-bg-9m: linear-gradient(117deg, #51a364 0%, #166e9e 100%);
    --linear-bg-10m: linear-gradient(117deg, #dc3576 0%, #1b80b7 100%);
}

.product-container {
    margin-top: -21px;
    opacity: 1 !important;
    transition: opacity 0.5s;
}

.countdown-activity {
    padding: 20px;
    background: linear-gradient(96deg, #fd8f70 0%, #fc3d3d 100%);
    color: #fff;
    justify-content: center;
    display: flex;
    font-size: 18px;
    line-height: 1.4;
    justify-content: space-evenly !important;
}

.activity-content {
    margin-right: 10px;
    flex-wrap: wrap;
    max-width: calc(30% + 100px);
}

.activity-title {
    font-size: 1.5em;
    font-weight: bold;
}

.countdown-content {
    flex-wrap: wrap;
    padding: 0.2em 0.2em 0.2em 1em !important;
    flex-shrink: 0;
}

.countdown-desc {
    margin-right: 10px;
}

.product-box {
    padding: 60px 0;
    color: #fff;
    margin-bottom: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #88c0fd 10%, #0757af 100%);
}

.product-background {
    /**animation: hue 100s infinite linear; */
    background: linear-gradient(135deg, #28b1bb 0%, #5038c8 100%);
}

@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0);
    }

    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

@keyframes hue {
    from {
        -webkit-filter: hue-rotate(0);
    }

    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

.product-box .product-row {
    padding: 0 20px;
    max-width: 1400px;
    margin: auto;
}

.product-row .payrow-6 {
    padding: 0 10px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50%);
}

.more-but {
    margin-top: 30px;
}

.more-but .but.hollow {
    margin: 0 10px;
    padding: 0.5em 1.5em;
    margin: 0 010px;
}

.more-but .but.hollow:hover {
    color: #555;
}

.pay-content {
    max-width: 400px;
    margin: auto;
}

.product-header {
    font-size: 50px;
    letter-spacing: 0.1em;
}

.product-doc {
    opacity: 0.8;
    margin: 20px 0;
}

.pay-mark {
    font-size: 0.6em;
}

.original-price.ml10 {
    position: relative;
    padding: 0 5px;
    font-size: 18px;
    opacity: 0.7;
}

.product-pay {
    margin: 20px 0;
}

.product-pay .but {
    padding: 0.5em 2em;
    margin: 0;
}

.product-pay .but + .but {
    margin-left: 20px;
}

.product-details {
    background: rgba(0, 0, 0, 0.1);
    opacity: 0.6;
    max-width: 300px;
    text-align: left;
}

.pay-content .share-btn text {
    display: none;
}

@media (max-width: 768px) {
    .countdown-activity.flex {
        font-size: 13px;
        padding: 12px;
    }

    .activity-content.flex {
        display: block;
    }

    .countdown-content.flex {
        display: block;
        background: unset;
    }

    .countdown-desc {
        margin-bottom: 5px;
        margin-right: 0;
    }

    .product-box {
        padding: 10px 0;
    }

    .product-box .product-row {
        padding: 0;
    }

    .product-box .product-row .price-box {
        justify-content: center;
    }

    .product-doc {
        margin: 10px 0;
    }

    .more-but {
        margin-top: 18px;
    }

    .product-box .product-row {
        text-align: center;
    }

    .product-row .payrow-6 {
        padding: 10px;
        width: 100%;
    }

    .payrow-6.payrow-left {
        margin-bottom: 20px;
        padding: 0;
        margin-top: -10px;
    }

    .payrow-6.payrow-left .radius8 {
        border-radius: 0;
    }

    .product-details {
        margin: auto;
    }

    .product-pay .cashier-link {
        width: 70%;
        border-radius: 100px;
        padding: 0.7em 2em;
    }
}