textarea:focus {border-color: #dc0708;}
/* Định dạng cơ bản cho container của plugin */
.taodanxoso h2, .taodandacbietv2 h2, .ghepxien h2, .ghepdandacbiet h2, .laydannhanh h2,.taodan3d4d h2  {
    margin-bottom: 0;
    text-align: center;    text-transform: uppercase;
}
.taodanxoso, .taodandacbietv2, .ghepxien, .ghepdandacbiet, .laydannhanh, .taodan3d4d {
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.taodanxoso form, .taodandacbietv2, .ghepxien, .ghepdandacbiet, .ghepdandacbiet .cot1, .taodan3d4d, .taodan3d4d .cot1  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.taodanxoso .cot1, .taodanxoso .cot2, .taodandacbietv2 .cot1, .taodandacbietv2 .cot2, .ghepxien .cot1, .ghepxien .cot2, .ghepdandacbiet .cot1, .ghepdandacbiet .cot2, .ghepdandacbiet .cot11, .ghepdandacbiet .cot12,
.taodan3d4d .cot1, .taodan3d4d .cot2, .taodan3d4d .cot11, .taodan3d4d .cot12, .taodan3d4d .cot13
{width:49%}
.taodandacbietv2 .kieu1 {display:flex;gap: 5px;}
/* Định dạng cột */
.taodanxoso .box-input {
    text-align: center;
    width: 36px;
    margin-right: 2px;
    line-height: 19px;
    font-size: 18px;
    padding: 8px 12px;
    font-weight: bold;
    border-radius: 8px;
    box-sizing: content-box;
}
.taodandacbietv2 #dau, .taodandacbietv2 #duoi, .taodandacbietv2 #tong, .taodandacbietv2 #cham {min-height: 75px;}
.taodandacbietv2 #kqtaodandacbietv2, #nhapghepxien, #kqghepxien, #kqghepdandacbiet, #ghepdandacbiet_dan1, #ghepdandacbiet_dan2, .tms-txt-area, .dan-2d-txt-area-right
	{min-height:190px}
.taodandacbietv2 #kqtaodandacbietv2, #kqghepxien, #kqghepdandacbiet, #ghepdandacbiet_dan1, #ghepdandacbiet_dan2,#nhapghepxien, .tms-txt-area, .dan-3d-txt-area-half, .dan-3d-txt-area, .dan-2d-txt-area-right
	{border-radius: 8px;padding: 6px;width: 100%;margin-top: 5px;}
.dan-3d-txt-area-half {min-height:70px}
.dan-3d-txt-area {min-height:160px}
.title-group-top, .tms-box-button-group {
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/* Định dạng cho các nút */
.taodanxoso .btn3d, .taodandacbietv2 .btn3d, .ghepxien .btn3d, .ghepdandacbiet .btn3d, .taodan3d4d .btn3d {
    padding: 10px;
    font-weight: bold;
    color: #fff;
    border-radius: 8px;
    background-color: #dc0708;
    margin:2px;
    border: 0;
}

.taodanxoso .btn3d:hover, .taodandacbietv2 .btn3d:hover, .ghepxien .btn3d:hover, .ghepdandacbiet .btn3d:hover, .taodan3d4d .btn3d:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn3d:active {
    transform: scale(0.95);
}

/* Định dạng cho tiêu đề Dàn số */

.tms-txt-area::placeholder {
    color: #aaa;
}

/* Định dạng khi sử dụng trên màn hình nhỏ */
@media (max-width: 576px) {
    .taodanxoso, form {
        flex-direction: column;
    }
    .title-group-top {
        flex-direction: row;
    align-items: center;
    }
.taodanxoso .cot1, .taodanxoso .cot2, .taodandacbietv2 .cot1, .taodandacbietv2 .cot2, .ghepxien .cot1, .ghepxien .cot2,.ghepdandacbiet .cot1, .ghepdandacbiet .cot2,.ghepdandacbiet .cot11, .ghepdandacbiet .cot12, .taodan3d4d .cot1, .taodan3d4d .cot11, .taodan3d4d .cot13, .taodan3d4d .cot2  {width:100%; margin: 10px 0;}
}
/*css cho button copy*/
.taodanxosocopy, .taodandacbietv2copy, .ghepxiencopy, .ghepdandacbietcopy, .laydannhanhcopy, .taodande3d4dcopy {
position: relative;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.taodanxosocopy:hover, .taodandacbietv2copy:hover, .ghepxiencopy:hover, .ghepdandacbietcopy:hover, .laydannhanhcopy:hover, .taodande3d4dcopy:hover  {
    background-color: #0056b3;
}
/*css cho taodandacbiet*/
.kieu1 label, .kieu2 label, .kieu3 label {margin-bottom:0;}
.kieu1, .kieu2, .kieu3 {margin-bottom:5px}
/*css cho laydannhanh*/

.laydannhanhnut {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Khoảng cách giữa các nút */
}

.laydannhanhnut .laydannhanhbtn {
flex: 1 0 calc(10% - 10px); /* 12 cột cho màn hình lớn */
  max-width: 150px; /* Đặt kích thước tối đa cho nút */
    padding: 5px 0; /* Padding dọc để nút cao hơn */
    cursor: pointer;
    border: 1px solid #7d7d7d;
    border-radius: 8px;
    font-weight:600;
    color: white;
  transition: background-color 0.3s, transform 0.2s;margin: 0;font-size: 14px;}
/* Media Query cho thiết bị di động */
@media (max-width: 768px) {
    .laydannhanhnut .laydannhanhbtn {
        flex: 1 0 calc(25% - 10px); /* 4 cột cho thiết bị di động */
    }
}
/* Màu gradient cho từng nhóm 4 nút */
.laydannhanhnut .btncam { 
    background: linear-gradient(45deg, #FF5733, #FF8D33); /* Gradient cam */
}
.laydannhanhnut .btnxanhla { 
    background: linear-gradient(45deg, #04af97, #33FF8D); /* Gradient xanh lá cây */
}
.laydannhanhnut .btnduong { 
    background: linear-gradient(45deg, #3357FF, #338DFF); /* Gradient xanh dương */
}
.laydannhanhnut .btnhong { 
    background: linear-gradient(45deg, #FF33A1, #FF33D4); /* Gradient hồng */
}
/* Thêm 4 màu gradient mới */
.laydannhanhnut .btnvang { 
    background: linear-gradient(45deg, #f98900, #FFDA00); /* Gradient vàng */
}
.laydannhanhnut .btntim { 
    background: linear-gradient(45deg, #800080, #DA70D6); /* Gradient tím */
}
.laydannhanhnut .btnxanhduong { 
    background: linear-gradient(45deg, #00BFFF, #1E90FF); /* Gradient xanh nước biển */
}
.laydannhanhnut .btnxam { 
    background: linear-gradient(45deg, #3f3f3f, #D3D3D3); /* Gradient xám */
}
/* Hiệu ứng khi di chuột */
.laydannhanhnut .laydannhanhbtn:hover {
    transform: scale(1.05); /* Tăng kích thước */
    opacity: 0.9; /* Giảm độ trong suốt */
}

/* Kiểu cho textarea */
#kqlaydannhanh {
    margin-top: 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px;
    font-size: 14px;
    resize: none; /* Không cho phép thay đổi kích thước */
}

/* Kiểu cho số lượng */
#soluonglaydannhanh {
    font-weight:600;
}