/* ===== CSS Variables ===== */
:root {
    --color-primary: rgba(132, 18, 15, 1);
    --color-primary-muted: oklch(0.5657 0.1842 25.3);
    --color-secondary: oklch(0.9179 0.0715 94.41);
    --color-secondary-muted: oklch(0.9634 0.0546 93.62 / 64%);
    --color-header-background: rgba(39, 39, 39, 1);
    --color-header-border: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(243, 228, 174, 1) 38%,
            rgba(243, 228, 174, 1) 62%,
            rgba(255, 255, 255, 0) 100%);
    --color-footer-background: rgba(39, 39, 39, 1);
    --color-footer-text: rgba(255, 255, 255, 1);
    --color-foreground: #333;

    --font-sans: "DVN - Beaufort", sans-serif;
    --font-serif: "Roboto", serif;
    --font-mono: "Roboto", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: oklch(41.95% .1649 24.01);
        --color-primary-muted: oklch(56.57% .1842 25.3);
        --color-secondary: oklch(91.79% .0715 94.41);
        --color-secondary-muted: oklch(96.34% .0546 93.62/.64);
        --color-header-background: oklch(27.27% 0 0);
        --color-header-border: linear-gradient(90deg, #fff0 0%, #f3e4ae 38%, #f3e4ae 62%, #fff0 100%);
        --color-footer-background: #272727;
        --color-footer-text: #fff;
        --color-foreground: #e5e5e5;
    }
}

/* ===== Font Face ===== */
@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-Black.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-Black.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-BoldItalic.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-BoldItalic.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-BlackItalic.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-BlackItalic.woff) format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-LightItalic.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-LightItalic.woff) format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-Italic.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-Italic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-MediumItalic.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-MediumItalic.woff) format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-Regular.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Beaufort";
    src: url(../fonts/DVNBeaufort-Medium.woff2) format("woff2"),
        url(../fonts/DVNBeaufort-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DVN - Shield";
    src: url(../fonts/DVNShield-Regular.woff2) format("woff2"),
        url(../fonts/DVNShield-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth !important
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: #0a192f
}

::-webkit-scrollbar-thumb {
    background: #233554;
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: #304a6d
}

/* ===== Prose Styles (sao chép từ index.css cho đúng UI gốc) ===== */

.prose {
    color: var(--tw-prose-body);
    max-width: none;
    --tw-prose-body: oklch(37.3% .034 259.733);
    --tw-prose-headings: oklch(21% .034 264.665);
    --tw-prose-lead: oklch(44.6% .03 256.802);
    --tw-prose-links: oklch(21% .034 264.665);
    --tw-prose-bold: oklch(21% .034 264.665);
    --tw-prose-counters: oklch(55.1% .027 264.364);
    --tw-prose-bullets: oklch(87.2% .01 258.338);
    --tw-prose-hr: oklch(92.8% .006 264.531);
    --tw-prose-quotes: oklch(21% .034 264.665);
    --tw-prose-quote-borders: oklch(92.8% .006 264.531);
    --tw-prose-captions: oklch(55.1% .027 264.364);
    --tw-prose-kbd: oklch(21% .034 264.665);
    --tw-prose-kbd-shadows: oklab(21% -.00316127 -.0338527/.1);
    --tw-prose-code: oklch(21% .034 264.665);
    --tw-prose-pre-code: oklch(92.8% .006 264.531);
    --tw-prose-pre-bg: oklch(27.8% .033 256.848);
    --tw-prose-th-borders: oklch(87.2% .01 258.338);
    --tw-prose-td-borders: oklch(92.8% .006 264.531);
    --tw-prose-invert-body: oklch(87.2% .01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% .022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% .022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% .03 256.802);
    --tw-prose-invert-hr: oklch(37.3% .034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% .003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% .034 259.733);
    --tw-prose-invert-captions: oklch(70.7% .022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: #ffffff1a;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% .01 258.338);
    --tw-prose-invert-pre-bg: #00000080;
    --tw-prose-invert-th-borders: oklch(44.6% .03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% .034 259.733);
    font-size: 1rem;
    line-height: 1.75;
}

.prose :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose p {
    margin-top: 1.25em !important;
    margin-bottom: 1.25em !important;
}

.prose :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-links) !important;
    font-weight: 500;
    text-decoration: underline;
}

.prose :where(strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-bold);
    font-weight: 600;
}

.prose :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
    list-style-type: decimal;
}

.prose :where(ul):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
    list-style-type: disc;
}

.prose :where(ol>li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
    color: var(--tw-prose-counters);
    font-weight: 400;
}

.prose :where(ul>li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
    color: var(--tw-prose-bullets);
}

.prose :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
    border-color: var(--tw-prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
}

