/* Blog 分類卡片標題強化 */
.blogpaindexar{
font-size:1.3rem!important;
font-weight:bold!important;
}

.blogpage-sidebar .blog-class-block h5 {
  border-bottom: 2px solid var(--theme-color-0);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  font-weight: bold;
}
.ppblog-clask{
  border-bottom: 2px solid var(--theme-color-3);
  padding-bottom: 0.6rem;
  margin-bottom: 1.45rem;
  font-weight: bold;
}

/* 分類清單樣式 */
.blogpage-sidebar .blog-class-block ul li {
  position: relative;
  padding: 0.4rem 0.5rem 0.4rem 1.5rem;
  transition: background 0.2s ease, padding-left 0.2s ease;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.95rem;
}

/* hover 效果 */
.blogpage-sidebar .blog-class-block ul li:hover {
  background-color: var(--block-bg-light);
  padding-left: 1.8rem;
}

/* 小圖標設計 */
.blogpage-sidebar .blog-class-block ul li i {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  color: var(--theme-color-0);
  transition: transform 0.2s ease;
}

/* hover icon 放大一點 */
.blogpage-sidebar .blog-class-block ul li:hover i {
  transform: scale(1.15);
}

/* 文字連結統一樣式 */
.blogpage-sidebar .blog-class-block ul li a {
  color: var(--font-color);
  text-decoration: none;
  display: inline-block;
  width: 100%;
}

.blogpage-product-title {
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--heading-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--theme-color-0);
}

.blogpage-product-card {
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  background-color: var(--bg-white);
  margin-bottom: 1.5rem;
  transition: all 0.2s ease;
}

.blogpage-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

.blogpage-product-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.blogpage-product-price-bar {
  background-color: var(--block-bg-light);
  font-size: 0.9rem;
  border-top: 1px solid var(--card-border);
}

.blogpage-product-info {
  border-top: 1px solid var(--card-border);
}

