:root{--up-color: #31D0AA;--down-color: #ED4B9E;--winner-bg:rgba(49, 208, 170, 0.1);--winner-border:rgba(49, 208, 170, 0.5);--loser-bg:rgba(237, 75, 158, 0.1);--loser-border:rgba(237, 75, 158, 0.5);--pending-bg:rgba(255, 178, 55, 0.1);--pending-border:rgba(255, 178, 55, 0.5)}.detail-container{max-width:1200px;margin:0 auto;padding:120px 20px 60px}.page-title{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.page-title h1{font-size:32px;font-weight:700;background:var(--title-color);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);margin-bottom:16px}.breadcrumb a{color:var(--text-secondary);transition:color 0.3s ease}.breadcrumb a:hover{color:var(--primary-color)}.back-button{display:flex;align-items:center;gap:8px;background-color:var(--panel-background);border:1px solid var(--border-color);border-radius:16px;padding:8px 16px;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease}.back-button:hover{background-color:rgb(118 69 217 / .1);color:var(--primary-color)}.block-summary{background-color:var(--card-background);border-radius:24px;padding:24px;margin-bottom:40px;box-shadow:0 8px 24px rgb(0 0 0 / .1)}.summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:16px}.block-info{display:flex;align-items:center;gap:16px}.block-icon{width:48px;height:48px;border-radius:12px;background-color:rgb(118 69 217 / .1);display:flex;align-items:center;justify-content:center;color:var(--primary-color)}.block-details h2{font-size:24px;font-weight:700;margin-bottom:4px}.block-details p{font-size:14px;color:var(--text-secondary)}.block-status{padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}.block-status.completed{background-color:rgb(49 208 170 / .1);color:var(--green-color);border:1px solid rgb(49 208 170 / .3)}.summary-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:30px}.summary-item{background-color:var(--panel-background);border-radius:16px;padding:16px}.summary-item p{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.summary-item h3{font-size:24px;font-weight:700}.winning-numbers-section{margin-bottom:30px}.section-title{font-size:18px;font-weight:600;margin-bottom:16px}.winning-numbers{display:flex;gap:12px;margin-bottom:20px}.winning-digit{width:48px;height:48px;background-color:var(--primary-color);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;color:#fff;box-shadow:0 6px 12px rgb(118 69 217 / .3)}.prize-distribution{background-color:var(--panel-background);border-radius:16px;padding:20px;margin-bottom:30px}.prize-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.prize-header h3{font-size:18px;font-weight:600}.prize-total{font-size:18px;font-weight:700;color:var(--yellow-color)}.prize-table{width:100%;border-collapse:separate;border-spacing:0}.prize-table th,.prize-table td{padding:12px 16px;text-align:center}.prize-table th{color:var(--text-secondary);font-weight:600;font-size:14px}.prize-table tr:not(:last-child) td{border-bottom:1px solid var(--border-color)}.match-count{display:flex;justify-content:center;align-items:center;gap:6px}.match-pill{padding:4px 8px;border-radius:20px;font-size:12px;font-weight:600;background-color:rgb(118 69 217 / .1);color:var(--primary-color)}.prize-percent{color:var(--yellow-color);font-weight:600}.winners-count{color:var(--green-color);font-weight:600}.winners-section{margin-bottom:40px}.winners-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.winners-header h2{font-size:24px;font-weight:700;color:var(--title-color);}.filter-dropdown{position:relative}.filter-btn{display:flex;align-items:center;gap:8px;background-color:var(--panel-background);border:1px solid var(--border-color);border-radius:16px;padding:10px 16px;color:var(--text-primary);font-weight:500;font-family:'Kanit',sans-serif;font-size:14px;cursor:pointer;transition:all 0.3s ease}.filter-btn:hover{background-color:rgb(118 69 217 / .1)}.filter-menu{position:absolute;left:0;top:100%;margin-top:8px;background-color:var(--panel-background);border-radius:16px;box-shadow:0 6px 12px rgb(0 0 0 / .2);width:200px;z-index:10;display:none}.filter-menu.open{display:block}.filter-option{padding:12px 16px;cursor:pointer;transition:all 0.3s ease;font-size:14px;display:block}.filter-option:hover{background-color:rgb(118 69 217 / .1);color:var(--primary-color)}.winners-tabs{display:flex;background-color:var(--panel-background);border-radius:16px;padding:8px;margin-bottom:20px}.winners-tab{padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;text-align:center;cursor:pointer;transition:all 0.3s ease;flex-grow:1}.winners-tab.active{background-color:var(--primary-color);color:#fff}.winners-tab:not(.active):hover{background-color:rgb(118 69 217 / .1);color:var(--primary-color)}.winner-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-bottom:30px}.winner-card{background-color:var(--card-background);border-radius:16px;overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease}.winner-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgb(0 0 0 / .15)}.winner-header{background-color:var(--panel-background);padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.ticket-id{display:flex;flex-direction:column}.ticket-id span:first-child{font-size:12px;color:var(--text-secondary)}.ticket-id span:last-child{font-size:16px;font-weight:600}.match-status{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}.match-status.full-match{background-color:rgb(49 208 170 / .1);color:var(--green-color);border:1px solid rgb(49 208 170 / .3)}.match-status.partial-match{background-color:rgb(255 178 55 / .1);color:var(--yellow-color);border:1px solid rgb(255 178 55 / .3)}.winner-body{padding:16px}.ticket-numbers{display:flex;justify-content:space-between;margin-bottom:16px}.ticket-digit{width:36px;height:36px;background-color:var(--primary-color);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff}.ticket-digit.match{background-color:var(--green-color);box-shadow:0 0 10px rgb(49 208 170 / .5)}.winner-details{display:flex;flex-direction:column;gap:12px}.detail-item{display:flex;justify-content:space-between;font-size:14px}.detail-item:not(:last-child){padding-bottom:8px;border-bottom:1px solid var(--border-color)}.detail-label{color:var(--text-secondary)}.detail-value{font-weight:600}.prize-amount{color:var(--green-color);font-weight:700;font-size:20px;display:block;text-align:center;margin-top:16px}.winner-footer{padding:16px;border-top:1px solid var(--border-color)}.view-ticket-btn{width:100%;padding:12px;border:none;border-radius:16px;background-color:var(--primary-color);color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:background-color 0.3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.view-ticket-btn:hover{background-color:#8A58E9}.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}.paginationa{display:flex;justify-content:center;gap:8px;margin-top:40px}.pagination li a{padding:15px}.pagination li{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background-color:var(--panel-background);border:1px solid var(--border-color);color:var(--text-primary);font-weight:600;cursor:pointer;transition:all 0.3s ease}.pagination li.active{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}.pagination li:hover:not(.active){background-color:var(--primary-color);color:var(--primary-color)}.pagination li.disabled{opacity:.5;cursor:not-allowed}.search-box{display:flex;align-items:center;background-color:var(--panel-background);border-radius:16px;padding:0 16px;width:300px;border:1px solid var(--border-color);margin-bottom:20px}.search-box input{flex:1;background:#fff0;border:none;padding:12px 0;color:var(--text-primary);font-family:'Kanit',sans-serif;font-size:14px;outline:none}.search-box input::placeholder{color:var(--text-secondary)}.search-box i{color:var(--text-secondary);margin-right:8px}@media (max-width:768px){.summary-header{flex-direction:column;align-items:flex-start}.winning-numbers{flex-wrap:wrap;justify-content:center}.winner-cards{grid-template-columns:1fr}.search-box{width:100%}.winners-header{flex-direction:column;gap:16px;align-items:flex-start}.winners-tabs{display:none!important}}@media (max-width:480px){.winning-digit,.ticket-digit{width:30px;height:30px;font-size:16px}.prize-table{display:block;overflow-x:auto;white-space:nowrap}.pagination{gap:4px}.page-btn{width:36px;height:36px;font-size:14px}}
.page-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
        }
    .block-navigation {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .block-nav-card {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--card-background);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            padding: 12px;
            z-index: 90;
            border: 1px solid var(--border-color);
        }
        
        .block-nav-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background-color: var(--panel-background);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .block-nav-button:hover:not(:disabled) {
            background-color: rgba(118, 69, 217, 0.1);
            color: var(--primary-color);
        }
        
        .block-nav-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .block-nav-info {
            padding: 0 16px;
            text-align: center;
        }
        
        .current-block {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .block-position {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .back-button, .nav-button {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: var(--panel-background);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 8px 16px;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .back-button:hover, .nav-button:hover {
            background-color: rgba(118, 69, 217, 0.1);
            color: var(--primary-color);
        }

        .prev-block-btn {
            background-color: var(--panel-background);
            border: 1px solid var(--border-color);
        }

        .next-block-btn {
            background-color: var(--panel-background);
            border: 1px solid var(--border-color);
        }
       
            
            .filter-controls {
                flex-direction: column;
                align-items: stretch;
            }
            
           
         @media (max-width: 768px) {
        .page-title {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
         }
         
         .winners-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;

        }



.filter-group {
    display: flex;
    gap: 16px;
}

.filter-dropdown {
    position: relative;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
   
   
    cursor: pointer;
   
   
    transition: all 0.2s ease;
}


.filter-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
   
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
}

.filter-menu.show {
    display: block;
}

.filter-option {
    display: block;
    padding: 8px 12px;
   
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.filter-option:hover {
  
    cursor: pointer;
}

@media (max-width: 768px) {
    .winners-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .filter-group {
        width: 100%;
        justify-content: flex-end;
    }
}


.filter-controls {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}
.game-filter-buttons {
    display: flex
;
    gap: 10px;
    flex-wrap: wrap;
}
.game-filter-btn {
    padding: 8px 16px;
    background-color: var(--panel-background);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-primary);
    font-weight: 500;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.game-filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.game-filter-btn:hover {
    background-color: rgba(118, 69, 217, 0.1);
}