.prose :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-headings);
    margin-top: 0;
    margin-bottom: .888889em;
    font-size: 2.25em;
    font-weight: 800;
    line-height: 1.11111;
}

.prose :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-headings);
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.33333;
}

.prose :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.6em;
    margin-bottom: .6em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.6;
}

.prose :where(h4):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.5em;
    margin-bottom: .5em;
    font-weight: 600;
    line-height: 1.5;
}

.prose :where(img):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-quotes);
    border-inline-start-width: .25rem;
    border-inline-start-color: var(--tw-prose-quote-borders);
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-inline-start: 1em;
    font-style: italic;
    font-weight: 500;
}

.prose :where(figure):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose :where(figcaption):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-captions);
    margin-top: .857143em;
    font-size: .875em;
    line-height: 1.42857;
}

.prose :where(li):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .5em;
    margin-bottom: .5em;
}

.prose :where(ol>li):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(ul>li):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-start: .375em;
}

.prose :where(.prose>ul>li p):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .75em;
    margin-bottom: .75em;
}

.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.25em;
}

.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-bottom: 1.25em;
}

.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.25em;
}

.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .75em;
    margin-bottom: .75em;
}

.prose :where(dl):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose :where(dt):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.25em;
    font-weight: 600;
}

.prose :where(dd):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .5em;
    padding-inline-start: 1.625em;
}

.prose :where(hr+*):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(h2+*):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(h3+*):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(h4+*):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-top: .571429em;
    padding-inline-end: .571429em;
    padding-bottom: .571429em;
    padding-inline-start: .571429em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-end: 0;
}

.prose :where(.prose>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
}

.prose :where(.prose>:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-bottom: 0;
}

.prose :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
    table-layout: auto;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: .875em;
    line-height: 1.71429;
}

.prose :where(thead):not(:where([class~=not-prose], [class~=not-prose] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-headings);
    vertical-align: bottom;
    padding-inline-end: .571429em;
    padding-bottom: .571429em;
    padding-inline-start: .571429em;
    font-weight: 600;
}

.prose :where(tbody tr):not(:where([class~=not-prose], [class~=not-prose] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~=not-prose], [class~=not-prose] *)) {
    vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~=not-prose], [class~=not-prose] *)) {
    border-top-width: 1px;
    border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
    vertical-align: top;
}

.prose :where(th, td):not(:where([class~=not-prose], [class~=not-prose] *)) {
    text-align: start;
}

.prose :where(figure>*):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.prose :where(picture>img):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.prose :where(video):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-kbd);
    box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
    padding-top: .1875em;
    padding-inline-end: .375em;
    padding-bottom: .1875em;
    border-radius: .3125rem;
    padding-inline-start: .375em;
    font-family: inherit;
    font-size: .875em;
    font-weight: 500;
}

.prose :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-code);
    font-size: .875em;
    font-weight: 600;
}

.prose :where(code):not(:where([class~=not-prose], [class~=not-prose] *)):before,
.prose :where(code):not(:where([class~=not-prose], [class~=not-prose] *)):after {
    content: "`";
}

.prose :where(a code):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(h1 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
}

.prose :where(h2 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
    font-size: .875em;
}

.prose :where(h3 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
    font-size: .9em;
}

.prose :where(h4 code):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(blockquote code):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(thead th code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
}

.prose :where(pre):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-pre-code);
    background-color: var(--tw-prose-pre-bg);
    padding-top: .857143em;
    padding-inline-end: 1.14286em;
    padding-bottom: .857143em;
    border-radius: .375rem;
    margin-top: 1.71429em;
    margin-bottom: 1.71429em;
    padding-inline-start: 1.14286em;
    font-size: .875em;
    font-weight: 400;
    line-height: 1.71429;
    overflow-x: auto;
}

.prose :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    padding: 0;
}

.prose :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)):before,
.prose :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)):after {
    content: none;
}

.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose], [class~=not-prose] *)):before {
    content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose], [class~=not-prose] *)):after {
    content: close-quote;
}

.prose :where(a strong):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(blockquote strong):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose :where(thead th strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
}

.prose :where(h1 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
    font-weight: 900;
}

.prose :where(h2 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
    font-weight: 800;
}

.prose :where(h3 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
    font-weight: 700;
}

.prose :where(h4 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: inherit;
    font-weight: 700;
}

.prose :where([class~=lead]):not(:where([class~=not-prose], [class~=not-prose] *)) {
    color: var(--tw-prose-lead);
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    font-size: 1.25em;
    line-height: 1.6;
}

/* ===== Prose-lg ===== */
.prose-lg {
    font-size: 1.125rem;
    line-height: 1.77778;
}

.prose-lg :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.33333em;
    margin-bottom: 1.33333em;
}

