:root {
    --item-blue: #6365ff;
    --item-gold: #ff7;
    --item-blue-hide: #7b797b;
    --item-gold-hide: #7b7d5a;
    --item-white: white;
    --color-gray: #7f7f7f;
    --width-animate: 1px;
}

body {
    font-size: 16px;
    font-family: monospace !important;
    background: #000 url(/super-box/template/bg.jpg) no-repeat top center fixed;
    background-size: cover;
    height: 100%;
}

table.dataTable thead th, table.dataTable tr td {
    text-align: center; /* Căn giữa */
}
table thead {
    display: none;
}
table tbody tr td {
    padding: 15px 5px 5px 5px;

}
table tbody tr {
    opacity: 1;
    background-color: rgba(10, 10, 10, .8);
}

#viewall_item_super_box_filter label {
    color: white;
}
.text-white {
    color: white;
}
.text-gold {
    color: var(--item-gold);
}
.copy-btn {
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
}

.copy-btn:hover {
    background-color: white;
}

.item_name {
    font-weight: bold;
    font-size: 20px;
}
.separator {
    background: url(/super-box/template/separator-rare.png) center no-repeat;
    height: 7.91075px;
    margin: 1px 0px;
}

.line-hide .ma {
    color: var(--color-gray);
}
.line-hide .va {
    color: var(--color-gray);
}

.item_blue {
    color: var(--item-blue);
}
.line-hide.item_blue {
    color: var(--item-blue-hide);
}

.item_gold{
    color: var(--item-gold);
}
.line-hide.item_gold {
    color: var(--item-gold-hide);
}
.item_lock {
    color: green;
}
.stackNum {
    padding: 5px;
    font-weight: bold;
    font-size: 24px;
    margin: 0;
    margin-bottom: 10px;
}
.item_other
{
    margin-bottom:0;
}


.item-box {
    margin: 0 auto;
    padding: 5px;
    font-weight: bold;
}

.item-image {
    text-align:center;
    flex: 1;
    display: block;
    margin: auto;
    padding-top:30px;
}

.item-image img {
    width: 100%;
    max-width: 60px;
    height: auto;
}

.item-info {
    padding: 15px;
    text-align: center;
    flex: 2;
    background: rgba(0, 0, 0, .8);
    color: var(--color-gray);
}
.subheader .line-option {
    font-size: 12px;
}
.subheader-2, .subheader-4, .subheader-6 {
    font-size: 12px;
    overflow: hidden;
    height: 56px;
}

.line-option {
    margin: 0;
    font-size: 16px;
    font-weight:100;
}

.item_tag {
    margin-top:10px;
}
.item_desc {
    font-size: 14px;
}


.itemHeader.item_gem {
    background: url(/super-box/template/header-gem-left.png) top left no-repeat, url(/super-box/template/header-gem-right.png) top right no-repeat, url(/super-box/template/header-gem-middle.png) top center repeat-x;
    pointer-events: all;
}
.itemHeader.item_gold {
    background: url(/super-box/template/header-rare-left.png) top left no-repeat, url(/super-box/template/header-rare-right.png) top right no-repeat, url(/super-box/template/header-rare-middle.png) top center repeat-x;
    pointer-events: all;
}

.itemHeader.item_other, .itemHeader.item_white {
    background: url(/super-box/template/header-normal-left.png) top left no-repeat, url(/super-box/template/header-normal-right.png) top right no-repeat, url(/super-box/template/header-normal-middle.png) top center repeat-x;
    pointer-events: all;
}

.itemHeader.item_blue {
    background: url(/super-box/template/header-magic-left.png) top left no-repeat, url(/super-box/template/header-magic-right.png) top right no-repeat, url(/super-box/template/header-magic-middle.png) top center repeat-x;
    pointer-events: all;
}


.item-info .subheader .series-0 {
    color: #F7ff73;
}

.item-info .subheader .series-1 {
    color: #00FF7b;
}
.item-info .subheader .series-2 {
    color: #4A7DFF;
}

.item-info .subheader .series-3 {
    color: #FF5900;
}

