@charset "utf-8";
#news {
    background-color: #EAF4F6;
}
.index-page .main #news {
    background-color: #f1f7fc;
    width: 100%;
    height: none;
}
.row .col-xl-6 .container {
    background-color: #FFFFFF;
    margin-top: -10px;
    height: 0px;
}
.row .col-xl-6 .section-title {
    height: 100px;
}
.row .col-xl-6 .container {
    background-color: #FFFFFF;
    border-radius: 20px;
}
.index-page .main #news {
}
.row .col-xl-6 .container {
    text-align: left;
}
.row .col-xl-6 .container {
    background-color: #F1F7FC;
}
.index-page .main #about_us {
}
.index-page .main #about_us {
    width: 100%;
    height: none;
}
.index-page img {
    max-width: 100%;
}
.my-3 .logo.me-auto a {
    font-weight: bold;
    color: #000000;
    text-decoration: overline;
}
.index-page .main #clinic-schedule {
    background-color: #F1F7FC;
    width: 100%;
    height: 100vh;
}
.info-item.d-flex div p {
    font-size: 16px;
}
.col-lg-4.mb-3 .info.text-left .info-item.d-flex {
    margin-bottom: -10px;
}
.col-lg-4.mb-3 .info.text-left .info-item.d-flex {
    margin-bottom: -10px;
}
.col-lg-4.mb-3 .info.text-left .info-item.d-flex {
    margin-bottom: 0px;
    margin-top: 0px;
    margin-right: 15px;
}
.contact .social-links i  {
    display: flex;
    justify-content: center; /* 將所有圖示集中後再分配間距 */
    gap: 20px; /* 設定每個圖示之間的間距為 20px */
}#footer .container.copyright.text-center.mt-4 p {
}
.index-page .main .breadcrumbs {
    background-color: #EAF4F6;
    height: none;
    min-width: 60px;
}
.index-page .main .container {
    min-width: px;
    min-height: 50px;
}
.breadcrumb {
   height: 40px;
    line-height: 40px; /* 行高等於高度，文字即垂直置中 */
}
.card {
  background-color:#ffffff;
  border-radius:3px;
  border: 1px solid #a1a1a1;
  padding:20px;
}
.row .col-xl-4 p {
    font-size: 22px;
}
.row .col-xl-4 p {
    font-size: 16px;
    margin-left: 20px;
    margin-right: 20px;
}
.index-page .container.my-5 {
}
.index-page .container.my-5 {
}
.index-page .container.my-5 {
    background-color: #F1F7FC;
}
.card-body.p-lg-5 .bg-white.rounded-4.shadow-sm.p-4.d-flex.flex-column.justify-content-center .card-text.text-secondary {
    font-weight: normal;
    color: #000000;
    font-family: "微軟正黑體", "標楷體";
    font-size: large;
}
.col-md-9.ml-sm-auto.col-lg-10.px-md-4 .content-wrapper.py-4 article {
    font-size: 18px;
}
<style>
    /* 讓側邊欄固定在頂部，並設定最大高度與捲軸 */
    .sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 20px; /* 距離頂部的高度，可視導覽列高度調整 */
        max-height: calc(100vh - 40px); /* 限制高度為視窗高度減去邊距 */
        overflow-y: auto; /* 當內容超過高度時顯示捲軸 */
        scrollbar-width: thin; /* 讓捲軸變細 (針對 Firefox) */
    }

    /* 針對 Chrome/Safari 讓捲軸變漂亮 */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }
    .sidebar::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 10px;
    }
</style>
/* 麵包屑區塊底色設定 */
.breadcrumbs {
    background-color: #f1f7fd; /* 這是淡藍色，你可以改為 #f8f9fa (淺灰) */
    padding: 10px 0;           /* 增加上下間距，看起來比較不擠 */
    margin-bottom: 20px;       /* 跟下方內容保持一點距離 */
}

/* 確保內部的 ol 標籤沒有重複背景 */
.breadcrumbs .breadcrumb {
    background-color: #E3F1F3;
    margin-bottom: 0;
    padding-left: 0;
}
.index-page #header .breadcrumbs {
    background-color: #E3F1F3;
    width: 100%;
}

/*--------------------------------------------------------------
# Dr Yin Blog Section
# Dr Chen Blog Section
# Dr Tsui Blog Section
--------------------------------------------------------------*/

/* 2. 側邊欄：只負責底色和圓角 */
.sidebar {
    background-color: #343a40 !important; /* 深灰色填滿 */
    border-top-left-radius: 30px;         /* 圓角 */
    min-height: 100%;                     /* 讓黑色跟著文章長度延伸 */
    padding: 0 !important;
}

/* 3. 右側主頁內容：細邊框 + 右上角圓弧 */
.main-content { 
    border: 1px solid #dee2e6;    /* 細細的淺灰色邊框 */
    border-top-right-radius: 20px; /* 右上角圓弧 */
    padding: 30px;                /* 讓內文與邊框保持距離，比較美觀 */
    background-color: #ffffff;    /* 確保有白色背景 */
	min-height: 120vh;           /* 確保右側高度夠長，才能讓左側有「固定」的感覺 */
}
.card-body.p-lg-5 .bg-white.rounded-4.shadow-sm.p-4.d-flex.flex-column.justify-content-center .card-text.text-secondary {
    color: #000000;
}
.d-flex.flex-wrap.align-items-center.mb-4 .labels .badge.badge-pill.badge-danger.mx-1.p-2 {
    background-color: #FF6700;
}


@media (max-width: 767.98px) {
    /* 1. 側邊欄外層容器 */
    .sidebar {
        background-color: #435a6f !important; /* 使用深藍灰色 */
        border-radius: 15px !important;
        margin: 10px;
        padding: 0 !important;
    }

    /* 2. 讓內部呈現橫向捲動，並允許內容垂直排列 */
    .sidebar-sticky {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 15px 10px !important;
        align-items: flex-start; /* 讓內容頂部對齊 */
    }

    /* 3. 設定大分類標題 (如：憂鬱症、身心症) */
    /* 假設您的 HTML 中大標題是使用 h5 或特定 class */
    .sidebar-sticky h5, 
    .sidebar-sticky .category-title {
        writing-mode: vertical-lr; /* 關鍵：文字直排 */
        text-orientation: upright;
        color: #ffc107 !important; /* 亮黃色 */
        font-weight: bold;
        letter-spacing: 3px;
        margin: 0 15px 0 5px !important;
        font-size: 1.1rem;
        display: inline-block;
    }

    /* 4. 設定小項目按鈕樣式 (並排顯示) */
    .sidebar-sticky .nav {
        display: flex !important;
        flex-direction: column !important; /* 讓同分類的小標題垂直堆疊或保持原本 nav 結構 */
        margin-right: 20px;
    }

    .sidebar-sticky .nav-link {
        white-space: nowrap !important;
        color: #ffffff !important;
        background: rgba(255,255,255,0.1);
        border-radius: 20px;
        padding: 5px 12px !important;
        margin-bottom: 8px !important;
        font-size: 0.85rem;
        border: 1px solid rgba(255,255,255,0.2);
    }

    /* 5. 美化顯眼的捲軸 (與上一版相同) */
    .sidebar-sticky::-webkit-scrollbar {
        height: 6px !important;
        display: block !important;
    }
    .sidebar-sticky::-webkit-scrollbar-thumb {
        background-color: #a0aec0 !important;
        border-radius: 10px !important;
    }
}