.prose-lg :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.66667em;
    margin-bottom: 1.66667em;
    padding-inline-start: 1em;
}

.prose-lg :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: .833333em;
    font-size: 2.66667em;
    line-height: 1;
}

.prose-lg :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.86667em;
    margin-bottom: 1.06667em;
    font-size: 1.66667em;
    line-height: 1.33333;
}

.prose-lg :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.66667em;
    margin-bottom: .666667em;
    font-size: 1.33333em;
    line-height: 1.5;
}

.prose-lg :where(h4):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.77778em;
    margin-bottom: .444444em;
    line-height: 1.55556;
}

.prose-lg :where(img):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose-lg :where(picture):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.77778em;
    margin-bottom: 1.77778em;
}

.prose-lg :where(picture>img):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.prose-lg :where(video):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.77778em;
    margin-bottom: 1.77778em;
}

.prose-lg :where(kbd):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-top: .222222em;
    padding-inline-end: .444444em;
    padding-bottom: .222222em;
    border-radius: .3125rem;
    padding-inline-start: .444444em;
    font-size: .888889em;
}

.prose-lg :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-size: .888889em;
}

.prose-lg :where(h2 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-size: .866667em;
}

.prose-lg :where(h3 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-size: .875em;
}

.prose-lg :where(pre):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-top: 1em;
    padding-inline-end: 1.5em;
    padding-bottom: 1em;
    border-radius: .375rem;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-inline-start: 1.5em;
    font-size: .888889em;
    line-height: 1.75;
}

.prose-lg :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose-lg :where(ul):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.33333em;
    margin-bottom: 1.33333em;
    padding-inline-start: 1.55556em;
}

.prose-lg :where(li):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .666667em;
    margin-bottom: .666667em;
}

.prose-lg :where(ol>li):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose-lg :where(ul>li):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-start: .444444em;
}

.prose-lg :where(.prose-lg>ul>li p):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .888889em;
    margin-bottom: .888889em;
}

.prose-lg :where(.prose-lg>ul>li>p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.33333em;
}

.prose-lg :where(.prose-lg>ul>li>p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-bottom: 1.33333em;
}

.prose-lg :where(.prose-lg>ol>li>p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.33333em;
}

.prose-lg :where(.prose-lg>ol>li>p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-bottom: 1.33333em;
}

.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .888889em;
    margin-bottom: .888889em;
}

.prose-lg :where(dl):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.33333em;
    margin-bottom: 1.33333em;
}

.prose-lg :where(dt):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.33333em;
}

.prose-lg :where(dd):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: .666667em;
    padding-inline-start: 1.55556em;
}

.prose-lg :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 3.11111em;
    margin-bottom: 3.11111em;
}

.prose-lg :where(hr+*):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose-lg :where(h2+*):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose-lg :where(h3+*):not(:where([class~=not-prose], [class~=not-prose] *)),
.prose-lg :where(h4+*):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
}

.prose-lg :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-size: .888889em;
    line-height: 1.5;
}

.prose-lg :where(thead th):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-end: .75em;
    padding-bottom: .75em;
    padding-inline-start: .75em;
}

.prose-lg :where(thead th:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-start: 0;
}

.prose-lg :where(thead th:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-end: 0;
}

.prose-lg :where(tbody td, tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-top: .75em;
    padding-inline-end: .75em;
    padding-bottom: .75em;
    padding-inline-start: .75em;
}

.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-start: 0;
}

.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    padding-inline-end: 0;
}

.prose-lg :where(figure):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.77778em;
    margin-bottom: 1.77778em;
}

.prose-lg :where(figure>*):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.prose-lg :where(figcaption):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1em;
    font-size: .888889em;
    line-height: 1.5;
}

.prose-lg :where(.prose-lg>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 0;
}

.prose-lg :where(.prose-lg>:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-bottom: 0;
}

.prose-lg :where([class~=lead]):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-top: 1.09091em;
    margin-bottom: 1.09091em;
    font-size: 1.22222em;
    line-height: 1.45455;
}