.item-info .subheader .series-4 {
    color: #FFCFb5;
}


.itemHeader {
    margin-bottom:10px;
    padding: 1px 15px;
}


.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
}




.animated-border-box {
    padding: 20px;
    overflow: hidden;
    z-index: 0;
    border-radius: 5px;
}


    .animated-border-box:before {
        content: '';
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        position: absolute;
        width: 99999px;
        height: 99999px;
        background-repeat: no-repeat;
        background-position: 0 0;
        /*
        transform: translate(-50%, -50%) rotate(0deg);
        animation: rotate 4s linear infinite;
        */
    }

.animated-border-box:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: var(--width-animate);
    top: var(--width-animate);
    width: calc(100% - var(--width-animate)*2);
    height: calc(100% - var(--width-animate)*2);
    background: #000;
    border-radius: 5px;
}

@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}


.center-box {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1D1E22;
}

.img-item_blue .animated-border-box:before {
    background-image: conic-gradient(rgba(0,0,0,0), var(--item-blue), rgba(0,0,0,0) 25%);
}

.img-item_gold .animated-border-box:before {
    background-image: conic-gradient(rgba(0,0,0,0), var(--item-gold), rgba(0,0,0,0) 25%);
}

.img-item_white .animated-border-box:before {
    background-image: conic-gradient(rgba(0,0,0,0), var(--item-white), rgba(0,0,0,0) 25%);
}


.image-stack-num {
    position:absolute;
    right: 5px;
    bottom:0px;
    color:white;
    font-size:14px;
    font-weight:100;
}
.image-stack-num .x{
    font-size:10px;
}


.text-yellow {
    color: yellow;
}
.text-green {
    color: green;
}
.text-fire {
    color: firebrick;
}
.text-red {
    color: red;
}
.text-blue {
    color: blue;
}
.text-metal {
    color: goldenrod;
}
.get_debug {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 100;
    margin-bottom: 0px;
}




/*progress-wrap progress-wrap progress-wrap progress-wrap progress-wrap progress-wrap*/
.go-top {
    position: fixed;
    bottom: 70px;
    right: 70px;
    /*display: none;*/
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}
 

.go-top-text {
    position: absolute;
    font-size: 24px;
    background-color:white;
    padding:5px 12px;
    border-radius: 5px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.go-top-text:hover {
    border-radius: 23px;
    animation: spin 2s linear infinite;
}




#grid-viewall_item_super_box {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}
@media (max-width: 768px) {
    #grid-viewall_item_super_box {
        grid-template-columns: auto auto auto;
    }
}
@media (max-width: 368px) {
    #grid-viewall_item_super_box {
        grid-template-columns: auto;
    }
    #id_super_box {
        width: calc(100vw - 10px) !important;
    }
}
.pagination {
    display:unset !important;
}
.pagination a {
    color: #e53637;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: #1D1E22;
    color: white;
}
.pagination a:hover {
    color: #e53637;
}
.pagination a:hover:not(.active) {
    background-color: #1D1E22;
}


.price-number .price-value {
    font-size: 20px !important;
}
.price-number .price-value img {
    margin-left:3px;
}

    .price-number .price-value i {
        color: #F7ff73;
        padding-left:2px;
        font-size:14px;
    }
.onSell_item {
    background-color: transparent;
    color: #6c757d;
    font-size: 12px;
    margin-top: 10px;
    border: unset
}
.onBuy_item {
    font-size: 18px;
    margin-top: 10px;
    border-radius: 5px;
    font-weight: bold;
    color: #7b7d5a;
    background-color: transparent;
}
    .onBuy_item:hover {
        color: #6365ff;
        background-color: white;
        cursor: pointer;
    }


.onSell_item:hover {
    cursor: pointer;
    color: #F7ff73;
    font-weight: bold;
}
@font-face {
    font-family: "TCVN3";
    src: url("/fonts/vntime.woff") format("woff"),url("/fonts/vntime.TTF") format("truetype");
}

body {
    font-size: 16px;
    font-family: monospace;
}

.f-tcvn3 {
    font-family: "TCVN3", sans-serif;
}