html,body {
	overflow-x: hidden;
}

.t4-navbar .navbar {
    float: right !important;
}
.t4-palette-middle-banner .nav li a.nav-link {
    color: #ffffff !important;
}
.t4-palette-middle-banner .nav li a.nav-link .item-caret {
    border-top-color: #ffffff !important;
}
.t4-navbar .nav-item .dropdown-menu {
    background: #ffffff;
}

.t4-navbar .navbar {
    min-height: 20px !important;
}

.homepage-focus-title p {
    margin-bottom: 0%;
}

.jacl-item__media.media-1-1 img {
	height: 80% !important;
}
/* ---- navigation ---- */
.page-link, .page-link:hover {
	color: #fb644d;
}

.pagination {
    justify-content: center;  
}

/* ---- Shadow ---- */
.sp-page-builder .page-content #section-id-1655617594964, .sp-page-builder .page-content #section-id-1655617604765, .sp-page-builder .page-content #section-id-1655617605071 {
  box-shadow: 4px 5px 5px 0px rgba(166,166,166,0.28);
  -webkit-box-shadow: 4px 5px 5px 0px rgba(166,166,166,0.28);
  -moz-box-shadow: 4px 5px 5px 0px rgba(166,166,166,0.28);
}


/* ---- Sidebar ---- */

.page-header h2, .categories-list h2 {   
    /*
    color: #fb5d42;
    background-color: #eeeeee;
    border-top: 2px solid #fb5d42;
    border-bottom: 2px solid #ffe500;
    margin-top: 60px;
    padding: 10px 20px 10px 20px;
    text-align: center;
    */
    background-color: #F9F7F1 !important; /* 淺米灰底色 (依圖吸取) */
    padding: 60px 0 !important;           /* 上下留白高度 */
    text-align: center !important;        /* 強制內容置中 */
    margin: 0 0 30px 0 !important;        /* 與上方貼齊，下方留 30px */
    border: none !important;              /* ★關鍵：拿掉您舊CSS的橘色邊框 */
    width: 100%;                          /* 滿版寬度 */
    display: block;

    font-size: 32px !important;       /* 字體大小 */
    font-weight: 500;                 /* 字體粗細 (適中) */
    color: #333333 !important;        /* 深黑色文字 */
    letter-spacing: 2px;              /* 字元間距 */

}

.article-info {
    margin: auto;
    padding-top: 12px;
    font-size: 16px;
}

.ctha-subpage-container {
    letter-spacing: 1px;
    width: 100%;    
}

/* --- RAXO ---- */

.raxo-pagination .raxo-info > span {
	color: #434343;
    background-color: #ffe500;
    font-size: 13px;
    border-radius: 0 0 15px 15px;
    height: 25px;
    width: 100px;
    text-align: center;
    padding-top: 5px;
}

.raxo-pagination .raxo-wrap {
    align-items: flex-start;
}

.raxo-pagination .raxo-image {
    border: 0px;
}

.raxo-pagination .raxo-title a {
	color: #fb634d !important;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;  
}

.raxo-pagination .raxo-title {
	padding-top: 12px;
    line-height: 24px;
}

.raxo-pagination article:hover .raxo-title a {
	color: #fb634d !important;
}

.raxo-pagination .raxo-text {
	font-size: 16px;
    letter-spacing: 1px;
    line-height: 22px;
}

.raxo-pagination article {
    background: none;
    padding-top: 20px;
}

.raxo-pagination .raxo-navigation {
    text-align: center;
    background: none;
    font-size: 16px;
}

/* ---- Page content ---- */
.header-center .page-header {
	text-align: center;    
}

.header-center .page-header h2 {
    letter-spacing: 12px;
    font-weight: 600;
    

}




/* ---- Search Bar ---- */
.icon-search:before {
   font-family: 'IcoMoon';
}

/* ---- Menu icon ---- */
.c-button__text .toggle-bars {
     padding-top: 5px;
}

.js-offcanvas-trigger .menu-sub {    
    margin-top: -7px;
}

.t4-offcanvas-toggle {
    line-height: 28px;
    
}

@media only screen and (max-width: 576px) {
  .ctha-subpage-container {
	/*margin-left: 3% !important;
  	margin-right: 3% !important;*/
    margin: auto;
  }
  .jacl-item__body {
    padding: 0;
    margin-top: -18px !important;    
  }  
  
  .homepage-care-focus .jacl-item__body {
    padding: 0;
    margin-top: 16px !important;    
  }    
  /* ---- Article Page ---- */
  .item-page {
    padding-left: 15px;
    padding-right: 15px;
  }  
  /* ---- iframe ---- */
  .donate-f iframe {
    height: 1050px !important;
  }
  .gv iframe {
    width: 100% !important;
  }  
}

