/* 全局重置 */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: sans-serif;
      }
      .main-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          min-height: 100vh;
      }
      /* 菜單樣式 */
@media (max-width: 1200px) {
    .menu-toggle {
		color: #FFE083;
        display: block !important;
        margin-left: auto;
        z-index: 1000;
        cursor: pointer;
    }

    .menu-links {
        display: flex; /* 必須為 flex 才能排成一列 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 50px 0;
        gap: 12px;
        background-color: rgba(28, 29, 41, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.3s ease;
        z-index: 998;
        pointer-events: none; /* 隱藏時不可點擊 */
    }

    .menu-links.show {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

      /* 返回頂部按鈕 */
      .backtop {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 104px;
        height: 104px;
        background-image: url("/img/backtop.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: none;
        cursor: pointer;
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
      }

      .backtop.show {
        opacity: 1;
        pointer-events: auto;
      }

      @media (hover: hover) and (pointer: fine) {
        .backtop:hover {
          transform: scale(0.95);
        }
      }

      @media (hover: none), (max-width: 768px) {
          .backtop{
              width: 56px;
              height: 56px;
          }
          .backtop:active {
          transform: scale(0.85);
            }
      }

      /* 整體範圍 */
      .frame_all{
		  width: 90%;
          padding: 1% 5%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
	  }
      @media (max-width: 768px) {	
      .frameBG {
          flex-direction: column;
          align-items: center;
        }
      }
.container {
      max-width: 4xl;
      margin: auto;
      padding: 2rem;
    }
    h1 {
      font-size: 2.5rem;
      font-weight: bold;
      color: #3B3E68;
      text-align: center;
    }
@media (max-width: 498px) {
	h1{
		font-size: 1.5rem;
	}
	  }
  .AvectorLOGO {
	  height: 100%;          /* 或給固定尺寸 */
	  max-height: 60px;      /* 自訂，避免放大超出 menu */
	  display: block;        /* 移除底部空隙 */
      object-fit: contain;   /* 保持比例 */
	  }
@media (max-width: 768px) {
	.AvectorLOGO{
		max-height: 40px;
	}
}
	  
/* 上一頁 */
.backbtn-content{
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 1%;
	  }	
.backbtn {
	width: 30%;
	max-width: 180px;
	padding: 5px 0;
	font-size: 14pt;
	color: white !important;
	border: 5px solid #a10042;
	background-color: #ff5e6c;
	border-radius: 15px;
	cursor: pointer;
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
    display: block; /* 讓 <a> 像按鈕一樣佔滿空間 */
    text-align: center; /* 讓文字置中 */
    text-decoration: none !important; /* 移除下劃線 */
    box-sizing: border-box; /* 確保 padding 不會撐大寬度 */
}

.backbtn:hover {
	border: 5px solid #a10042;
	background-color: #df0059;
	text-shadow: 0 0 10px rgba(255, 199, 169, 0.8); 
	  }

.backbtnstrok {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 5px #a10042;
  width: 100%;
  white-space: pre-wrap;
}
/*上一頁文字*/
.title-text {
	margin-left: 0;
	position: relative;
	display: inline-block;
	white-space: normal;
	word-break: break-word;
	font-size: 1.5rem;
	font-weight: bold;
	min-width: 0;
	z-index: 0;
	  }
.title-text .fill {
  position: relative;
  z-index: 2;
}

.title-text .strok {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 5px #FFF;
  width: 100%;
  white-space: pre-wrap;
}

	  .highlights{
		  width: 80vw;
		  height: 100%;
		  padding: 15px 0;
		  border: 5px solid #FFE7AC;
		  border-radius: 15px;
		  background-color: #FFFDF0;
		  position: relative;
        }
      .highlights-item {
          position: relative;
          display: flex;
          gap: 8px;
          padding: 0 40px;
		  margin-bottom: 5px;
      }
      .highlights-item::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 5%;
          width: 90%;              /* 控制底線寬度 */
          height: 2px;
          background-color: #EAEEEA;
      }
	  .highlights_date {
          font-size: 1.2em;
          color: #2b65b3;
          white-space: nowrap; /* 禁止換行 */
          flex-shrink: 0;       /* 不要被壓縮 */
          font-weight: bold;
      }
	  .highlights_title {
          /*white-space: nowrap; /* 禁止換行 */
          letter-spacing: 2px;
          overflow: hidden;
          /*text-overflow: ellipsis;*/
          line-height: 1.2em;             /* 行高視情況可微調 */
      }	  
	  .highlights_URL{
		  color: blue;
		  text-decoration: underline;
	  }
	  .highlights_URL:hover{
		  cursor: pointer;
	  }
	  .HL-LastUpdated{
		  display: block;
		  width: 100%;
		  text-align: center;
		  font-size: 1.2em;
		  padding-bottom: 1%;
	  }
	  @media (max-width: 498px) {
		    .highlights{
				width: 90vw;
		  }
            .frame_all{
                padding: 0 5vw;
            }
            .news-item{
                padding: 0 10px;
            }
		  .highlights_date,
		  .highlights_title{
			  font-size: 0.8em;
		  }
		  .highlights-item{
			  padding: 0 5%;
		  }
		  .hide-on-mobile {
			  display: none; 
		  }
        }	
	  
/* 針對最大寬度 498px 的手機版樣式調整 */
@media (max-width: 498px) {
    .frame_all{
        padding: 0 5vw;
    }
    .news-item{
        padding: 0 10px;
    }
    
    /* **重點修改區域**：在手機尺寸下，將排列方向改為垂直 */
    .highlights-item {
        flex-direction: column; /* 將子元素垂直堆疊 */
        align-items: flex-start; /* 讓內容靠左對齊 (可選) */
        gap: 0;
        padding: 5px 5%;
    }

    .highlights_date,
    .highlights_title{
        font-size: 0.8em;
        white-space: normal !important; /* 確保文字可以換行，解決 nowrap 問題 */
    }

.highlights_URL {
    color: blue;
    text-decoration: underline;
    word-break: break-all; 
}	
	.highlights-item::after {
        left: 0;
        width: 100%; /* 讓底線填滿寬度 (可選) */
    }

    .highlights-item{
        padding: 0 5% 3% ;
    }
    .hide-on-mobile {
        display: none; 
    }
}