/*------ 永續經營 - 手風琴樣式 ------*/

/* 手風琴容器 */
.sus_accordion-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 25px 0;
}

/* 手風琴單項 */
.sus_accordion {
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid #d8e0e8;
  overflow: hidden;
  transition: all 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease; /* 添加邊框與陰影動畫 */
}

/* 展開時的陰影與邊框效果 */
.sus_accordion:not(.collapsed) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* 更強的陰影 */
  transform: translateY(-2px);
  border-color: #277b27; /* 展開時邊框變為品牌綠色 */
}

/* 手風琴標題 */
.sus_accordion-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 18px 24px;
  background: linear-gradient(to right, #ffffff, #f8fafc);
  transition: background 0.3s ease, transform 0.2s ease;
}

/* 標題滑鼠懸停效果 */
.sus_accordion-header:hover {
  background: linear-gradient(to right, #f0f4f8, #e8eef3);
  transform: scale(1.01);
}

/* 標題點擊效果 */
.sus_accordion-header:active {
  transform: scale(0.99);
}

/* 圖標樣式 */
.sus_accordion-icon-img {
  width: 64px;
  height: 64px;
  margin-right: 18px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  transition: transform 0.4s ease; /* 添加圖標動畫 */
}

/* 展開時圖標縮放與旋轉 */
.sus_accordion:not(.collapsed) .sus_accordion-icon-img {
  transform: scale(1.1) rotate(5deg); /* 放大並輕微旋轉 */
}

/* 標題文字 */
.sus_accordion-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a3c34;
  letter-spacing: 0.5px;
  transition: color 0.3s ease; /* 添加文字顏色動畫 */
}

/* 展開時標題文字顏色 */
.sus_accordion:not(.collapsed) .sus_accordion-title {
  color: #277b27; /* 展開時文字變為品牌綠色 */
}

/* 展開/收合圖標 */
.sus_accordion-toggle-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-left: auto;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.sus_accordion-toggle-icon .bar {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #4a6b66;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.sus_accordion-toggle-icon .bar1 {
  width: 18px;
  height: 3px;
  transform: translate(-50%, -50%) rotate(0deg);
}

.sus_accordion-toggle-icon .bar2 {
  width: 3px;
  height: 18px;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 展開時圖標變化 */
.sus_accordion:not(.collapsed) .sus_accordion-toggle-icon .bar2 {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.sus_accordion:not(.collapsed) .sus_accordion-toggle-icon .bar1 {
  background: #277b27;
  transform: translate(-50%, -50%) rotate(0deg);
}

.sus_accordion.collapsed .sus_accordion-toggle-icon .bar2 {
  opacity: 1;
}

/* 手風琴內容 */
.sus_accordion-content {
  background: #fafcff;
  padding: 20px 24px;
  border-top: 1px solid #e0e8ef;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px); /* 初始向上偏移 */
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease; /* 添加 transform 動畫 */
}

/* 展開時內容顯示 */
.sus_accordion:not(.collapsed) .sus_accordion-content {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0); /* 滑入到正常位置 */
}

/* 內容文字 */
.sus_accordion-inner {
  font-size: 1.05rem;
  color: #2f4b47;
  line-height: 1.7;
  letter-spacing: 0.3px;
}
/* --------------------------------------------------
   Responsive tables for sus_accordion-inner
   Source: moved from sus_stakeholder.php inline style
-------------------------------------------------- */
.sus_accordion-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sus_accordion-inner table {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
  table-layout: auto;
}
.sus_accordion-inner th,
.sus_accordion-inner td {
  white-space: normal;
  word-break: break-word;
  padding: 0.5rem;
}
@media (max-width: 540px) {
  .sus_accordion-inner table {
    font-size: 14px;
  }
  .sus_accordion-inner th,
  .sus_accordion-inner td {
    padding: 0.35rem 0.45rem;
  }
}

/* 創意 li 符號樣式：品牌綠色圓點+陰影 */
.sus_accordion-inner ul {
  padding-left: 1.5em;
  margin: 0;
}
.sus_accordion-inner ul li {
  position: relative;
  margin-bottom: 0.7em;
  padding-left: 1.1em;
  list-style: none;
}
.sus_accordion-inner ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6em;
  height: 0.6em;
  background: #277b27;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(39,123,39,0.18);
  transform: translateY(-50%);
  transition: background 0.3s;
}
.sus_accordion-inner ul li:hover::before {
  background: #43b143;
}

/* sus_accordion-inner table 樣式 */
.sus_accordion-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(39,123,39,0.06);
  font-size: 1rem;
}

.sus_accordion-inner th,
.sus_accordion-inner td {
  padding: 12px 14px;
  border-bottom: 1px solid #e0e8ef;
  text-align: left;
  vertical-align: top;
}

.sus_accordion-inner th {
  background: #f3f8f3;
  color: #277b27;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.5px;
  text-align: center;
  width: 40%;
}

/* -----------------------------
   簽名檔樣式 sus_signature
   - 桌機：靠右對齊，段落在上、簽名圖在下
   - 行動：置中顯示
   ----------------------------- */
.sus_signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 靠右 */
  gap: 8px;
  margin-top: 18px;
}
.sus_signature p {
  margin: 0 20px 0 0;
  font-weight: 700;
  color: #164033;
  width: 100%;
  text-align: right; /* 桌機文字靠右 */
}
.sus_signature img {
  display: block;
  max-width: 200px; /* 桌機：增加簽名圖最大寬度 */
  height: auto;
  margin-top: 6px;
}

/* 行動裝置：置中顯示，避免圖片超出版面 */
@media (max-width: 767px) {
  .sus_signature {
    align-items: center;
  }
  .sus_signature p {
    text-align: center;
  }
  .sus_signature img {
    max-width: 60%; /* 行動裝置：增加為 60% 以利視覺閱讀 */
  }
}

.sus_accordion-inner td {
  color: #2f4b47;
  background: #fafcff;
  width: 60%;

}

/** 獨立th可以使用其他顏色 **/
.sus_accordion-inner th.text-color-red {
  color: var(--secondary) !important;
  font-weight: 800 !important;
}


.sus_accordion-inner table {
  /* 讓 table 在小螢幕可橫向滑動 */
  display: block;
  width: 100%;
  overflow-x: auto;
}

.sus_accordion-inner table thead,
.sus_accordion-inner table tbody,
.sus_accordion-inner table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.sus_accordion-inner table th,
.sus_accordion-inner table td {
  word-break: break-word;
}

.sus_accordion-inner a:link{
  color: var(--secondary);
  text-decoration: none;
}

.sus_accordion-inner a:visited {
  color: var(--secondary);
}
.sus_accordion-inner a:hover {
  color: var(--darkBlack);
  text-decoration: underline;
}


/** 重大主題列表 比較圖 **/
.material-chart-wrap {
  width:100%;
  margin:0 auto 32px;
}

/* .check-icon 樣式 */
.check-icon,
.checkmark {
  color: #277b27;
  font-size: 1.3em;
  vertical-align: middle;
  margin-left: 2px;
  font-weight: bold;
  font-family: inherit;
  line-height: 1;
}

/* .circle-icon 樣式 */
.circle-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #e74c3c;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px;
}

