/* CSS File - assets/css/style.css */
:root {
    --primary-color: #e74c3c;
    --secondary-color: #c0392b;
    --text-white: #ffffff;
    --text-black: #000000;
    --text-dark: #5A5A5A;
    --gradient-bg: linear-gradient(135deg, #232323 0%, #4a4949 100%);
}

.w-1-2 {
    width: 50%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Thin', sans-serif;
font-family: 'Roboto Light', sans-serif;
font-family: 'Roboto Medium', sans-serif;
font-family: 'Roboto Black', sans-serif; */

body.default {

    font-family: 'SF Pro Display', sans-serif;
    color: var(--text-black);
    background: url(../img/bg.webp) no-repeat top center;
    background-attachment: fixed;
    overflow-x: hidden;
    background-size: cover;
}

/* Mobile overlay layer (enabled in mobile media query) */
body.default::before{
    content: "";
    display: none;
}

.box-img.box-logo {
    text-align: center;
}

.box-img.box-logo img {
    max-height: 140px;
}

.box-banner {
    text-align: center;
}

.box-banner img {
    max-width: 100%;
    max-height: 170px
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1063px;
    }
    .box-banner {
        margin: 20px 0;
    }
}

/* Layout refresh (match screenshot 2): split into two separate cards */
.box-content-column {
    position: relative;
    box-shadow: none;
    background: transparent;
    border-radius: 32px;
    row-gap: 18px;
    align-items: stretch;
}

.box-content-left {
    width: 100%;
    min-height: 580px;
    border-radius: 29px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: hidden;
    padding: 0 10px;
}

.box-content-left h2 {
    color: #FF0D00;
    font-size: 20px;
    padding-top: 15px;
    padding-bottom: 4px;
    text-align: center;
    font-weight: bold;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.box-content-left .box-time {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 20px;
    display: table;
    padding: 7px 10px;
    margin: auto;
    margin-bottom: 15px;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
}

.box-content-column .col-item {
    padding: 10px;
    display: flex;
}

/* Card surfaces for each column */
.box-content-1024,
.box-content-right {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 32px;
    box-shadow: 0px 0px 20px 0px #00000080 inset;
    width: 100%;
}

.box-content-1024 {
    padding-top: 10px;
}

/* Make both cards match height visually on desktop */
.box-content-1024 {
    min-height: 580px;
}

.box-content-right {
    min-height: 580px;
}

.box-content-2 .box-time {
    position: relative;
    left: -20px;
}

.box-content-2 h2 {
    position: relative;
    left: -20px;
}

.box-content-left .box-content-list {
    width: 100%;
    padding: 0px 20px;
}

.stage-bar {
    margin: 14px 18px 8px;
    padding: 10px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
}

.stage-bar-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.box-content-left .box-content-list .box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(0deg, #671500 0%, #A82A00 100%);
    font-size: 16px;
    font-weight: bold;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    height: 40px;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    color: #fff;
}

.box-content-left .box-content-list .box-head span {
    width: 50%;
}

.box-content-left .box-content-list .box-head span span.account {
    margin-left: -30px;
}

.box-content-left .box-content-list .box-head span span.nap {
    padding-left: 20px;
}

.box-content-left .box-content-list .box-head .text-center-account,
.box-content-left .box-content-list .box-head .text-center-score {
    text-align: center;
}

.box-content-left .box-content-1 .box-content-list {
    position: relative;
}

.box-content-left .box-content-2 .box-content-list {
    padding-left: 0px;
    padding-right: 40px;
}


.scroll-list ul.scroll-list-inner {
    list-style: none;
    margin: 0px;
    padding: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    border: 1px solid #E40000;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.scroll-list ul.scroll-list-inner li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    border-bottom: 1px solid #FFFFFF40;
    font-size: 20px;
    padding: 0px 0px;
    border-bottom: 1px solid #E40000;
}

.scroll-list ul.scroll-list-inner li img {
    height: 33px;
}

.scroll-list ul.scroll-list-inner li > span {
    padding: 5px 0px;
}

.scroll-list ul.scroll-list-inner li > span:first-child {
    border-right: 1px solid #E40000;
}

.scroll-list ul.scroll-list-inner li span span.box-stt {
    min-width: 245px;
    text-align: left;
    display: inline-block;
    margin-left: 0px;
}

.scroll-list ul.scroll-list-inner li span span.stt {
    display: inline-block;
    min-width: 50px;
    text-align: center;
}

.scroll-list ul.scroll-list-inner li span span.user {
    display: inline-block;
    min-width: 75px;
}

.scroll-list ul.scroll-list-inner li span span.price {
    text-align: right;
    display: block;
    margin-right: 0px;
    padding-right: 10px;
}


.scroll-list ul.scroll-list-inner::-webkit-scrollbar {
    width: 0px;
}

.scroll-list ul.scroll-list-inner::-webkit-scrollbar-thumb {
    background: #FFD166;
    border-radius: 10px;
}

.scroll-list ul.scroll-list-inner::-webkit-scrollbar-track {
    background: transparent;
}

.box-check-button {
    margin-top: 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 12px;
}

.box-check-button button.btn-link-check {
    color: #FFF600;
    width: 300px;
    height: 48px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border: 3px solid #FFFCBA;
    box-shadow: 0px 3.64px 3.64px 0px #00000040;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    margin-left: -21px;
}

.box-check-button a.btn-link-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 14px;
    width: 300px;
    height: 48px;
    border-radius: 16px;
    border: 3px solid #FFFCBA;
    box-shadow: 0px 3.64px 3.64px 0px #00000040;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    text-decoration: none;
}

.box-check-button a.btn-link-check img {
    max-height: 26px;
}

.box-check-button a.btn-link-check .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.box-check-button a.btn-link-check .btn-icon img {
    height: 22px;
    width: auto;
    display: block;
}

.box-check-button a.btn-link-check .btn-text {
    color: #FFF600;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Keep 2 buttons in one row on desktop */
@media (min-width: 768px) {
    .box-check-button {
        flex-wrap: nowrap;
    }

    .box-check-button button.btn-link-check,
    .box-check-button a.btn-link-check {
        width: calc(50% - 7px);
        max-width: none;
    }

    .box-check-button button.btn-link-check {
        margin-left: 0px;
    }
}

.box-content-right {
    width: 100%;
    min-height: 580px;
    border-radius: 32px;
    padding: 18px;
    padding-bottom: 14px;
}

.box-content-right h2 {
    color: #FF0D00;
    font-size: 20px;
    padding-top: 0px;
    padding-bottom: 4px;
    text-align: center;
    font-weight: bold;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.box-content-right .description {
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 30px;
}
.box-content-right .description .rule-list{
    margin: 0;
    padding-left: 20px;
}
.box-content-right .description ul.rule-list{
    list-style: none;
    padding-left: 0;
}
.box-content-right .description ul.rule-list li{
    position: relative;
    padding-left: 18px;
    margin: 0 0 10px 0;
}
.box-content-right .description ul.rule-list li::before{
    content: "♦";
    position: absolute;
    left: 0;
    top: 0;
    color: #FF0D00;
    font-weight: 900;
    line-height: 1.2;
}

/* If using <ol class="rule-list">, keep default numbering */
.box-content-right .description ol.rule-list{
    list-style: decimal;
}
.box-content-right .description ol.rule-list li{
    padding-left: 0;
    margin: 0 0 10px 0;
}
.box-content-right .description ol.rule-list li::before{
    content: none;
}
.box-content-right .description ol.rule-list li::marker{
    color: #FF0D00;
    font-weight: 900;
}

/* Indent normal bullet/number lists inside description */
.box-content-right .description ul:not(.rule-list),
.box-content-right .description ol:not(.rule-list){
    padding-left: 26px;
    margin: 0 0 12px 0;
    list-style-position: outside;
}
.box-content-right .description ul:not(.rule-list) li,
.box-content-right .description ol:not(.rule-list) li{
    padding-left: 6px; /* spacing between marker and text */
    margin: 0 0 10px 0;
}

/* Match screenshot: dash lines (shallow indent) + only last bullets indented deeper */
.box-content-right .description .rule-lines{margin: 0 0 10px 0;}
.box-content-right .description .dash-line{
    position: relative;
    padding-left: 14px;
    margin: 0 0 10px 0;
}
.box-content-right .description .dash-line::before{
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
    color: #000;
    font-weight: 700;
}
.box-content-right .description .bullet-sub{
    padding-left: 38px; /* deeper indent for only bullet items */
    margin: 0;
}
.box-content-right .description .bullet-sub li{
    padding-left: 6px;
}
.box-content-right .description .tg{color: #FF5500; font-weight: 700;}

.box-content-right .description .highlight {
    background: linear-gradient(90deg, #FF512F, #DD2476);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
    margin: 8px 0;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
}

.box-content-right .box-award {
    border-radius: 16px;
    border: 1px solid #E40000;
}

.box-content-right .box-note {
    font-size: 12px;
    text-align: center;
    padding-top: 6px;
}

.box-content-right .box-note span {
    color: #FF0D00;
    font-weight: bold;
}


table.reward-table {
    width: 100%;
}

table.reward-table thead tr th {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
}

table.reward-table thead tr th.rank {
    border-top-left-radius: 10px;
    background: #fa2201;
    color: #fff;
}

table.reward-table thead tr th.award {
    border-top-right-radius: 10px;
    background: #fa2201;
    color: #fff;
    padding: 5px 0px;
    border-left: 1px solid #FF4400;
}

table.reward-table thead tr th.game-1 {
    border-left: 1px solid #FF4400;
    color: #fff;
}

table.reward-table thead tr th.game-2 {
    border-left: 1px solid #FF4400;
    color: #fff;
}

table.reward-table tbody tr td {
    font-size: 12px;
    text-align: center;
    padding: 4.3px 0px;
    border: 1px solid #E40000;
}

table.reward-table tbody tr td:first-child {
    border-left: 0px;
}

table.reward-table tbody tr td:last-child {
    border-right: 0px;
}

table.reward-table tbody tr:last-child td {
    border-bottom: 0px;
}

table.reward-table tbody tr:nth-child(odd) td {
}

#popupCheckRank.modal.show .modal-dialog {
    max-width: 650px;
}

#popupCheckRank .modal-content {
    background: #fff;
    border-radius: 32px;
    box-shadow: 0px 0px 20px 0px #00000080 inset;
}

#popupCheckRank .modal-content .content-box {
    position: relative;
}

#popupCheckRank .modal-content .content-box .btn-close {
    position: absolute;
    top: 0px;
    right: 0px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}

.box-input-code {
    width: 100%;
    text-align: center;
    color: #000000
}

.box-input-code .box-input-code-inner {
    max-width: 650px;
    width: 100%;
    margin: auto;
    border-radius: 16px;
    position: relative;
    padding-bottom: 10px;
}

.box-input-code .box-input-code-inner .box-title {
    color: #FF0D00;
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;

}

.box-input-code .box-input-code-inner form.frm-login {
    padding: 0px 60px
}

.box-input-code .box-input-code-inner form.frm-login label {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 15px;
    font-weight: bold;
    white-space: nowrap;
}

.box-input-code .box-input-code-inner form.frm-login input {
    backdrop-filter: blur(8.300000190734863px);
    border: 1px solid #FF5500;
    border-radius: 8px;
    padding: 11px;
    background: #fff;
    color: #757575;
    outline: 0;
}

.box-input-code .box-input-code-inner form.frm-login input::placeholder {
    color: rgba(164, 167, 174, 1);
}

.box-input-code .box-input-code-inner form.frm-login table {
    max-width: 330px;
    margin: auto;
}

.box-input-code .box-input-code-inner form.frm-login table tr td {
    padding: 0px 10px;
}

.box-input-code .box-input-code-inner form.frm-login table tr td input {
    max-width: 48px;
    text-align: center;
}

.box-input-code .box-input-code-inner form.frm-login button.btn-submit {

    margin-top: 20px;
    width: 300px;
    height: 48px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border: 3px solid #FFFCBA;
    box-shadow: 0px 3.64px 3.64px 0px #00000040;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);


}

.box-input-code .box-input-code-inner form.frm-login button.btn-submit span {
    color: #FFF600;
    text-transform: uppercase;
    font-weight: bold;
}

.box-input-code .box-input-code-inner form.frm-verify {
    margin-top: 30px
}


#dataModal .modal-dialog, #dataModal .modal-content {
    max-width: 792px;
}

