@font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --app-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --system-line-image: url("/images/line_footer.png");
    --system-line-height: 7px;
}

html,
body,
#root,
.light-mode-layout,
.dark-mode-layout,
.ant-app,
.ant-layout,
.ant-modal,
.ant-drawer,
.ant-popover,
.ant-dropdown,
.ant-tooltip,
.ant-notification,
.ant-message {
    font-family: var(--app-font-family);
}

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body div,
body a,
body li,
body td,
body th,
body label,
body input,
body textarea,
body select,
body button,
body strong,
body small,
body em,
body .btn,
body .form-control,
body .dropdown-item,
body .dropdown-menu,
body .nav-link,
body .navbar-brand,
body .card-title,
body .card-text,
body .select2-container .select2-selection__rendered,
body .select2-results__option,
body .ant-typography,
body .ant-btn,
body .ant-input,
body .ant-input-affix-wrapper,
body .ant-input-affix-wrapper input,
body .ant-select,
body .ant-select-selector,
body .ant-select-selection-item,
body .ant-select-selection-placeholder,
body .ant-form-item-label > label,
body .ant-menu,
body .ant-menu-title-content,
body .ant-tabs-tab-btn,
body .ant-pagination,
body .ant-collapse,
body .ant-drawer-title,
body .ant-modal-title,
body .ant-table,
body .ant-table-wrapper,
body .swiper,
body .swiper-slide {
    font-family: var(--app-font-family) !important;
}

body .ant-layout-header,
body .ant-layout-footer,
body header.top_menu_backend,
body header.top_menu,
body footer.footer {
    position: relative;
}

body .ant-layout-header::before,
body header.top_menu_backend::before,
body header.top_menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--system-line-height);
    background: var(--system-line-image) center top / 100% 100% no-repeat;
    pointer-events: none;
}

/* Backend pages: keep line outside header and render full-width top/bottom bars */
body header.top_menu_backend::before {
    display: none;
}

body header.top_menu_backend {
    margin-top: var(--system-line-height) !important;
}

/* Student pages: keep line outside header and always show bottom line */
body header.top_menu::before {
    display: none;
}

body header.top_menu {
    margin-top: var(--system-line-height) !important;
}

body .body_frontend.wrapper {
    position: relative;
    min-height: calc(100vh - var(--system-line-height));
    padding-bottom: var(--system-line-height);
}

body .body_frontend.wrapper::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--system-line-height);
    background: var(--system-line-image) center top / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 2001;
}

body .body_frontend.wrapper::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--system-line-height);
    background: var(--system-line-image) center bottom / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 2001;
}

body.wrraped_body_backend .wrapper._bg4586,
body .wrapper_backend {
    position: relative;
    min-height: 100vh;
    padding-bottom: var(--system-line-height);
}

body.wrraped_body_backend .wrapper._bg4586::before,
body .wrapper_backend::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--system-line-height);
    background: var(--system-line-image) center top / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 2001;
}

body.wrraped_body_backend .wrapper._bg4586::after,
body .wrapper_backend::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--system-line-height);
    background: var(--system-line-image) center bottom / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 2001;
}

body .ant-layout-footer::after,
body footer.footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--system-line-height);
    background: var(--system-line-image) center bottom / 100% 100% no-repeat;
    pointer-events: none;
}

body .ant-btn {
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

body .ant-btn-default:not(:disabled):not(.ant-btn-disabled),
body .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-color-primary) {
    border-radius: 999px;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: var(--inside-primary) !important;
    box-shadow: none !important;
}

body .ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover,
body .ant-btn-default:not(:disabled):not(.ant-btn-disabled):focus,
body .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-color-primary):hover,
body .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-color-primary):focus {
    border-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: var(--inside-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

body .ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover span,
body .ant-btn-default:not(:disabled):not(.ant-btn-disabled):focus span,
body .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-color-primary):hover span,
body .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-color-primary):focus span {
    color: var(--inside-primary) !important;
}

body .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover,
body .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
}

/* Library detail overrides */
.hJoZnD {
    color: var(--primary-color) !important;
}
#detail-video .daily_detail_title {
    color: var(--primary-color) !important;
}
#detail-video .title_related_video {
    font-weight: 500 !important;
}

/* Global line behavior: top line always visible; footer line sticks to document bottom */
body {
    position: relative;
    min-height: 100vh;
    padding-top: var(--system-line-height);
    padding-bottom: 0;
    box-sizing: border-box;
}

body .body_frontend.wrapper::before,
body.wrraped_body_backend .wrapper._bg4586::before,
body .wrapper_backend::before {
    position: fixed !important;
}

body .body_frontend.wrapper::after {
    position: fixed !important;
}

body.wrraped_body_backend .wrapper._bg4586::after,
body .wrapper_backend::after {
    content: none !important;
}

body.wrraped_body_backend {
    position: relative;
    min-height: 100vh;
}

body.wrraped_body_backend::after {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--system-line-height);
    background: var(--system-line-image) center bottom / 100% 100% no-repeat;
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    display: none;
    z-index: 2001;
}

body.wrraped_body_backend.show-footer::after {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

body.login-page::before {
    display: none !important;
}

body.login-page::after {
    display: none !important;
}

body.login-page {
    padding-top: 0 !important;
}

body.font-sans.antialiased {
    padding-top: unset !important;
}

body.font-sans.antialiased.login-page::before,
body.font-sans.antialiased.login-page::after {
    display: none !important;
}

.menu_left_backend .sub_menu_child,
.menu_left_frontend .sub_menu_child {
    border-radius: 10px;
    overflow: hidden;
}

.menu_left_backend .sub_menu_child .sub_menu--link:hover,
.menu_left_frontend .sub_menu_child .sub_menu--link:hover {
    border-radius: 8px;
}

.light-mode-layout .vertical_menu .ant-menu-item:not(.ant-menu-item-selected):hover,
.light-mode-layout .vertical_menu .ant-menu-root.ant-menu>.ant-menu-item-selected:hover,
.light-mode-layout .vertical_menu .ant-menu-sub .ant-menu-item-selected:hover,
.light-mode-layout .vertical_menu .ant-menu-root.ant-menu>.ant-menu-submenu>.ant-menu-sub>.ant-menu-item.ant-menu-item-selected:hover,
.light-mode-layout .vertical_menu .ant-menu-root.ant-menu>.ant-menu-submenu.ant-menu-submenu-vertical .ant-menu-submenu-title:hover,
.light-mode-layout .vertical_menu .ant-menu-root.ant-menu>.ant-menu-submenu>.ant-menu-sub>.ant-menu-submenu>.ant-menu-submenu-title:hover,
.vertical_menu .ant-menu-submenu .ant-menu-item-selected,
.vertical_menu .ant-menu-submenu .ant-menu-submenu-selected>.ant-menu-submenu-title {
    border-radius: 10px !important;
}

.vertical_menu .ant-menu-sub.ant-menu-inline>.ant-menu-item.ant-menu-item-selected::before {
    top: 4px;
    bottom: 4px;
}

body .ant-layout-footer::after,
body footer.footer::after {
    display: none !important;
}