.specialNumber {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 10px;
    }

    .circle {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ff0000;
        color: #ffffff;
        font-weight: bold;
        font-size: 18px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        margin:5px;
    }
    .circle:last-child {
        background-color: #0065b6;
    }
    .ResultOfLottery {
        padding:10px;
        text-align: center;
        border-radius: 5px;
        background: linear-gradient(0deg, #fff 27.99%, #f9f9fa 32.73%, #eaf8fd 72.15%, #fbf7f7 99.12%);
        box-shadow: 5px 5px 5px #00000026;
        margin:0px 0 20px 0;
    }
    .award {
        padding: 5px 20px;
        color: #ff0000;
        font-weight: 600;
        letter-spacing:1.5px;
        text-transform: uppercase;
        font-size: 18px;
        border-bottom: 2px solid #104d8d;
        display: block;
        width: 300px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .date {
        font-size: 16px;
        font-weight: 700;
        color:#323232;
    }
    .linkPage a, .linkResult a{
        padding: 5px 10px;
        background:#114d8d;
        color: white;
        display: block;
        font-weight: 600;
        letter-spacing:0.5px;
        width: 180px;
        border-radius: 5px;
        text-transform: uppercase;
        margin: 0 auto;
        margin-bottom: 10px;
        font-size: 12px;
        margin-top: 10px;
    }
    .linkPage a:hover, .linkResult a:hover{
        background:#000000a8;
        font-size:15px;
    }
    .circle-number {
        border: 1px solid;
        padding: 5px 20px;
        color: #fffdfd;
        font-weight: 600;
        font-size: 16px;
        align-content: center;
        background: red;
        letter-spacing: 8px;
        padding-left: 28px;
    }
    .number{
        display:flex;
        flex-direction:column;
    }
    .single{
        flex-direction:row!important;
        flex-wrap:nowrap;
    }


/*--------------------------------------*/
  :root{
    --brand:#0b8cc9;
    --text:#0f172a;
    --muted:#6b7280;
    --border:#e6eef3;
    --chip:#f7fbff;
    --bgwhite:#fff;
    --radius:12px;
  }

  .Content{padding: 10px 0;color:var(--text);}
  .top-row{ display:grid; grid-template-columns:1fr; gap:12px 16px; margin-bottom:10px; }

  .selectdate{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:10px 14px;
    flex-wrap:wrap;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:10px 12px;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
  }
  .selectdate .date{ font-weight:600; color:var(--text); margin-right:4px; }

  .datepicker{
    display:inline-flex;
    align-items:center;
    /* width: 100%; */
    gap:8px;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
  }

  .image-link-card{
    margin-left:auto;                 
    display:inline-flex; gap:8px; align-items:center;
    background:var(--chip); border:1px solid var(--border);
    border-radius:999px; padding:6px 10px;
  }
  .image-link-card .label{ font-weight:600; color:var(--text); }
  .image-link-card a{ text-decoration:none; font-weight:700; color:var(--brand); }
  .image-link-card a:hover{ text-decoration:underline; }

  .board-and-side{
    /* display:grid; */
    grid-template-columns:1fr 260px;
    gap:16px;
    /* align-items:start; */
  }
  .board{ min-width:0; }
  .side{ min-height:40px;    width: 51vw !important; }

  .pdf-row{
    margin-top:12px; padding:10px 12px; border:1px dashed var(--border);
    border-radius:10px; background:#fff; color:var(--muted);
  }
  .pdf-row strong{ color:var(--text); }

  @media (max-width:900px){ .board-and-side{ grid-template-columns:1fr; } .image-link-card{ margin-left:0; } }

  .popup-overlay{
    display:none; position:fixed; left:0; top:0; right:0; bottom:0;
    background:rgba(0,0,0,.6); align-items:center; justify-content:center; z-index:9999;
  }
  .popup-overlay img{
    max-width:95%; max-height:95%;
    box-shadow:0 8px 30px rgba(0,0,0,.4); border-radius:8px;
  }

  .sizef{ font-size:23px; }
  .lottery-container{width: 100%;display:flex;justify-content:center;/* padding:8px 10px; */}
  #lottery-board{
    width: 100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--bgwhite);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
  }
     #lottery-board th.col-info{
            display:flex;
            flex-direction:row;
            justify-content:space-between;
          }
  #lottery-board th, #lottery-board td{ border:0; }
  .board-head th{
    background:var(--brand); color:#fff; padding:10px 12px; font-weight:700;
    border-right:1px solid rgba(255,255,255,.25);
  }
  .board-head th:last-child{ border-right:0; }
  .col-label{ width:26%; }
  .head-grid{ display:flex; justify-content:center; align-items:center; font-weight:700; }

  #lottery-board td{
    background:#fff; padding:14px 10px; border-bottom:1px solid var(--border); text-align:center;
  }
  table td .sizef{
    font-size: 23px;
  }
