/* 圖片輪播最外層容器 */
#VK-mygallery {
  position: relative;           /* 為內部的指示點設定位參考 */
  width: 100%;                  /* 寬度為容器寬 */
  max-width: 800px;             /* 最大寬度限制在 800px */
  margin: 10px auto;            /* 垂直外距 40px，水平置中 */
  overflow: hidden;             /* 隱藏超出範圍的內容 */
  border-radius: 10px;          /* 圓角效果 */
}

/* 輪播內容的內層容器（包住所有圖片） */
.vk-carousel-inner {
  display: flex;                /* 用 flex 排列圖片 */
  transition: transform 0.5s ease-in-out; /* 切換時平滑滑動動畫 */
  width: 100%;
}

/* 每張輪播圖片的區塊（預設隱藏） */
.vk-carousel-item {
  flex: 0 0 100%;               /* 每一張圖片寬度為容器的 100% */
  display: none;                /* 預設不顯示 */
}

/* 當前顯示的圖片（加上 active 類別） */
.vk-carousel-item.active {
  display: block;              /* 顯示目前這一張圖片 */
}

/* 圖片樣式 */
.vk-carousel-item img {
  width: 100%;                 /* 圖片寬度填滿容器 */
  height: auto;                /* 保持圖片比例 */
  display: block;              /* 移除圖片底部空隙 */
}

/* 指示點容器（通常在圖片下方） */
.vk-carousel-indicators {
  position: absolute;          /* 定位在圖片區域內 */
  bottom: 15px;                /* 距離底部 15px */
  left: 50%;                   /* 水平置中基準點 */
  transform: translateX(-50%); /* 水平偏移自身寬度一半，達成置中 */
  z-index: 10;                 /* 層級提高，避免被圖片蓋住 */
  display: flex;               /* 水平排列指示點 */
  justify-content: center;     /* 水平置中排列 */
  align-items: center;         /* 垂直置中（較少影響） */
  width: 100%;
}

/* 單一指示點的樣式（未啟用狀態） */
.vk-carousel-indicators .vk-dot {
  width: 30px;                 /* 初始寬度為 30px（長條狀） */
  height: 14px;                /* 高度 14px */
  margin: 0 6px;               /* 左右間距 6px */
  border-radius: 3px;          /* 圓角（形成膠囊狀） */
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色 */
  border: none;                /* 移除邊框 */
  cursor: pointer;             /* 滑鼠移上為可點擊樣式 */
  transition: background-color 0.3s ease, width 0.3s ease; /* 點選動畫效果 */
}

/* 當前啟用的指示點（與目前顯示圖片對應） */
.vk-carousel-indicators .vk-dot.active {
  background-color: #FFEB3B;   /* 高亮黃色（可視為品牌色） */
  width: 40px;                 /* 加寬以做為當前項目指示 */
}