/* ===== 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;
    --color-accent: oklch(0.7 0.2 45);
    --color-bullet: rgba(152, 152, 152, 1);
    --background-primary: url(../images/public/3ca812ee-7012-44b0-8604-25f985b6d123.png);
    --background-download: rgba(215, 82, 0, 1);
    --background-news: url(../images/public/ac71b3d8-b9f1-49ae-8991-9306bf6935e8.png);
    --school-tab-active: url(../images/public/4920f37d-6916-494a-839e-60e381254385.png);
    --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
}

/* ===== 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;
    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;
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 2.1333333333vw;
    font-family: Inter, sans-serif;
}

@media (min-width: 768px) {
    .pagination {
        gap: 0.5555555556vw;
    }
}

.pagination__btn,
.pagination__page,
.pagination__ellipsis {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    border-radius: 1.0666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 3.7333333333vw;
    line-height: 1.428em;
    border: 1px solid #ffffff;
    transition: all 0.2s ease-out;
}

@media (min-width: 768px) {

    .pagination__btn,
    .pagination__page,
    .pagination__ellipsis {
        width: 2.2222222222vw;
        height: 2.2222222222vw;
        border-radius: 0.2777777778vw;
        font-size: 0.9722222222vw;
    }
}

.pagination__btn {
    background: #ffb216;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.pagination__btn svg {
    width: 2.1333333333vw;
    height: 3.2vw;
}

@media (min-width: 768px) {
    .pagination__btn svg {
        width: 0.5555555556vw;
        height: 0.8333333333vw;
    }
}

.pagination__btn:hover:not(:disabled) {
    background: #e69f14;
    transform: scale(1.05);
}

.pagination__btn:active:not(:disabled) {
    transform: scale(0.95);
}

.pagination__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination__page {
    background: #ffdf9e;
    color: #000;
    cursor: pointer;
    padding: 0;
    text-align: center;
}

.pagination__page:hover:not(.pagination__page--active) {
    background: #ffd284;
    transform: scale(1.05);
}

.pagination__page:active:not(.pagination__page--active) {
    transform: scale(0.95);
}

.pagination__page--active {
    background: #970000;
    color: #ffdf9e;
    border-color: #ffa2a5;
    cursor: default;
}

.pagination__ellipsis {
    background: #ffdf9e;
    color: #000;
    cursor: default;
    pointer-events: none;
}

/* ===== 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;
}

/* ===== 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;
}

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

.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;
}

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

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

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

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

.-translate-x-\[25\.6vw\] {
    transform: translateX(-25.6vw);
}

.-translate-x-\[9\.722vw\] {
    transform: translateX(-9.722vw);
}

.space-y-\[1\.067vw\]> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.067vw * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.067vw * var(--tw-space-y-reverse));
}

/* ===== Responsive fallback vw utilities (md breakpoint 768px) ===== */
@media (min-width: 768px) {
    .md\:w-\[9\.722vw\] {
        width: 9.722vw;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .md\:space-y-\[0\.278vw\]> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.278vw * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.278vw * var(--tw-space-y-reverse));
    }

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

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

@media (min-width: 640px) {
    .sm\:mt-\[0\.833vw\] {
        margin-top: 0.833vw;
    }

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

/* ===== Fix cho class !bg-bottom ===== */
.\!bg-bottom {
    background-position: bottom !important;
}

/* ===== Fallback cho aria-[current='true'] variants (CDN v3 không parse được) ===== */
[class*="aria-[current='true']:text-secondary"][aria-current="true"] {
    color: var(--color-secondary);
}

[class*="aria-[current='true']:bg-secondary"][aria-current="true"] {
    background-color: var(--color-secondary);
}

.section__main-menu {
    width: 100%;
    height: 22.9333333333vw
}

@media (min-width: 768px) {
    .section__main-menu {
        height: 13.1944444444vw
    }
}

.section__main-menu .menu-item {
    transition: all .3s ease-in-out;
    position: relative
}

.section__main-menu .menu-item:hover {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .3))
}

.section__main-menu .menu-item:hover img {
    animation: menuPulse .6s ease-in-out
}

@keyframes menuPulse {

    0%,
    to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.085)
    }
}

.section__main-menu .menu-item:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translate(-50%) scaleX(0);
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    transition: transform .3s ease-in-out
}

.section__main-menu .menu-item:hover:after {
    transform: translate(-50%) scaleX(1)
}

.tab__item {
    font-family: Inter, sans-serif;
    font-size: 3.2vw;
    font-weight: 700;
    width: 100%;
    height: 8.5333333333vw
}

