@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

.wrapper{
    background: url("/frontend/images/event/birthday2025/1/bg1.jpg");
    background-size: 100% auto;
    position: relative;
    padding: 15px;
    min-height: 100vh;
}
.slogan-container{
    position: relative;
}
.slogan {
    position: relative;
}

header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.header-icon {
    max-width: 33%;
}

.slogan-img {
    max-width: 100%;
    margin: 0 auto;
}

.header-icon-img {
    display: block !important;
}

.header-icon-img-fx {
    display: none !important;
}

.header-icon:hover .header-icon-img-fx {
    display: block !important;
}

.header-icon:hover .header-icon-img {
    display: none !important;
}
.btn-event-container{
    max-width: 860px;
    margin: 0 auto;
}
.btn-event-container a {
    max-width: 33%;
    display: inline-block;
}
.btn-taigame{
    display: block;
    max-width: 310px;
    margin: 0 auto;
}
.btn-back{
    max-width: 70%;
}
.btn-thoinen-container{
    max-width: 1016px;
    margin: 0 auto;
    text-align: center;
}
.btn-thoi-nen{
    max-width: 39%;
    display: inline-block;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}
.btn-napngay{
    max-width: 24%;
    display: inline-block;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}
.btn-history{
    max-width: 39%;
    display: inline-block;
}
.luuy{
    max-width: 637px;
    margin: 0 auto;
    display: block;
}
.luuy2{
    max-width: 998px;
    margin: 0 auto;
    display: block;
}
.luuy3{
    max-width: 800px;
    margin: 0 auto;
    display: block;
}
.c1{
    padding: 15px;
}
.content4{
    max-width: 861px;
    margin: -24% auto 0;
    position: relative;
    padding: 15px;
}
.content4-main{
    background: url("/frontend/images/event/birthday2025/4/content-main.png");
    background-size: 100% 100%;
    min-height: 520px;
    position: relative;
    padding: 5% 20%;
}
.title-bxh{
    max-width: 46%;
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.leaderboard {
    width: 100%;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
    font-family: "Alegreya", serif;
    font-size: 24px;
}

.rank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 30px;
    margin-bottom: 5px;
    color: white;
    border: 1px solid #bd4d25;
}

.rank-1 { background: #ffd700; color: #000; }
.rank-2 { background: #add8e6; color: #000; }
.rank-3 { background: #00bfff; }
.rank-4 { background: #cc66ff; }
.rank-5 { background: #ff6666; }
.rank-6,
.rank-7,
.rank-8,
.rank-9,
.rank-10 {
    background: #8b4513;
}

.rank-row span:first-child {
    flex: 1;
    text-align: left;
}
.rank-row span:nth-child(2) {
    flex: 1;
    text-align: center;
}
.rank-row span:nth-child(3) {
    flex: 1;
    text-align: right;
}
.reward{
    position: absolute;
    bottom: 0;
    right: -6%;
    cursor: pointer;
}
.reward:hover{
    filter: brightness(110%);
}
#modalAlert .modal-dialog,#modalHistory .modal-dialog {
    width: 100%;
    max-width: 508px;
    margin: 0 auto;
}
#modalKQ .modal-dialog{
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}
#modalAlert .modal-content, #modalHistory .modal-content,#modalKQ .modal-content{
    background: transparent;
    border: none;
}

#modalAlert .modal-body, #modalHistory .modal-body, #modalKQ .modal-body{
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 2s ease-in;
}
.img-loading{
    display: block;
    margin: 0 auto;
}
.reward-info{
    width: 85%;
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.btn-oke{
    display: block;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 41%;
    cursor: pointer;
}
.main-sk2{
    max-width: 1231px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.cc-box{

}
.c-box{
    position: absolute;
    width: 12.5%;
    top: 44%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}
.boxfx{
    display: none!important;
}
.boxopen{
    display: none!important;
}
.c-box.box-active .boxfx{
    display: block!important;
}
.c-box:hover .boxopen,.c-box.opened .boxopen{
    display: block!important;
}
.c-box img{
    position: absolute;
}
.c-box1{
    left: 25%;
}
.c-box2{
    left: 41%;
}
.c-box3{
    left: 58%;
}
.c-box4{
    left: 75%;
}
.cc-process{
    width: 51.7%;
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 47px;
    background-image: url('/frontend/images/event/birthday2025/3/process0.png');
    background-size: cover;
}
.process-current{
    position: absolute;
    display: block;
    height: 100%;
    z-index: 1;
    background-image: url('/frontend/images/event/birthday2025/3/process.png');
    background-size: cover;
}
.c-level{
    position: absolute;
    width: 5%;
    top: 59.5%;
    transform: translate(-50%,-50%);
}
.c-level img{
    position: absolute;
}
.c-level .levelfx{
    display: none!important;
}
.c-level.active .levelfx{
    display: block!important;
}
.lv1{
    left: 25%;
}
.lv2{
    left: 41%;
}
.lv3{
    left: 58%;
}
.lv4{
    left: 75%;
}
.c-need{
    position: absolute;
    width: 13%;
    top: 73.5%;
    transform: translate(-50%,-50%);
}
.need1{
    left: 25%;
}
.need2{
    left: 41%;
}
.need3{
    left: 58%;
}
.need4{
    left: 75%;
}
#modalHistory .modal-body{

}
.table-his{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
}
.table-responsive{
    max-height: 68%;
}

@media only screen and (max-width: 1230px) {

}
@media only screen and (max-width: 1024px) {
    .wrapper{
        background: url("/frontend/images/event/birthday2025/1/bg1.jpg") no-repeat center top fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-height: 100vh;
        overflow: hidden;
        padding-top: 20px;
    }
    .slogan-img {
        padding-top: 50px;
    }
    .bg-header-small {
        width: 30%;
    }
    .header-logo img {
        height: 75px;
    }
    .reward{
        max-width: 25%;
        right: 0;
    }
    .cc-process{
        height: 35px;
    }
}
@media only screen and (max-width: 768px) {
    .leaderboard-header {
        padding: 5px 10px;
        font-size: 14px;
    }
    .rank-row {
        padding: 5px 10px;
        font-size: 12px;
    }
    .content4-main{
        min-height: 430px;
    }
    .cc-process{
        height: 25px;
    }
    .header-logo{
        width: 140px;
    }
}
@media only screen and (max-width: 500px) {
    .rank-row{
        font-size: 9px;
    }
    .cc-process{
        height: 20px;
    }
}