/*#region ABC*/
/*#endregion */
/*#region table */
table {
    border-collapse: collapse;
}

table :where(th, td) {
    border: 1px solid #9c9c9c;
    padding: 5px;
}

/* Màu nền cho dòng đầu tiên */
thead tr:first-child {
    background: #e3f2fd;
}

thead tr:not(:first-child) th {
    font-weight: normal;
    font-size: 0.8em;
}

/* Màu nền cho các dòng lẻ, không tính dòng đầu tiên */
tbody tr:nth-child(even) td {
    background: #e8e8e8;
}

/* Hiệu ứng khi hover qua bất kỳ dòng nào (trừ dòng đầu) */
tbody tr:not(:first-child):hover td {
    background: #ffe082;
    cursor: pointer;
    /*hiệu ứng rê chuột 🔽 ▶️*/
}

table caption {
    background: #002a71;
    padding: 10px;
    font-weight: bold;
    color: #ffffff;
}

/*#endregion */

/*#region định dạng chung*/
h3 {
    margin: 5px 0px;
    font-size: 1em;
}

a {
    text-decoration: none;
}

html,
body {
    margin: 0;
    padding: 0;
    /* Ngăn overflow (tạo thanh cuộn) thuộc tính để cố định nút fab trên trình duyệt hoạt động cho position */
    overflow-x: hidden;
}

main {
    background: #ffffff;
    margin-left: 10%;
}

/*#endregion */

/*#region tạo thanh cuộn thẻ table trong class placeHolder*/
main :where(.placeHolder,.placeHolderRecursive) {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* mượt mà trên iOS */
}

/*#endregion */

/*#region Định dạng mục lục*/
.tableOfContent a {
    display: block;
    text-decoration: none;
}
.tableOfContent {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/*#endregion */
/*#region fab Floating Action Button*/
/* cố định cho mobile cần tắt thanh cuộn body overflow-x: hidden;  */
.fab {
    position: fixed;
    top: 40px;
    z-index: 99;
}

/*#endregion */
/*#region mục lục sản phẩm Table Of content*/
/*#endregion */
/*#region Nút Menu dùng details sumany*/
.detailMenu a {
    display: block;
}

.detailMenu {
    background: #e6e0e0;
    height: calc(100vh - 50px);
    overflow: auto;
}

details {
    position: fixed;
    /* Giữ nút cố định */
    top: 5px;
    left: 0;
    z-index: 100;
}

summary {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e6e0e0;
    /* 4. Căn giữa biểu tượng ☰ */
    display: flex;
    justify-content: center;
    /* Căn giữa theo chiều ngang */
    align-items: center;
    /* Căn giữa theo chiều dọc */
    cursor: pointer;
}

/*#endregion */

/*#region Grid chia 2 cột gồm responsive Mobile*/
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Chia 2 cột bằng nhau */
    gap: 10px;
    /* Khoảng cách giữa 2 cột */
}

@media (max-width: 768px) {
    .grid2 {
        grid-template-columns: 1fr;
        /* Chuyển sang 1 cột */
        gap: 5px;
    }
}

/*#endregion */