.blogpage-product-name {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.blogpage-product-desc {
  font-size: 0.875rem;
  color: var(--font-color-3);
  line-height: 1.4;
}
.blogpage-tag-link {
  display: inline-block;
  font-size: 1rem;
  padding: 0.4em 0.5em;
  border-radius: 8rem; /* 圓角 pill 樣式 */
  border: 1px solid var(--card-border);
  color: var(--font-color-2);
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.blogpage-tag-link:hover {
  background-color:var(--theme-color-2); /* 金色微底 */
  border-color: var(--theme-color-4);
  color: var(--theme-color-0);
}

/* ✅ 卡片本體滑過效果 */
.article-card-hover {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.article-card-hover:hover {
  background-color: #f9f9f9;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

/* ✅ 標題滑過變色（使用主色） */
.article-card-hover a .card-title {
  transition: color 0.3s ease;
}
.article-card-hover:hover a .card-title {
  color: #c62828; /* 或 var(--bs-danger) */
}

/* ✅ 文字過渡（輕微提亮） */
.article-card-hover p,
.article-card-hover .badge {
  transition: color 0.3s ease, background-color 0.3s ease;
}
.article-card-hover:hover p.card-text {
  color: #333;
}
.article-card-hover:hover .badge {
  background-color: #f0f0f0;
  color: #000;
}

.blogpage-article-summary {
  font-size: 1.05rem;
  color: var(--font-color-2);
  background-color: var(--block-bg-light);
  border-left: 4px solid var(--theme-color-0);
}

.blogpage-article-content {
  font-size: 1.05rem;
  color: var(--font-color);
  line-height: 1.75;
}

.blogpage-article-content a {
  font-size: 1.05rem;
  color: var(--bs-indigo);
  line-height: 1.75;
}
.blogpage-article-content a:hover {
  font-size: 1.05rem;
  color: var(--bs-green);
  line-height: 1.75;
}


/* 層級標題定義 */
.blogpage-article-content h2 {
  font-size: 1.6rem;
  color: var(--heading-color);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  border-bottom: 2px solid var(--theme-color-0);
  padding-bottom: 0.5rem;
}

.blogpage-article-content h3 {
  font-size: 1.25rem;
  margin-top: 1.8rem;
  margin-bottom: 0.75rem;
  color: var(--heading-color);
  font-weight: 600;
}

.blogpage-article-content ul {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.blogpage-article-content ul li {
  list-style: disc;
  margin-bottom: 0.4rem;
  color: var(--font-color-3);
}

.blogpage-article-content blockquote {
  font-style: italic;
  color: var(--font-color-4);
  border-left: 4px solid var(--theme-color-0);
  background-color: #fdf9f2;
  padding: 1rem 1.25rem;
  border-radius: var(--card-radius);
}

.blogpage-article-title {
  font-weight: bold;
  font-size: 1.9rem;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.blogpage-article-meta {
  font-size: 0.9rem;
  color: var(--font-color-4);
}

.blogpage-article-summary {
  font-size: 1.05rem;
  color: var(--font-color-2);
  background-color: var(--block-bg-light);
  border-left: 4px solid var(--theme-color-0);
  border-radius: var(--card-radius);
}

/* 正文層級 */
.blogpage-article-content h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 900;
  border-bottom: 2px solid var(--theme-color-0);
  padding-bottom: 0.5rem;
}

.blogpage-article-content h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 800;
}
.blogpage-article-content h4 {
  font-size: 1.15rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}
.blogpage-article-content h5 {
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.blogpage-article-content p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--font-color);
  margin-bottom: 1.2rem;
}

.blogpage-article-content ul {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.blogpage-article-content li {
  margin-bottom: 0.4rem;
  color: var(--font-color-3);
}

.blogpage-article-content blockquote {
  font-style: italic;
  color: var(--font-color-4);
  background-color: #fdf9f2;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--theme-color-0);
  border-radius: var(--card-radius);
}
.blogpage-author-avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px solid var(--card-border);
}
.blogpage-article-meta span {
  font-size: 0.92rem;
  color: var(--font-color-4);
}

.blogpage-article-meta a:hover {
  color: var(--theme-color-0);
}

.blogpage-article-meta .badge {
  font-size: 0.85rem;
  padding: 0.35em 0.7em;
  border-radius: 50rem;
}
.blogpage-category-card {
  transition: all 0.2s ease;
}

.blogpage-category-card:hover {
  background-color: var(--block-bg-light);
  border-left: 4px solid var(--theme-color-0);
}

.blogpage-userneed-box:hover {
  background-color: #fff8e6;
}
.blogpage-topic-tags {
  margin-top: 1.5rem;
}

.blogpage-topic-box {
  transition: all 0.2s ease;
}

.blogpage-topic-box:hover {
  background-color: var(--block-bg-light);
  transform: translateY(-1px);
  box-shadow: var(--card-shadow);
}
.blogpage-help-title {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--heading-color);
  border-bottom: 2px solid var(--theme-color-0);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.blogpage-help-body h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  font-weight: bold;
  color: var(--heading-color);
}

.blogpage-help-body p,
.blogpage-help-body li {
  font-size: 1.05rem;
  color: var(--font-color);
  line-height: 1.7;
}

.blogpage-help-nav li a:hover {
  color: var(--theme-color-0);
  background-color: var(--block-bg-light);
  padding-left: 1.25rem;
  transition: all 0.2s ease;
}
.helpcenter-card {
  border-left: 5px solid var(--theme-color-0);
  transition: all 0.2s ease;
}

.helpcenter-card:hover {
  background-color: var(--block-bg-light);
  border-left-color: var(--theme-color-5);
}

.helpcenter-subitem {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  color: var(--font-color);
  text-decoration: none;
}

.helpcenter-subitem:hover {
  color: var(--theme-color-0);
  padding-left: 6px;
}
.text-theme { color: var(--theme-color-0); }
.help-category-card {
  border-left: 5px solid var(--theme-color-0);
}
.help-subcat-list {
  list-style: none;
  padding-left: 0;
  margin: 0.3rem 0 1rem;
}
.help-subcat-list li a {
  display: block;
  padding: 6px 10px;
  color: var(--font-color-2);
  border-radius: 6px;
  transition: all 0.2s ease;
}
.help-subcat-list li a:hover {
  background-color: var(--block-bg-light);
  color: var(--theme-color-0);
}

.help-article-list {
  list-style: none;
  padding-left: 0;
}
.help-article-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}
.help-article-list li a {
  color: var(--font-color-2);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.help-article-list li a:hover {
  color: var(--theme-color-0);
  padding-left: 4px;
}
.help-mainblock {
  border-left: 4px solid var(--theme-color-1);
  box-shadow: var(--card-shadow);
}
.help-mainblock .text-theme {
  color: var(--theme-color-0);
}
.border-warning { border-color: var(--theme-color-5) !important; }
.border-pink { border-color: var(--theme-color-4) !important; }
.border-info { border-color: var(--theme-color-1) !important; }

.help-article-list li a {
  color: var(--font-color-2);
  transition: 0.2s;
}
.help-article-list li a:hover {
  color: var(--theme-color-0);
  text-decoration: underline;
}
.help-sidebar {
  border: 1px solid var(--card-border);
  background: var(--bg-white);
}

.help-sidebar .sidebar-title {
  font-weight: bold;
  color: var(--font-color-1);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.help-sidebar .sidebar-title::before {
  content: "⟡";
  color: var(--theme-color-5);
  margin-right: 0.5rem;
}

.sub-link {
  display: block;
  padding: 6px 0;
  font-size: 0.95rem;
  color: var(--font-color-3);
  transition: 0.2s;
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
}

.sub-link:hover {
  color: var(--theme-color-0);
  border-left: 2px solid var(--theme-color-0);
  background-color: #f9f9f9;
}
.text-theme {
  color: var(--theme-color-7); /* 紫羅蘭或品牌色 */
}
.help-category-block li:hover {
  color: var(--theme-color-0);
  cursor: pointer;
}
  .help-sidebar {
      border-left: 4px solid var(--theme-color-7);
      background: #fff;
    }

    .sidebar-title {
      font-weight: 600;
      color: var(--theme-color-7);
      font-size: 16px;
      margin-bottom: 6px;
    }

    .sub-link {
      display: block;
      padding: 4px 0;
      font-size: 14px;
      color: #333;
      text-decoration: none;
      position: relative;
      padding-left: 16px;
    }

    .sub-link::before {
      content: "›";
      position: absolute;
      left: 0;
      top: 2px;
      color: #aaa;
      font-size: 12px;
    }

    .sub-link:hover {
      color: var(--theme-color-7);
    }

    .help-mainblock {
      transition: box-shadow 0.3s;
    }

    .help-mainblock:hover {
      box-shadow: 0 0 10px rgba(0,0,0,0.06);
    }

    @media (max-width: 991px) {
      .help-sidebar {
        display: none;
      }

      #mobile-help-accordion {
        display: block;
      }
    }

    @media (min-width: 992px) {
      #mobile-help-accordion {
        display: none;
      }
    }

.about-sidebar {
  border: 1px solid #eee;
}
.about-sidebar .sidebar-title {
  font-weight: 600;
  color: #333;
  border-bottom: 1px dashed #ddd;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
}
.about-sidebar .sub-link {
  display: block;
  padding: 6px 0;
  color: #555;
  font-size: 0.95rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  padding-left: 0.8rem;
}
.about-sidebar .sub-link:hover {
  color: #0d6efd;
  border-left: 3px solid #0d6efd;
  background-color: #f8f9fa;
}

.about-mainblock {
  transition: box-shadow 0.2s;
}
.about-mainblock:hover {
  box-shadow: 0 0 0.8rem rgba(0,0,0,0.06);
}
.about-article-list a {
  text-decoration: none;
  font-size: 0.96rem;
  color: #444;
}
.about-article-list a:hover {
  color: #0d6efd;
}
:root {
      --theme-color: #7e57c2;
      --light-bg: #f8f9fa;
    }
    .text-theme { color: var(--theme-color); }
    .bg-theme { background-color: var(--theme-color); color: #fff; }
    .about-sidebar .sidebar-title {
      font-weight: bold;
      margin-bottom: 0.25rem;
      padding-left: 0.5rem;
      border-left: 4px solid var(--theme-color);
    }
    .about-sidebar ul li a {
      color: #555;
      text-decoration: none;
      display: block;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
    }
    .about-sidebar ul li a:hover {
      background-color: var(--theme-color);
      color: #fff;
    }
    .about-section {
      margin-bottom: 3rem;
      padding: 2rem;
      border-radius: 0.5rem;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .about-section h4 {
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .about-section p {
      color: #555;
    }
    .about-section .icon {
      font-size: 2rem;
      margin-right: 1rem;
      color: var(--theme-color);
    }
    @media (max-width: 768px) {
      .about-sidebar { display: none; }
      .mobile-category-toggle {
        display: block;
        margin-bottom: 1rem;
      }
      .mobile-category-content {
        display: none;
        margin-bottom: 1rem;
      }
      .mobile-category-content.active {
        display: block;
      }
    }.help-sidebar-block .sidebar-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
  border-left: 4px solid var(--bs-secondary);
}

.help-sidebar-block .sub-link {
  color: #555;
  font-size: 0.95rem;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  padding-left: 1rem;
  position: relative;
}

.help-sidebar-block .sub-link:hover {
  color: #0d6efd;
  background: #f8f9fa;
  border-left: 3px solid #0d6efd;
}
 .about-sidebar .sidebar-title {
      font-weight: bold;
      font-size: 1rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    .about-sidebar .sub-link {
      display: block;
      padding: 3px 0 3px 1rem;
      font-size: 0.9rem;
      color: #555;
      text-decoration: none;
    }
    .about-sidebar .sub-link:hover {
      color: #0d6efd;
      text-decoration: underline;
    }
    .about-section {
      background: #fff;
    }

    /* 手機分類開關樣式 */
    .about-sidebar-toggle {
      display: none;
      cursor: pointer;
      margin-bottom: 1rem;
      font-weight: bold;
    }
    .about-sidebar-mobile {
      display: none;
    }
    .about-sidebar-mobile.active {
      display: block;
    }

    @media (max-width: 992px) {
      .about-sidebar {
        display: none;
      }
      .about-sidebar-toggle {
        display: block;
        font-size: 1rem;
        background-color: #ffffff;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 0.375rem;
      }
    }

/* 基礎樣式 */
    .yeseinfo-container { max-width: 1320px; }
    .yeseinfo-section { background-color: #fff; border-left: 4px solid #3f51b5; }
    .yeseinfo-title-icon { color: #3f51b5; }
    .yeseinfo-sidebar h5 { font-weight: bold; border-bottom: 2px solid #ddd; padding-bottom: 0.5rem; margin-bottom: 1rem; }
    .yeseinfo-sidebar .list-group-item { border: none; padding: 0.5rem 0; }
    .yeseinfo-sidebar .list-group-item:hover { color: #3f51b5; cursor: pointer; }

    /* 熱門問題樣式 */
    .yeseinfo-faq-card { background-color: #f8f9fa; border: 1px solid #e0e0e0; transition: all 0.3s ease; }
    .yeseinfo-faq-card:hover { border-color: #3f51b5; background-color: #f0f3ff; }

    /* 搜尋框 */
    .yeseinfo-search input { border-radius: 30px; padding-left: 2.5rem; }
    .yeseinfo-search .fa-search { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #999; }

    /* 響應式處理 */
    @media (max-width: 768px) {
      .yeseinfo-sidebar { margin-bottom: 2rem; }
    }

.yeseinfo-container { max-width: 1320px; }
.yeseinfo-section { background-color: #fff; border-left: 4px solid #3f51b5; }
.yeseinfo-title-icon { color: #3f51b5; }

.yeseinfo-sidebar h5 {
  font-weight: bold;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.yeseinfo-sidebar .list-group-item {
  border: none;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.yeseinfo-sidebar .list-group-item:hover,
.yeseinfo-sidebar .list-group-item.active {
  color: #3f51b5;
  font-weight: bold;
}

/* 熱門問題樣式 */
.yeseinfo-faq-card {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}
.yeseinfo-faq-card:hover {
  border-color: #3f51b5;
  background-color: #f0f3ff;
}

/* 搜尋框 */
.yeseinfo-search input {
  border-radius: 30px;
  padding-left: 2.5rem;
}
.yeseinfo-search .fa-search {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

/* 展開內容區塊 */
.yeseinfo-card-expand .card-title {
  font-size: 1.125rem;
}
.yeseinfo-card-expand img {
  max-height: 180px;
  object-fit: cover;
}

/* 響應式處理 */
@media (max-width: 768px) {
  .yeseinfo-sidebar { margin-bottom: 2rem; }
  .yeseinfo-card-expand img { max-height: 140px; }
}
 
.yeseinfo-card-expand {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border-left: 4px solid #3f51b5;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.yeseinfo-container { max-width: 1320px; }

.yeseinfo-section {
  background-color: #fff;
  border-left: 4px solid #3f51b5;
}

.yeseinfo-title-icon { color: #3f51b5; }

.yeseinfo-sidebar .list-group-item {
  cursor: pointer;
  border: none;
  padding: 0.75rem 1rem;
  transition: background 0.2s;
}

.yeseinfo-sidebar .list-group-item:hover,
.yeseinfo-sidebar .list-group-item.active {
  background-color: #e3f2fd;
  color: #1565c0;
}

.yeseinfo-card-expand {
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border-left: 4px solid #3f51b5;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.custom-hover {
  color: #212529;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.custom-hover:hover {
  color: #d63384; /* 或其他 Bootstrap 主題色 */
}