@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    font-family: "Kanit", sans-serif;
}

#container-main{
    width: 100%;
 
}


@media (width > 768px) {
    #container-main{
        width: 500px ;
     
    }
}

@media (width < 768px) {
    #title-name-couple{
        font-size: 16px;
     
    }
}


table.dataTable tbody tr:first-child td {
    background-color: #0d6efd;
    color: #ffffff;
}



.bg-color-card {
    background: rgb(245,199,251);
    background: linear-gradient(0deg, rgba(245,199,251,1) 3%, rgba(237,220,238,1) 26%, rgba(247,226,247,1) 60%, rgba(255,255,255,1) 100%);
}

.bg-answer-pastel-1{
    background-color: #edede9;
}

.bg-answer-pastel-2{
    background-color: #d6ccc2;
}

.bg-answer-pastel-3{
    background-color: #f5ebe0;
}

.bg-answer-pastel-4{
    background-color: #e3d5ca;
}

.bg-answer-pastel-5{
    background-color: #dbc0ad;
}

/* Fix bug click on active btn : it not have active btn */
.bg-answer-pastel-3:hover {
    background-color: #f5ebe0; 
}