body {
    padding: 0;
    position: relative
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.tw-max-w-7xl {
    max-width: 72rem
}

.ws-max-w-7xl {
    max-width: 80rem;
    margin: auto
}

.uudai-time {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .01rem
}

.uudai-time-bg {
    padding: 30px 20px;
    background: url(/assets/images/sale.webp) no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    border-radius: 12px 12px 0 0
}

.uudai-time .uudai--title {
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.uudai-time img {
    width: 32px;
    transform: translateY(0)
}

.uudai-time h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    font-style: italic;
    color: #ffeb3b;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, .9)
}

.uudai--detail ul {
    padding: 0
}

.uudai--detail ul li {
    display: inline-block;
    width: 24%;
    text-align: center;
    padding-bottom: .25rem;
    padding-top: .25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-radius: .25rem;
    margin-top: .75em;
    cursor: pointer
}

.uudai--detail ul li.active {
    background-color: #fff
}

.uudai--detail ul li.active p {
    color: #008080; /* Thay #dc2626 bằng #008080 */
}

.uudai--detail ul li.active sub {
    color: #000
}

.uudai--detail ul li.dadienra p {
    text-decoration: line-through
}

.uudai--detail ul li p {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700
}

.uudai--detail ul li sub {
    color: #fff;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500
}

.uudai-info {
    background-color: #fff
}

.uudai-info .content-tab {
    padding-bottom: 20px
}

.uudai-info ul li {
    background: none;
    display: inline-block;
    width: 19.5%;
    text-align: center;
    padding: .25rem;
    border-radius: 8px;
    margin-top: .75em;
    transform: scale(1);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
    border: 2px solid transparent;
    cursor: pointer
}

.uudai-info ul li:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 128, 128, 0.3); /* Thay shadow đỏ bằng #008080 */
    border-color: #008080; /* Thay red bằng #008080 */
}

.uudai-info ul li .bg-white {
    border-radius: 6px
}

.uudai-info ul {
    padding: 0
}

.uudai-info ul li .uudai--text {
    min-height: 80px;
    text-align: left;
    padding: .05rem .25rem
}

.uudai-info ul li .uudai--text div {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 14px
}

.uudai-info ul li .uudai--text p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #008080; /* Thay #ef4444 bằng #008080 */
    font-weight: 700
}

.uudai-info ul li .uudai--img {
    height: 8.4rem;
    overflow: hidden;
    margin: auto
}

.uudai-info ul li .uudai--img img {
    width: 100%
}

.uudai-info ul li .uudai--button {
    font-weight: 800;
    padding-top: .375rem;
    padding-bottom: .375rem;
    background: linear-gradient(to right, #008080, #02b7b7); /* Thay gradient đỏ/hồng bằng #008080/#02b7b7 */
    border-radius: 0 0 8px 8px
}

.uudai-info ul li .uudai--button a {
    text-transform: uppercase;
    color: #fff;
    font-size: .875rem;
    letter-spacing: 1px
}

.uudai-info ul li {
    position: relative
}

.uudai-info ul li div.active::after {
    content: "Sắp Diễn Ra";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 8;
    border: 3px dashed #008080; /* Thay #ef4444 bằng #008080 */
    width: 70%;
    color: #008080; /* Thay #ef4444 bằng #008080 */
    ;
    font-weight: 700;
    padding: .25em
}

.uudai-info ul li div.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 7;
    background-color: #fff;
    width: 100%;
    height: 100%;
    opacity: .8
}

.uudai .content-tab .tab {
    display: none
}

.uudai .tab.active {
    display: block;
    height: max-content
}

.bg-white {
    background: #fff
}

.uudai-info ul li .uudai-gia {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin: 6px 0
}

.uudai-info ul li .uudai-gia .sale {
    color: #008080; /* Thay red bằng #008080 */
    font-weight: 900;
    font-size: 20px;
    animation: pulse-price 1.5s infinite
}

.uudai-info ul li .uudai-gia .gia {
    text-decoration: line-through;
    font-size: 13px
}

.uudai-info ul li .uudai-gia>div {
    width: auto !important
}

.uudai-time {
    padding: .5rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.uudai-time-bg {
    padding: 20px;
    background-size: cover;
    width: 100%
}

.uudai-time .uudai--title {
    display: flex;
    align-items: center;
    gap: 10px
}

.uudai-time h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    font-style: italic;
    color: #fff
}

.countdown-container {
    display: flex;
    gap: 5px
}

.countdown-box {
    text-align: center;
    padding: .4rem .7rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px #008080; /* Thay shadow red bằng #008080 */
    font-size: .75rem;
    transition: all 0.3s ease
}

.countdown-box p {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #02b7b7; /* Thay #ff416c bằng #02b7b7 */
}

.countdown-box span {
    font-size: .85rem;
    color: #e0e0e0
}

.desktop-only {
    display: none
}

.mobile-only {
    display: none
}

@media (min-width:768px) {
    .desktop-only {
        display: block
    }
}

@media (max-width:767px) {
    .mobile-only {
        display: block
    }
}

