html {
    scroll-behavior: smooth;
}

.cke {
    visibility: hidden;
}

.FFB {
    text-align: center;
    font-size: 30px;
    color: #253c65;
    margin: 15px 0 0;
}

.AFB {
    color: orange;
    font-style: italic;
    font-weight: normal;
    margin: 10px 0 10px;
}

.PEB {
    font-size: 12px;
    font-style: italic;
    color: #253c65;
    padding: 0 0 0 3px;
}

.NEB {
    background-color: #d3544d;
    padding: 9px !important;
}

.IEB {
    background-color: #253c65;
}

.OEB,
.OEB:hover {
    color: white;
}

.CFB {
    margin: 5px;
    font-size: 14px;
    text-transform: uppercase;
}

.BFB {
    position: relative;
    background: transparent;
    padding-bottom: 30px;
}

.JEB {
    background: #4267b2;
    border: 1px solid #4267b2;
    color: white;
}

.KEB {
    background: #ea4335;
    border: 1px solid #ea4335;
    color: white;
    margin: 0 10px;
}

.MEB {
    background: #f35022;
    border: 1px solid #f35022;
    color: white;
}

.EFB {
    margin-top: 10px;
    font-size: 18px;
}

.LEB {
    font-size: 16px;
    margin-bottom: 7px;
    padding: 5px 25px;
    outline: none;
    border-radius: 25px;
}

.DFB {
    margin-top: 20px;
    margin-bottom: 10px;
}

.FEB {
    background: rgba(0, 0, 0, 0.5);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999;
}

.HEB {
    color: white;
    font-size: 1.5em;
}

.EEB {
    margin-top: -40px;
}

