@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";

* {
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    margin: 0;
    background: #f3f4f6;
    color: #111827;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

img,
svg,
canvas {
    display: block;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

.site-header__inner {
    max-width: 72rem;
    margin-inline: auto;
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-header__logo {
    height: 2rem;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (min-width: 768px) {
    .site-header__logo {
        height: 3rem;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding-inline: 0.75rem;
    }
}

.site-header__actions {
    display: flex;
    /*align-items: center;*/
    gap: 5px;
}

.page {
    max-width: 72rem;
    margin-inline: auto;
    padding: 1.5rem 1rem;
    width: 98%;
}

.button {
    border-radius: 9999px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.button--login {
    padding: 0.375rem 1.5rem;
    border: 1px solid #9ca3af;
    background: #fff;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 700;
}

    .button--login:hover {
        background: #f9fafb;
    }

.button--join {
    padding: 0.375rem 1.5rem;
    background: #dc2626;
    color: #fff;
    font-weight: 780;
}

    .button--join:hover {
        background: #b91c1c;
    }

.button--gold {
    background: linear-gradient(180deg, #db1f26 0%, #ab2020 100%);
    color: #fff;
}

.button--spin {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 900;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

    .button--spin:hover {
        transform: scale(1.05);
    }

    .button--spin:active {
        transform: scale(0.97);
    }

.button--claim {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #dc2626;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

    .button--claim:hover {
        background: #b91c1c;
    }

.language-pill {
    display: flex;
    align-items: center;
    padding: 0.25rem;
}

.language-pill__flag {
    width: 2rem;
    height: 2rem;
    border-radius: 0.125rem;
}

@media (max-width: 768px) {
    .button--login,
    .button--join {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }

    .language-pill__flag {
        width: 1.2rem;
        height: 1.2rem;
    }

    .site-header__actions {
        gap: 0.2rem;
    }
}

.banner_hero {
    border-radius: 1.5rem;
    z-index: 2;
    position: relative;
}

.banner_hero__panel {
    position: relative;
    width: 100%;
    display: block;
}

.banner_hero__picture {
    display: flex;
    justify-content: center;
    width: 100%;
}

.banner_hero__banner-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.4rem;
    margin-bottom: 12px;
}

.prize-pool {
    position: relative;
    margin-top: 2rem;
    padding: 0.75rem 2.5rem;
    border-top: 4px solid #eab308;
    border-bottom: 4px solid #eab308;
    background: darkred;
}

.prize-pool__label {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.125rem 0.75rem;
    border-radius: 0.25rem;
    background: #eab308;
    color: #7f1d1d;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
}

.prize-pool__amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 900;
}

@media (min-width: 768px) {
    .prize-pool__amount {
        font-size: 3.75rem;
    }
}

.prize-pool__currency {
    color: #facc15;
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .prize-pool__currency {
        font-size: 1.875rem;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stat-card__icon {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.stat-card__svg {
    width: 2rem;
    height: 2rem;
}

.stat-card__label {
    margin: 0;
    color: #6b7280;
    font-size: 0.625rem;
    font-weight: 700;
}

.stat-card__value {
    margin: 0;
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.3;
}

.stat-card__note {
    margin: 0;
    color: #9ca3af;
    font-size: 0.625rem;
}

.wheel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .wheel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wheel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border-radius: 1.5rem;
    color: #fff;
}

.wheel-card--lucky {
    background: linear-gradient(180deg, #e31e24 0%, #a81116 100%);
}

.wheel-card--multiplier {
    background: linear-gradient(180deg, #c5298d 0%, #7e165a 100%);
}

.wheel-card__heading {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wheel-card__star {
    color: #facc15;
}

.wheel-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
}

.wheel-card__description {
    margin: 0 0 1rem;
    color: hsla(0, 0%, 100%, 0.9);
    font-size: 0.625rem;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-box {
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin: 0 auto 1rem;
    cursor: pointer;
}

.wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    z-index: 15;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 14px solid rgba(0, 0, 0, 0);
    border-right: 14px solid rgba(0, 0, 0, 0);
    border-top: 28px solid #ffd966;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.wheel-canvas {
    border-radius: 9999px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    outline: 2px solid rgba(250, 204, 21, 0.6);
    outline-offset: 0;
    transition: filter 0.2s ease;
}

.chance-text {
    margin: 0;
    padding: 0.125rem 0.75rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.75rem;
    font-weight: 500;
}

.weekly-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid #dc2626;
    border-radius: 1.5rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.weekly-card__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-block: 0.5rem;
    border-radius: 1rem 1rem 0 0;
    background: #dc2626;
    color: #facc15;
}

    .weekly-card__header h3 {
        margin: 0;
        color: #fff;
        font-size: 1.125rem;
        font-weight: 900;
    }

.weekly-card__reset {
    margin: 0 0 1rem;
    color: #6b7280;
    font-size: 0.625rem;
    font-weight: 700;
}

.weekly-score {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1rem;
    overflow: hidden;
    border-radius: 1rem;
    background: #991b1b;
    color: #fff;
}

.weekly-score__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
    background-size: 10px 10px;
}

.weekly-score__content {
    position: relative;
    z-index: 1;
}

.weekly-score__label {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.weekly-score__points {
    margin: 0 0 1rem;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
}

.weekly-score__rank {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    background: hsla(0, 0%, 100%, 0.2);
}

    .weekly-score__rank p {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .weekly-score__rank span {
        color: #facc15;
    }

.milestone-track {
    width: 100%;
    margin-bottom: 1.5rem;
    padding-inline: 0.5rem;
}

.milestone-track__icons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.milestone-track__next {
    margin: 0.75rem 0 0;
    color: #6b7280;
    font-size: 0.625rem;
    font-style: italic;
}

.milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.milestone__label {
    margin-bottom: 0.25rem;
    color: #4b5563;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.milestone__icon {
    width: 2rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: #dc2626;
    color: #facc15;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .milestone__icon.is-complete {
        background: #16a34a;
        color: #fff;
    }

.progress {
    position: relative;
    width: 100%;
    height: 0.5rem;
    overflow: hidden;
    border-radius: 9999px;
    background: #e5e7eb;
}

.progress__fill {
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
    transition: width 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.instructions {
    padding: 2rem;
    border-radius: 1.5rem;
    background: #e5e7eb;
}

.instructions__title {
    margin: 0 0 1.5rem;
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 900;
    font-style: italic;
}

.instructions__list {
    display: grid;
    gap: 1rem;
}

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.instruction-item__number {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.instruction-item__text {
    margin: 0;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 700;
}

.site-footer {
    padding: 0.5rem 1rem;
    color: #9ca3af;
    font-size: 0.75rem;
    text-align: center;
}

.win-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

    .win-popup.is-visible {
        display: flex;
    }

.win-popup__dialog {
    max-width: 24rem;
    width: 100%;
    overflow: hidden;
    border: 4px solid red;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #fffbeb, #ffedd5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: popIn 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.win-popup__content {
    position: relative;
    padding: 1.5rem;
    text-align: center;
}

.win-popup__badge {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    padding: 0.5rem;
    border-radius: 9999px;
    background: #eab308;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
}

    .win-popup__badge span {
        font-size: 2.25rem;
    }

.win-popup__title {
    margin: 1rem 0 0;
    color: #b91c1c;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.025em;
}

.win-popup__icon {
    margin-block: 0.75rem;
    font-size: 4.5rem;
    line-height: 1;
}

.win-popup__message {
    margin: 0 0 0.5rem;
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 700;
}

.win-popup__detail {
    margin: 0 0 1.25rem;
    color: #4b5563;
    font-size: 0.875rem;
}

.win-popup__button {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 900;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

    .win-popup__button:hover {
        transform: scale(1.05);
    }

.toast-notify {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    z-index: 50;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    background: #111827;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
    animation: fadeInOut 2s ease forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    15%, 85% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -10px);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.wheel-card--lucky {
    background-color: #db1f26 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    text-align: center;
    position: relative;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

    .wheel-card--lucky .wheel-card__heading {
        background: linear-gradient(180deg, #ffea8a 0%, #af8e32 100%) !important;
        color: #a41c1c !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 47px;
        padding: 6px 30px !important;
        border-radius: 0 0 33px 33px !important;
        font-weight: 900 !important;
        font-size: 18px;
        margin-top: -21px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .wheel-card--lucky .wheel-card__star {
        color: #a41c1c;
        font-size: 14px;
    }

    .wheel-card--lucky .wheel-card__description {
        color: #fff !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 25px !important;
    }

.wheel-card--multiplier {
    background: linear-gradient(180deg, #db2481 0%, #a21c97 100%) !important;
    border-radius: 16px !important;
    padding: 33px !important;
    text-align: center;
    position: relative;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

    .wheel-card--multiplier .wheel-card__heading {
        background: linear-gradient(180deg, #ffe17d 0%, #af8e32 100%) !important;
        color: #b91523 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 6px 30px !important;
        border-radius: 0 0 33px 33px !important;
        margin-top: -33px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

        .wheel-card--multiplier .wheel-card__heading h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 900;
        }

    .wheel-card--multiplier .wheel-card__star {
        color: #b91523;
        font-size: 14px;
    }

    .wheel-card--multiplier .wheel-card__description {
        color: #fff !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 25px !important;
    }

.wheel-box {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
}

.wheel-canvas {
    width: 100%;
    height: 100%;
}

.wheel-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #fffdfd 0%, #fabdac 100%);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 2px solid #800004;
}

    .wheel-center-logo img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        border-radius: 50%;
    }

.wheel-card--lucky .wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid rgba(0, 0, 0, 0);
    border-right: 11px solid rgba(0, 0, 0, 0);
    border-top: 19px solid #db1f26;
    z-index: 10;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

    .wheel-card--lucky .wheel-pointer::after {
        content: "";
        position: absolute;
        top: -21px;
        left: -13px;
        border-left: 13px solid rgba(0, 0, 0, 0);
        border-right: 13px solid rgba(0, 0, 0, 0);
        border-top: 21px solid #fcc81d;
        z-index: -1;
    }

.wheel-card--multiplier .wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid rgba(0, 0, 0, 0);
    border-right: 11px solid rgba(0, 0, 0, 0);
    border-top: 19px solid #ffda59;
    z-index: 10;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

.wheel-card--lucky .button--spin {
    background: linear-gradient(180deg, #ffff8e 0%, #ffdb45 100%) !important;
    color: #333 !important;
    font-weight: 900 !important;
    font-size: 16px;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 0 !important;
    width: 90% !important;
    margin: 25px auto 10px !important;
    display: block;
    box-shadow: 0 4px 0 #cc9b25 !important;
    cursor: pointer;
}

.wheel-card--multiplier .button--spin {
    background: #ffec61 !important;
    color: #2b083e !important;
    font-weight: 900 !important;
    font-size: 16px;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 0 !important;
    width: 90% !important;
    margin: 25px auto 10px !important;
    display: block;
    box-shadow: 0 4px 0 #ccb62a !important;
    cursor: pointer;
}

.chance-text {
    color: #fff !important;
    font-size: 12px !important;
}

.claim-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 2000;
}

    .claim-popup.is-visible {
        opacity: 1;
        visibility: visible;
    }

.claim-popup__dialog {
    background: #fff;
    border: 3px solid red;
    border-radius: 16px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    color: #000;
}

.claim-popup__title {
    font-size: 24px;
    font-weight: 900;
    color: #8c0000;
    margin-bottom: 15px;
}

.claim-popup__message {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.new-weekly-card {
    background-color: #fcf9dc;
    border: 3px solid #cc262b;
    border-radius: 16px;
    padding: 0 0 24px 0;
    text-align: center;
    position: relative;
}

    .new-weekly-card .weekly-card__header {
        background: linear-gradient(180deg, #c90808 0%, #800000 100%) !important;
        color: #ffde59;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        padding: 10px 24px;
        border-radius: 0 0 33px 33px !important;
        font-size: 16px;
        font-weight: 900;
        margin-top: -3px;
        width: calc(90% + 6px);
        margin-left: -3px;
        box-sizing: border-box;
    }

        .new-weekly-card .weekly-card__header h3 {
            margin: 0;
            font-size: 16px;
        }

    .new-weekly-card .weekly-card__reset {
        font-size: 11px;
        font-weight: 700;
        color: #222;
        margin: 16px 0;
    }

.wallet-showcase {
    position: relative;
    width: 280px;
    height: 160px;
    margin: 0 auto 24px;
    background-image: url("../../DT/Image/bg.png");
    border-radius: 12px 12px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wallet-points-card {
    border-radius: 12px;
    padding: 12px 24px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.wallet-points-card__label {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin: 0 0 4px 0;
}

.wallet-points-card__value {
    font-size: 32px;
    font-weight: 900;
    color: #333;
    margin: 0;
}

.wallet-ranking-pill {
    border-radius: 20px;
    padding: 6px 24px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
}

    .wallet-ranking-pill span {
        font-weight: 900;
        font-size: 14px;
    }

.milestone-section {
    padding: 0 20px;
}

.milestone-icons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 10px;
}

.milestone-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.milestone-item__label {
    font-size: 11px;
    font-weight: 900;
    color: #222;
    line-height: 1.2;
    margin-bottom: 8px;
    text-align: center;
}

.milestone-item__envelope {
    width: 32px;
    height: 40px;
    background: linear-gradient(180deg, #e53935 0%, #c62828 100%);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .milestone-item__envelope::after {
        content: "";
        width: 12px;
        height: 12px;
        background: #fbc02d;
        border-radius: 50%;
        border: 2px solid #f9a825;
    }

.progress-track-wrapper {
    position: relative;
    width: 100%;
    height: 24px;
    margin-bottom: 16px;
}

.progress-bar-bg {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    transform: translateY(-50%);
    height: 6px;
    background-color: #d8d8d8;
    border-radius: 3px;
}

.progress-bar-fill {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    height: 6px;
    background-color: #34a853;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.progress-nodes {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-node {
    width: 20px;
    height: 20px;
    background-color: #d8d8d8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease;
    z-index: 2;
}

.milestone__icon {
    display: none !important;
}

.progress-node.is-active {
    background-color: #34a853;
}

    .progress-node.is-active::after {
        content: "✔";
        color: #fff;
        font-size: 12px;
    }

.next-reward-text {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.btn-claim {
    background-color: #cc262b;
    color: #ffde59;
    font-weight: 900;
    font-size: 16px;
    border: none;
    border-radius: 24px;
    padding: 12px 0;
    width: 80%;
    cursor: pointer;
    box-shadow: 0 4px 0 #9e1c20;
    transition: transform 0.1s;
}

    .btn-claim:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 #9e1c20;
    }

.content-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto 1.5rem auto;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.375rem;
    border-radius: 0.75rem;
    max-width: 600px;
}

    .content-tabs .tab-btn {
        flex: 1;
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: #4b5563;
        background: rgba(0, 0, 0, 0);
        border: none;
        border-radius: 0.5rem;
        transition: all 0.25s ease;
    }

        .content-tabs .tab-btn:hover {
            color: #dc2626;
            background: hsla(0, 0%, 100%, 0.6);
        }

        .content-tabs .tab-btn.is-active {
            color: #fff;
            background: linear-gradient(180deg, #db1f26 0%, #ab2020 100%);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease-in-out forwards;
}

    .tab-panel.is-visible {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leaderboard-container {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.leaderboard-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 120px;
}

    .podium-place .podium-avatar {
        font-size: 2rem;
        margin-bottom: 0.25rem;
    }

    .podium-place .podium-name {
        font-size: 0.75rem;
        font-weight: 700;
        margin: 0;
        color: #1f2937;
    }

    .podium-place .podium-score {
        font-size: 0.75rem;
        color: #dc2626;
        font-weight: 700;
        margin: 2px 0;
    }

    .podium-place .podium-block {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 900;
        font-size: 1.25rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }

.podium-place--1 {
    max-width: 135px;
}

    .podium-place--1 .podium-avatar {
        font-size: 2.75rem;
    }

    .podium-place--1 .podium-block {
        height: 90px;
        background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%);
        color: #451a03;
    }

.podium-place--2 .podium-block {
    height: 65px;
    background: linear-gradient(180deg, #9ca3af 0%, #4b5563 100%);
}

.podium-place--3 .podium-block {
    height: 45px;
    background: linear-gradient(180deg, #cd7f32 0%, #a0522d 100%);
}

.leaderboard-table-wrapper {
    overflow-x: auto;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .leaderboard-table th {
        color: #6b7280;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    .leaderboard-table td {
        color: #1f2937;
        font-weight: 600;
    }

    .leaderboard-table .rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        background: #f3f4f6;
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .leaderboard-table .rank-badge--user {
        background: #dc2626;
        color: #fff;
    }

    .leaderboard-table .reward-highlight {
        color: #16a34a;
        font-weight: 700;
    }

    .leaderboard-table .current-user-row {
        background-color: #fdf8e2;
    }

        .leaderboard-table .current-user-row td {
            border-top: 2px solid #facc15;
            border-bottom: 2px solid #facc15;
        }

.terms-container {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    text-align: left;
}

.terms-title {
    margin: 0 0 1.25rem 0;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 900;
}

.terms-list {
    margin: 0;
    padding-left: 1.25rem;
}

    .terms-list li {
        margin-bottom: 1rem;
        color: #374151;
        font-size: 0.875rem;
        line-height: 1.6;
    }

        .terms-list li strong {
            color: #111827;
        }

        .terms-list li:last-child {
            margin-bottom: 0;
        }

.row {
    display: flex;
}

.col {
    display: flex;
    flex-direction: column;
}

.page_nav_row {
    width: 100%;
    margin: auto;
    padding: 3px;
    background: #fff;
    border-radius: 999rem;
    border-radius: 15px;
    overflow: auto;
    align-items: stretch;
    gap: 3px;
    margin-bottom: 40px;
}

    .page_nav_row .page_nav {
        flex: 1;
        padding: 10px 4px;
        border-radius: 999rem;
        border-radius: 15px;
        text-align: center;
        color: #939598;
        font-size: 0.9rem;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
    }

    .page_nav_row .nav_active {
        color: #fff;
        background: linear-gradient( 79deg, #f53a3a 0%, #e9242c 49.5%, #cb0c14 100% ) !important;
    }

.info-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: #e6e7e8;
    margin-top: -24px;
    border-radius: 0 0 15px 15px;
    margin-bottom: 15px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -15px;
}

    .info-item .icon {
        font-size: 38px;
        line-height: 1;
        color: #ed1c24;
        width: 25%;
    }

        .info-item .icon img {
            width: 100%;
        }

    .info-item span {
        display: block;
        font-size: 11px;
        font-weight: 800;
        color: #333;
    }

    .info-item strong {
        display: block;
        font-size: 15px;
        font-weight: 900;
        color: #111;
        line-height: 1;
        margin: 7px 0;
    }

    .info-item p {
        font-size: 10px;
        font-weight: 600;
        color: #777;
    }

.divider {
    width: 1px;
    height: 58px;
    background: #b8bdc1;
}

.rewards-row {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

.reward-block {
    position: relative;
    border: 4px solid #be1e2d;
    border-radius: 18px;
    background: #fff;
    min-height: 170px;
}

.section-title {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(270deg, #d7a95c 10%, #f6d77f, #d4a55a);
    color: #be1e2d;
    border: 3px solid #be1e2d;
    border-radius: 999px;
    padding: 7px 26px;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.monthly {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 40px 20px 55px;
    background: linear-gradient(180deg, #fdfdfd 50%, #e6e7e8);
}

.podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    flex: 1;
}

    .podium .rank {
        border-right: 1px solid #ee2626;
    }

        .podium .rank:last-child {
            border-right: 0;
        }

    .podium .medal {
        width: 73px;
        height: 51px;
        margin: auto;
    }

        .podium .medal img {
            width: 100%;
            height: 100%;
        }

    .podium h4 {
        margin: 4px 0 18px;
        font-size: 13px;
        font-weight: 800;
    }

    .podium strong {
        color: #ed1c24;
        font-size: 12px;
        font-weight: 800;
    }

        .podium strong span {
            font-size: 20px;
        }

.rank-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 40%;
}

    .rank-list div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 900;
    }

    .rank-list span {
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 800;
        font-size: 13px;
    }

        .rank-list span img {
            width: 20px;
        }

    .rank-list strong {
        color: #ed1c24;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: flex-end;
        gap: 4px;
        justify-content: flex-start;
        width: 23%;
    }

        .rank-list strong span {
            font-size: 14px;
            font-weight: 700;
        }

.pool {
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    background: #be1e2d;
    color: #ffd86b;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 44px;
    border-radius: 999px 999px 0 0;
    white-space: nowrap;
}

.weekly {
    background: radial-gradient( circle at 80% 30%, #ff3939 0, #ed1c24 45%, #d5131b 100% );
    color: #fff;
}

    .weekly .section-title {
        color: #be1e2d;
    }

.weekly-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    height: 100%;
    position: relative;
    padding: 15px;
    overflow: hidden;
}

    .weekly-content > div {
        width: 55%;
        margin-left: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .weekly-content img {
        width: 53%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: right;
        object-position: right;
        position: absolute;
        left: 0;
        top: 9%;
    }

    .weekly-content h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
    }

    .weekly-content h2 {
        margin: 4px 0 10px;
        font-size: 16px;
        font-weight: 800;
        text-align: center;
    }

        .weekly-content h2 span {
            color: #ffd35d;
            font-size: 26px;
        }

    .weekly-content p {
        margin: 0;
        font-size: 12px;
        font-style: italic;
        text-align: center;
    }

.content-card {
    display: none;
    background: #eef0f2;
    border-radius: 18px;
    padding: 26px 34px;
}

    .content-card.active {
        display: block;
    }

    .content-card h3 {
        margin: 0 0 16px;
        font-size: 21px;
        font-weight: 800;
    }

    .content-card ol {
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: item;
    }

    .content-card li {
        position: relative;
        counter-increment: item;
        padding-left: 34px;
        margin-bottom: 14px;
        font-size: 14px;
        font-weight: 700;
        color: #555;
    }

        .content-card li::before {
            content: counter(item);
            position: absolute;
            left: 0;
            top: -2px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #be1e2d;
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content-card li:last-child {
            margin-bottom: 0;
        }

    .content-card p {
        font-size: 15px;
        font-weight: 600;
        color: #555;
    }

.reward-card {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 15px;
    background: radial-gradient( circle at right top, #ffd987 0%, #fff2d7 35%, #fff 70% );
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.hero {
    position: relative;
    width: 115px;
    min-width: 115px;
    height: 115px;
    border-radius: 14px;
    overflow: hidden;
    background: #ff9800;
    flex-shrink: 0;
}

    .hero img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(to bottom, #1b944d, #0f5f31);
    border-radius: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    z-index: 5;
}

.content {
    flex: 1;
    padding: 0 18px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.title {
    font-size: 17px;
    font-weight: 800;
    color: #2f2f2f;
    margin-bottom: 4px;
    line-height: 1.2;
}

.subtitle {
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

.amount-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.amount-label {
    font-size: 16px;
    font-weight: 700;
    color: #444;
}

.amount {
    font-size: 24px;
    font-weight: 900;
    color: #df1c1c;
    line-height: 1;
}

.timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 320px;
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 10px;
        height: 3px;
        background: #ddd1c0;
        z-index: 0;
    }

.step {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
}

.circle {
    width: 22px;
    height: 22px;
    margin: 0 auto 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffc96a;
    border: 2px solid #d78f17;
}

.step.completed .circle {
    background: #ff2d2d;
    border-color: #ff2d2d;
    color: #fff;
}

    .step.completed .circle::before {
        content: "✓";
        font-size: 11px;
        font-weight: bold;
    }

.day {
    font-size: 11px;
    font-weight: 700;
    color: #555;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
}

    .actions .btn {
        width: 100%;
    }

.coins {
    position: absolute;
    right: 140px;
    bottom: -8px;
    font-size: 75px;
    opacity: 0.15;
    pointer-events: none;
}

@media (max-width: 768px) {
    .reward-card {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 20px;
    }

    .hero {
        width: 100%;
        height: 180px;
    }

    .content {
        width: 100%;
        padding: 16px 0;
    }

    .timeline {
        max-width: 100%;
    }

    .actions {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: 12px;
    }

    .btn {
        width: 100%;
    }

    .coins {
        display: none;
    }
}

.leaderboard-tab {
    display: none;
}

    .leaderboard-tab.active {
        display: block;
    }

.leaderboard-wrapper {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 16px;
    margin-bottom: 26px;
}

.my-points-card,
.leaderboard-card {
    border: 4px solid #be1e2d;
    border-radius: 22px;
    background: #eef0f2;
    overflow: hidden;
}

.card-header {
    background: #be1e2d;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 14px;
}

.points-body {
    padding: 22px;
}

.point-box {
    background: #fff;
    border-radius: 14px;
    padding: 18px 28px;
    text-align: center;
    margin-bottom: 16px;
}

    .point-box:last-child {
        margin-bottom: 0;
    }

    .point-box h4 {
        margin: 0 0 8px;
        font-size: 14px;
        font-weight: 700;
        color: #242424;
    }

    .point-box strong {
        display: block;
        color: #be1e2d;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.1;
    }

    .point-box hr {
        border: 0;
        border-top: 1px solid #e2e2e2;
        margin: 18px 0;
    }

.leaderboard-body {
    padding: 20px;
}

.leaderboard-tabs {
    display: flex;
    background: #d0d2d4;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 10px;
}

    .leaderboard-tabs .leader-tab {
        width: 50%;
        border: 0;
        background: rgba(0, 0, 0, 0);
        color: #999;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 10px;
        border-radius: 8px;
        cursor: pointer;
    }

        .leaderboard-tabs .leader-tab.active {
            background: #be1e2d;
            color: #fff;
        }

.time-left {
    text-align: center;
    font-size: 13px;
    color: #222;
    margin: 10px 0 16px;
}

.leader-table-wrap {
    max-height: 560px;
    overflow-y: auto;
    padding-right: 8px;
}

    .leader-table-wrap::-webkit-scrollbar {
        width: 8px;
    }

    .leader-table-wrap::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
    }

    .leader-table-wrap::-webkit-scrollbar-thumb {
        background: #b8b8b8;
        border-radius: 999px;
    }

.leader-table {
    display: none;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .leader-table.active {
        display: table;
    }

    .leader-table th {
        color: #222;
        font-size: 12px;
        font-weight: 700;
        padding: 10px;
        text-align: center;
        background: rgba(0, 0, 0, 0) !important;
    }

    .leader-table thead tr {
        background: rgba(0, 0, 0, 0) !important;
    }

    .leader-table tr:nth-child(odd) {
        background: #fff;
    }

    .leader-table img {
        width: 30px;
        margin: auto;
    }

    .leader-table td {
        color: #3d3d3d;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 10px;
        text-align: center;
    }

        .leader-table td:first-child {
            border-radius: 4px 0 0 4px;
            width: 22%;
        }

        .leader-table td:nth-child(2) {
            width: 43%;
        }

        .leader-table td:last-child {
            border-radius: 0 4px 4px 0;
            width: 35%;
        }

    .leader-table .medal {
        font-size: 24px;
        line-height: 1;
    }

.my-rank-row {
    display: grid;
    grid-template-columns: 22% 43% 35%;
    align-items: center;
    background: linear-gradient(79deg, #f53a3a 0%, #e9242c 49.5%, #cb0c14 100%);
    border: 2px solid #ffca00;
    color: #fff;
    border-radius: 999px;
    margin-top: 10px;
    overflow: hidden;
}

    .my-rank-row span {
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        padding: 7px 10px;
    }

.leaderboard-info {
    display: block;
    background: #eef0f2;
    border-radius: 18px;
    padding: 28px 34px;
}

#leaderboard.active {
    display: block;
}

.select_wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
    flex-direction: column;
}

    .select_wrap .select_popup {
        width: 100%;
        margin-top: auto;
    }

    .select_wrap .select_title {
        background: #ed1c24;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 15px;
        border-radius: 10px 10px 0 0;
        position: relative;
    }

        .select_wrap .select_title i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            align-self: flex-end;
            font-size: 30px;
        }

    .select_wrap .select_con {
        width: 100%;
        background: #fff;
        padding-bottom: 30vh;
    }

        .select_wrap .select_con .select_row {
            width: 100%;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            padding: 14px;
            border-bottom: 1px dashed #bcbec0;
            color: #888a8d;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

            .select_wrap .select_con .select_row img {
                width: 20px;
            }

    .select_wrap .select_con_show {
        animation: slide-in-bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .select_wrap .select_con_hide {
        animation: slide-in-hide 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

.select_row .language_item {
    width: 100%;
    color: #fff;
    font-size: 12px;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

    .select_row .language_item img {
        width: 30px;
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
    }

    .select_row .language_item .lang_infor_col {
        align-items: flex-start;
        gap: 4px;
    }

        .select_row .language_item .lang_infor_col .lang_cntry {
            font-size: 12px;
            color: gray;
            font-weight: 600;
            font-style: italic;
        }

        .select_row .language_item .lang_infor_col .lang_selection {
            width: 100%;
            gap: 5px;
            align-items: center;
        }

            .select_row .language_item .lang_infor_col .lang_selection .lang {
                font-size: 12px;
                font-weight: 500;
                cursor: pointer;
                transition: 0.4s;
                padding: 5px 8px;
                border-radius: 6px;
                color: #818284;
            }

                .select_row .language_item .lang_infor_col .lang_selection .lang:hover {
                    color: #b4a280;
                }

                .select_row .language_item .lang_infor_col .lang_selection .lang.active {
                    background: #ed1c24;
                    color: #fff;
                    box-shadow: 0px 0px 8px inset rgba(0, 0, 0, 0.2);
                }

@media (max-width: 900px) {
    .leaderboard-wrapper {
        grid-template-columns: 1fr;
    }

    .my-points-card {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .leaderboard-body {
        padding: 14px;
    }

    .leader-table th {
        font-size: 11px;
    }

    .leader-table td {
        font-size: 13px;
        padding: 7px 5px;
    }

    .leader-table .medal {
        font-size: 20px;
    }

    .my-rank-row span {
        font-size: 13px;
        padding: 7px 5px;
    }

    .card-header {
        font-size: 16px;
    }

    .points-body {
        padding: 16px;
    }

    .point-box strong {
        font-size: 28px;
    }
}

@media (max-width: 1180px) {
    .wheel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 950px) {
    .info-strip {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        padding-top: 30px;
    }

        .info-strip .divider {
            display: none;
        }

    .rewards-row {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }

    .monthly {
        padding: 40px 10px;
        flex-direction: column;
    }

    .wheel-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .podium {
        width: 100%;
        max-width: 500px;
    }

    .rank-list {
        width: 100%;
    }

        .rank-list strong {
            justify-content: flex-end;
        }

    .weekly-content img {
        left: -5%;
    }

    .points-body {
        display: flex;
        align-items: stretch;
        gap: 10px;
    }

        .points-body .point-box {
            height: 100%;
            margin-bottom: 0;
        }
}

/*Pagination*/
.pagination-wrap .page-btn {
    width: 32px;
    height: 32px;
    border: 2px solid #e63946;
    background: transparent;
    color: #e63946;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .pagination-wrap .page-btn:hover:not([disabled]) {
        background: #e63946;
        color: #fff;
    }

    .pagination-wrap .page-btn[disabled] {
        border-color: #ccc;
        color: #ccc;
        cursor: not-allowed;
    }

.pagination-wrap #totalPageInfo,
.pagination-wrap #weeklyPageInfo {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    min-width: 50px;
    text-align: center;
}

/*Table*/
#total-board tbody tr,
#weekly-board tbody tr {
    height: 42px;
}

#total-board td,
#weekly-board td {
    vertical-align: middle;
}

.medal img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/*Language*/
.lang-switch {
    font-weight: 600;
    font-size: 0.85rem;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0);
    border: 0;
}

.lang-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

    .lang-popup .lang-popup-content {
        position: relative;
        width: 260px;
        padding: 20px 18px 18px;
        border-radius: 16px;
        background: hsla(0, 0%, 100%, 0.95);
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
        animation: popupFade 0.25s ease;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .lang-popup .close {
        position: absolute;
        top: 10px;
        right: 12px;
        font-size: 18px;
        color: #888;
        cursor: pointer;
        transition: 0.2s;
    }

        .lang-popup .close:hover {
            color: #e11d48;
            transform: rotate(90deg);
        }

    .lang-popup .lang-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 15px;
        font-weight: 500;
        color: #333;
    }

        .lang-popup .lang-option img {
            width: 35px;
            border-radius: 3px;
        }

        .lang-popup .lang-option:hover {
            background: #f3f4f6;
            transform: translateY(-2px);
        }

        .lang-popup .lang-option:active {
            transform: scale(0.97);
        }

    .lang-popup.active {
        display: flex;
    }

@keyframes popupFade {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lang-switch {
    cursor: pointer;
}

    .lang-switch img {
        width: 28px;
    }

/* ── Nickname Popup ── */
.nickname-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

.nickname-popup-content {
    max-width: 24rem;
    width: 100%;
    overflow: hidden;
    border: 4px solid red;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #fffbeb, #ffedd5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: popIn 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
    padding: 1.5rem;
    text-align: center;
}

    .nickname-popup-content h2 {
        margin: 0 0 1rem;
        color: #b91c1c;
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: 0.025em;
    }

    .nickname-popup-content input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 16px;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }

.nickname-submit-btn {
    background: #b91c1c;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 900;
    margin: 8px 0 0;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    transition: 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.nickname-submit-btn:hover {
        transform: scale(1.05);
}

.nickname-submit-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
}

/*Tnc*/
.tnc-btn {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid #dc2626;
    padding: 6px 14px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

    .tnc-btn span {
        list-style: 1;
    }

    .tnc-btn:hover {
        background: #dc2626;
        color: #fff;
    }

.tnc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
}

    .tnc-modal-overlay.active {
        visibility: visible;
        opacity: 1;
    }

.tnc-modal-content {
    background: #fff;
    border-radius: 32px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    position: relative;
}

    .tnc-modal-content::-webkit-scrollbar {
        display: none;
    }

.tnc-modal-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .tnc-modal-content h3 {
        font-size: 1.8rem;
        font-weight: 800;
        margin-bottom: 20px;
        color: #dc2626;
        text-align: center;
        margin-top: 0;
    }

    .tnc-modal-content h4 {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 20px 0 10px;
        color: #1f2937;
    }

    .tnc-modal-content p,
    .tnc-modal-content ul {
        margin-bottom: 12px;
        line-height: 1.6;
        color: #4b5563;
    }

    .tnc-modal-content ul {
        margin-left: 20px;
    }

    .tnc-modal-content li {
        margin-bottom: 8px;
    }

.close-tnc-modal {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 24px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
}

    .close-tnc-modal:hover {
        color: #dc2626;
    }
    /*Header user badge*/
.user-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 8px 20px;
    border-radius: 60px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}