/* 主要容器 (取消固定寬度，由內部獨立控制) */
    .tabs-container {
        margin: 2em auto;
        width: 100%;
        --active-theme-color: #3b5098; 
    }

    /* ========================================
       第 1 列：主分類導覽列 (可獨立控制寬度)
       ======================================== */
    .tab-nav {
        max-width: 800px; /* 您可自由調整第一列的寬度 */
        margin: 0 auto;
        display: flex;
        background-color: #ffffff;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tab-nav::-webkit-scrollbar { display: none; }

    /* 統一設定 .tab-item 的樣式 (無論是 div 還是 a 標籤) */
    .tab-item {
        flex: 1;
        min-width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 10px;
        cursor: pointer;
        color: #8c8c8c;
        position: relative;
        text-decoration: none; 
        
        /* 【關鍵修正】移除了 background-color 的 0.3s，讓灰底能瞬間消失，避免殘影 */
        transition: color 0.3s; 
    }

    /* 項目之間的分隔線 */
    .tab-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background-color: #dcdcdc;
    }

    /* 為每個 Tab 設定專屬的 Hover 顏色變數 */
    .tab-item:nth-child(1) { --tab-color: #2d4b9b; } /* seafood */
    .tab-item:nth-child(2) { --tab-color: #e68993; } /* pork */
    .tab-item:nth-child(3) { --tab-color: #be272d; } /* chicken */
    .tab-item:nth-child(4) { --tab-color: #00a69a; } /* beef */
    .tab-item:nth-child(5) { --tab-color: #e1af6c; } /* cus */
    .tab-item:nth-child(6) { --tab-color: #50a0e6; } /* oemodm */

    /* 第一列圖片替換容器 */
    .nav-icon-box {
        position: relative;
        width: 80px;
        height: 80px;
        margin-bottom: 0px;
    }

    .nav-icon-box img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.3s ease;
    }

    .nav-icon-box .hover-img { opacity: 0; }
    .nav-icon-box .default-img { opacity: 1; }

    .tab-item span {
        display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        letter-spacing: 1px;
    }

/* --- Hover 與 Active 狀態 --- */
    .tab-item:hover,
    .tab-item.active {
        color: var(--tab-color);
    }
    .tab-item:hover .default-img,
    .tab-item.active .default-img { opacity: 0; }
    
    .tab-item:hover .hover-img,
    .tab-item.active .hover-img { opacity: 1; }

    .tab-item.active {
        background-color: #f4f4f4;
    }
    .tab-item.active::after {
        display: none;
    }

    /* ========================================
       第 2 列：內容面板與子選項 (獨立控制寬度)
       ======================================== */
    .tab-content {
        max-width: 100%; 
        margin: 0 auto;
        background-color: #f4f4f4;
        padding: 20px 0px;
        border-radius: 0 0 10px 10px;
        display: none; /* 預設隱藏 */
    }

    /* 當 JS 加上 active 類別時才顯示 */
    .tab-content.active {
        display: block;
        animation: fadeIn 0.4s ease;
    }

    .panel {
        display: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .panel.active {
        display: flex; /* 顯示被標記為 active 的面板 */
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* --- 子項目樣式 --- */
    .sub-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 140px;
        cursor: pointer;
        color: #555555;
        transition: color 0.3s;
    }

    .sub-item span {
        display: block;
        width: 100%;
        font-size: 1em;
        text-align: center;
    }

    .circle-img-box {
        position: relative;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: #ffffff;
        margin-bottom: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        overflow: hidden;
        transition: background-color 0.3s, transform 0.3s;
    }

    .circle-img-box img {
        position: absolute;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        object-fit: contain;
        transition: opacity 0.3s ease;
    }

    .circle-img-box .hover-img { opacity: 0; }
    .circle-img-box .default-img { opacity: 1; }

    /* Hover 讀取 JS 傳入的主題色 */
    .sub-item:hover { color: var(--active-theme-color); }
    .sub-item:hover .circle-img-box {
        background-color: var(--active-theme-color); 
        transform: translateY(-5px);
    }

    .sub-item:hover span {
        color: var(--active-theme-color); 
    }

    .sub-item:hover .default-img { opacity: 0; }
    .sub-item:hover .hover-img { opacity: 1; }

    .sub-item.active .circle-img-box {
        background-color: var(--active-theme-color); 
    }


/* --- RWD 響應式 --- */
@media screen and (max-width: 840px) {
    
    .tab-nav {
        max-width: 1000px; 
    }
    
    .tab-item {
        flex: 1;
        min-width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 5px;
        color: #808080; /* 預設文字顏色 (灰) */
        position: relative;
        transition: color 0.3s, background-color 0.3s;
        cursor: pointer;
    }
    
    
    /* 第一列圖片替換容器 */
    .nav-icon-box {
        position: relative;
        width: 60px;
        height: 60px;
        margin-bottom: 5px;
    }

        .panel { gap: 20px; }
        .sub-item { width: 100px; }
        .circle-img-box { width: 80px; height: 80px; }
    
    
}