@media only screen and (max-width: 768px) {
  .jacl-item__media.media-1-1 {
    padding-bottom: 100%;
    position: relative;
    height: 0;
    width: 100%;
    margin-bottom: -15%;  
  }
  .raxo-pagination {
      margin: 20px 20px 24px 20px;
  }
  #column-id-1655572167651 .sppb-row,
  #column-id-1655617594972 .sppb-row,
  #column-id-1677255580802 .sppb-row,
  #column-id-1677324189221 .sppb-row,
  #column-id-1677324189335 .sppb-row,
  #column-id-1677324189423 .sppb-row {
    flex-wrap: nowrap;  
  }
  

  
  .sp-page-builder .page-content #section-id-1655614722484,
  .sp-page-builder .page-content #section-id-1655617594974,
  .sp-page-builder .page-content #section-id-1677324189223,
  .sp-page-builder .page-content #section-id-1677324189337,
  .sp-page-builder .page-content #section-id-1677324189425
  {
    padding: 0px;
  }
  
 
  
  #column-wrap-id-1655614722488, #column-wrap-id-1655617594972 {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .homepage-logo table {
    text-align: center;
    width: 100%;
  }
  

  #avs-category .card-body .mt-2 {
    margin: 0px 0px 10px 0px !important;
  }

}
  
@media only screen and (min-width: 576px) {
  .homepage-focus-title img {
      width: 40%;
  }
  
  .homepage-logo table {
      width: 45%;
  }
  .t4-header .search {
    margin-top: 1rem;
  }  
}


@media only screen and (min-width: 768px) {
  .item-style-3 .jacl-item__inner {
      align-items: flex-start !important;
  }
  .raxo-pagination .raxo-image img {
      width: 250px;
  }

}

@media only screen and (min-width: 1140px) {
  .ctha-subpage-container {
      /*margin-left: 10%;
      margin-right: 10%;*/
      letter-spacing: 1px;
      width: 1140px;
      margin: auto;
  }
  
}

@media only screen and (min-width: 1400px) {
    
  .homepage-logo table {
      width: 30%;
  }
  
  
}

@media only screen and (min-width: 2500px) {
 /* .care-left-menu {
      width: 300px;
  }

  .care-left-icon {
      width: 300px;
  }*/
}  



.homepage-logo {
  padding: 0px 0px 0px 0px;
}

.homepage-focus-title img {
	width: 80%;
}

.homepage-focus {
    padding: 5% 15% 5% 15%;
}

.top-banner {
    /*padding: 1.8% 28px;*/
    padding: 24px 16px 0px 0px;
}

.mod-finder {
	padding: 7% 0px;
}

.mod-finder .btn.btn-primary {
    /*
	background-color: #ab8f7c !important;
    border-color: #ab8f7c !important;
    */
}

.mod-finder .btn [class^=icon-], .btn [class*=" icon-"] {
	margin-right: 0rem !important;
}

.mod-finder__search {
	flex-wrap: nowrap !important;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 2.5rem;
    padding-left: 0.5rem;
    font-size: 18px;
}

.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.t4-main-body {
    padding-top: 0px !important;
}

.t4-middle-banner {
	line-height: 34px;
    font-size: 18px;
    margin-bottom: -30px;

}
.nav-breakpoint-lg.navigation-hide .t4-offcanvas-toggle {
    /*right: 30px !important;*/
}



.jacl-item__title a {
	color: #fb634d;
}

.jacl-item__title {
  	margin-top: 10px;
}

.jacl-item__text, .jacl-item__introtext {
  	margin-top: 10px;
}

.item-style-3.horizontal-3 .jacl-item__body {
	margin: 0 0 0 20px;
}



.homepage-care-focus .jacl-item__meta ul li {
    #background-color: #fb7565;
    color: #6c757d;
    font-size: 14px;
    padding: 4px 12px;
}

.homepage-care-focus .jacl-item__title a {
    color: #434343;
    font-weight: 600;
    letter-spacing: 1px;  
}

.homepage-care-focus .jacl-item__inner {
    padding: 10px;
    background-color: #fffdf0;    
    box-shadow: 3px 3px 5px 0px #e7e5e5;  
}

.layout-1 .jacl-actions a {
    background-color: #fff06d !important;
    color: #434343;  
    max-width: 200px;    
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 7px;
    border: none;
}

