:root {
    --color-primary: #d9000d;
    --color-dark: #333333;
    --color-secondary: #8189B0;
    --color-text-light: #9F9F9F;
    --color-bg-light: #F2F2F2;
    --color-muted: #f2f2f2;
    --color-blue: #459AEF;
    --color-yellow: #F5A623;
    --color-white: #fff;
}

body {
    font-family: "Baloo Da 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.banner-swiper-wrap {
    position: relative;
    overflow: visible;
}

.banner-swiper {
    position: relative;
    z-index: 2;
    border-radius: 50px;
    overflow: hidden;
}

.banner-swiper-wrap::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: -28px;
    right: -28px;
    z-index: 1;
    border-radius: 74px;
    background: #E7EAED 0% 0% no-repeat padding-box;
    pointer-events: none;
}

.bg-color-yellow-100 {
    background-color: #f5a5231c !important;
}

.menu-btn.active {
    background-color: var(--color-primary) !important;
    color: var(--color-white);
    box-shadow: 0px 0px 5px #FF00005A;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.menu-item.active {
    color: var(--color-primary);
}

.pagination.active {
    color: var(--color-dark);
    font-weight: 800;
}

.faq {
    background: linear-gradient(to bottom, #fff 0%, #fff 44%, #fff 44%, #fff 55%, #333333 55%, #333333 100%);
}

.branch-menu.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.scrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.scrollbar::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 6px;
    border: 3px solid #f0f0f0;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}


@media (max-width: 768px) {
    .branch-btn.active {
        color: var(--color-primary);
        border-bottom: 2px solid var(--color-primary);
    }

    .banner-swiper-wrap::before {
        display: none;
    }
}

@media (min-width: 768px) {
    .branch-btn.active {
        color: var(--color-primary);
        border-left: 2px solid var(--color-primary);
    }
}