/* 導覽列：懸浮在封面上 */
	    #nav-sticky {
	        position: absolute;
	        top: 100px; 
	        left: 50%; 
	        transform: translateX(-50%);
	        z-index: 100;
	        width: 90%;
	        background: rgba(255,255,255,0.9);
	        
	        border-radius: 50px;
	        padding: 30px 40px 45px 40px !important;
	        height: 55px;
	        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	        white-space: nowrap;
	        display: flex;
	        align-items: center;
	        overflow: visible;
	        box-sizing: border-box;
	        letter-spacing:2px;
width: auto !important;
        min-width: 1000px; /* 設定一個最小寬度，防止太窄 */
        max-width: 95%;   /* 防止貼到螢幕邊緣 */
        

	    }


    /* 2. 強制內部的容器不推擠空間 */
    #nav-sticky .container-fluid {
        width: auto !important;
        display: block !important;
    }

    /* 3. 讓 row 縮小到剛好包住按鈕的寬度 */
    #nav-sticky .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 4. 移除 row-cols-5 的 20% 寬度，改由內容撐開 */
    #nav-sticky .row > .col,
    #nav-sticky .row > .dropdown {
        flex: 0 0 auto !important;
        width: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 5. 確保按鈕內容不換行 */
    .nav-card-item {
    background: none !important;
    color: #331A00 !important;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    
    /* 原本固定 padding，改為隨容器縮放 */
    padding: clamp(6px, 1vw, 10px) clamp(6px, 1.2vw, 12px) clamp(8px, 1.2vw, 12px);
    
    margin: 0px 0;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    
    /* 原本固定 80px，改為彈性高度 */
    height: clamp(50px, 6vw, 80px);
    
    transition: 0.2s;
    white-space: nowrap;
    line-height: 1.2;
    
    /* 原本固定 1.2rem，改為隨寬度縮放 */
    font-size: clamp(0.75rem, 1.1vw, 1.2rem);
}

.nav-sub-label {
    display: block;
    
    /* 原本固定 1rem */
    font-size: clamp(0.65rem, 0.9vw, 1rem);
    
    font-weight: 400;
    color: #331A00;
    letter-spacing: 1px;
    margin-top: 1px;
    transition: 0.2s;
}	
	    #nav-sticky .col.dropdown {
	        position: relative;
	        height: auto;
	        align-self: center;
	        
	    }
	    #nav-sticky .dropdown-menu {
	        z-index: 9999;
	        padding: 0 !important;
	        overflow: hidden;
	        display: block;
	        opacity: 0;
	        pointer-events: none;
	        transition: opacity 0.2s ease;
	        position: absolute;
	        top: calc(100%);
	        left: 0;
	        transform: none;
	        
	        
	    }
	    #nav-sticky .col.dropdown:hover .dropdown-menu {
	        opacity: 1;
	        pointer-events: auto;
	        background:rgba(217 217 217 0.5)
	        
	    }
	    #nav-sticky .dropdown-menu li {
	        padding: 0 !important;
	        margin: 0 !important;
	    }
	    #nav-sticky .dropdown-menu li:has(.dropdown-divider) {
	        display: none;
	    }
	    #nav-sticky .dropdown-item {
	        display: block;
	        padding: 12px 16px;
	        margin: 0;
	        transition: background-color 0.2s, color 0.2s;
	        color:#331A00;

	    }
	    #nav-sticky .dropdown-item:hover {
	        color: #E69900 !important;
	    }
	    #nav-sticky .dropdown-item:active {
	        background-color:rgba(248,249,250) !important;
	    }

	    #nav-sticky .container-fluid {
	        padding: 0 10px !important;
	        display: flex;
	        align-items: center;
	        height: 100%;
	        width: 100%;
	    }
	    #nav-sticky .row {
	        display: flex !important;
	        flex-wrap: nowrap !important;
	        align-items: center;
	        justify-content: space-around;
	        margin: 0 !important;
	        height: 100%;
	        width: 100%;
	    }
	    #nav-sticky .col {
	        flex: 1 !important;
	        width: auto !important;
	        padding: 0 !important;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        height: 100%;
	    }
	    	    .nav-card-item:hover .nav-sub-label {
	        color: #E69900;
	    }
	
	    .nav-card-item:hover {
	        color: #E69900 !important;
	        border-radius: 10px;
	        transform: none;
	    }
	    /* 當父層 .col.dropdown 被 hover 時，內部的第一層項目維持橘色 */
		#nav-sticky .col.dropdown:hover > .nav-card-item {
		    color: #E69900 !important;
		}
		
		/* 同時確保內部的 sub-label 也跟著變色 */
		#nav-sticky .col.dropdown:hover > .nav-card-item .nav-sub-label {
		    color: #E69900 !important;
		}

		/* 1. 隱藏 Bootstrap 預設的三角形 */
		.dropdown-toggle::after {
		    display: none !important;
		}
		.dropdown-toggle::before{
		    display: inline-block !important;
		    content: "" !important;
		    width: 12px;
		    height: 12px;
		    border: 1.5px solid #331A00;
		    border-radius: 50%;
		    background-color: #331A00;
		    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='7' y1='3' x2='7' y2='11' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='3' y1='7' x2='11' y2='7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
		    background-size: 100% 100%;
		    vertical-align: middle;
		    flex-shrink: 0;
		    transition: all 0.3s ease;
		}
		.col.dropdown:hover .dropdown-toggle::before {
		    background-color: #E69900 !important;
		    border-color: #E69900 !important;
		    /* 減號 SVG (只保留橫線) */
		    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='3' y1='7' x2='11' y2='7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
		    transform: rotate(180deg); /* 增加一點旋轉動畫感 */
		}