/* --- HOHA Footer 整體容器設定 --- */
/* --- 1. Footer 整體背景 (深色漸層) --- */
.hoha-footer, .hoha-footer-copyright {
    /* 使用 linear-gradient 製作從左到右的深藍綠漸層 */
    background: linear-gradient(90deg, #153243 0%, #286370 100%);
    
    /* 其他設定維持不變 */
    color: #cccccc;
    padding-top: 60px;
    padding-bottom: 20px;
    font-size: 15px;
}

/* --- 1. 標題樣式 (認識HOHA, 營養飲食力...) --- */
.hoha-footer h3, 
.hoha-footer h4 {
    color: #ffffff;            /* 標題白色 */
    font-size: 18px;           /* 標題字體大小 */
    font-weight: bold;
    margin-bottom: 20px;       /* 與下方連結的距離 */
    
    /* 標題下方的白線 */
    display: inline-block;     /* 讓線條跟著文字長度 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); 
    padding-bottom: 10px;      /* 線條與文字的距離 */
}

/* --- 2. 連結列表樣式 --- */
.hoha-footer ul {
    list-style: none;          /* 去掉清單原本的黑點 */
    padding-left: 0;
    margin: 0;
}

.hoha-footer li {
    margin-bottom: 12px;       /* 每個連結之間的距離 */
}

.hoha-footer a {
    color: #cccccc;            /* 連結預設淺灰 */
    text-decoration: none;     /* 去除底線 */
    transition: color 0.3s;    /* 變色動畫 */
}

.hoha-footer a:hover {
    color: #ffffff;            /* 滑鼠移過去變白色 */
}

/* --- 3. Logo 下方的社群圖示 (圓形白底) --- */
.hoha-footer .sppb-icon {
    width: 35px;
    height: 35px;
    line-height: 35px;         /* 讓圖示垂直置中 */
    background-color: #ffffff; /* 白色圓底 */
    color: #1F4558 !important; /* 圖示顏色 (深藍) */
    border-radius: 50%;        /* 變圓形 */
    text-align: center;
    margin-right: 10px;        /* 圖示間距 */
    display: inline-block;
    transition: all 0.3s;
}

.hoha-footer .sppb-icon:hover {
    background-color: #4CB8C4; /* 滑鼠移上去變亮藍色 */
    color: #fff !important;
}

/* --- 4. 搜尋框樣式 (如果您是用我上一則給的 HTML) --- */
.hoha-footer .hoha-search-bar {
    display: flex;
    margin-top: 15px;
}

.hoha-footer .hoha-search-bar input[type="text"] {
    flex: 1;                   /* 輸入框自動填滿 */
    padding: 10px 15px;
    border: none;
    border-radius: 4px 0 0 4px;/* 左邊圓角 */
    outline: none;
    color: #333;
}

.hoha-footer .hoha-search-bar button {
    /* 藍綠色漸層背景 */
    background: linear-gradient(90deg, #4CB8C4, #9ACD32); 
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 0 4px 4px 0;/* 右邊圓角 */
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;       /* 防止文字換行 */
}

/* --- 5. 底部版權宣告區隔線 --- */
/* 請在最後一排文字 (Copyright) 的 Addon 加上 margin-top */
.hoha-footer .copyright-text {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 淡淡的分隔線 */
    padding-top: 30px;
    margin-top: 40px;
    font-size: 13px;
    color: #aaaaaa;
}

/* --- 底部版權宣告區 (左右排版) --- */
.hoha-copyright-bar {
    /* 1. 上方分隔線 (關鍵) */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 半透明白線 */
    
    /* 2. 間距設定 */
    margin-top: 40px;      /* 與上方內容的距離 */
    padding-top: 20px;     /* 線條與文字的距離 */
    
    /* 3. 彈性排版 (讓內容左右分開) */
    display: flex;
    justify-content: center; /* 關鍵：把左右兩個盒子推到最邊邊 */
    align-items: flex-end;          /* 對齊底部 (或 center 對齊中間) */
    
    /* 4. 文字設定 */
    color: #aaaaaa;
    font-size: 13px;
    line-height: 1.6;
}

/* 右側 Email 區塊 */
.hoha-copy-center {
    text-align: center; /* 文字靠中 */
}

/* --- 手機版響應式調整 (變成上下排) --- */
@media (max-width: 768px) {
    .hoha-copyright-bar {
        flex-direction: column; /* 改為垂直排列 */
        align-items: center;    /* 置中對齊 */
        text-align: center;
    }
    
    .hoha-copy-right {
        text-align: center;
        margin-top: 10px;       /* 增加一點間距 */
    }
}

/* --- 頂部通知列 (Top Bar) --- */
#t4-header {
    /* 背景：從左邊藍色(#2F80ED) 漸層到 右邊綠色(#8CC63F) */
    background: linear-gradient(90deg, #2F80ED 0%, #8CC63F 100%);
    
    /* 移除可能存在的預設邊框 */
    border: none !important;
    
    /* 調整高度與內距 */
    padding: 0px 0;
}

/* --- 頂部文字設定 --- */
#t4-header .t4-section-inner {
    color: #ffffff !important;      /* 強制文字變白 */
    text-align: center !important;  /* 強制文字置中 */
    font-weight: bold;              /* 稍微加粗比較顯眼 */
    font-size: 16px;                /* 字體大小 (可依需求調整) */
}

#t4-header .container {
    padding-top: 0 !important; 
    padding-bottom:  0 !important;
}

