/* ============================================================
   LEARNING HUB - THEME TÙY CHỈNH: ĐỎ ĐẬM + TRẮNG + XANH ĐEN
   ============================================================ */

/* ---------- Chế độ sáng: nền trắng, nhấn đỏ đậm ---------- */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: #8B0000;
    --md-primary-fg-color--light: #A83232;
    --md-primary-fg-color--dark: #5C0000;
    --md-accent-fg-color: #B71C1C;

    --md-default-bg-color: #FFFFFF;
    --md-typeset-a-color: #8B0000;
}

/* ---------- Chế độ tối: nền xanh đen đậm, nhấn đỏ ---------- */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #8B0000;
    --md-primary-fg-color--light: #A83232;
    --md-primary-fg-color--dark: #5C0000;
    --md-accent-fg-color: #B71C1C;

    --md-default-bg-color: #0B0F19;
    /* xanh đen đậm */
    --md-default-fg-color: #E6E6E6;
    --md-default-fg-color--light: #B0B0B0;
    --md-typeset-a-color: #E05353;
    /* link đỏ nhạt, dễ đọc trên nền tối */

    /* Card / code block nền tối hơn 1 chút để tạo chiều sâu */
    --md-code-bg-color: #131826;
    --md-code-fg-color: #D8DEE9;
}

/* ---------- Header & Tabs: nền đỏ đậm ---------- */
.md-header,
.md-tabs {
    background-color: #8B0000;
}

/* ---------- Font code ---------- */
.md-typeset code,
.md-typeset pre {
    font-family: "Fira Code", monospace;
    font-size: 0.85em;
}

/* ---------- Footer: đồng bộ tông xanh đen đậm ---------- */
.md-footer {
    background-color: #05070C;
}

.md-footer-meta {
    background-color: #05070C;
}

.md-footer__link {
    color: #E6E6E6;
}

.md-footer__link:hover {
    color: #E05353;
}

/* ---------- Admonition (callout): viền đỏ nhấn ---------- */
.md-typeset .admonition,
.md-typeset details {
    border-color: #8B0000;
}

.md-typeset .admonition-title,
.md-typeset summary {
    background-color: rgba(139, 0, 0, 0.1);
}

/* ---------- Nút toggle sáng/tối bo tròn nhẹ cho mềm mắt ---------- */
.md-header__button.md-icon {
    border-radius: 4px;
}

/* ============================================================
   MỞ RỘNG BỀ NGANG: content + sidebar navigation
   ============================================================ */

/* Trải hết chiều rộng màn hình thay vì căn giữa với max-width cố định
   -> sidebar nằm sát mép trái, không còn khoảng trắng thừa 2 bên */
.md-grid {
    max-width: 100%;
}

/* Gutter (khoảng đệm) nhỏ 2 bên cho đỡ sát viền quá */
.md-main__inner {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* Cột nội dung chính đọc tài liệu (mặc định giới hạn khá hẹp) */
.md-content {
    max-width: none;
}

/* Sidebar bên trái (danh sách lựa chọn / navigation) rộng hơn */
.md-sidebar--primary {
    width: 14rem;
    /* mặc định khoảng 12rem */
    transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* Nút ẩn/hiện danh sách điều hướng bên trái (desktop) */
.sidebar-toggle {
    display: inline-grid;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    place-items: center;
    margin-left: 0.2rem;
    padding: 0.4rem;
    color: var(--md-primary-bg-color);
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.sidebar-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    transition: transform 0.2s ease;
}

body.sidebar-collapsed .md-sidebar--primary {
    width: 0;
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

body.sidebar-collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

@media screen and (max-width: 76.234375em) {
    .sidebar-toggle {
        display: none;
    }

    body.sidebar-collapsed .md-sidebar--primary {
        width: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* Sidebar bên phải (mục lục Table of Contents) rộng hơn tương ứng */
.md-sidebar--secondary {
    width: 14rem;
}

/* Chữ trong sidebar to hơn một chút cho dễ đọc */
.md-nav__item .md-nav__link {
    font-size: 0.75rem;
}

/* SVG diagrams trong tài liệu */
.network-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

.network-svg line.network-wire,
.network-svg path.network-wire {
    stroke-dasharray: 8 5;
    stroke-dashoffset: 0;
    animation: network-flow 2.2s linear infinite;
}

.network-svg rect,
.network-svg ellipse,
.network-svg circle:not(.network-dot),
.network-svg path:not(.network-wire),
.network-svg line:not(.network-wire) {
    animation: none !important;
}

.network-dot {
    animation: network-pulse 1.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes network-flow {
    to {
        stroke-dashoffset: -100;
    }
}

@keyframes network-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}