body {
    position: relative;
    /* width: 100vh;
    height: 100vw;
    overflow: hidden; */
    --bggr1: linear-gradient(90deg, #91749d 0%, #6c96ba 100%);
    --bggr2: linear-gradient(90deg, #6779b6 0%, #3775aa 100%);
}

.bggr1 {
    background: var(--bggr1);
}

.bggr2 {
    background: var(--bggr2);
}

.bggr3 {
    background: linear-gradient(90deg, #dab029 0%, #ca6c2d 100%);
}

.bggr4 {
    background: linear-gradient(90deg, #139946 0%, #28cf81 100%);
}

body::-webkit-scrollbar {
    display: none;
}




.nutds {
    --mau-nut-cd:rgb(138, 37, 151);
    width: fit-content;
    padding-left: .3em;
    padding-right: .3em;
    text-align: center;
    border: 1px solid var(--mau-nut-cd);
    border-radius: .3em;
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
    justify-content: center;
    cursor: pointer;
    color: var(--mau-nut-cd);
    background-color: #ffff;
    position: relative;
}

.nutds2 {
    width: fit-content;
    text-align: center;
    border-radius: .3em;
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.nutds:hover::before {
    display: block;
}

.nutds::before {
    font-size: small;
    pointer-events: none;
    z-index: 3;
    width: max-content;
    white-space: nowrap;
    display: none;
    position: absolute;
    bottom: 60%;
    border-radius: .2em;
    left: 0;
    right: 0;
    background-color: #eeeeee;
    padding: .3em;
    color: rgb(82, 82, 82);
}

.xem::after{
    font-weight: bold;
    content: "☰";
}

.xem::before{
    content: "Xem chi tiết";
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
}

.chitiet::after{
    font-size: x-large;
    color: #0e0000 !important;
    content: "👁";
}

.nutds.gia::after{
    font-size: large;
    font-weight: bold;
    min-width: 1em;
    content: "$";
}

.nutds.gia::before{
    content: "chỉnh giá";
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
}

.chitiet::before{
    content: "Xem chi tiết";
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
}

.sua::after{
    content: "✎";
    transform: scaleX(-1);
}
.hoanthanh::after{
    content: "✎";
    color: #0035e2;
    transform: scaleX(-1);
}
.dahoanthanh::after{
    content: "🔵";
    color: aqua;
    font-size: small;
}
.hoanthanh::before{
    content: "Xác nhận hoàn thành";
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
}
.dahoanthanh::before{
    content: "Công việc này đã hoàn thành";
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
}
.sua::before{
    content: "Sửa - cập nhật";
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
}

.xoa::after{
    content: "✖";
    color: rgb(209, 8, 8);
}
.xoa::before{
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
    content: "Xóa";
}
.vohieu::after{
    content: "⊘";
    color: rgb(209, 139, 8);
    font-weight: bold;
}
.vohieu::before{
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
    content: "Vô hiệu";
}
.da-vo-hieu::after{
    content: "🔵";
    font-size: small;
}
.da-vo-hieu::before{
    right: calc(100% + 3px); bottom: 0; top: 0; left: auto;
    content: "Kích hoạt";
}
.tdtable {
    border-collapse: collapse;
}

.tdtable th {
    padding: .5em 1em;
}

.tdtable thead tr {
    background-color: var(--mau-nen-phu-1);
    color: #fff;
}

.tdtable tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.tdtable tbody tr td {
    border-bottom: 1px solid #e4e4e4;
    padding: .3em;
}

.tdtable tbody tr:nth-child(odd) {
    background-color: #fafafa;
}


.guest_main {
    background: var(--mau-nen1);
    height: 100vh;
    width: 100vw;
    height: 100svh;
    width: 100svw;
    max-height: 100dvh;
    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.tick::after{
    content: "✅";
    color: rgb(42, 211, 0);
}

.tick2::after{
    content: "🔵";
    font-size: small;
}
.tick3::after{
    content: "↻";
    color: #ca6c2d;
    font-weight: bold;
}
.nutds.huy::after,.nutds2.huy::after{
    content: "✖";
    color: rgb(209, 8, 8);
}
.guest_main>div:nth-of-type(2) {
    flex: auto;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* .guest_main>div:nth-of-type(2)::after {
    content: "";
    height: 60vh;
    width: 100vw;
    display: block;
} */

.gxt{
    background-color: #00c71b;
    color: #ffff;
}