/* --- 如果這行字有設連結 (Link) --- */
#t4-header a {
    color: #ffffff !important;
    text-decoration: none;
}
#t4-header a:hover {
    opacity: 0.9; /* 滑鼠移上去稍微變暗 */
}



/* --- 手機版 Header 修正：選單置左 + Logo 置中 --- */

/* 1. Header 容器設定 (定位基準點) */
#t4-mainnav {
    position: relative;      /* 設為相對定位，讓裡面的元件可以對齊它 */
    display: flex;
    align-items: center;     /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    min-height: 70px;        /* 設定最小高度，確保不會太擠 */
    padding: 0 15px;         /* 左右留一點邊距 */
    border-bottom: none !important; /* 移除底線 */
}

/* 2. Logo 設定 (絕對置中) */
#t4-mainnav .navbar-brand {
    position: absolute;      /* 絕對定位：不管別人，自己站中間 */
    left: 50%;               /* 跑到畫面 50% 的位置 */
    transform: translateX(-50%); /* 修正回正中心 */
    margin: 0 !important;    /* 移除所有推擠 */
    z-index: 1;              /* 層級設低一點 */
    width: auto;
    display: flex;
    justify-content: center;
}

/* 防止 Logo 圖片太大 */
#t4-mainnav .logo img {
    max-height: 80px;        /* 限制 Logo 高度，請依實際調整 */
    width: auto;
}

/* 3. 選單按鈕 (三條線) 設定 (絕對置左) */
.t4-offcanvas-toggle {
    position: absolute !important; /* 絕對定位 */
    left: 15px !important;         /* ★關鍵：釘在左邊 15px 的位置 */
    right: auto !important;        /* 確保右邊屬性被歸零 */
    top: 50%;                      /* 垂直置中 */
    transform: translateY(-80%);   /* 修正垂直位置 */
    z-index: 10;                   /* 層級最高，確保點得到 */
    margin: 0 !important;
    
}

/* --- 修正頂部通知列垂直置中 --- */

/* 1. 設定容器為彈性盒模型 (Flexbox) 以便置中 */
#t4-header .t4-section-inner {
    display: flex !important;       /* 開啟 Flex 佈局 */
    align-items: center !important; /* 垂直方向置中 */
    justify-content: center;        /* 水平方向置中 */
    min-height: 60px;               /* 設定一個最小高度 (或是你可以調整這裡的高度) */
}

/* 2. 移除 P 標籤預設的邊界 (最關鍵的一步) */
#t4-header p {
    margin: 0 !important;           /* 歸零所有邊界 */
    padding: 0 !important;          /* 歸零內距，交由外層容器控制高度 */
}

/* --- 1. 讓 Header 區域的左右兩欄「垂直置中」 --- */
#t4-mainnav .t4-row,
#t4-mainnav .row {
    align-items: center !important; /* 這是關鍵：讓 Logo 欄位與選單欄位在垂直方向互相比對置中 */
}

/* --- 2. 放大 Logo --- */
/* 解除原本 CSS 對 table 寬度的限制 (原本可能設為 45% 或 30%) */
.homepage-logo table {
    width: 100% !important; 
    text-align: left; /* 確保圖片靠左，或改 center 置中 */
}

/* 3. 調整 Logo 最大高度 (這是控制整列高度的關鍵) */
/* 如果覺得整列還是太高，請把 80px 改成 70px 或 60px */
.homepage-logo img {
    max-height: 80px !important; 
    width: auto !important;
}

/* 2. 移除 Logo 外層多餘的段落空白 (因為您的 HTML Logo 被包在 <p> 裡面) */
.homepage-logo p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;      /* 消除行高造成的隱形高度 */
}

/* --- 3. 確保選單連結文字本身也垂直置中 --- */
.t4-megamenu .navbar-nav {
    align-items: center;          /* 讓選單項目在導航列中垂直對齊 */
}

