.xskeno{border:1px solid #e0cbab;border-radius:5px;margin-bottom:20px;padding-bottom:10px;}
.xskeno .title{margin-bottom:5px;padding:5px 0;color:#000000;text-align:center;}
.xskeno .title a{color:#860f0f;}
.xskeno .title a:hover{color:#CF9035;}
.xskeno .title .row{padding:0 10px;font-size:16px;color:#000;}
.xskeno .subtitle{font-size:16px;color:#000;}
.xskeno .kyve{color:#d00e00;}
.xskeno .ngay{color:#d00e00;}
.xskeno .result{text-align:center;margin:0 auto;}
.xskeno .row{display:inline-block;}
.xskeno .option{display:inline-block;width:100%;margin:10px 0;text-align:center;}
.xskeno .option > div{width:50%;display:inline-block;float:left;}
.xskeno .option .o1{border-radius:5px 0 0 5px;display:inline-block;min-width:60px;text-align:left;padding:5px;border:1px solid #ffdcb3;background:linear-gradient(to bottom, #fff5e9 5%, #ffe5c5 100%);background-color:#ffe5c5;}
.xskeno .option .o2{border-radius:0 5px 5px 0;display:inline-block;min-width:55px;text-align:right;padding:5px;margin-left:20px;border:1px solid #ffdcb3;background:linear-gradient(to bottom, #fff5e9 5%, #ffe5c5 100%);background-color:#ffe5c5;}
.xskeno .option span.okq{display:inline-block;height:40px;width:40px;line-height:40px;margin:-5px -10px;z-index:1;position:absolute;border-radius:20px;font-size:14px;font-weight:bold;text-align:center;border:1px solid #ffa130;background:linear-gradient(to bottom, #ffd297 5%, #ffbf6c 100%);background-color:#ffc477;}
.xskeno .result .kq{width:40px;height:40px;border-radius:50%;display:inline-block;margin:3px 3px;font-size:26px;line-height:40px;text-align:center;font-weight:600;border:1px solid #c16900;background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);background-color:#ffc477;text-shadow:1px 1px #ffffff;}
@media (max-width:500px){
.xskeno .result .kq{width:36px;height:36px;line-height:36px;font-size:28px;margin:3px 1px;}
}
@media (max-width:450px){
.xskeno .result .kq{width:36px;height:36px;line-height:36px;font-size:26px;margin:3px 1px;}
}
@media (max-width:413px){
.xskeno .result .kq{width:34px;height:34px;line-height:34px;font-size:26px;margin:3px 1px;}
}
@media (max-width:392px){
.xskeno .result .kq{width:32px;height:32px;line-height:32px;font-size:26px;margin:3px 1px;}
}
@media (max-width:375px){
.xskeno .result .kq{width:30px;height:30px;line-height:30px;font-size:22px;margin:3px 1px;}
}
.xskeno{background-color:#fff9f2;border:1px solid #e9d6c0;color:#000;}
.xskeno .title a,.xskeno .title,.xskeno .kyve,.xskeno .ngay{color:#a91000;}
.xskeno .title .row{padding:0 10px;font-size:16px;}



.bingo18 {
    width: 100%;
    font-family: Arial, sans-serif;
}

.bingo18 .bingo-table {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.bingo18 .bingo-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.bingo18 .bingo-row:last-child {
    border-bottom: none;
}

.bingo18 .bingo-head {
    background: #f68b1f;
    color: #fff;
    font-weight: bold;
}

.bingo18 .col {
    padding: 10px 12px;
    font-size: 14px;
}

.bingo18 .col.date {
    width: 25%;
}

.bingo18 .col.result {
    width: 35%;
    display: flex;
    gap: 8px;
}

.bingo18 .col.total {
    width: 15%;
    text-align: center;
}

.bingo18 .col.type {
    width: 25%;
    text-align: center;
    font-weight: 600;
}

.bingo18 .day {
    display: block;
}

.bingo18 .code {
    color: #0a58ca;
    font-size: 13px;
    text-decoration: none;
}

.bingo18 .ball {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid red;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.bingo18 .type.hòa {
    color: #0a58ca;
}

.bingo18 .type.nhỏ {
    color: #198754;
}

.bingo18 .type.lớn {
    color: #dc3545;
}




.keno-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* QUAN TRỌNG */
    border: 1px solid #eee;
	background-color: #fff;
}

.keno-table th,
.keno-table td {
    border-bottom: 1px solid #e5e5e5;
    padding: 8px;
    font-size: 14px;
    vertical-align: top;
}

/* header */
.keno-table thead th {
    background: #f68b1f;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

/* cột nhỏ */
.keno-table .date,
.keno-table .chanle,
.keno-table .lonnho {
    width: 50px;
    text-align: center;
    white-space: nowrap;
}
.keno-table .date {
    width: 75px;
} 

/* result full còn lại */
.keno-table .result2 {
    width: auto;
}

/* text */
.keno .day {
    display: block;
}

.keno .code {
    font-size: 12px;
    color: #ff7a00;
}

/* balls */
.keno .balls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.keno .ball {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    background: #fff;
}

/* màu */
.keno .chan { color: #0a58ca; }
.keno .le   { color: #ff7a00; }

.keno .lon  { color: #dc3545; }
.keno .nho  { color: #198754; }
.keno .hoa  { color: #0a58ca; }

.keno span {
    font-size: 12px;
    font-weight: normal;
}






.xsmax3d{border:1px solid #edd0e6;border-radius:5px;padding:5px;margin-bottom:10px;}
.xsmax3d .title{margin-bottom:5px;padding:5px 0;text-align:center;min-height:70px;}
.xsmax3d .subtitle {
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 10px;
    display: block;
}
table.table_max3d {
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}
.max3d_number .kq{font-size:28px;line-height:30px;font-weight:600;}
.max3d_number .kq{width:50%;float:left;display:inline-block;text-align:center;padding:1px 0;min-height:30px;}
.giaiMax3d{font-size:20px;}
@media (max-width:450px){
.xsmax3d .title{margin-bottom:5px;padding:5px 0;}
}
.xsmax3d {
    background-color: #fff;
	    padding-top: 15px;
    border: 1px solid #dee2e6;
}
.xsmax3d  h2.title a {
    color: #d0021b;
    font-weight: bold;
}


.table-result{text-align:center;font-family:arial;padding:0 15px;}
#cau-overview td{   width: 9%;}
.table-result td,.table-result th{border:1px solid #ababab;}
.table-result thead th{background-color:#f0f8ff;font-weight:500;}
.table-result th{font-weight:normal;}
.table-xsdt th{font-weight:normal;font-size:14px;text-align:left;background:#f0f8ff;padding:8px;}
.table-xsdt td{font-size:22px;text-align:center;font-weight:bold;padding:3px;}
.table-result th a{text-decoration:underline;}


div#cau-data-div {
    background-color: #fff;
}
.soicau-active {
    background-color: #dc3545 !important; /* Màu đỏ */
    color: #fff !important;
    border-radius: 50%; /* Bo tròn */
    display: inline-block;
    width: 25px; /* Cố định kích thước cho tròn đẹp */
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.8);
    transition: all 0.2s;
position: relative; 
    z-index: 20;
}
.btn-picked {
    background-color: #007bff !important; /* Màu xanh dương nổi bật */
    color: #fff !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
.btn-picked span {
    color: #fff !important;
}
.loto-active {
    background-color: #ffc107 !important;
    color: #000 !important;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px 5px;
    border: 1px solid #d39e00;
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.8);
}
#cau-details .giai_db,
#cau-details .red {
    color: red;
    font-size: 120%;
    font-weight: bold;
}
#cau-details .giai_db {
    font-size: 150%;
} 
#cau-details sup.c_red {
    font-size: 11px !important;
    color: red;
    font-weight: bold;
}
.border-bottom{border-bottom:1px solid #dee2e6!important;}
.border-left{border-left:1px solid #dee2e6!important;}

.kq-bg-dark {
    background-color: #efefef;
}

/* Đặt relative cho cột chứa bảng để đường kẻ lấy mốc tọa độ từ đây */
.col-sm-9 {
    position: relative !important; 
}

/* Style cho đường kẻ đỏ */
.connection-line {
    position: absolute;
    height: 3px; /* Độ dày của đường kẻ */
    background-color: #ffc107 ; /* Màu đỏ */
    transform-origin: 0 50%; /* Xoay từ đầu mút bên trái */
    z-index: 10; /* Nằm đè lên bảng */
    pointer-events: none; /* Để chuột bấm xuyên qua được, không bị che nút */
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.5); /* Hiệu ứng phát sáng nhẹ */
    opacity: 0.8;
	z-index: 10;
}


.s_giai {
    display: flex;
    justify-content: center;
    align-items: center;
	flex-wrap: wrap !important;
}
.s_giai.s_4 .text-number,
.s_giai.s_7 .text-number {
    width: 25%;
}
.s_giai.s_2 .text-number {
    width: 50%;
}
.s_giai.s_6 .text-number,
.s_giai.s_3 .text-number {
    width: 33.33%;
}

.s_giai.s_2 > div:first-child {
    border-right: 1px solid #dee2e6;
}
.s_giai.s_6 > div:first-child,
.s_giai.s_6 > div:nth-child(2),
.s_giai.s_7 > div:nth-child(1),
.s_giai.s_7 > div:nth-child(2),
.s_giai.s_7 > div:nth-child(3) {
    border-right: 1px solid #dee2e6;
	    border-bottom: 1px solid #dee2e6;
}
.s_giai.s_7 > div:nth-child(4),
.s_giai.s_6 > div:nth-child(3) {
	    border-bottom: 1px solid #dee2e6;
}
.s_giai.s_7 > div:nth-child(5),
.s_giai.s_7 > div:nth-child(6),
.s_giai.s_6 > div:nth-child(4),
.s_giai.s_6 > div:nth-child(5) {
    border-right: 1px solid #dee2e6;
}
.s_giai.s_3 > div:nth-child(1),
.s_giai.s_3 > div:nth-child(2),
.s_giai.s_4 > div:nth-child(1),
.s_giai.s_4 > div:nth-child(2),
.s_giai.s_4 > div:nth-child(3) {
    border-right: 1px solid #dee2e6;
}


.table_soicau td .text-number {
    padding: 10px;
    font-weight: bold;
}


.hide {
	display:none !Important;
}
div#cau-selector-container {
    display: inline-block;
    min-width: 180px;
}
p#cau-positions-phrase {
    display: inline;
}

.table_soicau td {
    padding: 0px;
}

.num-active {
    font-size: 130%;
    color: orange;
    z-index: 22;
    position: relative;
}







    /* CSS Control Bar */
    .control-panel {
        background: #f8f9fa;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    .zoom-buttons .btn-zoom {
        margin: 0 2px;
        font-size: 12px;
        padding: 4px 8px;
    }
    .btn-zoom.active {
        background-color: #17a2b8;
        color: white;
        border-color: #17a2b8;
    }
    .display-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }
    .display-options label {
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        margin-bottom: 0;
    }

    /* CSS Table */
    .table-weekly th {
        background-color: #dc3545;
        color: white;
        text-align: center;
        vertical-align: middle;
        text-transform: uppercase;
        font-size: 13px;
        border: 1px solid #fff;
    }
    .table-weekly td {
        text-align: center;
        vertical-align: top;
        border: 1px solid #ddd;
        padding: 5px !important;
        background: #fff;
        /* Base font size */
        font-size: 14px; 
    }
    
    /* Cell Components */
    .cell-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 30px;
    }
    
    .view-ngay {
        font-size: 0.8em;
        color: #666;
        margin-bottom: 2px;
    }
    
    /* Số đặc biệt */
    .special-number {
        font-size: 1.4em; /* Relative to cell font-size */
        font-weight: bold;
        color: #333;
        margin: 2px 0;
        letter-spacing: 1px;
    }
    .special-number .last-two {
        color: #dc3545; /* Đỏ */
        font-weight: 800;
    }

    /* Chỉ số thống kê */
    .stat-line {
        font-size: 0.85em;
        line-height: 1.3;
        color: #333;
        font-weight: 600;
    }
    .stat-label {
        color: #777;
        font-weight: normal;
        font-size: 0.9em;
        display: none; /* Ẩn label text để gọn */
    }

    /* Highlight */
    .current-day { background-color: #fff3cd !important; }
    .weekend { background-color: #fcf8e3; }
    .empty-cell { background-color: #f2f2f2; }




  .table-selector th { font-size: 13px; color: #555; vertical-align: middle; }
                .clickable-header:hover { background-color: #e2e6ea; color: #007bff; }
                
                .num-cell {
                    cursor: pointer; padding: 8px 0; font-weight: bold;
                    background: #fff; transition: all 0.1s;
                }
                .num-cell:hover { background: #f1f1f1; }
                .num-cell.selected {
                    background-color: #007bff; color: #fff;
                }

                /* Matrix Table Styles */
                .table-matrix th {
                    background: #444; color: #fff;
                    position: sticky; top: 0; z-index: 10;
                    vertical-align: middle !important;
                    font-size: 12px; line-height: 1.2;
                }
                .table-matrix td {
                    vertical-align: middle; padding: 0 !important;
                    height: 25px; min-width: 25px;
                    font-size: 12px;
                }
                
                /* Sticky Column (Cột đầu tiên bên trái) */
                .table-matrix .sticky-col {
                    position: sticky; left: 0; z-index: 11;
                    background: #eee; border-right: 2px solid #ccc;
                    width: 50px; min-width: 50px;
                }
                .table-matrix .sticky-corner {
                    z-index: 12; background: #00796b; /* Góc trên cùng bên trái */
                }

                /* Trạng thái Hit/Miss */
.table-matrix td.hit {
    background-color: #fff;
    color: #155724;
    font-weight: bold;
}
.table-bordered.table-matrix  td, .table-bordered.table-matrix  th {
    border: 1px solid #999;
}
                .table-matrix td.miss { background-color: #ccc; }
                
                /* Hover Effect */
                .table-matrix tbody tr:hover td { background-color: #444; }
                .table-matrix tbody tr:hover td.hit { background-color: #efefef; }