table td .row{
   display:flex;
   flex-direction:row;
  }
	table td .row .row-item-3{
   width:calc(100%/3)!important;
  }
table td .row .row-item-2{
   width:calc(100%/2)!important;
  }

  #lottery-board tr:last-child td{ border-bottom:0; }
  #lottery-board td:first-child{
    background:#f7fbff; font-weight:700; font-size:25px; width:26%; border-right:1px solid var(--border);
    text-align:left; padding-left:14px;
  }
  #lottery-board td span{font-weight:800;font-size: 35px;letter-spacing:.6px;display:inline-block;}
  .row-8 td span, .row-db td span{ color:#e30613; }
  .loading{ color:var(--muted); font-style:italic; }
  .special{ font-size:26px; }


  .g4-wrapper{ padding:0 !important; }
  .g4-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 12px; padding:4px 6px; }
  .g4-item{ display:flex; justify-content:center; align-items:center; min-height:40px; font-weight:800; font-size:24px; }
  .g4-last{ grid-column:2 / span 1; }

  #lottery-board td .kq-center{
    display:flex; justify-content:center; align-items:center; width:100%; min-height:40px; text-align:center;
  }

  .spinner{ width:18px; height:18px; opacity:.8; }

@media (max-width: 480px){

  .board-and-side{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .side{ display: none !important; }

  .lottery-container{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  #lottery-board{
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border: 2px solid #0b8cc9 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
    box-sizing: border-box !important;
  }

  .board-head th{
    background: #0b8cc9 !important;
    color: #fff !important;
    padding: 10px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-align: center !important;
    border-right: 1px solid rgba(255,255,255,.25) !important;
  }
  .board-head th:last-child{ border-right: 0 !important; }
  .board-head th:first-child{ width: 40% !important; } 

  #lottery-board th, 
  #lottery-board td{
    border: 1px solid #dbe7ef !important;
  }

  #lottery-board td{
    background: #fff !important;
    padding: 10px 8px !important;
    text-align: center !important;
  }
  #lottery-board tr:last-child td{ border-bottom: 0 !important; }

  #lottery-board td:first-child{
    background: #f7fbff !important;
    font-weight: 800 !important;
    text-align: center !important;
    padding-left: 12px !important;
  }

  #lottery-board td span,
  .g4-item{
    display: inline-block !important;
    font-weight: 900 !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    letter-spacing: .6px !important;
    line-height: 1.15 !important;
    padding: 2px 4px !important;
  }

  .row-8 td span,
  .row-db td span{
    color: #e30613 !important;
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  .g4-wrapper{ padding: 0 !important; }
  .g4-grid{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px 8px !important;
    padding: 6px !important;
  }
  .g4-item{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 36px !important;
  }
  .g4-last{ grid-column: 2 / span 1 !important; }

  #lottery-board td .kq-center{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 36px !important;
    text-align: center !important;
  }
  .selectdate{ padding:10px !important; gap:8px 10px !important; }
  .image-link-card{
    width: 100% !important; 
    justify-content: space-between !important;
    border-radius: 12px !important; 
    margin-left: 0 !important;
  }
}


@media (min-width: 481px) and (max-width: 768px){
  #lottery-board{ max-width: 520px; }
  #lottery-board td span{ font-size: clamp(18px, 3.6vw, 24px); }
  .row-db td span{ font-size: clamp(20px, 4.2vw, 26px); }
}
@media (max-width:  768px){
  .Content{padding: 10px;}

  .Content table tr{
    display:flex;
  }
  .Content table td.sizef{
    width:100px!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width:100px!important;
  }
  .Content table th:first-child{
    width:100px!important;
    max-width:100px!important;
    min-width:100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
   .Content table th{
     width:100%;
  }
  .Content table th>span, td.sizef, .sizef >span {
    font-size:14px!important;
  }
  #lottery-board th.col-info{
            flex-direction: column;
  }
}