html {
    background: none;
    background: #F7F7F7
}

body {
    color: #000; /* font-family:SamsungOne;*/
    background: #F7F7F7
}

.ss-section-title {
    text-align: center;
    margin: 0;
    padding: 10px 0 0px 0;
    font-size: 38px;
    color: #000;
    background: #fff;
    font-family: SamsungSharpSans;
    text-transform: uppercase;
    background: #2E4486;
    color: #fff;
    border-radius: 5px;
}

body header, body header .heading {
    background: #F4F4F4
}

.w-100 {
    width: 100%
}

.ss-slider {
    display: flex;
    gap: 12px;
    margin: 12px 0 0 0;
}

.jssor-ss {
    position: relative;
    margin: 0 auto;
    top: 0;
    left: 0;
    width: 780px;
    height: 375px;
    overflow: hidden;
    visibility: hidden;
    border-radius: 10px;
}

    .jssor-ss img {
        border-radius: 10px;
    }

.jssor-ss-container {
    cursor: default;
    position: relative;
    top: 0;
    left: 0;
    width: 780px;
    height: 375px;
    overflow: hidden
}

.ins-game {
    width: 400px;
    height: 375px;
    background: #ededed;
    border-radius: 10px;
}

    .ins-game img {
        border-radius: 10px;
    }

.ssbullet .i:hover, .ssbullet .iav {
    background: #000000a3
}

.slider-arr-l {
    left: 10px
}

.slider-arr-r {
    right: 10px
}

.ss-btn {
    background: #000;
    color: #fff;
    padding: 12px 30px;
    border-radius: 40px;
    border: none
}

.ss-btn-small {
    padding: 8px 15px
}

.ss-btn:hover {
    background: #1428A0
}

.container > section {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fff;
}

.ss-header {
    background: #F4F4F4
}

    .ss-header .container {
        display: flex
    }

    .ss-header .logo {
        padding-top: 5px
    }

    .ss-header nav {
        flex-grow: 3;
        flex-shrink: 4
    }

        .ss-header nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: right
        }

            .ss-header nav ul li {
                padding: 30px 0 30px 40px
            }

                .ss-header nav ul li a, .ss-header nav ul li a:link, .ss-header nav ul li a:visited {
                    font-size: 15px;
                    color: #000;
                    font-weight: bold
                }

                    .ss-header nav ul li a:hover {
                        color: #1428A0
                    }

.ss-icon-category {
    background: #fff
}

    .ss-icon-category .row {
        display: flex;
        justify-items: stretch;
        justify-content: space-between
    }

    .ss-icon-category .item {
        text-align: center
    }

        .ss-icon-category .item a, .ss-icon-category .item a:link, .ss-icon-category .item a:visited {
            color: #000;
            font-size: 15px
        }

            .ss-icon-category .item a:hover {
                color: #1428A0
            }

.ss-newproduct {
    background: #fff
}

    .ss-newproduct .row {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        padding: 0 10px
    }

    .ss-newproduct .item {
        text-align: center;
        padding: 0 10px
    }

        .ss-newproduct .item h3 {
            margin-bottom: 40px
        }

            .ss-newproduct .item h3 a strong {
                color: #000;
                font-weight: normal;
                font-size: 15px
            }

            .ss-newproduct .item h3 a:hover strong {
                color: #1428A0
            }

