@font-face {
    font-family: 'Montserrat';
    src: url('../Assets/font/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

header, footer {
    flex-shrink: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('../Assets/images/WEB-BG.jpg');
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.text-center {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.block-header,
.block-footer {
    width: 100%;
    height: 25%;
    flex-shrink: 0;
}

.block-content {
    width: 100%;
    flex-grow: 1;
}

.block-content-left,
.block-content-right {
    width: 25%;
    flex-shrink: 0;
}

.block-content-center {
    flex-grow: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.flex-item {
    text-align: center;
}
.block-header .flex-item,
.block-footer .flex-item {
    flex: 1;
}

.block-content .flex-item {
    flex: 1;
}

.block-content .flex-grow-1 {
    flex: 2;
}
.s-hub {
    cursor: pointer;
}
.e-smart,
.d-smart,
.s-smart,
.h-smart,
.student-app,
.teacher-app {
    position: absolute;
    cursor: pointer;
}

    .e-smart img, .d-smart img, .s-smart img, .h-smart img, .student-app img, .teacher-app img {
        width: 50%;
        max-width: 240px;
        height: auto;
        object-fit: contain;
    }
        .e-smart img:hover,
        .d-smart img:hover,
        .s-smart img:hover,
        .h-smart img:hover,
        .student-app img:hover,
        .teacher-app img:hover {
            filter: drop-shadow(0 0 10px #ff9f00) drop-shadow(0 0 10px #ff9f00);
            transition: filter 0.3s ease;
        }
        .e-smart:hover,
        .d-smart:hover,
        .s-smart:hover,
        .h-smart:hover,
        .student-app:hover,
        .teacher-app:hover {
            transform: scale(1.08);
        }


/* Flashing */
.s-hub:hover img {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}


.h-smart {
    position: absolute;
    top: -20px;
    left: -20%;
}

.d-smart {
    position: absolute;
    left: 0;
    bottom: -80px;
}

.s-smart {
    position: absolute;
    bottom: -30px;
    left: -160px;
}

.e-smart {
    position: absolute;
    bottom: -30px;
    right: -50px;
}

.teacher-app {
    position: absolute;
    top: -150px;
    right: -50px;
}

.student-app {
    position: absolute;
    top: 0;
    right: -160px;
}

.s-hub img {
    width: 50%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.call-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .call-icon i {
        color: #fff;
        font-size: 10px;
    }

.globe-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .globe-icon i {
        color: #fff;
        font-size: 10px;
    }

.footer {
    display: flex;
    justify-content: end;
    position: relative;
}

.footer-tag {
    border-bottom: 40px solid #EF5A00;
    border-left: 30px solid transparent;
}

.footer-banner {
    line-height: 40px;
    align-items: center;
    justify-content: flex-end;
    height: 40px;
    color: #fff;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0px 20px;
    background: #EF5A00;
    background: linear-gradient(90deg,rgba(239, 90, 0, 1) 0%, rgba(249, 135, 0, 1) 100%);
}

    .footer-banner .footer-link
    .footer-banner .footer-title {
        padding: 0px 20px;
    }

.footer-title {
    font-size: 25px;
    font-weight: 500;
}

.footer-link {
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

    .footer-link:hover {
        color: #fff;
        text-decoration: none;
    }

.footer-line {
    width: 0.5px;
    height: 60%;
    background-color: #fff;
}


@media (min-width: 1180px) {
    .s-hub img {
        width: 60%;
    }

    .e-smart img, .d-smart img, .s-smart img, .h-smart img, .student-app img, .teacher-app img {
        width: 45%;
    }

    .teacher-app {
        right: -20px;
        top: -120px;
    }

    .student-app {
        top: 60px;
        right: -130px;
    }

    .e-smart {
        bottom: 30px;
        right: -30px;
    }

    .d-smart {
        left: 0px;
        bottom: -20px;
    }

    .s-smart {
        bottom: 40px;
        left: -110px;
    }

    .h-smart {
        left: -60px;
        top: 45px;
    }
}
 
@media (min-width: 1280px) {
    .s-hub img {
        width: 60%;
    }

    .e-smart img, .d-smart img, .s-smart img, .h-smart img, .student-app img, .teacher-app img {
        width: 40%;
    }

    .teacher-app {
        right: 0px;
        top: -110px;
    }

    .student-app {
        top: 0px;
        right: -100px;
    }

    .e-smart {
        bottom: -40px;
        right: 0px;
    }

    .d-smart {
        left: 20px;
        bottom: -80px;
    }

    .s-smart {
        bottom: -15px;
        left: -85px;
    }

    .h-smart {
        left: -40px;
        top: -5px;
    }
}


@media (min-width: 1366px) {
    .s-hub img {
        width: 60%;
    }

    .e-smart img, .d-smart img, .s-smart img, .h-smart img, .student-app img, .teacher-app img {
        width: 55%;
    }
    .teacher-app {
        right: 30px;
        top: -90px;
    }

    .student-app {
        top: 90px;
        right: -120px;
    }

    .e-smart {
        bottom: 40px;
        right: 0px;
    }

    .d-smart {
        left: 30px;
        bottom: 0;
    }

    .s-smart {
        bottom: 70px;
        left: -120px;
    }

    .h-smart {
        left: -60px;
        top: 70px;
    }
}

@media (min-width: 1920px) {
    .s-hub img {
        width: 60%;
    }
    .e-smart img, .d-smart img, .s-smart img, .h-smart img, .student-app img, .teacher-app img {
        width: 60%;
    }
    .teacher-app {
        right: 65px;
    }
    .student-app {
        top: 50px;
        right: -80px;
    }
    .e-smart {
        bottom: -15px;
        right: 50px;
    }
    .d-smart {
        left: 80px;
        bottom: -60px;
    }
    .s-smart {
        bottom: 25px;
        left: -90px;
    }
    .h-smart {
        left: 0;
        top: 20px;
    }
}

@media (min-width: 2540px) {
    .s-hub img {
        width: 70%;
    }
    .e-smart img, .d-smart img, .s-smart img, .h-smart img, .student-app img, .teacher-app img {
        width: 80%;
    }
    .teacher-app {
        right: 50px;
    }
    .student-app {
        top: 100px;
    }
    .e-smart {
        bottom: 0;
        right: 40px;
    }
    .d-smart {
        left: 120px;
        bottom: -80px;
    }
    .s-smart {
        bottom: 30px;
    }
    .h-smart {
        top: 60px;
        left: -30px;
    }
    header{
        height:70px;
    }
    header img{
        height: 70px;
    }
    .footer-banner {
        height: 70px;
        line-height: 60px;
    }
    .footer-tag {
        border-bottom: 70px solid #EF5A00;
        border-left: 50px solid transparent;
    }
}

@media (max-width: 992px) {
    .s-hub {
        display: none;
    }

    .block-content {
        height: auto;
        flex-grow: unset !important;
    }

    .block-header, .block-footer {
        display: none !important;
    }

    .block-content-left, .block-content-right {
        display: none !important;
    }

    .block-content-center {
        flex-wrap: wrap;
        gap: 16px;
    }

    .e-smart,
    .d-smart,
    .s-smart,
    .h-smart,
    .student-app,
    .teacher-app {
        position: unset;
    }

        .e-smart img, .d-smart img, .s-smart img, .h-smart img, .student-app img, .teacher-app img {
            position: unset;
        }
}

@media (max-width: 767.98px) {
    .flex-item {
        width: 100%;
    }

    .footer-banner {
        flex-wrap: wrap;
        flex-direction: unset;
        justify-content:center;
    }
    .footer-title {
        font-size: 15px;
    }
}

@media (max-width: 575.98px) {
    .d-flex {
        flex-direction: column;
    }

    .flex-item {
        width: 100%;
    }
}


a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
header {
    margin-bottom: 20px;
}
.footer {
    width: 100%;
    white-space: nowrap;
    line-height: 20px; /* Vertically center the text there */
}

.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #f3f3f3;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transition: all .2s ease;
}

    .btn-login:hover {
        background: #ffffff;
        transform: translateY(-2px);
    }

.login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #f05a28;
    font-size: 14px;
}

.hub-user-area {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Khung xin chào */

.hub-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eeeeee;
    font-size: 14px;
    color: #333;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

    .hub-user b {
        color: #f05a28;
    }

/* icon user */

.authentication-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f05a28;
    font-size: 18px;
}

/* nút logout */

.btn-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eeeeee;
    color: #333;
    font-size: 14px;
    text-decoration: none!important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    transition: all .2s;
}

    .btn-logout:hover {
        background: white;
        transform: translateY(-2px);
    }
button:focus-visible,
a:focus-visible {
    outline: none;
}