#banner {
    --hd-navy: #0b3a6c;
    --hd-red: #d50f0d;
    --hd-text: #1e1e1e;
    --hd-top-h: 46px; /* chiều cao tối thiểu / mỗi dòng menu */
    position: relative;
    z-index: 100;
}

    /* ---------- 1. THANH TRÊN ---------- */
    #banner .sticky-header {
        background-color: #e9e9e9;
        height: auto; 
        min-height: var(--hd-top-h);
        padding: 0;
        overflow: visible;
        position: relative; /* nằm trong luồng, không đè lên toolbar */
        z-index: 2; /* dropdown luôn nổi trên toolbar */
    }

    #banner #menu-home {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        height: auto; 
        min-height: var(--hd-top-h);
        margin: 0;
        padding: 0;
    }

        #banner #menu-home::before,
        #banner #menu-home::after {
            display: none; /* bỏ clearfix của bootstrap để flex không bị chèn phần tử ảo */
        }

        /* --- Khối thời tiết + đồng hồ (nền xanh, cạnh phải vát chéo) --- */
        #banner #menu-home .weather-header {
            flex: 0 0 18%;
            width: 100%;
            float: none !important;
            display: flex !important;
            align-items: center;
            gap: 10px;
            padding: 0 28px 0 14px;
            color: #fff;
            white-space: nowrap;
            align-self: normal;
            height: auto;
            background-image: url(image/menutop2.png);
            background-repeat: no-repeat;
            background-position: left top;
            background-size: 100% 100%;
            background-color: transparent;
        }

            #banner #menu-home .weather-header * {
                color: #fff;
                font-size: 13px;
            }

            #banner #menu-home .weather-header img {
                height: 18px;
                width: auto;
                vertical-align: middle;
            }

            #banner #menu-home .weather-header .ion-clock {
                margin-left: 4px;
                padding-left: 12px;
                border-left: 1px solid rgba(255, 255, 255, .55);
                line-height: 16px;
            }

            #banner #menu-home .weather-header #time-date {
                letter-spacing: -.2px;
            }

        /* --- Menu chính --- */
        #banner #menu-home > .container-fluid {
            flex: 1 1 0;
            min-width: 0;
            width: auto;
            float: none;
            display: flex;
            align-items: center;
            padding: 0 0 0 2.5%;
        }

        #banner #menu-home #myNavbar {
            width: 100%;
            height: auto !important;
            max-height: none !important;
            padding: 0;
            border: 0;
            box-shadow: none;
            float: none;
            overflow: visible !important;
        }

        #banner #menu-home > .container-fluid,
        #banner #menu-home #myNavbar {
            overflow: visible;
        }

        #banner #menu-home #m-menubar {
            display: flex;
            flex-wrap: wrap; /* Chỉ menu này được xuống dòng */
            align-items: center;
            float: none;
            width: 100%;
            margin: 0;
            padding: 0;
        }

            #banner #menu-home #m-menubar > li {
                float: none;
                position: relative;
            }

                #banner #menu-home #m-menubar > li > a {
                    display: block;
                    padding: 0 10px;
                    line-height: var(--hd-top-h);
                    color: var(--hd-text);
                    font-size: 14px;
                    font-weight: 600;
                    background: transparent;
                    white-space: nowrap;
                    transition: color .15s;
                    text-transform: capitalize;
                }

                    #banner #menu-home #m-menubar > li > a:hover,
                    #banner #menu-home #m-menubar > li.active > a,
                    #banner #menu-home #m-menubar > li.selected > a {
                        color: var(--hd-red);
                        background: transparent;
                    }

            #banner #menu-home #m-menubar .caret {
                margin-left: 2px;
                border-top-color: currentColor;
            }

            /* Dropdown con */
            #banner #menu-home #m-menubar .dropdown-content {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                min-width: 180px;
                margin: 0;
                padding: 6px 0;
                list-style: none;
                background: #fff;
                border-top: 3px solid var(--hd-navy);
                box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
                z-index: 1000;
            }

            #banner #menu-home #m-menubar .dropdown:hover > .dropdown-content {
                display: block;
            }

            #banner #menu-home #m-menubar .dropdown-content li a {
                display: block;
                padding: 8px 16px;
                color: var(--hd-text);
                font-size: 13px;
                font-weight: 500;
                line-height: 1.4;
                white-space: nowrap;
            }

                #banner #menu-home #m-menubar .dropdown-content li a:hover {
                    background: #f1f4f8;
                    color: var(--hd-red);
                }

        /* --- Ngôn ngữ + đăng nhập --- */
        #banner #menu-home > .col-md-3:not(.weather-header) {
            flex: 0 0 18%;
            width: 18%;
            float: none;
            display: flex;
            align-items: center; /* was: center */
            height: auto;
            padding: 0;
        }

    #banner #login-system {
        display: flex !important;
        align-items: center;
        gap: 6px;
        float: none !important;
        height: var(--hd-top-h); /* canh giữa theo dòng đầu */
        margin: 0 !important;
        white-space: nowrap;
        top: 0px;
    }

        #banner #login-system #inline-langage {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

            #banner #login-system #inline-langage a,
            #banner #login-system #inline-langage span {
                display: inline-flex;
                align-items: center;
            }

            #banner #login-system #inline-langage img {
                height: 17px;
                width: auto;
                border: 0;
            }

        #banner #login-system #login-btn {
            display: inline-flex;
            align-items: center;
        }

        #banner #login-system span.ion-locked {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 13px;
            color: var(--hd-red);
        }

        #banner #login-system a.login {
            color: var(--hd-red);
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            text-decoration: none;
            height: auto !important;
        }

            #banner #login-system a.login:hover {
                text-decoration: underline;
            }

        /* Menu người dùng khi đã đăng nhập */
        #banner #login-system .nav-user {
            position: relative;
        }

        #banner #login-system .dropdown-toggle {
            cursor: pointer;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
        }

        #banner #login-system .menu_login {
            position: absolute;
            top: 100%;
            right: 0;
            left: auto;
            min-width: 200px;
            margin-top: 12px;
            padding: 6px 0;
            background: #fff;
            border: 0;
            border-top: 3px solid var(--hd-navy);
            box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
        }

            #banner #login-system .menu_login li a,
            #banner #login-system .menu_login li button {
                display: block;
                width: 100%;
                padding: 8px 16px;
                border: 0;
                background: transparent;
                color: var(--hd-text);
                font-size: 13px;
                text-align: left;
            }

                #banner #login-system .menu_login li a:hover,
                #banner #login-system .menu_login li button:hover {
                    background: #f1f4f8;
                    color: var(--hd-red);
                }

            #banner #login-system .menu_login .divider {
                height: 1px;
                margin: 4px 0;
                background: #e5e5e5;
            }

    /* Nút toggle (chỉ hiện trên mobile) */
    #banner .navbar-header {
        display: none;
    }

    /* ---------- 2. THANH LỐI TẮT ---------- */
    #banner .shotcut-toolbar {
        position: relative;
        z-index: 1;
        height: 95px;
        background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 55%, #dcdcdc 100%);
        border-bottom: 3px solid #fff;
        border-radius: 0 0 10px 10px;
    }

        #banner .shotcut-toolbar > .container {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
            padding: 0;
        }

            #banner .shotcut-toolbar > .container::before,
            #banner .shotcut-toolbar > .container::after {
                display: none;
            }

        #banner .shotcut-toolbar .vertical-center {
            display: flex;
            align-items: center;
            justify-content: center;
            float: none;
            height: 100%;
            padding: 0;
        }

        /* Logo */
        #banner .shotcut-toolbar .col-md-2 {
            flex: 0 0 13%;
            width: 13%;
        }

        #banner .shotcut-toolbar .logo {
            display: inline-block;
            line-height: 0;
        }

            #banner .shotcut-toolbar .logo img {
                width: 80px;
                height: auto;
            }

        /* 4 lối tắt */
        #banner .shotcut-toolbar .col-md-3 {
            flex: 0 0 18.6%;
            width: 18.6%;
        }

        #banner .shotcut-toolbar .item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

            #banner .shotcut-toolbar .item a {
                display: inline-flex;
                align-items: center;
                text-decoration: none;
            }

            #banner .shotcut-toolbar .item img {
                height: 52px;
                width: auto;
                transition: transform .2s;
            }

            #banner .shotcut-toolbar .item span {
                color: var(--hd-navy);
                font-size: 15px;
                font-weight: 500;
                letter-spacing: .1px;
                text-transform: uppercase;
                white-space: nowrap;
                transition: color .15s;
            }

            #banner .shotcut-toolbar .item:hover img {
                transform: translateY(-2px);
            }

            #banner .shotcut-toolbar .item:hover span {
                color: var(--hd-red);
            }