/* 4. 稍微縮減選單文字的上下觸控範圍 */
.t4-navbar .nav-link {
    padding-top: 10px !important;    /* 數字越小，選單越扁 */
    padding-bottom: 10px !important;
    height: auto !important;
}

/* --- 手機版 Header 最終修正：Logo置中，漢堡在同列靠左 --- */
@media (max-width: 991px) {
    /* 1. Header Row 容器設定 */
    #t4-mainnav .t4-row {
        display: flex !important;
        align-items: center !important; /* 讓漢堡按鈕垂直置中 */
        justify-content: flex-start !important; /* 讓內容自然靠左排列 */
        position: relative !important; /* ★關鍵：作為 Logo 絕對定位的基準點 */
        min-height: 80px; /* 設定一個基本高度，確保 Logo 放得下 */
        padding: 0 !important;
    }

    /* 2. Logo 欄位：設定為絕對定位，強制置中 */
    #t4-mainnav .homepage-logo {
        position: absolute !important; /* 把 Logo 抽離正常排列 */
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; /* 精確移動到正中心 */
        margin: 0 !important;
        width: auto !important; /* 取消寬度 100% 的設定 */
        z-index: 5; /* 層級比漢堡低一點 */
    }
    
    /* 確保 Logo 圖片本身的樣式正確 */
    .homepage-logo table,
    .homepage-logo img {
        width: auto !important;
        max-height: 70px !important; /* 您可以依需求調整 Logo 大小 */
        text-align: center !important;
        border: none !important;
    }

    /* 3. 選單欄位 (包含漢堡)：自然靠左排列 */
    #t4-mainnav .t4-col.mainnav {
        flex: 0 1 auto !important; /* 不佔滿空間，依內容大小決定 */
        padding-left: 15px !important; /* 與左側邊緣保持一點距離 */
        margin: 0 !important;
        position: static !important; /* 確保它在正常的文檔流中 */
    }

    /* 4. 漢堡按鈕本身：★關鍵修正，取消絕對定位，回歸自然 */
    .t4-offcanvas-toggle {
        position: static !important; /* 取消之前的 absolute 設定 */
        transform: none !important;  /* 取消之前的位移設定 */
        margin: 0 !important;
        float: none !important;
        display: inline-block !important;
        z-index: 10; /* 確保層級最高，可以被點擊 */
        padding: 10px 0 !important; /* 增加一點點上下觸控區域 */
    }
    
    /* 5. 清除漢堡按鈕外層容器多餘的空間和浮動 */
    .t4-navbar {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        float: none !important;
    }
    /* 隱藏桌機版的選單容器，避免佔位 */
    .t4-navbar .navbar {
        display: none !important;
    }
}


/* --- 移除 Tab 選單與內容之間的縫隙 --- */
.sppb-tab .sppb-nav-tabs {
    margin-bottom: 0 !important;   /* 移除 Tab 選單下方的留白 */
    border-bottom: none !important; /* 移除可能存在的底線 */
}

.sppb-tab .sppb-tab-content {
    margin-top: 0 !important;      /* 移除內容區上方的留白 */
    padding-top: 0 !important;     /* 移除內容區上方的內距 (視情況需要) */
}

/* --- 手機版 Tab 樣式修正 --- */
@media (max-width: 768px) {
    /* 1. 設定 Tab 容器使用 Flex 排列，強制不換行 */
    .sppb-nav.sppb-nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important; /* 關鍵：禁止折行 */
        justify-content: space-between !important;
        margin-bottom: 0 !important; /* 移除下方可能的多餘留白 */
    }

    /* 2. 讓每個 Tab 平均分配寬度 */
    .sppb-nav.sppb-nav-tabs > li {
        flex: 1 1 auto !important;    /* 自動分配剩餘空間 */
        width: 25% !important;        /* 強制平分 (因為你有4個) */
        float: none !important;       /* 取消浮動以免跑版 */
        margin-bottom: 0 !important;
    }

    /* 3. 調整按鈕內部的文字與留白 */
    .sppb-nav.sppb-nav-tabs > li > a {
        font-size: 13px !important;     /* 字體改小 (原本可能 16px 或 14px) */
        padding: 8px 2px !important;    /* 大幅減少內距：上下 8px，左右 2px */
        white-space: nowrap !important; /* ★最關鍵：強制文字「塞一行」不准斷行 */
        text-align: center !important;  /* 文字置中 */
        line-height: 1.2 !important;    /* 縮小行距 */
        height: auto !important;        /* 讓高度自動縮小 */
        margin-right: 0 !important;     /* 移除右側間距，避免空間不足 */
        min-width: 0 !important;        /* 允許區塊縮到比文字還小(極端情況) */
        overflow: hidden !important;    /* 萬一真的超出範圍就隱藏，保持整齊 */
    }
}

