@import '_content/CyberWebERP_11_Net10s.Framework/CyberWebERP_11_Net10s.Framework.4qe3b2x24t.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.cyber-lang-switch[b-xuob55qfms] {
    display: inline-flex;
    gap: 4px;
}

    .cyber-lang-switch button[b-xuob55qfms] {
        border: 1px solid var(--line, #d8dee2);
        background: var(--card, #fff);
        color: var(--ink-soft, #555);
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        .cyber-lang-switch button.active[b-xuob55qfms] {
            background: var(--brand, #2f7d5b);
            border-color: var(--brand, #2f7d5b);
            color: #fff;
        }

#blazor-error-ui[b-xuob55qfms] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xuob55qfms] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayoutAdmin.razor.rz.scp.css */
.admin-layout[b-1l9pk6vuu8] {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fb;
}


/* =========================
   HEADER NGANG
   ========================= */

.admin-header[b-1l9pk6vuu8] {
    height: 70px;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 1000;
}


/* Logo */

.admin-logo[b-1l9pk6vuu8] {
    height: 100%;
    display: flex;
    align-items: center;
}

    .admin-logo img[b-1l9pk6vuu8] {
        max-width: 160px;
        max-height: 50px;
        object-fit: contain;
    }


/* =========================
   USER
   ========================= */

.admin-user[b-1l9pk6vuu8] {
    position: relative;
    z-index: 1100;
}


/* Lớp phủ toàn màn hình */

.admin-user-overlay[b-1l9pk6vuu8] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

.admin-user-button[b-1l9pk6vuu8] {
    position: relative;
    z-index: 1101;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
}

    .admin-user-button:hover[b-1l9pk6vuu8] {
        background: #f3f4f6;
    }

.admin-user-avatar[b-1l9pk6vuu8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00b975;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.admin-user-name[b-1l9pk6vuu8] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.admin-user-button .material-icons[b-1l9pk6vuu8] {
    font-size: 20px;
    color: #6b7280;
}


/* Logout dropdown */

.admin-user-menu[b-1l9pk6vuu8] {
    position: absolute;
    z-index: 1102;
    right: 0;
    top: calc(100% + 5px);
    width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
    overflow: hidden;
}

    .admin-user-menu button[b-1l9pk6vuu8] {
        width: 100%;
        border: none;
        background: #fff;
        padding: 11px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        text-align: left;
        color: #374151;
    }

        .admin-user-menu button:hover[b-1l9pk6vuu8] {
            background: #f3f4f6;
        }

    .admin-user-menu .material-icons[b-1l9pk6vuu8] {
        font-size: 19px;
    }


/* =========================
   BODY
   ========================= */

.admin-body[b-1l9pk6vuu8] {
    display: flex;
    min-height: calc(100vh - 70px);
}


/* =========================
   MENU DỌC
   ========================= */

.admin-sidebar[b-1l9pk6vuu8] {
    width: 250px;
    min-width: 250px;
    background: #061c4e;
    color: #fff;
    padding: 16px 12px;
    min-height: calc(100vh - 70px);
}


.admin-menu-item[b-1l9pk6vuu8] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    margin-bottom: 4px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    border-radius: 7px;
    font-size: 14px;
    transition: .2s;
}

    .admin-menu-item:hover[b-1l9pk6vuu8] {
        color: #fff;
        background: rgba(255,255,255,.1);
    }

    .admin-menu-item .material-icons[b-1l9pk6vuu8] {
        font-size: 19px;
    }


/* =========================
   CONTENT
   ========================= */

.admin-content[b-1l9pk6vuu8] {
    flex: 1;
    min-width: 0;
    padding: 24px;
    background: #f5f7fb;
}
/* /Components/Layout/MainLayoutFooter.razor.rz.scp.css */
.main-footer[b-rpphleufmi] {
    position: relative;
    width: 100%;
    color: #ffffff;
    background: linear-gradient( 135deg, #173b98 0%, #102d7d 45%, #06194f 100% );
    overflow: hidden;
}
/* =========================================
   CONTAINER
   ========================================= */

.footer-container[b-rpphleufmi] {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    padding: 50px 0 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(150px, 1fr));
    gap: 50px;
    box-sizing: border-box;
}


/* =========================================
   COMPANY
   ========================================= */

.footer-company[b-rpphleufmi] {
    min-width: 0;
}

.footer-company-title[b-rpphleufmi] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

    .footer-company-title img[b-rpphleufmi] {
        width: 42px;
        height: 42px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .footer-company-title h3[b-rpphleufmi] {
        margin: 0;
        color: #ffffff;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }


/* =========================================
   COMPANY INFO
   ========================================= */

.footer-info[b-rpphleufmi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer-info p[b-rpphleufmi] {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

.footer-label[b-rpphleufmi] {
    margin-right: 8px;
}

.footer-business-info[b-rpphleufmi] {
    max-width: 560px;
    line-height: 1.5 !important;
}


/* =========================================
   SOCIAL
   ========================================= */

.footer-social[b-rpphleufmi] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}

.social-item[b-rpphleufmi] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .social-item:hover[b-rpphleufmi] {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-2px);
    }

.social-facebook[b-rpphleufmi] {
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.social-messenger[b-rpphleufmi] {
    font-size: 21px;
}

.social-youtube[b-rpphleufmi] {
    font-size: 23px;
}


/* =========================================
   FOOTER MENU
   ========================================= */

.footer-menu-column[b-rpphleufmi] {
    min-width: 0;
}

    .footer-menu-column h3[b-rpphleufmi] {
        margin: 5px 0 28px;
        color: #ffffff;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

.footer-menu-list[b-rpphleufmi] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-menu-item[b-rpphleufmi] {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

a.footer-menu-item:hover[b-rpphleufmi] {
    color: #ffffff;
    text-decoration: none;
    padding-left: 4px;
}


/* =========================================
   COPYRIGHT
   ========================================= */

.footer-bottom[b-rpphleufmi] {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    overflow-wrap: anywhere;
}


/* =========================================
   HOME BUTTON
   ========================================= */

.footer-home-button[b-rpphleufmi] {
    position: absolute;
    left: 0;
    bottom: 48px;
    width: 60px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 0 8px 8px 0;
    color: #111111;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: width 0.2s ease, background-color 0.2s ease;
}

    .footer-home-button:hover[b-rpphleufmi] {
        width: 66px;
        color: #111111;
        text-decoration: none;
        background: #f5f5f5;
    }

    .footer-home-button .material-icons[b-rpphleufmi] {
        font-size: 27px;
    }


/* =========================================
   RESPONSIVE - LARGE TABLET
   ========================================= */

@media (max-width: 1200px) {

    .footer-container[b-rpphleufmi] {
        max-width: 90%;
        grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(130px, 1fr));
        gap: 35px;
        padding: 45px 0 40px;
    }

    .footer-company-title h3[b-rpphleufmi] {
        font-size: 22px;
    }

    .footer-menu-column h3[b-rpphleufmi] {
        font-size: 20px;
    }

    .footer-info p[b-rpphleufmi],
    .footer-menu-item[b-rpphleufmi] {
        font-size: 15px;
    }
}


/* =========================================
   RESPONSIVE - TABLET
   ========================================= */

@media (max-width: 992px) {

    .footer-container[b-rpphleufmi] {
        max-width: 100%;
        padding: 45px 30px 40px;
        grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(140px, 1fr));
        gap: 40px 30px;
    }

    .footer-company[b-rpphleufmi] {
        grid-row: span 2;
    }

    .footer-company-title h3[b-rpphleufmi] {
        font-size: 21px;
    }

    .footer-menu-column h3[b-rpphleufmi] {
        margin-bottom: 20px;
        font-size: 19px;
    }

    .footer-info[b-rpphleufmi] {
        gap: 10px;
    }

        .footer-info p[b-rpphleufmi],
        .footer-menu-item[b-rpphleufmi] {
            font-size: 14px;
        }

    .footer-menu-list[b-rpphleufmi] {
        gap: 12px;
    }
}


/* =========================================
   RESPONSIVE - SMALL TABLET
   ========================================= */

@media (max-width: 768px) {

    .footer-container[b-rpphleufmi] {
        padding: 40px 25px 35px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 38px 30px;
    }

    /*
       Company full width
    */

    .footer-company[b-rpphleufmi] {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .footer-menu-column[b-rpphleufmi] {
        min-width: 0;
    }

    .footer-company-title[b-rpphleufmi] {
        margin-bottom: 20px;
    }

        .footer-company-title img[b-rpphleufmi] {
            width: 40px;
            height: 40px;
        }

        .footer-company-title h3[b-rpphleufmi] {
            font-size: 21px;
        }

    .footer-menu-column h3[b-rpphleufmi] {
        font-size: 19px;
        margin-bottom: 18px;
    }

    .footer-info p[b-rpphleufmi],
    .footer-menu-item[b-rpphleufmi] {
        font-size: 14px;
    }

    .footer-social[b-rpphleufmi] {
        margin-top: 20px;
    }

    .footer-home-button[b-rpphleufmi] {
        width: 52px;
        height: 50px;
        bottom: 35px;
    }

        .footer-home-button:hover[b-rpphleufmi] {
            width: 56px;
        }
}


/* =========================================
   RESPONSIVE - MOBILE
   ========================================= */

@media (max-width: 576px) {

    .footer-container[b-rpphleufmi] {
        padding: 35px 18px 35px;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-company[b-rpphleufmi] {
        grid-column: auto;
    }

    .footer-company-title[b-rpphleufmi] {
        gap: 10px;
        margin-bottom: 18px;
    }

        .footer-company-title img[b-rpphleufmi] {
            width: 38px;
            height: 38px;
        }

        .footer-company-title h3[b-rpphleufmi] {
            font-size: 19px;
        }

    .footer-info[b-rpphleufmi] {
        gap: 10px;
    }

        .footer-info p[b-rpphleufmi] {
            font-size: 14px;
            line-height: 1.5;
        }

    .footer-label[b-rpphleufmi] {
        margin-right: 5px;
    }

    .footer-business-info[b-rpphleufmi] {
        max-width: none;
    }

    .footer-social[b-rpphleufmi] {
        gap: 14px;
        margin-top: 20px;
    }

    .social-item[b-rpphleufmi] {
        width: 38px;
        height: 38px;
    }

    .social-facebook[b-rpphleufmi] {
        font-size: 25px;
    }

    .social-messenger[b-rpphleufmi] {
        font-size: 20px;
    }

    .social-youtube[b-rpphleufmi] {
        font-size: 21px;
    }

    .footer-menu-column h3[b-rpphleufmi] {
        margin: 0 0 15px;
        font-size: 18px;
    }

    .footer-menu-list[b-rpphleufmi] {
        gap: 11px;
    }

    .footer-menu-item[b-rpphleufmi] {
        font-size: 14px;
        line-height: 1.5;
    }

    .footer-bottom[b-rpphleufmi] {
        padding: 17px 45px 17px 18px;
        font-size: 13px;
    }

    .footer-home-button[b-rpphleufmi] {
        width: 46px;
        height: 46px;
        bottom: 25px;
    }

        .footer-home-button:hover[b-rpphleufmi] {
            width: 50px;
        }

        .footer-home-button .material-icons[b-rpphleufmi] {
            font-size: 23px;
        }
}


/* =========================================
   RESPONSIVE - SMALL MOBILE
   ========================================= */

@media (max-width: 380px) {

    .footer-container[b-rpphleufmi] {
        padding: 30px 15px;
    }

    .footer-company-title h3[b-rpphleufmi] {
        font-size: 17px;
    }

    .footer-info p[b-rpphleufmi],
    .footer-menu-item[b-rpphleufmi] {
        font-size: 13px;
    }

    .footer-menu-column h3[b-rpphleufmi] {
        font-size: 17px;
    }

    .footer-bottom[b-rpphleufmi] {
        padding-left: 15px;
        padding-right: 40px;
        font-size: 12px;
    }

    .footer-home-button[b-rpphleufmi] {
        width: 42px;
        height: 42px;
        bottom: 22px;
    }

        .footer-home-button .material-icons[b-rpphleufmi] {
            font-size: 21px;
        }
}
/* /Components/Layout/MainLayoutHeader.razor.rz.scp.css */
.header-navbar[b-jkn510fjwz] {
    width: 100%;
    height: 70px;
    background: #061C4E;
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.navbar-container[b-jkn510fjwz] {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

/* =========================
   LEFT
   ========================= */

.navbar-left[b-jkn510fjwz] {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
}

.navbar-left-item[b-jkn510fjwz] {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 100%;
    white-space: nowrap;
}

.left-item-icon[b-jkn510fjwz] {
    font-size: 19px;
    line-height: 1;
    color: #ffffff;
}

.facebook-icon[b-jkn510fjwz] {
    width: 18px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.left-item-content[b-jkn510fjwz] {
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
}


/* =========================
   RIGHT
   ========================= */

.navbar-right[b-jkn510fjwz] {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
}

.navbar-right-item[b-jkn510fjwz] {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.right-item-content[b-jkn510fjwz] {
    font-size: 18px;
    color: #aebddc;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.navbar-right .right-item-content.active[b-jkn510fjwz] {
    color: #ffffff;
    font-weight: 600;
}

.navbar-right-item:hover .right-item-content[b-jkn510fjwz] {
    color: #ffffff;
}

.menu-center[b-jkn510fjwz]  .menu-item {
    margin-left: 2px;
}

.right-item-icon[b-jkn510fjwz] {
    font-size: 21px;
    color: #ffffff;
}

/* =========================
   MATERIAL ICON
   ========================= */

.material-icons[b-jkn510fjwz] {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/* =========================
   RESPONSIVE
   ========================= */

.header-menu[b-jkn510fjwz] {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    background-color: rgba(6, 28, 78, 0.4);
    margin-top: 70px;
}

/* =========================
   CONTAINER
   ========================= */

.header-menu-container[b-jkn510fjwz] {
    width: 1200px;
    height: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 20px 0;
    box-sizing: border-box;
}


/* =========================
   LEFT - LOGO
   ========================= */

.menu-left[b-jkn510fjwz] {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
}

.menu-brand[b-jkn510fjwz] {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #0b2864;
}

    .menu-brand img[b-jkn510fjwz] {
        width: 43px;
        height: 43px;
        object-fit: contain;
        flex-shrink: 0;
    }

.menu-company-name[b-jkn510fjwz] {
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: white;
}


/* =========================
   CENTER - MENU
   ========================= */

.menu-center[b-jkn510fjwz] {
    flex: 1;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
    .menu-center[b-jkn510fjwz]  .menu-item {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .menu-center[b-jkn510fjwz]  .menu-link {
        position: relative;
        height: 100%;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: white;
        text-decoration: none;
        font-size: 18px;
        font-weight: 400;
        white-space: nowrap;
        transition: color 0.2s ease;
    }
        .menu-center[b-jkn510fjwz]  .menu-link:hover {
            color: white;
            text-decoration: none;
        }
        .menu-center[b-jkn510fjwz]  .menu-link.active {
            font-weight: 600;
            font-size: 20px;
        }
            .menu-center[b-jkn510fjwz]  .menu-link.active::after {
                content: "";
                position: absolute;
                left: 12px;
                right: 12px;
                bottom: 9px;
                height: 2px;
                background: white;
            }
    .menu-center[b-jkn510fjwz]  .menu-arrow {
        font-size: 19px;
        line-height: 1;
        color: #657080;
        transition: transform 0.2s ease;
    }
    .menu-center[b-jkn510fjwz]  .menu-has-child {
        position: relative;
    }
    .menu-center[b-jkn510fjwz]  .menu-link {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 100%;
    }
    .menu-center[b-jkn510fjwz]  .menu-has-child:hover .menu-arrow {
        transform: rotate(180deg);
    }
    .menu-center[b-jkn510fjwz]  .menu-dropdown {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        min-width: 200px;
        padding: 6px 0;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        z-index: 1000;
    }
    .menu-center[b-jkn510fjwz]  .menu-has-child:hover .menu-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .menu-center[b-jkn510fjwz]  .menu-dropdown-item {
        display: block;
        padding: 10px 16px;
        color: #374151;
        text-decoration: none;
        white-space: nowrap;
    }
        .menu-center[b-jkn510fjwz]  .menu-dropdown-item:hover {
            background: #f0fdf7;
            color: #00b975;
        }
/* =========================
   RIGHT - BOOKING
   ========================= */

.menu-right[b-jkn510fjwz] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.booking-button[b-jkn510fjwz] {
    min-width: 130px;
    height: 45px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid #FFB800;
    background: #FFB800;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .booking-button:hover[b-jkn510fjwz] {
        background: #f5a900;
        border-color: #f5a900;
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-1px);
    }


/* =========================
   MATERIAL ICON
   ========================= */

.material-icons[b-jkn510fjwz] {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-button[b-jkn510fjwz] {
    display: none;
    user-select: none;
}

    .mobile-menu-button .right-item-icon[b-jkn510fjwz] {
        cursor: pointer;
        transition: transform 0.2s ease;
    }

/* =========================================================
   RESPONSIVE - HEADER TOP
   ========================================================= */

@media (max-width: 1200px) {

    .navbar-container[b-jkn510fjwz] {
        max-width: 90%;
        padding: 0 16px;
    }

    .navbar-left[b-jkn510fjwz] {
        gap: 20px;
    }

    .navbar-right[b-jkn510fjwz] {
        gap: 20px;
    }

    .left-item-content[b-jkn510fjwz] {
        font-size: 15px;
    }

    .right-item-content[b-jkn510fjwz] {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .navbar-container[b-jkn510fjwz] {
        max-width: 100%;
        padding: 0 20px;
    }

    .navbar-left[b-jkn510fjwz] {
        gap: 18px;
        min-width: 0;
    }

    .navbar-left-item[b-jkn510fjwz] {
        gap: 8px;
        min-width: 0;
    }

    .left-item-content[b-jkn510fjwz] {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }

    .navbar-right[b-jkn510fjwz] {
        gap: 16px;
        flex-shrink: 0;
    }

    .right-item-content[b-jkn510fjwz] {
        font-size: 14px;
    }


    /* Header menu */

    .header-menu-container[b-jkn510fjwz] {
        max-width: 100%;
        padding: 0 20px;
    }

    .menu-company-name[b-jkn510fjwz] {
        font-size: 19px;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-center[b-jkn510fjwz] {
        justify-content: flex-end;
    }

        .menu-center[b-jkn510fjwz]  .menu-link {
            padding: 0 9px;
            font-size: 14px;
        }

        .menu-center[b-jkn510fjwz]  .menu-arrow {
            font-size: 17px;
        }

    .booking-button[b-jkn510fjwz] {
        min-width: 115px;
        height: 42px;
        padding: 0 16px;
        font-size: 14px;
    }
}


/* =========================================================
   TABLET NHỎ
   ========================================================= */

@media (max-width: 850px) {

    /* Top bar */

    .navbar-left[b-jkn510fjwz] {
        gap: 14px;
    }

    .navbar-left-item[b-jkn510fjwz] {
        gap: 6px;
    }

    .left-item-content[b-jkn510fjwz] {
        max-width: 150px;
        font-size: 13px;
    }

    .left-item-icon[b-jkn510fjwz] {
        font-size: 18px;
    }

    .navbar-right[b-jkn510fjwz] {
        gap: 12px;
    }


    /* Main menu */

    .menu-company-name[b-jkn510fjwz] {
        display: none;
    }

    .menu-brand img[b-jkn510fjwz] {
        width: 42px;
        height: 42px;
    }

    .menu-center[b-jkn510fjwz]  .menu-link {
        padding: 0 7px;
        font-size: 14px;
    }

    .menu-center[b-jkn510fjwz]  .menu-arrow {
        font-size: 16px;
    }

    .booking-button[b-jkn510fjwz] {
        min-width: 110px;
        padding: 0 13px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 700px) {
    .header-navbar[b-jkn510fjwz] {
        height: 56px;
    }

    .navbar-container[b-jkn510fjwz] {
        width: 100%;
        max-width: none;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .navbar-left[b-jkn510fjwz] {
        gap: 14px;
    }

    .navbar-left-item[b-jkn510fjwz] {
        gap: 0;
    }

    .left-item-content[b-jkn510fjwz] {
        display: none;
    }

    .navbar-right[b-jkn510fjwz] {
        gap: 14px;
    }

    .right-item-content[b-jkn510fjwz] {
        font-size: 13px;
    }

    .mobile-menu-button[b-jkn510fjwz] {
        display: flex;
        cursor: pointer;
    }

    .header-menu[b-jkn510fjwz] {
        position: fixed;
        top: 56px;
        right: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 56px);
        margin-top: 0;
        display: block;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        visibility: hidden;
        z-index: 999;
        overflow: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .header-menu-container[b-jkn510fjwz] {
        position: absolute;
        top: 0;
        right: 0;
        width: min(360px, 88%);
        height: 100%;
        margin: 0;
        padding: 0 14px 20px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: #ffffff;
        box-sizing: border-box;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.35s ease;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    }


    /* =========================================
    MOBILE MENU OPEN
========================================= */

    .header-menu.mobile-menu-open[b-jkn510fjwz] {
        opacity: 1;
        visibility: visible;
    }

        .header-menu.mobile-menu-open
        .header-menu-container[b-jkn510fjwz] {
            transform: translateX(0);
        }


    /* =========================================
    LOGO
========================================= */

    .menu-left[b-jkn510fjwz] {
        flex: 0 0 64px;
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
    }

    .menu-brand[b-jkn510fjwz] {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

        .menu-brand img[b-jkn510fjwz] {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }

    .menu-company-name[b-jkn510fjwz] {
        display: block;
        max-width: calc(100% - 50px);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
        color: #061C4E;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =========================================
    MENU CENTER
========================================= */

    .menu-center[b-jkn510fjwz] {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 8px 0 0;
        box-sizing: border-box;
    }


        /* =========================================
    MENU ITEM
========================================= */

        .menu-center[b-jkn510fjwz]  .menu-item {
            position: relative;
            width: 100%;
            height: auto;
            display: block;
            margin: 0;
        }


        /* =========================================
    MENU LINK
========================================= */

        .menu-center[b-jkn510fjwz]  .menu-link {
            position: relative;
            width: 100%;
            height: 46px;
            padding: 0 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            color: #374151;
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            border-bottom: 1px solid #edf0f3;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

            .menu-center[b-jkn510fjwz]  .menu-link:hover {
                color: #061C4E;
                background: #f5f8ff;
            }

            .menu-center[b-jkn510fjwz]  .menu-link.active {
                color: #061C4E;
                font-weight: 600;
                background: #f5f8ff;
            }

                .menu-center[b-jkn510fjwz]  .menu-link.active::after {
                    display: none;
                }


        /* =========================================
    ARROW
========================================= */

        .menu-center[b-jkn510fjwz]  .menu-arrow {
            margin-left: auto;
            font-size: 20px;
            color: #657080;
            transition: transform 0.2s ease;
        }


        /* =========================================
    DROPDOWN
========================================= */

        .menu-center[b-jkn510fjwz]  .menu-dropdown {
            position: static;
            width: 100%;
            min-width: 0;
            padding: 0;
            background: #f8fafc;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            opacity: 1;
            visibility: visible;
            transform: none;
            display: block;
        }

        .menu-center[b-jkn510fjwz]  .menu-dropdown-item {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 42px;
            padding: 9px 12px 9px 28px;
            box-sizing: border-box;
            color: #4b5563;
            font-size: 14px;
            text-decoration: none;
            border-bottom: 1px solid #eef0f3;
        }

            .menu-center[b-jkn510fjwz]  .menu-dropdown-item:hover {
                background: #eefbf6;
                color: #00b975;
            }


    /* =========================================
    BOOKING
========================================= */

    .menu-right[b-jkn510fjwz] {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 14px 0 0;
        padding-top: 14px;
        border-top: 1px solid #e5e7eb;
    }

    .booking-button[b-jkn510fjwz] {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE NHỎ
   ========================================================= */

@media (max-width: 480px) {

    .header-navbar[b-jkn510fjwz] {
        height: 50px;
    }

    .navbar-container[b-jkn510fjwz] {
        padding: 0 12px;
    }

    .navbar-left[b-jkn510fjwz] {
        gap: 12px;
    }

    .left-item-icon[b-jkn510fjwz] {
        font-size: 18px;
    }

    .navbar-right[b-jkn510fjwz] {
        gap: 8px;
    }

    .right-item-content[b-jkn510fjwz] {
        font-size: 12px;
    }

    .right-item-icon[b-jkn510fjwz] {
        font-size: 21px;
    }


    /* Menu overlay */

    .header-menu[b-jkn510fjwz] {
        top: 50px;
        height: calc(100vh - 50px);
    }

    .header-menu-container[b-jkn510fjwz] {
        width: min(340px, 90%);
        padding-left: 12px;
        padding-right: 12px;
    }

    .menu-brand img[b-jkn510fjwz] {
        width: 38px;
        height: 38px;
    }

    .menu-company-name[b-jkn510fjwz] {
        font-size: 16px;
    }
}


/* =========================================================
   MOBILE RẤT NHỎ
   ========================================================= */

@media (max-width: 360px) {

    .navbar-left[b-jkn510fjwz] {
        gap: 9px;
    }

    .navbar-right[b-jkn510fjwz] {
        gap: 6px;
    }

    .right-item-content[b-jkn510fjwz] {
        font-size: 11px;
    }

    .right-item-icon[b-jkn510fjwz] {
        font-size: 20px;
    }

    .booking-button[b-jkn510fjwz] {
        min-width: 90px;
        padding: 0 8px;
        font-size: 11px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-buvkex4sv9],
.components-reconnect-repeated-attempt-visible[b-buvkex4sv9],
.components-reconnect-failed-visible[b-buvkex4sv9],
.components-pause-visible[b-buvkex4sv9],
.components-resume-failed-visible[b-buvkex4sv9],
.components-rejoining-animation[b-buvkex4sv9] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-retrying[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-failed[b-buvkex4sv9],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-buvkex4sv9] {
    display: block;
}


#components-reconnect-modal[b-buvkex4sv9] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-buvkex4sv9 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-buvkex4sv9 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-buvkex4sv9 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-buvkex4sv9]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-buvkex4sv9 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-buvkex4sv9 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-buvkex4sv9 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-buvkex4sv9 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-buvkex4sv9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-buvkex4sv9] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-buvkex4sv9] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-buvkex4sv9] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-buvkex4sv9] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-buvkex4sv9] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-buvkex4sv9] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-buvkex4sv9 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-buvkex4sv9] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-buvkex4sv9 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminHome.razor.rz.scp.css */
/* ================================
   TRANG QUẢN LÝ TIN TỨC
================================ */

.admin-news-page[b-dcdlx6d2zh] {
    background: #f5f7fa;
    min-height: calc(100vh - 70px);
}

.admin-news-header[b-dcdlx6d2zh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.admin-news-title[b-dcdlx6d2zh] {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    color: #1f2937;
}

.admin-news-add[b-dcdlx6d2zh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}


/* ================================
   POPUP CHỈNH SỬA
================================ */

.news-editor[b-dcdlx6d2zh] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-editor-tabs[b-dcdlx6d2zh] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
}

.news-editor-tab[b-dcdlx6d2zh] {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

    .news-editor-tab:hover[b-dcdlx6d2zh] {
        color: #00a9e8;
    }

    .news-editor-tab.active[b-dcdlx6d2zh] {
        color: #00a9e8;
        border-bottom-color: #00a9e8;
    }


/* ================================
   FORM
================================ */

.news-editor-form[b-dcdlx6d2zh] {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 15px;
    height: calc(100vh - 190px);
}

.news-editor-info[b-dcdlx6d2zh] {
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow-y: auto;
}

.news-editor-content[b-dcdlx6d2zh] {
    min-width: 0;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}


/* ================================
   THÔNG TIN ID / NGÀY
================================ */

.news-meta[b-dcdlx6d2zh] {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.news-meta-item[b-dcdlx6d2zh] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

    .news-meta-item strong[b-dcdlx6d2zh] {
        color: #334155;
    }

.news-edit-item[b-dcdlx6d2zh] {
    margin-bottom: 5px;
}
/* ================================
   EDITOR
================================ */
.news-editor-content .cyber-editor-html[b-dcdlx6d2zh] {
    width: 100%;
}

.news-editor-preview[b-dcdlx6d2zh] {
    height: calc(100vh - 220px);
    padding: 30px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

    .news-editor-preview img[b-dcdlx6d2zh] {
        max-width: 100%;
        height: auto;
    }

    .news-editor-preview h1[b-dcdlx6d2zh],
    .news-editor-preview h2[b-dcdlx6d2zh],
    .news-editor-preview h3[b-dcdlx6d2zh] {
        color: #1f2937;
    }

    .news-editor-preview p[b-dcdlx6d2zh] {
        line-height: 1.7;
        color: #374151;
    }


/* ================================
   FOOTER POPUP
================================ */

.news-editor-footer[b-dcdlx6d2zh] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.news-save-button[b-dcdlx6d2zh] {
    min-width: 120px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: #00b975;
    color: #ffffff;
    cursor: pointer;
    font-weight: 500;
}

    .news-save-button:hover[b-dcdlx6d2zh] {
        background: #009e63;
    }


/* ================================
   GRID / TABLE
================================ */

.admin-news-page .cyber-report-grid[b-dcdlx6d2zh] {
    background: #ffffff;
    border-radius: 8px;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1100px) {
    .news-editor-form[b-dcdlx6d2zh] {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 16px;
    }

    .news-editor-info[b-dcdlx6d2zh],
    .news-editor-content[b-dcdlx6d2zh] {
        padding: 14px;
    }
}

@media (max-width: 768px) {
    .admin-news-page[b-dcdlx6d2zh] {
        padding: 16px;
    }

    .admin-news-header[b-dcdlx6d2zh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-news-title[b-dcdlx6d2zh] {
        font-size: 20px;
    }

    .news-editor-form[b-dcdlx6d2zh] {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .news-editor-info[b-dcdlx6d2zh] {
        max-height: none;
    }

    .news-editor-content[b-dcdlx6d2zh] {
        min-height: 500px;
    }

    .news-editor-preview[b-dcdlx6d2zh] {
        height: auto;
        min-height: 400px;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .admin-news-page[b-dcdlx6d2zh] {
        padding: 10px;
    }

    .news-editor-tabs[b-dcdlx6d2zh] {
        width: 100%;
    }

    .news-editor-tab[b-dcdlx6d2zh] {
        flex: 1;
        padding: 9px 8px;
        font-size: 13px;
    }
}
.news-footer[b-dcdlx6d2zh] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 15px;
}

.news-save-btn[b-dcdlx6d2zh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 120px;
    height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    background: #00b975;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .news-save-btn:hover[b-dcdlx6d2zh] {
        background: #009e63;
        box-shadow: 0 3px 8px rgba(0, 185, 117, 0.25);
    }

    .news-save-btn:active[b-dcdlx6d2zh] {
        transform: translateY(1px);
    }

    .news-save-btn .material-icons[b-dcdlx6d2zh] {
        font-size: 18px;
    }
/* /Components/Pages/Admin/AdminTuyenDung.razor.rz.scp.css */
/* ================================
   TRANG QUẢN LÝ TIN TỨC
================================ */

.admin-news-page[b-91fawco50c] {
    background: #f5f7fa;
    min-height: calc(100vh - 70px);
}

.admin-news-header[b-91fawco50c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.admin-news-title[b-91fawco50c] {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    color: #1f2937;
}

.admin-news-add[b-91fawco50c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}


/* ================================
   POPUP CHỈNH SỬA
================================ */

.news-editor[b-91fawco50c] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-editor-tabs[b-91fawco50c] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
}

.news-editor-tab[b-91fawco50c] {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

    .news-editor-tab:hover[b-91fawco50c] {
        color: #00a9e8;
    }

    .news-editor-tab.active[b-91fawco50c] {
        color: #00a9e8;
        border-bottom-color: #00a9e8;
    }


/* ================================
   FORM
================================ */

.news-editor-form[b-91fawco50c] {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 15px;
    height: calc(100vh - 190px);
}

.news-editor-info[b-91fawco50c] {
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow-y: auto;
}

.news-editor-content[b-91fawco50c] {
    min-width: 0;
    padding: 10px 15px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}


/* ================================
   THÔNG TIN ID / NGÀY
================================ */

.news-meta[b-91fawco50c] {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    gap: 5px;
}

.news-meta-item[b-91fawco50c] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

    .news-meta-item strong[b-91fawco50c] {
        color: #334155;
        width: 80px;
    }

.news-edit-item[b-91fawco50c] {
    margin-bottom: 5px;
}
/* ================================
   EDITOR
================================ */
.news-editor-content .cyber-editor-html[b-91fawco50c] {
    width: 100%;
}

.news-editor-preview[b-91fawco50c] {
    height: calc(100vh - 220px);
    padding: 30px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

    .news-editor-preview img[b-91fawco50c] {
        max-width: 100%;
        height: auto;
    }

    .news-editor-preview h1[b-91fawco50c],
    .news-editor-preview h2[b-91fawco50c],
    .news-editor-preview h3[b-91fawco50c] {
        color: #1f2937;
    }

    .news-editor-preview p[b-91fawco50c] {
        line-height: 1.7;
        color: #374151;
    }


/* ================================
   FOOTER POPUP
================================ */

.news-editor-footer[b-91fawco50c] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.news-save-button[b-91fawco50c] {
    min-width: 120px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: #00b975;
    color: #ffffff;
    cursor: pointer;
    font-weight: 500;
}

    .news-save-button:hover[b-91fawco50c] {
        background: #009e63;
    }


/* ================================
   GRID / TABLE
================================ */

.admin-news-page .cyber-report-grid[b-91fawco50c] {
    background: #ffffff;
    border-radius: 8px;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1100px) {
    .news-editor-form[b-91fawco50c] {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 16px;
    }

    .news-editor-info[b-91fawco50c],
    .news-editor-content[b-91fawco50c] {
        padding: 14px;
    }
}

@media (max-width: 768px) {
    .admin-news-page[b-91fawco50c] {
        padding: 16px;
    }

    .admin-news-header[b-91fawco50c] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-news-title[b-91fawco50c] {
        font-size: 20px;
    }

    .news-editor-form[b-91fawco50c] {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .news-editor-info[b-91fawco50c] {
        max-height: none;
    }

    .news-editor-content[b-91fawco50c] {
        min-height: 500px;
    }

    .news-editor-preview[b-91fawco50c] {
        height: auto;
        min-height: 400px;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .admin-news-page[b-91fawco50c] {
        padding: 10px;
    }

    .news-editor-tabs[b-91fawco50c] {
        width: 100%;
    }

    .news-editor-tab[b-91fawco50c] {
        flex: 1;
        padding: 9px 8px;
        font-size: 13px;
    }
}

.news-footer[b-91fawco50c] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 15px;
}

.news-save-btn[b-91fawco50c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 120px;
    height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    background: #00b975;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .news-save-btn:hover[b-91fawco50c] {
        background: #009e63;
        box-shadow: 0 3px 8px rgba(0, 185, 117, 0.25);
    }

    .news-save-btn:active[b-91fawco50c] {
        transform: translateY(1px);
    }

    .news-save-btn .material-icons[b-91fawco50c] {
        font-size: 18px;
    }
/* /Components/Pages/FGioiThieu/GioiThieu.razor.rz.scp.css */
/* =========================================
   GIỚI THIỆU - RESPONSIVE
========================================= */

.about-container[b-huwb68bzti] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.about-banner-content[b-huwb68bzti] {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

.about-banner-inner[b-huwb68bzti] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: absolute;
    top: 204px;
    left: 0;
    width: 626px;
}

.about-banner-slogan[b-huwb68bzti] {
    width: 100%;
    border-left: 5px solid #FFB800;
    padding-left: 22px;
    box-sizing: border-box;
    color: #061C4E;
}

.about-banner-description[b-huwb68bzti] {
    font-size: 18px;
    color: #5D6267;
    font-weight: 400;
    line-height: 1.6;
}

.about-history[b-huwb68bzti] {
    padding: 80px 0;
}

.about-history-content[b-huwb68bzti] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.about-history-image[b-huwb68bzti],
.about-history-text[b-huwb68bzti] {
    flex: 1;
    min-width: 300px;
}

    .about-history-image img[b-huwb68bzti] {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
        object-fit: cover;
    }

.about-history-title[b-huwb68bzti] {
    font-size: 28px;
    font-weight: 700;
    color: #0C121F;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.about-history-description[b-huwb68bzti] {
    font-size: 16px;
    line-height: 1.7;
    color: #5D6267;
    text-align: justify;
}


/* =========================================
   BAN LÃNH ĐẠO
========================================= */

.about-leadership[b-huwb68bzti] {
    background-image: url('/Image/Gioithieu_BLĐ.webp');
    min-height: 1000px;
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.about-leadership-container[b-huwb68bzti] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.about-leadership-title[b-huwb68bzti] {
    text-align: center;
    color: white;
    font-size: 28px;
    margin-bottom: 48px;
    font-weight: 700;
}


/* =========================================
   GALLERY
========================================= */

.about-gallery[b-huwb68bzti] {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 80px 0;
    box-sizing: border-box;
}

.about-gallery-grid[b-huwb68bzti] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    height: 386px;
}

.about-gallery-main[b-huwb68bzti] {
    min-width: 0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.about-gallery-small[b-huwb68bzti] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

.about-gallery-item[b-huwb68bzti] {
    min-width: 0;
    min-height: 0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}


/* =========================================
   BANNER
========================================= */

.home-banner[b-huwb68bzti] {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    margin-top: -70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-slogan[b-huwb68bzti] {
    width: 100%;
    color: #061C4E;
}

.slogan-vn[b-huwb68bzti] {
    font-size: 25px;
    font-family: "Playwrite US Trad", cursive;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.slogan-en[b-huwb68bzti] {
    font-family: "Goldman";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}


/* =========================================
   STATS
========================================= */

.stats-grid[b-huwb68bzti] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 24px;
}

.stats-card[b-huwb68bzti] {
    height: 181px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.stats-icon[b-huwb68bzti] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #facc15;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
}

    .stats-icon .material-icons[b-huwb68bzti] {
        font-size: 32px;
        color: #0c121f;
    }

.stats-number[b-huwb68bzti] {
    color: #0c121f;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.stats-label[b-huwb68bzti] {
    color: #60646c;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}


/* =========================================
   NOTICE
========================================= */

.notice-header[b-huwb68bzti] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .notice-header h3[b-huwb68bzti] {
        margin: 0 0 10px 0;
        color: #061c4e;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
    }

    .notice-header p[b-huwb68bzti] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }

.notice-navigation[b-huwb68bzti] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-nav-button[b-huwb68bzti] {
    width: 44px;
    height: 44px;
    border: 2px solid #061c4e;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: #061c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .notice-nav-button .material-icons[b-huwb68bzti] {
        font-size: 27px;
    }

    .notice-nav-button:hover[b-huwb68bzti] {
        background: #FFB800;
        color: #ffffff;
        border-color: #FFB800;
    }

.cyber-org-wrapper[b-huwb68bzti] {
    overflow: hidden;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1200px) {

    .about-container[b-huwb68bzti],
    .about-banner-content[b-huwb68bzti],
    .about-leadership-container[b-huwb68bzti],
    .about-gallery[b-huwb68bzti] {
        width: calc(100% - 32px);
    }

    .about-banner-inner[b-huwb68bzti] {
        left: 0;
    }
}


/* =========================================
   TABLET NHỎ
========================================= */

@media (max-width: 900px) {

    .home-banner[b-huwb68bzti] {
        height: auto;
        min-height: 850px;
        margin-top: -70px;
        padding-top: 140px;
        padding-bottom: 50px;
        box-sizing: border-box;
    }

    .about-banner-content[b-huwb68bzti] {
        height: auto;
        margin-top: 40px;
    }

    .about-banner-inner[b-huwb68bzti] {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        gap: 20px;
    }

    .about-banner-slogan[b-huwb68bzti] {
        padding-left: 18px;
    }

    .slogan-vn[b-huwb68bzti] {
        font-size: 22px;
    }

    .slogan-en[b-huwb68bzti] {
        font-size: 27px;
    }

    .stats-card[b-huwb68bzti] {
        height: 160px;
    }

    .about-history[b-huwb68bzti] {
        padding: 60px 0;
    }

    .about-history-content[b-huwb68bzti] {
        gap: 30px;
    }

    .about-leadership[b-huwb68bzti] {
        min-height: 800px;
        padding: 60px 0;
    }

    .about-gallery[b-huwb68bzti] {
        padding: 60px 0;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .about-container[b-huwb68bzti],
    .about-banner-content[b-huwb68bzti],
    .about-leadership-container[b-huwb68bzti],
    .about-gallery[b-huwb68bzti] {
        width: calc(100% - 24px);
    }


    /* ---------- BANNER ---------- */

    .home-banner[b-huwb68bzti] {
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 40px;
    }

    .about-banner-inner[b-huwb68bzti] {
        gap: 18px;
    }

    .about-banner-slogan[b-huwb68bzti] {
        border-left-width: 4px;
        padding-left: 14px;
    }

    .slogan-vn[b-huwb68bzti] {
        font-size: 19px;
        margin-bottom: 7px;
    }

    .slogan-en[b-huwb68bzti] {
        font-size: 22px;
        line-height: 1.25;
    }

    .about-banner-description[b-huwb68bzti] {
        font-size: 16px;
        line-height: 1.5;
    }


    /* ---------- STATS ---------- */

    .stats-grid[b-huwb68bzti] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stats-card[b-huwb68bzti] {
        height: 145px;
        padding: 12px;
        box-sizing: border-box;
    }

    .stats-icon[b-huwb68bzti] {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
    }

        .stats-icon .material-icons[b-huwb68bzti] {
            font-size: 25px;
        }

    .stats-number[b-huwb68bzti] {
        font-size: 27px;
        margin-bottom: 7px;
    }

    .stats-label[b-huwb68bzti] {
        font-size: 13px;
    }


    /* ---------- HISTORY ---------- */

    .about-history[b-huwb68bzti] {
        padding: 45px 0;
    }

    .about-history-content[b-huwb68bzti] {
        flex-direction: column;
        gap: 28px;
    }

    .about-history-image[b-huwb68bzti],
    .about-history-text[b-huwb68bzti] {
        width: 100%;
        min-width: 0;
    }

    .about-history-title[b-huwb68bzti] {
        font-size: 23px;
        line-height: 1.3;
        margin-bottom: 18px;
    }

    .about-history-description[b-huwb68bzti] {
        font-size: 15px;
        line-height: 1.7;
    }


    /* ---------- LEADERSHIP ---------- */

    .about-leadership[b-huwb68bzti] {
        min-height: auto;
        padding: 45px 0;
    }

    .about-leadership-title[b-huwb68bzti] {
        font-size: 22px;
        line-height: 1.35;
        margin-bottom: 30px;
    }


    /* ---------- GALLERY ---------- */

    .about-gallery[b-huwb68bzti] {
        padding: 45px 0;
    }

    .about-gallery-grid[b-huwb68bzti] {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 12px;
    }

    .about-gallery-main[b-huwb68bzti] {
        height: 260px;
    }

    .about-gallery-small[b-huwb68bzti] {
        height: 260px;
        gap: 12px;
    }

    .about-gallery-item[b-huwb68bzti] {
        min-height: 0;
    }


    /* ---------- NOTICE ---------- */

    .notice-header[b-huwb68bzti] {
        margin-bottom: 18px;
    }

        .notice-header h3[b-huwb68bzti] {
            font-size: 22px;
            margin-bottom: 5px;
        }

    .notice-navigation[b-huwb68bzti] {
        gap: 8px;
    }

    .notice-nav-button[b-huwb68bzti] {
        width: 38px;
        height: 38px;
    }

        .notice-nav-button .material-icons[b-huwb68bzti] {
            font-size: 23px;
        }
}


/* =========================================
   MOBILE RẤT NHỎ
========================================= */

@media (max-width: 400px) {

    .stats-grid[b-huwb68bzti] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-card[b-huwb68bzti] {
        height: 130px;
    }

    .stats-icon[b-huwb68bzti] {
        width: 44px;
        height: 44px;
    }

    .stats-number[b-huwb68bzti] {
        font-size: 25px;
    }

    .slogan-vn[b-huwb68bzti] {
        font-size: 18px;
    }

    .slogan-en[b-huwb68bzti] {
        font-size: 20px;
    }

    .about-gallery-main[b-huwb68bzti] {
        height: 220px;
    }

    .about-gallery-small[b-huwb68bzti] {
        height: 220px;
    }
}
/* /Components/Pages/FHome/HomeBanner.razor.rz.scp.css */
.home-banner[b-81czapheee] {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    margin-top: -70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-slogan[b-81czapheee] {
    width: 100%;
    position: absolute;
    top: 168px;
    color: #ffffff;
    box-sizing: border-box;
}

.banner-slogan-inner[b-81czapheee] {
    width: 1200px;
    max-width: calc(100% - 80px);
    margin: 0 auto;
    padding-left: 22px;
    border-left: 5px solid #ffffff;
    box-sizing: border-box;
}

.slogan-vn[b-81czapheee] {
    font-size: 25px;
    font-family: "Playwrite US Trad", cursive;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.slogan-en[b-81czapheee] {
    font-family: "Goldman";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}


/* ================================
   SEARCH
================================ */

.home-banner-search[b-81czapheee] {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - 80px));
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    background: rgba(40, 40, 40, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
}

.search-input[b-81czapheee] {
    flex: 1;
    min-width: 0;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-sizing: border-box;
}

    .search-input .material-icons[b-81czapheee] {
        color: #ffffff;
        font-size: 26px;
        flex-shrink: 0;
    }

    .search-input input[b-81czapheee] {
        width: 100%;
        min-width: 0;
        height: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #ffffff;
        font-size: 18px;
    }

        .search-input input[b-81czapheee]::placeholder {
            color: #ffffff;
            opacity: 1;
        }

.search-button[b-81czapheee] {
    width: 164px;
    height: 56px;
    flex-shrink: 0;
    border: none;
    border-radius: 10px;
    background: #ffb800;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .search-button:hover[b-81czapheee] {
        background: #ffa800;
    }

.search-icon[b-81czapheee] {
    display: none;
}
/* ================================
   TABLET
================================ */
@media (max-width: 1200px) {

    .banner-slogan-inner[b-81czapheee] {
        width: calc(100% - 80px);
    }

    .home-banner-search[b-81czapheee] {
        width: calc(100% - 64px);
    }
    .search-icon[b-81czapheee] {
        display: none;
    }
}


/* ================================
   TABLET NHỎ
================================ */

@media (max-width: 768px) {

    .home-banner[b-81czapheee] {
        height: calc(100vh - 64px);
        min-height: 600px;
        margin-top: -60px;
    }

    /* Slogan */

    .banner-slogan[b-81czapheee] {
        top: 120px;
    }

    .banner-slogan-inner[b-81czapheee] {
        width: calc(100% - 48px);
        max-width: none;
        padding-left: 16px;
        border-left-width: 4px;
    }

    .slogan-vn[b-81czapheee] {
        font-size: 21px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .slogan-en[b-81czapheee] {
        font-size: 25px;
        line-height: 1.25;
    }


    /* Search */

    .home-banner-search[b-81czapheee] {
        width: calc(100% - 32px);
        bottom: 24px;
        height: auto;
        min-height: 0;
        padding: 12px;
        gap: 12px;
        border-radius: 14px;
    }

    .search-input[b-81czapheee] {
        height: 52px;
        padding: 0 14px;
        gap: 10px;
    }

        .search-input .material-icons[b-81czapheee] {
            font-size: 23px;
        }

        .search-input input[b-81czapheee] {
            font-size: 16px;
        }

    .search-button[b-81czapheee] {
        width: 130px;
        height: 52px;
        font-size: 16px;
    }
    .search-icon[b-81czapheee] {
        display: none;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 480px) {

    .home-banner[b-81czapheee] {
        height: 620px;
        min-height: 620px;
        margin-top: -40px;
        background-position: center center;
    }


    /* Slogan */

    .banner-slogan[b-81czapheee] {
        top: 128px;
    }

    .banner-slogan-inner[b-81czapheee] {
        width: calc(100% - 32px);
        padding-left: 5px;
        border-left-width: 4px;
    }

    .slogan-vn[b-81czapheee] {
        font-size: 12px;
        line-height: 1.35;
        margin-bottom: 6px;
    }

    .slogan-en[b-81czapheee] {
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: 0.2px;
    }


    /* Search chuyển thành 2 hàng */

    .home-banner-search[b-81czapheee] {
        width: calc(100% - 24px);
        bottom: 16px;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
        border-radius: 12px;
    }

    .search-input[b-81czapheee] {
        width: 100%;
        height: 50px;
    }

        .search-input input[b-81czapheee] {
            font-size: 16px;
        }

    .search-button[b-81czapheee] {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }
    .search-text[b-81czapheee] {
        display: none;
    }
    .search-icon[b-81czapheee] {
        display: block;
    }
}


/* ================================
   MOBILE RẤT NHỎ
================================ */

@media (max-width: 360px) {

    .home-banner[b-81czapheee] {
        height: 600px;
        min-height: 600px;
    }

    .banner-slogan[b-81czapheee] {
        top: 105px;
    }

    .banner-slogan-inner[b-81czapheee] {
        width: calc(100% - 24px);
    }

    .slogan-vn[b-81czapheee] {
        font-size: 10px;
    }

    .slogan-en[b-81czapheee] {
        font-size: 15px;
    }
    .search-text[b-81czapheee] {
        display: none;
    }

    .search-icon[b-81czapheee] {
        display: block;
    }
}
.notice-section[b-81czapheee] {
    width: 100%;
    min-height: 668px;
    padding: 85px 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.notice-container[b-81czapheee] {
    width: 1200px;
    margin: 0 auto;
}

/* =========================
   HEADER
========================= */

.notice-header[b-81czapheee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .notice-header h3[b-81czapheee] {
        margin: 0 0 10px 0;
        color: #061c4e;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
    }

    .notice-header p[b-81czapheee] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }

/* =========================
   NAVIGATION
========================= */

.notice-navigation[b-81czapheee] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-nav-button[b-81czapheee] {
    width: 44px;
    height: 44px;
    border: 2px solid #061c4e;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: #061c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .notice-nav-button .material-icons[b-81czapheee] {
        font-size: 27px;
    }

    .notice-nav-button:hover[b-81czapheee] {
        background: #FFB800;
        color: #ffffff;
        border: #FFB800;
    }

/* =========================
   GRID
========================= */

.notice-grid[b-81czapheee] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 229px 229px;
    gap: 24px;
}

/* =========================
   CARD
========================= */

.notice-card[b-81czapheee] {
    overflow: hidden;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* =========================
   CARD LỚN
========================= */

.notice-card-large[b-81czapheee] {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
}

.notice-card-image-large[b-81czapheee] {
    width: 100%;
    height: 324px;
    overflow: hidden;
}

    .notice-card-image-large img[b-81czapheee] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.notice-card-content-large[b-81czapheee] {
    flex: 1;
    padding: 16px 20px;
}

/* =========================
   CARD NHỎ
========================= */

.notice-card-small[b-81czapheee] {
    display: grid;
    grid-template-columns: 1fr 282px;
    min-width: 0;
}

.notice-card-content[b-81czapheee] {
    min-width: 0;
    padding: 16px 20px;
}

.notice-card-image[b-81czapheee] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .notice-card-image img[b-81czapheee] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

/* =========================
   BADGE
========================= */

.notice-badge[b-81czapheee] {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    margin-bottom: 12px;
    border-radius: 20px;
    background: #1740B6;
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

/* =========================
   TEXT
========================= */

.notice-card h4[b-81czapheee] {
    margin: 0 0 8px 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
}

.notice-card p[b-81czapheee] {
    margin: 0;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Card lớn */
.notice-card-large h4[b-81czapheee] {
    font-size: 20px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {

    .notice-container[b-81czapheee] {
        width: 90%;
    }

    .notice-card-small[b-81czapheee] {
        grid-template-columns: 1fr 220px;
    }

    .notice-card h4[b-81czapheee] {
        font-size: 18px;
    }
}

@media (max-width: 768px) {

    .notice-section[b-81czapheee] {
        min-height: auto;
        padding: 24px 0 40px;
    }

    .notice-container[b-81czapheee] {
        width: calc(100% - 32px);
    }

    .notice-header[b-81czapheee] {
        align-items: flex-start;
    }

        .notice-header h3[b-81czapheee] {
            font-size: 23px;
        }

    .notice-navigation[b-81czapheee] {
        gap: 8px;
    }

    .notice-nav-button[b-81czapheee] {
        width: 38px;
        height: 38px;
    }

    .notice-grid[b-81czapheee] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .notice-card-large[b-81czapheee] {
        min-height: auto;
    }

    .notice-card-image-large[b-81czapheee] {
        height: 260px;
    }

    .notice-card-small[b-81czapheee] {
        min-height: 210px;
        grid-template-columns: 1fr 40%;
    }
}

@media (max-width: 500px) {

    .notice-header[b-81czapheee] {
        flex-direction: column;
        gap: 16px;
    }

    .notice-navigation[b-81czapheee] {
        display: none;
    }

    .notice-card-small[b-81czapheee] {
        grid-template-columns: 1fr;
    }

    .notice-card-image[b-81czapheee] {
        height: 180px;
        order: -1;
    }

    .notice-card-image-large[b-81czapheee] {
        height: 220px;
    }
}
.transport-section[b-81czapheee] {
    width: 100%;
    background: #ffffff;
}

.transport-container[b-81czapheee] {
    width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
}

/* =========================
   TITLE
========================= */

.transport-title[b-81czapheee] {
    margin: 0 0 22px 0;
    text-align: center;
    color: #061c4e;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
}

/* =========================
   SERVICE LIST
========================= */

.transport-list[b-81czapheee] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

/* =========================
   ITEM
========================= */

.transport-item[b-81czapheee] {
    min-width: 0;
}

/* =========================
   CARD
========================= */

.transport-card[b-81czapheee] {
    height: 144px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    border: 1px dashed #163c91;
    border-radius: 8px;
    background: #ffffff;
    color: #103783;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* =========================
   ICON
========================= */

.transport-icon[b-81czapheee] {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    object-fit: contain;
}

/* =========================
   NAME
========================= */

.transport-name[b-81czapheee] {
    text-align: center;
    color: #103783;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
}

/* =========================
   ACTIVE ITEM
========================= */

.transport-item:first-child .transport-card[b-81czapheee] {
    background: #061c4e;
    border-color: #061c4e;
}

.transport-item:first-child .transport-name[b-81czapheee] {
    color: #ffffff;
}

.transport-item:first-child .transport-icon[b-81czapheee] {
    filter: brightness(0) invert(1);
}

/* =========================
   HOVER
========================= */

.transport-card:hover[b-81czapheee] {
    background: #061c4e;
    border-color: #061c4e;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(6, 28, 78, 0.15);
}

    .transport-card:hover .transport-name[b-81czapheee] {
        color: #ffffff;
    }

    .transport-card:hover .transport-icon[b-81czapheee] {
        filter: brightness(0) invert(1);
    }

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px) {

    .transport-container[b-81czapheee] {
        width: 90%;
    }

    .transport-list[b-81czapheee] {
        gap: 14px;
    }

    .transport-card[b-81czapheee] {
        height: 140px;
    }

    .transport-name[b-81czapheee] {
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    .transport-container[b-81czapheee] {
        width: calc(100% - 32px);
        padding-top: 28px;
    }

    .transport-title[b-81czapheee] {
        font-size: 23px;
        margin-bottom: 20px;
    }

    .transport-list[b-81czapheee] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .transport-card[b-81czapheee] {
        height: 140px;
    }

    .transport-pattern[b-81czapheee] {
        margin-top: 40px;
    }
}

@media (max-width: 480px) {

    .transport-title[b-81czapheee] {
        font-size: 20px;
    }

    .transport-list[b-81czapheee] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .transport-card[b-81czapheee] {
        height: 116px;
        width: calc((100vw - 60px) / 3);
    }

    .transport-icon[b-81czapheee] {
        width: 44px;
        height: 44px;
    }

    .transport-name[b-81czapheee] {
        font-size: 14px;
    }
}

/* ================================
   LỊCH TRÌNH PHỔ BIẾN
   ================================ */

.popular-routes[b-81czapheee] {
    width: 1200px;
    margin: 0 auto;
    padding: 50px 0 60px;
    box-sizing: border-box;
}

/* Header */

.popular-routes-header[b-81czapheee] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

    .popular-routes-header h3[b-81czapheee] {
        margin: 0 0 10px;
        color: #061c4e;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
    }

    .popular-routes-header p[b-81czapheee] {
        margin: 0;
        color: #666d7a;
        font-size: 14px;
        line-height: 1.5;
    }

.popular-routes-more[b-81czapheee] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #111827;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

    .popular-routes-more .material-icons[b-81czapheee] {
        font-size: 20px;
    }

    .popular-routes-more:hover[b-81czapheee] {
        color: #061c4e;
    }


/* ================================
   DANH SÁCH CARD
   ================================ */

.popular-routes-list[b-81czapheee] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


/* ================================
   CARD
   ================================ */

.route-card[b-81czapheee] {
    display: flex;
    gap: 24px;
    min-width: 0;
    height: 280px;
    padding: 16px;
    box-sizing: border-box;
    background: #e4edff;
    border-radius: 8px;
}


/* ================================
   IMAGE
   ================================ */

.route-image[b-81czapheee] {
    flex: 0 0 265px;
    width: 265px;
    height: 248px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 3px;
}


/* ================================
   CONTENT
   ================================ */

.route-content[b-81czapheee] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}


/* Tên tuyến */

.route-title[b-81czapheee] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #061c4e;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 10px;
}

    .route-title .material-icons[b-81czapheee] {
        flex-shrink: 0;
        font-size: 20px;
    }

    .route-title-text[b-81czapheee] {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


/* Thời gian */

.route-time[b-81czapheee] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #061c4e;
    font-size: 13px;
    margin-bottom: 12px;
}

    .route-time .material-icons[b-81czapheee] {
        font-size: 16px;
    }


/* Dịch vụ */

.route-services-title[b-81czapheee] {
    color: #17264a;
    font-size: 15px;
    margin-bottom: 8px;
}

.route-services[b-81czapheee] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 8px;
}

.route-service[b-81czapheee] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #061c4e;
    font-size: 13px;
    white-space: nowrap;
}

    .route-service .material-icons[b-81czapheee] {
        font-size: 18px;
    }


/* ================================
   GIÁ VÉ
   ================================ */

.route-price[b-81czapheee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    margin-bottom: 12px;
    border-top: 1px solid #061c4e;
    color: #061c4e;
    font-size: 13px;
}

    .route-price strong[b-81czapheee] {
        font-size: 24px;
        line-height: 1;
        font-weight: 700;
    }


/* ================================
   BUTTON
   ================================ */

.route-booking[b-81czapheee] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    background: #06184f;
    color: #ffffff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .route-booking:hover[b-81czapheee] {
        background: #0b2864;
        color: #ffffff;
    }

    .route-booking:active[b-81czapheee] {
        transform: scale(0.99);
    }


/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1100px) {

    .popular-routes[b-81czapheee] {
        width: 100%;
    }

    .popular-routes-list[b-81czapheee] {
        grid-template-columns: 1fr;
    }

    .route-card[b-81czapheee] {
        width: 100%;
    }
}


@media (max-width: 700px) {

    .popular-routes[b-81czapheee] {
        max-width: calc(100% - 24px);
        padding: 16px 0;
    }

    .popular-routes-header[b-81czapheee] {
        align-items: flex-start;
    }

        .popular-routes-header h3[b-81czapheee] {
            font-size: 23px;
        }

    .popular-routes-more[b-81czapheee] {
        display: none;
    }

    .route-card[b-81czapheee] {
        height: auto;
        flex-direction: column;
        gap: 14px;
    }

    .route-image[b-81czapheee] {
        flex: none;
        width: 100%;
        height: 220px;
    }

    .route-time[b-81czapheee] {
        margin-bottom: 16px;
    }

    .route-price[b-81czapheee] {
        margin-top: 20px;
    }
}


@media (max-width: 450px) {

    .route-image[b-81czapheee] {
        height: 200px;
    }

    .route-title[b-81czapheee] {
        font-size: 17px;
    }

    .route-price strong[b-81czapheee] {
        font-size: 21px;
    }
}
/* ================================
   TIỆN ÍCH NỔI BẬT
================================ */

.featured-amenities[b-81czapheee] {
    width: 100%;
    min-height: 628px;
    background-image: url('/Image/Trangchu_Tienich.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
}

.featured-amenities-container[b-81czapheee] {
    width: 1200px;
    min-height: 628px;
    margin: 0 auto;
    padding: 80px 0 78px;
    box-sizing: border-box;
}

/* Tiêu đề */

.featured-amenities-title[b-81czapheee] {
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
}

/* Danh sách */

.featured-amenities-list[b-81czapheee] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 90px;
    row-gap: 32px;
    padding: 48px 100px 32px;
}

/* Item */

.featured-amenity-item[b-81czapheee] {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Icon */

.featured-amenity-icon[b-81czapheee] {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 16px;
}

    .featured-amenity-icon .material-icons[b-81czapheee] {
        color: #061c4e;
        font-size: 32px;
        line-height: 1;
    }

/* Nội dung */

.featured-amenity-content[b-81czapheee] {
    min-width: 0;
    color: #ffffff;
}

.featured-amenity-name[b-81czapheee] {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.featured-amenity-description[b-81czapheee] {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

/* Nút */

.featured-amenities-action[b-81czapheee] {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.featured-amenities-button[b-81czapheee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 48px;
    padding: 0 28px;
    box-sizing: border-box;
    background: #ffffff;
    color: #061c4e;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .featured-amenities-button:hover[b-81czapheee] {
        background: #061c4e;
        color: #ffffff;
        transform: translateY(-2px);
    }


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1000px) {

    .featured-amenities-container[b-81czapheee] {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .featured-amenities-list[b-81czapheee] {
        column-gap: 40px;
    }

    .featured-amenity-name[b-81czapheee] {
        font-size: 20px;
    }

    .featured-amenity-description[b-81czapheee] {
        font-size: 15px;
    }
}


@media (max-width: 700px) {

    .featured-amenities[b-81czapheee] {
        min-height: auto;
    }

    .featured-amenities-container[b-81czapheee] {
        min-height: auto;
        max-width: calc(100% - 32px);
        padding: 45px 0 45px;
    }

    .featured-amenities-title[b-81czapheee] {
        font-size: 24px;
    }

    .featured-amenities-list[b-81czapheee] {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px 0 20px 38px;
    }

    .featured-amenity-icon[b-81czapheee] {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
    }

        .featured-amenity-icon .material-icons[b-81czapheee] {
            font-size: 29px;
        }

    .featured-amenity-name[b-81czapheee] {
        font-size: 19px;
    }

    .featured-amenity-description[b-81czapheee] {
        font-size: 14px;
    }

    .featured-amenities-button[b-81czapheee] {
        min-width: 160px;
        height: 46px;
    }
}


@media (max-width: 450px) {

    .featured-amenities-container[b-81czapheee] {
        max-width: calc(100% - 24px);
    }

    .featured-amenities-title[b-81czapheee] {
        font-size: 21px;
    }

    .featured-amenity-icon[b-81czapheee] {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        margin-right: 14px;
    }

        .featured-amenity-icon .material-icons[b-81czapheee] {
            font-size: 27px;
        }

    .featured-amenity-name[b-81czapheee] {
        font-size: 17px;
    }

    .featured-amenity-description[b-81czapheee] {
        font-size: 13px;
    }
}
/* ========================================
   COMMON
======================================== */

.upcoming-section[b-81czapheee],
.station-map-section[b-81czapheee] {
    width: 100%;
    background: #ffffff;
}

.upcoming-container[b-81czapheee],
.station-map-container[b-81czapheee] {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    box-sizing: border-box;
}


/* ========================================
   LỊCH TRÌNH SẮP TỚI
======================================== */

.upcoming-container[b-81czapheee] {
    padding: 58px 0 28px;
}

.section-heading[b-81czapheee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .section-heading h3[b-81czapheee] {
        margin: 0;
        color: #111827;
        font-size: 26px;
        line-height: 1.4;
        font-weight: 700;
    }

.section-more[b-81czapheee] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #111827;
    font-size: 16px;
    cursor: pointer;
}

    .section-more .material-icons[b-81czapheee] {
        font-size: 20px;
    }


/* ========================================
   TABLE
======================================== */

.schedule-table-wrapper[b-81czapheee] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e1e4e8;
    border-radius: 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.schedule-table[b-81czapheee] {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    color: #111827;
    font-size: 14px;
}


    /* Header */

    .schedule-table thead th[b-81czapheee] {
        height: 56px;
        padding: 0 14px;
        background: #2144b9;
        color: #ffffff;
        text-align: left;
        vertical-align: middle;
        font-size: 19px;
        font-weight: 600;
        white-space: nowrap;
    }

        .schedule-table thead th:first-child[b-81czapheee] {
            border-top-left-radius: 6px;
        }

        .schedule-table thead th:last-child[b-81czapheee] {
            border-top-right-radius: 6px;
        }


/* Column widths */

.schedule-icon-column[b-81czapheee] {
    width: 48px;
}

.schedule-time-column[b-81czapheee] {
    width: 130px;
}

.schedule-position-column[b-81czapheee] {
    width: 130px;
}

.schedule-phone-column[b-81czapheee] {
    width: 190px;
}

.schedule-status-column[b-81czapheee] {
    width: 160px;
}


/* Body */

.schedule-table tbody td[b-81czapheee] {
    height: 88px;
    padding: 8px 14px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    font-size: 14px;
}

.schedule-table tbody tr:last-child td[b-81czapheee] {
    border-bottom: none;
}

.schedule-table tbody tr:hover[b-81czapheee] {
    background: #fafbfc;
}


/* Icon */

.schedule-icon[b-81czapheee] {
    text-align: center;
    padding-left: 12px !important;
    padding-right: 4px !important;
}

    .schedule-icon .material-icons[b-81czapheee] {
        color: #111827;
        font-size: 24px;
    }


/* Time */

.schedule-time[b-81czapheee] {
    color: #111827;
    font-size: 19px !important;
    font-weight: 700;
    white-space: nowrap;
}


/* Destination */

.schedule-destination[b-81czapheee] {
    min-width: 230px;
}

.destination-name[b-81czapheee] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
}

.destination-company[b-81czapheee] {
    margin-top: 4px;
    color: #b1b5ba;
    font-size: 16px;
    line-height: 1.3;
}


/* Position */

.schedule-position[b-81czapheee] {
    color: #111827;
    font-size: 19px !important;
    font-weight: 700;
}


/* Phone */

.phone-badge[b-81czapheee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 135px;
    height: 34px;
    padding: 0 13px;
    box-sizing: border-box;
    background: #ffb400;
    color: #061c4e;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

    .phone-badge .material-icons[b-81czapheee] {
        font-size: 17px;
    }


/* Status */

.status-badge[b-81czapheee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 108px;
    height: 29px;
    padding: 0 12px;
    box-sizing: border-box;
    background: #f9d4cf;
    color: #b72c24;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.status-dot[b-81czapheee] {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #c62d25;
    border-radius: 50%;
}


/* ========================================
   SƠ ĐỒ BẾN XE
======================================== */

.station-map-container[b-81czapheee] {
    padding: 18px 0 55px;
}

.station-map-title[b-81czapheee] {
    margin: 0 0 28px;
    color: #111827;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
}


/* Image */

.station-map-image[b-81czapheee] {
    width: 100%;
    overflow: hidden;
    border-radius: 7px;
}

    .station-map-image img[b-81czapheee] {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }


/* ========================================
   LEGEND
======================================== */

.station-map-legend[b-81czapheee] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 35px;
    row-gap: 16px;
    padding: 25px 0 0;
}

.legend-item[b-81czapheee] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.legend-number[b-81czapheee] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    background: #d52d28;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.legend-text[b-81czapheee] {
    color: #20252d;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .upcoming-container[b-81czapheee],
    .station-map-container[b-81czapheee] {
        max-width: calc(100% - 30px);
    }

    .station-map-legend[b-81czapheee] {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 25px;
    }
}


@media (max-width: 700px) {

    .upcoming-container[b-81czapheee] {
        padding-top: 35px;
    }

    .section-heading h3[b-81czapheee],
    .station-map-title[b-81czapheee] {
        font-size: 20px;
    }

    .schedule-table[b-81czapheee] {
        min-width: 900px;
    }

    .station-map-legend[b-81czapheee] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 20px;
    }
}


@media (max-width: 450px) {

    .upcoming-container[b-81czapheee],
    .station-map-container[b-81czapheee] {
        max-width: calc(100% - 20px);
    }

    .section-heading h3[b-81czapheee],
    .station-map-title[b-81czapheee] {
        font-size: 14px;
    }

    .station-map-legend[b-81czapheee] {
        grid-template-columns: repeat(2, 1fr);
    }
    .legend-text[b-81czapheee] {
        font-size: 13px;
    }
}
/* ========================================
   BOOKING BANNER
======================================== */

.booking-banner[b-81czapheee] {
    width: 100%;
    min-height: 240px;
    background-image: url('/Image/Trangchu_Datve_BG.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    box-sizing: border-box;
}

.booking-banner-container[b-81czapheee] {
    width: 1200px;
    max-width: calc(100% - 40px);
    min-height: 240px;
    margin: 0 auto;
    padding: 66px 0 58px;
    box-sizing: border-box;
}


/* ========================================
   SLOGAN
======================================== */

.booking-banner-slogan[b-81czapheee] {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
}


/* ========================================
   CONTENT
======================================== */

.booking-banner-content[b-81czapheee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


/* ========================================
   TITLE
======================================== */

.booking-banner-title[b-81czapheee] {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.3px;
}


/* ========================================
   BUTTON
======================================== */

.booking-banner-button[b-81czapheee] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 235px;
    height: 48px;
    box-sizing: border-box;
    background: #ffffff;
    color: #061c4e;
    border-radius: 7px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .booking-banner-button:hover[b-81czapheee] {
        background: #061c4e;
        color: #ffffff;
        transform: translateY(-2px);
    }


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .booking-banner-container[b-81czapheee] {
        max-width: calc(100% - 40px);
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .booking-banner-title[b-81czapheee] {
        font-size: 25px;
    }

    .booking-banner-button[b-81czapheee] {
        width: 210px;
    }
}


@media (max-width: 700px) {

    .booking-banner[b-81czapheee] {
        min-height: auto;
    }

    .booking-banner-container[b-81czapheee] {
        min-height: auto;
        padding-top: 45px;
        padding-bottom: 50px;
    }

    .booking-banner-content[b-81czapheee] {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .booking-banner-title[b-81czapheee] {
        font-size: 23px;
    }

    .booking-banner-button[b-81czapheee] {
        width: 210px;
    }
}


@media (max-width: 450px) {

    .booking-banner-container[b-81czapheee] {
        max-width: calc(100% - 30px);
        padding-top: 38px;
        padding-bottom: 45px;
    }

    .booking-banner-slogan[b-81czapheee] {
        font-size: 13px;
    }

    .booking-banner-title[b-81czapheee] {
        font-size: 20px;
    }

    .booking-banner-button[b-81czapheee] {
        width: 190px;
        height: 45px;
        font-size: 14px;
    }
}
/* ================================
   SMART BUS + NEWS RESPONSIVE
================================ */

.smart-section[b-81czapheee] {
    padding: 80px 0;
}

.smart-container[b-81czapheee] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 0;
    display: flex;
    gap: 24px;
}

.smart-card[b-81czapheee] {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    box-sizing: border-box;
}

.smart-info[b-81czapheee] {
    padding: 24px 48px;
    font-size: 16px;
    color: #061C4E;
    background-color: #E6E7E9;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.smart-info-title[b-81czapheee] {
    font-size: 23px;
    font-weight: bold;
}

.smart-info-content[b-81czapheee] {
    line-height: 24px;
}

.smart-action[b-81czapheee] {
    background-color: #FFB800;
    padding: 54px 48px;
}

.smart-action-title[b-81czapheee] {
    color: #1D252C;
    font-size: 33px;
    line-height: 40px;
    margin-bottom: 16px;
}

.smart-action-description[b-81czapheee] {
    margin-bottom: 24px;
    color: #5E656B;
    font-size: 16px;
}

.smart-action-buttons[b-81czapheee] {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    gap: 24px;
    text-align: center;
}

.smart-action-button[b-81czapheee] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    box-sizing: border-box;
}

    .smart-action-button.light[b-81czapheee] {
        background-color: #fff;
    }

    .smart-action-button.dark[b-81czapheee] {
        background-color: #1D252C;
        color: #fff;
    }

    .smart-action-button a[b-81czapheee] {
        text-decoration: none;
        color: inherit;
    }


/* ================================
   NEWS
================================ */

.news-section[b-81czapheee] {
    width: 100%;
}

.news-container[b-81czapheee] {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 80px 0;
    box-sizing: border-box;
}

.news-list[b-81czapheee] {
    display: flex;
    gap: 24px;
}

.news-item[b-81czapheee] {
    flex: 1;
    min-width: 0;
    text-decoration: none;
}

.news-card[b-81czapheee] {
    width: 100%;
    border-radius: 8px;
}

.news-image[b-81czapheee] {
    position: relative;
    height: 286px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px 8px 0 0;
}

.news-content[b-81czapheee] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-title[b-81czapheee] {
    font-weight: 500;
    color: #0C121F;
    font-size: 19px;
}

.news-description[b-81czapheee] {
    color: #8C9194;
    font-size: 16px;
}


/* ================================
   TABLET
================================ */

@media (max-width: 1200px) {
    .smart-container[b-81czapheee],
    .news-container[b-81czapheee] {
        width: calc(100% - 32px);
    }
}


/* ================================
   TABLET / MOBILE
================================ */

@media (max-width: 768px) {

    .smart-section[b-81czapheee] {
        padding: 48px 0;
    }

    .smart-container[b-81czapheee] {
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }

    .smart-info[b-81czapheee],
    .smart-action[b-81czapheee] {
        width: 100%;
    }

    .smart-info[b-81czapheee] {
        padding: 24px;
    }

    .smart-info-title[b-81czapheee] {
        font-size: 21px;
        line-height: 28px;
    }

    .smart-action[b-81czapheee] {
        padding: 32px 24px;
    }

    .smart-action-title[b-81czapheee] {
        font-size: 28px;
        line-height: 36px;
    }

    .smart-action-description br[b-81czapheee] {
        display: none;
    }

    .smart-action-buttons[b-81czapheee] {
        gap: 12px;
    }

    .news-container[b-81czapheee] {
        padding: 48px 0;
    }

    .news-list[b-81czapheee] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .news-image[b-81czapheee] {
        height: 240px;
    }

    .news-title[b-81czapheee] {
        font-size: 17px;
    }

    .news-description[b-81czapheee] {
        font-size: 15px;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 480px) {

    .smart-container[b-81czapheee],
    .news-container[b-81czapheee] {
        width: calc(100% - 24px);
    }

    .smart-info[b-81czapheee] {
        padding: 20px;
    }

    .smart-info-title[b-81czapheee] {
        font-size: 20px;
        line-height: 27px;
    }

    .smart-action[b-81czapheee] {
        padding: 28px 20px;
    }

    .smart-action-title[b-81czapheee] {
        font-size: 25px;
        line-height: 32px;
    }

    .smart-action-description[b-81czapheee] {
        line-height: 24px;
    }

    .smart-action-buttons[b-81czapheee] {
        flex-direction: column;
        gap: 10px;
    }

    .smart-action-button[b-81czapheee] {
        width: 100%;
    }

    .news-container[b-81czapheee] {
        padding: 40px 0;
    }

    .news-list[b-81czapheee] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .news-image[b-81czapheee] {
        height: 220px;
    }

    .news-title[b-81czapheee] {
        font-size: 18px;
    }

    .news-description[b-81czapheee] {
        font-size: 15px;
    }
}
/* /Components/Pages/FHome/Home_Search.razor.rz.scp.css */
/* =========================================
   TRANG KẾT QUẢ TÌM KIẾM
========================================= */

.search-page[b-t4s1r894qh] {
    min-height: 100vh;
    padding: 45px 0 80px;
    background: #f6f7f9;
}

.search-page-container[b-t4s1r894qh] {
    width: 1200px;
    max-width: calc(100% - 48px);
    margin: 0 auto;
}


/* =========================================
   HEADER
========================================= */

.search-page-header[b-t4s1r894qh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
}

    .search-page-header h1[b-t4s1r894qh] {
        margin: 0 0 12px;
        color: #061c4e;
        font-size: 28px;
    }

.search-route[b-t4s1r894qh] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #626a76;
}

    .search-route .material-icons[b-t4s1r894qh] {
        color: #1740b6;
    }

    .search-route strong[b-t4s1r894qh] {
        color: #061c4e;
    }

.search-count[b-t4s1r894qh] {
    color: #6b7280;
}


/* =========================================
   DANH SÁCH CHUYẾN
========================================= */

.trip-list[b-t4s1r894qh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* =========================================
   CARD CHUYẾN XE
========================================= */

.trip-card[b-t4s1r894qh] {
    display: grid;
    /* Giờ | Tuyến | Nhà xe/thông tin | Giá */
    grid-template-columns: 125px 1fr 280px 160px;
    align-items: center;
    gap: 28px;
    min-height: 150px;
    padding: 22px 28px;
    background: #ffffff;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(6, 28, 78, 0.06);
}


/* =========================================
   GIỜ XUẤT BẾN
========================================= */

.trip-time[b-t4s1r894qh] {
    min-width: 120px;
}

.trip-time-label[b-t4s1r894qh] {
    margin-bottom: 5px;
    color: #8b94a7;
    font-size: 12px;
    font-weight: 400;
}

.trip-time-value[b-t4s1r894qh] {
    color: #001b52;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}


/* Trạng thái */

.trip-status[b-t4s1r894qh] {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 10px;
    color: #1740b6;
    background: #eef3ff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================
   ĐIỂM ĐI -> ĐIỂM ĐẾN
========================================= */

.trip-route-info[b-t4s1r894qh] {
    display: flex;
    align-items: center;
    gap: 22px;
}

.trip-point[b-t4s1r894qh] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
}

    .trip-point small[b-t4s1r894qh] {
        color: #8b929c;
        font-size: 12px;
    }

    .trip-point strong[b-t4s1r894qh] {
        color: #061c4e;
        font-size: 14px;
        font-weight: 700;
    }

.trip-arrow[b-t4s1r894qh] {
    flex-shrink: 0;
    color: #1740b6;
    font-size: 24px;
}


/* =========================================
   NHÀ XE + THÔNG TIN
========================================= */

.trip-company[b-t4s1r894qh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .trip-company > strong[b-t4s1r894qh] {
        color: #061c4e;
        font-size: 15px;
        font-weight: 700;
    }

    .trip-company > span[b-t4s1r894qh] {
        margin-bottom: 3px;
        color: #6b7280;
        font-size: 14px;
    }


/* Các thông tin phụ */

.trip-detail[b-t4s1r894qh] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 12px;
}

    .trip-detail .material-icons[b-t4s1r894qh] {
        flex-shrink: 0;
        color: #1740b6;
        font-size: 16px;
    }

    .trip-detail b[b-t4s1r894qh] {
        color: #061c4e;
        font-weight: 600;
    }


/* =========================================
   GIÁ VÉ
========================================= */

.trip-price[b-t4s1r894qh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    text-align: right;
}

    .trip-price small[b-t4s1r894qh] {
        color: #8b929c;
        font-size: 12px;
    }

    .trip-price > strong[b-t4s1r894qh] {
        white-space: nowrap;
        color: #061c4e;
        font-size: 22px;
        font-weight: 700;
    }


/* =========================================
   NÚT ĐẶT VÉ
========================================= */

.trip-book-button[b-t4s1r894qh] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 110px;
    height: 38px;
    margin-top: 5px;
    padding: 0 18px;
    background: #ffb800;
    color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

    .trip-book-button:hover[b-t4s1r894qh] {
        background: #e9a900;
        color: #ffffff;
        text-decoration: none;
    }


/* =========================================
   LOADING / KHÔNG CÓ DỮ LIỆU
========================================= */

.search-status[b-t4s1r894qh],
.search-empty[b-t4s1r894qh] {
    padding: 60px 30px;
    text-align: center;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e1e5eb;
}

    .search-empty > .material-icons[b-t4s1r894qh] {
        color: #1740b6;
        font-size: 52px;
    }

    .search-empty h3[b-t4s1r894qh] {
        margin: 15px 0 8px;
        color: #061c4e;
    }

    .search-empty p[b-t4s1r894qh] {
        margin: 0;
        color: #6b7280;
    }


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .trip-card[b-t4s1r894qh] {
        grid-template-columns: 110px 1fr 220px 140px;
        gap: 18px;
        padding: 20px;
    }

    .trip-route-info[b-t4s1r894qh] {
        gap: 15px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {

    .search-page[b-t4s1r894qh] {
        padding: 30px 0 50px;
    }

    .search-page-container[b-t4s1r894qh] {
        max-width: calc(100% - 30px);
    }

    .search-page-header[b-t4s1r894qh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .search-page-header h1[b-t4s1r894qh] {
            font-size: 23px;
        }

    .trip-card[b-t4s1r894qh] {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: auto;
        padding: 20px;
    }

    .trip-time[b-t4s1r894qh] {
        min-width: 0;
    }

    .trip-route-info[b-t4s1r894qh] {
        justify-content: flex-start;
    }

    .trip-company[b-t4s1r894qh] {
        padding-top: 15px;
        border-top: 1px solid #e8ebf0;
    }

    .trip-price[b-t4s1r894qh] {
        align-items: flex-start;
        padding-top: 15px;
        text-align: left;
        border-top: 1px solid #e8ebf0;
    }

    .trip-book-button[b-t4s1r894qh] {
        width: 100%;
    }
}
/* /Components/Pages/FLichTrinh/LichTrinh.razor.rz.scp.css */
.home-banner[b-wvecm3am0s] {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    margin-top: -70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-slogan[b-wvecm3am0s] {
    width: 100%;
    color: #ffffff;
}

.slogan-vn[b-wvecm3am0s] {
    color: #ffffff;
    font-size: 25px;
    font-family: "Playwrite US Trad", cursive;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    text-decoration: underline;
}

.slogan-en[b-wvecm3am0s] {
    font-family: "Goldman";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.bus-filter-input[b-wvecm3am0s] {
    width: 100%;
    margin-top: 10px;
}

.bus-filter-input input[b-wvecm3am0s] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    color: #061C4E;
    background: #fff;
    box-sizing: border-box;
 }

 .bus-filter-input input:focus[b-wvecm3am0s] {
    border-color: #061C4E;
  }
.notice-header[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .notice-header h3[b-wvecm3am0s] {
        margin: 0 0 10px 0;
        color: #061c4e;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
    }

    .notice-header p[b-wvecm3am0s] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }
.notice-navigation[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-nav-button[b-wvecm3am0s] {
    width: 44px;
    height: 44px;
    border: 2px solid #061c4e;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: #061c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .notice-nav-button .material-icons[b-wvecm3am0s] {
        font-size: 27px;
    }

    .notice-nav-button:hover[b-wvecm3am0s] {
        background: #FFB800;
        color: #ffffff;
        border: #FFB800;
    }

.bodyCT[b-wvecm3am0s] {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: auto;
    padding: 80px 0;
}

.news-date[b-wvecm3am0s] {
    position: absolute;
    left: -12px;
    bottom: 14px;
    width: 56px;
    height: 46px;
    background: #ffb000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Đổ bóng nhẹ cho toàn bộ badge */
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.18);
}

    /* Phần bóng đen xiên phía dưới */
    .news-date[b-wvecm3am0s]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -14px;
        width: 0;
        height: 0;
        border-top: 14px solid #3f3f32;
        border-left: 12px solid transparent;
        z-index: -1;
    }

.news-day[b-wvecm3am0s] {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.news-month[b-wvecm3am0s] {
    font-size: 11px;
    margin-top: 2px;
}
.news-list[b-wvecm3am0s] {
    display: flex;
    gap: 24px;
}

.news-item[b-wvecm3am0s] {
    flex: 1;
    min-width: 0;
    text-decoration: none;
}

.news-card[b-wvecm3am0s] {
    width: 100%;
    border-radius: 8px;
}

.news-image[b-wvecm3am0s] {
    position: relative;
    height: 286px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px 8px 0 0;
}

.news-content[b-wvecm3am0s] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-title[b-wvecm3am0s] {
    font-weight: 500;
    color: #0C121F;
    font-size: 19px;
}

.news-description[b-wvecm3am0s] {
    color: #8C9194;
    font-size: 16px;
}
/* =========================
   BUS SEARCH
========================= */
.bus-operator-page[b-wvecm3am0s] {
    width: 100%;
}

.bus-operator-container[b-wvecm3am0s] {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}
.bus-operator-layout[b-wvecm3am0s] {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.bus-search[b-wvecm3am0s] {
    width: 100%;
}

.bus-search-container[b-wvecm3am0s] {
    position: relative;
    max-width: 1200px;
    min-height: 205px;
    margin: 0 auto;
    padding: 22px 22px 18px;
    background: linear-gradient( 90deg, rgba(0, 91, 170, 0.92), rgba(0, 72, 145, 0.96) );
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

/* =========================
   DESCRIPTION
========================= */

.bus-search-description[b-wvecm3am0s] {
    margin-bottom: 21px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}


/* =========================
   SEARCH FORM
========================= */

.bus-search-form[b-wvecm3am0s] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) 135px;
    gap: 22px;
    align-items: center;
}


/* =========================
   SEARCH FIELD
========================= */

.bus-search-field[b-wvecm3am0s] {
    height: 52px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 7px;
    box-sizing: border-box;
    padding: 0 14px;
    color: #333333;
}
.field-input[b-wvecm3am0s] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #172554;
    padding: 0;
    font-family: inherit;
}

    .field-input[b-wvecm3am0s]::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    .field-input:focus[b-wvecm3am0s] {
        outline: none;
        box-shadow: none;
    }

.field-content[b-wvecm3am0s] {
    flex: 1;
    min-width: 0;
}
.field-icon[b-wvecm3am0s] {
    flex-shrink: 0;
    margin-right: 12px;
    font-size: 23px;
}

.departure-icon[b-wvecm3am0s] {
    color: #4d9900;
}

.destination-icon[b-wvecm3am0s] {
    color: #d52c2c;
}

.date-icon[b-wvecm3am0s] {
    color: #1671c5;
}

.field-content[b-wvecm3am0s] {
    min-width: 0;
    align-items: center;
}

.field-value[b-wvecm3am0s] {
    color: #222222;
    font-size: 17px;
    font-weight: 600;
}

.field-placeholder[b-wvecm3am0s] {
    color: #b7b7b7;
    font-size: 17px;
    font-weight: 400;
}


/* =========================
   SEARCH BUTTON
========================= */

.bus-search-button[b-wvecm3am0s] {
    height: 52px;
    border: none;
    border-radius: 7px;
    background: #ffbd00;
    color: #071c45;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .bus-search-button:hover[b-wvecm3am0s] {
        background: #ffc928;
    }

    .bus-search-button:active[b-wvecm3am0s] {
        transform: scale(0.98);
    }


/* =========================
   ROUTE SWITCH
========================= */

.route-switch-line[b-wvecm3am0s] {
    position: relative;
    width: calc( (100% - 22px - 22px - 135px - 44px) / 2 );
    height: 48px;
    left: 25px;
    margin-top: -1px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}

/* đường nét vàng */

.route-line[b-wvecm3am0s] {
    width: 50%;
    height: 23px;
    border-bottom: 2px dashed #ffc400;
}

    .route-line:first-child[b-wvecm3am0s] {
        border-left: 2px dashed #ffc400;
        border-bottom-left-radius: 8px;
    }

    .route-line:last-child[b-wvecm3am0s] {
        border-right: 2px dashed #ffc400;
        border-bottom-right-radius: 8px;
    }


/* =========================
   SWITCH BUTTON
========================= */

.route-switch-button[b-wvecm3am0s] {
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    width: 31px;
    height: 31px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffc400;
    border-radius: 50%;
    background: #ffffff;
    color: #ffc400;
    pointer-events: auto;
}

    .route-switch-button .material-icons[b-wvecm3am0s] {
        font-size: 18px;
    }


/* =========================
   POPULAR ROUTES
========================= */

.popular-routes[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: -3px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.5;
}

.popular-routes-title[b-wvecm3am0s] {
    white-space: nowrap;
}

.popular-route[b-wvecm3am0s] {
    color: #ffd000;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .popular-route:hover[b-wvecm3am0s] {
        color: #ffffff;
    }
/* ==========================
   FILTER CARD
========================== */

.bus-filter[b-wvecm3am0s] {
    width: 100%;
}

.bus-filter-card[b-wvecm3am0s] {
    width: 100%;
    padding: 16px 14px 14px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}


/* ==========================
   FILTER HEADER
========================== */

.bus-filter-header[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.bus-filter-icon[b-wvecm3am0s] {
    font-size: 20px;
    color: #263238;
    margin-right: 9px;
}

.bus-filter-title[b-wvecm3am0s] {
    margin: 0;
    color: #20252b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}


/* ==========================
   FILTER GROUP
========================== */

.bus-filter-group[b-wvecm3am0s] {
    margin-bottom: 17px;
}

.bus-filter-group-title[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #292d32;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}


/* Tam giác vàng */

.filter-arrow[b-wvecm3am0s] {
    width: 0;
    height: 0;
    margin-right: 8px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #ffbd00;
}


/* ==========================
   TIME BUTTON
========================== */

.bus-time-options[b-wvecm3am0s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.bus-time-option[b-wvecm3am0s] {
    height: 35px;
    padding: 0 6px;
    background: #ffffff;
    border: 1px solid #b8bdc4;
    border-radius: 7px;
    color: #34383d;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .bus-time-option:hover[b-wvecm3am0s] {
        border-color: #09265e;
        color: #09265e;
    }

    .bus-time-option.active[b-wvecm3am0s] {
        background: #09265e;
        border-color: #09265e;
        color: #ffffff;
    }


/* ==========================
   CHECKBOX OPTIONS
========================== */

.bus-checkbox-options[b-wvecm3am0s] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bus-checkbox-item[b-wvecm3am0s] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 23px;
    cursor: pointer;
    user-select: none;
}


    /* Ẩn checkbox mặc định */

    .bus-checkbox-item input[b-wvecm3am0s] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }


/* Checkbox custom */

.custom-checkbox[b-wvecm3am0s] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-right: 14px;
    border: 1px solid #c5c9ce;
    border-radius: 3px;
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.15s ease;
}


/* Checked */

.bus-checkbox-item input:checked + .custom-checkbox[b-wvecm3am0s] {
    background: #09265e;
    border-color: #09265e;
}

    .bus-checkbox-item input:checked + .custom-checkbox[b-wvecm3am0s]::after {
        content: "";
        display: block;
        width: 4px;
        height: 8px;
        margin: 1px auto 0;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        transform: rotate(45deg);
    }


/* Text */

.checkbox-text[b-wvecm3am0s] {
    color: #363a40;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}


/* ==========================
   APPLY BUTTON
========================== */

.bus-filter-apply[b-wvecm3am0s] {
    width: 100%;
    height: 45px;
    margin-top: 4px;
    border: none;
    border-radius: 6px;
    background: #09265e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

    .bus-filter-apply:hover[b-wvecm3am0s] {
        background: #123b82;
    }

    .bus-filter-apply:active[b-wvecm3am0s] {
        transform: scale(0.98);
    }
/* =====================================================
   BUS LIST
===================================================== */

.bus-list[b-wvecm3am0s] {
    width: 100%;
}


/* =====================================================
   HEADER
===================================================== */

.bus-list-header[b-wvecm3am0s] {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bus-list-count[b-wvecm3am0s] {
    margin: 0;
    color: #09265e;
    font-size: 23px;
    font-weight: 700;
}

.bus-sort[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    color: #1f2d45;
    font-size: 16px;
}

.bus-sort-button[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    margin-left: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: #061C4E;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

    .bus-sort-button .material-icons[b-wvecm3am0s] {
        margin-left: 5px;
        font-size: 20px;
    }


/* =====================================================
   BUS TICKET
===================================================== */

.bus-ticket[b-wvecm3am0s] {
    display: flex;
    gap: 24px;
    column-gap: 20px;
    min-height: 208px;
    margin-top: 24px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}


/* =====================================================
   IMAGE
===================================================== */

.bus-ticket-image[b-wvecm3am0s] {
    width: 195px;
    height: 195px;
    overflow: hidden;
    border-radius: 7px;
}

    .bus-ticket-image img[b-wvecm3am0s] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* =====================================================
   CONTENT
===================================================== */

.bus-ticket-content[b-wvecm3am0s] {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* =====================================================
   COMPANY
===================================================== */

.bus-ticket-top[b-wvecm3am0s] {
    display: flex;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid #B2B5B9;
}

.bus-company-name[b-wvecm3am0s] {
    margin: 0 0 8px;
    color: #09265e;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.bus-company-info[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.bus-rating[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    color: #061C4E;
    font-size: 13px;
    font-weight: 400;
}

    .bus-rating .material-icons[b-wvecm3am0s] {
        margin-right: 4px;
        color: #ffc400;
        font-size: 16px;
    }

.bus-type[b-wvecm3am0s] {
    padding: 4px 10px;
    background: #FACC15;
    border-radius: 4px;
    color: #061C4E;
    font-size: 13px;
    font-weight: 400;
}


/* =====================================================
   ROUTE
===================================================== */
.bus-center[b-wvecm3am0s] {
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #B2B5B9;
}
.bus-route[b-wvecm3am0s] {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(100px, 1.2fr) minmax(90px, 1fr);
    align-items: center;
}


/* Điểm */

.bus-route-point[b-wvecm3am0s] {
    min-width: 0;
}

.bus-time[b-wvecm3am0s] {
    color: #061C4E;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.bus-station[b-wvecm3am0s] {
    margin-top: 8px;
    color: #061C4E;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bus-arrival[b-wvecm3am0s] {
    padding-left: 5px;
}


/* =====================================================
   DURATION
===================================================== */

.bus-route-duration[b-wvecm3am0s] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3px;
}

.duration-text[b-wvecm3am0s] {
    color: #061C4E;
    font-size: 13px;
    white-space: nowrap;
}

.route-progress[b-wvecm3am0s] {
    position: relative;
    width: 100%;
    height: 18px;
    margin-top: 1px;
    display: flex;
    align-items: center;
}

.route-progress-line[b-wvecm3am0s] {
    width: 100%;
    height: 1px;
    background: #A0A3AB;
}

.route-dot[b-wvecm3am0s] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FACC15;
    border-radius: 50%;
    box-sizing: border-box;
}

.route-dot-left[b-wvecm3am0s] {
    left: 0;
}

.route-dot-right[b-wvecm3am0s] {
    right: 0;
    background: #ffffff;
    border: 1px solid #ffc400;
}


/* =====================================================
   AMENITIES
===================================================== */

.bus-amenities[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 0;
}

.bus-amenity[b-wvecm3am0s] {
    display: flex;
    align-items: center;
    color: #061C4E;
    font-size: 13px;
    white-space: nowrap;
}

    .bus-amenity .material-icons[b-wvecm3am0s] {
        margin-right: 8px;
        color: #061C4E;
        font-size: 16px;
    }


/* =====================================================
   RIGHT - PRICE
===================================================== */

.bus-price[b-wvecm3am0s] {
    margin-top: 0;
    color: #061C4E;
    font-size: 33px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.bus-seat[b-wvecm3am0s] {
    margin-top: 8px;
    color: #172c4e;
    font-size: 12px;
    white-space: nowrap;
}

.bus-book-button[b-wvecm3am0s] {
    width: 128px;
    height: 46px;
    border: none;
    border-radius: 6px;
    background: #09265e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

    .bus-book-button:hover[b-wvecm3am0s] {
        background: #123d83;
    }

    .bus-book-button:active[b-wvecm3am0s] {
        transform: scale(0.97);
    }


/* =====================================================
   EMPTY
===================================================== */

.bus-empty[b-wvecm3am0s] {
    padding: 40px 20px;
    text-align: center;
    color: #666666;
    font-size: 15px;
}
/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1200px) {

    .home-banner > div[b-wvecm3am0s] {
        max-width: calc(100% - 40px) !important;
    }

    .banner-slogan > div[b-wvecm3am0s] {
        width: 100% !important;
    }

    .home-banner > div > div[b-wvecm3am0s] {
        width: 100%;
    }

    .bus-search-container[b-wvecm3am0s] {
        width: 100%;
    }

    .bus-search-form[b-wvecm3am0s] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .bus-search-button[b-wvecm3am0s] {
        width: 100%;
    }

    .route-switch-line[b-wvecm3am0s] {
        display: none;
    }

    .popular-routes[b-wvecm3am0s] {
        margin-top: 16px;
    }

    .bus-operator-container[b-wvecm3am0s] {
        max-width: calc(100% - 40px);
    }

    .bus-operator-layout[b-wvecm3am0s] {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 16px;
    }

    .bus-ticket[b-wvecm3am0s] {
        gap: 14px;
    }

    .bus-ticket-image[b-wvecm3am0s] {
        width: 150px;
        height: 150px;
        flex-shrink: 0;
    }

    .bus-company-name[b-wvecm3am0s] {
        font-size: 20px;
    }

    .bus-price[b-wvecm3am0s] {
        font-size: 27px;
    }

    .bus-time[b-wvecm3am0s] {
        font-size: 20px;
    }

    .bus-center[b-wvecm3am0s] {
        gap: 15px;
    }

    .bus-route[b-wvecm3am0s] {
        min-width: 0;
        flex: 1;
    }

    .bus-book-button[b-wvecm3am0s] {
        flex-shrink: 0;
    }

    .bodyCT[b-wvecm3am0s] {
        max-width: calc(100% - 40px);
    }
}


/* =========================================================
   TABLET NHỎ
========================================================= */

@media (max-width: 900px) {

    /* =========================
       BANNER
    ========================= */

    .home-banner[b-wvecm3am0s] {
        height: auto;
        min-height: 720px;
        margin-top: -70px;
        padding-top: 150px;
        padding-bottom: 30px;
        box-sizing: border-box;
    }

        .home-banner > div[b-wvecm3am0s] {
            position: static !important;
            max-width: calc(100% - 32px) !important;
        }

            .home-banner > div > div[b-wvecm3am0s] {
                position: static !important;
                gap: 24px !important;
            }

    .banner-slogan > div[b-wvecm3am0s] {
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 16px !important;
    }

    .slogan-vn[b-wvecm3am0s] {
        font-size: 21px;
    }

    .slogan-en[b-wvecm3am0s] {
        font-size: 25px;
    }


    /* =========================
       BUS SEARCH
    ========================= */

    .bus-search-container[b-wvecm3am0s] {
        padding: 18px;
        min-height: auto;
    }

    .bus-search-description[b-wvecm3am0s] {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .bus-search-form[b-wvecm3am0s] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .bus-search-field[b-wvecm3am0s] {
        height: 48px;
    }

    .bus-search-button[b-wvecm3am0s] {
        height: 48px;
    }

    .popular-routes[b-wvecm3am0s] {
        gap: 7px 18px;
        font-size: 14px;
    }


    /* =========================
       FILTER + LIST
    ========================= */

    .bus-operator-layout[b-wvecm3am0s] {
        grid-template-columns: 1fr;
    }

    .bus-filter-card[b-wvecm3am0s] {
        padding: 15px;
    }

    .bus-list-header[b-wvecm3am0s] {
        height: auto;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .bus-list-count[b-wvecm3am0s] {
        font-size: 20px;
    }

    .bus-sort[b-wvecm3am0s] {
        font-size: 14px;
    }

    .bus-sort-button[b-wvecm3am0s] {
        font-size: 14px;
        margin-left: 8px;
    }


    /* =========================
       TICKET
    ========================= */

    .bus-ticket[b-wvecm3am0s] {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 16px;
    }

    .bus-ticket-image[b-wvecm3am0s] {
        width: 140px;
        height: 140px;
    }

    .bus-ticket-content[b-wvecm3am0s] {
        min-width: 0;
    }

    .bus-ticket-top[b-wvecm3am0s] {
        gap: 15px;
    }

    .bus-company-name[b-wvecm3am0s] {
        font-size: 19px;
    }

    .bus-company-info[b-wvecm3am0s] {
        gap: 10px;
        flex-wrap: wrap;
    }

    .bus-price[b-wvecm3am0s] {
        font-size: 25px;
    }

    .bus-center[b-wvecm3am0s] {
        align-items: flex-end;
    }

    .bus-route[b-wvecm3am0s] {
        width: 100%;
    }

    .bus-book-button[b-wvecm3am0s] {
        width: 115px;
    }

    .bus-amenities[b-wvecm3am0s] {
        gap: 12px 20px;
    }


    /* =========================
       NEWS
    ========================= */

    .bodyCT > div[style*="display: flex"][b-wvecm3am0s] {
        flex-wrap: wrap !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    /* =========================
       COMMON
    ========================= */

    .bodyCT[b-wvecm3am0s] {
        width: 100%;
        max-width: calc(100% - 24px);
        padding: 45px 0;
    }

    .bus-operator-container[b-wvecm3am0s] {
        width: 100%;
        max-width: calc(100% - 24px);
    }


    /* =========================
       BANNER
    ========================= */

    .home-banner[b-wvecm3am0s] {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 20px;
        margin-top: -40px;
    }

        .home-banner > div[b-wvecm3am0s] {
            max-width: calc(100% - 24px) !important;
        }

    .banner-slogan > div[b-wvecm3am0s] {
        border-left-width: 3px !important;
        padding-left: 12px !important;
    }

    .slogan-vn[b-wvecm3am0s] {
        font-size: 17px;
        line-height: 1.4;
        margin-bottom: 6px;
    }

    .slogan-en[b-wvecm3am0s] {
        font-size: 19px;
        line-height: 1.35;
        letter-spacing: 0;
    }


    /* =========================
       SEARCH
    ========================= */

    .bus-search-container[b-wvecm3am0s] {
        padding: 15px;
        border-radius: 7px;
    }

    .bus-search-description[b-wvecm3am0s] {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 13px;
    }

    .bus-search-form[b-wvecm3am0s] {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .bus-search-field[b-wvecm3am0s] {
        width: 100%;
        height: 46px;
        min-height: 46px;
    }

    .field-icon[b-wvecm3am0s] {
        font-size: 21px;
        margin-right: 9px;
    }

    .field-input[b-wvecm3am0s] {
        font-size: 14px;
    }

    .field-placeholder[b-wvecm3am0s] {
        font-size: 14px;
    }

    .bus-search-button[b-wvecm3am0s] {
        width: 100%;
        height: 46px;
        font-size: 15px;
    }

    .route-switch-line[b-wvecm3am0s] {
        display: none;
    }

    .popular-routes[b-wvecm3am0s] {
        display: block;
        margin-top: 13px;
        font-size: 13px;
        line-height: 1.8;
    }

    .popular-routes-title[b-wvecm3am0s] {
        display: block;
        margin-bottom: 3px;
    }

    .popular-route[b-wvecm3am0s] {
        display: inline-block;
        margin-right: 12px;
    }


    /* =========================
       FILTER
    ========================= */

    .bus-operator-layout[b-wvecm3am0s] {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .bus-filter-card[b-wvecm3am0s] {
        padding: 14px;
    }

    .bus-filter-header[b-wvecm3am0s] {
        margin-bottom: 14px;
    }

    .bus-filter-title[b-wvecm3am0s] {
        font-size: 18px;
    }

    .bus-filter-group[b-wvecm3am0s] {
        margin-bottom: 14px;
    }

    .bus-filter-group-title[b-wvecm3am0s] {
        font-size: 14px;
    }

    .checkbox-text[b-wvecm3am0s] {
        font-size: 13px;
    }

    .bus-filter-apply[b-wvecm3am0s] {
        height: 43px;
    }


    /* =========================
       LIST HEADER
    ========================= */

    .bus-list-header[b-wvecm3am0s] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 15px;
    }

    .bus-list-count[b-wvecm3am0s] {
        font-size: 19px;
    }

    .bus-sort[b-wvecm3am0s] {
        width: 100%;
        justify-content: space-between;
        font-size: 13px;
    }

    .bus-sort-button[b-wvecm3am0s] {
        margin-left: 5px;
        font-size: 13px;
    }


    /* =========================
       TICKET
    ========================= */

    .bus-ticket[b-wvecm3am0s] {
        display: flex;
        flex-direction: column;
        gap: 13px;
        margin-top: 15px;
        padding: 12px;
    }

    .bus-ticket-image[b-wvecm3am0s] {
        width: 100%;
        height: 180px;
    }

    .bus-ticket-top[b-wvecm3am0s] {
        display: flex;
        gap: 12px;
        padding-bottom: 13px;
    }

        .bus-ticket-top > div:last-child[b-wvecm3am0s] {
            text-align: left !important;
        }

    .bus-company-name[b-wvecm3am0s] {
        font-size: 19px;
        margin-bottom: 7px;
    }

    .bus-company-info[b-wvecm3am0s] {
        gap: 8px;
    }

    .bus-rating[b-wvecm3am0s] {
        font-size: 12px;
    }

    .bus-type[b-wvecm3am0s] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .bus-price[b-wvecm3am0s] {
        font-size: 25px;
    }

    .bus-seat[b-wvecm3am0s] {
        margin-top: 4px;
        font-size: 12px;
    }


    /* =========================
       ROUTE
    ========================= */

    .bus-center[b-wvecm3am0s] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 14px 0;
    }

    .bus-route[b-wvecm3am0s] {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(65px, 1fr) minmax(70px, 1.2fr) minmax(65px, 1fr);
    }

    .bus-time[b-wvecm3am0s] {
        font-size: 19px;
    }

    .bus-station[b-wvecm3am0s] {
        margin-top: 5px;
        font-size: 12px;
    }

    .bus-route-duration[b-wvecm3am0s] {
        min-width: 0;
    }

    .duration-text[b-wvecm3am0s] {
        font-size: 11px;
    }

    .route-progress[b-wvecm3am0s] {
        margin-top: 2px;
    }

    .bus-arrival[b-wvecm3am0s] {
        padding-left: 5px;
        text-align: right;
    }

    .bus-book-button[b-wvecm3am0s] {
        width: 100%;
        height: 44px;
        font-size: 14px;
    }


    /* =========================
       AMENITIES
    ========================= */

    .bus-amenities[b-wvecm3am0s] {
        gap: 9px 15px;
        padding: 13px 0 3px;
    }

    .bus-amenity[b-wvecm3am0s] {
        font-size: 12px;
    }

        .bus-amenity .material-icons[b-wvecm3am0s] {
            margin-right: 5px;
            font-size: 15px;
        }


    /* =========================
       NEWS HEADER
    ========================= */

    .notice-header[b-wvecm3am0s] {
        margin-bottom: 15px;
    }

        .notice-header h3[b-wvecm3am0s] {
            font-size: 21px;
            margin-bottom: 0;
        }

    .notice-navigation[b-wvecm3am0s] {
        gap: 7px;
    }

    .notice-nav-button[b-wvecm3am0s] {
        width: 36px;
        height: 36px;
    }

        .notice-nav-button .material-icons[b-wvecm3am0s] {
            font-size: 22px;
        }
}


/* =========================================================
   MOBILE RẤT NHỎ
========================================================= */

@media (max-width: 400px) {

    .slogan-vn[b-wvecm3am0s] {
        font-size: 15px;
    }

    .slogan-en[b-wvecm3am0s] {
        font-size: 17px;
    }

    .bus-search-container[b-wvecm3am0s] {
        padding: 12px;
    }

    .bus-ticket-image[b-wvecm3am0s] {
        height: 160px;
    }

    .bus-company-name[b-wvecm3am0s] {
        font-size: 17px;
    }

    .bus-price[b-wvecm3am0s] {
        font-size: 22px;
    }

    .bus-time[b-wvecm3am0s] {
        font-size: 17px;
    }

    .bus-station[b-wvecm3am0s] {
        font-size: 11px;
    }

    .bus-route[b-wvecm3am0s] {
        grid-template-columns: minmax(55px, 1fr) minmax(55px, 1fr) minmax(55px, 1fr);
    }

    .bus-list-count[b-wvecm3am0s] {
        font-size: 17px;
    }

    .notice-header h3[b-wvecm3am0s] {
        font-size: 18px;
    }
}
/* /Components/Pages/FNhaXe/NhaXe.razor.rz.scp.css */
.home-banner[b-6coarrd5m7] {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    margin-top: -70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-content[b-6coarrd5m7] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: absolute;
    top: 218px;
    width: 626px;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}

.banner-slogan[b-6coarrd5m7] {
    width: 100%;
    color: #ffffff;
}

.banner-slogan-border[b-6coarrd5m7] {
    width: 1200px;
    border-left: 5px solid #ffffff;
    padding-left: 22px;
    margin: auto;
    color: #061C4E;
    box-sizing: border-box;
}

.banner-desc[b-6coarrd5m7] {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}

@media (max-width: 650px) {

    .banner-content[b-6coarrd5m7] {
        top: 130px;
        gap: 14px;
    }

    .banner-slogan-border[b-6coarrd5m7] {
        width: 100%;
    }

    .slogan-vn[b-6coarrd5m7] {
        font-size: 19px;
    }

    .slogan-en[b-6coarrd5m7] {
        font-size: 22px;
    }

    .banner-desc[b-6coarrd5m7] {
        font-size: 15px;
    }
}

.slogan-vn[b-6coarrd5m7] {
    color: #ffffff;
    font-size: 25px;
    font-family: "Playwrite US Trad", cursive;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.slogan-en[b-6coarrd5m7] {
    font-family: "Goldman";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.notice-header[b-6coarrd5m7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .notice-header h3[b-6coarrd5m7] {
        margin: 0 0 10px 0;
        color: #061c4e;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
    }

    .notice-header p[b-6coarrd5m7] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }

/* =========================
           NAVIGATION
        ========================= */

.notice-navigation[b-6coarrd5m7] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-nav-button[b-6coarrd5m7] {
    width: 44px;
    height: 44px;
    border: 2px solid #061c4e;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: #061c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .notice-nav-button .material-icons[b-6coarrd5m7] {
        font-size: 27px;
    }

    .notice-nav-button:hover[b-6coarrd5m7] {
        background: #FFB800;
        color: #ffffff;
        border: #FFB800;
    }

    .notice-nav-button:disabled[b-6coarrd5m7] {
        opacity: 0.4;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.8);
        color: #061c4e;
        border-color: #061c4e;
    }

        .notice-nav-button:disabled:hover[b-6coarrd5m7] {
            background: rgba(255, 255, 255, 0.8);
            color: #061c4e;
            border-color: #061c4e;
        }

.activity-news-list[b-6coarrd5m7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-card-hidden[b-6coarrd5m7] {
    display: none;
}

@media (max-width: 900px) {
    .activity-news-list[b-6coarrd5m7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .activity-news-list[b-6coarrd5m7] {
        grid-template-columns: repeat(1, 1fr);
    }
}

.bodyCT[b-6coarrd5m7] {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: auto;
    padding: 80px 0;
}
.news-date[b-6coarrd5m7] {
    position: absolute;
    left: -12px;
    bottom: 14px;
    width: 56px;
    height: 46px;
    background: #ffb000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Đổ bóng nhẹ cho toàn bộ badge */
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.18);
}

    /* Phần bóng đen xiên phía dưới */
    .news-date[b-6coarrd5m7]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -14px;
        width: 0;
        height: 0;
        border-top: 14px solid #3f3f32;
        border-left: 12px solid transparent;
        z-index: -1;
    }

.news-day[b-6coarrd5m7] {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.news-month[b-6coarrd5m7] {
    font-size: 11px;
    margin-top: 2px;
}
/* ================================
   BUS OPERATOR PAGE
================================ */

.bus-operator-page[b-6coarrd5m7] {
    width: 100%;
}

.bus-operator-container[b-6coarrd5m7] {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}


/* ================================
   TITLE
================================ */

.bus-operator-title[b-6coarrd5m7] {
    margin: 0 0 16px;
    color: #061C4E;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}


/* ================================
   MAIN LAYOUT
================================ */

.bus-operator-layout[b-6coarrd5m7] {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}


/* ================================
   FILTER
================================ */

.bus-filter[b-6coarrd5m7] {
    width: 100%;
}

.bus-filter-card[b-6coarrd5m7] {
    width: 100%;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
}

.bus-filter-title[b-6coarrd5m7] {
    margin: 0 0 24px;
    padding: 0;
    font-size: 23px;
    font-weight: 700;
    color: #0C121F;
}


/* ================================
   SEARCH BOX
================================ */

.bus-search-box[b-6coarrd5m7] {
    height: 38px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #bfc4ca;
    border-radius: 5px;
    background: #ffffff;
}

    .bus-search-box .material-icons[b-6coarrd5m7] {
        font-size: 20px;
        color: #222222;
    }

    .bus-search-box input[b-6coarrd5m7] {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 19px;
        color: #333333;
        background: transparent;
    }

        .bus-search-box input[b-6coarrd5m7]::placeholder {
            color: #a5a5a5;
        }


/* ================================
   FILTER GROUP
================================ */

.bus-filter-group[b-6coarrd5m7] {
    margin-top: 16px;
}

.bus-filter-group-title[b-6coarrd5m7] {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

    .bus-filter-group-title .material-icons[b-6coarrd5m7] {
        font-size: 14px;
        color: #facc15;
    }

.bus-checkbox[b-6coarrd5m7] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font-size: 16px;
    color: #374151;
    cursor: pointer;
}

    .bus-checkbox input[b-6coarrd5m7] {
        width: 12px;
        height: 12px;
        margin: 0;
        accent-color: #061c4e;
    }


/* ================================
   FILTER BUTTON
================================ */

.bus-filter-button[b-6coarrd5m7] {
    width: 100%;
    height: 35px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    background: #061c4e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .bus-filter-button:hover[b-6coarrd5m7] {
        background: #092d78;
    }


/* ================================
   BUS LIST
================================ */

.bus-operator-list[b-6coarrd5m7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


/* ================================
   BUS CARD
================================ */

.bus-operator-card[b-6coarrd5m7] {
    width: 384px;
    height: 563px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    padding: 16px;
}


/* ================================
   IMAGE
================================ */

.bus-image-link[b-6coarrd5m7] {
    display: block;
}

.bus-operator-image[b-6coarrd5m7] {
    display: block;
    width: 352px;
    height: 325px;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
}


/* ================================
   CARD CONTENT
================================ */

.bus-card-content[b-6coarrd5m7] {
    padding: 10px 0 0;
}


/* ================================
   CARD HEADER
================================ */

.bus-card-header[b-6coarrd5m7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.bus-card-name[b-6coarrd5m7] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #111827;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

    .bus-card-name:hover[b-6coarrd5m7] {
        color: #061c4e;
    }


/* ================================
   RATING
================================ */

.bus-rating[b-6coarrd5m7] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 4px 8px;
    background: #111827;
    border-radius: 3px;
    color: #facc15;
    font-size: 16px;
    font-weight: 600;
}

    .bus-rating .material-icons[b-6coarrd5m7] {
        font-size: 13px;
    }


/* ================================
   INFO
================================ */

.bus-card-info[b-6coarrd5m7] {
    margin-top: 4px;
}

.bus-info-item[b-6coarrd5m7] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    color: #777777;
    font-size: 13px;
    line-height: 1.4;
}

    .bus-info-item .material-icons[b-6coarrd5m7] {
        flex-shrink: 0;
        color: #facc15;
        font-size: 14px;
    }


/* ================================
   CARD ACTIONS
================================ */

.bus-card-actions[b-6coarrd5m7] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.bus-book-button[b-6coarrd5m7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background: #061c4e;
    color: #ffffff;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

    .bus-book-button:hover[b-6coarrd5m7] {
        background: #092d78;
        color: #ffffff;
    }


.bus-detail-button[b-6coarrd5m7] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #7d828a;
    border-radius: 5px;
    color: #111827;
    font-size: 23px;
    font-weight: 600;
    text-decoration: none;
}

    .bus-detail-button:hover[b-6coarrd5m7] {
        background: #f5f5f5;
        color: #061c4e;
    }


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 900px) {

    .bus-operator-container[b-6coarrd5m7] {
        max-width: calc(100% - 30px);
    }

    .bus-operator-layout[b-6coarrd5m7] {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .bus-operator-image[b-6coarrd5m7] {
        height: 190px;
    }

    .bus-card-name[b-6coarrd5m7] {
        font-size: 17px;
    }
}


@media (max-width: 700px) {

    .bus-operator-container[b-6coarrd5m7] {
        max-width: calc(100% - 24px);
    }

    .bus-operator-layout[b-6coarrd5m7] {
        grid-template-columns: 1fr;
    }

    .bus-filter-card[b-6coarrd5m7] {
        padding: 14px;
    }

    .bus-operator-list[b-6coarrd5m7] {
        grid-template-columns: 1fr;
    }

    .bus-operator-card[b-6coarrd5m7] {
        width: 100%;
        height: auto;
    }

    .bus-operator-image[b-6coarrd5m7] {
        width: 100%;
        height: 230px;
    }
}


@media (max-width: 450px) {

    .bus-operator-page[b-6coarrd5m7] {
        padding-top: 20px;
    }

    .bus-operator-title[b-6coarrd5m7] {
        font-size: 19px;
    }

    .bus-operator-image[b-6coarrd5m7] {
        height: 210px;
    }

    .bus-card-name[b-6coarrd5m7] {
        font-size: 17px;
    }
}
/* /Components/Pages/FNhaXe/NhaXeDetail.razor.rz.scp.css */
.home-banner[b-qmqrc5u1mb] {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    margin-top: -70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-content[b-qmqrc5u1mb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 626px;
    max-width: calc(100% - 40px);
    padding-top: 180px;
    box-sizing: border-box;
}

.banner-slogan[b-qmqrc5u1mb] {
    width: 100%;
    color: #ffffff;
}

.banner-slogan-border[b-qmqrc5u1mb] {
    width: 1200px;
    border-left: 5px solid #ffffff;
    padding-left: 22px;
    margin: auto;
    color: #061C4E;
    box-sizing: border-box;
}

.banner-desc[b-qmqrc5u1mb] {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}

.slogan-vn[b-qmqrc5u1mb] {
    color: #ffffff;
    font-size: 25px;
    font-family: "Playwrite US Trad", cursive;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    text-decoration: underline;
}

.slogan-en[b-qmqrc5u1mb] {
    font-family: "Goldman";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.stats-section[b-qmqrc5u1mb] {
    width: 100%;
    max-width: 485px;
    margin-top: 40px;
}

@media (max-width: 900px) {

    .home-banner[b-qmqrc5u1mb] {
        height: auto;
        padding-bottom: 24px;
    }

    .banner-content[b-qmqrc5u1mb] {
        width: 100%;
        gap: 14px;
        margin-top: 0;
        padding: 32px 20px 0;
        box-sizing: border-box;
    }

    .banner-slogan-border[b-qmqrc5u1mb] {
        width: 100%;
    }

    .slogan-vn[b-qmqrc5u1mb] {
        font-size: 19px;
    }

    .slogan-en[b-qmqrc5u1mb] {
        font-size: 22px;
    }

    .banner-desc[b-qmqrc5u1mb] {
        font-size: 15px;
    }

    .stats-section[b-qmqrc5u1mb] {
        max-width: 100%;
        margin: 24px auto 0;
        padding: 0 20px;
        box-sizing: border-box;
    }
}
@media (max-width: 480px) {
    .banner-content[b-qmqrc5u1mb] {
        gap: 5px;
        margin-top: 100px;
    }
    .stats-section[b-qmqrc5u1mb] {
        margin: 15px auto 0;
        padding: 0 15px;
    }
    .stats-grid[b-qmqrc5u1mb] {
        gap: 15px !important;
    }
    .stats-hotline[b-qmqrc5u1mb] {
        width: 200px !important;
        height: 40px !important;
        margin-top: 15px !important;
    }
}

    /* 2 cột */
    .stats-grid[b-qmqrc5u1mb] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Card */
    .stats-card[b-qmqrc5u1mb] {
        height: 125px;
        background: #ffffff;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        text-align: center;
    }

    /* Icon xe */
    .stats-icon[b-qmqrc5u1mb] {
        font-size: 35px;
        color: #FACC15;
        margin-bottom: 5px;
    }

    /* Số */
    .stats-number[b-qmqrc5u1mb] {
        color: #0C121F;
        font-size: 23px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    /* Nội dung */
    .stats-label[b-qmqrc5u1mb] {
        font-weight: 400;
        color: #0C121F;
        font-size: 13px;
        line-height: 1.3;
    }

    /* Hotline */
    .stats-hotline[b-qmqrc5u1mb] {
        width: 231px;
        height: 48px;
        margin-top: 24px;
        background: #1740B6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
    }

        .stats-hotline .material-icons[b-qmqrc5u1mb] {
            font-size: 21px;
        }

    .notice-header[b-qmqrc5u1mb] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
    }

        .notice-header h3[b-qmqrc5u1mb] {
            margin: 0 0 10px 0;
            color: #061c4e;
            font-size: 28px;
            line-height: 1.2;
            font-weight: 700;
        }

        .notice-header p[b-qmqrc5u1mb] {
            margin: 0;
            color: #6b7280;
            font-size: 14px;
            line-height: 1.5;
        }

    /* =========================
           NAVIGATION
        ========================= */

    .notice-navigation[b-qmqrc5u1mb] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .notice-nav-button[b-qmqrc5u1mb] {
        width: 44px;
        height: 44px;
        border: 2px solid #061c4e;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.8);
        color: #061c4e;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .notice-nav-button .material-icons[b-qmqrc5u1mb] {
            font-size: 27px;
        }

        .notice-nav-button:hover[b-qmqrc5u1mb] {
            background: #FFB800;
            color: #ffffff;
            border: #FFB800;
        }

        .notice-nav-button:disabled[b-qmqrc5u1mb] {
            opacity: 0.4;
            cursor: not-allowed;
            background: rgba(255, 255, 255, 0.8);
            color: #061c4e;
            border-color: #061c4e;
        }

            .notice-nav-button:disabled:hover[b-qmqrc5u1mb] {
                background: rgba(255, 255, 255, 0.8);
                color: #061c4e;
                border-color: #061c4e;
            }

    .activity-news-list[b-qmqrc5u1mb] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .news-card-hidden[b-qmqrc5u1mb] {
        display: none;
    }

    @media (max-width: 900px) {
        .activity-news-list[b-qmqrc5u1mb] {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 600px) {
        .activity-news-list[b-qmqrc5u1mb] {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .bodyCT[b-qmqrc5u1mb] {
        width: 1200px;
        max-width: calc(100% - 40px);
        margin: auto;
        padding: 80px 0;
    }

    .news-date[b-qmqrc5u1mb] {
        position: absolute;
        left: -12px;
        bottom: 14px;
        width: 56px;
        height: 46px;
        background: #ffb000;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
        /* Đổ bóng nhẹ cho toàn bộ badge */
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.18);
    }

        /* Phần bóng đen xiên phía dưới */
        .news-date[b-qmqrc5u1mb]::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -14px;
            width: 0;
            height: 0;
            border-top: 14px solid #3f3f32;
            border-left: 12px solid transparent;
            z-index: -1;
        }

    .news-day[b-qmqrc5u1mb] {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }

    .news-month[b-qmqrc5u1mb] {
        font-size: 11px;
        margin-top: 2px;
    }
    /* =====================================================
   BUS DETAIL PAGE
===================================================== */

    .bus-detail-page[b-qmqrc5u1mb] {
        width: 100%;
        background: #ffffff;
        padding: 80px 0;
    }

    .bus-detail-container[b-qmqrc5u1mb] {
        width: 1200px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
    }


    /* =====================================================
   TOP LAYOUT
===================================================== */

    .bus-top-layout[b-qmqrc5u1mb] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: 16px;
        align-items: start;
    }


    /* =====================================================
   SECTION HEADING
===================================================== */

    .section-heading-row[b-qmqrc5u1mb] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

        .section-heading-row h3[b-qmqrc5u1mb],
        .fleet-heading h3[b-qmqrc5u1mb],
        .price-table-title[b-qmqrc5u1mb],
        .review-summary h3[b-qmqrc5u1mb] {
            margin: 0;
            color: #1D252C;
            font-size: 23px;
            font-weight: 700;
        }

    .view-all-route[b-qmqrc5u1mb] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #0C121F;
        font-size: 16px;
        text-decoration: none;
    }

        .view-all-route:hover[b-qmqrc5u1mb] {
            color: #1740b6;
        }

        .view-all-route .material-icons[b-qmqrc5u1mb] {
            font-size: 20px;
        }


    /* =====================================================
   ROUTE LIST
===================================================== */

    .route-list[b-qmqrc5u1mb] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .route-card[b-qmqrc5u1mb] {
        width: 792px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 16px;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #e8e8e8;
        border-radius: 7px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .route-left[b-qmqrc5u1mb] {
        display: flex;
        gap: 24px;
    }
    /* =====================================================
   ROUTE TIME
===================================================== */
    .route-time[b-qmqrc5u1mb] {
        min-width: fit-content;
    }

        .route-time .time[b-qmqrc5u1mb] {
            color: #111827;
            font-size: 23px;
            font-weight: 700;
            line-height: 1.1;
        }

        .route-time .station[b-qmqrc5u1mb] {
            margin-top: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #0C121F;
            font-size: 13px;
        }


    /* =====================================================
   ROUTE LINE
===================================================== */

    .route-line[b-qmqrc5u1mb] {
        width: 116px;
    }

    .route-line-text[b-qmqrc5u1mb] {
        text-align: center;
        margin-bottom: 4px;
        color: #0C121F;
        font-size: 13px;
    }

    .route-line-track[b-qmqrc5u1mb] {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .route-dot[b-qmqrc5u1mb] {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border: 1px solid #1f2937;
        border-radius: 50%;
        background: #ffffff;
        box-sizing: border-box;
    }

        .route-dot.active[b-qmqrc5u1mb] {
            background: #1f2937;
        }

    .route-line-bar[b-qmqrc5u1mb] {
        flex: 1;
        height: 1px;
        background: #777777;
    }


    /* =====================================================
   PRICE
===================================================== */

    .route-price[b-qmqrc5u1mb] {
        min-width: 0;
        text-align: right;
    }

        .route-price .price[b-qmqrc5u1mb] {
            color: #0C121F;
            font-size: 28px;
            font-weight: 700;
            white-space: nowrap;
        }

        .route-price .price-sub[b-qmqrc5u1mb] {
            margin-top: 8px;
            color: #0C121F;
            font-size: 13px;
        }


    /* =====================================================
   PRICE TABLE
===================================================== */

    .price-table-title[b-qmqrc5u1mb] {
        margin-top: 48px;
        margin-bottom: 24px;
    }

    .price-table-wrapper[b-qmqrc5u1mb] {
        width: 100%;
        overflow: hidden;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .price-table[b-qmqrc5u1mb] {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        background: #ffffff;
    }

        .price-table th[b-qmqrc5u1mb] {
            height: 56px;
            padding: 16px;
            background: #1740B6;
            color: #ffffff;
            text-align: left;
            font-size: 19px;
            font-weight: 600;
        }

            .price-table th:nth-child(1)[b-qmqrc5u1mb] {
                width: 38%;
            }

            .price-table th:nth-child(2)[b-qmqrc5u1mb] {
                width: 21%;
            }

            .price-table th:nth-child(3)[b-qmqrc5u1mb] {
                width: 21%;
            }

            .price-table th:nth-child(4)[b-qmqrc5u1mb] {
                width: 20%;
            }

        .price-table td[b-qmqrc5u1mb] {
            height: 64px;
            padding: 16px;
            border-bottom: 1px solid #e5e7eb;
            color: #0C121F;
            font-size: 16px;
            font-weight: 400;
        }

        .price-table tbody tr:last-child td[b-qmqrc5u1mb] {
            border-bottom: none;
        }

        .price-table tbody tr:hover[b-qmqrc5u1mb] {
            background: #fafafa;
        }

    .route-arrow[b-qmqrc5u1mb] {
        margin: 0 5px;
        font-size: 15px;
    }

    .ticket-price[b-qmqrc5u1mb] {
        font-weight: 600 !important;
        color: #0C121F !important;
    }


    /* =====================================================
   STATUS
===================================================== */

    .status-badge[b-qmqrc5u1mb] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 20px;
        background: #F9D5CF;
        color: #C3271F;
        font-size: 13px;
        white-space: nowrap;
    }

    .status-dot[b-qmqrc5u1mb] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #C3271F;
    }


    /* =====================================================
   PREMIUM FLEET
===================================================== */

    .premium-fleet[b-qmqrc5u1mb] {
        min-width: 0;
    }

    .fleet-heading[b-qmqrc5u1mb] {
        height: 28px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

        .fleet-heading h3[b-qmqrc5u1mb] {
            font-size: 23px;
        }

    .fleet-card[b-qmqrc5u1mb] {
        position: relative;
        display: block;
        width: 100%;
        height: 384px;
        margin-bottom: 24px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 8px;
        overflow: hidden;
        text-decoration: none;
    }

    .fleet-overlay[b-qmqrc5u1mb] {
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45% );
    }

    .fleet-name[b-qmqrc5u1mb] {
        position: absolute;
        left: 12px;
        bottom: 10px;
        color: #ffffff;
        font-size: 23px;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }


    /* =====================================================
   REVIEW SECTION
===================================================== */

    .review-section[b-qmqrc5u1mb] {
        display: grid;
        grid-template-columns: 282px minmax(0, 1fr);
        gap: 24px;
        margin-top: 48px;
    }


    /* =====================================================
   REVIEW SUMMARY
===================================================== */

    .review-summary[b-qmqrc5u1mb] {
        min-width: 0;
    }

        .review-summary h3[b-qmqrc5u1mb] {
            font-size: 33px;
        }

    .review-description[b-qmqrc5u1mb] {
        margin: 8px 0 24px;
        color: #5D6267;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 400;
    }

    .review-score[b-qmqrc5u1mb] {
        min-height: 192px;
        padding: 36px 24px;
        box-sizing: border-box;
        background: #061C4E;
        border-radius: 8px;
        color: #ffffff;
    }

    .score-number[b-qmqrc5u1mb] {
        font-size: 33px;
        font-weight: 600;
    }

    .score-stars[b-qmqrc5u1mb] {
        margin-top: 10px;
    }

        .score-stars .cyber-star[b-qmqrc5u1mb] {
            color: #facc15;
        }

    .score-description[b-qmqrc5u1mb] {
        margin-top: 15px;
        color: #ffffff;
        font-size: 16px;
    }

    /* =====================================================
   REVIEW LIST
===================================================== */

    .review-list[b-qmqrc5u1mb] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .review-card[b-qmqrc5u1mb] {
        min-height: 148px;
        padding: 16px;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #0C121F;
        border-radius: 8px;
        box-shadow: -4px 0px 0px;
    }


    /* =====================================================
   REVIEW HEADER
===================================================== */

    .review-header[b-qmqrc5u1mb] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 15px;
    }

    .review-user[b-qmqrc5u1mb] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .review-avatar[b-qmqrc5u1mb] {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
    }

    .review-user-info[b-qmqrc5u1mb] {
        min-width: 0;
    }

    .review-name[b-qmqrc5u1mb] {
        color: #0C121F;
        font-size: 19px;
        font-weight: 600;
    }

    .review-route[b-qmqrc5u1mb] {
        margin-top: 3px;
        color: #5D6267;
        font-size: 16px;
        font-weight: 400;
    }

    .review-stars[b-qmqrc5u1mb] {
        flex-shrink: 0;
    }

        .review-stars .cyber-star[b-qmqrc5u1mb] {
            color: #facc15;
        }


    /* =====================================================
   REVIEW CONTENT
===================================================== */

    .review-content[b-qmqrc5u1mb] {
        margin-top: 16px;
        color: #5D6267;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 400;
    }


    /* =====================================================
   RESPONSIVE
===================================================== */

    @media (max-width: 900px) {

        .bus-detail-container[b-qmqrc5u1mb] {
            max-width: calc(100% - 30px);
        }

        .bus-top-layout[b-qmqrc5u1mb] {
            grid-template-columns: 1fr;
        }

        .route-card[b-qmqrc5u1mb] {
            width: 100%;
            min-width: 0;
            height: auto;
        }

        .route-left[b-qmqrc5u1mb] {
            min-width: 0;
            flex: 1;
        }

        .route-time[b-qmqrc5u1mb] {
            min-width: 0;
        }

        .premium-fleet[b-qmqrc5u1mb] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .fleet-heading[b-qmqrc5u1mb] {
            grid-column: 1 / -1;
        }

        .fleet-card[b-qmqrc5u1mb] {
            width: 100%;
            margin-bottom: 0;
        }

        .review-section[b-qmqrc5u1mb] {
            grid-template-columns: 1fr;
        }

        .review-score[b-qmqrc5u1mb] {
            max-width: 250px;
        }
    }


    @media (max-width: 650px) {

        .bus-detail-container[b-qmqrc5u1mb] {
            max-width: calc(100% - 20px);
        }

        .route-card[b-qmqrc5u1mb] {
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            min-height: 0;
        }

        .route-line[b-qmqrc5u1mb] {
            display: none;
        }

        .route-left[b-qmqrc5u1mb] {
            min-width: 0;
            gap: 10px;
        }

        .route-time[b-qmqrc5u1mb] {
            min-width: 0;
            flex: 1;
        }

            .route-time .time[b-qmqrc5u1mb] {
                font-size: 14px;
            }

            .route-time .station[b-qmqrc5u1mb] {
                font-size: 11px;
            }

        .route-price[b-qmqrc5u1mb] {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
        }

            .route-price .price[b-qmqrc5u1mb] {
                font-size: 14px;
            }

            .route-price .price-sub[b-qmqrc5u1mb] {
                margin-top: 2px;
                font-size: 11px;
            }

        .price-table-wrapper[b-qmqrc5u1mb] {
            overflow: visible;
            box-shadow: none;
            border-radius: 0;
        }

        .price-table[b-qmqrc5u1mb] {
            display: block;
            min-width: 0;
            width: 100%;
            table-layout: auto;
        }

            .price-table thead[b-qmqrc5u1mb] {
                display: none;
            }

            .price-table tbody[b-qmqrc5u1mb] {
                display: block;
            }

            .price-table tr[b-qmqrc5u1mb] {
                display: block;
                margin-bottom: 12px;
                padding: 4px 14px;
                border: 1px solid #e5e7eb;
                border-radius: 8px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            }

            .price-table tbody tr:last-child[b-qmqrc5u1mb] {
                margin-bottom: 0;
            }

            .price-table td[b-qmqrc5u1mb] {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                height: auto;
                padding: 10px 0;
                border-bottom: 1px solid #f0f0f0;
                font-size: 14px;
                text-align: right;
            }

            .price-table tr td:last-child[b-qmqrc5u1mb] {
                border-bottom: none;
            }

            .price-table td[b-qmqrc5u1mb]::before {
                content: attr(data-label);
                flex-shrink: 0;
                color: #6b7280;
                font-size: 13px;
                font-weight: 500;
                text-align: left;
            }

        .premium-fleet[b-qmqrc5u1mb] {
            grid-template-columns: 1fr;
        }

        .fleet-heading[b-qmqrc5u1mb] {
            grid-column: auto;
        }

        .fleet-card[b-qmqrc5u1mb] {
            height: 230px;
        }
    }


    @media (max-width: 450px) {

        .section-heading-row[b-qmqrc5u1mb] {
            align-items: flex-start;
            flex-direction: column;
            gap: 5px;
        }

        .review-section[b-qmqrc5u1mb] {
            grid-template-columns: 1fr;
        }

        .review-score[b-qmqrc5u1mb] {
            max-width: none;
        }

        .review-header[b-qmqrc5u1mb] {
            flex-direction: column;
            gap: 5px;
        }
    }
/* /Components/Pages/FTinTuc/TinTuc.razor.rz.scp.css */
.bodyCT[b-dr9kx3xipc] {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: auto;
    padding: 80px 0;
}

.home-banner[b-dr9kx3xipc] {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    margin-top: -70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tintuc-hero-grid[b-dr9kx3xipc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.tintuc-news-grid[b-dr9kx3xipc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@@media (max-width: 900px) {
    .home-banner[b-dr9kx3xipc] {
        height: auto;
        padding-bottom: 24px;
    }

    .bodyCT[b-dr9kx3xipc] {
        padding: 40px 0;
    }

    .tintuc-hero-grid[b-dr9kx3xipc] {
        grid-template-columns: 1fr;
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        padding: 24px 16px 0;
    }

    .tintuc-news-grid[b-dr9kx3xipc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@@media (max-width: 600px) {
    .bodyCT[b-dr9kx3xipc] {
        padding: 24px 0;
    }

    .tintuc-news-grid[b-dr9kx3xipc] {
        grid-template-columns: 1fr;
    }
}

.cyber-org-wrapper[b-dr9kx3xipc] {
    overflow: hidden;
}

.news-date[b-dr9kx3xipc] {
    position: absolute;
    left: -12px;
    bottom: 14px;
    width: 56px;
    height: 46px;
    background: #ffb000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Đổ bóng nhẹ cho toàn bộ badge */
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.18);
}

    /* Phần bóng đen xiên phía dưới */
    .news-date[b-dr9kx3xipc]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -14px;
        width: 0;
        height: 0;
        border-top: 14px solid #3f3f32;
        border-left: 12px solid transparent;
        z-index: -1;
    }

.news-day[b-dr9kx3xipc] {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.news-month[b-dr9kx3xipc] {
    font-size: 11px;
    margin-top: 2px;
}

.notice-header[b-dr9kx3xipc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .notice-header h3[b-dr9kx3xipc] {
        margin: 0 0 10px 0;
        color: #061c4e;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
    }

    .notice-header p[b-dr9kx3xipc] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }

/* =========================
           NAVIGATION
        ========================= */

.notice-navigation[b-dr9kx3xipc] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-nav-button[b-dr9kx3xipc] {
    width: 44px;
    height: 44px;
    border: 2px solid #061c4e;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: #061c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .notice-nav-button .material-icons[b-dr9kx3xipc] {
        font-size: 27px;
    }

    .notice-nav-button:hover[b-dr9kx3xipc] {
        background: #FFB800;
        color: #ffffff;
        border: #FFB800;
    }

    .notice-nav-button:disabled[b-dr9kx3xipc] {
        opacity: 0.4;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.8);
        color: #061c4e;
        border-color: #061c4e;
    }

        .notice-nav-button:disabled:hover[b-dr9kx3xipc] {
            background: rgba(255, 255, 255, 0.8);
            color: #061c4e;
            border-color: #061c4e;
        }

.news-card-hidden[b-dr9kx3xipc] {
    display: none;
}
/* /Components/Pages/FTinTuc/TinTucDetail.razor.rz.scp.css */
/* =========================================================
   NEWS DETAIL
   ========================================================= */

.news-detail-page[b-ird1rv5ecp] {
    width: 1200px;
    max-width: calc(100% - 32px);
    margin: -70px auto 0;
    padding: 88px 0 80px;
    color: #111827;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.news-breadcrumb[b-ird1rv5ecp] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #374151;
}

.news-breadcrumb a[b-ird1rv5ecp] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #374151;
    text-decoration: none;
}

    .news-breadcrumb a:hover[b-ird1rv5ecp] {
        text-decoration: underline;
    }

.news-breadcrumb span[aria-current="page"][b-ird1rv5ecp] {
    color: #6B7280;
}

.breadcrumb-home[b-ird1rv5ecp] {
    font-size: 19px;
    color: #111827;
}

.breadcrumb-arrow[b-ird1rv5ecp] {
    font-size: 19px;
    color: #111827;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.news-detail-layout[b-ird1rv5ecp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
    align-items: start;
}


/* =========================================================
   LEFT - ARTICLE
   ========================================================= */

.news-detail-main[b-ird1rv5ecp] {
    min-width: 0;
}

.news-detail-title[b-ird1rv5ecp] {
    margin: 0 0 18px;
    color: #101828;
    font-size: 27px;
    line-height: 1.18;
    font-weight: 750;
    letter-spacing: -0.3px;
}

.news-detail-date[b-ird1rv5ecp] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -8px 0 18px;
    color: #6B7280;
    font-size: 13px;
}

    .news-detail-date .material-icons[b-ird1rv5ecp] {
        font-size: 16px;
    }


/* Main image */

.news-main-image[b-ird1rv5ecp] {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    background: #f3f4f6;
}

    .news-main-image img[b-ird1rv5ecp] {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 500px;
        object-fit: cover;
    }


/* Article */

.news-content[b-ird1rv5ecp] {
    margin-top: 17px;
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 15px;
    line-height: 1.42;
    color: #111827;
}

    .news-content p[b-ird1rv5ecp] {
        margin: 0 0 13px;
    }

        .news-content p:last-child[b-ird1rv5ecp] {
            margin-bottom: 0;
        }

    .news-content h1[b-ird1rv5ecp],
    .news-content h2[b-ird1rv5ecp],
    .news-content h3[b-ird1rv5ecp],
    .news-content h4[b-ird1rv5ecp] {
        color: #111827;
        font-weight: 700;
    }

    .news-content img[b-ird1rv5ecp] {
        max-width: 100%;
        height: auto;
    }

    .news-content table[b-ird1rv5ecp] {
        max-width: 100%;
    }


/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */

.news-detail-sidebar[b-ird1rv5ecp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sidebar-card[b-ird1rv5ecp] {
    background: #ffffff;
    border-radius: 7px;
    border: 1px solid #dedede;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-card[b-ird1rv5ecp] {
    padding: 13px 12px;
}

.sidebar-label[b-ird1rv5ecp] {
    margin-bottom: 7px;
    font-size: 13px;
    color: #1f2937;
}

.news-search[b-ird1rv5ecp] {
    position: relative;
    width: 100%;
}

    .news-search > .material-icons[b-ird1rv5ecp] {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        font-size: 21px;
        color: #aeb5bd;
        pointer-events: none;
    }

    .news-search .cyber-textbox[b-ird1rv5ecp] {
        width: 100%;
    }


/* =========================================================
   RELATED NEWS
   ========================================================= */

.related-card[b-ird1rv5ecp] {
    padding: 12px;
}

.sidebar-title[b-ird1rv5ecp] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.sidebar-divider[b-ird1rv5ecp] {
    width: 100%;
    height: 1px;
    margin: 11px 0 10px;
    background: #d6d6d6;
}


/* Item */

.related-item[b-ird1rv5ecp] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 11px;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

    .related-item:last-of-type[b-ird1rv5ecp] {
        border-bottom: none;
        margin-bottom: 8px;
    }


/* Image */

.related-image[b-ird1rv5ecp] {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 4px;
    background: #f1f1f1;
}

    .related-image img[b-ird1rv5ecp] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* Info */

.related-info[b-ird1rv5ecp] {
    min-width: 0;
}

.related-category[b-ird1rv5ecp] {
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 1;
    color: #6b7280;
    text-transform: uppercase;
}

.related-title[b-ird1rv5ecp] {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    color: #111827;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.related-date[b-ird1rv5ecp] {
    margin-top: 3px;
    font-size: 10px;
    color: #b0b4ba;
}


/* All news button */

.all-news-button[b-ird1rv5ecp] {
    width: 100%;
    height: 37px;
    border: 1px solid #253044;
    border-radius: 5px;
    background: #ffffff;
    color: #111827;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .all-news-button:hover[b-ird1rv5ecp] {
        background: #f5f7fa;
    }


/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter-card[b-ird1rv5ecp] {
    position: relative;
    min-height: 312px;
    padding: 35px 18px 20px;
    overflow: hidden;
    border-radius: 6px;
    color: #ffffff;
    background-image: linear-gradient( 135deg, rgba(0, 84, 176, 0.94), rgba(0, 174, 239, 0.76) ), url('/Image/Tintuc_Dangky.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


    /* decorative glow */

    .newsletter-card[b-ird1rv5ecp]::after {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        right: -70px;
        bottom: -100px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.13);
    }


/* Icon */

.newsletter-icon[b-ird1rv5ecp] {
    position: relative;
    z-index: 2;
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 4px;
}

    .newsletter-icon .material-icons[b-ird1rv5ecp] {
        font-size: 26px;
        color: #075db4;
    }


/* Title */

.newsletter-card h3[b-ird1rv5ecp] {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    max-width: 230px;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
}


/* Description */

.newsletter-card p[b-ird1rv5ecp] {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}


/* Input */

.newsletter-input[b-ird1rv5ecp] {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}

    .newsletter-input .cyber-textbox[b-ird1rv5ecp] {
        width: 100%;
    }


/* Button */

.newsletter-button[b-ird1rv5ecp] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .newsletter-button:hover[b-ird1rv5ecp] {
        background: #f1f5f9;
        transform: translateY(-1px);
    }


/* =========================================================
   FLOATING HOME
   ========================================================= */

.floating-home[b-ird1rv5ecp] {
    position: fixed;
    left: 0;
    bottom: 264px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    z-index: 100;
}

    .floating-home .material-icons[b-ird1rv5ecp] {
        font-size: 23px;
        color: #111827;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .news-detail-page[b-ird1rv5ecp] {
        width: auto;
        max-width: calc(100% - 30px);
    }

    .news-detail-layout[b-ird1rv5ecp] {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
}


@media (max-width: 768px) {

    .news-detail-page[b-ird1rv5ecp] {
        width: auto;
        max-width: calc(100% - 24px);
        margin: 0 auto;
        padding: 25px 0 50px;
    }

    .news-detail-layout[b-ird1rv5ecp] {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .news-detail-title[b-ird1rv5ecp] {
        font-size: 23px;
    }

    .news-main-image img[b-ird1rv5ecp] {
        max-height: none;
    }

    .news-detail-sidebar[b-ird1rv5ecp] {
        width: 100%;
    }

    .floating-home[b-ird1rv5ecp] {
        display: none;
    }
}


@media (max-width: 480px) {

    .news-detail-page[b-ird1rv5ecp] {
        max-width: calc(100% - 20px);
    }

    .news-detail-title[b-ird1rv5ecp] {
        font-size: 21px;
    }

    .news-content[b-ird1rv5ecp] {
        padding: 14px;
        font-size: 14px;
    }

    .related-item[b-ird1rv5ecp] {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .related-image[b-ird1rv5ecp] {
        width: 80px;
        height: 75px;
    }
}
/* /Components/Pages/FTuyenDung/TuyenDung.razor.rz.scp.css */
.home-banner[b-yj3ug8lts5] {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    margin-top: -70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-content[b-yj3ug8lts5] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: absolute;
    top: 218px;
    width: 626px;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}

.banner-slogan[b-yj3ug8lts5] {
    width: 100%;
    color: #ffffff;
}

.banner-slogan-border[b-yj3ug8lts5] {
    width: 1200px;
    border-left: 5px solid #ffffff;
    padding-left: 22px;
    margin: auto;
    color: #061C4E;
    box-sizing: border-box;
}

.banner-desc[b-yj3ug8lts5] {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}

.slogan-vn[b-yj3ug8lts5] {
    color: #ffffff;
    font-size: 25px;
    font-family: "Playwrite US Trad", cursive;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.slogan-en[b-yj3ug8lts5] {
    font-family: "Goldman";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.notice-header[b-yj3ug8lts5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .notice-header h3[b-yj3ug8lts5] {
        margin: 0 0 8px 0;
        color: #061c4e;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
    }

    .notice-header p[b-yj3ug8lts5] {
        margin: 0;
        color: #8D9297;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
    }

/* =========================
           NAVIGATION
        ========================= */

.notice-navigation[b-yj3ug8lts5] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-nav-button[b-yj3ug8lts5] {
    width: 44px;
    height: 44px;
    border: 2px solid #061c4e;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: #061c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .notice-nav-button .material-icons[b-yj3ug8lts5] {
        font-size: 27px;
    }

    .notice-nav-button:hover[b-yj3ug8lts5] {
        background: #FFB800;
        color: #ffffff;
        border: #FFB800;
    }

    .notice-nav-button:disabled[b-yj3ug8lts5] {
        opacity: 0.4;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.8);
        color: #061c4e;
        border-color: #061c4e;
    }

        .notice-nav-button:disabled:hover[b-yj3ug8lts5] {
            background: rgba(255, 255, 255, 0.8);
            color: #061c4e;
            border-color: #061c4e;
        }
.bodyCT[b-yj3ug8lts5] {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: auto;
    padding: 80px 0;
}
.recruitment-list[b-yj3ug8lts5] {
    --rd-cols: 4;
    --rd-gap: 24px;
    overflow: hidden;
}

.recruitment-track[b-yj3ug8lts5] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--rd-gap);
    transition: transform 0.4s ease;
}

.recruitment-col[b-yj3ug8lts5] {
    flex: 0 0 calc((100% - (var(--rd-cols) - 1) * var(--rd-gap)) / var(--rd-cols));
    width: calc((100% - (var(--rd-cols) - 1) * var(--rd-gap)) / var(--rd-cols));
    padding: 0;
}

/* Card */
.recruitment-card[b-yj3ug8lts5] {
    height: 296px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Icon vàng */
.recruitment-icon[b-yj3ug8lts5] {
    width: 24px;
    height: 24px;
    background: #FACC15;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

    .recruitment-icon .material-icons[b-yj3ug8lts5] {
        font-size: 14px;
        color: #061c4e;
        line-height: 1;
    }

/* Tiêu đề */
.recruitment-title[b-yj3ug8lts5] {
    margin: 0 0 8px 0;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
    color: #0C121F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mô tả */
.recruitment-description[b-yj3ug8lts5] {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    color: #5D6267;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 70px;
    min-height: 70px;
}

/* Mức lương */
.recruitment-salary[b-yj3ug8lts5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0;
    font-size: 16px;
    color: #0C121F;
}

    .recruitment-salary .material-icons[b-yj3ug8lts5] {
        font-size: 14px;
        color: #111827;
    }

/* Button */
.recruitment-button[b-yj3ug8lts5] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #061C4E;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

    .recruitment-button:hover[b-yj3ug8lts5] {
        background: #1740b6;
    }

@media (max-width: 992px) {
    .recruitment-list[b-yj3ug8lts5] {
        --rd-cols: 2;
        --rd-gap: 18px;
    }
}

@media (max-width: 600px) {
    .recruitment-list[b-yj3ug8lts5] {
        --rd-cols: 1;
        --rd-gap: 0px;
    }

    .recruitment-card[b-yj3ug8lts5] {
        height: auto;
        min-height: 224px;
    }

    .banner-content[b-yj3ug8lts5] {
        top: 130px;
        gap: 14px;
    }

    .banner-slogan-border[b-yj3ug8lts5] {
        width: 100%;
    }

    .slogan-vn[b-yj3ug8lts5] {
        font-size: 19px;
    }

    .slogan-en[b-yj3ug8lts5] {
        font-size: 22px;
    }

    .banner-desc[b-yj3ug8lts5] {
        font-size: 15px;
    }
}
/* ================================
   COMMON
================================ */

.recruitment-section[b-yj3ug8lts5] {
    width: 100%;
    box-sizing: border-box;
}

.section-title[b-yj3ug8lts5] {
    text-align: center;
}

    .section-title h3[b-yj3ug8lts5] {
        margin: 0;
        color: #0C121F;
        font-size: 28px;
        line-height: 1.3;
        font-weight: 700;
    }

    .section-title p[b-yj3ug8lts5] {
        margin: 8px 0 0;
        color: #5D6267;
        font-size: 16px;
        line-height: 1.5;
    }


/* ================================
   PHÚC LỢI
================================ */

.benefits-section[b-yj3ug8lts5] {
    padding: 16px 0 56px;
}

.benefits-list[b-yj3ug8lts5] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 80px;
}

.benefit-item[b-yj3ug8lts5] {
    position: relative;
    z-index: 1;
    width: 22%;
    text-align: center;
    box-sizing: border-box;
}

.benefit-icon[b-yj3ug8lts5] {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffb800;
    color: #1740b6;
}

    .benefit-icon .material-icons[b-yj3ug8lts5] {
        font-size: 25px;
    }

.benefit-title[b-yj3ug8lts5] {
    margin-bottom: 8px;
    color: #0C121F;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 600;
}

.benefit-description[b-yj3ug8lts5] {
    max-width: 190px;
    margin: 0 auto;
    color: #5D6267;
    font-size: 16px;
    line-height: 1.5;
}


/* ================================
   QUY TRÌNH TUYỂN DỤNG
================================ */

.process-section[b-yj3ug8lts5] {
    padding: 0 0 80px;
}

.process-list[b-yj3ug8lts5] {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


    /* ================================
   ĐƯỜNG LINE
================================ */

    .process-list[b-yj3ug8lts5]::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        top: 27px;
        left: 50%;
        transform: translateX(-50%);
        background: #e1e4e8;
        z-index: 0;
    }


/* ================================
   ITEM
================================ */

.process-item[b-yj3ug8lts5] {
    position: relative;
    z-index: 1;
    width: 18%;
    text-align: center;
}


/* ================================
   VÒNG SỐ
================================ */

.process-number[b-yj3ug8lts5] {
    width: 54px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dce2;
    border-radius: 50%;
    background: #ffffff;
    color: #111827;
    font-size: 19px;
    font-weight: 500;
    box-sizing: border-box;
}


/* Bước đầu tiên và cuối cùng */

.process-item:first-child .process-number[b-yj3ug8lts5],
.process-item:last-child .process-number[b-yj3ug8lts5] {
    background: #1D52C6;
    border-color: #1D52C6;
    color: #ffffff;
}


/* ================================
   TITLE
================================ */

.process-title[b-yj3ug8lts5] {
    margin-bottom: 8px;
    color: #0C121F;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}


/* ================================
   DESCRIPTION
================================ */

.process-description[b-yj3ug8lts5] {
    max-width: 150px;
    margin: 0 auto;
    color: #5D6267;
    font-size: 16px;
    line-height: 1.5;
}


/* ================================
   CTA
================================ */

.recruitment-cta-wrapper[b-yj3ug8lts5] {
    padding: 0 0 16px;
    width: 100%;
}

.recruitment-cta[b-yj3ug8lts5] {
    width: 1200px;
    min-height: 320px;
    margin: 0 auto 80px;
    padding: 78px 24px;
    box-sizing: border-box;
    border-radius: 11px;
    background-image: url('/Image/Trangchu_Tienich.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #ffffff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .recruitment-cta h3[b-yj3ug8lts5] {
        margin: 0;
        font-size: 40px;
        line-height: 1.3;
        font-weight: 700;
    }

    .recruitment-cta p[b-yj3ug8lts5] {
        margin: 10px 0 0;
        color: rgba(255, 255, 255, 0.8);
        font-size: 16px;
        line-height: 1.5;
    }

.recruitment-cta-button[b-yj3ug8lts5] {
    margin-top: 17px;
    min-width: 122px;
    height: 33px;
    padding: 0 18px;
    border: none;
    border-radius: 5px;
    background: #ffffff;
    color: #333333;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s ease;
}

    .recruitment-cta-button:hover[b-yj3ug8lts5] {
        background: #f1f1f1;
    }
/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1200px) {

    /* =========================
       COMMON CONTAINER
    ========================= */

    .bodyCT[b-yj3ug8lts5] {
        width: 100%;
        max-width: calc(100% - 40px);
        padding: 64px 0;
    }

    /* =========================
       BANNER
    ========================= */

    .banner-content[b-yj3ug8lts5] {
        left: 20px;
        right: 20px;
        width: auto;
        max-width: 626px;
    }

    .banner-slogan-border[b-yj3ug8lts5] {
        width: 100%;
    }

    /* =========================
       CTA
    ========================= */

    .recruitment-cta[b-yj3ug8lts5] {
        width: calc(100% - 40px);
    }

    /* =========================
       PROCESS
    ========================= */

    .process-list[b-yj3ug8lts5] {
        width: 100%;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    /* =========================
       BANNER
    ========================= */

    .home-banner[b-yj3ug8lts5] {
        height: 600px;
        min-height: 600px;
    }

    .banner-content[b-yj3ug8lts5] {
        top: 180px;
    }

    .slogan-vn[b-yj3ug8lts5] {
        font-size: 22px;
    }

    .slogan-en[b-yj3ug8lts5] {
        font-size: 27px;
    }

    .banner-desc[b-yj3ug8lts5] {
        font-size: 16px;
        line-height: 1.5;
    }

    /* =========================
       RECRUITMENT NOTICE
    ========================= */

    .notice-header[b-yj3ug8lts5] {
        gap: 20px;
    }

        .notice-header h3[b-yj3ug8lts5] {
            font-size: 24px;
        }

    .notice-navigation[b-yj3ug8lts5] {
        gap: 10px;
        flex-shrink: 0;
    }

    .notice-nav-button[b-yj3ug8lts5] {
        width: 40px;
        height: 40px;
    }

    /* =========================
       RECRUITMENT CARD
    ========================= */

    .recruitment-card[b-yj3ug8lts5] {
        height: 290px;
        padding: 20px;
    }

    .recruitment-title[b-yj3ug8lts5] {
        font-size: 18px;
    }

    .recruitment-description[b-yj3ug8lts5] {
        font-size: 15px;
    }

    /* =========================
       BENEFITS
    ========================= */

    .benefits-list[b-yj3ug8lts5] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 45px 20px;
        margin-top: 55px;
    }

    .benefit-item[b-yj3ug8lts5] {
        width: calc(50% - 20px);
    }

    .benefit-description[b-yj3ug8lts5] {
        max-width: 260px;
    }

    /* =========================
       PROCESS
    ========================= */

    .process-list[b-yj3ug8lts5] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 45px 20px;
        margin-top: 55px;
    }

        .process-list[b-yj3ug8lts5]::before {
            display: none;
        }

    .process-item[b-yj3ug8lts5] {
        width: calc(33.333% - 20px);
    }

    .process-description[b-yj3ug8lts5] {
        max-width: 220px;
    }

    /* =========================
       CTA
    ========================= */

    .recruitment-cta[b-yj3ug8lts5] {
        min-height: 280px;
        margin-bottom: 60px;
        padding: 60px 30px;
    }

        .recruitment-cta h3[b-yj3ug8lts5] {
            font-size: 34px;
        }

        .recruitment-cta p[b-yj3ug8lts5] {
            max-width: 700px;
        }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    /* =========================
       COMMON
    ========================= */

    .bodyCT[b-yj3ug8lts5] {
        width: 100%;
        max-width: calc(100% - 32px);
        padding: 50px 0;
    }

    /* =========================
       BANNER
    ========================= */

    .home-banner[b-yj3ug8lts5] {
        height: 520px;
        min-height: 520px;
        background-position: center center;
    }

    .banner-content[b-yj3ug8lts5] {
        position: absolute;
        top: 130px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        gap: 18px;
    }

    .banner-slogan-border[b-yj3ug8lts5] {
        width: 100%;
        padding-left: 16px;
        border-left-width: 4px;
    }

    .slogan-vn[b-yj3ug8lts5] {
        font-size: 18px;
        line-height: 1.35;
        margin-bottom: 7px;
    }

    .slogan-en[b-yj3ug8lts5] {
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: 0;
    }

    .banner-desc[b-yj3ug8lts5] {
        font-size: 14px;
        line-height: 1.55;
    }

    /* =========================
       NOTICE HEADER
    ========================= */

    .notice-header[b-yj3ug8lts5] {
        align-items: flex-end;
        margin-bottom: 18px;
    }

        .notice-header h3[b-yj3ug8lts5] {
            font-size: 21px;
            line-height: 1.3;
            margin-bottom: 6px;
        }

        .notice-header p[b-yj3ug8lts5] {
            font-size: 12px;
            line-height: 1.4;
        }

    .notice-navigation[b-yj3ug8lts5] {
        gap: 8px;
    }

    .notice-nav-button[b-yj3ug8lts5] {
        width: 36px;
        height: 36px;
        border-width: 1px;
    }

        .notice-nav-button .material-icons[b-yj3ug8lts5] {
            font-size: 23px;
        }

    /* =========================
       RECRUITMENT LIST
    ========================= */

    .recruitment-list[b-yj3ug8lts5] {
        --rd-cols: 1;
        --rd-gap: 0px;
    }

    .recruitment-track[b-yj3ug8lts5] {
        gap: 0;
    }

    .recruitment-col[b-yj3ug8lts5] {
        flex: 0 0 100%;
        width: 100%;
    }

    .recruitment-card[b-yj3ug8lts5] {
        height: auto;
        min-height: 270px;
        padding: 20px;
    }

    .recruitment-icon[b-yj3ug8lts5] {
        margin-bottom: 13px;
    }

    .recruitment-title[b-yj3ug8lts5] {
        font-size: 18px;
        line-height: 1.35;
    }

    .recruitment-description[b-yj3ug8lts5] {
        font-size: 15px;
        line-height: 1.5;
        -webkit-line-clamp: 4;
    }

    .recruitment-salary[b-yj3ug8lts5] {
        margin: 14px 0;
        font-size: 15px;
    }

    .recruitment-button[b-yj3ug8lts5] {
        height: 44px;
        font-size: 15px;
    }

    /* =========================
       SECTION TITLE
    ========================= */

    .section-title h3[b-yj3ug8lts5] {
        font-size: 23px;
        line-height: 1.35;
    }

    .section-title p[b-yj3ug8lts5] {
        font-size: 14px;
        line-height: 1.5;
    }

    /* =========================
       BENEFITS
    ========================= */

    .benefits-list[b-yj3ug8lts5] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 18px;
        margin-top: 45px;
    }

    .benefit-item[b-yj3ug8lts5] {
        width: auto;
    }

    .benefit-icon[b-yj3ug8lts5] {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
    }

        .benefit-icon .material-icons[b-yj3ug8lts5] {
            font-size: 22px;
        }

    .benefit-title[b-yj3ug8lts5] {
        font-size: 17px;
        line-height: 1.35;
    }

    .benefit-description[b-yj3ug8lts5] {
        max-width: none;
        font-size: 14px;
        line-height: 1.45;
    }

    /* =========================
       PROCESS
    ========================= */

    .process-section[b-yj3ug8lts5] {
        padding-bottom: 50px;
    }

    .process-list[b-yj3ug8lts5] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 18px;
        margin-top: 45px;
    }

    .process-item[b-yj3ug8lts5] {
        width: auto;
    }

    .process-number[b-yj3ug8lts5] {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
        font-size: 17px;
    }

    .process-title[b-yj3ug8lts5] {
        font-size: 15px;
        line-height: 1.4;
    }

    .process-description[b-yj3ug8lts5] {
        max-width: none;
        font-size: 14px;
        line-height: 1.45;
    }

    /* =========================
       CTA
    ========================= */

    .recruitment-cta-wrapper[b-yj3ug8lts5] {
        padding: 0 16px 10px;
    }

    .recruitment-cta[b-yj3ug8lts5] {
        width: 100%;
        min-height: 280px;
        margin: 0 auto 45px;
        padding: 50px 20px;
        border-radius: 9px;
    }

        .recruitment-cta h3[b-yj3ug8lts5] {
            font-size: 28px;
            line-height: 1.3;
        }

        .recruitment-cta p[b-yj3ug8lts5] {
            margin-top: 12px;
            font-size: 14px;
            line-height: 1.55;
        }

    .recruitment-cta-button[b-yj3ug8lts5] {
        margin-top: 18px;
        height: 40px;
        padding: 0 18px;
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE NHỎ
========================================================= */

@media (max-width: 480px) {

    /* =========================
       COMMON
    ========================= */

    .bodyCT[b-yj3ug8lts5] {
        max-width: calc(100% - 24px);
        padding: 40px 0;
    }

    /* =========================
       BANNER
    ========================= */

    .home-banner[b-yj3ug8lts5] {
        height: 480px;
        min-height: 480px;
    }

    .banner-content[b-yj3ug8lts5] {
        top: 140px;
        left: 12px;
        right: 12px;
        gap: 15px;
    }

    .banner-slogan-border[b-yj3ug8lts5] {
        padding-left: 12px;
    }

    .slogan-vn[b-yj3ug8lts5] {
        font-size: 16px;
    }

    .slogan-en[b-yj3ug8lts5] {
        font-size: 19px;
    }

    .banner-desc[b-yj3ug8lts5] {
        font-size: 13px;
        line-height: 1.5;
    }

    /* =========================
       NOTICE
    ========================= */

    .notice-header[b-yj3ug8lts5] {
        align-items: center;
    }

        .notice-header h3[b-yj3ug8lts5] {
            font-size: 19px;
        }

        .notice-header p[b-yj3ug8lts5] {
            font-size: 11px;
        }

    .notice-navigation[b-yj3ug8lts5] {
        gap: 6px;
    }

    .notice-nav-button[b-yj3ug8lts5] {
        width: 32px;
        height: 32px;
    }

        .notice-nav-button .material-icons[b-yj3ug8lts5] {
            font-size: 20px;
        }

    /* =========================
       RECRUITMENT CARD
    ========================= */

    .recruitment-card[b-yj3ug8lts5] {
        min-height: 250px;
        padding: 18px;
    }

    .recruitment-title[b-yj3ug8lts5] {
        font-size: 17px;
    }

    .recruitment-description[b-yj3ug8lts5] {
        font-size: 14px;
    }

    .recruitment-salary[b-yj3ug8lts5] {
        font-size: 14px;
    }

    .recruitment-button[b-yj3ug8lts5] {
        height: 42px;
        font-size: 14px;
    }

    /* =========================
       SECTION TITLE
    ========================= */

    .section-title h3[b-yj3ug8lts5] {
        font-size: 20px;
    }

    .section-title p[b-yj3ug8lts5] {
        font-size: 13px;
    }

    /* =========================
       BENEFITS
    ========================= */

    .benefits-list[b-yj3ug8lts5] {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 35px;
    }

    .benefit-item[b-yj3ug8lts5] {
        width: 100%;
    }

    .benefit-description[b-yj3ug8lts5] {
        max-width: 280px;
        margin: auto;
    }

    /* =========================
       PROCESS
    ========================= */

    .process-list[b-yj3ug8lts5] {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 35px;
    }

    .process-item[b-yj3ug8lts5] {
        width: 100%;
    }

    .process-description[b-yj3ug8lts5] {
        max-width: 280px;
        margin: auto;
    }

    /* =========================
       CTA
    ========================= */

    .recruitment-cta-wrapper[b-yj3ug8lts5] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .recruitment-cta[b-yj3ug8lts5] {
        min-height: 260px;
        padding: 40px 16px;
        margin-bottom: 30px;
    }

        .recruitment-cta h3[b-yj3ug8lts5] {
            font-size: 24px;
        }

        .recruitment-cta p[b-yj3ug8lts5] {
            font-size: 13px;
        }

    .recruitment-cta-button[b-yj3ug8lts5] {
        min-width: 120px;
        height: 40px;
        font-size: 13px;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-page[b-mkvnvxceta] {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.07), transparent 35%), #f8fafc;
}

.not-found-card[b-mkvnvxceta] {
    width: 100%;
    max-width: 520px;
    padding: 48px 40px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
}

.error-icon[b-mkvnvxceta] {
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 50%;
}

.error-code[b-mkvnvxceta] {
    margin-bottom: 4px;
    font-size: 64px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -3px;
    color: #0f172a;
}

.not-found-card h2[b-mkvnvxceta] {
    margin: 12px 0 10px;
    font-size: 25px;
    font-weight: 700;
    color: #1e293b;
}

.error-description[b-mkvnvxceta] {
    max-width: 420px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.error-actions[b-mkvnvxceta] {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-back[b-mkvnvxceta],
.btn-home[b-mkvnvxceta] {
    height: 42px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back[b-mkvnvxceta] {
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

    .btn-back:hover[b-mkvnvxceta] {
        color: #0f172a;
        background: #f8fafc;
        border-color: #94a3b8;
    }

.btn-home[b-mkvnvxceta] {
    color: #ffffff;
    background: #2563eb;
    border: 1px solid #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

    .btn-home:hover[b-mkvnvxceta] {
        background: #1d4ed8;
        border-color: #1d4ed8;
        transform: translateY(-1px);
    }

@@media (max-width: 576px) {
    .not-found-page[b-mkvnvxceta] {
        padding: 16px;
    }

    .not-found-card[b-mkvnvxceta] {
        padding: 36px 20px;
    }

    .error-code[b-mkvnvxceta] {
        font-size: 54px;
    }

    .not-found-card h2[b-mkvnvxceta] {
        font-size: 21px;
    }

    .error-actions[b-mkvnvxceta] {
        flex-direction: column-reverse;
    }

    .btn-back[b-mkvnvxceta],
    .btn-home[b-mkvnvxceta] {
        width: 100%;
    }
}