#bonus {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#bonus img{
    width: 100%;
    will-change: transform;
}

#bonus-wrapper .row{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

#bonus-wrapper .bonus-title{
    display: inline-block; /* More consistent than fit-content */
    max-width: 100%;
}

#angpao-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.angpao{
    cursor: pointer;
}

#angpao-wrapper .angpao{
    flex: 0 0 calc(33.333% - 15px);
    position: relative;
}

#angpao-wrapper .angpao h6{
    font-weight: 600;
    color: var(--theme-color-dark-2);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 15px;
    font-size: 14px;
    line-height: 1.1;
    text-align: center;
    width: 90%;
    margin: auto;
    padding: 0 15px
}

#angpao-wrapper .angpao img{
    width: 100%;
    max-width: 180px;
    will-change: transform;
}

#bonus-modal .modal-content, #bonus-modal2 .modal-content{
    width: 95% !important
}

#bonus-modal .content, #bonus-modal2 .content{
    display: flex;
    flex-direction: column;
    max-height: 80vh
}

#bonus-modal .top, #bonus-modal2 .top{
    overflow: auto;
}

#bonus-modal .title, #bonus-modal2 .title{
    font-size: 24px;
    color: var(--theme-color-dark-2);
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 3px solid
}

#bonus-modal .row, #bonus-modal2 .row{
    margin-bottom: 10px;
    display: block
}

#bonus-modal .row.border, #bonus-modal2 .row.border{
    border-radius: 5px;
    border: 1px solid #d1d1d1
}

#bonus-modal .row h4, #bonus-modal2 .row h4{
    margin-bottom: 3px
}

#bonus-modal h4, #bonus-modal2 h4{
    font-size: 12px;
    font-weight: 600;
    color: #000;
}

#bonus-information-wrapper .row-title, #bonus-modal2 .row-title{
    text-align: center;
    padding: 5px;
    color: #253f33;
    background: #eaf0ed;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 0 !important
}

#bonus-information-wrapper .bonus-description{
    color: var(--theme-color-default);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

#bonus-modal table td, #bonus-modal2 table td{
    border: 1px solid #bdbdbd;
    padding: 5px 8px;
}

#bonus-modal .highlight, #bonus-modal2 .highlight{
    color: var(--theme-color-dark-2);
}

#bonus-modal .highlight.danger, #bonus-modal2 .highlight.danger{
    animation: .75s highlight-danger linear infinite;
}

@keyframes highlight-danger {
    0%, 100%{
        color: #ff9494;
    }
    50%{
        color: #ff0000;
    }
}

#bonus-tnc-wrapper li{
    font-size: 12px;
    color: var(--theme-color-default-light);
}

#message_p{
    color: #ff5b00;
    text-align:center;
    font-size:10px;
    margin: 10px 5px;
}

#message_p b{
    font-size: 10px;
}

#bonus-action-wrapper{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

#bonus-action-wrapper .btn-submit{
    flex: 1 0 calc(50% - 5px);
    padding: 10px 15px;
}

#btn-close-bonus{
    flex: 0 0 calc(50% - 5px);
    padding: 10px 15px;
    border: none;
    background: #c6c6c6;
    color: #5a5a5a;
    cursor: pointer
}
#bonus-footer{
    margin-top: 10px;
}

#bonus-footer img{
    width: 100%;
}

#tnc{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--theme-color-dark-2);
    font-size: 16px;
    font-weight: 600;
}

.tnc-content{
    height: 0;
    transition: 0.375s;
    overflow: hidden;
    padding: 0 10px;
    border-radius: 5px;
    background: #eaf0ed
}

.tnc-content .row{
    margin-bottom: 0 !important
}

.tnc-wrapper.show svg{
    transform: rotate(90deg);
}

.tnc-wrapper.show .tnc-content{
    height: auto;
    padding: 10px;
}

.tnc-wrapper ul{
    padding-left: 24px;
}

.tnc-wrapper li{
    font-size: 14px !important;
    color: var(--theme-color-default) !important;
}

.rules{
    padding: 8px
}

.rule{
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 5px;
    margin-bottom: 5px;
}

.rules .rule:last-of-type{
    margin-bottom: 0
}

.rule .icon{
    margin-top: 2px;
    flex: 0 0 20px;
    font-size: 15px 
}

.rule .value{
    flex: 1 1 calc(100% - 20px);
    color: var(--theme-color-default);
    font-size: 14px;
}

.infos{
    padding: 8px
}

.infos .info{
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #d1d1d1;
    padding: 5px
}

.infos .info:last-of-type{
    margin-bottom: 0;
    border-bottom: none;
}

.infos .info .label{
    flex: 0 0 35%;
    text-align: left;
    font-size: 14px;
    color: var(--theme-color-default)
}

.infos .info .value{
    flex: 0 0 60%;
    text-align: right;
    font-size: 14px;
    color: var(--theme-color-dark-2);
    font-weight: 600
}

.turnover-calculation h4{
    text-align: center;
    font-size: 14px
}

.turnover-calculation table{
    background: #eaf0ed
}