/* --- 修正「看更多」按鈕文字垂直置中 --- */

/* 1. 設定按鈕內容容器為 Flex 模式 */
.hoha-btn-more .sppb-addon-content {
    display: flex !important;           /* 開啟 Flexbox */
    align-items: center !important;     /* 垂直方向置中 */
    justify-content: center !important; /* 水平方向置中 */
    height: 100%;                       /* 確保高度撐滿容器 */
}

/* 2. 修正 P 標籤的干擾樣式 */
.hoha-btn-more p {
    margin: 0 !important;               /* 移除導致文字偏上的預設下邊界 (最關鍵) */
    padding: 0 !important;
    text-align: center !important;      /* 覆蓋原本 HTML 裡的 justify 設定 */
    width: auto !important;
}

/* --- Footer 樣式與排版修正 --- */

/* 1. 隱藏 "Footer-sp" 標題 */
#Mod197 .module-title {
    display: none !important;
}

/* 2. 設定整個 Footer 區塊的背景 (統一漸層) */
/* 將漸層設在最外層，才不會因為分成兩個 Section 而有斷層 */
#t4-section-1 {
    background: linear-gradient(90deg, #153243 0%, #286370 100%) !important;
    padding-top: 50px;
    padding-bottom: 0px;
}

/* 確保內層背景透明，以免蓋住外層漸層 */
.hoha-footer, 
.hoha-footer-copyright,
.sp-page-builder .page-content #section-id-1765432160910,
.sp-page-builder .page-content #section-id-1765436332583 {
    background: transparent !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* 3. 調整欄位文字樣式 (白色標題與淺灰內文) */
.hoha-footer p {
    margin-bottom: 8px;
    color: #cccccc; /* 內文淺灰 */
    font-size: 15px;
    line-height: 1.8;
}

/* 修正標題樣式 (針對有底線的 span) */
.hoha-footer p span[style*="text-decoration: underline"] {
    text-decoration: none !important; /* 拿掉原本醜醜的底線 */
    color: #ffffff !important;        /* 標題白色 */
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 改用漂亮的下邊框 */
    padding-bottom: 8px;              /* 線條與文字的距離 */
    margin-bottom: 15px;              /* 標題與下方連結的距離 */
}

/* --- Footer 左側欄位 (Logo區) 強制置中修正 --- */

/* 1. 針對該欄位 ID 設定 Flexbox 置中 */
#column-id-1765432160926 {
    display: flex !important;
    flex-direction: column !important; /* 垂直排列 */
    align-items: center !important;    /* 水平置中 */
    text-align: center !important;     /* 確保文字也置中 */
}

/* 2. 修正社群圖示的排列 */
/* 讓圖示的容器 (P標籤) 使用 Flex 置中 */
#sppb-addon-wrapper-1765432160929 p {
    display: flex !important;
    justify-content: center !important; /* 內容置中 */
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. 調整圖示間距 (左右平衡) */
/* 原本只有右邊有間距會導致置中歪一邊，改成左右都有 */
#sppb-addon-wrapper-1765432160929 img {
    margin: 0 6px !important;       /* 左右各留 6px */
    float: none !important;         /* 移除浮動 */
    display: inline-block !important;
}

/* 4. 確保 Logo 容器也是置中 */
#sppb-addon-wrapper-1765432160927,
#sppb-addon-wrapper-1765432160927 .sppb-addon-single-image-container {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 5. 修正右側 Table 排版 (身心平衡力 / 影音學堂) */
/* 您的 HTML 用了 Table，這裡強制讓它對齊 */
.hoha-footer table {
    width: 100%;
}
.hoha-footer table td {
    vertical-align: top;    /* 內容靠上對齊 */
    padding-right: 15px;    /* 兩欄之間留白 */
    color: #cccccc;
}