@media (min-width: 768px) {
    .tab__item {
        font-size: .9722222222vw;
        line-height: .9722222222vw;
        width: 5.9722222222vw;
        height: 2.2222222222vw
    }
}

.tab__panel {
    padding-top: 2.6666666667vw
}

@media (min-width: 768px) {
    .tab__panel {
        padding-top: .6944444444vw
    }
}

.section__title {
    width: 100vw;
    height: 20vw
}

@media (min-width: 768px) {
    .section__title {
        width: 57.1527777778vw;
        height: 11.0416666667vw
    }
}

.search-input-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%
}

.search-input-container {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    height: 10.1333333333vw;
    padding: 0 3.2vw
}

@media (min-width: 768px) {
    .search-input-container {
        border-radius: 8px;
        padding: .6944444444vw .9722222222vw;
        height: 2.6388888889vw
    }
}

.search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 3.7333333333vw;
    color: #000
}

.search-input::placeholder {
    color: #5c5c5c
}

.search-input:focus {
    outline: none
}

@media (min-width: 768px) {
    .search-input {
        font-size: .9722222222vw
    }
}

.search-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10.1333333333vw;
    height: 10.1333333333vw;
    min-width: 10.1333333333vw;
    background: #ab0712;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all .3s ease-out;
    color: #fffaac
}

@media (min-width: 768px) {
    .search-button {
        width: 2.6388888889vw;
        height: 2.6388888889vw;
        min-width: 2.6388888889vw;
        border-radius: 8px
    }
}

.search-button:hover {
    transform: scale(1.05);
    background: #8b0510
}

.search-button:active {
    transform: scale(.95)
}

.search-button svg {
    width: 16px;
    height: 16px
}

@media (min-width: 768px) {
    .search-button svg {
        width: 1.3888888889vw;
        height: 1.3888888889vw
    }
}

.list-post__container {
    gap: 3.2vw
}

@media (min-width: 768px) {
    .list-post__container {
        gap: .6944444444vw
    }
}

.list-post__container .list-post-v2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: Inter, sans-serif;
    height: 58.9333333333vw
}

@media (min-width: 768px) {
    .list-post__container .list-post-v2 {
        height: 15.3472222222vw
    }
}

.list-post__container .post-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
    background: #fff4d8
}

.list-post__container .post-item:hover {
    background: #f5e6d3;
    color: #ab0712;
    font-weight: 700
}

.list-post__container .post-item:first-of-type .post-title {
    font-weight: 700;
    color: #ab0712
}

.list-post__container .post-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 4.2666666667vw;
    padding: 0 3.7333333333vw;
    height: 9.6vw
}

@media (min-width: 768px) {
    .list-post__container .post-content {
        gap: 1.1111111111vw;
        padding: 0 .9722222222vw;
        height: 2.5vw
    }
}

.list-post__container .post-title-wrapper {
    flex: 1;
    min-width: 0
}

.list-post__container .post-title {
    font-weight: 500;
    font-size: 3.7333333333vw;
    color: #2d2d2d;
    margin: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease-out
}

@media (min-width: 768px) {
    .list-post__container .post-title {
        font-size: .9722222222vw
    }
}

.list-post__container .post-date-wrapper {
    flex-shrink: 0
}

.list-post__container .post-date {
    font-weight: 500;
    font-size: 3.7333333333vw;
    line-height: 1.023em;
    color: #5a5a5a;
    white-space: nowrap
}

@media (min-width: 768px) {
    .list-post__container .post-date {
        font-size: .9722222222vw
    }
}

.list-post__container .pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center
}

@media (min-width: 768px) {
    .list-post__container .pagination-wrapper {
        justify-content: flex-end
    }
}

.list-post__container .no-results {
    width: 100%;
    padding: 8.5333333333vw 4.2666666667vw;
    text-align: center;
    background: #fff4d8;
    border-radius: 2.1333333333vw
}

@media (min-width: 768px) {
    .list-post__container .no-results {
        padding: 3.3333333333vw 1.6666666667vw;
        border-radius: .5555555556vw
    }
}

.list-post__container .no-results p {
    font-family: Inter, sans-serif;
    font-size: 4.2666666667vw;
    font-weight: 500;
    color: #5a5a5a;
    margin: 0
}

@media (min-width: 768px) {
    .list-post__container .no-results p {
        font-size: 1.1111111111vw
    }
}

.list-post__container .pagination {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 2.1333333333vw;
    font-family: Inter, sans-serif
}

@media (min-width: 768px) {
    .list-post__container .pagination {
        gap: .5555555556vw
    }
}

