:root {
    --radius: 12px;
    --accent: #0d6efd;
    --accent-strong: #0056b3;
    --muted: rgba(0,0,0,0.65);
}

body {
    font-family: Inter, 'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex; /* 確保 footer 總是在底部 */
    flex-direction: column; /* 確保 footer 總是在底部 */
    min-height: 100vh; /* 確保 footer 總是在底部 */
    color: var(--muted);
    background-color: #ffffff;
}

.site-logo {
    height: 36px;
    margin-right: 10px;
    border-radius: 8px;
}

.btn, .cta-button {
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 1rem;
}

.info-card, .feature-card {
    box-shadow: 0 6px 20px rgba(13, 26, 111, 0.06);
    background: #fff;
}

.vm-navbar {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* 調整按鈕與 CTA 色彩 */
.cta-button {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13,26,111,0.08); }


main {
    flex-grow: 1; /* 讓 main 內容區塊填充剩餘空間，將 footer 推到底部 */
}

/* --- 導航列樣式 --- */
.vm-header {
    background: #040b57;
    color: #fff; /* 白色字體 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 輕微的陰影效果 */
}

.vm-navbar-container {
    padding: 10px 120px; /* 內邊距，左右各120px */
}

/* 響應式內邊距調整 */
@media (max-width: 992px) {
    .vm-navbar-container {
        padding: 10px 15px; /* 在小螢幕上減少左右內邊距 */
    }
}

/* 品牌名稱樣式 */
.vm-navbar-brand {
    color: #fff !important; /* 強制白色字體 */
    font-weight: bold; /* 加粗字體 */
    font-size: 1.5rem; /* 字體大小 */
    display: flex; /* 讓內容在垂直方向上居中 */
    align-items: center; /* 垂直居中對齊 */
}

.vm-navbar-brand span {
    color: #fff; /* 確保span內的文字也是白色 */
}

/* 導航切換按鈕 (漢堡選單) */
.vm-navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5); /* 邊框顏色 */
}

.vm-navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* 白色漢堡圖標 */
}

/* 導航連結 */
.vm-navbar-nav .nav-link {
    color: #fff !important; /* 預設白色字體 */
    padding: 0.5rem 1rem; /* 內邊距 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
    position: relative; /* 用於底部指示器 */
}

.vm-navbar-nav .nav-item.active .nav-link,
.vm-navbar-nav .nav-link:hover {
    color: #ffd700 !important; /* 激活和懸停時的金色字體 */
}

/* 導航連結底部指示器 */
.vm-navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #ffd700; /* 金色 */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.vm-navbar-nav .nav-item.active .nav-link::after,
.vm-navbar-nav .nav-link:hover::after {
    width: calc(100% - 20px); /* 懸停和激活時的寬度 */
}

/* 下拉選單樣式 */
.vm-dropdown-menu {
    background-color: #000000; /* 與導航列相同的背景色 */
    border: none; /* 移除邊框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 更明顯的陰影 */
}

.vm-dropdown-item {
    color: #fff; /* 下拉選項預設白色字體 */
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 0.9rem; /* 下拉選單的字體大小也可以稍微小一點 */
}

.vm-dropdown-item:hover,
.vm-dropdown-item:focus {
    background-color: #0d1a6f; /* 懸停時稍微深一點的背景色 */
    color: #ffd700; /* 懸停時的金色字體 */
}

.vm-dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 分隔線顏色 */
}

/* Font Awesome 圖標的樣式 */
.vm-navbar-nav .nav-link .fa-user { /* 針對登入圖標 */
    margin-right: 5px; /* 圖標與文字之間的間距 */
}

/* --- 底部導航列樣式 (Footer) --- */
.vm-footer {
    background: #040b57; /* 與導航列相同的深藍色背景 */
    color: #fff; /* 白色字體 */
}

/* 針對 footer 的主要內容容器 */
.vm-footer-primary-container {
    max-width: 1200px; /* 這裡使用 Bootstrap 的預設 max-width，或者你希望的特定寬度 */
    background-color: #040b57;
    margin-top: 0;        /* 重置不想要的 margin-top */
    margin-bottom: 0;     /* 重置不想要的 margin-bottom */
}

.vm-footer-info-section {
    padding-top: 30px; /* 增加上下內邊距，提供更多空間 */
}

.vm-footer-primary-container { /* 使用更具體的類別 */
    max-width: 1200px; /* 限制內容最大寬度，保持一致性 */
    margin: 0 auto; /* 居中內容 */
    padding: 0 15px; /* 增加左右內邊距以避免內容貼邊 */
}

.vm-footer-col {
    margin-bottom: 40px; /* 增加列之間的底部間距 */
}