/* .xmark-icon 樣式 */
.xmark-icon {
  color: #b0b0b0;
  font-size: 1.2em;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px;
  font-weight: bold;
  font-family: inherit;
  line-height: 1;
}

/** 表格備註文字～專用 **/
.page_remark {
  font-size: 0.9rem;
  margin: 30px auto 0 auto;
 
}

.page_remark a {
  color: var(--secondary);
  font-size: 0.9rem;
  margin: 30px auto 0 auto;
 
}

.sus_accordion-content > .page_remark a:link {
  font-size: 1.05rem;
  margin: 20px 0;
  color: var(--secondary);
  line-height: 1.6;
}

.sus_accordion-content > .page_remark a:hover {
  font-size: 1.05rem;
  margin: 20px 0;
  color: var(--darkBlack);
  line-height: 1.6;
}


/*******---- 麵包屑 -----*******/


/* 動畫效果 */
@keyframes fadeInAccordion {
  from {
    opacity: 0;
    transform: translateY(-15px); /* 更大偏移，增強滑入感 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 橫式立方塊區塊樣式 */
.horizontal-cube-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 36px 0 24px 0;
}
.horizontal-cube {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #e8f5e9 60%, #f8fafc 100%);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(39,123,39,0.08);
  padding: 22px 32px 22px 28px;
  min-height: 64px;
  position: relative;
  overflow: hidden;
  font-size: 1.13rem;
  font-weight: 500;
  color: #205c3b;
  opacity: 0;
  transform: translateX(-60px);
  animation: cubeSlideIn 0.9s cubic-bezier(.6,.2,.3,1.1) forwards;
}
.horizontal-cube:nth-child(2) {
  animation-delay: 0.18s;
}
.horizontal-cube:nth-child(3) {
  animation-delay: 0.36s;
}
.cube-text {
  flex: 1 1 auto;
  z-index: 2;
}
.cube-status-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 1.08em;
  font-weight: 700;
  color: #fff;
  margin-left: 28px;
  box-shadow: 0 2px 8px rgba(39,123,39,0.13);
  opacity: 0;
  transform: scale(0.7) translateX(30px);
  animation: circlePopIn 0.7s cubic-bezier(.7,.2,.3,1.1) forwards;
  animation-delay: 0.5s;
}
.horizontal-cube:nth-child(2) .cube-status-circle {
  animation-delay: 0.68s;
}
.horizontal-cube:nth-child(3) .cube-status-circle {
  animation-delay: 0.86s;
}
.cube-status-circle.success {
  background: linear-gradient(135deg, #43b143 60%, #277b27 100%);
}
.cube-status-circle.fail {
  background: linear-gradient(135deg, #e74c3c 60%, #b71c1c 100%);
}
.cube-status-circle.span {
  font-size: 1em;
  letter-spacing: 0.1em;
}
@keyframes cubeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes circlePopIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateX(30px);
  }
  60% {
    opacity: 1;
    transform: scale(1.13) translateX(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* ====== 舉報處理程序流程圖樣式 ====== */
/* 外層容器，橫向排列，手機直向排列 */
.report-flow-wrap {
  display: flex;
  align-items: stretch; /* 讓所有 step 等高 */
  justify-content: center;
  gap: 0;
  margin: 36px 0 32px 0;
  flex-wrap: wrap;
  position: relative;
  
}

/* 單一步驟區塊 */
.report-flow-step {
  background-color: blueviolet;
  /* background: linear-gradient(135deg, #f8fafc 70%, #e8f5e9 100%);*/
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(39,123,39,0.08);
  min-width: 220px;
  max-width: 320px;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 內容頂部對齊 */
  min-height: 280px; /* 桌機等高，可依實際內容調整 */
  height: 100%;
  align-items: flex-start;
  padding: 22px 20px 22px 18px;
  position: relative;
  z-index: 2;
  margin: 0 12px;
  transition: box-shadow 0.3s;
  
}

.report-flow-step:hover {
  box-shadow: 0 4px 20px rgba(39,123,39,0.18);
}

/* 步驟圓圈圖示 */
.report-flow-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #277b27 60%, #43b143 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  box-shadow: 0 2px 8px rgba(39,123,39,0.13);
  border: 3px solid #fff;
  position: relative;
  z-index: 3;
}

/* 步驟內容 */
.report-flow-content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 固定在頂部 */
  align-items: flex-start;
}

.report-flow-title {
  font-size: 1.13rem;
  font-weight: 700;
  color: #205c3b;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.report-flow-desc {
  font-size: 1rem;
  color: #2f4b47;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

/* 新增：步驟標題與圓圈同排 */
.report-flow-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.report-flow-header .report-flow-icon {
  margin-right: 12px;
  margin-bottom: 0;
}
.report-flow-header .report-flow-title {
  margin-bottom: 0;
}

/* 流程箭頭 */
.report-flow-arrow {
  width: 40px;
  height: 40px;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.report-flow-arrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border-right: 4px solid #277b27;
  border-bottom: 4px solid #277b27;
  border-radius: 0 0 8px 0;
  transform: rotate(-45deg);
  margin: 0 auto;
  background: transparent;
  opacity: 0.8;
}

/* 客戶申訴制度及回應專用：一排三個九格流程圖（調整間距，確保每排三個） */
.report-flow-wrap-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 32px;
  gap: 12px 8px; /* 減少間距，確保每排三個 */
}
.report-flow-wrap-3 .report-flow-step {
  flex: 1 1 calc(33.333% - 16px); /* 三欄，扣除gap */
  min-width: 180px;
  margin: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100px;
  padding: 8px 0 4px 0;
}
.report-flow-wrap-3 .report-flow-arrow {
  width: 28px;
  align-self: center;
  margin: 0 4px; /* 箭頭間距縮小 */
}
.report-flow-wrap-3 .report-flow-desc {
  font-size: 15px;
  color: #222;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 1200px) {
  .report-flow-wrap-3 .report-flow-step {
    min-width: 140px;
  }
}
@media (max-width: 992px) {
  .report-flow-wrap-3 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px 0;
  }
  .report-flow-wrap-3 .report-flow-step {
    min-width: 0;
    margin-bottom: 8px;
    min-height: 80px;
  }
  .report-flow-wrap-3 .report-flow-arrow {
    width: 100%;
    height: 16px;
    margin: 6px 0;
    
  }
}
@media (max-width: 600px) {
  .report-flow-wrap-3 {
    gap: 6px 0;
  }
  .report-flow-wrap-3 .report-flow-step {
    margin-bottom: 4px;
    min-height: 60px;
  }
  .report-flow-wrap-3 .report-flow-arrow {
    margin: 4px 0;
  }
  .signature-block {
    text-align: center;
}
.signature-block .signature {
    max-width: 120px;
}
}

/* 產品製程介紹專用：流程格圖片與文字置中（桌機與手機皆置於區塊中央） */
.product-process-flow-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px 8px;
}
.product-process-flow-wrap .report-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 16px 8px 12px 8px;
  margin-bottom: 12px;
  min-height: 140px;
  height: 100%;
}
.product-process-flow-wrap .report-flow-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-process-flow-wrap .report-flow-header img {
  display: block;
  margin: 0 auto 2px auto;
  max-width: 800px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  background: #e9ecef;
}
.product-process-flow-wrap .report-flow-desc {
  font-size: 1.2rem;
  color: #222;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 992px) {
  .product-process-flow-wrap {
    gap: 8px 0;
  }
  .product-process-flow-wrap .report-flow-step {
    margin-bottom: 8px;
    padding: 12px 4px 8px 4px;
    min-height: 100px;
  }
  .product-process-flow-wrap .report-flow-header img {
    max-width: 300px;
    margin: 10px 0 0 0;
  }
}