.ss-promote {
    background: #fff
}

    .ss-promote .row {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 25px
    }

    .ss-promote .item {
        text-align: center;
        position: relative
    }

        .ss-promote .item .cover {
            width: 100%
        }

            .ss-promote .item .cover img {
                width: 100%
            }

        .ss-promote .item .content {
            position: absolute;
            top: 10px;
            width: 100%
        }

            .ss-promote .item .content h4 {
                font-weight: normal;
                font-size: 30px;
                text-shadow: 0 0 2px #fff;
                margin: 20px 0 15px 0
            }

            .ss-promote .item .content p {
                font-size: 14px
            }

            .ss-promote .item .content .more {
                padding-top: 10px
            }

                .ss-promote .item .content .more a, .ss-promote .item .content .more a:link, .ss-promote .item .content .more a:visited {
                    text-decoration: underline;
                    color: #000;
                    margin-right: 8px
                }

                    .ss-promote .item .content .more a:hover {
                        color: #1428A0
                    }

        .ss-promote .item .bg-black {
            color: #fff;
            text-shadow: 0 0 2px #ccc
        }

            .ss-promote .item .bg-black .more a, .ss-promote .item .bg-black .more a:link, .ss-promote .item .bg-black .more a:visited {
                color: #fff
            }

            .ss-promote .item .bg-black .ss-btn {
                background: #fff;
                color: #000
            }

                .ss-promote .item .bg-black .ss-btn:hover {
                    background: #1428A0;
                    color: #fff
                }

.ss-subscription {
    padding: 50px 0;
    background: #fff
}

    .ss-subscription .container {
        background: #F6F7FC;
        border-radius: 10px;
        display: flex
    }

    .ss-subscription .img {
        padding: 20px 35px 20px 20px
    }

    .ss-subscription .lg-text label {
        white-space: nowrap
    }

    .ss-subscription .lg-text {
        font-size: 40px;
        padding: 40px 40px 0 0;
        font-weight: bold
    }

        .ss-subscription .lg-text p {
            margin: 0;
            padding: 0
        }

        .ss-subscription .lg-text strong {
            font-size: 85px
        }

    .ss-subscription .form {
        font-size: 18px;
        padding: 40px 20px 0 0
    }

        .ss-subscription .form p {
            margin: 0;
            padding: 0
        }

        .ss-subscription .form .controls {
            padding-top: 15px;
            display: flex;
            flex-direction: column;
            width: 300px
        }

            .ss-subscription .form .controls .input {
                border: 1px solid #000;
                border-radius: 8px;
                background: #fff;
                padding: 13px 15px 10px 15px;
                margin: 10px 0 20px 0
            }

                .ss-subscription .form .controls .input input {
                    margin: 0;
                    padding: 0;
                    border: none;
                    outline: none;
                    background: none;
                    color: #000;
                    font-size: 18px;
                    line-height: 20px
                }

                .ss-subscription .form .controls .input i {
                    font-size: 20px;
                    margin: 1px 5px 0 0;
                    float: left
                }

        .ss-subscription .form button {
            display: inline-block;
            width: 110px;
            padding: 12px 20px;
            border-radius: 30px;
            background: #000;
            color: #fff;
            border: none;
            outline: none
        }

            .ss-subscription .form button:hover {
                background: #1428A0
            }

