.dev-main {
    --dev-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --dev-nen-ma: #0b1222;
    --dev-pp-get: #047857;
    --dev-pp-post: #1d4ed8;
    --dev-pp-sua: #9a3412;
    --dev-pp-xoa: #b91c1c;
    --dev-dinh: 90px;
    container: dev / inline-size;
    min-width: 0;
    overflow-wrap: break-word;
}

.dev-main,
.dev-main *,
.dev-main *::before,
.dev-main *::after {
    box-sizing: border-box;
}

.dev-hero {
    min-width: 0;
    padding: var(--cm-space-lg);
    text-align: left;
}

.dev-hero p {
    max-width: none;
    margin: 0;
    line-height: 1.7;
}

.dev-hero-nut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cm-space-sm);
    min-width: 0;
    margin-top: var(--cm-space-lg);
}

.dev-hero-nut:empty {
    display: none;
}

.dev-hero-nut > a {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    line-height: 1.5;
}

.dev-thong-bao {
    min-width: 0;
    margin-bottom: var(--cm-space-lg);
}

.dev-thong-bao > div {
    min-width: 0;
}

.dev-luoi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: start;
    gap: var(--cm-space-xl);
    min-width: 0;
}

.dev-luoi > *,
.dev-hai-cot > *,
.dev-ep-dau > *,
.dev-vd-nut > * {
    min-width: 0;
}

.dev-bai {
    min-width: 0;
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-base);
    line-height: 1.7;
}

.dev-bai p {
    margin: 0 0 var(--cm-space-md);
}

.dev-bai b,
.dev-bai strong {
    color: var(--cm-text-primary);
    font-weight: 600;
}

.dev-bai a {
    color: var(--cm-primary);
    text-decoration: none;
}

.dev-bai a:hover {
    text-decoration: underline;
}

.dev-muc {
    min-width: 0;
    padding: var(--cm-space-lg);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-lg);
    background: var(--cm-bg-card);
    scroll-margin-top: var(--dev-dinh);
}

.dev-muc + .dev-muc {
    margin-top: var(--cm-space-lg);
}

.dev-muc > :last-child {
    margin-bottom: 0;
}

.dev-muc h2 {
    margin: 0 0 var(--cm-space-md);
    color: var(--cm-text-primary);
    font-size: var(--cm-font-xl);
    font-weight: 700;
    line-height: 1.4;
}

.dev-muc h3 {
    margin: var(--cm-space-lg) 0 var(--cm-space-sm);
    color: var(--cm-text-primary);
    font-size: var(--cm-font-md);
    font-weight: 600;
    line-height: 1.5;
}

.dev-ep-dau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cm-space-sm);
    min-width: 0;
    margin-bottom: var(--cm-space-md);
}

.dev-muc h2.dev-ep-path {
    max-width: 100%;
    margin: 0;
    font-family: var(--dev-mono);
    font-size: calc((var(--cm-font-md) + var(--cm-font-lg)) / 2);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dev-ds,
.dev-buoc {
    margin: 0 0 var(--cm-space-md);
    padding-left: var(--cm-space-lg);
}

.dev-ds {
    list-style: disc;
}

.dev-buoc {
    list-style: decimal;
}

.dev-ds li,
.dev-buoc li {
    min-width: 0;
    padding-left: var(--cm-space-xs);
}

.dev-ds li + li,
.dev-buoc li + li {
    margin-top: var(--cm-space-sm);
}

.dev-ds li::marker {
    color: var(--cm-text-muted);
}

.dev-buoc li::marker {
    color: var(--cm-primary);
    font-weight: 700;
}

.dev-nho {
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-sm);
    line-height: 1.6;
}