.list-post__container .pagination__btn,
.list-post__container .pagination__page,
.list-post__container .pagination__ellipsis {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    border-radius: 1.0666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 3.7333333333vw;
    line-height: 1.428em;
    border: 1px solid #ffffff;
    transition: all .2s ease-out
}

@media (min-width: 768px) {

    .list-post__container .pagination__btn,
    .list-post__container .pagination__page,
    .list-post__container .pagination__ellipsis {
        width: 2.2222222222vw;
        height: 2.2222222222vw;
        border-radius: .2777777778vw;
        font-size: .9722222222vw
    }
}

.list-post__container .pagination__btn {
    background: #ffb216;
    color: #fff;
    cursor: pointer;
    padding: 0
}

.list-post__container .pagination__btn svg {
    width: 2.1333333333vw;
    height: 3.2vw
}

@media (min-width: 768px) {
    .list-post__container .pagination__btn svg {
        width: .5555555556vw;
        height: .8333333333vw
    }
}

.list-post__container .pagination__btn:hover:not(:disabled) {
    background: #e69f14;
    transform: scale(1.05)
}

.list-post__container .pagination__btn:active:not(:disabled) {
    transform: scale(.95)
}

.list-post__container .pagination__btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.list-post__container .pagination__page {
    background: #ffdf9e;
    color: #000;
    cursor: pointer;
    padding: 0;
    text-align: center
}

.list-post__container .pagination__page:hover:not(.pagination__page--active) {
    background: #ffd284;
    transform: scale(1.05)
}

.list-post__container .pagination__page:active:not(.pagination__page--active) {
    transform: scale(.95)
}

.list-post__container .pagination__page--active {
    background: #970000;
    color: #ffdf9e;
    border-color: #ffa2a5;
    cursor: default
}

.list-post__container .pagination__ellipsis {
    background: #ffdf9e;
    color: #000;
    cursor: default;
    pointer-events: none
}

.section--news {
    width: 100%;
    height: 180.2666666667vw;
    padding: 0 4.2666666667vw;
    justify-content: end;
    margin-top: 12.8vw;
    position: relative
}

@media (min-width: 768px) {
    .section--news {
        margin: 0;
        height: 45.0694444444vw;
        gap: 1.6666666667vw;
        padding-bottom: 1.6666666667vw
    }
}

.section--news .view-all-btn {
    top: 2.1333333333vw;
    right: 4.2666666667vw
}

@media (min-width: 768px) {
    .section--news .view-all-btn {
        top: 0vw;
        right: 0vw;
        width: 2.6388888889vw;
        height: 2.6388888889vw
    }

    .section--news .view-all-btn svg {
        width: 1.25vw;
        height: 1.25vw
    }
}

.section--news .section__content {
    display: flex;
    flex-direction: column;
    gap: 4.2666666667vw;
    width: 100%;
    height: 100%
}

@media (min-width: 768px) {
    .section--news .section__content {
        flex-direction: row;
        align-items: flex-start;
        justify-content: start;
        margin: 0 auto;
        gap: 1.6666666667vw;
        width: 90.0694444444vw;
        height: 25.2777777778vw
    }
}

.section--news .news-swiper__wrapper {
    width: 100%
}

@media (min-width: 768px) {
    .section--news .news-swiper__wrapper {
        width: 40.625vw;
        height: 100%
    }
}

.section--news .section__news-tabs {
    width: 100%
}

@media (min-width: 768px) {
    .section--news .section__news-tabs {
        width: fit-content
    }
}

.section--news .section__news-tabs .news-tabs__container {
    width: 100%;
    min-height: 49.3333333333vw
}

@media (min-width: 768px) {
    .section--news .section__news-tabs .news-tabs__container {
        min-height: 100%;
        width: 41.6666666667vw;
        height: 100%
    }
}

.section--school {
    width: 100%;
    height: 105.3333333333vw
}

@media (min-width: 768px) {
    .section--school {
        height: 67.5vw
    }
}

.section--featured {
    width: 100%;
    height: 87.4666666667vw
}

@media (min-width: 768px) {
    .section--featured {
        padding-top: 1.5277777778vw;
        gap: 1.5277777778vw;
        height: 59.6527777778vw
    }
}

@media (min-width: 768px) {
    .section--featured .feature-swiper__container {
        padding-bottom: 1.5277777778vw
    }
}

.section--featured .feature-swiper {
    width: 93.6vw;
    height: 53.3333333333vw;
    min-height: 0
}

@media (min-width: 768px) {
    .section--featured .feature-swiper {
        width: 68.9583333333vw;
        height: 38.8194444444vw;
        max-width: 91.9444444444vw;
        max-height: 51.7361111111vw
    }
}