/***--- 共用背景底色 ----***/

.bg-color-green {
  background: linear-gradient(135deg, #f2f9ed 50%, #ffffff 100%);
  padding: 10px 0;
}

.bg-color-green td {
  background: linear-gradient(135deg, #f2f9ed 50%, #ffffff 100%);
  font-weight: 800;
}

.text-color-black {
  color:var(--darkBlack);
  font-weight: 800;
}

.text-color-red {
  color:var(--secondary);
  font-weight: 800;
}

/* 手機版 RWD：直向排列，箭頭向下 */
@media (max-width: 992px) {
  .report-flow-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .report-flow-step {
    flex: 1 1 100%;
    max-width: 100%;
    margin: 0 0 18px 0;
    min-width: 0;
    padding: 18px 14px 18px 12px;
    min-height: 0;
    height: auto;
  }
  .report-flow-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 1.1rem;
    margin-right: 12px;
  }
  .report-flow-title {
    font-size: 1.02rem;
    margin-bottom: 4px;
  }
  .report-flow-desc {
    font-size: 0.97rem;
  }
  .report-flow-arrow {
    width: 32px;
    height: 32px;
    margin: 0 auto 0 28px;
  }
  .report-flow-arrow::after {
    width: 22px;
    height: 22px;
    border-right: 3px solid #277b27;
    border-bottom: 3px solid #277b27;
    border-radius: 0 0 6px 0;
    transform: rotate(45deg); /* 向下箭頭 */
    margin: 0;
  }

  .sus_accordion-wrap {
    gap: 10px;
    margin: 10px 0;
  }

  .sus_accordion-header {
    padding: 14px 12px;
  }

  .sus_accordion-icon-img {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }

  .sus_accordion:not(.collapsed) .sus_accordion-icon-img {
    transform: scale(1.08) rotate(5deg); /* 手機版縮放稍小 */
  }

  .sus_accordion-title {
    font-size: 1.1rem;
  }

  .sus_accordion-content {
    padding: 14px 12px;
    max-height: 0;
    overflow-y: visible;
    overflow-x: visible;
    transform: translateY(-10px);
  }

  .sus_accordion:not(.collapsed) .sus_accordion-content {
    max-height: 2000px;
    transform: translateY(0);
  }

  .sus_accordion-inner {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* 創意 li 符號樣式：品牌綠色圓點+陰影 */
  .sus_accordion-inner ul {
    padding-left: 1.5em;
    margin: 0;
  }
  .sus_accordion-inner ul li {
    position: relative;
    margin-bottom: 0.7em;
    padding-left: 1.1em;
    list-style: none;
  }
  .sus_accordion-inner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.6em;
    height: 0.6em;
    background: #277b27;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(39,123,39,0.18);
    transform: translateY(-50%);
    transition: background 0.3s;
  }
  .sus_accordion-inner ul li:hover::before {
    background: #43b143;
  }

  .sus_accordion-toggle-icon {
    width: 24px;
    height: 24px;
  }

  .sus_accordion-toggle-icon .bar1 {
    width: 16px;
    height: 2.5px;
  }

  .sus_accordion-toggle-icon .bar2 {
    width: 2.5px;
    height: 16px;
  }

  /* 手風琴內容表格 RWD: 992px 以下 thead 轉為 data-label 標籤顯示，並隱藏 thead */
  .sus_accordion-inner thead {
    display: none !important;
  }

  /* 手風琴內容表格 RWD: 992px 以下 thead 轉為 data-label 標籤顯示 */
  .sus_accordion-inner table,
  .sus_accordion-inner thead,
  .sus_accordion-inner tbody,
  .sus_accordion-inner tr {
    display: block;
    width: 100%;
  }
  .sus_accordion-inner thead {
    display: none;
  }
  .sus_accordion-inner tr {
    margin-bottom: 18px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(39,123,39,0.07);
    background: #fff;
    border: 1px solid #e0e8ef;
    padding: 8px 0;
  }
  .sus_accordion-inner td, .sus_accordion-inner th {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #e0e8ef;
    position: relative;
    background: #fafcff;
  }
  .sus_accordion-inner tr:last-child td,
  .sus_accordion-inner tr:last-child th {
    border-bottom: none;
  }
  .sus_accordion-inner td:before, .sus_accordion-inner th:before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 700;
    color: #277b27;
    padding-right: 10px;
    text-align: left;
    display: block;
    font-size: 0.98em;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
  .sus_accordion-inner td, .sus_accordion-inner th {
    font-size: 0.97em;
    color: #2f4b47;
  }

  /* 992px 以下 table 轉為上下堆疊卡片式 */
  .sus_accordion-inner table,
  .sus_accordion-inner thead,
  .sus_accordion-inner tbody,
  .sus_accordion-inner tr {
    display: block;
    width: 100%;
  }
  .sus_accordion-inner thead {
    display: none;
  }
  .sus_accordion-inner tr {
    margin-bottom: 18px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(39,123,39,0.07);
    background: #fff;
    border: 1px solid #e0e8ef;
    padding: 8px 0;
  }
  .sus_accordion-inner td {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #e0e8ef;
    position: relative;
    background: #fafcff;
  }
  .sus_accordion-inner tr:last-child td {
    border-bottom: none;
  }
  .sus_accordion-inner td:before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 700;
    color: #277b27;
    padding-right: 10px;
    text-align: left;
    display: block;
    font-size: 0.98em;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
  .sus_accordion-inner td {
    font-size: 0.97em;
    color: #2f4b47;
  }
  .sus_accordion-inner th {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    text-align: center;
    background: #f3f8f3;
    color: #277b27;
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 1px solid #e0e8ef;
    box-sizing: border-box;
  }

  .horizontal-cube-list {
    gap: 14px;
    margin: 22px 0 16px 0;
  }
  .horizontal-cube {
    font-size: 1rem;
    padding: 16px 14px 16px 14px;
    min-height: 44px;
  }
  .cube-status-circle {
    width: 38px;
    height: 38px;
    font-size: 0.92em;
    margin-left: 14px;
  }
  .cube-status-circle span {
    font-size: 0.98em;
    letter-spacing: 0.08em;
  }

  #patentBarChart {
    max-width: 100% !important;
    height: 220px !important;
    /* 增加高度以利手機閱讀 */
    display: block;
    margin: 0 auto;
  }

  .customer-survey-stats-bar-chart {
    flex-direction: column;
    gap: 18px 0;
  }
  .bar-chart-group {
    max-width: 100%;
    min-width: 0;
    padding: 18px 12px 14px 12px;
  }
  .bar-chart-bars {
    gap: 48px; /* 手機版間距加大為桌機2倍 */
    height: 120px;
  }
  .bar-chart-bar {
    width: 96px; /* 手機版寬度再加1倍 */
    min-width: 72px;
  }
  .bar-label {
    font-size: 0.92em;
    bottom: -22px;
  }
}



