/* setiap baris ke-5 pink */
.paito-table tr:nth-child(5n) td{
    background:#e5e5e5;
}

/* tapi angka emas tetap putih */
.paito-table tr:nth-child(5n) td.gold{
    background:#e5e5e5;
}

.paito-daily-table td:nth-child(1),
.paito-daily-table td:nth-child(2){
    cursor:default !important;
}

.paito-type-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    margin:0 auto 0;
    max-width:900px;
}

.paito-type-tabs button{
    border:1px solid #ddd;
    background:#eee;
    padding:10px;
    font-weight:700;
    font-size:12px;
    color:#777;
    border-radius:4px;
    cursor:pointer;
}

.paito-type-tabs button.active{
    background:#c39213;
    color:#111;
}

.paito-type-view{
    display:none;
}

.paito-type-view.active{
    display:block;
}

.paito-box{
    width:100%;
    max-width:900px;
    margin:0 auto 20px;
    background:#fff;
    border:0px solid #d4a017;
    font-family:Arial,sans-serif;
    color:#111;
    box-sizing:border-box;
}

.paito-title{
    text-align:center;
    font-weight:700;
    color:#c39213;
    padding:10px 5px 4px;
    font-size:14px;
}

.paito-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    padding:0 8px 8px;
}

.paito-tabs button{
    border:1px solid #ddd;
    background:#eee;
    padding:9px;
    font-weight:700;
    font-size:11px;
    color:#777;
    border-radius:4px;
}

.paito-tabs button.active{
    background:#c39213;
    color:#111;
}

.paito-colors{
    display:flex;
    gap:5px;
    padding:8px;
    border-top:1px solid #eee;
    align-items:center;
    overflow-x:auto;
}

.paito-colors span{
    width:42px;
    height:38px;
    min-width:42px;
    border-radius:4px;
    border:2px solid #eee;
    display:block;
}

.paito-colors button{
    margin-left:auto;
    min-width:64px;
    height:30px;
    border:1px solid #aaa;
    background:#f7f7f7;
    color:#777;
    border-radius:4px;
    font-size:11px;
}

.paito-scroll{
    width:100%;
    overflow-x:hidden;
}

.paito-table{
    width:100%;
    max-width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:12px;
    font-weight:700;
}

.paito-grid th{
    border:1px solid #e5e5e5;
    text-align:center;
    padding:8px 1px;
    font-size:10px;
    color:#c39213;
    background:#000;
    white-space:nowrap;
}

.paito-table td{
    border:1px solid #969696;
    text-align:center;
    padding:2px 1px;
    min-width:0;
    width:auto;
    color:#000 !important;
    cursor:pointer;
    line-height:1.3;
}

.paito-grid-5 td:nth-child(5n){
    border-right:1px solid #000;
}

.paito-grid-7 td:nth-child(7n){
    border-right:1px solid #d4a017;
}

.paito-table td.gold{
    color:#bfbfbf !important;
}

.paito-filter-item{
    padding:8px 2px;
}

.paito-filter{
    display:grid;
    gap:0;
}

/* 4D */
.paito-filter[data-cols="5"]{
    grid-template-columns:repeat(5,1fr) 54px;
}

/* 6D */
.paito-filter[data-cols="7"]{
    grid-template-columns:repeat(7,1fr) 54px;
}

.paito-filter-item{
    text-align:center;
    padding:10px 2px;
    border-right:1px solid #ddd;
}

.paito-filter-item span{
    display:block;
    font-size:11px;
    font-weight:700;
    color:#c39213;
    margin-bottom:4px;
}

.paito-filter-item input{
    width:32px;
    border:0;
    background:transparent;
    text-align:center;
    font-size:20px;
    font-weight:700;
    color:#0b1f33;
    outline:none;
}

.paito-clear{
    border:0;
    background:#c39213;
    color:#000;
    font-size:22px;
    font-weight:700;
    cursor:pointer;
}


/* AS */
.paito-mark-as{
    background:#ee1e2f !important;
    color:#fff !important;
}