.vm-footer h4 {
    color: #ffd700; /* 標題使用金色，與導航列強調色相同 */
    margin-bottom: 25px; /* 增加標題底部間距 */
    font-size: 1.6rem; /* 調整標題字體大小 */
    font-weight: 600;
    position: relative; /* 用於底部指示器 */
    padding-bottom: 12px; /* 為下劃線留出空間 */
}

/* 標題底部金色短線 */
.vm-footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px; /* 線的長度 */
    height: 3px; /* 線的粗細 */
    background-color: #ffd700; /* 金色 */
}

.vm-contact-link-box a,
.vm-footer-links a {
    color: rgba(255, 255, 255, 0.8); /* 連結顏色稍微變淺，增加對比度 */
    text-decoration: none;
    display: flex; /* 使用 flexbox 讓圖標和文字對齊 */
    align-items: center; /* 垂直居中對齊 */
    margin-bottom: 12px; /* 增加連結之間的間距 */
    font-size: 1rem; /* 與導航列連結字體大小相符 */
    transition: color 0.3s ease; /* 平滑過渡效果 */
}

.vm-contact-link-box a:hover,
.vm-footer-links a:hover {
    color: #ffd700; /* 懸停時變為金色 */
    font-weight: normal; /* 保持正常字體粗細，避免跳動 */
}

.vm-contact-link-box a i {
    margin-right: 10px; /* 圖標與文字的間距 */
    font-size: 1rem; /* 調整圖標大小 */
}

.vm-footer-detail p {
    color: rgba(255, 255, 255, 0.8); /* 內文顏色稍微變淺 */
    line-height: 1.8; /* 增加行高，提高可讀性 */
    font-size: 1rem; /* 與導航列連結字體大小相符 */
}

.vm-footer-copyright {
    background-color: #0d1a6f; /* 比導航列更深一點的藍色，與主背景區分 */
    color: rgba(255, 255, 255, 0.7); /* 較淺的白色文字 */
    font-size: 1rem; /* 版權資訊字體小一些 */
    text-align: center; /* 文字居中 */
    margin-top: 30px; /* 版權區塊與上方內容的間距 */
}

.vm-footer-copyright-container { /* 使用更具體的類別 */
    max-width: 1200px; /* 這裡使用 Bootstrap 的預設 max-width，或者你希望的特定寬度 */
    background-color: #0d1a6f;
    margin-top: 0;        /* 重置不想要的 margin-top */
    margin-bottom: 0;     /* 重置不想要的 margin-bottom */
    padding: 5px 0;
}

/* 響應式調整 */
@media (max-width: 991px) {
    .vm-footer-info-section {
        padding: 50px 0;
    }

    .vm-footer-col {
        text-align: center; /* 小螢幕下文字居中 */
    }

    .vm-footer h4::after {
        left: 50%; /* 標題下劃線居中 */
        transform: translateX(-50%);
    }

    .vm-contact-link-box a,
    .vm-footer-links a {
        justify-content: center; /* 小螢幕下連結內容居中 */
    }
}

@media (max-width: 767px) {
    .vm-footer-col {
        margin-bottom: 30px;
    }
}

.scroll-to-top-btn {
    display: none; /* 預設隱藏 */
    position: fixed; /* 固定定位 */
    bottom: 20px; /* 距離底部 20px */
    right: 20px; /* 距離右側 20px */
    background-color: #0056b3; /* 按鈕背景色 */
    color: white; /* 圖標顏色 */
    border: none; /* 無邊框 */
    border-radius: 50%; /* 圓形按鈕 */
    width: 50px; /* 寬度 */
    height: 50px; /* 高度 */
    font-size: 24px; /* 圖標大小 */
    display: flex; /* 使用 flex 布局居中圖標 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    cursor: pointer; /* 鼠標懸停時顯示指針 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 陰影效果 */
    z-index: 1000; /* 確保按鈕在其他內容之上 */
    opacity: 0; /* 預設透明度為0，用於過渡效果 */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* 透明度和縮放的過渡效果 */
    transform: translateY(10px); /* 預設向下微移，用於進入動畫 */
}

.scroll-to-top-btn.show {
    opacity: 1; /* 顯示時透明度為1 */
    transform: translateY(0); /* 顯示時回到原位 */
}

.scroll-to-top-btn:hover {
    background-color: #ffd700; /* 懸停時背景色變深 */
    transform: translateY(-2px); /* 懸停時輕微上移 */
}

.scroll-to-top-btn svg {
    width: 24px; /* SVG 圖標寬度 */
    height: 24px; /* SVG 圖標高度 */
}