/* --- Reset & Basic --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
hr {
    margin-top:1rem!important;
    border-bottom: 1px solid #23262f!important;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #c9d1d9; /* Màu chữ sáng cho nền tối (Flexoki inspired) */
    background-color: #0d1117; /* Màu nền tối (Flexoki inspired) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
/* --- Table Styling --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 0.95em;
}

.data-table th,
.data-table td {
    border: 1px solid #30363d; /* Màu viền ô (Flexoki inspired) */
    padding: 0.6em 0.8em;
    text-align: left;
}

.data-table th {
    background-color: #161b22; /* Nền header của bảng (Flexoki inspired) */
    color: #f0f6fc; /* Màu chữ header */
    font-weight: 600;
}

.data-table tbody tr:nth-child(odd) {
    /* background-color: #0d1117;  Có thể bỏ qua nếu muốn giữ nguyên nền body */
}

.data-table tbody tr:nth-child(even) {
    background-color: rgba(22, 27, 34, 0.5); /* Nền hơi khác cho hàng chẵn, hoặc #161b22 */
}

.data-table tbody tr:hover {
    background-color: #21262d; /* Nền khi hover */
}
a {
    color: #58a6ff; /* Màu link (Flexoki inspired) */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #f0f6fc; /* Màu tiêu đề sáng hơn */
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }

p {
    margin-bottom: 1em;
}

ul, ol {
    margin-bottom: 1em;
    padding-left: 20px;
}

li {
    margin-bottom: 0.5em;
}

pre {
    background-color: #161b22; /* Nền code block */
    border: 1px solid #30363d;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1em;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9em;
    background-color: rgba(175, 184, 193, 0.2); /* Nền inline code */
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}


/* --- Layout --- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.site-header {
    background-color: #161b22; /* Nền header */
    padding: 1rem 0;
    border-bottom: 1px solid #30363d;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-size: 1.5em;
    font-weight: 600;
    color: #f0f6fc;
}
span.footerimg-logo img {
    margin: 0;
    margin-bottom: -3px;
}
.main-container {
    display: flex;
    flex-grow: 1; /* Cho phép container này chiếm không gian còn lại */
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.main-content img{
    margin: 16px 0;
}
.sidebar-nav {
    width: 240px; /* Chiều rộng cố định cho sidebar */
    flex-shrink: 0; /* Không co lại khi không đủ chỗ */
    padding-right: 2rem;
    border-right: 1px solid #30363d;
    height: calc(100vh - 60px - 4rem); /* 60px header, 4rem padding top/bottom */
    overflow-y: auto;
    position: sticky;
    top: calc(60px + 2rem); /* 60px là chiều cao header ước tính + padding-top của main-container */
}

.sidebar-nav ul {
    list-style: none;
    padding-left: 0;
}

.sidebar-nav ul ul {
    padding-left: 15px;
    margin-top: 0.3em;
}

.sidebar-nav a {
    display: block;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    color: #c9d1d9;
    font-size: 0.95em;
}

.sidebar-nav a:hover, .sidebar-nav a.active {
    background-color: #21262d; /* Nền khi hover/active */
    color: #f0f6fc;
    text-decoration: none;
}

.main-content {
    flex-grow: 1; /* Chiếm không gian còn lại */
    padding-left: 2rem;
    padding-right: 1rem; /* Để có không gian cho TOC */
    max-width: 800px; /* Giới hạn chiều rộng nội dung cho dễ đọc */
}

.page-toc {
    width: 200px;
    flex-shrink: 0;
    padding-left: 1.5rem;
    font-size: 0.9em;
    height: calc(100vh - 60px - 4rem);
    overflow-y: auto;
    position: sticky;
    top: calc(60px + 2rem);
}

.page-toc h3 {
    font-size: 0.9em;
    font-weight: 600;
    color: #8b949e; /* Màu tiêu đề TOC nhạt hơn */
    margin-top: 0;
    margin-bottom: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-toc ul {
    list-style: none;
    padding-left: 0;
}
.page-toc ul li a {
    display: block;
    padding: 0.3em 0;
    color: #8b949e;
}
.page-toc ul li a:hover {
    color: #c9d1d9;
    text-decoration: none;
}

.site-footer {
    background-color: #161b22;
    padding: 1.5rem 0;
    border-top: 1px solid #30363d;
    text-align: center;
    font-size: 0.9em;
    color: #8b949e;
    margin-top: 2rem;
}

/* --- Responsive (Rất cơ bản) --- */
@media (max-width: 1024px) {
    .page-toc {
        display: none; /* Ẩn TOC trên màn hình nhỏ hơn */
    }
    .main-content {
        padding-right: 1rem; /* Không cần khoảng trống cho TOC nữa */
        max-width: none; /* Cho phép nội dung chiếm toàn bộ */
    }
}

@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    .sidebar-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #30363d;
        padding-right: 0;
        margin-bottom: 1.5rem;
        height: auto; /* Cho phép sidebar tự điều chỉnh chiều cao */
        position: static; /* Bỏ sticky trên mobile */
        overflow-y: visible;
    }
    .main-content {
        padding-left: 0;
    }
}