.section__contact {
    width: 100%;
    height: 49.0666666667vw;
    justify-content: flex-start
}

@media (min-width: 768px) {
    .section__contact {
        gap: 1.5277777778vw;
        padding-top: 6.9444444444vw;
        height: 45vw
    }
}

.section__jump-links {
    background: url(../images/bg-jump-links.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 .75rem rgba(79, 86, 104, .1));
    top: 46.1333333333vw;
    width: 69.8666666667vw;
    height: 22.6666666667vw
}

@media (min-width: 768px) {
    .section__jump-links {
        top: 45.5555555556vw;
        width: 36.3888888889vw;
        height: 11.8055555556vw
    }
}

.section__jump-links .game-logo {
    width: 18.9333333333vw;
    height: 18.9333333333vw
}

@media (min-width: 768px) {
    .section__jump-links .game-logo {
        width: 9.8611111111vw;
        height: 9.8611111111vw
    }
}

.section__jump-links .download--links {
    gap: 1.0666666667vw
}

@media (min-width: 768px) {
    .section__jump-links .download--links {
        gap: .5555555556vw
    }
}

.section__jump-links .btn-download {
    width: 25.0666666667vw;
    height: 5.6vw
}

@media (min-width: 768px) {
    .section__jump-links .btn-download {
        width: 13.0555555556vw;
        height: 2.9166666667vw
    }
}

.section__jump-links .btn-topup {
    width: 18.9333333333vw;
    height: 18.9333333333vw
}

@media (min-width: 768px) {
    .section__jump-links .btn-topup {
        width: 9.8611111111vw;
        height: 9.8611111111vw
    }
}

.custom-select {
    position: relative;
    width: 37.3333333333vw;
    height: 10.1333333333vw;
    font-family: "DVN - Beaufort", serif
}

.custom-select:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/select-bg.png) no-repeat center center;
    background-size: contain;
    pointer-events: none
}

@media (min-width: 768px) {
    .custom-select {
        width: 12.7777777778vw;
        height: 3.3333333333vw
    }
}

.custom-select .select-trigger {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4.2666666667vw;
    padding: 0 2.6666666667vw;
    cursor: pointer;
    transition: all .2s ease-out;
    overflow: hidden
}

@media (min-width: 768px) {
    .custom-select .select-trigger {
        gap: .2777777778vw;
        padding: 0 1.1111111111vw 0 .6944444444vw
    }
}

.custom-select .select-trigger:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #ffffff1a, #fff0 50%);
    pointer-events: none
}

.custom-select .select-value {
    flex: 1;
    font-weight: 500;
    font-size: 3.7333333333vw;
    line-height: 3.7333333333vw;
    text-align: center;
    color: #fff8a7;
    text-shadow: 0px .2666666667vw .2666666667vw rgba(0, 0, 0, .3)
}

@media (min-width: 768px) {
    .custom-select .select-value {
        margin-top: -.2777777778vw;
        font-size: 1.3888888889vw;
        line-height: 1.3888888889vw;
        text-shadow: 0px .0694444444vw .0694444444vw rgba(0, 0, 0, .3)
    }
}

.custom-select .select-arrow {
    width: 3.7333333333vw;
    height: 1.8666666667vw;
    flex-shrink: 0;
    transition: transform .2s ease-out
}

@media (min-width: 768px) {
    .custom-select .select-arrow {
        width: 1.3888888889vw;
        height: .6944444444vw
    }
}

.is-open .custom-select .select-arrow {
    transform: rotate(180deg)
}

.custom-select .select-dropdown {
    position: absolute;
    top: calc(100% + 1.0666666667vw);
    left: 0;
    right: 0;
    background: #c12633;
    border: .2666666667vw solid #fffbbe;
    border-radius: 1.0666666667vw;
    max-height: 53.3333333333vw;
    overflow-y: auto;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 1.0666666667vw 2.1333333333vw #0000004d
}

@media (min-width: 768px) {
    .custom-select .select-dropdown {
        top: calc(100% + .2777777778vw);
        border: .0694444444vw solid #fffbbe;
        border-radius: .2777777778vw;
        max-height: 13.8888888889vw;
        box-shadow: 0 .2777777778vw .5555555556vw #0000004d
    }
}

.custom-select .select-dropdown::-webkit-scrollbar {
    width: 1.6vw
}

@media (min-width: 768px) {
    .custom-select .select-dropdown::-webkit-scrollbar {
        width: .4166666667vw
    }
}

.custom-select .select-dropdown::-webkit-scrollbar-track {
    background: #0003
}

