/* ===== 基本 ===== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-image: url("images/bg.jpg");
  background-repeat: repeat-y;
  background-position: 50% 0px;
  background-attachment: scroll;
  background-color: #fae20c;
}

.navbar-default {
  background-color: #72a700;
}

.navbar-default .navbar-nav > li > a {
  color: #fff;
  font-size: 20px;
}

.navbar-default .navbar-nav > li > a:hover {
  background-color: #5f8b00;
  color: #fff;
}

.dropdown > ul > li > a {
  color: #4e4e4e;
  font-size: 20px;
}

.dropdown > ul > li > a:hover {
  background-color: #4e4e4e;
  color: #e8e8e8;
}

.navbar-default .navbar-header > a {
  color: #000;
  font-size: 22px;
}

.navbar-default .navbar-header > a:hover {
  color: #5f8b00;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #f7ad00;
}

/* ===== 上方 ===== */
.topbg{
  background-image: url(images/topbg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0px;
  margin-top: 51px;
}

  .winner{
    text-align: center;
    background-color: #FFF;
    border-radius: 15px;
    font-size: 1.75em;
    line-height: 1em;
    padding: 0 40px 0 40px;
  }


.singin{
	width: 180px;
	padding: 6px;
	color: #000;
	background-color: #FFA600;
	margin: auto;
	font-size: 26px;
	border-radius: 30px;
}

/* ===== 贈品圖 ===== */
 





/* ===== 積分條 ===== */
.score-bar {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-weight: bold;
  border-top: 6px solid #f4c400;
  border-bottom: 6px solid #f4c400;
  font-size: 16px;
}

/* ===== 登入 ===== */
.login-bar-new {
  display: flex;                /* 啟用 Flexbox */
  align-items: center;          /* 垂直置中 */
  justify-content: center;      /* 水平置中 (選擇性) */
  gap: 10px;
  background: linear-gradient(90deg, #ffb300, #f59e00);
  padding: 10px;
  border-radius: 40px;
  max-width: 500px;
  margin: 0 auto;
  /* 確保 padding 不會額外撐開寬度 */
  box-sizing: border-box; 
}

/* 確保輸入框在任何寬度下都不會溢出 */
.login-input-new {
  border: none;
  outline: none;
  background: #fff;
  border-radius: 20px;
  padding: 8px 15px;
  width: 180px;
  box-sizing: border-box;
	color: #757575;
}

/* 手機版*/
@media (max-width: 768px) {
  /* 針對標題文字大小進行微調 */
  .score-bar h3 {
    font-size: 20px !important; /* 介於 h3 與 h4 之間的大小 */
    margin-bottom: 10px;
    line-height: 1.4;
  }

  /* 登入區塊維持之前的並排設定 */
  .login-bar-new {
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px 10px;
    gap: 10px 8px;
    border-radius: 25px;
    width: 95%;
  }

  .login-input-new {
    width: calc(50% - 4px) !important;
    box-sizing: border-box;
    font-size: 13px;
    padding: 10px 8px;
    text-align: center;
  }

  .login-btn {
    width: 100% !important;
    margin-top: 5px;
    padding: 10px;
    font-size: 16px;
  }
}

.login-btn {
  border: none;
  background: #000;
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
}

/* ===== 主區 ===== */
.main-section {
  padding: 50px 0;
}

/* ===== 圖片 ===== */
.step-img {
  width: 100%;
  display: block;
  border-radius: 20px;
}

/* ===== 緊湊版應援榜 (縮減高度專用) ===== */
.rank-box {
  background: #222;
  border-radius: 15px; /* 稍微縮小圓角 */
  padding: 10px 8px;   /* 縮減內距 */
  border: 2px solid #f4c400; /* 線條變細一點 */
  box-shadow: 0 6px 0px #c6a000; /* 縮減陰影 */
}

.rank-header {
  text-align: center;
  margin-bottom: 8px; /* 縮小標題下方間距 */
  border-bottom: 1px dashed #f4c400;
  padding-bottom: 6px;
}

.rank-title {
  color: #f4c400;
  font-weight: 900;
  font-size: 18px; /* 縮小字體 */
  letter-spacing: 0.5px;
  margin: 0;
}

.rank-sub {
  color: #eee;
  font-size: 10px; /* 縮小字體 */
  text-transform: uppercase;
  opacity: 0.7;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 顯著縮減項目之間的距離 */
}

/* 每個編號的卡片樣式 */
.rank-item {
  display: flex;
  align-items: center;
  background: #333;
  padding: 5px 10px; /* 縮減上下內距 (原為 8px 12px) */
  border-radius: 8px;
}

.rank-item:hover {
  background: #444;
}

/* 排名數字小標籤 */
.rank-badge {
  background: #555;
  color: #fff;
  width: 18px;  /* 縮小尺寸 */
  height: 18px; /* 縮小尺寸 */
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px; /* 縮小字體 */
  font-weight: bold;
  margin-right: 8px;
}

/* 會員編號字體 */
.rank-id {
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px; /* 縮小字體 */
  letter-spacing: 0px;
}

/* --- 特殊名次樣式 (高度同步縮減) --- */
.top-1 { background: linear-gradient(90deg, #f4c400, #ffeb3b); }
.top-1 .rank-badge { background: #000; color: #f4c400; }
.top-1 .rank-id { color: #000; font-weight: bold; }

.top-2 { background: #e0e0e0; }
.top-2 .rank-badge { background: #777; }
.top-2 .rank-id { color: #333; font-weight: bold; }

.top-3 { background: #cd7f32; } 
.top-3 .rank-badge { background: #5d3a16; }
.top-3 .rank-id { color: #fff; font-weight: bold; }

/* 下方按鈕 */
.view-more-btn {
  display: block;
  text-align: center;
  margin-top: 15px;
  color: #f4c400;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
}

.view-more-btn:hover {
  color: #fff;
  text-decoration: underline;
}

/* 手機版維持兩欄排列以節省垂直空間 */
@media (max-width: 991px) {
  .rank-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}


/* 手機版適應 */
@media (max-width: 991px) {
  .rank-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* 下方按鈕 */
.view-more-btn {
  display: block;
  text-align: center;
  margin-top: 15px;
  color: #f4c400;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
}

.view-more-btn:hover {
  color: #fff;
  text-decoration: underline;
}

/* 手機版適應：原本垂直排列改為更緊湊的橫向滾動或兩欄 */
@media (max-width: 991px) {
  .rank-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 手機版變兩欄比較不佔空間 */
    gap: 8px;
  }
}

/* ===== 影片 ===== */
.video-header {
  text-align: center;
  margin-bottom: 20px;
}

.video-title {
  font-size: 38px;
  font-weight: bold;
}

.video-subtitle {
  font-size: 30px;
}

.week-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.week-item {
  text-decoration: none;
  color: #333;
  padding: 6px 14px;
  border-radius: 20px;
  background: #fff;
}

.week-item.active,
.week-item:hover {
  background: #000;
  color: #fff;
}

.video-card {
  text-align: center;
  margin-bottom: 15px;
}

.video-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.play-btn {
  margin-top: 10px;
  padding: 3px 6px;
  background: #ff2d2d;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

/* hover 效果 */
.play-btn:hover {
  background: #cc0000;
  transform: translateY(-2px);
}

/* ===== 共用 ===== */
.md10 { margin-top: 10px; }
.md30 { margin-top: 30px; }
.md50 { margin-top: 50px; }

.copyright{
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

@media (max-width: 768px) {
  .score-bar {
    font-size: 16px;
    padding: 10px;
  }
}



.note .sub-title {
    display: inline-block;
    background-color: #7fba00; 
    color: #ffffff;            
    padding: 3px 13px;         
    border-radius: 50px;      
    font-weight: bold;
    font-size: 1em;        
    margin-top: 18px;
    margin-bottom: 10px;
    line-height: 1.5;
}