/* RWD: 手機版 table 橫向滑動 */
@media (max-width: 768px) {
  .sus_accordion-inner table {
    font-size: 0.97rem;
    min-width: 420px;
    /* 讓 table 可橫向滑動 */
    overflow-x: auto;
    padding: 10px;
  }
  .sus_accordion-inner th,
  .sus_accordion-inner td {
    padding: 15px 8px;
  }

  .cube-status-circle {
    width: 32px;
    height: 32px;
    font-size: 0.92em;
    margin-left: 10px;
  }
  .cube-status-circle span {
    font-size: 0.95em;
  }
}

/* ====== 資通安全四大防護層面區塊 ====== */
.itsec-protect-wrap {
  width: 100%;
  margin: 36px 0 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.itsec-protect-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  width: 100%;
  margin-bottom: 0;
}
.itsec-protect-row {
  /* allow items to wrap to next line on narrower viewports */
  flex-wrap: wrap;
  box-sizing: border-box;
}
.itsec-protect-box {
  background: linear-gradient(135deg, #e8f5e9 60%, #f8fafc 100%);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(39,123,39,0.08);
  padding: 32px 28px 28px 28px;
  min-width: 200px;
  max-width: 420px;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  /* 改為頂端對齊，避免子項垂直置中導致在高度受限時內容被截斷 */
  align-items: flex-start;
  margin: 18px 0;
  /* 讓盒子高度可依內容伸縮；如需最小高度可在設計時再放回 */
  min-height: 0;
  height: auto;
  border: 1.5px solid #d8e0e8;
  transition: box-shadow 0.3s;
}
.itsec-protect-box:hover {
  box-shadow: 0 6px 24px rgba(39,123,39,0.18);
}
.itsec-protect-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #277b27;
  margin-bottom: 16px;
  letter-spacing: 1px;
  text-align: center;
}
.itsec-protect-desc {
  font-size: 1.02rem;
  color: #222;
  line-height: 1.7;
  text-align: center;
  letter-spacing: 0.2px;
  font-weight: 500;
  background: #fff;
  border-radius: 10px;
  padding: 18px 12px 14px 12px;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 1px 6px rgba(39,123,39,0.06);
  /* ensure desc respects box padding and breaks long words */
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

.itsec-protect-desc li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 8px;
  list-style: none;
  text-align: left;
}
.itsec-protect-desc li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.6em;
  height: 0.6em;
  background: var(--grassGreen); /* 綠色實心 */
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(39,123,39,0.18);
  transform: translateY(-50%);
}

.itsec-protect-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: -38px 0 0 0;
  z-index: 2;
}
.itsec-protect-circle {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #43b143 60%, #277b27 100%);
  color: #fff;
  font-size: 1.28rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(39,123,39,0.18);
  border: 7px solid #fff;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  z-index: 3;
  margin-bottom: -48px;
  margin-top: -48px;
  transition: width 0.3s, height 0.3s, font-size 0.3s, border-width 0.3s;
}

/* 手機版 RWD：由上而下排列，圓形在中間 */
@media (max-width: 992px) {
  .itsec-protect-wrap {
    margin: 18px 0 18px 0;
  }
  .itsec-protect-row {
    flex-direction: column;
    gap: 0;
    align-items: center;
    margin-bottom: 0;
  }
  .itsec-protect-box {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 10px 0;
    padding: 22px 12px 18px 12px;
    min-height: 0;
  }
  .itsec-protect-title {
    font-size: 1.08rem;
    margin-bottom: 10px;
  }
  .itsec-protect-desc {
    font-size: 0.97rem;
  }
  .itsec-protect-center {
    margin: 0 0 0 0;
  }
  .itsec-protect-circle {
    width: 120px;
    height: 120px;
    font-size: 1.08rem;
    margin: 18px auto 18px auto;
    border-width: 4px;
  }

  /* Make lists inside .itsec-protect-desc horizontal at <=992px */
  .itsec-protect-desc ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: flex-start; /* 改為靠左排列 */
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .itsec-protect-desc ul li {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    margin: 0;
    background: transparent;
    border-radius: 6px;
    text-align: left; /* 讓 li 內文字靠左 */
    justify-content: flex-start;
  }
  /* Adjust the bullet pseudo-element to sit inline before text */
  .itsec-protect-desc ul li::before {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }
  .itsec-protect-desc ul li { padding-left: 0; }
}
/* ====== End 資通安全四大防護層面區塊 ====== */

/* 專利取得情形圖表外層容器，確保響應式寬度 */
.patent-bar-chart-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 32px auto;
    /* 可視需要調整下方間距 */
}
#patentBarChart {
    width: 100% !important;
    height: auto !important;
    display: block;
    max-width: 100%;
    /* 移除任何固定寬高 */
    box-sizing: border-box;
}
@media (max-width: 992px) {
    .patent-bar-chart-wrap {
        max-width: 100%;
    }
    #patentBarChart {
        height: 220px !important;
        min-height: 180px;
    }
    
}