.ss-icon-utility {
    background: #fff
}

    .ss-icon-utility .container {
        border: 1px solid #ccc;
        border-radius: 12px
    }

    .ss-icon-utility .row {
        display: flex;
        justify-items: stretch;
        justify-content: space-between;
        padding: 25px 15px
    }

    .ss-icon-utility .item {
        text-align: center;
        width: 20%;
        border-style: solid;
        border-width: 0 2px 0 0;
        border-image: linear-gradient(to bottom,rgba(0,0,0,0),#ccc,rgba(0,0,0,0)) 1 100%
    }

        .ss-icon-utility .item:last-child {
            border: none
        }

        .ss-icon-utility .item h4 {
            margin: 10px 0 5px 0;
            padding: 0;
            font-size: 16px
        }

        .ss-icon-utility .item h5 {
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-weight: normal
        }

.slider-product {
    display: block !important;
}

    .slider-product .slick-track {
        display: flex;
        align-items: stretch;
    }

        .slider-product .slick-track .product-item {
            margin: 0 6px;
            height: auto;
        }

/*.hotsales .price-tags {
    display: none
}*/
.hotsales .slider-product {
    padding: 12px 6px 24px 6px;
    background-color: white;
}
.hotsales .slick-dots{
    bottom:10px;
}
.ss-product-category {
    background: #F7F7F7
}

    .ss-product-category .cover {
        text-align: center;
        position: relative;
        overflow: hidden
    }

        .ss-product-category .cover .real {
            position: absolute;
            top: 0;
            width: 100%;
            text-align: center
        }

            .ss-product-category .cover .real img {
                margin: 0 auto
            }

        .ss-product-category .cover .blur {
            filter: blur(80px);
            -webkit-filter: blur(80px);
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            margin: -3px 0
        }

            .ss-product-category .cover .blur img {
            }

        .ss-product-category .cover img {
        }

    .ss-product-category .lts-samsung {
        padding: 30px 0;
        margin-right: -22px
    }

        .ss-product-category .lts-samsung .item {
            width: calc(1/5*100% - (1 - 1/5)*18px);
            margin: 0 10px 10px 0;
            border: 1px solid #eee;
            box-shadow: none;
            padding: 2px 0 2px 0
        }

            .ss-product-category .lts-samsung .item .img {
                width: 160px
            }

            .ss-product-category .lts-samsung .item a.title {
                font-size: 15px;
                margin: 15px 0
            }

            .ss-product-category .lts-samsung .item .ss-button {
                padding-top: 15px
            }

            .ss-product-category .lts-samsung .item .promote {
                top: 0
            }

.ss-white .lts-samsung .item {
}

.ss-product-category .more {
    text-align: center;
    padding-top: 20px;
    width: 100%; /* margin-bottom:-10px;*/
}

    .ss-product-category .more a {
        padding: 10px 40px;
        border: 1px solid #000;
        border-radius: 30px;
        font-size: 16px;
        margin: 0 auto;
        background: #fff;
        color: #000;
        font-weight: bold;
        display: inline-flex
    }

        .ss-product-category .more a i {
            transform: rotate(90deg);
            display: block;
            margin-left: 10px
        }

        .ss-product-category .more a:hover {
            background: #1428A0;
            color: #fff
        }

.ss-white {
    background: #fff
}

.ss-product-category .ss-section-title {
    /*padding: 12px 0 12px 0*/
}

.ss-cover {
    text-align: center
}

    .ss-cover .ss-bg {
        max-width: 1200px;
        overflow: hidden;
        text-align: center;
        margin: 0 auto;
        border-radius: 10px;
    }

        .ss-cover .ss-bg img {
            width: 100%;
            left: 50%;
            position: relative;
            transform: translateX(-50%);
            border-radius: 10px;
        }

.w-container.body-wrapper {
    width: unset
}

.container {
    min-width: 1200px;
    width: 1200px;
    margin: 0 auto;
    padding: 0; /* background:unset;*/
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: unset;
}

.wrapper {
    flex-direction: column;
    /*background-color: #f4f4f4;*/
    margin-bottom: 12px;
}

#id-ss-series-menu {
    position: sticky;
    top: 129px;
    left: 0;
    width: 100%;
    transition: top 0.3s ease;
    z-index: 1000
}

header.hidden + .w-container.body-wrapper #id-ss-series-menu {
    top: 0;
    z-index: 9
}

.ss-series-menu {
    background: white;
    z-index: 1
}

.ss-menu-scroll ul li {
    padding: 12px 0 !important
}

    .ss-menu-scroll ul li button {
        background: unset
    }

.ss-series-menu {
    z-index: 1000
}

    .ss-series-menu .inner .ss-menu-scroll {
        width: 100%
    }

.ss-menu-scroll ul {
    justify-content: space-between;
    align-items: center
}

.ss-menu-scroll u.box-ref .v5-list-items .v5-item a.img imgl li button.active {
    color: #191919;
    background: unset;
    margin: 0 8px
}

.ss-series-menu .inner .active {
    margin: 0 8px;
    background: unset;
    color: black
}

.ss-menu-scroll ul li button {
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    position: relative
}

.ss-menu-scroll ul li.scroll-item button:before {
    border-bottom: 3px solid #cacaca;
    bottom: -2px;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    width: 10%;
    border-radius: 10px;
    transform: translateX(-50%);
    left: 50%;
    width: 0
}

