/* --- CSS 修改開始 --- */

body {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
  margin: 0;
  padding-top: 0;
  background-color: #80C4E9;
  overflow-x: hidden;
  /* 防止橫向滾動 */
}




.section {
  width: 90%;
  max-width: 1100px;
  
  /* 1. 調整外部間距：將原本的 20px 改小 (例如 5px) */
  /* 格式：[上下] [左右] */
  margin: 13px auto; /* 控制區塊外面與其他區塊的距離 */
  
  /* 2. 調整內部間距：將原本的 2vw 改小 (例如 0.5vw 或 0px) */
  /* 格式：[上下] [左右] */
  padding: 0.5vw 5vw;  /* 控制區塊內部（邊框到內容之間）的垂直空間 */
  
  border: 1.5px solid #333;
  text-align: center;
}

.section-pink {
  background-color: #ffc0cb;
}

.section-blue {
  background-color: #add8e6;
}

/* 2. VIP5 獨特閃亮按鈕 */
.btn-vip5 {
  background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700);
  background-size: 200% auto;
  color: #ce0000 !important;
  border: 2px solid #fff !important;
  animation: shine 2s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* 1. 統一所有按鈕橫列的間距 */


.button-row {
  display: flex;
  justify-content: space-between;   /* 平均分配空間 */
  /* 建議寫法：使用 clamp 確保間距最小不低於 5px，最大不超過 15px */
  gap: clamp(5px, 1vw, 15px); 
  /* 按鈕間距 */  
  margin-bottom: 1.5vw;
  width: 100%;

}



/* 2. 核心：統一按鈕尺寸(不論 539 還是 大樂區塊) */
/* 設定固定的 flex-basis，讓 3 個按鈕跟 4 個按鈕時的單個寬度一樣 */
.section-blue .btn {
  /* 核心公式：(100% - (3格間距)) / 4格 */
  /* 這保證了不論這一排有 1 顆還是 4 顆，按鈕寬度都永遠一樣 */
  flex: 0 0 calc((100% - (12px * 3)) / 4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  align-items: center;

}

/* 3. 針對手機版的微調：避免按鈕在小螢幕太擠 */
@media (max-width: 600px) {
  .section-blue .btn {
    flex: 0 0 22%;
    /* 稍微縮小比例以適應小螢幕 */
    gap: 5px;
  }
}

/* 4. 針對最小螢幕尺寸的微調 */
@media (max-width: 350px) {
  .row {
    gap: 5px;
    /* 極小螢幕縮小間距 */
  }

  .col.col-spacing {
    flex: 0 0 calc((100% - 15px) / 4) !important;
    max-width: calc((100% - 15px) / 4) !important;
  }
}

/* 標題縮放 */
.title {
  margin-top: 0;
  font-size: clamp(1.2rem, 5vw, 2rem);
  line-height: 1.2;
}

.red-text {
  color: #dc3545;
}

.purple-text {
  color: #6f42c1;
}

/* 按鈕列佈局：這是關鍵 */



/* 強制讓該列的內容從左邊開始排列 */
.button-row.justify-start {
  display: flex;
  justify-content: flex-start !important;
  /* 核心：靠左對齊 */
  gap: 15px;
  /* 設定按鈕之間的固定間距，您可以隨意調整數值 */
  width: 100%;
}

/* 確保按鈕本身不會被撐開成全寬，而是依照文字長度縮放 */
.button-row.justify-start .btn {
  flex: 0 1 auto;
  /* 不要強制平分寬度 */
  min-width: 120px;
  /* 您可以設定一個最小寬度保持整齊 */
  width: auto;
  /* 寬度隨內容或設定值走 */
}

/* 按鈕群組（範例文字+按鈕） */
.btn-group1 {
  flex: 1;
  /* 每個群組平分寬度 */
  display: flex;
  flex-direction: column; /* 範例在上，按鈕在下 */
  align-items: center;

  /* 確保這一組東西至少要有足夠裝下文字的寬度 */
  min-width: max-content;
}

/* 1. 讓每一組的內容（連結與按鈕）整體靠左 */
.btn-group1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 關鍵：強制子元素（連結與按鈕）全部靠左邊線對齊 */
  gap: 5px;               /* 範例文字與按鈕之間的垂直間距 */
  width: auto;            /* 讓容器寬度隨內容撐開 */
}

/* 2. 確保文字連結行（範例+說明 或 範例+VIP）永遠不換行且靠左 */
.link-group {
  justify-content: flex-start; /* 靠左對齊 */
  display: flex !important;  /* 強制啟用彈性 Flex 佈局 */
  flex-direction: row;      /* 橫向排列 */
  gap: 10px !important;      /* 鎖定間距為 10px */
  align-items: center;      /* 垂直置中對齊 */
  white-space: nowrap;    /* 絕對不准換行 */
  width: 100%;            /* 佔滿父容器寬度 */
}

.example-link, .desc-link {
  margin: 0 !important;     /* 徹底清除所有外邊距 */
  padding: 0;               /* 清除內襯，避免內部空間撐開 */
  display: inline-block;
}


/* 範例連結文字 */


.vip {
  color: #dc3545;
  font-weight: bold;
}






/* 按鈕本體 */
.lotto-btn {
  flex: 1;
  /* 每個按鈕平分空間 */
  text-align: center;
  width: 100%;
  /* 1. 強制設定四個邊角均為圓角，!important 可確保覆蓋掉任何直角設定 */
  border-radius: 8px !important;

  /* 2. 確保沒有單獨設定左側為 0 */
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border: 2px solid #ffc107;
  /* 黃色邊框 */
  color: white;
  padding: 0.2vw 0.2vw;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
  /* 核心：文字縮放且不換行 */
  white-space: nowrap;
  /* 防止文字換行 */
  font-size: clamp(0.7rem, 2.5vw, 2rem);

  transition: all 0.3s ease;
  text-decoration: none !important;
  /* 強制移除底線 */
  display: inline-block;
  /* 確保 padding 和寬高計算正確 */
}

.lotto-btn:hover {
  background-color: #ffff00 !important;
  /* 黃底 */
  color: #ff0000 !important;
  /* 紅字 */
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
  /* 按下感 */
  text-decoration: none !important;
  outline: none;
  /* 順便移除點擊時的藍色外框 */
}

/* 確保滑鼠移上去時也不會出現底線 */
.lotto-btn:active,
.lotto-btn:focus {
  text-decoration: none !important;
  outline: none;
  /* 順便移除點擊時的藍色外框 */
}

/* 按鈕顏色清單 (與圖片顏色對應) */
.btn-blue {
  background-color: #4a90e2;
}

.btn-green {
  background-color: #28a745;
}

.btn-green-dark {
  background-color: #1e7e34;
}

.btn-purple-light {
  background-color: #a95cc8;
}

.btn-orange {
  background-color: #e67e22;
}

.btn-pink {
  background-color: #c52a2a;
}

.btn-pink-dark {
  background-color: #b1166e;
}

.btn-pink-light {
  background-color: #e86868;
}

.btn-purple-dark {
  background-color: #8f2db9;
}

.btn-teal {
  background-color: #0f7474;
}

.btn-orange-dark {
  background-color: #f05c01;
}

.btn-empty {
  flex: 1;
}

/* 佔位用 */

/* 針對極小螢幕或 175% 以上縮放的微調 */
@media (max-width: 480px) {
  .section {
    padding: 5px;
  }

  .button-row {
    gap: 4px;
  }

  .lotto-btn {
    border-width: 1px;
  }
}

/* 4. 大樂區塊置中靠左 */
.justify-start-center {
  display: flex;
  justify-content: flex-start;
  /* 靠左 */
  padding-left: 5%;
  /* 稍微往中間推一點達到「置中靠左」感 */
  gap: 15px;
}

.justify-center {
  justify-content: center !important;
  gap: 15px;
}

/* 5. 539 範例/說明文字對齊與顏色 */



.example-link {
  color: blue !important;
  /* 關鍵 1：強制整行文字不換行 */
  white-space: nowrap; 
  
  /* 關鍵 2：使用彈性佈局讓內部元素（文字與 span）併排 */
  display: inline-flex;
  align-items:center;
  
  /* 調整字體縮放，確保在小螢幕也能自適應 */
  font-size: clamp(0.5rem, 3vw, 1.5rem);
  text-decoration: underline;
    /* 如果寬度太窄，允許縮小字體而不是斷行 */
  flex-shrink: 0; 
  margin-right: 0 !important;  
}

/* 這是最關鍵的一段：強制排除 span 受到父層底線的影響 */
.example-link .vip-text {
  display: inline-block; /* 必須是 inline-block 或 block */
  text-decoration: none !important;
}

/* 當滑鼠移入整個連結時 */
.example-link:hover {
  text-decoration: none; /* 確保「範例」底線不見 */
}

/* 再次強調 hover 時 span 依然不要底線 */
.example-link:hover .vip-text {
  text-decoration: none !important;
}

