/*PASCAL*/
.pas-tabs{display:flex;gap:8px;margin:12px 0;line-height:1.1 !important;padding:10px 14px;justify-content:center}
.pas-tab{padding:10px 14px;border:1px solid #ddd;background:#f6f6f6;color:#333;text-decoration:none;border-radius:6px}
.pas-tab.active{background:#e90e05;color:#fff;border-color:#e90e05;font-weight:700}

.pas-title{background-image: linear-gradient(109deg, var(--brand-color), var(--sub-brand-color)) !important;color:#fff;padding:10px 12px;border-radius:8px;margin:10px 0;font-weight:800;text-align:center;line-height:1.1 !important}

.pas-form{padding:12px;box-sizing:border-box;}
.pas-form{display:flex;flex-direction:column;gap:12px;margin:12px 0;}
.pas-form label{display:block;margin:0 0 6px 2px;font-weight:800;color:#333;}
.pas-form select,.pas-form input{width:100%;max-width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:8px;box-sizing:border-box;}

.pas-btn{background-image: linear-gradient(109deg, var(--brand-color), var(--sub-brand-color)) !important;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-weight:800;cursor:pointer;line-height:1.1 !important}
.pas-btn:hover{opacity:.95}

.small-note{color:#444;font-size:14px;margin:6px 0 12px;text-align:center}

.pascal-wrap{margin:18px 0;display:flex;flex-direction:column;gap:18px;padding:0 0 10px 0  }
.pascal-box{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;text-align:center}
.pascal-subtitle{background-image: linear-gradient(109deg, var(--brand-color), var(--sub-brand-color)) !important;;color:#fff;border-radius:10px;padding:10px 12px;font-weight:600;margin:0 0 10px;line-height:1.1 !important}
.pas-line{margin:6px 0;font-size:15px}
.red{color:#d40000;font-weight:600}

.pascal-table{margin-top:8px}
.pascal-row{display:flex;justify-content:center;gap:8px;margin:6px 0}
.pascal-number{
  width:28px;height:28px;border-radius:999px;border:1px solid #d7a36a;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;color:#d40000;background:#fff;
}
.pascal-result{display:flex;justify-content:center;gap:12px;margin-top:10px}
.pascal-ball{
  min-width:40px;height:36px;padding:0 14px;border-radius:999px;border:1px solid #ddd;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;color:#d40000;background:#fff;
}
/* quick province buttons */
.provinces-wrap{display:flex;flex-direction:column;gap:12px;margin:8px 0 12px}
.provinces-title{font-weight:700;margin:0 0 6px}
.provinces-list{display:flex;flex-wrap:wrap;gap:8px}
.provinces-btn{display:inline-block;padding:8px 10px;border:1px solid #ddd;border-radius:8px;background:#f7f7f7;color:#222;text-decoration:none;line-height:1.1}
.provinces-btn:hover{background:#eee}
.provinces-btn.active{background:#e90e05;color:#fff;border-color:#e90e05;font-weight:700}
@media (max-width:600px){
  .provinces-list{gap:6px}
  .provinces-btn{width:100%;text-align:center}
}
 
 

/* stats tables */
.stat-title{background-image: linear-gradient(109deg, var(--brand-color), var(--sub-brand-color)) !important;color:#fff;padding:10px 12px;border-radius:8px;margin:5px 0 6px;font-weight:600;text-align:center;line-height:1.1 !important}
.stat-table{width:100%;border-collapse:collapse;background:#fff}
.stat-table th{background:#f2f2f2}
.stat-table th,.stat-table td{padding:8px;border:1px solid #e5e5e5;text-align:center}
.blue{color:#0b57d0;font-weight:600}

@media (max-width: 768px) {
.table-lotto td, .table-lotto th {
    border: 1px solid var(--border-color);
    padding: 1px;
    vertical-align: middle !important;
    text-align: center;
    border-collapse: collapse;
    height: 37px;
    font-weight: 500;
}
.txt-special-prize {
    font-size: 15px;
    color: var(--highlight-color);
    font-weight: 700;
    line-height: 1;
}
}



.filter-container {
    padding: 10px;
    background-color: #fff7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    border: 1px solid #f5c17b;
    flex-wrap: wrap; 
    overflow: hidden; 
    max-width: 100%; 
    box-sizing: border-box;
}
.form-check {
    display: flex;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    flex-wrap: wrap; 
}
.form-check input[type="radio"] {
    accent-color: red;
}
.number-filter {
    display: flex;
    gap: 5px;
    flex-wrap: wrap; 
}
.number-option {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #f89d3c;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    border: 1px solid white;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.number-option:hover {
    background-color: #ff5722;
    transform: scale(1.1);
}
.number-option.active {
    background-color: #ff5722;
    color: white;
    border-color: #ff5722;
}
@media screen and (max-width: 600px) {
    .filter-container {
     flex-direction: column;
     align-items: flex-start;
    }
    .number-filter {
       justify-content: center;
        width: 100%;
    }
}
span.highlighted {
	color: #fff;
	padding: 0px;
    margin: 6px 0;
    border-radius: 10px;
    font-weight: 400;
    background: #eb4f20;
}
.dropdown-list {
    display: none;
}
.dropdown-list.show-dropdown {
    display: block;
}


    #lottery-container {
        max-width: 100%;
        margin: 0px auto;
        text-align: center;
        overflow-x: auto;
        display: none; 
    }
    #results-container {
        max-width: 100%;
        margin: 0px auto;
        text-align: center;
        overflow-x: auto;
    }
    .lottery-table {
        width: 100%;
        border-collapse: collapse;
    }
    .number-flash {
        font-weight: bold;
        font-size: 18px;
        animation: flash 0.2s ease-in-out;
    }
    @keyframes flash {
        0% { opacity: 0.4; }
        100% { opacity: 1; }
    }
    .loading {
        color: transparent;
    }
    .loading::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        border-top-color: #007bff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .loadingio-spinner-spin-hgd29ahypuk {
        width: 20px;
        height: 20px;
        border: 3px solid #ccc;
        border-top-color: #007bff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: auto;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .countdown-text {
        font-size: 18px;
        color: #555;
    }    
	.temp-number {
        color: #f60;
    }
	
	
.lottery-number.highlighted {
    background-color: yellow;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
}

.form-check-inline { margin-right: 15px; display: inline-flex; align-items: center; }
.form-check-input { margin-right: 5px; }
.table-number-filter span{display:block;padding:2px}
button{display:flex;align-items:center;justify-content:center}		
		
.provinces-wrap{display:flex;flex-direction:column;gap:12px;margin:8px 0 12px}
.provinces-title{font-weight:700;margin:0 0 6px}
.provinces-list{display:flex;flex-wrap:wrap;gap:8px}
.provinces-btn{display:inline-block;padding:8px 10px;border:1px solid #ddd;border-radius:8px;background:#f7f7f7;color:#222;text-decoration:none;line-height:1.1}
.provinces-btn:hover{background:#eee}
@media (max-width:600px){
  .provinces-list{gap:6px}
  .provinces-btn{width:100%;text-align:center}
}


/*QA*/

        .muc {
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 10px;
        }

        .muc:last-child {
            border-bottom: none;
        }

        .hoi {
            padding: 5px 15px 5px 10px;
            cursor: pointer;
            position: relative;
            font-weight: 600;
            color: #333;
            transition: all 0.3s ease;
            user-select: none;
        }

        .hoi:hover {
            background: #f8f8f8;
        }

        .hoi::after {
            content: '›';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%) rotate(0deg);
            font-size: 28px;
            font-weight: 300;
            transition: transform 0.3s ease;
            color: #999;
        }

        .hoi.mo::after {
            transform: translateY(-50%) rotate(90deg);
        }

        .tl {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            padding: 0 20px;
            color: #666;
            line-height: 1.6;
        }

        .tl.mo {
            max-height: 500px;
            padding: 0 20px 20px 20px;
        }

        .tl p {
            margin-bottom: 10px;
        }

        .tl p:last-child {
            margin-bottom: 0;
        }	
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table thead th {
    background: #f0f8ff;
    font-size: 14px;
    font-weight: 500;
}
table td, table th {
    padding: 3px;
    border: 1px solid #dddfe2;
}	

.xs-today-list{
    margin:0;
    padding-left:0;
    list-style:none;
}

.xs-today-list li{
    margin:2px 0;
    position:relative;
    padding-left:18px;
}

.xs-today-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    width:12px;
    height:12px;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
}


.xs-today-list a{
    font-weight:500;
    text-decoration:none;
}