/* ===== Background & Text Utilities ===== */
.bg-header-background {
    background-color: var(--color-header-background);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-linear-primary {
    background: linear-gradient(90deg, #84120f, #9b0400);
}

.bg-gradient-1 {
    background: var(--color-secondary);
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary,
.active,
.active a {
    color: var(--color-secondary);
}

.text-foreground {
    color: var(--color-foreground);
}

/* ===== Buttons ===== */
.btn-topup {
    background-image: url(../images/btn-topup.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10.278vw;
    height: 3.194vw;
    max-width: 148px;
    max-height: 46px;
    display: inline-block;
}

.btn-topup-mobile {
    background-image: url(../images/btn-topup-mobile.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 106px;
    height: 38px;
    display: inline-block;
}

.btn-download-mobile {
    background-image: url(../images/btn-download-mobile.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 106px;
    height: 38px;
    display: inline-block;
}

/* ===== Fallback vw utilities (CDN không xử lý được) ===== */
.w-\[3\.2vw\] {
    width: 3.2vw;
}

.w-\[0\.994vw\] {
    width: 0.994vw;
}

.w-\[6\.4vw\] {
    width: 6.4vw;
}

.w-\[8\.472vw\] {
    width: 8.472vw;
}

.w-\[9\.722vw\] {
    width: 9.722vw;
}

.w-\[17\.067vw\] {
    width: 17.067vw;
}

.w-\[21\.333vw\] {
    width: 21.333vw;
}

.w-\[25\.6vw\] {
    width: 25.6vw;
}

.w-\[2\.133vw\] {
    width: 2.133vw;
}

.w-\[6\.173vw\] {
    width: 6.173vw;
}

.h-\[4\.267vw\] {
    height: 4.267vw;
}

.h-\[1\.415vw\] {
    height: 1.415vw;
}

.h-\[1\.944vw\] {
    height: 1.944vw;
}

.h-\[2\.778vw\] {
    height: 2.778vw;
}

.h-\[5\.333vw\] {
    height: 5.333vw;
}

.h-\[7\.467vw\] {
    height: 7.467vw;
}

.h-\[7\.881vw\] {
    height: 7.881vw;
}

.h-\[12\.8vw\] {
    height: 12.8vw;
}

.h-\[21\.333vw\] {
    height: 21.333vw;
}

.h-\[39\.982vw\] {
    height: 39.982vw;
}

.h-\[110vw\] {
    height: 110vw;
}

.h-\[4\.299vw\] {
    height: 4.299vw;
}

.size-\[6\.4vw\] {
    width: 6.4vw;
    height: 6.4vw;
}

.size-\[8\.472vw\] {
    width: 8.472vw;
    height: 8.472vw;
}

.size-\[8\.533vw\] {
    width: 8.533vw;
    height: 8.533vw;
}

.size-\[2\.361vw\] {
    width: 2.361vw;
    height: 2.361vw;
}

.size-\[2\.5vw\] {
    width: 2.5vw;
    height: 2.5vw;
}

.size-\[21\.333vw\] {
    width: 21.333vw;
    height: 21.333vw;
}

.ml-\[2\.133vw\] {
    margin-left: 2.133vw;
}

.mt-\[1\.067vw\] {
    margin-top: 1.067vw;
}

.mt-\[0\.833vw\] {
    margin-top: 0.833vw;
}

.mt-\[5vw\] {
    margin-top: 5vw;
}

.mt-\[17\.067vw\] {
    margin-top: 17.067vw;
}

.mb-\[4\.267vw\] {
    margin-bottom: 4.267vw;
}

.mb-\[2\.5vw\] {
    margin-bottom: 2.5vw;
}

.px-\[1\.067vw\] {
    padding-left: 1.067vw;
    padding-right: 1.067vw;
}

.px-\[0\.833vw\] {
    padding-left: 0.833vw;
    padding-right: 0.833vw;
}

.pt-\[2\.025vw\] {
    padding-top: 2.025vw;
}

.gap-\[0\.533vw\] {
    gap: 0.533vw;
}

.gap-\[0\.278vw\] {
    gap: 0.278vw;
}

.top-\[26\.375vw\] {
    top: 26.375vw;
}

.top-\[10vw\] {
    top: 10vw;
}

.top-\[6vw\] {
    top: 6vw;
}

.left-\[9vw\] {
    left: 9vw;
}

.left-\[3vw\] {
    left: 3vw;
}

.bottom-\[4\.267vw\] {
    bottom: 4.267vw;
}

.bottom-\[1\.667vw\] {
    bottom: 1.667vw;
}

.-left-\[9vw\] {
    left: -9vw;
}

/* ===== Animation Keyframes ===== */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translate(-60px);
    }

    to {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translate(60px);
    }

    to {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {

    0%,
    to {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ===== Animation Utility Classes ===== */
.animate-on-scroll {
    opacity: 0;
    transition: none;
}

.animate-on-scroll.animate-visible {
    animation-duration: .8s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-fill-mode: both;
}

.animate-fade-in-up.animate-visible {
    animation-name: fadeInUp;
}

.animate-fade-in.animate-visible {
    animation-name: fadeIn;
}

.animate-slide-in-left.animate-visible {
    animation-name: slideInLeft;
}

.animate-slide-in-right.animate-visible {
    animation-name: slideInRight;
}

.animate-scale-in.animate-visible {
    animation-name: scaleIn;
}