.custom-select .select-dropdown::-webkit-scrollbar-thumb {
    background: #fffbbe;
    border-radius: .8vw
}

@media (min-width: 768px) {
    .custom-select .select-dropdown::-webkit-scrollbar-thumb {
        border-radius: .2083333333vw
    }
}

.custom-select .select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #fff9a1
}

.custom-select .select-option {
    padding: 1.0666666667vw 2.1333333333vw;
    font-weight: 500;
    font-size: 3.7333333333vw;
    line-height: 1.5em;
    color: #fff8a7;
    cursor: pointer;
    transition: all .2s ease-out
}

@media (min-width: 768px) {
    .custom-select .select-option {
        padding: .4166666667vw .6944444444vw;
        font-size: 1.3888888889vw
    }
}

.custom-select .select-option:hover {
    background: #ffffff1a;
    color: #fffbbe
}

.custom-select .select-option.selected,
.custom-select .select-option[aria-selected=true] {
    background: #fffbbe33;
    color: #fffbbe;
    font-weight: 700
}

.custom-select .select-option--clear {
    border-bottom: .2666666667vw solid rgba(255, 251, 190, .2);
    font-style: italic;
    opacity: .9
}

@media (min-width: 768px) {
    .custom-select .select-option--clear {
        border-bottom: .0694444444vw solid rgba(255, 251, 190, .2)
    }
}

.custom-select .select-option--clear:hover {
    opacity: 1
}

.custom-select .select-input {
    display: none
}

.section--ranking {
    width: 100%;
    height: 181.0666666667vw;
    margin-top: 4.2666666667vw;
    overflow: hidden
}

@media (min-width: 768px) {
    .section--ranking {
        margin-top: 0;
        height: 70.4861111111vw
    }
}

.section--ranking .section__bg {
    width: 389.8666666667vw;
    height: 200vw;
    left: -139.7333333333vw;
    top: -5.3333333333vw
}

@media (min-width: 768px) {
    .section--ranking .section__bg {
        top: 5.4861111111vw;
        left: -.0548611111vw;
        width: 100.2083333333vw;
        height: 64.2361111111vw
    }
}

.section--ranking .section__title {
    width: 100vw;
    height: 20vw
}

@media (min-width: 768px) {
    .section--ranking .section__title {
        width: 57.1527777778vw;
        height: 11.0416666667vw
    }
}

.section--ranking .section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.1333333333vw
}

@media (min-width: 768px) {
    .section--ranking .section__content {
        gap: 1.1111111111vw;
        padding-top: 1.9743055556vw
    }
}

.section--ranking .section__note {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 3.2vw;
    color: #790007;
    top: 165.3333333333vw;
    width: 100%;
    padding: 0 4.2666666667vw;
    text-align: center
}

@media (min-width: 768px) {
    .section--ranking .section__note {
        padding: 0;
        top: 47.2083333333vw;
        left: 7.1944444444vw;
        width: 9.0972222222vw;
        height: 5.8333333333vw;
        font-size: .9722222222vw
    }
}

.rank-tabs {
    display: flex;
    flex-direction: row;
    gap: 1.0666666667vw;
    width: 91.4666666667vw;
    overflow-x: auto;
    scrollbar-width: none
}

.rank-tabs::-webkit-scrollbar {
    display: none
}

@media (min-width: 768px) {
    .rank-tabs {
        gap: .4861111111vw;
        width: auto;
        overflow-x: visible;
        margin: .8333333333vw 0;
        margin-top: 40px;
    }
}

.rank-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36.8vw;
    height: 9.6vw;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    font-family: "DVN - Beaufort", Beaufort for LOL, sans-serif;
    font-weight: 700;
    font-size: 3.7333333333vw;
    text-align: center;
    padding: 0 1.0666666667vw;
    transition: all .2s ease-out;
    border-radius: .5333333333vw
}

@media (min-width: 768px) {
    .rank-tab {
        width: 11.4583333333vw;
        height: 2.9861111111vw;
        font-size: 1.1111111111vw;
        padding: 0 .5555555556vw;
        border-radius: .1388888889vw
    }
}

.rank-tab--active {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(0deg, #fff77b 23%, #fff8a7 66%);
    -webkit-text-fill-color: transparent;
    box-shadow: 0 0 2.1333333333vw #d0323280
}

.rank-tab--active:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../images/tab-active.png) no-repeat center center;
    background-size: cover
}

@media (min-width: 768px) {
    .rank-tab--active {
        border-width: .0694444444vw;
        box-shadow: 0 0 .5555555556vw #d0323280
    }
}

