table{

    width: 100%;

    border-collapse: collapse;

    margin: 10px 0;

    background: white;

    overflow: hidden;

    border-radius: 12px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
*:has(> table) {
    overflow-x: auto;
}

th{

    padding: 14px 12px;

    font-weight: 600;

    text-align: center;

    border: 1px solid #e2e8f0;
}

/* TABLE BODY */

td{

    padding: 12px 10px;

    border: 1px solid #e2e8f0;

    vertical-align: top;
}

/* STRIPED ROWS */

tbody tr:nth-child(even){

    background: #f8fafc;
}

/* HOVER */

tbody tr:hover{

    background: #eef2ff;
}

/* =========================
   IMAGES
========================= */

img{

    max-width: 100%;

    height: auto;

    object-fit: contain;
}

/* =========================
   LISTS
========================= */

ul,
ol{

    margin: 15px 0 15px 25px;
}

li{

    margin-bottom: 8px;
}

/* =========================
   HORIZONTAL LINE
========================= */

hr{

    border: none;

    height: 1px;

    background: #e2e8f0;

    margin: 25px 0;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 768px){

    table{

        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }

    td,
    th{

        padding: 10px 8px;

        font-size: 14px;
    }

}