.truncatee,
.truncatee h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.red-line-through {
    text-decoration: line-through;
    color: red
}

.bar {
    position: relative;
    background-color: #bdb7b7;
    border-radius: 10px;
    overflow: hidden;
    height: 15px;
    width: 100%
}

.progress {
    background-color: var(--warna_2);
    height: 100%;
    transition: width .5s
}

.progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: #fff
}


@media (min-width:1024px) {
    .container-desktop {
        height: 400px
    }
}

.pl-6 {
    padding-left: 1.5rem
}

.truncatee {
    width: 190px;
    display: block
}

.truncatee h2 {
    width: inherit;
    margin: 0
}

.btn {
    position: absolute;
    top: 0;
    right: 0
}

.fs-countdown {
    display: flex;
    justify-content: center;
    align-items: center
}

.fs-countdown .time {
    font-size: 1em;
    color: #fff;
    padding: .3em .8em;
    background: linear-gradient(to bottom, var(--warna_1), var(--warna_2));
    border-radius: .3em
}

.fs-countdown .separator {
    font-size: 1em;
    color: #fff;
    padding: .3em
}

.tabs-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.tabs-container::-webkit-scrollbar {
    display: none
}

.tab-button {
    flex: 0 0 auto;
    margin-right: 10px
}

.containernvd {
    border-radius: 15px 15px 0 0
}

.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250, 204, 21, var(--tw-text-opacity))
}

.flash-sale-img {
    width: 65px;
    height: 60px;
    object-fit: cover
}

.p-4 {
    padding: 1rem
}

.rounded-xl {
    border-radius: .75rem
}

.cursor-pointer {
    cursor: pointer
}

.w-\[265px\] {
    width: 265px
}

.relative {
    position: relative
}

a {
    color: inherit;
    text-decoration: inherit
}

.rounded-sm {
    border-radius: calc(var(--radius) - 4px)
}

.overflow-hidden {
    overflow: hidden
}

.w-24 {
    width: 6rem
}

.aspect-square {
    aspect-ratio: 1/1
}

.-top-\[9px\] {
    top: -9px
}

.-right-\[9px\] {
    right: -9px
}

.bg-secondary {
    background-color: #000000
}

.bg-primary\/50 {
    background-color: #293447f0
}

.w-2 {
    width: .5rem
}

.h-2 {
    height: .5rem
}

.top-0 {
    top: 0
}

.left-0 {
    left: 0
}

.absolute {
    position: absolute
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}

.shadow-md,
.shadow-sm {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground))
}

.uppercase {
    text-transform: uppercase
}

.font-semibold {
    font-weight: 600
}

.text-xxs {
    font-size: .625rem
}

.text-center {
    text-align: center
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.rotate-45 {
    --tw-rotate: 45deg
}

.rotate-180,
.rotate-45 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.origin-bottom-right {
    transform-origin: bottom right
}

.w-square-diagonal {
    width: 141.42%
}

.block {
    display: block
}

.right-0 {
    right: 0
}

.bottom-0 {
    bottom: 0
}