/* ---------- 3. RESPONSIVE ---------- */
@media (max-width: 1280px) {
    #banner #menu-home #m-menubar > li > a {
        padding: 0 10px;
        font-size: 12px;
    }

    #banner .shotcut-toolbar .item span {
        font-size: 13px;
    }

    #banner .shotcut-toolbar .item img {
        height: 44px;
    }
}

@media (max-width: 991px) {
    #banner .sticky-header,
    #banner #menu-home {
        height: auto;
        min-height: var(--hd-top-h);
    }

    #banner #menu-home {
        flex-wrap: wrap;
    }

        #banner #menu-home .weather-header {
            display: none !important;
        }

    #banner .navbar-header {
        display: block;
        order: 1;
        margin-left: auto;
    }

    #banner .navbar-toggle {
        display: block;
        margin: 6px 10px;
        border: 0;
        color: var(--hd-navy);
        font-size: 22px;
    }

    #banner #menu-home > .col-md-3:not(.weather-header) {
        order: 0;
        flex: 1 1 auto;
        width: auto;
        padding-left: 12px;
    }

    #banner #menu-home > .container-fluid {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        padding: 0 !important;
    }

    #banner #menu-home #m-menubar {
        flex-direction: column;
        align-items: stretch;
        background: #f3f3f3;
    }

        #banner #menu-home #m-menubar > li > a {
            line-height: 40px;
            padding: 0 16px;
            border-top: 1px solid #e0e0e0;
        }

        #banner #menu-home #m-menubar .dropdown-content {
            position: static;
            display: block;
            box-shadow: none;
            border-top: 0;
            background: #fff;
            padding-left: 14px;
        }

    #banner .shotcut-toolbar {
        height: auto;
    }

        #banner .shotcut-toolbar > .container {
            flex-wrap: wrap;
            padding: 8px 0;
        }

        #banner .shotcut-toolbar .col-md-2 {
            flex: 0 0 100%;
            width: 100%;
            height: 60px;
        }

        #banner .shotcut-toolbar .col-md-3 {
            flex: 0 0 50%;
            width: 50%;
            height: 64px;
        }
}

@media (max-width: 480px) {
    #banner #login-system a.login {
        font-size: 13px;
    }

    #banner .shotcut-toolbar .item span {
        font-size: 12px;
    }

    #banner .shotcut-toolbar .item img {
        height: 36px;
    }
}