.BEB {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.DEB {
    color: #c7c7c7;
    font-size: 1.5em;
    position: absolute;
    top: -20px;
    left: 5px;
}

.CEB {
    height: 60px;
    margin: 5px;
    float: left;
}

.GEB {
    overflow: hidden;
}

.AEB {
    border: 1px solid white;
    padding: 5px;
    border-radius: 5px;
    color: white;
    margin: 10px;
    font-size: 1.3em;
    background-color: rgba(0, 0, 0, 0.1);
}

.AEB:ACTIVE {
    background-color: #fafafa;
    color: #333;
}

.BJB {
    float: right;
    display: flex;
    align-items: center;
    padding-top: 5px;
}

.PIB {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.AJB {
    position: relative;
}

.OIB {
    color: white;
}

.NIB {
    margin-top: 75px;
}
 .fc {
     direction: ltr;
     text-align: left;
 }

.fc-rtl {
    text-align: right;
}

body .fc {
    font-size: 1em;
}

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row {
    border-color: #ddd;
}

.fc-unthemed .fc-popover {
    border-color: #ddd;
    background-color: #fff;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header {
    background: #eee;
}

.fc-unthemed .fc-popover .fc-header .fc-close {
    color: #666;
}

.fc-unthemed .fc-today {
    background: #fcf8e3;
}

.fc-highlight {
    background: #bce8f1;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.fc-bgevent {
    background: #8fdf82;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.fc-nonbusiness {
    background: #d7d7d7;
}

.fc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    font-size: 1em;
    text-align: center;
    overflow: hidden;
    font-family: "Courier New", Courier, monospace;
}

.fc-icon:after {
    position: relative;
    margin: 0 -1em;
}

.fc-icon-left-single-arrow:after {
    content: "‹";
    font-weight: bold;
    font-size: 200%;
    top: -7%;
    left: 3%;
}

.fc-icon-right-single-arrow:after {
    content: "›";
    font-weight: bold;
    font-size: 200%;
    top: -7%;
    left: -3%;
}

.fc-icon-left-double-arrow:after {
    content: "«";
    font-size: 160%;
    top: -7%;
}

.fc-icon-right-double-arrow:after {
    content: "»";
    font-size: 160%;
    top: -7%;
}

.fc-icon-left-triangle:after {
    content: "◄";
    font-size: 125%;
    top: 3%;
    left: -2%;
}

.fc-icon-right-triangle:after {
    content: "►";
    font-size: 125%;
    top: 3%;
    left: 2%;
}

.fc-icon-down-triangle:after {
    content: "▼";
    font-size: 125%;
    top: 2%;
}

.fc-icon-x:after {
    content: "×";
    font-size: 200%;
    top: 6%;
}

.fc button {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    height: 2.1em;
    padding: 0 0.6em;
    font-size: 1em;
    white-space: nowrap;
    cursor: pointer;
}

.fc button::-moz-focus-inner {
    margin: 0;
    padding: 0;
}

.fc-state-default {
    border: 1px solid;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    background-image: -o-linear-gradient(top, #fff, #e6e6e6);
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fc-state-default.fc-corner-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.fc-state-default.fc-corner-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.fc button .fc-icon {
    position: relative;
    top: -0.05em;
    margin: 0 0.2em;
    vertical-align: middle;
}

.fc-state-hover,
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
    color: #333;
    background-color: #e6e6e6;
}

.fc-state-hover {
    color: #333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.fc-state-down,
.fc-state-active {
    background-color: #ccc;
    background-image: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fc-state-disabled {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    box-shadow: none;
}

.fc-button-group {
    display: inline-block;
}

.fc .fc-button-group>* {
    float: left;
    margin: 0 0 0 -1px;
}

.fc .fc-button-group>:first-child {
    margin-left: 0;
}

.fc-popover {
    position: absolute;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.fc-popover .fc-header {
    padding: 2px 4px;
}

.fc-popover .fc-header .fc-title {
    margin: 0 2px;
}

.fc-popover .fc-header .fc-close,
.fc-event[href],
.fc-event.fc-draggable {
    cursor: pointer;
}

.fc-ltr .fc-popover .fc-header .fc-title,
.fc-rtl .fc-popover .fc-header .fc-close {
    float: left;
}

.fc-rtl .fc-popover .fc-header .fc-title,
.fc-ltr .fc-popover .fc-header .fc-close {
    float: right;
}

.fc-unthemed .fc-popover {
    border-width: 1px;
    border-style: solid;
}

.fc-unthemed .fc-popover .fc-header .fc-close {
    font-size: 0.9em;
    margin-top: 2px;
}

.fc-popover>.ui-widget-header+.ui-widget-content {
    border-top: 0;
}

.fc-divider {
    border-style: solid;
    border-width: 1px;
}

hr.fc-divider {
    height: 0;
    margin: 0;
    padding: 0 0 2px;
    border-width: 1px 0;
}

.fc-clear {
    clear: both;
}

.fc-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-helper-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.fc-bg table,
.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
    height: 100%;
}

.fc table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1em;
}

.fc th {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding: 0;
    vertical-align: top;
}

.fc td {
    border-style: solid;
    border-width: 1px;
    padding: 0;
    vertical-align: top;
}

.fc td.fc-today {
    border-style: double;
}

.fc .fc-row {
    border-style: solid;
    border-width: 0;
}

.fc-row table {
    border-left: 0 hidden transparent;
    border-right: 0 hidden transparent;
    border-bottom: 0 hidden transparent;
}

.fc-row:first-child table {
    border-top: 0 hidden transparent;
}

.fc-row {
    position: relative;
}

.fc-row .fc-bg {
    z-index: 1;
}

.fc-row .fc-bgevent-skeleton {
    bottom: 0;
    z-index: 2;
}

.fc-row .fc-highlight-skeleton {
    bottom: 0;
    z-index: 3;
}

.fc-row .fc-highlight-skeleton td,
.fc-row .fc-bgevent-skeleton td {
    border-color: transparent;
}

.fc-row .fc-content-skeleton {
    position: relative;
    z-index: 4;
    padding-bottom: 2px;
}

.fc-row .fc-helper-skeleton {
    z-index: 5;
}

.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td {
    background: none;
    border-color: transparent;
    border-bottom: 0;
}

.fc-row .fc-content-skeleton tbody td,
.fc-row .fc-helper-skeleton tbody td {
    border-top: 0;
}

.fc-scroller {
    overflow-y: scroll;
    overflow-x: hidden;
}

.fc-scroller>* {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fc-event {
    position: relative;
    display: block;
    font-size: 0.85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    font-weight: normal;
    color: #fff;
    text-decoration: none;
}

.fc-event:hover,
.ui-widget .fc-event {
    color: #fff;
    text-decoration: none;
}

.fc-not-allowed,
.fc-not-allowed .fc-event {
    cursor: not-allowed;
}

.fc-event .fc-bg {
    z-index: 1;
    background: #fff;
    opacity: 0.25;
    filter: alpha(opacity=25);
}

.fc-event .fc-content {
    position: relative;
    z-index: 2;
}

.fc-event .fc-resizer {
    position: absolute;
    z-index: 3;
}

.fc-ltr .fc-h-event.fc-not-start,
.fc-rtl .fc-h-event.fc-not-end {
    margin-left: 0;
    border-left-width: 0;
    padding-left: 1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fc-ltr .fc-h-event.fc-not-end,
.fc-rtl .fc-h-event.fc-not-start {
    margin-right: 0;
    border-right-width: 0;
    padding-right: 1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fc-h-event .fc-resizer {
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    width: 5px;
}

.fc-ltr .fc-h-event .fc-start-resizer,
.fc-ltr .fc-h-event .fc-start-resizer:before,
.fc-ltr .fc-h-event .fc-start-resizer:after,
.fc-rtl .fc-h-event .fc-end-resizer,
.fc-rtl .fc-h-event .fc-end-resizer:before,
.fc-rtl .fc-h-event .fc-end-resizer:after {
    right: auto;
    cursor: w-resize;
}

.fc-ltr .fc-h-event .fc-end-resizer,
.fc-ltr .fc-h-event .fc-end-resizer:before,
.fc-ltr .fc-h-event .fc-end-resizer:after,
.fc-rtl .fc-h-event .fc-start-resizer,
.fc-rtl .fc-h-event .fc-start-resizer:before,
.fc-rtl .fc-h-event .fc-start-resizer:after {
    left: auto;
    cursor: e-resize;
}

.fc-day-grid-event {
    margin: 1px 2px 0;
    padding: 0 1px;
}

.fc-day-grid-event .fc-content {
    white-space: nowrap;
    overflow: hidden;
}

.fc-day-grid-event .fc-time {
    font-weight: bold;
}

.fc-day-grid-event .fc-resizer {
    left: -3px;
    right: -3px;
    width: 7px;
}

a.fc-more {
    margin: 1px 3px;
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: none;
}

a.fc-more:hover {
    text-decoration: underline;
}

.fc-limited {
    display: none;
}

.fc-day-grid .fc-row {
    z-index: 1;
}

.fc-more-popover {
    z-index: 2;
    width: 220px;
}

.fc-more-popover .fc-event-container {
    padding: 10px;
}

.fc-toolbar {
    text-align: center;
    margin-bottom: 1em;
}

.fc-toolbar .fc-left {
    float: left;
}

.fc-toolbar .fc-right {
    float: right;
}

.fc-toolbar .fc-center {
    display: inline-block;
}

.fc .fc-toolbar>*>* {
    float: left;
    margin-left: 0.75em;
}

.fc .fc-toolbar>*>:first-child {
    margin-left: 0;
}

.fc-toolbar h2 {
    margin: 0;
}

.fc-toolbar button {
    position: relative;
}

.fc-toolbar .fc-state-hover,
.fc-toolbar .ui-state-hover {
    z-index: 2;
}

.fc-toolbar .fc-state-down {
    z-index: 3;
}

.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active {
    z-index: 4;
}

.fc-toolbar button:focus {
    z-index: 5;
}

.fc-view-container *,
.fc-view-container :before,
.fc-view-container :after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.fc-view,
.fc-view>table {
    position: relative;
    z-index: 1;
}

.fc-basicWeek-view .fc-content-skeleton,
.fc-basicDay-view .fc-content-skeleton {
    padding-top: 1px;
    padding-bottom: 1em;
}

.fc-basic-view .fc-body .fc-row {
    min-height: 4em;
}

.fc-row.fc-rigid,
.fc-time-grid-event {
    overflow: hidden;
}

.fc-row.fc-rigid .fc-content-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.fc-basic-view .fc-week-number {
    padding: 0 2px;
    text-align: center;
}

.fc-basic-view .fc-day-number {
    padding: 0 2px;
}

.fc-basic-view td.fc-week-number span,
.fc-basic-view td.fc-day-number {
    padding-top: 2px;
    padding-bottom: 2px;
}

.fc-basic-view .fc-week-number span {
    display: inline-block;
    min-width: 1.25em;
}

.fc-ltr .fc-basic-view .fc-day-number {
    text-align: right;
}

.fc-rtl .fc-basic-view .fc-day-number {
    text-align: left;
}

.fc-day-number.fc-other-month {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.fc-agenda-view .fc-day-grid {
    position: relative;
    z-index: 2;
}

.fc-agenda-view .fc-day-grid .fc-row {
    min-height: 3em;
}

.fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
    padding-top: 1px;
    padding-bottom: 1em;
}

.fc .fc-axis {
    vertical-align: middle;
    padding: 0 4px;
    white-space: nowrap;
}

.fc-ltr .fc-axis {
    text-align: right;
}

.fc-rtl .fc-axis {
    text-align: left;
}

.ui-widget td.fc-axis {
    font-weight: normal;
}

.fc-time-grid-container {
    position: relative;
    z-index: 1;
}

.fc-time-grid {
    position: relative;
    z-index: 1;
    min-height: 100%;
}

.fc-time-grid table {
    border: 0 hidden transparent;
}

.fc-time-grid>.fc-bg {
    z-index: 1;
}

.fc-time-grid .fc-slats,
.fc-time-grid>hr {
    position: relative;
    z-index: 2;
}

.fc-time-grid .fc-bgevent-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

.fc-time-grid .fc-content-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.fc-time-grid .fc-highlight-skeleton {
    z-index: 4;
}

.fc-time-grid .fc-content-skeleton {
    z-index: 5;
}

.fc-time-grid .fc-helper-skeleton {
    z-index: 6;
}

.fc-time-grid .fc-slats td {
    height: 1.5em;
    border-bottom: 0;
}

.fc-time-grid .fc-slats .fc-minor td {
    border-top-style: dotted;
}

.fc-time-grid .fc-slats .ui-widget-content {
    background: none;
}

.fc-time-grid .fc-highlight-container {
    position: relative;
}

.fc-time-grid .fc-highlight {
    position: absolute;
    left: 0;
    right: 0;
}

.fc-time-grid .fc-event-container,
.fc-time-grid .fc-bgevent-container {
    position: relative;
}

.fc-ltr .fc-time-grid .fc-event-container {
    margin: 0 2.5% 0 2px;
}

.fc-rtl .fc-time-grid .fc-event-container {
    margin: 0 2px 0 2.5%;
}

.fc-time-grid .fc-event {
    position: absolute;
    z-index: 1;
}

.fc-time-grid .fc-bgevent {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
}

.fc-v-event.fc-not-start {
    border-top-width: 0;
    padding-top: 1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.fc-v-event.fc-not-end {
    border-bottom-width: 0;
    padding-bottom: 1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fc-time-grid-event .fc-time {
    padding: 0 1px;
    font-size: 0.85em;
    white-space: nowrap;
}

.fc-time-grid-event .fc-title {
    padding: 0 1px;
}

.fc-time-grid-event.fc-short .fc-content {
    white-space: nowrap;
}

.fc-time-grid-event.fc-short .fc-time {
    display: inline-block;
    vertical-align: top;
}

.fc-time-grid-event.fc-short .fc-title {
    display: inline-block;
    vertical-align: top;
    font-size: 0.85em;
    padding: 0;
}

.fc-time-grid-event.fc-short .fc-time span {
    display: none;
}

.fc-time-grid-event.fc-short .fc-time:before {
    content: attr(data-start);
}

.fc-time-grid-event.fc-short .fc-time:after {
    content: " - ";
}

.fc-time-grid-event .fc-resizer {
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    overflow: hidden;
    line-height: 8px;
    font-size: 11px;
    font-family: monospace;
    text-align: center;
    cursor: s-resize;
}

.fc-time-grid-event .fc-resizer:after {
    content: "=";
}

@media print {
    .fc {
        max-width: 100% !important;
    }

    .fc-event {
        background: #fff !important;
        color: #000 !important;
        page-break-inside: avoid;
    }

    .fc-event .fc-resizer,
    .fc-bg,
    .fc-bgevent-skeleton,
    .fc-highlight-skeleton,
    .fc-helper-skeleton {
        display: none;
    }

    th,
    td,
    hr,
    thead,
    tbody,
    .fc-row {
        border-color: #ccc !important;
        background: #fff !important;
    }

    .fc tbody .fc-row {
        height: auto !important;
        min-height: 0 !important;
    }

    .fc tbody .fc-row .fc-content-skeleton {
        position: static;
        padding-bottom: 0 !important;
    }

    .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
        padding-bottom: 1em;
    }

    .fc tbody .fc-row .fc-content-skeleton table {
        height: 1em;
    }

    .fc-more-cell,
    .fc-more {
        display: none !important;
    }

    .fc tr.fc-limited {
        display: table-row !important;
    }

    .fc td.fc-limited {
        display: table-cell !important;
    }

    .fc-popover,
    .fc-agenda-view .fc-axis {
        display: none;
    }

    .fc-time-grid {
        min-height: 0 !important;
    }

    .fc-slats,
    .fc-time-grid hr {
        display: none !important;
    }

    .fc-time-grid .fc-content-skeleton {
        position: static;
    }

    .fc-time-grid .fc-content-skeleton table {
        height: 4em;
    }

    .fc-time-grid .fc-event-container {
        margin: 0 !important;
    }

    .fc-time-grid .fc-event {
        position: static !important;
        margin: 3px 2px !important;
    }

    .fc-time-grid .fc-event.fc-not-end {
        border-bottom-width: 1px !important;
    }

    .fc-time-grid .fc-event.fc-not-end:after,
    .fc-time-grid .fc-event.fc-not-start:before {
        content: "...";
    }

    .fc-time-grid .fc-event.fc-not-start {
        border-top-width: 1px !important;
    }

    .fc-time-grid .fc-event .fc-time {
        white-space: normal !important;
    }

    .fc-time-grid .fc-event .fc-time span,
    .fc-button-group,
    .fc button {
        display: none;
    }

    .fc-time-grid .fc-event .fc-time:after {
        content: attr(data-full);
    }

    .fc-scroller,
    .fc-day-grid-container,
    .fc-time-grid-container {
        overflow: visible !important;
        height: auto !important;
    }

    .fc-row {
        border: 0 !important;
        margin: 0 !important;
    }
}

.newBackgroundHeader {
    position: relative;
    background-image: url('images/newPage/background-header.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.newBackgroundHeader::before,
.newBackgroundHeader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Đảm bảo nó nằm phía sau nội dung */
}

.newBackgroundHeader::before {
    background: linear-gradient(to bottom, rgb(244, 134, 7), rgba(255, 0, 0, 0));
}

s .newBackgroundHeader::after {
    background: url('images/newPage/some-overlay-image.png') no-repeat center center;
    color: orange;
    background-size: contain;
    opacity: 0.8;
}

.second-header-panel {
    position: relative;
    /* Ban đầu menu không cố định */
    width: 100%;
    z-index: 999;
    /* Để đảm bảo menu luôn hiển thị trên các thành phần khác */
    transition: all 0.3s ease;
    /* Thêm hiệu ứng mượt khi thay đổi trạng thái */
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000 !important;
    /* Đảm bảo menu luôn nằm trên */
    background-color: rgba(251, 132, 1, 0.94) !important;
    /* Buộc áp dụng màu nền */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    /* Thêm bóng mờ */
}
.BJB {
    float: right;
    display: flex;
    align-items: center;
    padding-top: 5px;
}

.PIB {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.AJB {
    position: relative;
}

.OIB {
    color: white;
}

.NIB {
    margin-top: 75px;
}
/* Ẩn nút toggle trên desktop */
.navbar-toggle {
    display: none;
}
/* Định kiểu mặc định cho các mục menu trên desktop */
.menu-top .list-menu-top li a {
    display: inline-block; /* Quan trọng: Đảm bảo các li là inline-block */
    color: #fff; /* Màu chữ mặc định là trắng */
    text-decoration: none;
    padding: 10px 15px; /* Điều chỉnh padding cho phù hợp với thiết kế của bạn */
    display: block; /* Quan trọng để background và padding hoạt động đúng */
    background-color: transparent; /* Nền trong suốt mặc định */
    transition: background-color 0.3s ease, color 0.3s ease; /* Chuyển đổi mượt mà cho cả màu nền và màu chữ */
    border-radius: 5px; /* Bo góc nhẹ cho hiệu ứng hover */
    white-space: nowrap; /* NGĂN KHÔNG CHO CHỮ XUỐNG DÒNG */
}

/* Hiệu ứng khi di chuột qua các liên kết menu */
.menu-top .list-menu-top li a:hover {
    background-color: rgb(43, 91, 145); /* Nền hơi mờ trong suốt khi hover (ví dụ màu trắng với alpha 0.2) */
    color: #fff; /* Giữ màu chữ trắng hoặc màu bạn muốn khi hover */
    /* Nếu bạn muốn màu xanh như ví dụ trước: */
    /* background-color: #007bff; */
    /* color: #fff; */
}

/* Nếu bạn muốn mục đang active (ví dụ TRANG CHỦ khi đang ở trang chủ) cũng có hiệu ứng tương tự */
/* Bạn sẽ cần thêm một class "active" vào thẻ li hoặc a tương ứng trong HTML */
.menu-top .list-menu-top li.active a {
    background-color: rgba(255, 255, 255, 0.1); /* Nền hơi mờ cho mục active */
    color: #fff;
    font-weight: bold; /* Đậm hơn nếu muốn */
}
/* Định nghĩa responsive cho mobile */
@media (max-width: 767px) { /* Kích thước breakpoint điển hình cho mobile */
    /* Ẩn menu và ngôn ngữ mặc định trên mobile */
    .menu-top,
    .lang-site {
        display: none;
    }

    /* Hiển thị nút toggle trên mobile */
    .navbar-toggle {
        display: block;
        float: right; /* Đặt nút sang phải */
        margin-right: 15px; /* Khoảng cách từ lề phải */
        margin-top: 10px; /* Khoảng cách từ trên xuống */
        background-color: transparent;
        border: 1px solid #fff; /* Viền trắng */
        padding: 9px 10px;
        cursor: pointer;
        outline: none; /* Bỏ outline khi focus */
        -webkit-appearance: none; /* Loại bỏ style mặc định của trình duyệt cho button */
        -moz-appearance: none;
        appearance: none;
    }
    @media (min-width: 768px) {
        .navbar-nav {
            margin-top: 0 !important;
        }
    }

    .first-header-info-panel {
        margin-bottom: 0 !important;
    }
    /* Định kiểu cho các thanh của icon hamburger */
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #fff; /* Màu trắng cho các thanh */
        border-radius: 1px;
        margin: 4px 0; /* Khoảng cách giữa các thanh */
    }

    /* Khi menu được mở (lớp 'in' được thêm bởi JS hoặc Bootstrap) */
    .navbar-collapse.in {
        display: block;
        width: 110%;
        background-color: rgba(37, 60, 101, 0.4); /* Thay đổi màu nền thành một màu có độ trong suốt (alpha < 1) */
        backdrop-filter: blur(0px); /* Áp dụng hiệu ứng làm mờ nền */
        -webkit-backdrop-filter: blur(5px); /* Dành cho trình duyệt Safari */
        position: fixed; /* Thay đổi từ 'absolute' thành 'fixed' để nó nằm trên cùng */
        left: 0;

        overflow-y: auto; /* Thêm cuộn nếu nội dung quá dài */
        padding-top: 60px; /* Thêm padding trên để tránh che header/logo nếu có */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        transition: transform 0.3s ease-in-out; /* Thêm transition cho hiệu ứng trượt */
        transform: translateX(0%); /* Mặc định hiển thị */
    }

    /* Để tạo hiệu ứng trượt từ bên trái hoặc phải */
    .navbar-collapse:not(.in) {
        transform: translateX(-100%); /* Ẩn menu bằng cách trượt sang trái */
        transition: transform 0.3s ease-in-out;
    }

    .navbar-collapse.in .menu-top,
    .navbar-collapse.in .lang-site {
        display: block;
        float: none;
        text-align: left; /* Thay đổi từ 'center' sang 'left' */
        width: 100%;
        padding-left: 15px; /* Thêm padding trái cho nội dung bên trong */
        padding-right: 15px;
    }

    .navbar-collapse.in .list-inline {
        padding-left: 0;
        list-style: none;
    }

    .navbar-collapse.in .list-inline li {
        display: block;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-collapse.in .list-inline li:last-child {
        border-bottom: none;
    }

    .navbar-collapse.in .list-menu-top a,
    .navbar-collapse.in .list-lang a {
        color: #fff;
        padding: 15px 0; /* Giữ padding này */
        display: block;
        text-decoration: none;
        font-size: 16px;
        text-transform: uppercase;
        text-align: left; /* Đảm bảo text-align: left cho các liên kết */
    }

    .navbar-collapse.in .list-menu-top a:hover,
    .navbar-collapse.in .list-lang a:hover {
        background-color: rgba(255,255,255,0.1);
    }

    /* Thêm khoảng cách cho nút toggle để nó không bị che bởi menu khi mở */
    .col-xs-12.col-sm-12.col-md-7.col-lg-7 {
        position: relative; /* Quan trọng để nút toggle được định vị đúng */
        min-height: 50px; /* Đảm bảo có đủ không gian cho nút toggle */
    }

    /* Điều chỉnh logo và tên site để không bị dịch chuyển khi menu mở */
    .logo-site, .name-site {
        float: none !important;
        display: inline-block;
        vertical-align: middle; /* Căn chỉnh với nút toggle nếu cần */
    }


}