/* ======== 1. 修改 tab 預設背景為淺藍色 ======== */
.ui-tabs-nav li a {
    background-color: #cfe8ff; /* 淺藍色 */
    font-weight: bold;         /* ======== 3. 字變粗 ======== */
    font-size: 18px;           /* ======== 4. 字變大 ======== */
    border: 2px solid #7fb3ff; /* ======== 5. 加邊框 ======== */
    border-radius: 6px;        /* 圓角（可選） */
    padding: 10px 18px;        /* 讓 tab 看起來更美 */
}

/* ======== 2. hover 時變淡紫色 ======== */
.ui-tabs-nav li:hover a {
    background-color: #e6d6ff; /* 淡紫色 */
}

/* ======== active tab 也變淡紫色（選到的狀態） ======== */
.ui-tabs-nav li.ui-tabs-active a {
    background-color: #e6d6ff;
    border-color: #b491ff; /* 選中時邊框更明顯 */
}

/* ======== 調整 tabs 列的外觀 ======== */
.ui-tabs-nav {
    border-bottom: none !important;
    margin-bottom: 15px;
}

/* ======== 內容區背景 + 邊框 ======== */
.ui-tabs-panel {
    background-color: #f8fbff; 
    border: 2px solid #7fb3ff;
    border-radius: 8px;
    padding: 20px;
}
/* ======== Active tab（目前選到的）變深藍色 ======== */
.ui-tabs-nav li.ui-tabs-active a {
    background-color: #2f66d0; /* 深藍色 */
    color: white;              /* 白色文字，更清楚 */
    border-color: #1d3f82;     /* 深藍邊框，匹配主色 */
    font-weight: bold;
}