.ss-menu-scroll ul li.scroll-item button:hover:before, .ss-menu-scroll ul li.scroll-item button.active:before {
    background: #EB691C;
    border: 2px solid #EB691C;
    left: 50%;
    transition: .5s ease;
    width: 100%
}

.ss-series-menu ul a img {
    max-width: 100px
}

.list-product {
    display: flex;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
    flex-wrap: wrap
}

    .list-product .product-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 12px; /* gap:12px;*/
        border-radius: 10px;
        border: 1px solid var(--black-black-4,#EBEBEB);
        background: var(--neutral-0-ffffff-0,#FFF);
        align-items: center;
        position: relative;
        width: 200px
    }

        .list-product .product-item .cover {
            position: absolute;
            top: 0;
            right: 0
        }

            .list-product .product-item .cover div {
                margin: 0 0 0 135px !important
            }

.box-modal-compare .list-product .product-item .cover div {
    margin: 0 0 0 200px !important
}

.list-product .product-item .cover div span {
    color: white;
    font-size: 11px;
    font-weight: 400
}

.list-product .product-item .sticker-left {
    position: absolute;
    left: 15px
}

.list-product .product-image {
    text-align: center;
    margin: 20px auto 0 auto;
    position: relative;
    margin: 20px auto 12px auto
}

    .list-product .product-image img {
        width: 100%;
        height: auto;
        max-width: 180px;
        transition-duration: .3s
    }

.list-product .product-item:hover .product-image img {
    transform: translate(0,0) rotate(0) skewX(0) skewY(0) scaleX(1.05) scaleY(1.05)
}

.list-product .product-item .last-price {
    width: 100%;
    padding: 4px 0;
    background: #FFDADE;
    border-radius: 5px;
    border: 1px solid #FD475A
}

    .list-product .product-item .last-price .bg {
        display: flex;
        flex-direction: column;
        text-align: center
    }

        .list-product .product-item .last-price .bg span {
            font-size: 13px;
            color: #FD475A
        }

        .list-product .product-item .last-price .bg label {
            font-size: 15px;
            font-weight: 700;
            color: #FD475A
        }

.list-product .product-item .product-info {
    display: flex;
    flex-direction: column; /* align-items:center;*/
    /* text-align:center;*/
    gap: 12px; /* width:100%;*/
    margin-bottom: 12px
}
.product-item .price-tags-home {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-item .price-tags {
    margin: 0px;
}
.product-item .price-tags .price{
    font-size: 15px;
    display: flex;
    justify-content: start;
    justify-items: stretch;
}
    .product-item .price-tags .price strong {
        padding: 0;
        line-height: 18px;
        font-size: 15px;
        color: #FD475A;
    }
.product-item .price-last {
    display: flex;
    text-align: center;
    gap: 8px;
    font-size: 11px;
    line-height: 16.5px;
    justify-content: start;
    justify-items: stretch;
}
    .product-item .price-last strike {
        color: #C9C9C9;
    }
    .product-item .price-last span {
        color: rgba(253, 71, 90, 1);
        font-weight: 600;
    }
.product-item .product-info a.title {
    color: var(--blackText);
    font-size: 12px;
    font-weight: 600
    /*;height:29px*/;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em
}

.product-item .product-info .product-price {
    display: flex; /* text-align:center;*/
    /* align-items:center;*/
    gap: 5px
}

    .product-item .product-info .product-price span {
        font-size: 11px;
        color: #191919;
        font-weight: 400
    }

    .product-item .product-info .product-price strong {
        font-size: 15px;
        font-weight: 700;
        line-height: 18.15px;
        text-align: center;
        color: #FD475A
    }

    .product-item .product-info .product-price strike {
        font-size: 11px;
        color: #888
    }

.product-item .product-info .product-price-save, .product-item .product-guarantee {
    text-align: center;
    padding: 4px 0;
    background: #DBF9EB;
    width: 100%;
    border-radius: 5px
}

    .product-item .product-info .product-price-save span, .product-item .product-guarantee span {
        color: #009981;
        font-size: 13px;
        line-height: 15.73px;
        text-align: center
    }

.list-product .product-item .product-top, .list-product .product-item .product-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start; /* gap:12px;*/
    width: 100%
}

.product-item .product-text-cart {
    text-align: center
}

    .product-item .product-text-cart a {
        color: #FD475A;
        font-size: 13px;
        font-weight: 600
    }

.product-item .product-compare {
    display: flex;
    gap: 5px;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #FD475A;
    width: 100%;
    position: absolute;
    bottom: 10px
}

    .product-item .product-compare i, .product-item .product-stores i {
        font-size: 20px;
        line-height: 20px;
        width: 20px
    }

    .product-item .product-compare strong {
        font-size: 13px;
        font-weight: 700;
        line-height: 15.73px;
        text-align: left;
        color: #FD475A
    }

.product-item .product-stores a {
    font-size: 13px;
    font-weight: 700;
    line-height: 15.73px;
    text-align: left;
    color: #009981
}

.product-item .product-stores {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #B8DED8;
    padding: 4px 0;
    color: #009981;
    border-radius: 5px;
    gap: 5px;
    width: 100%
}

.product-item .product-renew {
    text-align: center;
    padding: 8px 0;
    background: #FD475A;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 50px
}

    .product-item .product-renew a {
        font-size: 13px;
        font-weight: 600;
        line-height: 15.73px;
        text-align: center;
        color: white
    }

    .product-item .product-renew:hover {
        background: var(--red-red-2,#DD283B)
    }

.product-item .product-note {
    background: #F3F3F3;
    padding: 4px 8px;
    border-radius: 5px;
    text-align: center;
    width: calc(100% - 16px);
    position: absolute;
    bottom: 0
}

    .product-item .product-note span {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.52px;
        text-align: center
    }

.list-filter .product-price {
    padding: 0 0;
    font-size: 15px;
    display: flex;
    flex-direction: column; /* align-items:center;*/
    gap: 8px
}

    .list-filter .product-price strike {
        font-size: 13px
    }

    .list-filter .product-price .sale-off {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 10px
    }

        .list-filter .product-price .sale-off span {
            padding: 2px 4px;
            border-radius: 5px;
            background: #FD475A;
            color: #fff
        }

    .list-filter .product-price strong {
        color: var(--redText);
        line-height: 18px
    }

    .list-filter .product-price strike {
        font-size: 11px;
        line-height: 18px;
        color: #C9C9C9
    }

.apple-button {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%
}

    .apple-button span:first-child a {
        color: #fff
    }

    .apple-button span:first-child {
        background: #009981;
        border-radius: 24px;
        padding: 8px 10px;
        text-align: center;
        text-transform: uppercase
    }

    .apple-button span:last-child a {
        text-align: center;
        text-transform: uppercase;
        color: #009981;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px
    }

.box-content .box-content-description {
    padding: 12px;
    position: relative;
    background-color: white;
    overflow: hidden;
    text-align: justify;
    border-radius: 10px;
    display: flex;
    flex-direction: column
}

    .box-content .box-content-description .product-content-text {
        position: relative;
        overflow: hidden;
        max-height: 500px;
        min-height: 0;
        overflow: hidden;
        text-align: justify
    }

    .box-content .box-content-description .img {
        width: 100%;
        text-align: center
    }

        .box-content .box-content-description .img img {
            width: auto;
            text-align: center
        }

.view-box-content, .view-specs-content {
    background: var(--white-white-1,#FFF);
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    padding: 7.5px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid var(--black-black-3,#C9C9C9);
    display: flex;
    bottom: 13px;
    left: 50%;
    font-size: 15px;
    font-weight: 700;
    color: #4B4B4B;
    cursor: pointer;
    transition: background-color 0.5s ease;
    z-index: 2
}

.view-specs-content {
    padding: 7.5px 30px;
    margin-bottom: 12px
}

.btn-view a {
    color: #4B4B4B;
    font-size: 13px;
    font-weight: 700;
    line-height: 15.73px;
    text-align: center;
    text-transform: uppercase
}

.box-content-text:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-image: linear-gradient(transparent,rgba(255,255,255,1))
}

.box-content-text.no-after:after {
    content: unset
}

.minigame-leaderboard {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    display: none;
    gap: 12px;
    height: 500px;
    background: linear-gradient(180deg, #274FC7 10.27%, #0B1020 100%);
    color: #fff;
}

    .minigame-leaderboard .font11 {
        font-size: 11px;
    }

    .minigame-leaderboard .font13 {
        font-size: 13px;
    }

    .minigame-leaderboard .font15 {
        font-size: 15px;
    }

    .minigame-leaderboard .font24 {
        font-size: 24px;
    }

    .minigame-leaderboard .font32 {
        font-size: 32px;
    }

    .minigame-leaderboard .fontbold {
        font-weight: 600;
    }

    .minigame-leaderboard .user-history {
        width: 403px;
        height: 500px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
    }

        .minigame-leaderboard .user-history img {
            width: 175px;
            height: 175px;
            border-radius: 175px;
        }

        .minigame-leaderboard .user-history .overview {
            display: flex;
            flex-direction: column;
            gap: 12px;
            text-align: center;
        }

    .minigame-leaderboard .detail-reward {
        width: 100%;
        height: 280px;
        background: #fff;
        color: #757575;
        border-radius: 10px;
        overflow-x: auto;
        overflow-y: auto;
    }


        /* --- Custom Scrollbar --- */
        .minigame-leaderboard .detail-reward::-webkit-scrollbar {
            width: 6px; /* mỏng giống hình */
        }

        .minigame-leaderboard .detail-reward::-webkit-scrollbar-track {
            background: transparent; /* cho track lộ ra màu nền xanh đậm */
        }

        .minigame-leaderboard .detail-reward::-webkit-scrollbar-thumb {
            background: #ffffff; /* thanh màu trắng */
            border-radius: 20px; /* bo cong mạnh */
            border: 1px solid rgba(255,255,255,0.3); /* giống hiệu ứng viền */
        }

            .minigame-leaderboard .detail-reward::-webkit-scrollbar-thumb:hover {
                background: #f5f5f5;
            }

        .minigame-leaderboard .detail-reward > div {
            display: flex;
            flex-direction: column;
        }

            .minigame-leaderboard .detail-reward > div > div {
                display: flex;
                justify-content: space-between;
                padding: 12px
            }

                .minigame-leaderboard .detail-reward > div > div:nth-child(2n+1) {
                    background: #F4F4F4;
                }

    .minigame-leaderboard .cta-login {
        padding: 12px;
        background: #009981;
        color: #fff;
        border-radius: 5px;
        width: 150px;
        text-align: center;
        align-self: center;
    }

    .minigame-leaderboard .leaderboard {
        width: 760px;
        height: 500px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .minigame-leaderboard .top-rank {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

        .minigame-leaderboard .top-rank .rank {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .minigame-leaderboard .top-rank .rank1 {
            order: 2;
        }

            .minigame-leaderboard .top-rank .rank1 .fontbold {
                font-size: 32px;
            }

        .minigame-leaderboard .top-rank .rank2 {
            order: 1;
        }

            .minigame-leaderboard .top-rank .rank2 .fontbold {
                font-size: 24px;
            }

        .minigame-leaderboard .top-rank .rank3 {
            order: 3;
        }

            .minigame-leaderboard .top-rank .rank3 .fontbold {
                font-size: 24px;
            }

        .minigame-leaderboard .top-rank .rank1 .img {
            width: 110px !important;
            height: 110px !important;
            border-radius: 110px !important;
        }

        .minigame-leaderboard .top-rank .rank .img {
            width: 91px;
            height: 91px;
            border-radius: 91px;
        }

    .minigame-leaderboard .list-rank {
        display: flex;
        flex-direction: column;
        background: #048FF4;
        border-radius: 10px;
        height: 280px;
        overflow: auto;
        border: 2px solid;
        border-image-source: linear-gradient(90deg, #0091F6 0%, #005AAC 100%);
    }

        .minigame-leaderboard .list-rank .rankcount {
            background: linear-gradient(270deg, #0091F6 0%, #21D0FF 100%);
            padding: 4px 16px;
            border-radius: 0 10px 10px 0;
            position: absolute;
            top: 6px;
            left: 0px;
            bottom: 6px;
            display: flex;
            align-items: center;
            width: 12px;
        }

        .minigame-leaderboard .list-rank::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }

        .minigame-leaderboard .list-rank > div {
            display: flex;
            flex-direction: column;
        }

            .minigame-leaderboard .list-rank > div > div {
                display: flex;
                justify-content: space-between;
                padding: 12px;
                background: linear-gradient(90deg, #005AAC 0%, #048FF4 49.04%, #005AAC 100%);
                position: relative;
                padding-left: 60px;
            }

                .minigame-leaderboard .list-rank > div > div:nth-child(2n+1) {
                    background: linear-gradient(90deg, rgba(0, 90, 172, 0.5) 0%, rgba(4, 143, 244, 0.5) 49.04%, rgba(0, 90, 172, 0.5) 100%);
                }


/*model*/
.no-scroll {
    overflow: hidden !important
}
.popup-modal {
    top: 0;
    left: 0;
    padding: 10px;
    align-items: center;
    display: none;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    outline: 0;
    opacity: 0;
    max-width: unset
}

    .popup-modal.is-active {
        display: flex;
        opacity: 1;
        background: rgba(0,0,0,.7);
        transform: scale(1);
        padding: 30px
    }

.over {
    display: none;
    overflow: hidden;
    z-index: 5;
    background: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5
}

.popup-modal .modal-card {
    max-width: 600px;
    width: 100%;
    display: block
}

.popup-modal .box-modal-compare {
    min-width: 940px;
    width: 940px;
    margin: 0 auto;
    display: flex
}

.box-modal-compare {
    display: flex;
    flex-direction: column;
    -ms-overflow-y: visible;
    width: 940px
}

.modal-card {
    display: flex;
    flex-direction: column;
    overflow: auto;
    -ms-overflow-y: visible;
    width: 600px
}

.modal-card, .form-order, .box-modal-compare {
    z-index: 10
}

    .modal-card .box-specs-content, #popup-modal .box-specs-content {
        padding: 0;
        padding-bottom: 12px;
        overflow: auto;
        max-height: 700px
    }

        .modal-card .box-specs-content .specs-item .title {
            font-size: 15px
        }

.header-model {
    top: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: flex-start;
    position: relative;
    border-bottom: 1px solid #dbdbdb;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: linear-gradient(90deg,rgba(0,143,119,1) 20%,rgba(16,74,62,1) 100%);
    width: auto
}
.rule-box {
    color: black;
    font-size: 15px;
    line-height: 1.6;
}

    /* Tiêu đề */
    .rule-box h2 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    /* Xuống dòng gọn trong đoạn <p> */
    .rule-box p {
        margin: 0 0 10px 0;
    }

        .rule-box p strong {
            display: inline-block;
            margin-bottom: 2px;
        }

    /* Danh sách */
    .rule-box ul {
        padding-left: 20px;
        margin: 0;
    }

    /* Tự thêm dấu chấm đầu câu */
    .rule-box li {
        margin-bottom: 6px;
        list-style: none;
        position: relative;
        padding-left: 10px;
    }

        .rule-box li::before {
            content: "•"; /* nếu muốn đổi thành dấu "." thì sửa thành "." */
            position: absolute;
            left: 0;
            top: 2px;
            font-size: 18px;
            line-height: 1;
        }
    .rule-box.card-body {
        max-height: 650px;
        overflow-y: auto;
    }