/* 客戶滿意度調查結果統計塊樣式 */
.customer-survey-stats-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  margin: 32px 0 24px 0;
  justify-content: flex-start;
}
.customer-survey-stat {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 24px 32px 18px 32px;
  min-width: 220px;
  flex: 1 1 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stat-title {
  font-size: 1.13rem;
  font-weight: 700;
  color: #205c3b;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.stat-bars {
  width: 100%;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}
.stat-bar {
  border-radius: 8px;
  padding: 12px 18px 10px 18px;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 600;
  font-size: 1.08rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  background: #f5f7fa;
  transition: background 0.3s;
}
.stat-bar-2022 {
  background: #e3f2fd;
  color: #1976d2;
}
.stat-bar-2023 {
  background: #e8f5e9;
  color: #388e3c;
}
.stat-bar-2024 {
  background: #fff3e0;
  color: #f57c00;
}
.stat-bar-label {
  font-size: 0.98em;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.stat-bar-value {
  font-size: 1.18em;
  font-weight: 700;
  letter-spacing: 1px;
}
@media (max-width: 992px) {
  .customer-survey-stats-wrap {
    flex-direction: column;
    gap: 18px 0;
  }
  .customer-survey-stat {
    max-width: 100%;
    min-width: 0;
    padding: 18px 12px 14px 12px;
  }
  .stat-bars {
    gap: 6px;
  }
}

/* 客戶滿意度調查結果動態直立條狀圖樣式 */
.customer-survey-stats-bar-chart {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 32px 0 24px 0;
  justify-content: flex-start;
}
.bar-chart-group {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 24px 32px 18px 32px;
  min-width: 220px;
  flex: 1 1 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bar-chart-title {
  font-size: 1.13rem;
  font-weight: 700;
  color: #205c3b;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.bar-chart-bars {
  width: 100%;
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-end;
}
.bar-chart-bar {
  border-radius: 8px 8px 0 0;
  width: 48px;
  min-width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  font-weight: 600;
  font-size: 1.08rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  background: #f5f7fa;
  position: relative;
  transition: height 0.5s, background 0.3s;
}
.bar-2022 {
  background: linear-gradient(180deg, #42a5f5 80%, #e3f2fd 100%);
  color: #1976d2;
}
.bar-2023 {
  background: linear-gradient(180deg, #66bb6a 80%, #e8f5e9 100%);
  color: #388e3c;
}
.bar-2024 {
  background: linear-gradient(180deg, #ffa726 80%, #fff3e0 100%);
  color: #f57c00;
}
.bar-label {
  font-size: 0.98em;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  color: #444;
}
.bar-value {
  font-size: 1.08em;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: #222;
}


/*--- 近三年全球採購情形動態區塊樣式 ---*/
.procure-stats-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 18px;
  margin: 32px 0 24px 0;
  justify-content: flex-start;
}
.procure-stats-block {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(39,123,39,0.07);
  display: flex;
  align-items: center;
  min-width: 220px;
  flex: 1 1 calc(50% - 24px);
  max-width: calc(50% - 24px);
  padding: 18px 22px;
  position: relative;
  transition: box-shadow 0.3s;
  box-sizing: border-box;
}
.procure-stats-block:hover {
  box-shadow: 0 6px 24px rgba(39,123,39,0.16);
}
.procure-stats-map {
  flex-shrink: 0;
  margin-right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
}
.procure-stats-map img {
  display: block;
  width: 100%;
  height: 100%;
}
.procure-stats-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.procure-stats-title {
  font-size: 1.13rem;
  font-weight: 700;
  color: #205c3b;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.procure-stats-years > div {
  font-size: 1.08rem;
  color: #277b27;
  font-weight: 600;
  margin-bottom: 2px;
}
.procure-stats-block.non-asia {
  max-width: calc(50% - 24px);
  min-width: 220px;
  flex: 1 1 calc(50% - 24px);
  align-items: flex-start;
}
.procure-stats-table {
  width: 100%;
  border-collapse: collapse;
  background: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(39,123,39,0.06);
  font-size: 1rem;
  margin: 0;
}
.procure-stats-table th,
.procure-stats-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e8ef;
  text-align: center;
}
.procure-stats-table th {
  background: #f3f8f3;
  color: #277b27;
  font-weight: 700;
  font-size: 1.05em;
}
.procure-stats-table td {
  color: #2f4b47;
  background: #fafcff;
}
.procure-num {
  font-size: 1.18em;
  font-weight: 800;
  color: #277b27;
  margin: 0 2px;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}
/* 地圖顏色微調 */
.procure-stats-map.tw svg path { filter: drop-shadow(0 2px 6px #2a6edb33); }
.procure-stats-map.jp svg ellipse { filter: drop-shadow(0 2px 6px #e74c3c33); }
.procure-stats-map.asia svg ellipse { filter: drop-shadow(0 2px 6px #43b14333); }
.procure-stats-map.nonasia svg rect { filter: drop-shadow(0 2px 6px #b0b0b033); }

 /* 桌機版頁籤隱藏於手機，手機版下拉隱藏於桌機 */
 .ghg-tab-header { gap: 8px; }
 .ghg-tab-btn { cursor: pointer; }
 .ghg-tab-panel { display: none; }
 .ghg-tab-panel.active { display: block; }


@media (max-width: 991.98px) {
  .ghg-tab-header { display: none !important; }
  .ghg-tab-select-wrap { display: block !important; }

  .sdg-img-row img {
    width: calc((100% - 32px) / 3); /* 3個一列，間距2個16px */
    max-width: 90px;
  }
  
}

/* RWD: 手機版直向排列 */
@media (max-width: 992px) {
  .customer-survey-stats-bar-chart {
    flex-direction: column;
    gap: 18px 0;
  }
  .bar-chart-group {
    max-width: 100%;
    min-width: 0;
    padding: 18px 12px 14px 12px;
  }
  .bar-chart-bars {
    gap: 48px;
    height: 120px;
  }
  .bar-chart-bar {
    width: 96px;
    min-width: 72px;
  }
  .bar-label {
    font-size: 0.92em;
    bottom: -22px;
  }
  .procure-stats-wrap {
    flex-direction: column;
    gap: 18px 0;
  }
  .procure-stats-block {
    flex-direction: row;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    padding: 14px 10px;
    box-sizing: border-box;
  }
  .procure-stats-map {
    margin-right: 12px;
    width: 150px;
    height: 150px;
  }
  .procure-stats-map img {
    width: 100%;
    height: 100%;
  }
  .procure-stats-title {
    font-size: 1.02rem;
  }
  .procure-stats-years > div {
    font-size: 1rem;
  }
  .procure-stats-table th, .procure-stats-table td {
    padding: 7px 6px;
    font-size: 0.98em;
  }
  .procure-stats-block, .procure-stats-block.non-asia {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .ghg-tab-header { 
    display: flex !important; 
  }
  .ghg-tab-select-wrap { 
    display: none !important; 
  }

}


@media (max-width: 600px) {
  .procure-stats-block {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 4px;
  }
  .procure-stats-map {
    margin: 0 0 6px 0;
    width: 36px;
    height: 44px;
  }
  .procure-stats-map img {
    width: 28px;
    height: 38px;
  }
  .procure-stats-title {
    font-size: 0.98rem;
  }
  .procure-stats-years > div {
    font-size: 0.95rem;
  }
}

/* Chart.js 折線圖 RWD 容器樣式 */
.chartjs-rwd-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 32px auto;
  background: var(--white, #fff);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 16px 12px 8px 12px;
}
.chartjs-rwd-container canvas {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2/1;
  display: block;
}
@media (max-width: 600px) {
  .chartjs-rwd-container {
    padding: 8px 2vw 4px 2vw;
    border-radius: 10px;
  }
}

/* 簽名區塊靠右與圖片大小 */
.signature-block {
  text-align: right;
  margin-top: 32px;
}
.signature-block .signature-name,
.signature-block .signature-date {
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.signature-block .signature {
  display: inline-block;
  max-width: 180px;
  width: 100%;
  height: auto;
  margin: 8px 0;
}

/*---共用箭頭 icon ----*/
.down_arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  color: #ff0000;
  font-weight: bold;
  font-size: 1.2em;
  /* 可用於 <span class="down_arrow">&darr;</span> 或 svg */
}

.up_arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  color: #277b27;
  font-weight: bold;
  font-size: 1.2em;
  /* 可用於 <span class="up_arrow">&uarr;</span> 或 svg */
}

/* SDG 圖示橫列 RWD 樣式 */
.sdg-img-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  margin-bottom: 12px;
}
.sdg-img-row img {
  width: calc((100% - 80px) / 6); /* 6個一列，間距5個16px */
  max-width: 80px;
  min-width: 40px;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0001;
  padding: 6px;
  transition: transform 0.2s;
}
.sdg-img-row img:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px #0002;
}

/*------ 供應鏈管理 - 手風琴樣式 ------*/

/* 手風琴容器 */
.smd_accordion-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 25px 0;
}

/* 手風琴單項 */
.smd_accordion {
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid #d8e0e8;
  overflow: hidden;
  transition: all 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease; /* 添加邊框與陰影動畫 */
}

/* 展開時的陰影與邊框效果 */
.smd_accordion:not(.collapsed) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* 更強的陰影 */
  transform: translateY(-2px);
  border-color: #277b27; /* 展開時邊框變為品牌綠色 */
}

/* 手風琴標題 */
.smd_accordion-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 18px 24px;
  background: linear-gradient(to right, #ffffff, #f8fafc);
  transition: background 0.3s ease, transform 0.2s ease;
}

/* 標題滑鼠懸停效果 */
.smd_accordion-header:hover {
  background: linear-gradient(to right, #f0f4f8, #e8eef3);
  transform: scale(1.01);
}

/* 標題點擊效果 */
.smd_accordion-header:active {
  transform: scale(0.99);
}

/* 圖標樣式 */
.smd_accordion-icon-img {
  width: 64px;
  height: 64px;
  margin-right: 18px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  transition: transform 0.4s ease; /* 添加圖標動畫 */
}

/* 展開時圖標縮放與旋轉 */
.smd_accordion:not(.collapsed) .smd_accordion-icon-img {
  transform: scale(1.1) rotate(5deg); /* 放大並輕微旋轉 */
}

/* 標題文字 */
.smd_accordion-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a3c34;
  letter-spacing: 0.5px;
  transition: color 0.3s ease; /* 添加文字顏色動畫 */
}

/* 展開時標題文字顏色 */
.smd_accordion:not(.collapsed) .smd_accordion-title {
  color: #277b27; /* 展開時文字變為品牌綠色 */
}

/* 展開/收合圖標 */
.smd_accordion-toggle-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-left: auto;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.smd_accordion-toggle-icon .bar {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #4a6b66;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.smd_accordion-toggle-icon .bar1 {
  width: 18px;
  height: 3px;
  transform: translate(-50%, -50%) rotate(0deg);
}

.smd_accordion-toggle-icon .bar2 {
  width: 3px;
  height: 18px;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 展開時圖標變化 */
.smd_accordion:not(.collapsed) .smd_accordion-toggle-icon .bar2 {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.smd_accordion:not(.collapsed) .smd_accordion-toggle-icon .bar1 {
  background: #277b27;
  transform: translate(-50%, -50%) rotate(0deg);
}

.smd_accordion.collapsed .smd_accordion-toggle-icon .bar2 {
  opacity: 1;
}

/* 手風琴內容 */
.smd_accordion-content {
  background: #fafcff;
  padding: 20px 24px;
  border-top: 1px solid #e0e8ef;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px); /* 初始向上偏移 */
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease; /* 添加 transform 動畫 */
}

/* 展開時內容顯示 */
.smd_accordion:not(.collapsed) .smd_accordion-content {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0); /* 滑入到正常位置 */
}

/* 內容文字 */
.smd_accordion-inner {
  font-size: 1.05rem;
  color: #2f4b47;
  line-height: 1.7;
  letter-spacing: 0.3px;
}

/* 創意 li 符號樣式：品牌綠色圓點+陰影 */
.smd_accordion-inner ul {
  padding-left: 1.5em;
  margin: 0;
}
.smd_accordion-inner ul li {
  position: relative;
  margin-bottom: 0.7em;
  padding-left: 1.1em;
  list-style: none;
}
.smd_accordion-inner ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6em;
  height: 0.6em;
  background: #277b27;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(39,123,39,0.18);
  transform: translateY(-50%);
  transition: background 0.3s;
}
.smd_accordion-inner ul li:hover::before {
  background: #43b143;
}

/* sus_accordion-inner table 樣式 */
.smd_accordion-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(39,123,39,0.06);
  font-size: 1rem;
}

.smd_accordion-inner th,
.smd_accordion-inner td {
  padding: 12px 14px;
  border-bottom: 1px solid #e0e8ef;
  text-align: left;
  vertical-align: top;
}

.smd_accordion-inner th {
  background: #f3f8f3;
  color: #277b27;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.5px;
  text-align: center;
  width: 40%;
}

.smd_accordion-inner td {
  color: #2f4b47;
  background: #fafcff;
  width: 60%;

}

/** 獨立th可以使用其他顏色 **/
.smd_accordion-inner th.text-color-red {
  color: var(--secondary) !important;
  font-weight: 800 !important;
}


.smd_accordion-inner table {
  /* 讓 table 在小螢幕可橫向滑動 */
  display: block;
  width: 100%;
  overflow-x: auto;
}

.smd_accordion-inner table thead,
.smd_accordion-inner table tbody,
.smd_accordion-inner table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.smd_accordion-inner table th,
.smd_accordion-inner table td {
  word-break: break-word;
}




/** 重大主題列表 比較圖 **/
.material-chart-wrap {
  width:100%;
  margin:0 auto 32px;
}

/* .check-icon 樣式 */
.check-icon,
.checkmark {
  color: #277b27;
  font-size: 1.3em;
  vertical-align: middle;
  margin-left: 2px;
  font-weight: bold;
  font-family: inherit;
  line-height: 1;
}

/* .circle-icon 樣式 */
.circle-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #e74c3c;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px;
}

/* .xmark-icon 樣式 */
.xmark-icon {
  color: #b0b0b0;
  font-size: 1.2em;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px;
  font-weight: bold;
  font-family: inherit;
  line-height: 1;
}

/** 表格備註文字～專用 **/
.page_remark {
  font-size: 0.9rem;
  margin: 30px auto 0 auto;
 
}

.page_remark a {
  color: var(--secondary);
  font-size: 0.9rem;
  margin: 30px auto 0 auto;
 
}


/*******---- 麵包屑 -----*******/


/* 動畫效果 */
@keyframes fadeInAccordion {
  from {
    opacity: 0;
    transform: translateY(-15px); /* 更大偏移，增強滑入感 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 橫式立方塊區塊樣式 */
.horizontal-cube-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 36px 0 24px 0;
}
.horizontal-cube {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #e8f5e9 60%, #f8fafc 100%);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(39,123,39,0.08);
  padding: 22px 32px 22px 28px;
  min-height: 64px;
  position: relative;
  overflow: hidden;
  font-size: 1.13rem;
  font-weight: 500;
  color: #205c3b;
  opacity: 0;
  transform: translateX(-60px);
  animation: cubeSlideIn 0.9s cubic-bezier(.6,.2,.3,1.1) forwards;
}
.horizontal-cube:nth-child(2) {
  animation-delay: 0.18s;
}
.horizontal-cube:nth-child(3) {
  animation-delay: 0.36s;
}
.cube-text {
  flex: 1 1 auto;
  z-index: 2;
}
.cube-status-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 1.08em;
  font-weight: 700;
  color: #fff;
  margin-left: 28px;
  box-shadow: 0 2px 8px rgba(39,123,39,0.13);
  opacity: 0;
  transform: scale(0.7) translateX(30px);
  animation: circlePopIn 0.7s cubic-bezier(.7,.2,.3,1.1) forwards;
  animation-delay: 0.5s;
}
.horizontal-cube:nth-child(2) .cube-status-circle {
  animation-delay: 0.68s;
}
.horizontal-cube:nth-child(3) .cube-status-circle {
  animation-delay: 0.86s;
}
.cube-status-circle.success {
  background: linear-gradient(135deg, #43b143 60%, #277b27 100%);
}
.cube-status-circle.fail {
  background: linear-gradient(135deg, #e74c3c 60%, #b71c1c 100%);
}
.cube-status-circle.span {
  font-size: 1em;
  letter-spacing: 0.1em;
}
@keyframes cubeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes circlePopIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateX(30px);
  }
  60% {
    opacity: 1;
    transform: scale(1.13) translateX(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* ====== 舉報處理程序流程圖樣式 ====== */
/* 外層容器，橫向排列，手機直向排列 */
.report-flow-wrap {
  display: flex;
  align-items: stretch; /* 讓所有 step 等高 */
  justify-content: center;
  gap: 0;
  margin: 36px 0 32px 0;
  flex-wrap: wrap;
  position: relative;
}

/* 單一步驟區塊 */
.report-flow-step {
  background: linear-gradient(135deg, #f8fafc 70%, #e8f5e9 100%);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(39,123,39,0.08);
  min-width: 220px;
  max-width: 320px;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 內容頂部對齊 */
  min-height: 280px; /* 桌機等高，可依實際內容調整 */
  height: 100%;
  align-items: flex-start;
  padding: 22px 20px 22px 18px;
  position: relative;
  z-index: 2;
  margin: 0 12px;
  transition: box-shadow 0.3s;
}

.report-flow-step:hover {
  box-shadow: 0 4px 20px rgba(39,123,39,0.18);
}

/* 步驟圓圈圖示 */
.report-flow-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #277b27 60%, #43b143 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  box-shadow: 0 2px 8px rgba(39,123,39,0.13);
  border: 3px solid #fff;
  position: relative;
  z-index: 3;
}

/* 步驟內容 */
.report-flow-content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 固定在頂部 */
  align-items: flex-start;
}

.report-flow-title {
  font-size: 1.13rem;
  font-weight: 700;
  color: #205c3b;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.report-flow-desc {
  font-size: 1rem;
  color: #2f4b47;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

/* 新增：步驟標題與圓圈同排 */
.report-flow-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.report-flow-header .report-flow-icon {
  margin-right: 12px;
  margin-bottom: 0;
}
.report-flow-header .report-flow-title {
  margin-bottom: 0;
}

/* 流程箭頭 */
.report-flow-arrow {
  width: 40px;
  height: 40px;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.report-flow-arrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border-right: 4px solid #277b27;
  border-bottom: 4px solid #277b27;
  border-radius: 0 0 8px 0;
  transform: rotate(-45deg);
  margin: 0 auto;
  background: transparent;
  opacity: 0.8;
}

/* 客戶申訴制度及回應專用：一排三個九格流程圖（調整間距，確保每排三個） */
.report-flow-wrap-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 32px;
  gap: 12px 8px; /* 減少間距，確保每排三個 */
}
.report-flow-wrap-3 .report-flow-step {
  flex: 1 1 calc(33.333% - 16px); /* 三欄，扣除gap */
  min-width: 180px;
  margin: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100px;
  padding: 8px 0 4px 0;
}
.report-flow-wrap-3 .report-flow-arrow {
  width: 28px;
  align-self: center;
  margin: 0 4px; /* 箭頭間距縮小 */
}
.report-flow-wrap-3 .report-flow-desc {
  font-size: 15px;
  color: #222;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 1200px) {
  .report-flow-wrap-3 .report-flow-step {
    min-width: 140px;
  }
}
@media (max-width: 992px) {
  .report-flow-wrap-3 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px 0;
  }
  .report-flow-wrap-3 .report-flow-step {
    min-width: 0;
    margin-bottom: 8px;
    min-height: 80px;
  }
  .report-flow-wrap-3 .report-flow-arrow {
    width: 100%;
    height: 16px;
    margin: 6px 0;
  }
}
@media (max-width: 600px) {
  .report-flow-wrap-3 {
    gap: 6px 0;
  }
  .report-flow-wrap-3 .report-flow-step {
    margin-bottom: 4px;
    min-height: 60px;
  }
  .report-flow-wrap-3 .report-flow-arrow {
    margin: 4px 0;
  }
  .signature-block {
    text-align: center;
}
.signature-block .signature {
    max-width: 120px;
}
}

/* 產品製程介紹專用：流程格圖片與文字置中（桌機與手機皆置於區塊中央） */
.product-process-flow-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px 8px;
}
.product-process-flow-wrap .report-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 16px 8px 12px 8px;
  margin-bottom: 12px;
  min-height: 140px;
  height: 100%;
}
.product-process-flow-wrap .report-flow-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-process-flow-wrap .report-flow-header img {
  display: block;
  margin: 0 auto 2px auto;
  max-width: 800px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  background: #e9ecef;
}
.product-process-flow-wrap .report-flow-desc {
  font-size: 1.2rem;
  color: #222;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 992px) {
  .product-process-flow-wrap {
    gap: 8px 0;
  }
  .product-process-flow-wrap .report-flow-step {
    margin-bottom: 8px;
    padding: 12px 4px 8px 4px;
    min-height: 100px;
  }
  .product-process-flow-wrap .report-flow-header img {
    max-width: 300px;
    margin: 10px 0 0 0;
  }
}

/* 供應商概況餅圖 RWD 樣式 */
.smd-chain-img-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.smd-chain-img-block {
  /* 桌機預設：橫向排列圖片（flex row），可容納多張圖片並列 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex: 1 1 320px;
  max-width: 960px; /* 容許較大的容器以放置多張圖 */
  min-width: 240px;
  box-sizing: border-box;
  margin-bottom: 0;
}

.smd-chain-img-block img {
  display: block;
  width: auto;
  max-width: 48%; /* 讓兩張圖左右並列時各佔約一半寬度 */
  height: auto;
  object-fit: cover;
}
@media (max-width: 767px) {
  .smd-chain-img-row {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .smd-chain-img-block {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  .smd-chain-img-block {
    /* 手機：直列排列 */
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .smd-chain-img-block img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* 平板到行動的中斷點 (<=992px)：改為直列以提升閱讀性 */
@media (max-width: 992px) {
  .smd-chain-img-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .smd-chain-img-block img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* Pie chart title 置中於圓餅圖內 */
.smd-chain-img-block {
  position: relative; /* 讓內部絕對定位元素以此為基準 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.smd-chain-img-block canvas.supplier-pie-chart {
  width: 100% !important;
  height: auto !important;
  max-width: 420px;
}

.smd-chain-img-block .pie-chart-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  text-align: center;
  color: #fff; /* 改為白色文字 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); /* 提升對比 */
  font-weight: 700;
  font-size: 1.1rem;
  /* 半透明底色、內距與圓角（便於在各種背景上閱讀） */
  background: rgba(0,0,0,0.35);
  padding: 4px 8px;
  border-radius: 6px;
}

/* 桌機顯示：放大 SMD 圖與圓餅圖的最大寬度，使圖片不會看起來過小 */
@media (min-width: 993px) {
  .smd-chain-img-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
  }
  /* 每一欄平均分配寬度，並限制最大寬度避免過寬 */
  .smd-chain-img-row .smd-chain-img-block {
    flex: 1 1 50%;
    max-width: 600px; /* 單欄上限，可依需求調整 */
    box-sizing: border-box;
  }
  .smd-chain-img-row .smd-chain-img-block img,
  .smd-chain-img-row .smd-chain-img-block canvas.supplier-pie-chart {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

@media (max-width: 992px) {
  .smd-chain-img-block .pie-chart-title {
    font-size: 1rem;
  }
  .smd-chain-img-block canvas.supplier-pie-chart {
    max-width: 360px;
  }
}

@media (max-width: 576px) {
  .smd-chain-img-block .pie-chart-title {
    font-size: 0.95rem;
  }
  .smd-chain-img-block canvas.supplier-pie-chart {
    max-width: 320px;
  }
}

/* ====================================================
   Consolidated @media (max-width: 992px)
   - 合併原檔中散落多處的 992px 以下規則
   - 位置：檔案末端（確保合併規則為最後應用，優先權最高）
   - 說明：保留了原先各區塊的規則內容，將常見的 992px 斷點樣式集中管理
   注意：若發現樣式與預期不同，請以備份檔 `new_style2025.css.bak` 回復並檢查細節。
==================================================== */
@media (max-width: 992px) {
  /* Report flow (stack vertically on smaller screens) */
  .report-flow-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .report-flow-step {
    flex: 1 1 100%;
    max-width: 100%;
    margin: 0 0 18px 0;
    min-width: 0;
    padding: 18px 14px 18px 12px;
    min-height: 0;
    height: auto;
  }
  .report-flow-icon { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .report-flow-title { font-size: 1.02rem; }
  .report-flow-desc { font-size: 0.97rem; }
  /* arrow container: center horizontally on narrow screens */
  .report-flow-arrow {
    width: 32px;
    height: 32px;
    margin: 12px auto 28px; /* 上 12px，左右 auto，底 28px：在窄螢幕下增加下方空隙 */
    align-self: center;
    display: block;
  }
  /* make the connecting arrow point down on narrow screens */
  .report-flow-arrow::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    border-right: 3px solid #277b27;
    border-bottom: 3px solid #277b27;
    border-radius: 0 0 6px 0;
    transform: rotate(45deg); /* 向下箭頭 */
    margin: 0 auto; /* 確保偽元素也置中 */
    background: transparent;
    opacity: 0.9;
  }

  /* Product process flow adjustments */
  .product-process-flow-wrap { gap: 8px 0; }
  .product-process-flow-wrap .report-flow-step { margin-bottom: 8px; padding: 12px 4px 8px 4px; min-height: 100px; }
  .product-process-flow-wrap .report-process-header img, .product-process-flow-wrap .report-flow-header img { max-width: 300px; margin: 10px 0 0 0; }

  /* SUS accordion: convert table to stacked card layout and hide thead */
  .sus_accordion-inner thead { display: none !important; }
  .sus_accordion-inner table,
  .sus_accordion-inner thead,
  .sus_accordion-inner tbody,
  .sus_accordion-inner tr { display: block; width: 100%; }
  .sus_accordion-inner tr {
    margin-bottom: 18px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(39,123,39,0.07);
    background: #fff;
    border: 1px solid #e0e8ef;
    padding: 8px 0;
  }
  .sus_accordion-inner td, .sus_accordion-inner th {
    display: flex; width: 100%; box-sizing: border-box; align-items: flex-start; padding: 10px 12px; border: none; border-bottom: 1px solid #e0e8ef; position: relative; background: #fafcff;
  }
  .sus_accordion-inner td:before, .sus_accordion-inner th:before { content: attr(data-label); flex: 0 0 auto; font-weight: 700; color: #277b27; padding-right: 10px; text-align: left; display: block; font-size: 0.98em; letter-spacing: 0.5px; white-space: nowrap; }
  .sus_accordion-inner tr:last-child td, .sus_accordion-inner tr:last-child th { border-bottom: none; }

  /* Make sure small-screen tables can still scroll horizontally when needed */
  .sus_accordion-inner table { overflow-x: auto; display: block; width: 100%; }

  /* Horizontal cube tweaks for small screens */
  .horizontal-cube-list { gap: 14px; margin: 22px 0 16px 0; }
  .horizontal-cube { font-size: 1rem; padding: 16px 14px; min-height: 44px; }

  /* Patent chart height adjust */
  #patentBarChart { max-width: 100% !important; height: 220px !important; display: block; margin: 0 auto; }

  /* Customer survey: stack vertically */
  .customer-survey-stats-bar-chart { flex-direction: column; gap: 18px 0; }
  .bar-chart-group { max-width: 100%; min-width: 0; padding: 18px 12px 14px 12px; }
  .bar-chart-bars { gap: 48px; height: 120px; }

  /* Itsec protect: stack boxes and make lists horizontal */
  .itsec-protect-wrap { margin: 18px 0 18px 0; }
  .itsec-protect-row { flex-direction: column; gap: 0; align-items: center; margin-bottom: 0; }
  .itsec-protect-box { min-width: 0; max-width: 100%; width: 100%; margin: 10px 0; padding: 22px 12px 18px 12px; min-height: 0; }
  .itsec-protect-title { font-size: 1.08rem; margin-bottom: 10px; }
  .itsec-protect-desc { font-size: 0.97rem; }
  .itsec-protect-center { margin: 0; }
  .itsec-protect-circle { width: 120px; height: 120px; font-size: 1.08rem; margin: 18px auto; border-width: 4px; }

  /* Make lists inside .itsec-protect-desc horizontal */
  .itsec-protect-desc ul {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 12px; justify-content: flex-start; align-items: center; padding: 0; margin: 0; list-style: none;
  }
  .itsec-protect-desc ul li {
    display: inline-flex; align-items: center; padding: 6px 10px; margin: 0; background: transparent; border-radius: 6px; text-align: left; justify-content: flex-start;
  }
  .itsec-protect-desc ul li::before { position: relative; left: auto; top: auto; transform: none; display: inline-block; margin-right: 8px; vertical-align: middle; }
  .itsec-protect-desc ul li { padding-left: 0; }

  /* Patent / chart container adjustments */
  .patent-bar-chart-wrap { max-width: 100%; }
  #patentBarChart { height: 220px !important; min-height: 180px; }

  /* Procure stats: stack and adjust padding */
  .procure-stats-wrap { flex-direction: column; gap: 18px 0; }
  .procure-stats-block { flex-direction: row; max-width: 100%; min-width: 0; width: 100%; padding: 14px 10px; box-sizing: border-box; }
  .procure-stats-map { margin-right: 12px; width: 150px; height: 150px; }
  .procure-stats-table th, .procure-stats-table td { padding: 7px 6px; font-size: 0.98em; }
  .procure-stats-block, .procure-stats-block.non-asia { max-width: 100%; flex: 1 1 100%; }

  /* SMD chain images: column layout at <=992 */
  .smd-chain-img-block { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .smd-chain-img-block img, .smd-chain-img-block canvas.supplier-pie-chart { width: 100%; max-width: 100%; height: auto; }
  .smd-chain-img-block .pie-chart-title { font-size: 1rem; }

  /* Customer survey stats wrap */
  .customer-survey-stats-wrap { flex-direction: column; gap: 18px 0; }
  .customer-survey-stat { max-width: 100%; min-width: 0; padding: 18px 12px 14px 12px; }

  /* Chart container small tweaks */
  .chartjs-rwd-container { padding: 8px 2vw 4px 2vw; border-radius: 10px; }

  /* Keep other smaller break rules consistent */
  .ghg-tab-header { display: flex !important; }
  .ghg-tab-select-wrap { display: none !important; }
}