.dev-main :not(pre) > code {
    padding: calc(var(--cm-space-xs) / 2) var(--cm-space-xs);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-surface-soft);
    color: color-mix(in srgb, var(--cm-primary) 45%, var(--cm-text-primary));
    font-family: var(--dev-mono);
    font-size: 0.88em;
    overflow-wrap: anywhere;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.dev-ma {
    position: relative;
    min-width: 0;
    max-width: 100%;
    margin-bottom: var(--cm-space-md);
    padding-top: calc(var(--cm-space-xl) + var(--cm-space-xs));
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    background: var(--dev-nen-ma);
    overflow: hidden;
}

.dev-ma:not(:has(> .dev-ma-nhan)) {
    padding-top: 0;
}

.dev-ma:not(:has(> .dev-ma-nhan)) pre {
    padding-right: calc(var(--cm-space-2xl) * 2 + var(--cm-space-md));
}

.dev-ma-nhan {
    position: absolute;
    top: calc(var(--cm-space-sm) + var(--cm-space-xs) / 2);
    left: var(--cm-space-md);
    max-width: calc(100% - var(--cm-space-2xl) * 3);
    overflow: hidden;
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dev-ma pre {
    max-width: 100%;
    max-height: 480px;
    margin: 0;
    padding: var(--cm-space-md);
    overflow: auto;
    color: var(--cm-text-primary);
    font-family: var(--dev-mono);
    font-size: var(--cm-font-sm);
    line-height: 1.55;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: var(--cm-border-strong) var(--cm-bg-dark);
}

.dev-ma pre code {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    white-space: inherit;
}

.dev-sao {
    position: absolute;
    top: calc(var(--cm-space-xs) + var(--cm-space-xs) / 2);
    right: var(--cm-space-sm);
    max-width: calc(100% - var(--cm-space-md));
    margin: 0;
    padding: var(--cm-space-xs) var(--cm-space-sm);
    appearance: none;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-bg-card);
    color: var(--cm-text-secondary);
    font-family: inherit;
    font-size: var(--cm-font-xs);
    line-height: 1.5;
    cursor: pointer;
    transition: var(--cm-transition-fast);
}

.dev-sao:hover {
    border-color: var(--cm-border-strong);
    background: var(--cm-surface-soft);
    color: var(--cm-text-primary);
}

.dev-sao.xong {
    border-color: var(--cm-success);
    color: var(--cm-success);
}

.dev-hai-cot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cm-space-md);
    min-width: 0;
    margin-bottom: var(--cm-space-md);
}

.dev-hai-cot .dev-ma {
    margin-bottom: 0;
}

.dev-hai-cot > div > .dev-nho {
    margin-bottom: var(--cm-space-sm);
}

.dev-bang-cuon {
    min-width: 0;
    max-width: 100%;
    margin-bottom: var(--cm-space-md);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cm-border-strong) var(--cm-bg-dark);
}

.dev-bang {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--cm-text-secondary);
    font-size: calc((var(--cm-font-sm) + var(--cm-font-base)) / 2);
    line-height: 1.6;
    text-align: left;
}

.dev-bang th,
.dev-bang td {
    padding: var(--cm-space-sm) var(--cm-space-md);
    border-bottom: 1px solid var(--cm-border-light);
    vertical-align: top;
    overflow-wrap: normal;
}

.dev-bang th {
    background: var(--cm-surface-soft);
    color: var(--cm-text-primary);
    font-weight: 600;
}

.dev-bang tbody tr:last-child > td {
    border-bottom: 0;
}

.dev-main .dev-bang code {
    white-space: nowrap;
    overflow-wrap: normal;
}

.dev-bang-loi th:nth-child(-n + 2),
.dev-bang-loi td:nth-child(-n + 2) {
    white-space: nowrap;
}

.dev-bang-dong th,
.dev-bang-dong td {
    padding-inline: var(--cm-space-sm);
}

.dev-bang-dong th {
    font-size: var(--cm-font-xs);
    line-height: 1.5;
}

.dev-bang-dong th:first-child,
.dev-bang-dong td:first-child {
    min-width: 200px;
    padding-left: var(--cm-space-md);
}

