/* 顶部导航栏的外部容器，负责背景色和全宽 */
.site-header {
    width: 100%;
    background-color: #1a233b; /* 底部背景色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：增加阴影效果 */
}

/* 内部内容容器，负责居中和最大宽度 */
.top-nav-bar-container {
    max-width: 1200px; /* 根据需要调整最大宽度 */
    margin: 0 auto; /* 居中对齐 */
    height: 60px; /* 导航栏高度 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* 内部左右边距，防止内容紧贴边缘 */
}

/* 左侧部分 */
.left-section {
    display: flex;
    align-items: center;
}

/* 为左侧部分的图片设置样式 */
.left-section img {
    max-width: 100%; /* 确保图片宽度不超过父容器 */
    height: auto; /* 自动调整高度，保持宽高比 */
    /* 如果你想设置固定高度，也可以使用下面的方式，但可能导致图片变形 */
    /* height: 40px; */
}

/* 右侧部分 */
.right-section {
    display: flex;
    align-items: center;
    gap: 10px; /* 徽章之间的间距 */
}

/* 徽章容器样式 */
.badge {
    height: 40px; /* 徽章容器高度 */
    background-color: #fff; /* 徽章背景色 */
    border-radius: 5px; /* 圆角 */
    overflow: hidden; /* 确保图片不会溢出 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 徽章图片样式 */
.badge-image {
    max-height: 100%;
    width: auto;
}