/* 第一大組樣式 start */


/* 預設狀態（未選中）：白底藍字、帶完整藍框 */
#scheme-wrapper-A .pageTitleSwitch .btn-my,
#scheme-wrapper-B .pageTitleSwitch .btn-my {
  background-color: #ffffff ;
  color: #5b8bb8 ;
  border: 1px solid #5b8bb8 ;
  margin-bottom: 0px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  font-size:1.4rem;
}

/* 點擊啟動狀態（Active）：變藍底白字、往下壓 1px 物理遮線 */
#scheme-wrapper-A .pageTitleSwitch .btn-my.active,
#scheme-wrapper-B .pageTitleSwitch .btn-my.active {
  background-color: #5b8bb8 ;
  color: #ffffff ;
  border-bottom: none ; /* 拔除下邊框 */
  margin-bottom: -1px ;  /* 往下壓 1px 完美遮蓋底層的線 */
  z-index: 2 ;            /* 確保圖層在最上方 */
}

/* 邊線置中 第一組 */

#table-A-01 tbody tr td:nth-child(1) {
    width: 35%; /* 第一欄：手機名稱 (例如 i / iPhone 18 Pro) */
}

#table-A-01 tbody tr td:nth-child(2) {
    width: 15%; /* 第二欄：容量 (例如 256G) -> 前兩欄加起來剛好 50% */
}

#table-A-01 tbody tr td:nth-child(3) {
    width: 25%; /* 第三欄：方案月付款 */
}

#table-A-01 tbody tr td:nth-child(4) {
    width: 25%; /* 第四欄：想延長月付款 -> 後兩欄加起來也是 50% */
}

/* 邊線置中 第二組 */

#table-A-02 tbody tr td:nth-child(1) {
    width: 35%; /* 第一欄：手機名稱 (例如 i / iPhone 18 Pro) */
}

#table-A-02 tbody tr td:nth-child(2) {
    width: 15%; /* 第二欄：容量 (例如 256G) -> 前兩欄加起來剛好 50% */
}

#table-A-02 tbody tr td:nth-child(3) {
    width: 25%; /* 第三欄：方案月付款 */
}

#table-A-02 tbody tr td:nth-child(4) {
    width: 25%; /* 第四欄：想延長月付款 -> 後兩欄加起來也是 50% */
}

/* 邊線置中 第三組 */

#table-B-01 tbody tr td:nth-child(1) {
    width: 35%; /* 第一欄：手機名稱 (例如 i / iPhone 18 Pro) */
}

#table-B-01 tbody tr td:nth-child(2) {
    width: 15%; /* 第二欄：容量 (例如 256G) -> 前兩欄加起來剛好 50% */
}

#table-B-01 tbody tr td:nth-child(3) {
    width: 25%; /* 第三欄：方案月付款 */
}

#table-B-01 tbody tr td:nth-child(4) {
    width: 25%; /* 第四欄：想延長月付款 -> 後兩欄加起來也是 50% */
}

/* 邊線置中 第四組 */

#table-B-02 tbody tr td:nth-child(1) {
    width: 35%; /* 第一欄：手機名稱 (例如 i / iPhone 18 Pro) */
}

#table-B-02 tbody tr td:nth-child(2) {
    width: 15%; /* 第二欄：容量 (例如 256G) -> 前兩欄加起來剛好 50% */
}

#table-B-02 tbody tr td:nth-child(3) {
    width: 25%; /* 第三欄：方案月付款 */
}

#table-B-02 tbody tr td:nth-child(4) {
    width: 25%; /* 第四欄：想延長月付款 -> 後兩欄加起來也是 50% */
}


/* 第一層大 Tab（選項 A/B）的橫排與高亮樣式 */

.pageParentSwitch {
  display: flex;
  gap: 12px;
  margin:0px auto 32px;
  justify-content: center;
  padding-top:24px;
}
.btn-parent {
  cursor: pointer;
  padding: 6px 30px;
  background-color: #f0f0f0;
  border-radius: 12px;
  color: #666;
  transition: all 0.2s;
  font-size:2rem;
}
.btn-parent.active {
  background-color: #333 ;
  color: #fff ;
  font-weight: bold;
  font-size:2rem;
}

.borsa {
    border-right:1px solid #799dbf;
}

/* 第一大組樣式 end */



