/* product */
  #product-container {
    display: flex;
    gap: 1rem;
    padding: 30px;
    background-color: #f9f9f9;
  }

  #category-list {
    padding: 20px 0 0 0;
    display: flex;
    background-color: #f9f9f9;
  }

  #category-list a {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: #808080;
    border-bottom: 2px solid #808080;
  }

  #category-list a:hover {
    color: #0F1035;
    border-bottom: 2px solid #808080;
    transition: border-bottom color 0.3s ease;
  }

  #category-list a.active {
    color: #0F1035;
    font-weight: bold;
    border-bottom: 2px solid #0F1035;
  }

  #pdf-link {
    display: flex;
    background-color: #f9f9f9;
  }

  #pdf-link a {
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: bold;
    color: #0F1035;
  }

  #pdf-link a:hover {
    color: #365486;
    transition: color 0.3s ease;
  }


  .product-list {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .product-item {
    background-color: #f9f9f9;
    border-radius: 10px;
  }

  .product-image {
    width: 150px;
    /* 設定寬度 */
    height: 150px;
    /* 設定高度 */
    background: #ccc;
    /* 背景顏色 */
    overflow: cover;
    /* 隱藏超出範圍的部分 */
  }

  .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持比例並裁切圖片以填滿區域 */
  }

  .product-info h3 {
    font-size: 1.2rem;
  }

  .product-info a {
    text-decoration: none;
    color: #000d4b;
    font-weight: bold;
  }

  .product-info a:hover {
    text-decoration: underline;
  }


  .custom-btn {
    background-color: #365486;
    color: white;
    font-size: 1.25rem;
    padding: 10px 40px;
    border-radius: 50px;
    transition: background-color 0.3s ease;
  }

  .custom-btn:hover {
    background-color: #0F1035;
    /* 懸停時背景顏色 */
    color: #ffffff;
    /* 懸停時文字顏色 */
  }


  /* 分頁樣式 */
  .pagination {
    text-align: center;
    margin-top: 20px;
  }


  .pagination a.active {
    background-color: #0F1035;
  }

  .li.page-item.active {
    background-color: #7FC7D9;
  }

  .pagination .page-item .page-link {
    background-color: #f8f9fa;
    /* 修改背景顏色 (淡灰色) */
    border-color: #dee2e6;
    /* 修改邊框顏色 */
    color: #333;
    /* 修改文字顏色 */
  }

  .pagination .page-item .page-link:hover {
    background-color: #e9ecef;
    /* 滑鼠懸停時的背景顏色 */
    border-color: #ced4da;
    color: #000;
  }


  .pagination .page-item.active .page-link {
    background-color: #0F1035 !important;
    /* 修改背景顏色 (例如橘紅色) */
    border-color: #0F1035 !important;
    /* 修改邊框顏色 */
    color: #f9f9f9 !important;
    /* 文字顏色 (確保可讀性) */
  }



  @media (max-width: 1200px) {
    .product-list {
      flex: 3;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    #category-list a {
      text-decoration: none;
      font-size: 1.5rem;
      font-weight: bold;
      color: #808080;
      border-bottom: 2px solid #808080;
    }
  }

  @media (max-width: 992px) {
    .category-title {
      display: flex;
      align-items: center;
      gap: 1rem;
      border-bottom: 3px solid #0F1035;
      margin-bottom: 0.5rem;
    }
  }

  @media (max-width: 576px) {
    .product-image {
      width: 80px;
      /* 設定寬度 */
      height: 80px;
      /* 設定高度 */
      background: #ccc;
      /* 背景顏色 */
      overflow: cover;
      /* 隱藏超出範圍的部分 */
    }

    .product-info h3 {
      font-size: 1.2rem;
    }

    .product-info a {
      font-size: 0.8rem;
    }

    #category-list a {
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      font-size: 1rem;
    }

    #pdf-link a {
      text-decoration: none;
      font-size: 1rem;
      font-weight: bold;
      color: #0F1035;
    }
  }

  @media (max-width: 375px) {
    .product-image {
      width: 50px;
      /* 設定寬度 */
      height: 50px;
      /* 設定高度 */
      background: #ccc;
      /* 背景顏色 */
      overflow: cover;
      /* 隱藏超出範圍的部分 */
    }

    .card-body {
      padding: 5px;

    }

    .product-info h3 {
      font-size: 1rem;
      margin-bottom: 2px;
    }

    .product-info a {
      font-size: 0.8rem;
    }

    #category-list a {
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      font-size: 1rem;
    }
  }