.rank-tab--inactive {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(0deg, #c00 23%, #940000 66%);
    -webkit-text-fill-color: transparent
}

.rank-tab--inactive:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../images/tab-inactive.png) no-repeat center center;
    background-size: cover
}

@media (min-width: 768px) {
    .rank-tab--inactive {
        border-width: .0694444444vw
    }
}

.rank-table__filter {
    gap: 2.1333333333vw
}

@media (min-width: 768px) {
    .rank-table__filter {
        gap: 1.1111111111vw
    }
}

.rank-table__wrapper {
    width: 91.4666666667vw;
    height: 105.8666666667vw;
    overflow-x: auto
}

@media (min-width: 768px) {
    .rank-table__wrapper {
        width: 65.5972222222vw;
        height: 27.8472222222vw;
        overflow: hidden
    }
}

.rank-table__head,
.rank-table__skeleton-row,
.rank-table__row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
    align-items: center;
    height: 2.5347222222vw
}

.rank-table__head {
    color: #790007;
    background-color: #ffb5b5;
    height: 9.8666666667vw;
    font-family: "DVN - Beaufort", Beaufort for LOL, sans-serif
}

@media (min-width: 768px) {
    .rank-table__head {
        height: 2.5694444444vw
    }
}

.rank-table__head .rank-table__cell {
    font-weight: 700;
    font-size: 2.6666666667vw;
    color: #790007;
    text-align: center;
    text-transform: uppercase
}

@media (min-width: 768px) {
    .rank-table__head .rank-table__cell {
        font-size: .8333333333vw
    }
}

.rank-table__skeleton-row {
    height: 9.6vw
}

@media (min-width: 768px) {
    .rank-table__skeleton-row {
        height: 2.5vw
    }
}

.rank-table__skeleton-row .rank-table__cell {
    padding: 1.6vw 1.0666666667vw
}

@media (min-width: 768px) {
    .rank-table__skeleton-row .rank-table__cell {
        padding: .4166666667vw .2777777778vw
    }
}

.skeleton-block {
    background: #79000726;
    border-radius: 1.0666666667vw;
    height: 3.7333333333vw;
    animation: skeleton-pulse 1.4s ease-in-out infinite
}

@media (min-width: 768px) {
    .skeleton-block {
        height: .9722222222vw;
        border-radius: .2777777778vw
    }
}

@keyframes skeleton-pulse {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

.rank-table__row {
    height: 9.6vw
}

@media (min-width: 768px) {
    .rank-table__row {
        height: 2.5vw
    }
}

.rank-table__cell {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 2.9333333333vw;
    color: #790007;
    text-align: center;
    padding: 0 1.0666666667vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (min-width: 768px) {
    .rank-table__cell {
        font-size: .8333333333vw;
        padding: 0 .2777777778vw
    }
}

.rank-table__cell--rank {
    display: flex;
    align-items: center;
    justify-content: center
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    border-radius: 50%;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    line-height: 1
}

@media (min-width: 768px) {
    .rank-badge {
        width: 1.7444444444vw;
        height: 1.7444444444vw;
        font-size: .9722222222vw
    }
}

.rank-badge--gold {
    background: #6d0000;
    color: #ffc3c3;
    border: 1px solid rgb(255, 237, 137);
    box-shadow: 0 0 1.6vw #ffc80099
}

@media (min-width: 768px) {
    .rank-badge--gold {
        box-shadow: 0 0 .4166666667vw #ffc80099
    }
}

.rank-badge--silver {
    background: #fff2a8;
    color: #910000;
    box-shadow: 0 0 1.6vw #b4b4b499
}

@media (min-width: 768px) {
    .rank-badge--silver {
        box-shadow: 0 0 .4166666667vw #b4b4b499
    }
}

.rank-badge--bronze {
    background: #ffa628;
    color: #4c3100;
    box-shadow: 0 0 1.6vw #b4641499
}

@media (min-width: 768px) {
    .rank-badge--bronze {
        box-shadow: 0 0 .4166666667vw #b4641499
    }
}

.rank-number {
    font-family: "DVN - Beaufort", Beaufort for LOL, sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    color: #790007
}

@media (min-width: 768px) {
    .rank-number {
        font-size: .9722222222vw
    }
}

.rank-table__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6.4vw 0;
    font-family: Roboto, sans-serif;
    font-size: 3.4666666667vw;
    color: #790007
}

@media (min-width: 768px) {
    .rank-table__empty {
        padding: 1.6666666667vw 0;
        font-size: .9722222222vw
    }
}

.rank-table__pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.6vw
}

@media (min-width: 768px) {
    .rank-table__pagination {
        gap: .5555555556vw
    }
}