.dev-bang-dong th:last-child,
.dev-bang-dong td:last-child {
    padding-right: var(--cm-space-md);
}

.dev-bang-dong .dev-o {
    text-align: center;
}

.dev-bang-dong .dev-vung {
    margin-top: var(--cm-space-xs);
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-xs);
    line-height: 1.6;
}

.dev-bang-ep a.dev-ep-link {
    display: flex;
    align-items: center;
    gap: var(--cm-space-sm);
    min-width: 0;
    text-decoration: none;
}

.dev-bang-ep a.dev-ep-link:hover {
    color: var(--cm-text-primary);
    text-decoration: none;
}

.dev-bang-ep a.dev-ep-link code {
    color: inherit;
}

.dev-bang-ep .dev-pp {
    flex-shrink: 0;
}

.dev-co {
    color: var(--cm-success);
}

.dev-khong {
    color: var(--cm-text-dim);
}

.dev-pp {
    display: inline-block;
    min-width: calc(var(--cm-space-2xl) - var(--cm-space-xs) / 2);
    padding: var(--cm-space-xs) var(--cm-space-sm);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-text-dim);
    color: var(--cm-text-primary);
    font-family: var(--dev-mono);
    font-size: var(--cm-font-xs);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

.dev-pp[data-m="GET"] {
    background: var(--dev-pp-get);
}

.dev-pp[data-m="POST"] {
    background: var(--dev-pp-post);
}

.dev-pp[data-m="PUT"],
.dev-pp[data-m="PATCH"] {
    background: var(--dev-pp-sua);
}

.dev-pp[data-m="DELETE"] {
    background: var(--dev-pp-xoa);
}

.dev-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cm-space-xs);
    max-width: 100%;
    padding: calc(var(--cm-space-xs) / 2) var(--cm-space-sm);
    border: 1px solid var(--cm-border-strong);
    border-radius: var(--cm-radius-full);
    background: var(--cm-surface-soft);
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-xs);
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.dev-pill i {
    flex-shrink: 0;
    font-size: calc(var(--cm-font-xs) - var(--cm-font-xs) / 12);
}

.dev-pill-ghi {
    border-color: var(--cm-warning);
    background: var(--cm-warning-light);
    color: color-mix(in srgb, var(--cm-warning) 70%, var(--cm-text-primary));
}

.dev-pill-canh {
    border-color: var(--cm-danger);
    background: var(--cm-danger-light);
    color: color-mix(in srgb, var(--cm-danger) 65%, var(--cm-text-primary));
}

.dev-bat-buoc {
    color: var(--cm-danger);
    font-weight: 600;
}

.dev-http {
    display: inline-block;
    padding: calc(var(--cm-space-xs) / 2) var(--cm-space-sm);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-surface-soft);
    color: var(--cm-text-secondary);
    font-family: var(--dev-mono);
    font-size: var(--cm-font-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.dev-http[data-h="2"] {
    background: var(--cm-success-light);
    color: var(--cm-success);
}

.dev-http[data-h="4"] {
    background: var(--cm-warning-light);
    color: var(--cm-warning);
}

.dev-http[data-h="5"] {
    background: var(--cm-danger-light);
    color: var(--cm-danger);
}

.dev-vd {
    min-width: 0;
    margin: var(--cm-space-md) 0;
}

.dev-vd-nut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cm-space-xs);
    min-width: 0;
    margin-bottom: var(--cm-space-sm);
}

.dev-vd-nut button {
    max-width: 100%;
    margin: 0;
    padding: var(--cm-space-xs) var(--cm-space-sm);
    appearance: none;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    background: none;
    color: var(--cm-text-secondary);
    font-family: inherit;
    font-size: var(--cm-font-sm);
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: var(--cm-transition-fast);
}

.dev-vd-nut button:hover {
    border-color: var(--cm-border-strong);
    background: var(--cm-surface-soft);
    color: var(--cm-text-primary);
}

