.demo-container {
           
            transition: all 0.2s;
        }

        /* 每个导航栏模块独立，带间距与下划线装饰 */
        .nav-module {
            margin-bottom: 48px;
        }

        .nav-module:last-child {
            margin-bottom: 0;
        }

        /* 模块标题 (可选辅助识别，但不影响功能) */
        .module-label {
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #2c3e66;
            margin-bottom: 16px;
            border-left: 4px solid #1e5f8e;
            padding-left: 12px;
        }

        /* 横向滚动容器核心样式：溢出时显示滚动条，但隐藏原生滚动条 (保留滚动功能用于辅助，我们使用按钮控制，且保留原生滚动以备触摸板，但按钮控制滚动位置) 
           为了体验：滚动条隐藏但功能存在，同时用js控制scrollLeft，按钮出现条件基于scrollWidth > clientWidth */
        .scroll-nav-wrapper {
            position: relative;
            width: 100%;
        }

        /* 导航栏区域 水平滚动容器 */
        .nav-scroll-container {
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
			width: 100%;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            /* 隐藏滚动条 (兼容主流) */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
        }

        .nav-scroll-container::-webkit-scrollbar {
            display: none;  /* Chrome/Safari/Opera */
        }

        /* 内部flex布局，保持链接为一排，且不换行 */

        /* 导航链接样式 (类似胶囊导航) */
      
       

     

        /* 右侧按钮样式（唯一可见按钮） */

        .scroll-btn-right {
            position: absolute;
            top: 50%;
            right: -40px;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            background: white;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            pointer-events: auto;
            z-index: 12;
            font-size: 20px;
            font-weight: 400;
            user-select: none;
            color: #2c3e66;
        }

        .scroll-btn-right:hover {
            background-color: #000;
           
            color: #fff;
        }

        .scroll-btn-right:active {
            transform: translateY(-50%) scale(0.96);
        }

        /* 按钮隐藏类（未超出宽度时隐藏） */
        .hidden-btn {
            display: none;
        }

        /* 可选：边缘渐变遮罩，提升超出视觉提示 */
        .scroll-nav-wrapper::before,
        .scroll-nav-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 32px;
            pointer-events: none;
            z-index: 5;
            transition: opacity 0.2s;
            opacity: 0;
        }

        .scroll-nav-wrapper::before {
            left: 0;
        }

        .scroll-nav-wrapper::after {
            right: 0;
      
        }