/* 第二大組樣式 start */


/* 預設狀態（未選中）：白底藍字、帶完整藍框 */
#group2-wrapper-A .pageTitleSwitch .btn-my,
#group2-wrapper-B .pageTitleSwitch .btn-my {
  background-color: #ffffff ;
  color: #e58d8d ;
  border: 1px solid #e58d8d ;
  margin-bottom: 0px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  font-size:1.4rem;
}

/* 點擊啟動狀態（Active）：變藍底白字、往下壓 1px 物理遮線 */
#group2-wrapper-A .pageTitleSwitch .btn-my.active,
#group2-wrapper-B .pageTitleSwitch .btn-my.active {
  background-color: #e58d8d ;
  color: #ffffff ;
  border-bottom: none ; /* 拔除下邊框 */
  margin-bottom: -1px ;  /* 往下壓 1px 完美遮蓋底層的線 */
  z-index: 2 ;            /* 確保圖層在最上方 */
}

/* 邊線置中 第二組 - A2-01 */
#table-A2-01 tbody tr td:nth-child(1) { width: 35%; }
#table-A2-01 tbody tr td:nth-child(2) { width: 15%; }
#table-A2-01 tbody tr td:nth-child(3) { width: 25%; }
#table-A2-01 tbody tr td:nth-child(4) { width: 25%; }

/* 邊線置中 第二組 - A2-02 */
#table-A2-02 tbody tr td:nth-child(1) { width: 35%; }
#table-A2-02 tbody tr td:nth-child(2) { width: 15%; }
#table-A2-02 tbody tr td:nth-child(3) { width: 25%; }
#table-A2-02 tbody tr td:nth-child(4) { width: 25%; }

/* 邊線置中 第二組 - B2-01 */
#table-B2-01 tbody tr td:nth-child(1) { width: 35%; }
#table-B2-01 tbody tr td:nth-child(2) { width: 15%; }
#table-B2-01 tbody tr td:nth-child(3) { width: 25%; }
#table-B2-01 tbody tr td:nth-child(4) { width: 25%; }

/* 邊線置中 第二組 - B2-02 */
#table-B2-02 tbody tr td:nth-child(1) { width: 35%; }
#table-B2-02 tbody tr td:nth-child(2) { width: 15%; }
#table-B2-02 tbody tr td:nth-child(3) { width: 25%; }
#table-B2-02 tbody tr td:nth-child(4) { width: 25%; }

/* 第二組第一層大 Tab（選項 A/B）的橫排與高亮樣式 (完全同步第一組尺寸、置中與圓角) */
.pageParentSwitchGroup2 {
  display: flex;
  gap: 12px;
  margin: 0px auto 32px;
  justify-content: center; /* 居中對齊 */
}
.btn-parent-g2 {
  cursor: pointer;
  padding: 6px 30px;
  background-color: #f0f0f0;
  border-radius: 12px;     /* 12px 圓角同步 */
  color: #666;
  transition: all 0.2s;
  font-size: 2rem;         /* 2rem 字體同步 */
}
.btn-parent-g2.active {
  background-color: #333 ;
  color: #fff ;
  font-weight: bold;
  font-size: 2rem;         /* 2rem 字體同步 */
}

.borsa-02 {
    border-right:1px solid #e58d8d;
}


/* 第二大組樣式 end */


/* 其他 */

.contrwa1 {
    margin-bottom:48px;
} 

.contrwa2 {
  margin-bottom:48px;
} 

.hitsa {
    color:#ffff8e ;
}

@media (max-width: 640px) {

  /* 表格標題文字設定 */

  #scheme-wrapper-A .pageTitleSwitch .btn-my,
  #scheme-wrapper-B .pageTitleSwitch .btn-my {
  font-size:1rem;
  }

  #group2-wrapper-A .pageTitleSwitch .btn-my,
  #group2-wrapper-B .pageTitleSwitch .btn-my {
  font-size:1rem;
  }


  /* 12.24期文字設定 */
  .btn-parent {
    font-size:1.2rem;
  }
  .btn-parent.active {
    font-size:1.2rem;
  }

  .btn-parent-g2 {
    font-size: 1.2rem;
  }
  .btn-parent-g2.active {
    font-size: 1.2rem;
  }


  .tableGreen p, .tablePurple p {
    font-size: 0.8rem;
  }


  }