/* ===== 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);
    --news-page-bg: transparent;

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

/* ===== News Section ===== */
.news-page__wrapper:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    background: var(--news-page-bg) no-repeat;
    background-size: cover;
    background-position: top;
    z-index: 10;
    top: 42.6666666667vw;
}

@media (min-width: 768px) {
    .news-page__wrapper:before {
        top: 41.6666666667vw;
    }
}

.news-page__wrapper .hidden {
    display: none !important;
}

.news-page__wrapper .news-section {
    width: 100%;
    margin: 0 auto;
    padding: 0 5.3333333333vw;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section {
        padding: 0 1.3888888889vw;
        max-width: 1280px;
    }
}

.news-page__wrapper .news-section__header {
    padding-top: 13.8666666667vw;
    padding-bottom: 5.3333333333vw;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__header {
        padding-top: 3.6111111111vw;
        padding-bottom: 1.3888888889vw;
    }
}

.news-page__wrapper .news-section__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__tabs {
        gap: 40px;
    }
}

.news-page__wrapper .news-section__tab {
    text-decoration: none;
    font-family: "DVN - Beaufort", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #373737;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color .3s ease;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__tab {
        font-size: 28px;
    }
}

.news-page__wrapper .news-section__tab:hover,
.news-page__wrapper .news-section__tab--active {
    color: #971023;
}

.news-page__wrapper .news-section__divider {
    width: 100%;
    height: 2px;
    background-color: #6b6b6b;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__divider {
        margin-bottom: 12px;
    }
}

.news-page__wrapper .news-section__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__content {
        gap: 18px;
    }
}

.news-page__wrapper .news-section__list {
    display: flex;
    flex-direction: column;
}

.news-page__wrapper .news-section__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16vw 5.3333333333vw;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__empty {
        padding: 4.1666666667vw 1.3888888889vw;
    }
}

.news-page__wrapper .news-section__empty-icon {
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    background-color: #e5e5e5;
    border-radius: 50%;
    margin-bottom: 4.2666666667vw;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__empty-icon {
        width: 5.5555555556vw;
        height: 5.5555555556vw;
        margin-bottom: 1.1111111111vw;
    }
}

.news-page__wrapper .news-section__empty-text {
    font-size: 4.2666666667vw;
    color: #6b6b6b;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-section__empty-text {
        font-size: 1.1111111111vw;
    }
}

.news-page__wrapper .news-pagination {
    display: flex;
    justify-content: center;
    padding: 5.3333333333vw 0;
}

@media (min-width: 768px) {
    .news-page__wrapper .news-pagination {
        padding: 1.3888888889vw 0;
    }
}

/* ===== News Card ===== */
.news-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 2.6666666667vw 0;
}

@media (min-width: 768px) {
    .news-card {
        flex-direction: row;
        gap: 12px;
        padding: .6944444444vw 0;
    }
}

.news-card:hover .news-card__title {
    color: #971023;
}

.news-card .news-card__content-wrapper {
    position: relative;
    flex-shrink: 0;
    flex: 1;
}

.news-card .news-card__image-bg {
    width: 100%;
    aspect-ratio: 278/156;
    overflow: hidden;
    border-radius: 4px;
    display: none;
}

@media (min-width: 768px) {
    .news-card .news-card__image-bg {
        width: 278px;
        aspect-ratio: 278/156;
        display: block;
    }
}

.news-card .news-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.news-card .news-card:hover .news-card__image {
    transform: scale(1.05);
}

.news-card .news-card__badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 32px;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    border: .38px solid #4a0000;
    background: #fff0;
    border-radius: 4px;
    display: none;
}

@media (min-width: 768px) {
    .news-card .news-card__badge {
        width: 100px;
        height: 32px;
    }
}

.news-card .news-card__badge-text {
    font-family: "DVN - Beaufort", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    background: linear-gradient(90deg, #0f0c0b, #431115, #7e1820 0%, #951b25);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0px .73px .73px rgba(0, 0, 0, .3);
}

.news-card .news-card__content {
    display: flex;
    flex-direction: column;
    gap: 4;
    flex: 1;
    justify-content: center;
}

@media (min-width: 768px) {
    .news-card .news-card__content {
        gap: 15px;
    }
}

.news-card .news-card__title {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
    margin: 0;
    transition: color .3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .news-card .news-card__title {
        font-size: 32px;
        line-height: 1.2;
    }
}

.news-card .news-card__description {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #000;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: none;
}

@media (min-width: 768px) {
    .news-card .news-card__description {
        font-size: 24px;
        line-height: 1.25;
        display: inline-flex;
    }
}

.news-card .news-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-card .news-card__date {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    color: #971023;
}

@media (min-width: 768px) {
    .news-card .news-card__date {
        font-size: 20px;
        line-height: 1.1;
    }
}

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

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

/* ===== Swiper Core CSS ===== */
: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-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;
    }
}

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

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

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

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

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