/* 6. 搜尋框美化 */
.hoha-search-bar {
    display: flex;
    margin-top: 20px;
    max-width: 300px;
}
.hoha-search-bar input {
    border: none;
    padding: 8px 15px;
    width: 100%;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.hoha-search-bar button {
    background: linear-gradient(90deg, #4CB8C4, #9ACD32);
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 0 4px 4px 0;
    white-space: nowrap;
}

/* 7. 底部版權區 (分隔線與排版) */
.hoha-copyright-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* 淡淡的白色分隔線 */
    margin-top: 30px;
    padding-top: 20px;
    display: flex;
    justify-content:  center; /* 左右推開 */
    align-items: flex-end;
    color: #aaaaaa;
    font-size: 13px;
    width: 100%;
}

/* 手機版適應 */
@media (max-width: 768px) {
    .hoha-footer table td {
        display: block; /* 表格變成垂直排列 */
        width: 100%;
        margin-bottom: 20px;
    }
    .hoha-copyright-bar {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .hoha-copy-right {
        margin-top: 10px;
    }
}

/* --- 修正底部版權區左右貼邊問題 --- */
.hoha-copyright-bar {
    padding-left: 30px !important;      /* 左側留白 */
    padding-right: 30px !important;     /* 右側留白 */
    box-sizing: border-box !important;  /* 關鍵：確保留白不會把版面撐破 */
}

/* 手機版如果覺得留太多，可以稍微縮小一點，但還是保持距離 */
@media (max-width: 768px) {
    .hoha-copyright-bar {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* --- 修正首頁 icon 連結顏色 --- */
#sppb-addon-1655617594957 a {
    color: #333333 !important;        /* 改為深黑色 */
    text-decoration: none !important; /* 移除底線 */
}

/* (選用) 滑鼠移過去的效果 */
#sppb-addon-1655617594957 a:hover {
    color: #000000 !important;        /* 滑鼠移上去變純黑 */
    opacity: 0.8;                     /* 稍微變淡一點點 */
}

/* --- 修正內頁排版：限制寬度並置中 --- */

/* 1. 針對文章內容區塊設定最大寬度 */
.article-body {
    max-width: 1000px !important;   /* 設定最大寬度 (1000px 左右閱讀最舒適) */
    width: 92% !important;          /* 設定相對寬度，確保手機版左右有留白 (左右各4%) */
    margin-left: auto !important;   /* 左側自動填滿 -> 置中 */
    margin-right: auto !important;  /* 右側自動填滿 -> 置中 */
    display: block !important;      /* 確保區塊特性 */
}

/* 2. 確保圖片跟隨縮放，不會爆出去 */
.article-body img {
    max-width: 100% !important;     /* 圖片寬度不超過容器 */
    height: auto !important;        /* 高度等比縮放 */
}

/* 3. (選用) 增加文字行距，讓閱讀更像圖1那樣舒適 */
.article-body p {
    line-height: 1.8 !important;    /* 拉開行高，閱讀比較不擁擠 */
    margin-bottom: 20px !important; /* 段落間距 */
}

/* --- 修改「看更多」按鈕樣式 (仿照 HOHA 設計) --- */

/* 1. 設定按鈕基本外觀 */
.sppb-addon-articles .sppb-readmore {
    background-color: #ffffff !important;   /* 背景白色 */
    border: 1px solid #1eb4a6 !important;   /* 藍綠色邊框 (可依需求調整色碼) */
    color: #1eb4a6 !important;              /* 文字顏色同邊框 */
    border-radius: 50px !important;         /* 極大圓角，產生膠囊形狀 */
    
    padding: 6px 25px !important;           /* 內距：上下6px，左右25px (讓它變長) */
    font-size: 16px !important;             /* 文字大小 */
    letter-spacing: 1px !important;         /* 字元間距 */
    text-decoration: none !important;       /* 移除底線 */
    
    display: inline-block !important;       /* 區塊化以便設定寬高與位置 */
    margin-top: 15px !important;            /* 與上方文字保持距離 */
    float: right !important;                /* ★關鍵：強制靠右對齊 */
    transition: all 0.3s ease !important;   /* 增加滑鼠移過去的平滑動畫 */
}

/* 2. 滑鼠移上去的效果 (變成實心) */
.sppb-addon-articles .sppb-readmore:hover {
    background-color: #1eb4a6 !important;   /* 背景變藍綠色 */
    color: #ffffff !important;              /* 文字變白 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* 增加一點點陰影讓它浮起來 */
}

/* 3. 清除浮動 (防止靠右對齊後，版面高度塌陷) */
.sppb-article-info-wrap::after {
    content: "";
    display: table;
    clear: both;
}


/* --- 文章列表樣式優化 (V3: 區分單欄與雙欄排版) --- */

/* =========================================
   1. 全域樣式 (上下的 Tab 都會套用這些漂亮的設計)
   ========================================= */

/* 標題樣式 (左側橘色直線) */
.sppb-addon-article .sppb-article-info-wrap h3 {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.4;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    border-left: 5px solid #ea5b0c; /* 橘色線條 */
    padding-left: 15px;
}

.sppb-addon-article .sppb-article-info-wrap h3 a {
    color: #333;
    text-decoration: none;
}

/* 內文樣式 */
.sppb-article-introtext {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify; 
}

/* 「看更多」按鈕樣式 (膠囊狀) */
.sppb-addon-article .sppb-readmore {
    float: right;
    display: inline-block;
    padding: 8px 30px;
    background-color: #fff;
    color: #1eb4a6;
    border: 1px solid #1eb4a6;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s;
    margin-top: 10px;
}

.sppb-addon-article .sppb-readmore:hover {
    background-color: #1eb4a6;
    color: #fff;
}

/* 清除浮動 */
.sppb-article-info-wrap::after {
    content: "";
    display: block;
    clear: both;
}

/* 隱藏預設日期與分類 */
.sppb-article-meta {
    display: none; 
}

/* 圖片通用設定 */
.sppb-addon-article .sppb-article-img-wrap {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px; /* 手機版或下方小卡預設間距 */
}

.sppb-addon-article .sppb-article-img-wrap img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sppb-addon-article .sppb-article-img-wrap:hover img {
    transform: scale(1.05); /* 滑鼠移過去稍微放大 */
}


/* =========================================
   2. ★ 電腦版專屬：針對「上方大圖」做特殊處理
   ========================================= */

/* 關鍵邏輯：
   我們只針對包在 .sppb-col-sm-12 (全寬欄位) 裡面的文章
   執行「左右排版」和「圖片增高」。
   下方的兩欄式 (col-sm-6) 不會被選到，所以會維持上下堆疊。
*/

@media (min-width: 992px) {
    
    /* 鎖定全寬欄位 (.sppb-col-sm-12) 內的文章 */
    .sppb-col-sm-12 .sppb-addon-article {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
        margin-top: 40px !important;
    }

    /* 左側圖片區塊 (只針對全寬版) */
    .sppb-col-sm-12 .sppb-addon-article .sppb-article-img-wrap {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 0;
    }

    /* 圖片高度強制設定 (只針對全寬版) */
    .sppb-col-sm-12 .sppb-addon-article .sppb-article-img-wrap img {
        height: 450px !important;     
        object-fit: cover !important; 
    }

    /* 右側文字區塊 (只針對全寬版) */
    .sppb-col-sm-12 .sppb-addon-article .sppb-article-info-wrap {
        flex: 1;
        padding-top: 10px;
    }
}

/* --- 修正文章內頁主圖置中 --- */
.item-page figure.item-image {
    float: none !important;        /* 取消原本的向左浮動 */
    display: block !important;     /* 設定為區塊元素 */
    margin: 0 auto 30px auto !important; /* 上0, 左右自動(即置中), 下30px(留白) */
    text-align: center !important; /* 內容置中 */
    width: 100% !important;        /* 容器佔滿寬度 */
}

/* 確保圖片本身不會跑版 */
.item-page figure.item-image img {
    max-width: 100% !important;    /* 限制最大寬度 */
    height: auto !important;       /* 高度自動 */
    display: inline-block !important;
}

/* --- 修正 Tab 內兩欄式文章的對齊問題 --- */

/* 1. 強制統一「圖片區」高度 */
/* 鎖定 Tab 內容區 (.sppb-tab-content) 裡面的兩欄式 (.sppb-col-sm-6) */
.sppb-tab-content .sppb-col-sm-6 .sppb-article-img-wrap img {
    height: 350px !important;       /* 設定固定高度 */
    object-fit: cover !important;   /* 讓圖片自動裁切填滿，不會變形 */
    width: 100% !important;
}

/* 2. 強制統一「標題區」高度 */
/* 設定最小高度，讓一行字的標題也佔用兩行的高度，才不會讓下面內容往上跑 */
.sppb-tab-content .sppb-col-sm-6 .sppb-addon-article h3 {
    min-height: 80px !important;    /* 預留約兩行標題的高度空間 */
    display: flex !important;       /* 使用 Flex 排版 */
    align-items: flex-start !important; /* 文字靠上對齊 */
    margin-top: 15px !important;    /* 標題與圖片的間距 */
    margin-bottom: 15px !important; /* 標題與內文的間距 */
}

/* (選用) 3. 統一「內文區」高度 */
/* 如果您希望最下方的「看更多」按鈕也絕對水平對齊，請加入這段 */
.sppb-tab-content .sppb-col-sm-6 .sppb-article-introtext {
    height: 200px !important;       /* 設定內文固定高度 */
    overflow: hidden !important;    /* 超出高度的文字隱藏 */
}