body {
    padding: 0;
    position: relative
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.tw-max-w-7xl {
    max-width: 72rem
}

.ws-max-w-7xl {
    max-width: 80rem;
    margin: auto
}

.uudai-time {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .01rem
}

.uudai-time-bg {
    padding: 30px 20px;
    background: url(https://sf-static.upanhlaylink.com/img/image_2025111295d1fe82850d1c009cecd6160c4e9591.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    border-radius: 12px 12px 0 0
}

.uudai-time .uudai--title {
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.uudai-time img {
    width: 32px;
    transform: translateY(0)
}

.uudai-time h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    font-style: italic;
    color: #ffeb3b;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, .9)
}

.uudai--detail ul {
    padding: 0
}

.uudai--detail ul li {
    display: inline-block;
    width: 24%;
    text-align: center;
    padding-bottom: .25rem;
    padding-top: .25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-radius: .25rem;
    margin-top: .75em;
    cursor: pointer
}

.uudai--detail ul li.active {
    background-color: #fff
}

.uudai--detail ul li.active p {
    color: #008080; /* Thay #dc2626 bằng #008080 */
}

.uudai--detail ul li.active sub {
    color: #000
}

.uudai--detail ul li.dadienra p {
    text-decoration: line-through
}

.uudai--detail ul li p {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700
}

.uudai--detail ul li sub {
    color: #fff;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500
}

.uudai-info {
    background-color: #fff
}

.uudai-info .content-tab {
    padding-bottom: 20px
}

.uudai-info ul li {
    background: none;
    display: inline-block;
    width: 19.5%;
    text-align: center;
    padding: .25rem;
    border-radius: 8px;
    margin-top: .75em;
    transform: scale(1);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
    border: 2px solid transparent;
    cursor: pointer
}

.uudai-info ul li:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 128, 128, 0.3); /* Thay shadow đỏ bằng #008080 */
    border-color: #008080; /* Thay red bằng #008080 */
}

.uudai-info ul li .bg-white {
    border-radius: 6px
}

.uudai-info ul {
    padding: 0
}

.uudai-info ul li .uudai--text {
    min-height: 80px;
    text-align: left;
    padding: .05rem .25rem
}

.uudai-info ul li .uudai--text div {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 14px
}

.uudai-info ul li .uudai--text p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #008080; /* Thay #ef4444 bằng #008080 */
    font-weight: 700
}

.uudai-info ul li .uudai--img {
    height: 8.4rem;
    overflow: hidden;
    margin: auto
}

.uudai-info ul li .uudai--img img {
    width: 100%
}

.uudai-info ul li .uudai--button {
    font-weight: 800;
    padding-top: .375rem;
    padding-bottom: .375rem;
    background: linear-gradient(to right, #008080, #02b7b7); /* Thay gradient đỏ/hồng bằng #008080/#02b7b7 */
    border-radius: 0 0 8px 8px
}

.uudai-info ul li .uudai--button a {
    text-transform: uppercase;
    color: #fff;
    font-size: .875rem;
    letter-spacing: 1px
}

.uudai-info ul li {
    position: relative
}

.uudai-info ul li div.active::after {
    content: "Sắp Diễn Ra";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 8;
    border: 3px dashed #008080; /* Thay #ef4444 bằng #008080 */
    width: 70%;
    color: #008080; /* Thay #ef4444 bằng #008080 */
    ;
    font-weight: 700;
    padding: .25em
}

.uudai-info ul li div.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 7;
    background-color: #fff;
    width: 100%;
    height: 100%;
    opacity: .8
}

.uudai .content-tab .tab {
    display: none
}

.uudai .tab.active {
    display: block;
    height: max-content
}

.bg-white {
    background: #fff
}

.uudai-info ul li .uudai-gia {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin: 6px 0
}

.uudai-info ul li .uudai-gia .sale {
    color: #008080; /* Thay red bằng #008080 */
    font-weight: 900;
    font-size: 20px;
    animation: pulse-price 1.5s infinite
}

.uudai-info ul li .uudai-gia .gia {
    text-decoration: line-through;
    font-size: 13px
}

.uudai-info ul li .uudai-gia>div {
    width: auto !important
}

.uudai-time {
    padding: .5rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.uudai-time-bg {
    padding: 20px;
    background-size: cover;
    width: 100%
}

.uudai-time .uudai--title {
    display: flex;
    align-items: center;
    gap: 10px
}

.uudai-time h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    font-style: italic;
    color: #fff
}

.countdown-container {
    display: flex;
    gap: 5px
}

.countdown-box {
    text-align: center;
    padding: .4rem .7rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px #008080; /* Thay shadow red bằng #008080 */
    font-size: .75rem;
    transition: all 0.3s ease
}

.countdown-box p {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #02b7b7; /* Thay #ff416c bằng #02b7b7 */
}

.countdown-box span {
    font-size: .85rem;
    color: #e0e0e0
}

.desktop-only {
    display: none
}

.mobile-only {
    display: none
}

@media (min-width:768px) {
    .desktop-only {
        display: block
    }
}

@media (max-width:767px) {
    .mobile-only {
        display: block
    }
}

@keyframes pulse-price {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05);
        color: #02b7b7 /* Thay #ffeb3b bằng #02b7b7 để nhấp nháy */
    }

    100% {
        transform: scale(1)
    }
}

@keyframes blink-red {
    from {
        box-shadow: 0 0 10px rgba(0, 128, 128, 1); /* Thay rgba đỏ bằng rgba #008080 */
        background-color: #212121;
        opacity: 1
    }

    to {
        box-shadow: 0 0 20px rgba(2, 183, 183, 1); /* Thay rgba đỏ bằng rgba #02b7b7 */
        background-color: #008080; /* Thay red bằng #008080 */
        opacity: .8
    }
}