.box-code-inner {
    margin-top: 40px;
}

.box-code-inner .box-input-code {
    max-width: 654px;
    margin: 0px auto;
}

.box-code-inner .box-input-code .box-input-code-inner {
    background: #fff;
    border: 2px solid #FFFFFF;
    border-radius: 32px;
    max-width: 100%;
    box-shadow: 0px 0px 20px 0px #00000080 inset;
}

.box-code-inner .box-input-code .content-box {
    width: 100%;
    text-align: center;
    color: #fff;
    max-width: 792px;
    padding-bottom: 20px;
    padding: 20px 15px;
}

.box-code-inner .box-input-code .content-box .box-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.box-code-inner .box-input-code .content-box .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}

.box-code-inner .box-input-code .content-box .box-title {
    color: #FF4400;
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 20px 0px;
}

.box-code-inner .box-input-code .content-box .box-results {
    background: #FFFFFF;
    font-size: 20px;
    color: #FF4400;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 46px;
    border: 1px solid #898989;
    background: linear-gradient(180deg, #FF5500 0%, #FF0D00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


@media (max-width: 1200px) {


    .box-code-inner .box-input-code .content-box .box-title {
        font-size: 29px;
        margin: 0px 0px;
    }

    .box-code-inner .box-input-code .content-box .box-subtitle {
        font-size: 16px;
    }

    .box-code-inner .box-input-code .content-box .box-results {
        font-size: 16px;
        line-height: 37px;
    }

    .box-code-inner .box-input-code .content-box {
        padding-bottom: 0px;
    }

    .box-check-button button.btn-link-check {
        margin-left: 0px;
    }

    .scroll-list ul.scroll-list-inner li span span.price {
        min-width: 100%;
        text-align: right;
        display: inline-block;
        padding-right: 20px;
    }

    .scroll-list ul.scroll-list-inner li span span.box-stt {
        padding-left: 15px;
        margin-left: 0px;
        width: 100%
    }

    .box-content-left .box-content-list .box-head span span.account {
        margin-left: 0px;
        min-width: 100%;
        display: inline-block;
        text-align: left;
        padding-left: 30px;
    }

    .box-content-left .box-content-list .box-head span span.nap {
        width: 100%;
        display: inline-block;
        padding-right: 25px;
    }

    .box-content-left .box-content-list .box-head .text-center-account {
        text-align: left;
    }

    .box-content-left .box-content-list .box-head .text-center-score {
        text-align: right;
    }

    .box-banner img {
        margin-bottom: 20px;
        margin-top: 20px;
        padding: 0 20px;
    }
    .stage-bar {
        margin: 14px 0px 8px;
        font-size: 11px;
    }

    .box-content-left .box-content-1 .box-content-list::after {
        width: 0px;
    }

    .box-img.box-logo img {
        max-width: 100%;
    }

    .box-banner {
    }

    .box-content-left .box-time {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        max-width: 100%;
        box-sizing: border-box;
        left: 0px;
    }

    .box-content-left .box-time .date-range {
        display: inline-block;
        white-space: nowrap;
        font-size: 13px;
    }

    .box-content-left .box-content-list {
        width: 100%;
        padding: 0px 0px;
        padding-right: 0px;
    }

    .box-content-left .box-content-list .box-head {
        font-size: 14px;
    }

    .box-content-left .box-content-2 .box-content-list {
        padding-right: 0px;
    }

    .scroll-list ul.scroll-list-inner li {
        font-size: 16px;
    }

    .row.box-content-column {
        margin: auto;
    }

    .box-content-left {
        background: transparent;
        border-radius: 0px;
        border: 0px;
        padding: 0px 10px;
    }

    .box-content-right {
        background: rgba(255, 255, 255, 0.96);
        margin-left: 0px;
        border: 0px;
    }

    .box-award {
        padding: 0px 0px;
    }

    .box-content-right h2 {
        font-size: 18px;
    }

    .box-content-right .description {
        font-size: 13px;
    }

    .box-check-button {
        position: static;
        margin-top: 18px;
    }

    .box-input-code .box-input-code-inner form.frm-login {
        padding: 0px 0px
    }

    .box-content-2 h2 {
        left: 0px;
    }

}

@media screen and (min-width: 1023px) and (max-width: 1199px) {
    .row.box-content-column {
        border: 0px;
    }

    .row.box-content-column .box-content-1024 {
    }

    .box-content-right {
    }

    .box-content-left .box-time {
        margin: 10px 0px;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .box-content-left .box-time {
        display: block;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
        text-align: center;
    }

    .box-content-left .box-time .date-range {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        animation: scrollText 8s linear infinite;
        overflow: hidden;
        padding-top: 5px;
    }


    @keyframes scrollText {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }

    .box-check-button {
        position: fixed;
        bottom: 0px;
        left: 12px;
        right: 12px;
        width: auto;
        z-index: 999;
    }

    .box-check-button button.btn-link-check {
        margin-bottom: 10px;
    }

    body.default {
        padding-bottom: 120px;
        background-image: url(../img/bg_mobile.webp);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        min-height: 100vh;
    }

    body.default::before{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0.8;
        height: 55vh;
        background-image: url(../img/overlay_bg_mobile.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        pointer-events: none;
        z-index: 0;
    }

    /* Ensure content stays above overlay */
    body.default > *{
        position: relative;
        z-index: 1;
    }

}