.rank-table__pagination .pagination__btn,
.rank-table__pagination .pagination__page,
.rank-table__pagination .pagination__ellipsis {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    border-radius: 1.0666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    border: 1px solid #ffffff;
    transition: all .2s ease-out
}

@media (min-width: 768px) {

    .rank-table__pagination .pagination__btn,
    .rank-table__pagination .pagination__page,
    .rank-table__pagination .pagination__ellipsis {
        width: 2.2222222222vw;
        height: 2.2222222222vw;
        border-radius: .2777777778vw;
        font-size: .9722222222vw
    }
}

.rank-table__pagination .pagination__btn {
    background: #ffb216;
    color: #fff;
    cursor: pointer;
    padding: 0
}

.rank-table__pagination .pagination__btn :global(svg) {
    width: 1.6vw;
    height: 2.6666666667vw
}

@media (min-width: 768px) {
    .rank-table__pagination .pagination__btn :global(svg) {
        width: .5555555556vw;
        height: .8333333333vw
    }
}

.rank-table__pagination .pagination__btn:hover:not(:disabled) {
    background: #e69f14;
    transform: scale(1.05)
}

.rank-table__pagination .pagination__btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.rank-table__pagination .pagination__page {
    background: #ffdf9e;
    color: #000;
    cursor: pointer;
    padding: 0;
    text-align: center
}

.rank-table__pagination .pagination__page:hover:not(.pagination__page--active) {
    background: #ffd284;
    transform: scale(1.05)
}

.rank-table__pagination .pagination__page.pagination__page--active {
    background: #970000;
    color: #ffdf9e;
    border-color: #ffa2a5;
    cursor: default
}

.rank-table__pagination .pagination__ellipsis {
    background: #ffdf9e;
    color: #000;
    cursor: default;
    pointer-events: none
}

.main__layout:before {
    content: "";
    position: absolute;
    top: 48vw;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background: url(../images/home-bg-mobile.png) no-repeat center top/cover;
    background-attachment: scroll;
    z-index: -1;
    opacity: 1
}

@media (min-width: 768px) {
    .main__layout:before {
        top: 48.2638888889vw;
        background: var(--background-primary) no-repeat center top/cover
    }
}

/* ===== Home-specific vw fallbacks ===== */
@media (min-width: 768px) {
    .md\:\!w-\[12\.5vw\] {
        width: 12.5vw !important;
    }
}

/* ===== Fallback z-index classes ===== */
.z-1 {
    z-index: 1;
}

.-z-1 {
    z-index: -1;
}

.-z-20 {
    z-index: -20;
}

/* ===== Fallback cho bg-school-section ===== */
.bg-school-section {
    background: transparent;
}

/* ===== Fallback cho 3xl:!bg-top ===== */
@media (min-width: 1920px) {
    .\33xl\:\!bg-top {
        background-position: top !important;
    }
}

/* ===== Fallback cho max-w-screen-3xl ===== */
@media (min-width: 1920px) {
    .\33xl\:max-w-screen-3xl {
        max-width: 1920px;
    }
}

/* ===== Swiper Core CSS (từ Tailwind v4 output) ===== */
:root {
    --swiper-theme-color: #007aff;
}

.swiper {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
    overflow: hidden;
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column;
}

.swiper-wrapper {
    z-index: 1;
    width: 100%;
    height: 100%;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
    display: flex;
    position: relative;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate(0);
}

.swiper-horizontal {
    touch-action: pan-y;
}

.swiper-vertical {
    touch-action: pan-x;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    transition-property: transform;
    display: block;
    position: relative;
}

.swiper-slide-invisible-blank {
    visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto;
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d;
}

.swiper-3d {
    perspective: 1200px;
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d;
}