/* KOP */
.paito-mark-kop{
    background:#8fbc6b !important;
    color:#fff !important;
}

/* KEP */
.paito-mark-kep{
    background:#ffc857 !important;
    color:#000 !important;
}

/* EKR */
.paito-mark-ekr{
    background:#52ad91 !important;
    color:#fff !important;
}

/* KEL */
.paito-mark-kel{
    background:#7638ee !important;
    color:#fff !important;
}

/* KET */
.paito-mark-ket{
    background:#2682a0 !important;
    color:#fff !important;
}

/* JML */
.paito-mark-jml{
    background:#ff6b2c !important;
    color:#000 !important;
}
.paito-color-choice{
    cursor:pointer;
}

.paito-color-choice.active{
    outline:3px solid #111;
    outline-offset:2px;
}

.paito-view{
    display:none;
}

.paito-view.active{
    display:block;
}

.paito-daily-filter{
    text-align:center;
    padding:10px 6px;
    background:#f7f7f7;
    border-top:1px solid #eee;
}

.paito-daily-filter label{
    font-size:12px;
    font-weight:700;
    color:#c39213;
    margin-right:6px;
}

.paito-day-select{
    padding:4px 8px;
    font-size:12px;
}

.paito-daily-table th{
    background:#c39213;
    color:#000;
    border:1px solid #ddd;
    padding:8px 4px;
    font-size:12px;
}

.paito-daily-table td{
    padding:8px 4px;
}

.paito-daily-table tr:nth-child(even){
    background:#f9f9f9;
}

.paito-daily-table .paito-hari-text{
    font-weight:700;
}

/* ===== MODE HARIAN ===== */
.paito-daily-table{
    table-layout:fixed;
    width:100%;
}

.paito-daily-table th:nth-child(1),
.paito-daily-table td:nth-child(1){
    width:58px;
    font-size:11px;
}

.paito-daily-table th:nth-child(2),
.paito-daily-table td:nth-child(2){
    width:70px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.paito-daily-table th:nth-child(n+3),
.paito-daily-table td:nth-child(n+3){
    width:24px;
    text-align:center;
}

.paito-daily-table td:nth-child(n+3){
    font-size:15px;
    font-weight:700;
    line-height:1.15;
    padding:3px 0;
}

.paito-daily-table td{
    white-space:nowrap;
}

@media(max-width:600px){
    
    .paito-box{
        width:100vw;
        max-width:100vw;
        margin-left:calc(-50vw + 50%);
        border-left:0;
        border-right:0;
    }

    .paito-colors{
        gap:3px;
        padding:6px;
    }

    .paito-colors span{
        width:45px;
        min-width:34px;
        height:30px;
    }

    .paito-colors button{
        min-width:54px;
        font-size:10px;
    }

.paito-table{
        table-layout:fixed;
        font-size:10px;
    }

    .paito-grid th{
        font-size:12px;
        font-weight:bold;
        padding:5px 0;
        letter-spacing:-.5px;
    }

    .paito-table td{
        font-size:12px;
        padding:1px 0;
        letter-spacing:-.4px;
        line-height:1.25;
        white-space:nowrap;
    }

    .paito-filter{
        grid-template-columns:repeat(5,1fr) 38px;
    }

    .paito-filter-item{
        padding:8px 1px;
    }

    .paito-filter-item span{
        font-size:10px;
    }

    .paito-filter-item input{
        width:24px;
        font-size:18px;
    }
    
    .paito-daily-table th:nth-child(1),
.paito-daily-table td:nth-child(1){
    width:35px;
    font-size:12px;
}

.paito-daily-table th:nth-child(2),
.paito-daily-table td:nth-child(2){
    width:48px;
    font-size:12px;
}

.paito-daily-table th:nth-child(n+3),
.paito-daily-table td:nth-child(n+3){
    width:20px;
    font-size:13px;
}
}
/* FORCE FONT JML SAAT FILTER */
.paito-table td.paito-mark-jml{
    color:#000 !important;
}