.vip-text {
  color: red;
  font-size: clamp(0.5rem, 2.5vw, 1.5rem);
  text-decoration: none !important;
  /* 強制移除底線 */
  display: inline-block;
  /* 確保屬性生效 */
  pointer-events: none;
  /* 關鍵：使滑鼠無法點選、無手型游標 */
  cursor: default;
  /* 確保 span 內部也不會斷開 */
  white-space: nowrap; /* 確保 (限VIP4) 內部不換行 */
  margin-left: 2px; /* 增加一點點間距 */  
}

.vip-text:hover {
  text-decoration: none !important;
}


.desc-link {
  margin-left: 0 !important;
  font-size: clamp(0.5rem, 2.5vw, 1.5rem);
  /* 說明文字較小 */
  color: red !important;
  font-weight: normal;
  display: inline-block;
  white-space: nowrap; /* 確保 說明 內部不換行 */
}



.desc-link:hover {
  text-decoration: none !important;
}

.vip {
  font-size: clamp(0.5rem, 3vw, 1.5rem);
  /* 說明文字較小 */
  color: red !important;
  font-weight: normal;
}





/* 測試結束 */

/* === LOGO區 按鈕 === */
/* 要在手機版最小尺寸時，讓六顆按鈕維持兩列三行的佈局 */
/* 替換為背景圖並設定樣式 */
.custom-navbar {
  /* 使用 CSS 漸層模擬水藍色背景圖，載入速度快。*/
  /* 如果您有自己的圖片，請用 background-image: url('您的圖片網址'); 取代 */
  background-image: linear-gradient(to right, #e0f7fa, #b2ebf2);
  background-size: cover;
  background-position: center;
  align-items: center;
  /* 垂直置中對齊 Logo 和按鈕區 */
  background-color: #007bff;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: none;
  /* 移除底部邊框，使其與下方元素無縫連接 */
  box-shadow: none;
  /* 移除底部陰影，使其與下方元素無縫連接 */
}

/* 設定 CSS 變數，用於按鈕間距 */
:root {
  --button-gap: 15px;
  /* 按鈕左右間距 */
  --container-padding: 15px;
  /* 容器左右內邊距 */
}

/* LOGO圖 */
.logo-image {
  height: 65px;
  width: auto;
}

/* 手機版logo縮小10% */
@media (max-width: 767px) {
  .logo-image {
    height: 58.5px;
  }
}

/* 針對[未登入]文字，確保任何尺寸下都不換行 */
.text-danger {
  white-space: nowrap;
}

/* logo區 按鈕行佈局 */
.button-row-1,
.button-row-2 {
  display: flex;
  justify-content: center;
  /* 水平居中按鈕 */
  width: 100%;
  /* 佔據其父容器寬度 */
  flex-wrap: nowrap;
  /* 確保按鈕不會在這一行內換行，這是為了實現三列 */
  gap: var(--button-gap);
  /* 使用變數設定間距 */
}

.button-row-2 {
  margin-top: var(--button-gap);
}

/* 針對平板尺寸(寬度約768px~991px),讓[未登入] 不換行 */
@media (min-width: 768px) and (max-width: 991px) {
  .text-danger {
    font-size: clamp(14px, 2vw, 18px);
    white-space: nowrap;
    /* 不換行，強制一行呈現 */
    writing-mode: horizontal-tb !important;
    /* 強制行內書寫方向，避免原本被改成垂直 */
    display: inline-block;
    /* 避免被父容器或 flex 影響而斷行 */
  }
}

/* 針對較大螢幕和電腦版特殊調整 */
@media (min-width: 992px) {
  .nav-buttons-container {
    max-width: 800px;
  }

  .navbar-nav .nav-item {
    margin-right: -5px; /* 利用負邊距讓選單項目靠得更近 */
  }

  .nav-buttons-container a {
    width: 140px;
    padding: 15px;
    font-size: 1.5rem;
  }
}

@media (max-width: 1200px) {
  .nav-buttons-container {
    /* 螢幕太小時，按鈕與左方保持微小間距並允許縮小 */
    margin-left: 10px;
    flex-grow: 1;
  }
}



/* LOGO區導航按鈕容器的基礎樣式，適用所有螢幕 */
.nav-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  /* 增加左右內邊距，讓按鈕群組置中時，與螢幕邊緣有適當空隙 */
  padding: 0 var(--container-padding);
  margin: 10px auto;
}