.swiper-css-mode>.swiper-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: auto;
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none;
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999;
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after);
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026;
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, #00000080, #0000);
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, #00000080, #0000);
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(#0000, #00000080);
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(#00000080, #0000);
}

.swiper-lazy-preloader {
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-top-color: #0000;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    margin-left: -21px;
    position: absolute;
    top: 50%;
    left: 50%;
}

:is(.swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader {
    animation: 1s linear infinite swiper-preloader-spin;
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===== Swiper custom styles ===== */
.swiper-pagination-bullet {
    background-color: var(--color-bullet);
    width: 4px;
    height: 4px;
    margin: 0 4px;
    padding: 2.5px;
    transform: rotate(45deg);
}

.swiper-pagination-bullet-active {
    background-color: var(--color-primary);
    width: 12px;
    height: 12px;
    padding: 0;
    transform: rotate(0);
    -webkit-mask-image: url(../images/bullet-active.svg);
    mask-image: url(../images/bullet-active.svg);
}

@media (min-width: 1024px) {
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 8px;
        padding: 4px;
    }

    .swiper-pagination-bullet-active {
        width: 24px;
        height: 24px;
    }

    .feature-swiper-pagination .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
    }

    .feature-swiper-pagination .swiper-pagination-bullet-active {
        width: 32px;
        height: 32px;
    }
}

.news-swiper .swiper-slide {
    transition: transform .6s ease-in-out;
}

.news-swiper .swiper-slide-active {
    animation: .6s ease-in-out newsScaleIn;
}

@keyframes newsScaleIn {
    0% {
        transform: scale(.85);
    }

    to {
        transform: scale(1);
    }
}

.school-swiper .swiper-slide img:nth-child(2),
.school-swiper .swiper-slide.swiper-slide-active img:first-of-type {
    opacity: 0;
    display: none;
}

.school-swiper .swiper-slide.swiper-slide-active img:nth-child(2) {
    opacity: 1;
    display: block;
}

.school-swiper .swiper-slide {
    flex: 0 0 auto;
    width: calc((100% - 2 * 20px) / 3);
}

@media (min-width: 375px) {
    .school-swiper .swiper-slide {
        width: calc((100% - 3 * 20px) / 4);
    }
}

@media (min-width: 768px) {
    .school-swiper .swiper-slide {
        width: calc((100% - 4 * 20px) / 5);
    }
}

@media (min-width: 1280px) {
    .school-swiper .swiper-slide {
        width: calc((100% - 5 * 20px) / 6);
    }
}

/* ===== Other missing utility classes ===== */
.feature-frame {
    width: 930px;
    height: 500px;
}

.bg-news-page {
    background: var(--background-news);
    background-repeat: no-repeat;
}

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

.bg-linear-secondary {
    background: linear-gradient(#ffd67d, #ffdfad, #ffedc5);
}

.text-gradient-primary {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(#e9637e 19.86%, #bd2e47 39.77%, #960015 76.91%);
    -webkit-background-clip: text;
}

.text-gradient-secondary {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(#fff8a7 33.93%, #fff77b 76.91%);
    -webkit-background-clip: text;
}

.text-stroke {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-primary);
}

.animation-laluot {
    z-index: 2;
    filter: brightness(1.7);
    animation: 2s linear 1s infinite laluot;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-mask-image: -webkit-linear-gradient(153deg, #fff0 45%, #fff 50%, #fff0 55%);
    -webkit-mask-size: 300% 200%;
    mask-size: 300% 200%;
}

@keyframes laluot {
    0% {
        -webkit-mask-position: 150% 0;
        mask-position: 150% 0;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

/* ===== Gradient text FUNFINITY (thay thế bg-linear-[...] v4) ===== */
.bg-gradient-funfinity {
    background: linear-gradient(0deg, rgb(0, 192, 250) 0%, rgb(1, 129, 240) 51%, rgb(1, 94, 234) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/* ===== Animate stagger ===== */
.animate-stagger> :first-child {
    animation-delay: 0s;
}

.animate-stagger> :nth-child(2) {
    animation-delay: .1s;
}

.animate-stagger> :nth-child(3) {
    animation-delay: .2s;
}

.animate-stagger> :nth-child(4) {
    animation-delay: .3s;
}

.animate-stagger> :nth-child(5) {
    animation-delay: .4s;
}

.animate-stagger> :nth-child(6) {
    animation-delay: .5s;
}

.animate-stagger> :nth-child(7) {
    animation-delay: .6s;
}

.animate-stagger> :nth-child(8) {
    animation-delay: .7s;
}

/* ===== News item ===== */
.news-item {
    background: linear-gradient(90deg, #84120f, #9b0400);
}

/* ===== Line clamp ===== */
.line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

/* ===== Screen reader only ===== */
.sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
}

/* ===== Footer bg ===== */
.footer-bg {
    background: linear-gradient(90deg, #1b569f, #0f4cd9);
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    .animate-on-scroll.animate-visible {
        animation: none !important;
    }
}

/* ===== School tab active state ===== */
.school-tab[aria-selected="true"]:before {
    content: "";
    background-image: var(--school-tab-active);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 120%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.school-tab[aria-selected="true"] span {
    color: #8c527a;
}

/* ===== Navigation item active ===== */
.nav-item[aria-current="true"] {
    background: url(../images/sprite_1.png) var(--color-primary);
    background-position: -734px -248px;
    background-repeat: no-repeat;
    background-size: 1000px 500px;
}