@font-face {
    font-family: "fangzheng";
    src: url("../font/fangzheng.ttf");
    font-weight: normal;
    font-style: normal;
}

/* Root: gom font */
:root {
    --font-main: "fangzheng", "Noto Serif SC", "Times New Roman", serif;

    --color-text-primary: #5a2f0d; /* chữ chính (tiêu đề lớn, tiêu đề bảng) */
    --color-text-secondary: #7a5a30; /* chữ mô tả phụ, label */
    --color-text-body: #3b2a16; /* chữ nội dung bảng */
    --color-table-header: #b37a2f; /* tiêu đề cột bảng */
    --color-table-row-even: rgba(179, 122, 47, 0.05);
    --color-table-row-hover: rgba(179, 122, 47, 0.12);
    --color-card-bg: rgba(255, 255, 255, 0.4);
    --color-card-border: rgba(179, 122, 47, 0.3);
    --color-card-shadow: rgba(0, 0, 0, 0.15);
}

/* Wrapper */
.history-wrapper {
    margin: 20px auto;
    max-width: 900px;
    font-family: var(--font-main);
}

/* Card trong suốt */
.history-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--color-card-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.history-body {
    padding: 20px;
}

.history-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-text-primary);
    margin-bottom: 15px;
    text-align: center;
    font-family: var(--font-main);
}

/* Table */
.table-container {
    overflow-x: auto;
}

.myTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    text-align: center;
    color: var(--color-text-body);
    font-family: var(--font-main);
}

.myTable th,
.myTable td {
    border: 1px solid var(--color-card-border);
    padding: 10px;
}

.myTable th {
    background-color: rgba(179, 122, 47, 0.08);
    font-weight: bold;
    color: var(--color-table-header);
    font-size: 15px;
    font-family: var(--font-main);
}

.myTable td {
    color: var(--color-text-body);
    font-family: var(--font-main);
}

.myTable tr:nth-child(even) {
    background-color: var(--color-table-row-even);
}

.myTable tr:hover {
    background-color: var(--color-table-row-hover);
}