/* 所有按鈕的基礎樣式 */
.nav-buttons-container a {
  /* 寬度公式：(容器寬度 - 兩側內邊距 - 兩個間距) / 3 */
  width: calc((100% - (var(--container-padding) * 2) - (var(--button-gap) * 2)) / 3);

  /* 使用 clamp() 讓字體大小隨螢幕寬度彈性縮放 */
  font-size: clamp(16px, 2vw, 22px);

  /* 確保按鈕有足夠的點擊高度,按鈕高度與文字不換行 */
  padding: 12px 5px;
  text-align: center;
  flex-grow: 0;
  text-decoration: none;
  font-weight: bold;
  color: white;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* 所有 nav-button 樣式 - 針對手機最小尺寸的精簡調整 */
.nav-button1,
.nav-button2,
.nav-button3,
.nav-button4,
.nav-button5,
.nav-button6 {
  /* 基礎按鈕樣式 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: bold;
  color: white;
  background-color: #5cb85c;
  border: 1px solid #5cb85c;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
  /* 確保文字不換行 */
  overflow: hidden;
  /* 隱藏溢出內容 */
  text-overflow: ellipsis;
  /* 溢出時顯示省略號 */
  box-sizing: border-box;
  /* 確保 padding 和 border 包含在 width 內 */
  /* 核心調整：按鈕尺寸和文字大小，使其在手機最小尺寸實現三列 */
  /* 使用 calc() 考慮 gap，確保總寬度不超出 */
  /* (100% 寬度 - 兩倍的 gap 間距) / 3 個按鈕 */
  width: calc((100% - 2 * 8px) / 3);
  /* 保持不變: 基於新的 gap 重新計算寬度 */
  padding: 5px 10px;
  /* 調整: 上下變窄，左右加寬 */
  font-size: 1.1rem;
  /* 保持不變: 文字大小 */
}

/* 特定按鈕的顏色 (例如之前的 btn-primary 樣式) */
.nav-button1 {
  background-color: #27B1BE;
  border-color: #27B1BE;
}

.nav-button4 {
  background-color: #FF0063;
  border-color: #FF0063;
}

.nav-button2 {
  background-color: #F86F03;
  border-color: #F86F03;
}

.nav-button5 {
  background-color: #6f1fca;
  border-color: #6f1fca;
}

.nav-button3 {
  background-color: #028938;
  border-color: #028938;
}

.nav-button6 {
  background-color: #0075f3;
  border-color: #0075f3;
}

/* 滑鼠移入按鈕的效果 */
.nav-button1:hover,
.nav-button2:hover,
.nav-button3:hover,
.nav-button4:hover,
.nav-button5:hover,
.nav-button6:hover {
  background-color: #FFFF37;
  /* 移入時背景色 */
  color: red;
  /* 移入時文字顏色 */
  border: 1px solid red;
  /* 移入時邊框顏色也跟著變 */
  opacity: 0.8;
  /* 懸停效果 (Hover effects) */
}

/* 手機版和最小螢幕調整 */
@media (max-width: 767px) {

  .nav-button1,
  .nav-button2,
  .nav-button3,
  .nav-button4,
  .nav-button5,
  .nav-button6 {
    padding: 2px 16px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {

  .nav-button1,
  .nav-button2,
  .nav-button3,
  .nav-button4,
  .nav-button5,
  .nav-button6 {
    padding: 2px 14px;
    font-size: 0.75rem;
  }
}

/* === 導覽列+漢堡選單 === */
/* 確保漢堡選單的導覽列沒有頂部邊框或陰影影響連接 */
.navbar-custom-bg {
  background-color: #0246c5;
}

.navbar {
  border-top: none;
  box-shadow: none;
}

/* 確保漢堡選單的標題和連結樣式符合 Bootstrap 5 */
.navbar-nav .nav-link {
  color: #ffffff;
  font-weight: 500;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: color 0.3s ease;
  font-weight: bold;
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-nav .nav-link:hover {
  color: #ffee00;
}

.navbar-brand {
  color: #ffffff;
  font-weight: bold;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* 設定 主選單 文字的預設顏色 */
.main-menu-text {
  font-size: 24px;
  color: #66B3FF;
  transition: color 0.3s ease;
  /* 讓顏色變化更平滑 */
}

/* 當滑鼠滑入時的樣式 */
.main-menu-text:hover {
  color: #fedc01;
}

/* 針對手機及平板 (最大寬度991px可視情況調整)  讓導覽列連結文字不換行 */
@media (max-width: 991px) {

  /* 漢堡選單內連結文字 */
  .navbar-nav .nav-link {
    white-space: nowrap;
    /* 文字不換行 */
    font-size: clamp(16px, 3.5vw, 20px);
    /* 字體大小彈性調整 */
  }

  /* 加入會員按鈕文字 */
  .navbar-btn {
    white-space: nowrap;
    /* 放大文字尺寸 */
    font-size: clamp(16px, 3.5vw, 20px);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}


/* 導覽列+漢堡選單 文字樣式響應式調整 */
@media (max-width: 991px) {
  .navbar-collapse {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .navbar-nav {
    width: 100%;
  }

  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }

  .navbar-nav .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .btn.navbar-btn {
    /* 注意這裡的 .navbar-btn 類別，在 Bootstrap 5 中已棄用，但為了兼容原始碼先保留 */
    width: 100%;
    margin-top: 1rem;
    margin-left: 0;
    margin-right: 0;
  }
}

/* === 導覽列的加入會員按鈕 === */
.btn.btn-outline-warning {
  background-color: #f32719;
  /* 黃色背景 */
  color: #FFFFFF;
  /* 紅色文字 */
  border-color: #f32719;
  /* 邊框顏色與背景相同，保持整體感 */
  font-size: 1.2rem;
  /* 字體加大，您可以根據需求調整這個值 */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  /* 平滑過渡效果 */
}

.btn.btn-outline-warning:hover {
  background-color: #fbff00;
  /* 滑鼠移入時，深藍色背景 */
  color: #ff1c33;
  /* 滑鼠移入時，白色文字 */
  border-color: #fbff00;
  /* 滑鼠移入時，邊框顏色與背景相同 */
}

/* === 將九宮格置中於頁面 === */
body,
html {
  height: 100%;
  margin: 0;
  background-color: #f0f0f0;
  /* 頁面背景色，凸顯九宮格 */
}

/* 九宮格上下間距*/
.container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  /* 假設 m-2 是 1rem，那 1.5 倍就是 1.5rem * 2 = 3rem */
}

/* 九宮格容器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  /* 這是同時設定上下左右間距的簡寫，通常預設值為 1rem 或 16px */
  padding: 20px;
  background-color: #66B3FF;
  /* 九宮格背景色 */
  border-radius: 15px;
  /* 圓角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 外框陰影 */
  width: 100%;
  max-width: 450px;
  /* 可依需求調整最大寬度 */
}

/* 九宮格通用按鈕樣式 */
.grid-button {
  background-color: #004B97;
  /* 按鈕背景色 */
  color: white;
  /* 文字顏色 */
  border: 2px solid white;
  /* 白色外框 */
  border-radius: 10px;
  /* 圓角 */
  padding: 15px 10px;
  font-size: 1.4rem;
  /* 預設字體大小 */
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  /* 過渡效果 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* === 新增/修改的部分 Start === */
  white-space: nowrap;
  /* 強制文字不換行 */
  overflow: hidden;
  /* 隱藏溢出內容 */
  text-overflow: ellipsis;
  /* 溢出時顯示省略號 */
  /* === 新增/修改的部分 End === */
}

/* 滑鼠移入按鈕的效果 */
.grid-button:hover {
  background-color: #FFFF37;
  /* 移入時背景色 */
  color: red;
  /* 移入時文字顏色 */
  border: 2px solid #ff0000 !important;
  /* 移入時邊框顏色和邊框也跟著變*/
}

/* 組合10期 按鈕樣式 */
.special-button {
  background-color: #BF0060;
}

.special-button:hover {
  background-color: #FFFF37;
  color: red;
  border-color: #FFFF37;
}

/* 菜單按鈕的樣式 */
.blue-button {
  background-color: #0d00bf;
  /* 菜單按鈕背景色 */
}

/* 菜單按鈕滑鼠移入時的效果 (樣式同通用按鈕的hover) */
.blue-button:hover {
  background-color: #FFFF37;
  color: red;
  border-color: #FFFF37;
}

/* === 新增響應式字體大小控制 (用於小螢幕/手機) === */
@media (max-width: 576px) {

  /* 通常是 Bootstrap 的 'sm' 斷點以下，可依需求調整 */
  .grid-button {
    font-size: 1.5rem;
    /* 手機上縮小字體大小 */
    padding: 10px 5px;
    /* 進一步縮小內邊距，讓按鈕更緊湊 */
  }
}

@media (max-width: 400px) {

  /* 針對更小的螢幕 (如 iPhone 5/SE 或某些 Android 機型) */
  .grid-button {
    font-size: 1rem;
    /* 進一步縮小字體 */
    padding: 8px 4px;
    /* 再縮小內邊距 */
  }
}

@media (max-width: 320px) {

  /* 針對極小的螢幕 */
  .grid-button {
    font-size: 0.85rem;
    /* 最小字體 */
    padding: 6px 3px;
    /* 最小內邊距 */
  }
}

/* === 自訂::: 後台菜單 展開/收合按鈕顏色 ==== */
.btn-light-gray {
  background-color: #e9e8e8;
  /* 淺灰色背景 */
  border: 1px solid #e9e8e8;
  /* 淺灰色邊框 */
  color: #d1d1d1;
  /* 文字顏色 */
}

.btn-light-gray:hover {
  background-color: #d0d0d0;
  /* 懸停時顏色稍深 */
  border-color: #d0d0d0;
  /* 邊框色 */
}

/* 後台菜單 容器 */
.blank-collapse-space {
  min-height: 0;
  /* 設定最小高度來提供 10 行左右的空白 */
  /* 你也可以使用 padding 來增加空間，例如： */
  /* padding: 20px; */
  background-color: #f8f9fa;
  /* 稍微有點顏色的背景，表示這是一個區塊 */
  border: 1px solid #dee2e6;
  /* 增加邊框讓空白區塊更明顯 */
}

/* === 自訂::: 後台菜單 展開/收合按鈕,預留空間置入五排選單按鈕 === */
.center-collapse-btn {
  text-align: center;
  /* 讓按鈕的父元素內容置中 */
  margin-bottom: 0;
  /* 移除間距 */
  margin-top: 10px;
  /* 添加一點間距 */
  padding-top: 0;
  /* 移除間距 */
  padding-bottom: 0;
  /* 移除間距 */
}

.button-grid-container .button:hover,
.button-grid-container .grid-button:hover {
  border: 1px solid #ff0000 !important;
  /* 自訂::: 內的按鈕滑入時,背景色變紅色框線*/
}

/* 確保卡片內容區塊有最小高度，即使按鈕不多 */
.blank-collapse-space {
  min-height: 50px;
  /* 您可以根據需要調整這個值 */
  /* 這裡不再需要明確的 padding，因為 button-grid-container 會提供 */
}

/* 新增：按鈕網格容器的佈局和響應式調整 */
.button-grid-container {
  display: grid;
  gap: 8px;
  /* 按鈕之間的間距 */
  padding: 10px;
  /* 網格容器內部的內邊距 */
  /* 手機預設佈局：3 欄 */
  grid-template-columns: repeat(3, 1fr);
}

/* 小螢幕/手機的按鈕區塊和內文會自動縮小 */
@media (max-width: 767px) {

  .button,
  .button-grid-container .button,
  .button-grid-container .grid-button,
  .button-grid-container .special-button {
    font-size: 1.05em;
    padding: 7px 4px;
    /* 讓按鈕內文字縮小 */
  }

  .button-grid-container {
    font-size: 1.25em;
    /* 讓整個按鈕區塊的內容也跟著縮小 */
  }

  .button-grid-container .card-body,
  .button-grid-container .card,
  .button-grid-container .blank-collapse-space {
    font-size: 1.25em;
  }
}

/* Media query for smaller phone screens */
@media (max-width: 480px) {

  .button,
  .button-grid-container .button,
  .button-grid-container .grid-button,
  .button-grid-container .special-button {
    font-size: 1em;
    padding: 6px 3px;
  }

  .button-grid-container {
    font-size: 1.15em;
  }

  .button-grid-container .card-body,
  .button-grid-container .card,
  .button-grid-container .blank-collapse-space {
    font-size: 1.15em;
  }
}

/* 斷點：小螢幕 (例如 sm, ~576px 以上) - 調整為 4 欄 */
@media (min-width: 576px) {
  .button-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 斷點：中螢幕 (例如 md, ~768px 以上) - 調整為 5 欄 */
@media (min-width: 768px) {
  .button-grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 斷點：大螢幕 (例如 lg, ~992px 以上) - 調整為 7 欄 */
@media (min-width: 992px) {
  .button-grid-container {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* 保持最後兩顆空白按鈕在小螢幕與其他按鈕同尺寸 */
@media (max-width: 767px) {
  .button.keep-size {
    font-size: 1em !important;
    padding: 10px 8px !important;
    min-width: 60px;
    /* 可依實際按鈕寬度微調 */
    min-height: 55px;
    /* 可依實際按鈕高度微調 */
  }
}

@media (max-width: 480px) {
  .button.keep-size {
    font-size: 1em !important;
    padding: 10px 8px !important;
    min-width: 60px;
    min-height: 55px;
  }
}

/* === 卜號碼 按鈕置中 ===*/
.myButton {
  display: block;
  /* 將按鈕轉換為區塊元素 */
  margin-left: auto;
  /* 左邊距自動 */
  margin-right: auto;
  /* 右邊距自動 */
  /* 或者簡寫為 margin: 0 auto; */
  box-shadow: 3px 5px 0px 2px #f6ba43;
  background: linear-gradient(to bottom, #ffffcb 5%, #ffffcb 100%);
  background-color: #ffffcb;
  border-radius: 5px;
  border: 1px solid #ff0303;
  display: inline-block;
  cursor: pointer;
  color: #9d140d;
  font-family: Arial;
  font-size: 24px;
  font-weight: bold;
  padding: 12px 40px;
  text-decoration: none;
}

/* --- 修改後的 hover 效果 --- */
.myButton:hover {
  background: #ffff00;
  color: #db1700;
  text-decoration: none;
}

.myButton:active {
  position: relative;
  top: 1px;
}

/* === 新特殊命理網LOGO和超連結 ===*/
/* 步驟1: 讓整個 Logo 區塊水平置中 */
.logo-container {
  text-align: center;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  width: 100%;
  /* 確保容器佔滿全寬，居中才有意義 */
}

/* 步驟2: 設定連結區塊的樣式，這是關鍵 */
/* 父層容器：確保圖片與文字永遠並排 */
.logo-link {
  display: flex;
  align-items: center;
  /* 讓圖片與文字對齊 */
  justify-content: center;
  /* 內容物（圖+文）水平置中 */
  text-decoration: none;
  flex-wrap: nowrap;
  /* 強制不換行 */
  max-width: 100%;
  overflow: hidden;
  /* 避免溢出 */
  color: inherit;
  /* 讓文字繼承父層的顏色，避免超連結預設的藍色 */
}

/* (可選) 替連結加上一個滑鼠滑過的簡單效果 */
.logo-link:hover {
  opacity: 0.8;
  transition: opacity 0.2s;
  /* 讓透明度變化更平滑 */
}

/* 圖片樣式：固定大小不被擠壓 */
.logo1-image {
  flex-shrink: 0;
  /* 重要：避免圖片被文字擠小 */
  margin-right: 8px;
  /* 圖片與文字的間距 */
}

/* 步驟3: 設定文字與圖片的間距 */
.logo-text {
  /* 1. 間距與粗細 */
  /* 改用動態左間距：在縮放或小螢幕時自動縮小間距，避免擠壓文字空間 */
  margin-left: clamp(0.5rem, 2vw, 1.4rem);
  font-weight: bold;
  color: #0044ff;

  /* 2. 核心：強制不換行 */
  white-space: nowrap;
  display: inline-block;
  /* 保持在同一行並允許設定邊距 */
  vertical-align: middle;

  /* 3. clamp 的中間值必須加單位 (vw) */
  font-size: clamp(1.3rem, 4vw, 1.5rem);

  /* 4. 強制處理溢出：萬一空間真的不足，文字會自動切斷而非掉下去 */
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 當螢幕極小時，若還是塞不下則顯示 ... */
}

/* 設定新特殊命理網上下間距 */
.custom-margin {
  margin-top: 0;
  /* 假設 m-2 是 1rem，那 1.5 倍就是 1.5rem * 2 = 3rem */
  margin-bottom: 0;
  /* 如果不確定 m-2 的具體值，可以試著用 em 或 rem 的倍數來調整 */
  /* 比如，直接設定一個你認為足夠大的值 */
  /* margin-top: 45px; */
  /* margin-bottom: 45px; */
}

/* === VIP3會員 IP註冊 === */
.text-green {
  color: #078129 !important; /* 標準綠色，也可以直接寫 green */
}

/* 如果您不希望「IP註冊」四個字因為是連結而出現底線，可以加上： */
.text-green {
  text-decoration: none;
  display: inline-block; /* 配合前面教的，防止底線穿透 */
}

.vip-card .main-title a {
  font-size: 1.8rem !important;
  /* 直接給固定值最直觀 */
  text-decoration: none !important;
  /* 先去掉原始底線 */

  display: inline-block;
  /* 必須轉為區塊或內聯區塊，底線才有效 */
  border-bottom: 3px solid #dc3545;
  /* 自訂顏色與粗細的底線 */
  padding-bottom: 5px;
  /* 控制底線與文字的距離 */
}

/* 滑入文字 VIP3會員 IP註冊 內連結時，文字變色 */
.main-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
  text-decoration: none;
}

.main-title a:hover,
.main-title a:focus {
  color: #078129;
}

/* === VIP3會員 IP註冊 整體頁面背景 === */
.body-vip {
  /* 1. 關鍵：移除或改為 auto，讓高度由內容決定，不再強行撐開 */
  min-height: auto !important; 

  /* 2. 保持置中設定 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 3. 徹底鎖死間距為 0 (使用 px 確保不隨螢幕變動) */
  padding: 0 !important;
  margin: 0 !important;

  /* 4. 如果您希望跟上下物件有一點點固定的小縫隙，可以改用 px */
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* 主要內容卡片 */
.vip-card {
  background-color: #feedd8;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1rem 1.75rem;
  /* 第一個值代表上下，第二個值代表左右 */
  max-width: 600px;
  width: 100%;
  border-top: 5px solid #dc3545;
}

/* 手機版調整VIP卡片間距 */
@media (max-width: 767px) {
  .vip-card {
    padding: 0.25rem 1.75rem;
  }
}

/* 主標題 */
.main-title {
  color: #dc3545;
  font-weight: bold;
  font-size: clamp(1rem, 3vw, 1.8rem);
  /* 最小值、首選值、以及最大值 */
  /* 自動縮放字體大小 */
  white-space: nowrap;
  /* 強制文字不換行 */
  overflow: hidden;
  /* 隱藏溢出內容 */
  text-overflow: ellipsis;
  /* 溢出時顯示省略號 */
  text-decoration: underline;
  text-decoration-color: #dc3545;
  text-underline-offset: 8px;
  /* 底線與文字的距離 */
  margin-bottom: 1.05rem;
  /* 縮短30%: 1.5rem * 0.7 */
  margin-top: 0.693rem;
  /* 設置與最後一行下方間距相同，縮短10%: 0.77rem * 0.9 */
}

/* 副標題 (使用說明連結) */
.subtitle-link {
  font-weight: bold;
  color: #0d6efd;
  /* Bootstrap's primary color */
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.7rem;
  /* 縮短30%: 1rem * 0.7 */
  border: 1px solid #0d6efd;
  padding: 8px 8px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.subtitle-link:hover {
  background-color: #0d6efd;
  color: #fff;
}

/* 列表樣式 */
.feature-list {
  list-style: none;
  padding-left: 0;
  font-size: 1.1rem;
}

.feature-list li {
  margin-bottom: 0.56rem !important;
  /* 縮短30%: 0.8rem * 0.7 */
  display: flex;
  align-items: center;
}

/* 自訂彩色項目符號 */
.feature-list li::before {
  content: '●';
  /* 使用實心圓點 */
  font-size: 0.75em;
  /* 調整圓點大小，縮小一半 */
  margin-right: 15px;
  /* 圓點與文字的間距 */
}

/* 不同項目的顏色 */
.feature-list .item-1::before {
  color: #dc3545;
  /* 紅色 */
}

.feature-list .item-2::before {
  color: #dc3545;
  /* 紅色 */
}

.feature-list .item-3::before {
  color: #0d6efd;
  /* 藍色 */
}

/* 限制文字樣式 */
.restriction {
  color: #dc3545;
  font-weight: 500;
  margin-left: 10px;
}

/* 頁尾提醒文字 */
.footer-note {
  margin-top: 0.77rem;
  /* 縮短30%: 1.1rem * 0.7 */
  font-size: 1rem;
  font-weight: 500;
  color: #dc3545;
  /* Bootstrap's danger color for the prefix */
  margin-bottom: 0.693rem;
  /* 設置與第一行上方間距相同，縮短10%: 0.77rem * 0.9 */
}

.footer-note .contact-info {
  color: #198754;
  /* Bootstrap's success color */
  font-weight: bold;
}

/* VIP3會員IP註冊文字自動縮小和不換行 */
.vip-card h1,
.vip-card a,
.vip-card li,
.vip-card p {
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  /* 縮短行高 */
}

/* 手機版和最小螢幕調整 */
@media (max-width: 767px) {

  .vip-card h1,
  .vip-card a,
  .vip-card li,
  .vip-card p {
    font-size: clamp(0.7rem, 3vw, 1rem);
  }
}

@media (max-width: 480px) {

  .vip-card h1,
  .vip-card a,
  .vip-card li,
  .vip-card p {
    font-size: clamp(0.6rem, 4vw, 0.9rem);
  }
}

/* === 539 抓牌專區 === */
.layered-background-container1 {
  position: relative;
  background-color: #ecb2e6;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  padding: 40px 30px;
  /* 上下,左右*/
  margin: 0 auto;
  /* ...其他樣式... */
  min-height: 250px;
  /* 設定一個最小高度，例如 250px */
  /* ...其他樣式... */
}

/* 539 抓牌專區 背景圖案 (淺白色線條和三角形) */
.layered-background-container1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* 確保在內容下方 */

  /* 疊加多層背景：淺白色線條 + 微透明白色小三角形 */
  background:
    /* 第一層：淺淺的白色網格線條 */
    linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    /* 垂直線條 */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    /* 水平線條 */

    /* 第二層：微透明白色小三角形 */
    linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.04) 100%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    linear-gradient(315deg, transparent 50%, rgba(255, 255, 255, 0.03) 100%);

  /* 線條和三角形圖案的尺寸和重複 */
  background-size: 50px 50px, 50px 50px,
    /* 線條的間距 */
    25% 25%, 25% 25%, 25% 25%, 25% 25%;
  /* 三角形的尺寸 */
  background-position: 0 0, 0 0,
    /* 線條從左上角開始 */
    0 0, 0 0, 0 0, 0 0;
  /* 三角形從左上角開始 */
  background-repeat: repeat;
  /* 確保所有背景都重複平鋪 */
}

.custom-container-bg {
  position: relative;
  background-color: #e7b5d8;
  padding: 25px;
}

/* 確保內容顯示在所有背景圖案上方 */
/* 為所有直接位於 .custom-container-bg 或 .layered-background-container 下的 row 元素設置 z-index */
.custom-container-bg>.row,
.layered-background-container1>.row {
  position: relative;
  /* 啟用 z-index */
  z-index: 2;
  /* 確保內容在偽元素上方 */
}

/* 調整欄位內邊距以增大間距 */
.col-spacing {
  padding: 15px;
  /* 根據需要調整群組之間的間距 */
}

/* === 大樂.六合.威力 VIP4 抓牌專區 === */
.layered-background-container {
  position: relative;
  background-color: #a3d1e6;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  padding: 40px 30px;
  margin: 0 auto;
}

/* 大樂.六合.威力 VIP4 抓牌專區 的背景圖案 (淺白色線條和三角形) */
.layered-background-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  /* 疊加多層背景：淺白色線條 + 微透明白色小三角形 */
  background:
    /* 第一層：淺淺的白色網格線條 */
    linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    /* 垂直線條 */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    /* 水平線條 */

    /* 第二層：微透明白色小三角形 */
    linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.04) 100%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    linear-gradient(315deg, transparent 50%, rgba(255, 255, 255, 0.03) 100%);

  /* 線條和三角形圖案的尺寸和重複 */
  background-size: 50px 50px, 50px 50px,
    /* 線條的間距 */
    25% 25%, 25% 25%, 25% 25%, 25% 25%;
  /* 三角形的尺寸 */
  background-position: 0 0, 0 0,
    /* 線條從左上角開始 */
    0 0, 0 0, 0 0, 0 0;
  /* 三角形從左上角開始 */
  background-repeat: repeat;
  /* 確保所有背景都重複平鋪 */
}

.custom-container-bg>.row,
.layered-background-container>.row {
  position: relative;
  z-index: 2;
}

/* === 抓牌專區通用樣式：用於確保每個按鈕區塊內容不超出 === */
.col-spacing {
  padding-bottom: 1px;
  /* 調整群組之間的間距 */
}

/* 539 抓牌專區 .text-button-group 樣式：將內容和按鈕封裝在一個視覺卡片中 */
/* 這是針對「所有」按鈕組的通用設定 */
.text-button-group {
  /* 這行確保了按鈕和下方的間距，你可以在這裡調整數值 */
  margin-bottom: 5px;
  /* 下方的間距，縮小一半*/
  /* 縮小按鈕上方的空間 */
  padding-top: 2.5px !important;
  padding-bottom: 2.5px !important;
}

@media (min-width: 768px) {

  /* 中等設備 (平板) 及更大螢幕 */
  .text-button-group {
    display: flex;
    background-color: transparent;
    text-align: center;
    margin-bottom: 4px;
    height: 100%;
    padding: 15px;
    /* 卡片內部內邊距 */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* 恢復內邊距、圓角和陰影，並將背景色設為透明 */
  }

  /* === 新增針對手機版的樣式，解決垂直間距問題 === */
  @media (max-width: 767px) {
    .text-button-group {
      /* 在手機上設定下方間距，製造空行 */
      margin-bottom: 7.5px;
    }
  }

  /* 特殊樣式用於「不出牌」按鈕 */
  .no-card-button {
    margin-top: 15px;
    /* 縮短「不出牌」按鈕上方的間距 */
  }


}

/* 539抓牌專區的範例 */
.item-text {
  display: flex;
  align-items: center;
  /* 新增這行，強制讓所有行內內容靠左對齊 */
  justify-content: flex-start;
  text-align: left;
  gap: 4px;
  /* 控制範例與限VIP4的間距，越小越靠近 */
}

/* 額外調整，讓兩個區塊間有間距 */
.item-text a:first-child {
  margin-right: 0.5rem;
}

/* 極限壓縮按鈕上下間距 */
.text-button-group {
  padding: 2px 0 !important;
  /* 縮減內距 */
}

.text-button-group .item-text {
  margin-bottom: 10px;
  text-align: left;
}

.text-button-group h4 {
  margin-bottom: 5px;
  text-align: left;
}

.text-button-group .btn {
  width: 100%;
  max-width: 200px;
  padding: 10px 0;
}

/* 調整 VIP4 抓牌專區的標題間距 */
.main-titles {
  margin-bottom: 15px;
}

.subtitle {
  margin-bottom: 25px;
}

.main-titles h1,
.subtitle h2 {
  margin-top: 0;
  margin-bottom: 0;
}

/* 539 抓牌專區標題 */
.grasp539 {
  font-weight: bold;
  color: red;
  /* 標題紅色 */
  font-size:clamp(1.3rem, 5vw, 2.3rem);
  /* 調整標題字體大小 */
  margin: 0px;
  /* 各個標題之間的間距 */
  white-space: nowrap;
  /* 防止單個標題文字換行 */
}

/* 確保 h4 內的內容即使有多個 span 也能保持在同一行 */
.item-text h4 {
  white-space: nowrap;
  /* 防止 h4 內部內容換行 */
  overflow: hidden;
  /* 如果內容超出，則隱藏超出部分 */
  text-overflow: ellipsis;
  /* 可選：如果內容超出，顯示省略號 */
  /* 按鈕上方文字樣式 #4B0082;*/
  color: #673ab7;
  /* 紫色 */
  font-weight: bold;
  margin-bottom: 10px;
  /* 文字與按鈕之間的間距 */
  text-align: left;
}

.item-text h4:hover {
  text-decoration: underline;
  /* 滑鼠移入時：為連結加上底線 */
}

.item-text h4 .label {
  color: #673ab7;
  font-weight: bold;
  text-align: left;
}

.item-text h4 .description {
  color: #00897b;
  font-weight: bold;
  text-align: left;
}

.item-text .vip-label {
  color: red;
  font-size: clamp(0.5em, 2vw, 0.7em);
  /* (限VIP4)標籤字體略小，自動縮小 */
  white-space: nowrap;
  /* 防止文字換行 */
  overflow: hidden;
  /* 隱藏超出按鈕寬度的部分 */
  text-overflow: ellipsis;
  /* 在文字被截斷時顯示 "..." */
  font-weight: normal;
  text-align: left;
}

/* 539抓牌專區：(限VIP4) 針對平板和電腦版預設不顯示底線 */
.vip-label {
  text-decoration: none;
  display: inline-block;
  transition: text-decoration 0.2s ease-in-out;
  /* 過渡效果讓變化更流暢 */
}

/* 539抓牌專區：(限VIP4) 針對小螢幕/手機觀看時自動縮小文字 */
/*  中等螢幕及手機斷點：寬度小於 768px  */
@media (max-width: 767px) {
  .item-label-container .vip-label {
    text-decoration: none;
    /* 修正單位為 vw，並調整數值讓它更小、更具彈性 */
    font-size: 2vw;
    margin-left: 0.5px;
    display: inline-block;
    color: #ffc107;
    font-weight: normal;
    vertical-align: middle;
  }
}

/*  針對更小的螢幕（例如：iPhone SE, 小型 Android 機）新增一個更小的斷點，進一步微調字體大小 */
@media (max-width: 380px) {
  .vip-label {
    /* 在極小螢幕上，將字體大小縮得更小，避免被切到 */
    font-size: 1.5vw;
  }
}

/* --- 自訂容器和按鈕間距的調整 --- */
/* 調整容器左右內邊距 */
.container {
  /* 預設的 Bootstrap .container 有 15px 的左右 padding，
               為了再加大，我們可以覆蓋它或在外部 div 增加 padding。
               這裡直接調整 .container 的 padding。 */
  padding-left: 25px;
  /* 增加左側內邊距 */
  padding-right: 25px;
  /* 增加右側內邊距 */
  /* 針對不同螢幕尺寸，Bootstrap 的 .container 會有 max-width。
               這裡的 padding 調整會作用於所有尺寸。 */
}

/* 大樂.六合.威力 標題字體顏色 */
.main-titles {
  display: flex;
  justify-content: center;
  /* 主標題水平居中 */
  align-items: baseline;
  /* 標題文字基準線對齊 */
  margin-bottom: 4px;
  /* 主標題和副標題之間的間距 */
  /* flex-wrap: wrap;  允許標題在小螢幕上換行 */
  white-space: nowrap;
  /* 防止單個標題文字換行 */
}

.main-titles h1 {
  font-size:clamp(1.3rem, 5vw, 2.3rem);
  /* 主標題較大字體 */
  margin: 0px;
  /* 各個標題之間的間距 */
  white-space: nowrap;
  /* 防止單個標題文字換行 */
}

/* 標題樣式 */
.big {
  color: #8f2db9;
}

.six {
  color: rgb(0, 125, 0);
}

.power {
  color: #eb5c03;
}

.v4 {
  color: rgb(147, 0, 0);
}

.subtitle {
  margin-bottom: 10px;
  /* 副標題與按鈕之間的間距 */
}

.subtitle h2 {
  font-size: clamp(0.8rem, 4vw, 1.8rem);
  /* 副標題字體大小 */

  font-weight: bold;
  margin: 0 10px;
  /* 各個標題之間的間距 */
  white-space: nowrap;
  /* 防止單個標題文字換行 */
}

/* 新增顏色控制 */
.text-red {
  color: red; /* VIP4 變紅色 */
}

.text-purple {
  color: #b1166e; /* 抓牌專區 變紫色 */
}

/* 自訂按鈕顏色 */
.btn-custom-purple-dark {
  background-color: #8A2BE2;
  border-color: #8A2BE2;
  color: white;
  font-weight: bold;
  padding: 12px 24px;

  /* 使用 clamp() 函數，讓字體大小自動在 1rem 到 1.5rem 之間變化，
    同時以 5vw 的比例彈性縮放。
    這樣在所有螢幕尺寸下，字體大小都不會超出範圍。
  */
  font-size: clamp(1rem, 5vw, 1.5rem);
  width: 100%;
  max-width: 250px;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  white-space: nowrap;
  /* 強制文字不換行。 */
  overflow: hidden;
  /* 隱藏超出容器範圍的內容。 */
  text-overflow: ellipsis;
  /* 在文字被截斷處，以省略號（...）表示。 */
}

/* 這裡就不需要再使用 @media 斷點來調整字體大小了 */

.btn-custom-purple-dark:hover {
  background-color: #FFFACD;
  /* 背景色：淡黃色 (Lemon Chiffon)，模仿圖片 */
  border-color: #D2691E;
  /* 外框顏色：橘棕色 (Chocolate)，模仿圖片 */
  color: #8B4513;
  /* 文字顏色：深棕紅色 (Saddle Brown)，模仿圖片 */
  text-decoration: none;
  /* 移除文字下劃線 */
  /* 外框加有顏色的下陰影，濃淡和陰影長度由您調整 */
  /* box-shadow: [水平偏移] [垂直偏移] [模糊半徑] [擴散半徑] [顏色]; */
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  /* 右下方橘棕色陰影 */
}

/* 不出牌 按鈕顏色 */
.btn-custom-pink {
  background-color: #e928c9;
  /* 原始的粉紅/紫色，這是按鈕未懸停時的顏色 */
  border-color: #e91e63;
  color: white;
  /* 原始的文字顏色 */
  font-weight: bold;
  padding: 12px 24px;
  font-size: clamp(1rem, 5vw, 1.5rem);
  width: 100%;
  max-width: 250px;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-custom-pink:hover {
  background-color: #FFFACD;
  /* 背景色：淡黃色 (Lemon Chiffon)，模仿圖片 */
  border-color: #D2691E;
  /* 外框顏色：橘棕色 (Chocolate)，模仿圖片 */
  color: #8B4513;
  /* 文字顏色：深棕紅色 (Saddle Brown)，模仿圖片 */
  text-decoration: none;
  /* 移除文字下劃線 */

  /* 外框加有顏色的下陰影，濃淡和陰影長度由您調整 */
  /* box-shadow: [水平偏移] [垂直偏移] [模糊半徑] [擴散半徑] [顏色]; */
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  /* 右下方橘棕色陰影 */
}


/* 自訂 紅色按鈕 */
.btn-custom-purple {
  background-color: #e91e63;
  /* 原始的粉紅/紫色，這是按鈕未懸停時的顏色 */
  border-color: #e91e63;
  color: white;
  /* 原始的文字顏色 */
  font-weight: bold;
  padding: 12px 24px;
  font-size: clamp(1rem, 5vw, 1.5rem);
  width: 100%;
  max-width: 250px;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-custom-purple:hover {
  background-color: #FFFACD;
  /* 背景色：淡黃色 (Lemon Chiffon)，模仿圖片 */
  border-color: #D2691E;
  /* 外框顏色：橘棕色 (Chocolate)，模仿圖片 */
  color: #8B4513;
  /* 文字顏色：深棕紅色 (Saddle Brown)，模仿圖片 */
  text-decoration: none;
  /* 移除文字下劃線 */

  /* 外框加有顏色的下陰影，濃淡和陰影長度由您調整 */
  /* box-shadow: [水平偏移] [垂直偏移] [模糊半徑] [擴散半徑] [顏色]; */
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  /* 右下方橘棕色陰影 */
}

/* 陰影參數說明：
   - 4px (水平偏移): 陰影向右偏移4像素。
   - 4px (垂直偏移): 陰影向下偏移4像素。
   - 10px (模糊半徑): 陰影邊緣模糊10像素，數值越大越模糊。
   - rgba(210, 105, 30, 0.7): 陰影顏色為橘棕色 (RGB: 210, 105, 30)，透明度為 0.7 (70%不透明)。
     您可以調整透明度 (最後一個數字 0.0 到 1.0) 來控制陰影的濃淡。
     您可以調整偏移量 (前兩個數字) 來控制陰影的「長度」或位置。
     您可以調整模糊半徑 (第三個數字) 來控制陰影的「濃淡」（模糊程度）。
*/

/* VIP5專區 金色按鈕 */
.btn-custom-gold {
  background-color: #FFD700;
  border: 3px solid #ff0000;
  color: #ff0000;
  font-weight: bold;
  /* 加上一點深灰色的陰影，創造立體效果 */
  text-shadow: 2px 1px 0px #fffb00;
  padding: 12px 24px;
  font-size: clamp(1rem, 5vw, 1.5rem);
  width: 100%;
  max-width: 250px;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* === 新增以下程式碼，創造閃亮背景效果 === */
  position: relative;
  z-index: 1;
  background-image: linear-gradient(45deg, #CFB53B 0%, #CFB53B 15%, #fdf9d9 50%, #FFFACD 60%, #CFB53B 80%);
  /* 讓中間的亮點更集中，兩側過渡更柔和 */
  /* 修正為 200% 200% 以適用對角線移動 */
  background-size: 200% 100%;
  /* 修正速度曲線為 linear，讓滑動不間斷 */
  animation: glitter-shine 3s linear infinite;
}

/* === 動畫關鍵影格,亮光從左而右移動 === */
@keyframes glitter-shine {
  from {
    background-position: 100% 100%;
    /* 從左上角附近開始 */
  }

  to {
    background-position: -100% -100%;
    /* 移動到右下角附近 */
  }
}

/* 移除 :hover 區塊中所有與 background 相關的樣式，讓效果持續 */
.btn-custom-gold:hover {
  /* 讓閃亮動畫暫停 */
  animation-play-state: paused;
  background-color: #FFFACD;
  /* 背景色：淡黃色 (Lemon Chiffon)，模仿圖片 */
  border-color: #D2691E;
  /* 外框顏色：橘棕色 (Chocolate)，模仿圖片 */
  color: #8B4513;
  /* 文字顏色：深棕紅色 (Saddle Brown)，模仿圖片 */
  text-decoration: none;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
}

.btn-custom-blue {
  background-color: #007bff;
  border-color: #FF9800;
  color: white;
  font-weight: bold;
  padding: 12px 24px;

  /* 使用 clamp() 函數，讓字體大小自動在 1rem 到 1.5rem 之間變化，
    同時以 5vw 的比例彈性縮放。
    這樣在所有螢幕尺寸下，字體大小都不會超出範圍。
  */
  font-size: clamp(1rem, 5vw, 1.5rem);
  width: 100%;
  max-width: 250px;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-custom-blue:hover {
  background-color: #FFFACD;
  /* 背景色：淡黃色 (Lemon Chiffon)，模仿圖片 */
  border-color: #D2691E;
  /* 外框顏色：橘棕色 (Chocolate)，模仿圖片 */
  color: #8B4513;
  /* 文字顏色：深棕紅色 (Saddle Brown)，模仿圖片 */
  text-decoration: none;
  /* 移除文字下劃線 */
  /* 外框加有顏色的下陰影，濃淡和陰影長度由您調整 */
  /* box-shadow: [水平偏移] [垂直偏移] [模糊半徑] [擴散半徑] [顏色]; */
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  /* 右下方橘棕色陰影 */
}

.btn-custom-green {
  background-color: #4CAF50;
  border-color: #4CAF50;
  color: white;
  font-weight: bold;
  padding: 12px 24px;

  /* 使用 clamp() 函數，讓字體大小自動在 1rem 到 1.5rem 之間變化，
    同時以 5vw 的比例彈性縮放。
    這樣在所有螢幕尺寸下，字體大小都不會超出範圍。
  */
  font-size: clamp(1rem, 5vw, 1.5rem);
  width: 100%;
  max-width: 250px;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-custom-green:hover {
  background-color: #FFFACD;
  border-color: #D2691E;
  /* 外框顏色：橘棕色 (Chocolate)，模仿圖片 */
  color: #8B4513;
  /* 文字顏色：深棕紅色 (Saddle Brown)，模仿圖片 */
  text-decoration: none;
  /* 移除文字下劃線 */
  /* 外框加有顏色的下陰影，濃淡和陰影長度由您調整 */
  /* box-shadow: [水平偏移] [垂直偏移] [模糊半徑] [擴散半徑] [顏色]; */
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  /* 右下方橘棕色陰影 */
}

.btn-custom-orange {
  background-color: #FF9800;
  border-color: #FF9800;
  color: white;
  font-weight: bold;
  padding: 12px 24px;

  /* 使用 clamp() 函數，讓字體大小自動在 1rem 到 1.5rem 之間變化，
    同時以 5vw 的比例彈性縮放。
    這樣在所有螢幕尺寸下，字體大小都不會超出範圍。
  */
  font-size: clamp(1rem, 5vw, 1.5rem);
  width: 100%;
  max-width: 250px;
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-custom-orange:hover {
  background-color: #FFFACD;
  border-color: #D2691E;
  /* 外框顏色：橘棕色 (Chocolate)，模仿圖片 */
  color: #8B4513;
  /* 文字顏色：深棕紅色 (Saddle Brown)，模仿圖片 */
  text-decoration: none;
  /* 移除文字下劃線 */
  /* 外框加有顏色的下陰影，濃淡和陰影長度由您調整 */
  /* box-shadow: [水平偏移] [垂直偏移] [模糊半徑] [擴散半徑] [顏色]; */
  box-shadow: 4px 4px 1px rgba(210, 105, 30, 0.7);
  /* 右下方橘棕色陰影 */
}

/* === 二中一 h1 的 class 樣式 === */
.my-title {
  font-weight: bold;
  font-size:clamp(1.5rem, 5vw, 2.5rem);
/* 1. 移除外邊距：這是縮短間距最有效的方法 */
  margin: 0;

  /* 2. 調低行高：1.5 代表字體高度的 1.5 倍，改為 1.2 或 1.1 會更緊湊 */
  line-height: 1.1;
}

/* ---二中一 點擊圖片會放大--- */
/* 點擊圖片放大並在右上角出現X符號(手動關閉) 樣式開始 */
.clickable-img {
  /* 圖片基礎樣式，已包含在您的 HTML 中的 Bootstrap 類別 img-fluid d-block */
  max-width: 100%;
  /* 確保圖片寬度不超出容器 */
  height: auto;
  /* 維持圖片比例 */
  display: block;
  /* 確保 margin auto 有效 */
  /* **新增：水平置中圖片** */
  margin-left: auto;
  margin-right: auto;
  /* 讓圖片有可點擊的指標 */
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.clickable-img:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal {
  display: none;
  /* 預設隱藏 */
  position: fixed;
  /* 固定位置，蓋在整個畫面上 */
  z-index: 1000;
  /* 確保在最上層 */
  padding-top: 250px;
  /* 距離頂部一些空間 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* 如果圖片太大，允許滾動 */
  background-color: rgba(0, 0, 0, 0.9);
  /* 黑色半透明背景 */
}

/* Modal Content (the image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  animation-name: zoom;
  animation-duration: 0.6s;
}

/* 放大動畫 */
@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button (X) */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 在小螢幕上，讓圖片寬度100% */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

/* === 週三週四簡報 移入圖片放大120% === */
.thumbnail-image {
  cursor: pointer;
  max-width: 100%;
  height: auto;
  display: block;
  /* 確保圖片在其容器內，避免溢出 */
  overflow: hidden;
  /* 新增：為變形屬性添加過渡效果，讓放大更平滑 */
  transition: transform 0.3s ease-in-out;
  /* 0.3秒的平滑過渡 */
}

/* 新增：滑鼠移入時的放大效果 */
.thumbnail-image:hover {
  transform: scale(1.2);
  /* 將圖片放大 1.1 倍 (即 110%) */
  z-index: 10;
  /* 可選：確保放大時圖片在其他內容之上 */
}

/* === 幻燈片(輪播二張圖:週三週四休息 和 法會報名) 響應式圖片與固定文字 ===*/
/* 確保 Carousel caption 內的文字大小在不同螢幕尺寸下合理顯示 */
.carousel-caption h1 {
  font-size: 1.2rem;
  /* 手機版 H1 預設字體大小 */
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.carousel-caption h2 {
  font-size: 0.8rem;
  /* 手機版 H2 預設字體大小 */
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.carousel-caption h3 {
  font-size: 0.7rem;
  /* 手機版 H3 預設字體大小 */
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

/* 小型設備 (例如：寬度 >= 576px) */
@media (min-width: 576px) {
  .carousel-caption h1 {
    font-size: 1.75rem;
  }

  .carousel-caption h2 {
    font-size: 1.05rem;
  }

  .carousel-caption h3 {
    font-size: 1rem;
  }
}

/* 中等設備 (例如：寬度 >= 768px) */
@media (min-width: 768px) {
  .carousel-caption h1 {
    font-size: 2.5rem;
    /* 平板/電腦版 H1 字體大小 */
  }

  .carousel-caption h2 {
    font-size: 1.75rem;
    /* 平板/電腦版 H2 字體大小 */
  }

  .carousel-caption h3 {
    font-size: 1.25rem;
    /* 平板/電腦版 H3 字體大小 */
  }
}

/* 輪播文字位置調整 (確保在所有尺寸下都能居中且不會太寬) */
.carousel-caption {
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
  /* 精確垂直居中 */
  bottom: auto;
  /* 移除底部限制 */
  left: 50%;
  transform: translateX(-50%);
  /* 精確水平居中 */
  right: auto;
  width: 90%;
  /* 手機版文字容器寬度調整 */
  max-width: 700px;
  /* 電腦版最大寬度限制 */
  color: #fff;
  /* 預設文字顏色，確保在深色背景圖上可見 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  /* 添加文字陰影增加可讀性 */
  text-align: center;
  /* 文字內容居中 */
  padding: 10px;
  /* 內邊距，防止文字貼邊 */
}

/* 圖片容器響應式處理 - 確保圖片在任何尺寸下都填滿並保持比例 */
.carousel-inner img {
  object-fit: cover;
  /* 圖片覆蓋整個區域，可能會裁剪 */
  height: 100%;
  /* 確保圖片高度填滿容器 */
  min-height: 250px;
  /* 設定輪播圖片的最小高度，防止手機上過矮 */
  max-height: 600px;
  /* 設定輪播圖片的最大高度，防止電腦上過高 */
  width: 100%;
  /* 寬度填滿 */
}

/* 針對輪播 小螢幕/手機調整輪播文字和按鈕大小 */
.carousel-caption.text-shadow {
  text-shadow: 2px 2px 4px rgba(108, 108, 108, 0.7);
}

/* 針對小螢幕或手機版 調整輪播文字和按鈕大小及排版 */
@media (max-width: 767px) {

  /* Bootstrap 的 sm 斷點以下，通常視為手機尺寸 */
  .carousel-caption {
    padding-left: 10px;
    padding-right: 10px;
    bottom: auto;
    /* 將 top 值從 50% 調整為一個更小的值，例如 40% 或 35%，讓整個區塊上移 */
    top: 36%;
    /* 調整此值以控制整體上移的距離，數值越小越往上 */
    /* 同步調整 translateY 的負值，以維持相對於新 top 位置的垂直居中效果 */
    transform: translateY(-50%);
    /* 保持這個，確保以新的 top 為基準點居中 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
  }

  .carousel-caption h1,
  .carousel-caption h2,
  .carousel-caption h3 {
    /* 注意這裡排除了 h4 */
    font-size: 4.5vw !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 5px;
    padding-right: 5px;
  }

  /* 特別調整h1的大小 */
  .carousel-caption h1 {
    font-size: 4.2vw !important;
  }

  /* 特別調整h3的大小 */
  .carousel-caption h3 {
    font-size: 2.8vw !important;
  }

  /* 調整按鈕內 h4 文字大小：再次放大，並確保不溢出 */
  .carousel-caption .btn h4 {
    font-size: 4vw !important;
    /* 將按鈕內的 H4 文字從 4.5vw 放大到 5vw */
    padding: 0;
    margin: 0;
  }

  .carousel-caption p {
    margin-bottom: 0.1rem;
    /* 將間距縮短,0.5rem（大約 8px）的空間 */
  }

  .carousel-caption .btn-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1rem;
    width: 100%;
  }

  .carousel-caption .btn {
    padding: 0.6em 0.8em !important;
    white-space: nowrap;
    flex-shrink: 1;
    /* 移除按鈕本身的 font-size 設定，讓內部 h4 控制 */
    /* font-size: 3.5vw !important; */
  }
}

/* 第一張輪播片標題文字顏色 */
.text-yellow {
  color: yellow !important;
}

.text-pink {
  color: hotpink !important;
}

/* === 常見問題 文字換成藍字 === */
.TextColor1 {
  color: rgb(0, 94, 255);
  font-size: 22px;
}

/* 常見問題 可向下展開顯示說明*/
/* 讓每個問題條目保持一致的字體大小 */
.list-group-item {
  font-size: 1.15rem;
}

/* 針對 "常見問題" 標題，如果想讓它更大，保持獨立設定 */
.list-group-item.active h1 {
  font-size: 1.8rem;
  /* 保持這個標題的字體更大 */
  margin: 0;
  /* 移除 h1 預設外邊距 */
}

/* "+" 符號的基本樣式 */
.collapse-icon {
  font-size: 1.5rem;
  /* 符號大小 */
  font-weight: bold;
  transition: transform 0.3s ease-in-out;
  /* 平滑過渡效果 */
}

/* 當內容展開時，"+" 符號旋轉 45 度變成 "x" 或接近 "-" */
.list-group-item[aria-expanded="true"] .collapse-icon {
  transform: rotate(45deg);
  /* 旋轉45度，如果想要-號，旋轉180度或直接用符號- */
  /* 如果想讓它變成減號，可以考慮：content: '-'; 或者 rotation 180deg */
}

/* 答案內容區塊的樣式 */
.card.card-body {
  border-top: none;
  /* 移除與問題項目的上邊框重疊 */
  padding-left: 25px;
  /* 增加左側內邊距，讓內容與問題條目錯開 */
  padding-right: 25px;
  /* 增加右側內邊距 */
  background-color: #f8f9fa;
  /* 淺灰色背景，使答案區塊更明顯 */
  border-radius: 0 0 0.25rem 0.25rem;
  /* 底部圓角 */
  color: #495057;
  /* 答案文字顏色 */
  font-size: 1rem;
  /* 答案文字大小 */
  line-height: 1.6;
  /* 行高 */
}

/* === 加入會員-立即註冊按鈕移入時變色 ===*/
.btn-danger:hover,
.btn-danger:focus {
  background: linear-gradient(135deg, #ef3c9b 0%, #96044b 100%) !important;
  /* 漸層色 */
  color: #fff !important;
  border-color: #96044b !important;
  transition: background 0.2s, color 0.2s, border 0.2s;
}

/* 洽詢LINE@客服 移入時變色*/
.btn-link {
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
  background-color: #FFFF37 !important;
  color: #d32f2f !important;
  /* 文字顏色可依需求調整 */
  text-decoration: underline;
  transition: background 0.2s, color 0.2s;
}

/* === 頁尾文字:本站所有數據...換成紅字 === */
.TextColor {
  color: red;
  /* 直接將文字顏色設定為紅色 */
}

/* === LINE加入好友 滑入時要讓圖片顏色變淺 === */
.col-md-6.d-flex.align-items-center.justify-content-md-start.justify-content-center.my-2.offset-md-0 a img {
  transition: filter 0.2s ease-in-out;
}

.col-md-6.d-flex.align-items-center.justify-content-md-start.justify-content-center.my-2.offset-md-0 a:hover img {
  filter: brightness(120%);
  /* 滑入時增加亮度 (可調整百分比) */
}

/* === 頁尾版權文字樣式 === */
.footer-copyright {
  text-align: center;
  padding: 20px 0;
  color: #555;
  font-size: 0.9rem;
}

/* === 最右側icon 加入LINE好友 和 返回頂端 === */
/* 浮動圖標容器 */
.floating-icons-container {
  position: fixed;
  right: 20px;
  /* 距離右邊的距離 */
  bottom: 20px;
  /* 距離底部的距離 */
  display: flex;
  flex-direction: column;
  /* 垂直堆疊 */
  align-items: center;
  /* 水平置中 */
  z-index: 9999;
  /* 確保它在最上層 */
  transition: opacity 0.3s ease-in-out;
  /* 滾動漸淡的過渡效果 */
}

/* 加入LINE好友 單個浮動圖標樣式 */
.floating-icon {
  display: flex;
  /* 讓內容（圖片或圖標）置中 */
  justify-content: center;
  align-items: center;
  width: 60px;
  /* 圖標的寬度 */
  height: 60px;
  /* 圖標的高度 */
  /*border-radius: 50%; /* 圓形 */
  /*background-color: #f0f0f0; /* 預設背景色，如果您的 LINE 圖標已經是圓形透明背景，這個可能不需要 */
  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 輕微陰影 */
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.3s ease-in-out;
  /* 動畫效果 */
}

.floating-icon:hover {
  transform: scale(1.1);
  /* 懸停時放大 */
}

/* icon 返回頂端 */
.floating-icon1 {
  display: flex;
  /* 讓內容（圖片或圖標）置中 */
  justify-content: center;
  align-items: center;
  width: 40px;
  /* 圖標的寬度 */
  height: 40px;
  /* 圖標的高度 */
  border-radius: 50%;
  /* 圓形 */
  background-color: #72d9f8;
  /* 預設背景色，如果您的 LINE 圖標已經是圓形透明背景，這個可能不需要 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* 輕微陰影 */
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.3s ease-in-out;
  /* 動畫效果 */
}

.floating-icon1:hover {
  transform: scale(1.1);
  /* 懸停時放大 */
}

/* LINE 圖標的特定樣式 */
.line-icon {
  margin-bottom: 15px;
  /* 與下方返回頂部按鈕的間距 */
  /*background-color: #00C300;  LINE 的品牌綠色 */
}

.line-icon img {
  width: 80%;
  /* 讓圖片小於容器，留一點邊緣 */
  height: 80%;
  object-fit: contain;
  /* 確保圖片不被裁切或拉伸 */
}

/* icon 返回頂端圖標的特定樣式 */
.back-to-top-icon {
  background-color: #0075f3;
  color: white;
  /* 箭頭顏色 */
}

.back-to-top-icon:hover {
  background-color: #66B3FF;
  /* 懸停時顏色變淺 */
}

.back-to-top-icon .fas {
  font-size: 1.5rem;
  /* 箭頭圖標大小 */
}

/* 滾動時的漸淡效果 */
.floating-icons-container.fade-out {
  opacity: 0.3;
  /* 滾動時的透明度 */
}

/* 針對小螢幕設備的調整 (如果按鈕太大可以縮小) */
@media (max-width: 576px) {
  .floating-icons-container {
    right: 15px;
    bottom: 15px;
  }

  .floating-icon {
    width: 45px;
    height: 45px;
  }

  .back-to-top-icon .fas {
    font-size: 1.3rem;
  }
}

/* === 導覽列的提醒警鈴 動作 === */
@keyframes swingAndFade {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  /* 初始位置，不透明 */
  25% {
    transform: translateX(-5px);
    opacity: 0.7;
  }

  /* 向左移動，稍微變淺 */
  75% {
    transform: translateX(5px);
    opacity: 0.7;
  }

  /* 向右移動，保持變淺 */
  100% {
    transform: translateX(0);
    opacity: 1;
  }

  /* 回到初始位置，恢復不透明 */
}

.fa-regular {
  color: #ff0000;
}

.nav-item a i.fa-bell {
  color: #ff0000;
  /* 初始顏色 */
  display: inline-block;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, color 0.3s ease;
}

/* 設定導覽列的提醒警鈴動作 */
@keyframes swingAndFade {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  25% {
    transform: translateX(-5px);
    opacity: 0.7;
  }

  75% {
    transform: translateX(5px);
    opacity: 0.7;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.nav-item a i.fa-bell {
  color: #ff1b1b;
  display: inline-block;
  transition: color 0.05s ease;
}

/* 當滑鼠滑入時，警鈴變成金黃色並快速搖晃 */
.nav-item a:hover i.fa-bell {
  color: #f2ff00;
  /* 呼叫 swingAndFade 動畫 */
  /* 第1個值：動畫名稱 / 第2個值：動畫速度 / 第3個值：動畫循環次數 */
  animation: swingAndFade 0.5s ease-in-out infinite;
}

/* 手機端響應式調整，防止溢出 */
@media (max-width: 576px) {
  #idiv1 {
    width: 100% !important;
    max-width: 350px;
  }

  .buttonv1,
  .buttonv2,
  .buttonv3 {
    width: 100% !important;
    max-width: 300px;
  }
}

@media (max-width: 576px) {
  #idiv1 {
    width: 100% !important;
    max-width: 350px;
  }

  .buttonv1,
  .buttonv2,
  .buttonv3 {
    width: 100% !important;
    max-width: 300px;
  }
}

/* :::按鈕縮小30% */
.btn-light-gray {
  font-size: 0.5em;
  padding: 0.1rem 0.2rem;
}

/* 展開白色框上下間距縮到最小 */
.blank-collapse-space.card-body {
  padding: 0 1rem;
}

/* 正方形按鈕樣式 */
.square-btn {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 手機版調整 */
@media (max-width: 767px) {
  .square-btn {
    width: 80px;
    height: 80px;
  }

  .col.col-spacing {
    flex: 0 0 80px !important;
    max-width: 80px !important;
    padding: 0 !important;
  }
}

/* 更小螢幕調整 */
@media (max-width: 480px) {
  .square-btn {
    width: 60px;
    height: 60px;
  }

  .col.col-spacing {
    flex: 0 0 60px !important;
    max-width: 60px !important;
    padding: 0 !important;
  }
}

/* 手機版調整539抓牌專區間距 */
@media (max-width: 767px) {
  #grasp {
    padding-top: 0.175rem !important;
    padding-bottom: 0.25rem !important;
  }
}

/* 手機版調整線上人數間距 */
@media (max-width: 767px) {
  .online-text {
    padding: 0.5px 0 0 0;
  }
}

/* 樣式結束 */