.dev-vd-nut button.on {
    border-color: var(--cm-primary);
    background: var(--cm-primary-light);
    color: var(--cm-primary);
}

.dev-vd-o {
    display: none;
    min-width: 0;
}

.dev-vd-o.on {
    display: block;
}

.dev-vd-o > .dev-ma {
    margin-bottom: 0;
}

.dev-toc {
    position: sticky;
    top: var(--dev-dinh);
    min-width: 0;
    max-height: calc(100vh - var(--dev-dinh) - var(--cm-space-lg));
    padding: var(--cm-space-md) 0;
    overflow: auto;
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-sm);
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: var(--cm-border-strong) var(--cm-bg-dark);
}

.dev-toc-t {
    margin-bottom: var(--cm-space-sm);
    padding-inline: var(--cm-space-md);
    color: var(--cm-text-muted);
    font-size: var(--cm-font-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.dev-toc-ds {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dev-toc-ds li {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.dev-toc-ds a {
    display: block;
    min-width: 0;
    padding: var(--cm-space-sm) var(--cm-space-md);
    border-left: 2px solid var(--cm-border-light);
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-sm);
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--cm-transition-fast);
}

.dev-toc-ds a:hover {
    background: var(--cm-bg-hover);
    color: var(--cm-text-primary);
    text-decoration: none;
}

.dev-toc-ds a.on {
    border-left-color: var(--cm-primary);
    background: var(--cm-primary-light);
    color: var(--cm-primary);
}

.dev-toc-ds .dev-pp {
    min-width: calc(var(--cm-space-xl) + var(--cm-space-sm));
    padding: 0 var(--cm-space-xs);
    font-size: calc(var(--cm-font-xs) - var(--cm-font-xs) / 12);
    line-height: 1.6;
    vertical-align: baseline;
}

details.dev-toc-gon {
    display: none;
    min-width: 0;
    margin-bottom: var(--cm-space-lg);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-lg);
    background: var(--cm-bg-card);
    overflow: hidden;
}

.dev-toc-gon > summary {
    padding: var(--cm-space-md);
    color: var(--cm-text-primary);
    font-size: var(--cm-font-base);
    font-weight: 600;
    cursor: pointer;
}

.dev-toc-gon > summary i {
    margin-right: var(--cm-space-sm);
    color: var(--cm-text-secondary);
}

.dev-toc-gon[open] > summary {
    border-bottom: 1px solid var(--cm-border);
}

.dev-toc-gon .dev-toc-ds {
    padding: var(--cm-space-sm);
}

.dev-main a:focus-visible,
.dev-sao:focus-visible,
.dev-vd-nut button:focus-visible,
.dev-toc-gon > summary:focus-visible {
    outline: 2px solid var(--cm-primary);
    outline-offset: calc(var(--cm-space-xs) / 2);
}

@container dev (max-width: 860px) {
    .dev-luoi {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-toc {
        display: none;
    }

    details.dev-toc-gon {
        display: block;
    }
}

@container dev (max-width: 760px) {
    .dev-hai-cot {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-hero,
    .dev-muc {
        padding: var(--cm-space-md);
    }

    .dev-hero h1 {
        font-size: var(--cm-font-2xl);
    }

    .dev-sao span {
        display: none;
    }

    .dev-ma:not(:has(> .dev-ma-nhan)) pre {
        padding-right: calc(var(--cm-space-2xl) + var(--cm-space-xs));
    }
}

.tix-sidebar .tix-item.dev-con {
    margin-left: var(--cm-space-md);
    border-left: 1px solid var(--cm-border);
    border-radius: 0 var(--cm-radius-sm, 8px) var(--cm-radius-sm, 8px) 0;
}

.tix-sidebar .tix-item.dev-con.active {
    border-left: 3px solid var(--tix-c);
    padding-left: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .dev-main,
    .dev-main *,
    .dev-main *::before,
    .dev-main *::after {
        transition: none !important;
    }
}
