.tonghop-wrap {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.tonghop-box {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.tonghop-title {
font-weight: bold;
margin-bottom: 5px;
font-size: 25px;
}
.tonghop-dai {
color: #5e9783ff;
}
.tonghop-box .col-md-6:first-child .tonghop-list {
background-color: #fff;
}
.tonghop-box .col-md-6:last-child .tonghop-list {
background-color: #f9f9f9;
}
.so-box {
display: inline-block;
position: relative;
margin: 3px;
}
.so-trung-2so {
background-color: #baf8edff;
border-radius: 30px;
}
.so-trung-3so {
background-color: #baf8edff;
border-radius: 30px;
}  
.so-2so.so-giai8 {
color: #ff0000ff !important;
font-size: 17px;
text-decoration: underline;
text-decoration-color: #000000ff;
text-underline-offset: 4px;
text-decoration-thickness: 1px; 
}
.so-2so.so-giaidb {
color: #ff0000ff !important;
font-size: 21px;
text-decoration: underline;
text-decoration-color: #c800ffff;
text-underline-offset: 4px; 
text-decoration-thickness: 3px; 
}
.so-3so.so-giai7 {
color: #ff0000ff !important;
font-size: 17px;
text-decoration: underline;
text-decoration-color: #000000ff;
text-underline-offset: 4px; 
text-decoration-thickness: 1px; 
}
.so-3so.so-giaidb {
color: #ff0000ff !important;
font-size: 21px;
text-decoration: underline;
text-decoration-color: #c800ffff;
text-underline-offset: 4px; 
text-decoration-thickness: 3px; 
}
.so-first.so-3so.so-giai4 {color: #f93131ff;}
.so-3so.so-giai6 {color: #f93131ff;}
.so-3so.so-giai5 {color: #f93131ff;}
/* ================= THEMES ================= */
/* Theme default */
body.theme-default {
background: #fff;
}
body.theme-default .card {
background-color: #fff;
color: #0000ccff;
font-size: 18px;
padding: 4px 8px;
border: 1px solid #000;
border-radius: 6px; 
} 
body.theme-default .card-header {
background: #f5f5f5;
color: #ff0000;
font-size: 18px;
letter-spacing: 1.5px;
}

body.theme-default .kq-box .table-responsive {
    width: 100%;
}

  

body.theme-default .o-giai{
background: #fff;
color:#000;
font-size:1rem ;
letter-spacing: 1.5px;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
width: 12px;
}  
body.theme-default .so-giai {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
body.theme-default .kq-box table thead th {
background-color: #f5f5f5;
color: #000;
font-size: 15px;

}  
body.theme-default .kq-box table tbody td:first-child {
background-color: #f5f5f5;
color: #000;
font-weight: bold;
text-align: center;
width: 60px;
text-transform: uppercase;
font-size: 15px;
vertical-align: middle;
} 
body.theme-default .o-giai.giai-db .so-giai,
body.theme-default .o-giai.giai-8 .so-giai {


color: #ff0055;
}
body.theme-default .o-giai.giai-7 .so-giai {


color: #ff0000;
}
/* Theme pinkgreen */
body.theme-pinkgreen {
background: #000;
}
body.theme-pinkgreen .card {
background-color: #000;
color: #0000ccff;
font-size: 18px;
font-family: Arial;
padding: 4px 8px;
border: 1px solid #11ff00ff;
border-radius: 6px; 
} 
body.theme-pinkgreen .card-header {
background: #000;
color: #fbd100ff;
font-size: 18px;
letter-spacing: 1.5px;
}
body.theme-pinkgreen .o-giai {
background: #000;
color:#ffcc00;

font-size: 1rem ;
letter-spacing: 1.5px; 
}  
body.theme-pinkgreen .kq-box table thead th {
background-color: #000;
color: #00cc66;
font-size: 15px;
}  
body.theme-pinkgreen .kq-box table tbody td:first-child {
background-color: #000;
color: #00cc66;
font-weight: bold;
text-align: center;
width: 60px;
text-transform: uppercase;
font-size: 15px;
vertical-align: middle;
} 

body.theme-pinkgreen .so-giai {
font-weight: bold;
}
body.theme-pinkgreen .ten-dai{color: #00cc66;}
body.theme-pinkgreen .jj {color: #ffcc00;}
body.theme-pinkgreen .kk {color: #00cc66;}
/**/
@media (min-width: 1920px) and (max-width: 3840px) {
.card-header{
font-size: 1.5rem !important;
}
.o-giai{
font-size: 1.5rem !important;
padding:15px 0px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 20px !important;}
.kq-box table tbody td:first-child {
font-size: 20px !important; width: 10% !important;}

.so-giai{
font-size: 2.8rem ;
letter-spacing: 1px;
line-height: 40px !important;
}

.o-giai.giai-8 .so-giai { font-size: 3.5rem ;}
.o-giai.giai-7 .so-giai { font-size: 3rem ;}
.o-giai.giai-db .so-giai { font-size: 3rem ; letter-spacing: 0.5px;}

}
@media (min-width: 1280px) and (max-width: 1919px) {
.card-header{
font-size: 1.5rem !important;
}
.o-giai{
font-size: 1.5rem !important;
padding:15px 0px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 20px !important;}
.kq-box table tbody td:first-child {
font-size: 20px !important; width: 10% !important;}

.so-giai{
font-size: 2rem ;
letter-spacing: 1px;
line-height: 29px !important;
}

.o-giai.giai-8 .so-giai { font-size: 2.6rem ;}
.o-giai.giai-7 .so-giai { font-size: 2.2rem ;}
.o-giai.giai-db .so-giai { font-size: 2.2rem ; letter-spacing: 0.5px;}

}
/**/
@media (min-width: 1024px) and (max-width: 1279px) {
.card-header{
font-size: 1.1rem !important;
}
.o-giai{
font-size: 1.1rem !important;
padding:7px 0px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 15px !important;}
.kq-box table tbody td:first-child {
font-size: 15px !important; width: 10% !important;}

.so-giai{
font-size: 2rem ;
letter-spacing: 1px;
line-height: 30px !important;
}

.o-giai.giai-8 .so-giai { font-size: 2.6rem ;}
.o-giai.giai-7 .so-giai { font-size: 2.2rem ;}
.o-giai.giai-db .so-giai { font-size: 2.2rem ; letter-spacing: 0.5px;}

}
/**/
@media (min-width: 768px) and (max-width: 1023px) {
.card-header{
font-size: 1.1rem !important;
}
.o-giai{
font-size: 1.1rem !important;
padding:7px 0px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 15px !important;}
.kq-box table tbody td:first-child {
font-size: 15px !important; width: 10% !important;}

.so-giai{
font-size: 1.8rem ;
letter-spacing: 1px;
line-height: 26px !important;
}

.o-giai.giai-8 .so-giai { font-size: 2.4rem ;}
.o-giai.giai-7 .so-giai { font-size: 2rem ;}
.o-giai.giai-db .so-giai { font-size: 2rem ; letter-spacing: 0.5px;}

}
/**/
@media (min-width: 576px) and (max-width: 767px) {
.card-header{
font-size: 1rem !important;
}
.o-giai{
font-size: 1rem !important;
padding:5px 0px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 11px !important;}
.kq-box table tbody td:first-child {
font-size: 11px !important; width: 10% !important;}

.so-giai{
font-size: 1.6rem ;
letter-spacing: 1px;
line-height: 26px !important;
}

.o-giai.giai-8 .so-giai { font-size: 2.1rem ;}
.o-giai.giai-7 .so-giai { font-size: 1.7rem ;}
.o-giai.giai-db .so-giai { font-size: 1.7rem ; letter-spacing: 0.5px;}

}
/**/
@media (min-width: 451px) and (max-width: 575px) {
.card-header{
font-size: 0.9rem !important;
}
.o-giai{
font-size: 1rem !important;
padding:5px 0px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 10px !important;}
.kq-box table tbody td:first-child {
font-size: 10px !important; width: 9% !important;}

.so-giai{
font-size: 1.4rem ;
letter-spacing: 1px;
line-height: 24px !important;
}

.o-giai.giai-8 .so-giai { font-size: 1.9rem ;}
.o-giai.giai-7 .so-giai { font-size: 1.5rem ;}
.o-giai.giai-db .so-giai { font-size: 1.4rem ; letter-spacing: 0.2px;}

}
/**/
@media (min-width: 401px) and (max-width: 450px) {
.card-header{
font-size: 0.7rem !important;
}
.o-giai{
font-size: 0.7rem !important;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 10px !important;}
.kq-box table tbody td:first-child {
font-size: 9px !important; width: 4% !important;}

.so-giai{
font-size: 1.3rem ;
letter-spacing: 0.2px;
line-height: 22px !important;
}

.o-giai.giai-8 .so-giai { font-size: 1.8rem ;}
.o-giai.giai-7 .so-giai { font-size: 1.4rem ;}
.o-giai.giai-db .so-giai { font-size: 1.35rem ; letter-spacing: 0px;}

}
/**/
@media (min-width: 375px) and (max-width: 400px) {
.card-header{
font-size: 0.7rem !important;
}
.o-giai{
font-size: 0.9rem !important;
padding-top: 5px;     
padding-bottom: 5px;
line-height: 1px !important;
}

.kq-box table thead th {
font-size: 8px !important;}
.kq-box table tbody td:first-child {
font-size: 8px !important; width: 9% !important;}

.so-giai{
font-size: 1.1rem ;
min-width: 7px;
line-height: 18px !important;
}

.o-giai.giai-8 .so-giai { font-size: 1.5rem ;}
.o-giai.giai-7 .so-giai { font-size: 1.2rem ;}
.o-giai.giai-db .so-giai { font-size: 1.2rem ; letter-spacing: 0.3px;}

}
/**/
@media (min-width: 320px) and (max-width: 374px) {
.card-header{
font-size: 0.6rem !important;
}
.o-giai{
font-size: 0.7rem !important;
padding-top: 5px;    
padding-bottom: 5px;
line-height: 0.8px !important;
}

.kq-box table thead th {
font-size: 7px !important;}
.kq-box table tbody td:first-child {
font-size: 7px !important; width: 8% !important;}

.so-giai{
font-size: 0.8rem ;
min-width: 6px;
line-height: 16px !important;
}

.o-giai.giai-8 .so-giai { font-size: 1.2rem ;}
.o-giai.giai-7 .so-giai { font-size: 0.9rem ;}
.o-giai.giai-db .so-giai { font-size: 0.9rem ;letter-spacing: 0.2px; }

}
/**/
/*  */
@media (min-width: 320px) and (max-width: 767px) {
.tonghop-wrap {
flex-direction: row;
gap: 1px;
}

.tonghop-box {
flex: 1 1 100%;
font-size: 12px;
padding: 1px;
}

.tonghop-title {
font-size: 10px;
}

.so-box {
display: inline-block;
margin: 2px;
}

.so-2so.so-giai8, .so-3so.so-giai7 {
font-size: 14px;
}

.so-2so.so-giaidb, .so-3so.so-giaidb {
font-size: 16px ;

}
}