/* ============================================================
   XSSC 新生運動館暨碧湖游泳中心 · 自訂樣式
   Modern Aqua Fitness × Lifestyle Branding
   ------------------------------------------------------------
   ★ 所有自訂 CSS 一律寫在這裡，勿改動 CDN / theme / plugin 檔。
   設計規範見 .claude/skills/frontend-design/
   ============================================================ */

:root {
    /* 品牌色 */
    --xssc-primary: #0073c8; /* 品牌藍：標題/導覽/主按鈕/Icon */
    --xssc-secondary: #00a0cd; /* 水感藍：漸層/點綴/Hover */
    --xssc-deep: #172a88; /* 深藍：深背景/Footer/Overlay */
    --xssc-orange: #f39800; /* 活力橘：CTA/重點（節制） */
    --xssc-yellow: #f8b62d; /* 亮點黃：數字/標籤 */

    /* 中性（60% 留白基底） */
    --xssc-white: #ffffff;
    --xssc-gray-50: #f5f8fa;
    --xssc-gray-100: #eef2f5;
    --xssc-gray-300: #cbd6dd;
    --xssc-ink: #1c2b33;
    --xssc-ink-dim: #4a5d6b;

    /* 品牌漸層（藍為主） */
    --xssc-grad-brand: linear-gradient(135deg, #172a88 0%, #0073c8 55%, #00a0cd 100%);
    --xssc-grad-aqua: linear-gradient(135deg, #0073c8 0%, #00a0cd 100%);
    --xssc-grad-accent: linear-gradient(135deg, #f39800 0%, #f8b62d 100%);

    /* 圓角 16–20px */
    --xssc-radius-sm: 12px;
    --xssc-radius: 16px;
    --xssc-radius-lg: 20px;
    --xssc-radius-pill: 999px;

    /* 柔和陰影 */
    --xssc-shadow-sm: 0 2px 8px rgba(23, 42, 136, 0.06);
    --xssc-shadow: 0 8px 24px rgba(23, 42, 136, 0.1);
    --xssc-shadow-lg: 0 16px 40px rgba(23, 42, 136, 0.14);
    --xssc-shadow-hover: 0 20px 48px rgba(0, 115, 200, 0.18);

    /* 動態 */
    --xssc-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --xssc-dur-fast: 200ms;
    --xssc-dur: 300ms;
    --xssc-dur-slow: 400ms;
}

/* ---- 共用元件 helpers ---- */
.xssc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--xssc-radius-pill);
    background: var(--xssc-primary);
    color: #fff;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.xssc-btn:hover {
    background: var(--xssc-secondary);
    transform: translateY(-2px);
    box-shadow: var(--xssc-shadow-hover);
}
.xssc-btn--cta {
    background: var(--xssc-orange);
}
.xssc-btn--cta:hover {
    background: var(--xssc-yellow);
}

.xssc-card {
    background: var(--xssc-white);
    border-radius: var(--xssc-radius-lg);
    box-shadow: var(--xssc-shadow);
    overflow: hidden;
    transition:
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.xssc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--xssc-shadow-lg);
}
.xssc-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--xssc-dur-slow) var(--xssc-ease);
}
.xssc-card:hover img {
    transform: scale(1.04);
}

/* ---- 進場淡入（配合 main.js 的 .is-in）---- */
.xssc-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--xssc-dur-slow) var(--xssc-ease),
        transform var(--xssc-dur-slow) var(--xssc-ease);
}
.xssc-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---- 水感背景輔助元素（低透明度，非主角）---- */
.xssc-aqua-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--xssc-grad-aqua);
    filter: blur(40px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    .xssc-reveal,
    .xssc-card,
    .xssc-card img,
    .xssc-btn {
        transition: none;
    }
}

/* ============================================================
   美化：將 XSSC 品牌套用到 index.html 既有版型
   （只改樣式，不動 HTML 結構）
   ============================================================ */

/* ---- 區塊節奏與留白 ---- */
.sec_home_item {
    padding: clamp(48px, 6.5vw, 96px) 0;
}

/* ============================================================
   首頁區塊：交錯底色 + 波浪分隔 + 水泡點綴（活潑水感）
   （只用底色與偽元素，不動 HTML 結構）
   ============================================================ */
.section-wrap {
    position: relative;
    background: #ffffff;
}
.section-wrap .sec_home_item {
    position: relative;
}
/* 內容置於裝飾之上 */
.section-wrap .sec_home_item > .container {
    position: relative;
    z-index: 2;
}

/* 交錯底色：白 / 淺水藍，建立區塊層次（以 ID 明確指定，穩定不受排序影響）*/
#section-23,
#section-25 {
    background: #ffffff;
}
#section-16,
#section-1 {
    background: linear-gradient(180deg, #e9f4fd 0%, #dcecf9 100%);
}

/* 波浪分隔：本區塊頂部內側畫出「上一區塊底色」的波浪往下流入，形成優雅水波交界。
   用彩色 SVG 背景圖（非 mask），最穩定、不受 overflow 影響 */
#section-16::before,
#section-25::before,
#section-1::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: clamp(22px, 3vw, 46px);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top center;
    /* 讓整條波浪隨容器寬度縮放，平板/手機也能看到完整對稱波浪
       （原本固定 1440px + repeat-x，窄螢幕只露出波浪左半，看起來像斜線）*/
    background-size: 100% 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}
/* 上一塊為白 → 白色波浪流入（活動資訊、即時人數看板）*/
#section-16::before,
#section-1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='46' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V24 C1200 44 960 44 720 24 C480 4 240 4 0 24 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
/* 上一塊為淺水藍 → 淺水藍波浪流入（影音與社群）*/
#section-25::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='46' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V24 C1200 44 960 44 720 24 C480 4 240 4 0 24 Z' fill='%23dcecf9'/%3E%3C/svg%3E");
}

/* 水泡點綴：活動資訊（淺藍且有留白）角落漂浮半透明圓形，增添活潑感 */
#section-16::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 7% 22%, rgba(0, 160, 205, 0.14) 0 14px, transparent 15px),
        radial-gradient(circle at 12% 40%, rgba(0, 160, 205, 0.1) 0 8px, transparent 9px),
        radial-gradient(circle at 93% 72%, rgba(0, 115, 200, 0.1) 0 20px, transparent 21px),
        radial-gradient(circle at 96% 54%, rgba(0, 160, 205, 0.13) 0 10px, transparent 11px),
        radial-gradient(circle at 88% 30%, rgba(0, 160, 205, 0.08) 0 7px, transparent 8px);
    pointer-events: none;
    z-index: 0;
}

/* ---- 區塊主標題 ---- */
.main-ttl-box-1 {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.main-ttl-box-1 .main-ttl-1 h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 18px;
    color: var(--xssc-deep);
    font-weight: 900;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: 0.02em;
}

.main-ttl-box-1 .main-ttl-1 h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--xssc-grad-aqua);
}

.main_title_widget h1 {
    padding-bottom: 18px;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: 0.02em;
}

.main_title_widget h1::after {
    background: var(--xssc-grad-aqua);
    height: 3px;
    width: 56px;
    border-radius: 5px;
}

/* ---- Hero 上版偏移：header 為 absolute 浮層，預留頂部空間避免被蓋住 ----
   實際高度由 js/main.js 依 RWD 量測後以 inline margin-top 覆蓋，此為載入前後備值 */
.top-space {
    margin-top: 149px;
}

@media (max-width: 1199px) {
    .top-space {
        margin-top: 122px;
    }
}

@media (max-width: 991px) {
    .top-space {
        margin-top: 158px;
    }
}
@media (max-width: 767px) {
    .top-space {
        margin-top: 172px;
    }
}

.breadcrume-list li + li::before {
    font-family: "Font Awesome 7 Free";
    content: "\f105";
    font-weight: 900;
    font-size: 13px;
    font-style: normal;
    margin: 0 5px;
}

/* ---- Hero 輪播：品牌化控制項 ---- */
.hero-section .swiper-slide {
    background-size: cover;
    background-position: center;
}
.hero-section .swiper-overlay {
    background: linear-gradient(180deg, rgba(23, 42, 136, 0.15), rgba(4, 20, 40, 0.45));
}
/* 分頁圓點：白色描邊 -> active 品牌藍膠囊（提高 specificity 以蓋過 theme 的 .swiper-horizontal> 規則）*/
.hero-section .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    margin: 0 6px;
    background: rgba(255, 255, 255, 0.25);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    opacity: 1;
    transition: all var(--xssc-dur) var(--xssc-ease);
}
.hero-section .swiper-pagination-bullets .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.15);
}
.hero-section .swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 30px;
    border-radius: 999px;
    border-color: transparent;
    background: var(--xssc-grad-aqua);
    background-position: 20% 20%;
    background-size: 140% 140%;
    box-shadow: 0 2px 10px rgba(0, 160, 205, 0.55);
}

/* 左右箭頭：玻璃感圓鈕，hover 填入品牌漸層並放大 */
.hero-section .swiper-button-prev,
.hero-section .swiper-button-next {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
    box-shadow: 0 8px 22px rgba(10, 18, 68, 0.28);
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        color var(--xssc-dur) var(--xssc-ease),
        border-color var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.hero-section .swiper-button-prev::after,
.hero-section .swiper-button-next::after {
    font-size: 15px;
}
.hero-section .swiper-button-prev:hover,
.hero-section .swiper-button-next:hover {
    color: #fff;
    background: var(--xssc-grad-aqua);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: var(--xssc-shadow-hover);
    opacity: 1;
}
.hero-section .button_type_2,
.hero-section .swiper-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--xssc-radius-pill);
    background: var(--xssc-orange);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--xssc-shadow);
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease);
}
.hero-section .button_type_2:hover,
.hero-section .swiper-btn:hover {
    background: var(--xssc-yellow);
    transform: translateY(-2px);
}

.all-image-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 0;
}

@media (max-width: 767px) {
    .hero-section .swiper-autoheight {
        height: 230px !important;
    }

    .hero-section .swiper-autoheight #customVideo,
    .hero-section .swiper-autoheight .swiper-slide,
    .hero-section .swiper-autoheight .video-slide {
        height: 230px !important;
    }
}

/* ---- 四大分類磁磚（場館/課程/教練/活動）---- */
.thumb_item {
    display: block;
    border-radius: var(--xssc-radius-lg);
    overflow: hidden;
    box-shadow: var(--xssc-shadow);
    text-decoration: none;
    background: var(--xssc-white);
    transition:
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.thumb_item:hover {
    transform: translateY(-6px);
    box-shadow: var(--xssc-shadow-hover);
}
.thumb_img_field {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.thumb_img_field img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--xssc-dur-slow) var(--xssc-ease);
}
.thumb_item:hover .thumb_img_field img {
    transform: scale(1.06);
}
.thumb_pop_info {
    padding: 16px 12px;
    text-align: center;
}
.thumb_pop_info h4 {
    margin: 0;
    color: var(--xssc-deep);
    font-weight: 700;
    font-size: 1.05rem;
    transition: color var(--xssc-dur) var(--xssc-ease);
}
.thumb_item:hover .thumb_pop_info h4 {
    color: var(--xssc-primary);
}

/* ---- #section-23 四大分類：品牌 icon 底座 + 光暈 + 標題底線 ---- */

#section-23 .custom-wrap-box {
    overflow: initial;
}

#section-23 div[class*="custom_link_section"]:not(.owl_custom) .row-cols-6 {
    margin: 0;
    gap: 30px;
}

#section-23 div[class*="custom_link_section"]:not(.owl_custom) .row-cols-6 .column {
    padding: 0;
    margin: 0;
    width: calc((100% - 30px * 5) / 6);
}

/* 移除白卡外框，改成圓形水感徽章（參考圖風格，更活潑）*/
#section-23 .thumb_item,
#section-23 .custom_link_section_3 .thumb_item {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
#section-23 .thumb_item:hover {
    transform: none;
    box-shadow: none;
}

/* 圓形水感徽章：柔邊漸層圓 */
#section-23 .thumb_img_field {
    width: 82%;
    max-width: 210px;
    margin: 0 auto 6px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible;
    background: radial-gradient(circle at 50% 46%, #e4f1fb 0%, #edf6fc 56%, rgba(237, 246, 252, 0) 78%);
    animation: xssc-badge-float 4s var(--xssc-ease) infinite;
}

.custom_link_section_3 .thumb_item .thumb_img_field::before {
    display: none;
}

/* 錯開漂浮時間，各顆此起彼落更活潑（每 0.5s 一階，六顆循環）*/
#section-23 .column:nth-child(6n + 2) .thumb_img_field {
    animation-delay: 0.5s;
}
#section-23 .column:nth-child(6n + 3) .thumb_img_field {
    animation-delay: 1s;
}
#section-23 .column:nth-child(6n + 4) .thumb_img_field {
    animation-delay: 1.5s;
}
#section-23 .column:nth-child(6n + 5) .thumb_img_field {
    animation-delay: 2s;
}
#section-23 .column:nth-child(6n + 6) .thumb_img_field {
    animation-delay: 2.5s;
}
#section-23 .thumb_img_field img {
    position: relative;
    z-index: 1;
    width: 52%;
    height: 52%;
    object-fit: contain;
    /* icon 為白底方塊，用 multiply 讓白底融入水感徽章，只留插畫 */
    mix-blend-mode: multiply;
    transition: transform var(--xssc-dur) var(--xssc-ease);
}
/* hover：icon 彈一下 */
#section-23 .thumb_item:hover .thumb_img_field img {
    transform: scale(1.12);
}

@keyframes xssc-badge-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}
@media (prefers-reduced-motion: reduce) {
    #section-23 .thumb_img_field {
        animation: none;
    }
}
#section-23 .thumb_pop_info {
    padding: 18px 12px 0;
}
#section-23 .thumb_pop_info h4 {
    position: relative;
    display: inline-block;
    padding-bottom: 11px;
    font-size: 1.35rem;
    color: var(--xssc-primary);
    margin: 0;
    letter-spacing: 1px;
}
#section-23 .thumb_pop_info h4::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 34px; /* 底線常駐，不需 hover */
    height: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--xssc-grad-aqua);
    transition: var(--xssc-dur) var(--xssc-ease);
}
#section-23 .thumb_item:hover .thumb_pop_info h4::after {
    width: 48px; /* hover 時底線再加長一點，仍保留互動回饋 */
}

@media (max-width: 1023px) {
    #section-23 div[class*="custom_link_section"]:not(.owl_custom) .row-cols-6 .column {
        width: calc((100% - 30px * 2) / 3);
    }
}

@media (max-width: 767px) {
    #section-23 div[class*="custom_link_section"]:not(.owl_custom) .row-cols-6 .column {
        width: calc((100% - 30px * 2) / 3);
    }
    #section-23 .thumb_pop_info {
        padding: 5px 0 0;
    }
    #section-23 .thumb_pop_info h4 {
        font-size: 0.975rem;
    }
}

/* ---- 活動資訊卡片（news-block-1）---- */
.news-block-1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    background: var(--xssc-white);
    border-radius: var(--xssc-radius-lg);
    overflow: hidden;
    box-shadow: var(--xssc-shadow);
    transition:
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.news-block-1:hover {
    transform: translateY(-6px);
    box-shadow: var(--xssc-shadow-hover);
}
.news-block-1 .news-image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.news-block-1 .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--xssc-dur-slow) var(--xssc-ease);
}
.news-block-1:hover .news-image img {
    transform: scale(1.05);
}
.news-block-1 .news-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 24px;
}

.news-block-1 .news-content h4 {
    margin-bottom: 0;
}

.news-block-1 .news-content p {
    display: none;
}

.news-block-1 .news-txt-box {
    flex: 1;
}
.news-block-1 .newsDate {
    color: var(--xssc-ink-dim);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}
.news-block-1 .news-series {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--xssc-grad-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}
.news-block-1 h4 {
    margin: 0 0 6px;
    font-size: 1.08rem;
    line-height: 1.5;
}
.news-block-1 h4 a {
    color: var(--xssc-ink);
    text-decoration: none;
    transition: color var(--xssc-dur) var(--xssc-ease);
}
.news-block-1 h4 a:hover {
    color: var(--xssc-primary);
}
.news-block-1 .news-btn-box {
    margin-top: 16px;
}

/* ---- #section-16 活動資訊：加強質感與活潑感 ---- */

#section-16 .custom-wrap-box {
    overflow: initial;
}

#section-16 .news-block-1 {
    position: relative;
}
#section-16 div[class*="custom_news_section"] .row {
    margin: 0;
    gap: 30px;
}
#section-16 div[class*="custom_news_section"] .column {
    width: calc((100% - 30px * 3) / 4);
    padding: 0;
    margin: 0;
}
/* 「最新活動」標籤浮到圖片左上角，標題更乾淨 */
#section-16 .news-series {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    margin: 0;
    padding: 5px 14px;
    box-shadow: 0 4px 12px rgba(243, 152, 0, 0.35);
}
/* 圖片 hover 疊品牌漸層，增加層次 */
#section-16 .news-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 42, 136, 0.4), transparent 55%);
    opacity: 0;
    transition: opacity var(--xssc-dur) var(--xssc-ease);
}
#section-16 .news-block-1:hover .news-image::after {
    opacity: 1;
}
/* 日期加水感小豎條 */
#section-16 .newsDate {
    position: relative;
    padding-left: 14px;
}
#section-16 .newsDate::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--xssc-grad-aqua);
}
/* 標題保留兩行高度，卡片與按鈕對齊 */
#section-16 .news-block-1 h4 {
    min-height: 3em;
}
/* 「詳細內容」按鈕加 Font Awesome 箭頭，hover 微移 */
#section-16 .news-btn-box .btn::after {
    content: "\f054"; /* chevron-right */
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 2px;
    font-size: 0.8em;
    display: inline-block;
    transition: transform var(--xssc-dur) var(--xssc-ease);
}
#section-16 .news-btn-box .btn:hover::after {
    transform: translateX(3px);
}

/* ---- 兩種按鈕共同幾何 ---- */
.news-btn-box .btn.btn-default,
.more-btn-box .btn.btn-default,
a.btn.btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--xssc-radius-pill);
    text-decoration: none;
    border: 0;
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        color var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}

/* ---- 詳細內容：次要「藍框 ghost」按鈕（填色在主題的 ::before）---- */
.news-btn-box .btn.btn-default {
    padding: 12px 22px 11px 22px;
    background-color: transparent;
    color: var(--xssc-primary);
    font-weight: 700;
}
.news-btn-box .btn.btn-default::before {
    background-color: transparent;
    border-color: rgba(0, 115, 200, 0.55);
    border-width: 1.5px;
    border-radius: var(--xssc-radius-pill); /* 邊框貼合膠囊，避免被裁成直線 */
}

@media (hover: hover) {
    .news-btn-box .btn.btn-default:hover {
        background-color: transparent;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: var(--xssc-shadow-hover);
    }

    .news-btn-box .btn.btn-default:hover::before {
        background-color: var(--xssc-primary);
        border-color: var(--xssc-primary);
        opacity: 1;
    }
}

/* ---- 更多活動資訊：主要「實心水感漸層」CTA，置中放大 ---- */
.more-btn-box {
    text-align: center;
    margin-top: 3rem;
}
.more-btn-box .btn.btn-default {
    padding: 16px 42px;
    background-color: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(0, 115, 200, 0.28);
}
.more-btn-box .btn.btn-default::before {
    background: var(--xssc-grad-aqua);
    border-color: transparent;
    background-position: 30% 30%;
    background-size: 130% 130%;
}
.more-btn-box .btn.btn-default::after {
    content: "\f061"; /* arrow-right */
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.82em;
    margin-left: 4px;
    transition: transform var(--xssc-dur) var(--xssc-ease);
}
@media (hover: hover) {
    .more-btn-box .btn.btn-default:hover {
        background-color: transparent;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: var(--xssc-shadow-hover);
    }
    .more-btn-box .btn.btn-default:hover::before {
        background: var(--xssc-grad-brand);
        opacity: 1;
        background-position: 30% 30%;
        background-size: 130% 130%;
    }
    .more-btn-box .btn.btn-default:hover::after {
        transform: translateX(4px);
    }
}

@media (max-width: 1023px) {
    #section-16 div[class*="custom_news_section"] .column {
        width: calc((100% - 30px * 1) / 2);
    }
}

@media (max-width: 767px) {
    #section-16 div[class*="custom_news_section"] .column {
        width: 100%;
    }

    #section-16 .news-block-1 h4 {
        min-height: unset;
    }
}

/* ---- #section-25 影音與社群 ---- */

#section-25 .custom-wrap-box {
    overflow: initial;
}

#section-25 .xssc-media-row {
    align-items: stretch;
    row-gap: 28px;
    --media-h: 480px;
    margin: 0;
    gap: 35px;
}

.col-youtube {
    flex: 1;
    padding: 0;
}

.col-facebook {
    width: 500px;
    padding: 0;
}

#section-25 .xssc-media-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--xssc-deep);
    font-weight: 700;
    font-size: 1.08rem;
}
#section-25 .xssc-media-label i {
    color: var(--xssc-primary);
    font-size: 1.25em;
}
/* YouTube：固定高度、黑底 letterbox，與 FB 卡等高 */
#section-25 .xssc-video {
    position: relative;
    height: var(--media-h);
    border-radius: var(--xssc-radius-lg);
    overflow: hidden;
    box-shadow: var(--xssc-shadow);
    background: #000;
}

#section-25 .xssc-video .youtube_content {
    padding-bottom: 68.05%;
    margin-bottom: 0;
}
#section-25 .xssc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Facebook：圓角卡片包裹，與影片等高，自適應寬度 */
#section-25 .xssc-fb-wrap {
    height: var(--media-h);
    border-radius: var(--xssc-radius-lg);
    overflow: hidden;
    box-shadow: var(--xssc-shadow);
    background: #fff;
}
#section-25 .xssc-fb-wrap .fb-page,
#section-25 .xssc-fb-wrap .fb-page > span,
#section-25 .xssc-fb-wrap .fb-page iframe {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1199px) {
    #section-25 .xssc-media-row {
        max-width: 500px;
        margin: 0 auto;
    }

    .col-youtube {
        flex: none;
        width: 100%;
    }

    .col-facebook {
        width: 100%;
    }

    #section-25 .xssc-video {
        height: auto;
    }
}

@media (max-width: 767px) {
    #section-25 .xssc-fb-wrap {
        height: 200px;
    }
    #section-25 .xssc-video .youtube_content {
        padding-bottom: 57%;
    }
}

/* ============================================================
   即時人數看板（#section-1）：深藍儀表板 + 水位波浪
   （結構於 index.html 內調整，狀態由行內 script 計算）
   ============================================================ */
#section-1 .custom-wrap-box {
    display: block;
    overflow: initial;
}

/* ---- 深色儀表板外框 ---- */
.pool-board {
    position: relative;
    padding: clamp(24px, 3vw, 44px);
    border-radius: var(--xssc-radius-lg);
    background:
        radial-gradient(120% 140% at 90% 0%, rgba(0, 160, 205, 0.2), transparent 55%),
        linear-gradient(160deg, #1d2e78 0%, #16215c 58%, #0e1544 100%);
    box-shadow: 0 24px 60px rgba(10, 18, 68, 0.42);
    color: #fff;
    overflow: hidden;
}

/* 看板頂部 */
.pool-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pool-board-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.pool-board-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--xssc-grad-accent);
    color: #fff;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    box-shadow: 0 8px 20px rgba(243, 152, 0, 0.35);
}
.pool-board-eyebrow {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.pool-board-h {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: #fff;
}
.pool-board-update {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--xssc-radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    white-space: nowrap;
}
.pool-board-update .pool-update-time {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.pool-update-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2fd3a5;
    box-shadow: 0 0 0 0 rgba(47, 211, 165, 0.6);
    animation: pool-pulse 2s var(--xssc-ease) infinite;
}
@keyframes pool-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(47, 211, 165, 0.55);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(47, 211, 165, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(47, 211, 165, 0);
    }
}

/* ---- 三張卡片格線 ---- */
.pool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 26px);
}

/* 狀態配色（由 data-status 切換）：1 寬敞 2 適中 3 偏多 4 接近額滿 */
.pool-card {
    --st: #00a0cd;
    --st2: #38c5e6;
}
.pool-card[data-status="1"] {
    --st: #20c9a6;
    --st2: #46e2bd;
}
.pool-card[data-status="2"] {
    --st: #00a0cd;
    --st2: #46c7ea;
}
.pool-card[data-status="3"] {
    --st: #f39800;
    --st2: #f8b62d;
}
.pool-card[data-status="4"] {
    --st: #ef4b5e;
    --st2: #ff8290;
}

.pool-card {
    position: relative;
    border-radius: var(--xssc-radius-lg);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    overflow: hidden;
    min-height: 300px;
    transition:
        transform var(--xssc-dur) var(--xssc-ease),
        border-color var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.pool-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--st) 55%, transparent);
    box-shadow: 0 18px 40px rgba(10, 18, 68, 0.5);
}

/* 水位填充：水體（波浪的下方），讓水波有可銜接的水面 */
.pool-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    transition: height 0.8s var(--xssc-ease);
    pointer-events: none;
    background: color-mix(in srgb, var(--st) 72%, transparent);
}
/* 水面波浪：以 ::before（前景波）與 ::after（背景波）兩層平滑正弦波，
   尺度／速度／方向／透明度各異，交疊出自然水波。.pool-wave 僅為容器。 */
.pool-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: -21px;
    height: 22px;
    pointer-events: none;
}
.pool-wave::before,
.pool-wave::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* 兩層共用同一條水面基線 → 交疊成單一水面 */
    background: var(--st);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='16' viewBox='0 0 200 16'%3E%3Cpath d='M0 8 C20 2 30 2 50 8 C70 14 80 14 100 8 C120 2 130 2 150 8 C170 14 180 14 200 8 V16 H0 Z' fill='%23000'/%3E%3C/svg%3E")
        repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='16' viewBox='0 0 200 16'%3E%3Cpath d='M0 8 C20 2 30 2 50 8 C70 14 80 14 100 8 C120 2 130 2 150 8 C170 14 180 14 200 8 V16 H0 Z' fill='%23000'/%3E%3C/svg%3E")
        repeat-x;
}
/* 前景波：較密、較實、向右流動 */
.pool-wave::before {
    height: 16px;
    -webkit-mask-size: 200px 16px;
    mask-size: 200px 16px;
    opacity: 0.6;
    bottom: 1px;
    animation: pool-wave 6s linear infinite;
}
/* 背景波：較寬、較淡、波峰略高、向左流動（反向 + 不同速度 = 交錯自然） */
.pool-wave::after {
    height: 22px;
    -webkit-mask-size: 250px 22px;
    mask-size: 250px 22px;
    opacity: 0.3;
    bottom: 0;
    animation: pool-wave-rev 9s linear infinite;
}
@keyframes pool-wave {
    to {
        -webkit-mask-position: 200px 0;
        mask-position: 200px 0;
    }
}
@keyframes pool-wave-rev {
    to {
        -webkit-mask-position: -250px 0;
        mask-position: -250px 0;
    }
}

/* 卡片內容（疊在水位之上） */
.pool-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: inherit;
    padding: 22px 22px 20px;
}
.pool-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pool-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.92rem;
    font-weight: 600;
}
.pool-type i {
    color: var(--st);
    font-size: 1.05em;
}
.pool-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--xssc-radius-pill);
    background: color-mix(in srgb, var(--st) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--st) 55%, transparent);
    color: var(--st2);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.pool-card-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}
.pool-name {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
}
.pool-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pool-count .count {
    font-size: clamp(3rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 0.95;
    color: #fff;
    text-shadow: 0 4px 18px color-mix(in srgb, var(--st) 45%, transparent);
}
.pool-count .pool-unit {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.05rem;
    font-weight: 600;
}
.pool-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pool-limit-text {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
}
.pool-limit-text .poolLimit {
    color: #fff;
    font-weight: 700;
}
.pool-percent {
    color: var(--st2);
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

/* ---- 底部圖例 ---- */
.pool-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pool-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}
.pool-legend .pool-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.pool-dot.st-1 {
    background: #20c9a6;
}
.pool-dot.st-2 {
    background: #00a0cd;
}
.pool-dot.st-3 {
    background: #f39800;
}
.pool-dot.st-4 {
    background: #ef4b5e;
}
.pool-legend-note {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .pool-grid {
        grid-template-columns: 1fr;
    }
    .pool-card {
        min-height: 240px;
    }
}
@media (max-width: 600px) {
    .pool-board-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .pool-legend-note {
        margin-left: 0;
        width: 100%;
    }
}

/* ---- 進場淡入：沿用主題既有的 wow 群組容器 ---- */
.wow_fadeInUp_group .column {
    display: flex;
}
.wow_fadeInUp_group .column > * {
    width: 100%;
}

/* ============================================================
   頁首（header_top）：品牌漸層底 + 玻璃感即時人數 chips
   ------------------------------------------------------------
   theme 預設 header_top 為平藍底 (#086ad8)，chips/圖示原為白底深字，
   對比不足；改為與導覽列一致的品牌漸層，chips 走玻璃白字、數字亮黃，
   社群圖示白色玻璃圓鈕。含平板 / 手機 RWD。結構不動。
   ============================================================ */

header .logo img {
    height: 57px;
    width: 100%;
    max-width: 100%;
    max-height: none;
}
.header_relative {
    margin: 0;
    gap: 14px;
}
.header_relative > * {
    padding: 0;
}

/* ---- 頂欄基礎（電腦版）：維持白底、深字可讀 chips ---- */
.header_top {
    background: #fff !important;
}
.header_top .header_relative {
    align-items: center;
    padding: 8px 0 !important;
}

/* ---- 即時人數 chips（電腦版：白底深字）---- */
.header_top .pool-displays {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.header_top .pool-display {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--xssc-radius-pill);
    background: rgba(0, 115, 200, 0.06);
    border: 1px solid rgba(0, 115, 200, 0.16);
    font-size: 0.85rem;
    color: var(--xssc-ink-dim);
    line-height: 1.1;
    white-space: nowrap;
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        border-color var(--xssc-dur) var(--xssc-ease);
}
.header_top .pool-display:hover {
    background: rgba(0, 115, 200, 0.1);
    border-color: rgba(0, 115, 200, 0.28);
}
.header_top .pool-display > span:first-child {
    color: var(--xssc-deep);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.header_top .pool-display .count {
    color: var(--xssc-orange);
    font-weight: 900;
    font-size: 1.2rem;
    display: inline-block;
}
.header_top .pool-display .limit {
    color: var(--xssc-ink-dim);
    font-size: 0.75rem;
}
.header_top .pool-display .limit .poolLimit {
    color: var(--xssc-deep);
    font-weight: 700;
    display: inline-block;
}

/* ---- 頁首社群圖示（電腦版：淺藍底品牌藍鈕）---- */

.theme_light .header_style_6 .social_icon ul {
    gap: 8px;
    margin: 0;
}

.theme_light .header_style_6 .social_icon ul li {
    padding: 0;
}

.theme_light .header_style_6 .social_icon ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 115, 200, 0.1);
    border: 1px solid rgba(0, 115, 200, 0.16);
    color: var(--xssc-primary);
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        color var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease);
}
.theme_light .header_style_6 .social_icon ul li a:hover {
    background: var(--xssc-primary);
    border-color: var(--xssc-primary);
    color: #fff;
    transform: translateY(-2px);
}

.theme_light .header_style_6 .header_menu .menu::before,
.theme_light .header_style_6 .header_menu .menu::after {
    background-color: var(--xssc-yellow);
}

/* ============================================================
   平板 / 手機（≤1199px）：theme 頂欄轉藍底 → 改品牌漸層 + 玻璃白字 chips
   ============================================================ */
@media (max-width: 1199px) {
    .header_top {
        background: linear-gradient(90deg, #0f1f6b 0%, #075fa9 54%, #0090bd 100%) !important;
    }

    .header_top .pool-display {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.24);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        color: rgba(255, 255, 255, 0.82);
    }
    .header_top .pool-display:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }
    .header_top .pool-display > span:first-child {
        color: #fff;
    }
    .header_top .pool-display .count {
        color: var(--xssc-yellow);
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
    .header_top .pool-display .limit {
        color: rgba(255, 255, 255, 0.68);
    }
    .header_top .pool-display .limit .poolLimit {
        color: #fff;
    }

    .theme_light .header_style_6 .header_top .social_icon ul li a {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.28);
        color: #fff;
    }
    .theme_light .header_style_6 .header_top .social_icon ul li a:hover {
        background: #fff;
        border-color: #fff;
        color: var(--xssc-primary);
    }

    .header_mobile .language {
        display: none;
    }
}

/* ---- 平板（≤1024px）：頂欄置中、chips 稍縮 ---- */
@media (max-width: 1024px) {
    .header_top .header_relative {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .header_top .pool-displays {
        justify-content: center;
        order: 1;
    }
    .header_top .social_icon {
        order: 2;
    }
    .header_top .pool-display {
        font-size: 0.8rem;
        padding: 5px 11px;
    }
    .header_top .pool-display .count {
        font-size: 1.1rem;
    }

    .header_mobile .language {
        display: none;
    }
}

/* ---- 手機（≤767px）：chips 置中換行、社群鈕縮小 ---- */
@media (max-width: 767px) {
    .header_top .header_relative {
        padding: 10px 0 !important;
        gap: 8px;
    }
    .header_top .pool-displays {
        gap: 6px;
        width: 100%;
        flex-direction: column;
    }
    .header_top .pool-display {
        flex: 0 1 auto;
        padding: 5px 10px;
        font-size: 0.78rem;
        width: 100%;
        justify-content: center;
    }
    .header_top .pool-display .count {
        font-size: 1.05rem;
        width: 27px;
        text-align: center;
    }
    .header_top .pool-display .limit {
        font-size: 0.72rem;
    }

    .header_top .pool-display .limit .poolLimit {
        width: 20px;
        text-align: center;
    }
    .header_top .social_icon {
        display: none;
    }
    .theme_light .header_style_6 .social_icon ul li a {
        width: 33px;
        height: 33px;
        font-size: 0.9rem;
    }

    header .logo a img {
        max-height: 38px;
    }

    .header_relative {
        gap: 10px;
    }
}

/* ---- 導覽列底色：品牌漸層（深藍 → 品牌藍 → 水藍）---- */
.header_bottom,
.header_sticky {
    background: linear-gradient(90deg, #172a88 0%, #0073c8 52%, #00a0cd 100%) !important;
    box-shadow: 0 6px 18px rgba(23, 42, 136, 0.16);
}

/* ---- 導覽列防跑版：整列不換行、間距隨寬度縮放（1200–1400px）---- */
.header_bottom .header_relative {
    flex-wrap: nowrap;
}

.header_bottom .nav {
    min-width: 0;
}
.header_bottom .header_menu {
    flex-wrap: nowrap;
    gap: 12px;
}

.header_bottom .header_menu .menu .m_1 {
    white-space: nowrap;
    font-size: clamp(0.9rem, 0.62rem + 0.42vw, 1rem);
    letter-spacing: 0.4px;
    padding: 10px 0;
}
.language_style1 .lang_widget {
    padding: 0;
}
.header_bottom .language {
    margin-left: 6px;
}

.language_style1 .lang_list {
    border-radius: 0 0 var(--xssc-radius-sm) var(--xssc-radius-sm);
    box-shadow: var(--xssc-shadow);
    overflow: hidden;
}

.header_style_6 .language_style1 .lang_item {
    border-radius: 6px;
}

.language_style1 .lang_list li:hover a {
    background: rgba(0, 115, 200, 0.14);
    color: var(--xssc-primary);
}

.theme_light .header_style_6 .search_modal_btn {
    border-radius: 6px;
}
.theme_light .header_style_6 .language_style1 .lang_widget:hover .lang_item::before {
    background-color: var(--xssc-orange);
    border-color: var(--xssc-orange);
}
.theme_light .header_style_6 .search_modal_btn:hover,
.theme_light .header_style_6 .search_modal_btn:active {
    background-color: var(--xssc-orange);
    border-color: var(--xssc-orange);
}

@media (max-width: 1199px) {
    .theme_light .header_style_6 .search_modal_btn:hover,
    .theme_light .header_style_6 .search_modal_btn:active {
        background-color: transparent;
        border: unset;
        color: #000;
    }
}

/* 1200–1299px 窄帶：再收緊，確保 9 項選單 + 語言 + 搜尋單行不重疊 */
@media (min-width: 1200px) and (max-width: 1299px) {
    .header_bottom .header_menu .menu {
        margin-right: 5px;
    }
    .header_bottom .header_menu .menu .m_1 {
        font-size: 0.985rem;
        letter-spacing: 0;
    }
    .header_bottom .language {
        margin-left: 2px;
    }
    .header_bottom .language .lang_widget {
        padding: 0 4px;
    }
}
.header_bottom .language,
.header_bottom .search,
.header_bottom .mobile {
    flex-shrink: 0;
}

/* ---- 導覽列 hover：亮點黃 ---- */
.header_bottom .header_menu li.menu > .m_1:hover {
    color: var(--xssc-yellow);
}
.header_bottom .header_menu .submenu {
    border-radius: 0 0 var(--xssc-radius-sm) var(--xssc-radius-sm);
    box-shadow: var(--xssc-shadow);
    overflow: hidden;
}
.header_bottom .header_menu .submenu .m_2 {
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        color var(--xssc-dur) var(--xssc-ease);
}
.header_bottom .header_menu .submenu .m_2:hover {
    background: rgba(0, 115, 200, 0.14);
    color: var(--xssc-primary);
}

/* ============================================================
   搜尋彈窗（search_modal）：品牌深藍玻璃遮罩 + 膠囊輸入框
   （只改樣式，不動 HTML 結構）
   ============================================================ */

/* ---- 遮罩：深藍漸層 + 毛玻璃，取代原本純黑 ---- */
.search_modal .modal_background {
    background: linear-gradient(
        135deg,
        rgba(23, 42, 136, 0.95) 0%,
        rgba(0, 71, 145, 0.92) 55%,
        rgba(0, 118, 168, 0.9) 100%
    );
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ---- 內容區加寬、置中留白，並加上標題 ---- */
.search_modal .modal_content {
    max-width: 640px;
    text-align: center;
}
.search_modal .modal_content::before {
    content: "搜尋 新生運動館暨碧湖游泳池";
    display: block;
    margin-bottom: 18px;
    color: #fff;
    font-weight: 900;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.06em;
}
.search_modal .modal_content::after {
    content: "輸入關鍵字，快速找到課程、場館與最新資訊";
    display: block;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* ---- 輸入框：品牌膠囊 + 玻璃質感 ---- */
.search_modal .search_input_group input {
    width: 100%;
    height: 64px;
    padding: 10px 68px 10px 26px !important;
    border-radius: var(--xssc-radius-pill) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 30px rgba(0, 20, 60, 0.25);
    transition:
        border-color var(--xssc-dur) var(--xssc-ease),
        background var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.search_modal .search_input_group input:focus {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: var(--xssc-secondary) !important;
    box-shadow:
        0 0 0 4px rgba(0, 160, 205, 0.3),
        0 10px 30px rgba(0, 20, 60, 0.3);
}
.search_modal .search_input_group input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

/* ---- 送出鈕：水感漸層圓鈕，內嵌於輸入框右側 ---- */
.search_modal .search_input_group .search_btn {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    background: var(--xssc-grad-aqua) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 16px rgba(0, 115, 200, 0.4);
    transition:
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease),
        filter var(--xssc-dur) var(--xssc-ease);
}
.search_modal .search_input_group .search_btn:hover {
    transform: translateY(-50%) scale(1.06);
    filter: brightness(1.06);
    box-shadow: 0 8px 22px rgba(0, 115, 200, 0.5);
}

/* ---- 關閉鈕：圓框，hover 填水藍並旋轉 ---- */
.search_modal .search_modal_close {
    top: clamp(18px, 3vw, 34px);
    right: clamp(18px, 3vw, 40px);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 1.15rem;
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        border-color var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease);
}
.search_modal .search_modal_close:hover {
    background: var(--xssc-secondary);
    border-color: var(--xssc-secondary);
    transform: rotate(90deg);
}

/* ============================================================
   手機／平板 左側滑出選單（slide_left）美化
   ------------------------------------------------------------
   選單面板由 theme JS 動態生成（clone .nav / .language / 社群），
   僅能以 CSS 針對 .header_mobile_navbar 生成結構美化，結構不動。
   ============================================================ */

/* ---- 面板：白底、加寬、精緻陰影、右緣圓角 ---- */

header.slide_left .header_mobile_navbar .mobile_wrap {
    width: min(86vw, 340px);
    -webkit-transform: translateX(calc(-1 * min(86vw, 340px)));
    transform: translateX(calc(-1 * min(86vw, 340px)));
    padding: 0;
    border-radius: 0 20px 20px 0;
    /* 面板本身不捲動：改為滿版直欄，僅中間選單區捲動 */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
header.slide_left .header_mobile_navbar.nav_left .mobile_wrap {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    box-shadow: 0 0 44px rgba(23, 42, 136, 0.28);
}
/* 背景遮罩：帶品牌深藍 */
header.slide_left .header_mobile_navbar .mobile_backdrop {
    background-color: rgba(15, 31, 107, 0.45) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ---- 頂部列：品牌漸層 + 白色關閉鈕 + 品牌字樣 ---- */
.header_mobile_navbar .mobile_head {
    background: linear-gradient(120deg, #172a88 0%, #0073c8 62%, #00a0cd 100%);
    padding: 17px 20px !important;
    align-items: center !important;
    border-bottom: none !important;
    flex: 0 0 auto;
}
.header_mobile_navbar .mobile_head .close-toggler .toggler-btn .line {
    background-color: #fff;
}
.header_mobile_navbar .mobile_head::after {
    content: "新生運動館 · 碧湖游泳池";
    margin-left: 14px;
    color: #fff;
    font-weight: 700;
    font-size: 0.94rem;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

header.slide_left .header_mobile_navbar .mobile_main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* 語言切換：固定在頂部（關閉列下方），不隨選單捲動 */
header.slide_left .header_mobile_navbar .mobile_main > .language {
    order: -1;
    flex: 0 0 auto;
}
/* 選單清單：佔滿中間、僅此區可垂直捲動 */
header.slide_left .header_mobile_navbar .mobile_main > .nav {
    order: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* 社群圖示：固定在底部 */
header.slide_left .header_mobile_navbar .mobile_main > .social_icon {
    order: 1;
    flex: 0 0 auto;
}
/* ---- 主選單項目 ---- */

.header_mobile_navbar .header_mobile_menu .menu:not(:last-child) > a {
    border-bottom: 1px solid #eef2f6;
}
.header_mobile_navbar .header_mobile_menu .menu > .m_1 {
    position: relative;
    padding: 15px 22px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--xssc-deep);
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        background var(--xssc-dur) var(--xssc-ease);
}
/* 左側品牌強調條（hover / 展開時出現）*/
.header_mobile_navbar .header_mobile_menu .menu > .m_1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #0073c8, #00a0cd);
    transition: height var(--xssc-dur) var(--xssc-ease);
}
.header_mobile_navbar .header_mobile_menu .menu > .m_1:hover,
.header_mobile_navbar .header_mobile_menu .menu.active > .m_1 {
    color: var(--xssc-primary);
    background: rgba(0, 115, 200, 0.05);
}
.header_mobile_navbar .header_mobile_menu .menu > .m_1:hover::before,
.header_mobile_navbar .header_mobile_menu .menu.active > .m_1::before {
    height: 22px;
}

/* ---- 展開箭頭 ---- */
.header_mobile_navbar .header_mobile_menu .down-btn {
    color: var(--xssc-primary);
    height: 54px;
}
.header_mobile_navbar .header_mobile_menu .down-btn::after {
    font-size: 13px;
    color: var(--xssc-primary);
}
.header_mobile_navbar .header_mobile_menu .menu.active > .down-btn {
    color: var(--xssc-secondary);
}

/* ---- 子選單 ---- */
.header_mobile_navbar .header_mobile_menu .submenu {
    background: rgba(0, 115, 200, 0.035) !important;
    padding: 6px 0 !important;
    border-left: 3px solid var(--xssc-secondary);
    box-shadow: inset 0 1px 0 rgba(0, 115, 200, 0.07);
    overflow: hidden;
}
/* 展開中的父項：底色略深，與子分類卡連成同一區塊層級 */
.header_mobile_navbar .header_mobile_menu .menu.active > .m_1 {
    background: rgba(0, 115, 200, 0.16);
}
.header_mobile_navbar .header_mobile_menu .menu.active > .m_1::before {
    height: 26px;
}
.header_mobile_navbar .header_mobile_menu .submenu .m_2 {
    position: relative;
    padding: 9px 22px 9px 36px !important;
    font-size: 0.94rem;
    color: var(--xssc-ink-dim);
    font-weight: 500;
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        background var(--xssc-dur) var(--xssc-ease);
}
.header_mobile_navbar .header_mobile_menu .submenu .m_2::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--xssc-secondary);
    opacity: 0.8;
    transition: opacity var(--xssc-dur) var(--xssc-ease);
}
.header_mobile_navbar .header_mobile_menu .submenu .m_2:hover {
    color: var(--xssc-primary);
    background: rgba(0, 115, 200, 0.12);
}
.header_mobile_navbar .header_mobile_menu .submenu .m_2:hover::before {
    opacity: 1;
}

/* ---- 底部社群圖示：白底面板上的品牌藍圓鈕、置中 ---- */
.header_mobile_navbar .social_icon ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 18px 20px 18px;
}
.header_mobile_navbar .social_icon ul li {
    padding: 0;
}
.theme_light .header_style_6 .header_mobile_navbar .social_icon ul li a {
    width: 40px;
    height: 40px;
    background: rgba(0, 115, 200, 0.1);
    border: 1px solid rgba(0, 115, 200, 0.16);
    color: var(--xssc-primary);
}
.theme_light .header_style_6 .header_mobile_navbar .social_icon ul li a:hover {
    background: var(--xssc-primary);
    border-color: var(--xssc-primary);
    color: #fff;
    transform: translateY(-2px);
}

/* ---- 底部語言切換：品牌漸層藥丸（含地球 icon）---- */
header.slide_left .header_mobile_navbar .language {
    display: block;
    padding: 0;
    margin: 14px 22px 14px;
    order: -1;
}
.header_mobile_navbar .language .lang_widget {
    width: 100%;
    padding: 0;
}
.header_mobile_navbar .language .lang_item {
    display: flex !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 12px 16px !important;
    border-radius: var(--xssc-radius-pill) !important;
    background: linear-gradient(120deg, #172a88 0%, #0073c8 62%, #00a0cd 100%) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem !important;
    letter-spacing: 0.4px;
    box-shadow: 0 8px 20px rgba(0, 115, 200, 0.26);
}
/* 蓋掉 theme 的 hover 底色覆蓋層，直接用漸層底 */
.header_mobile_navbar .language .lang_item::before {
    display: none !important;
}
.header_mobile_navbar .language .lang_item > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.header_mobile_navbar .language .lang_item > span::before {
    content: "\f0ac";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 0.95rem;
}
.header_mobile_navbar .language .lang_item {
    cursor: pointer;
}
.header_mobile_navbar .language .lang_item::after {
    margin-left: 6px;
    transform: rotate(0) !important;
    transition: transform var(--xssc-dur) var(--xssc-ease);
}
.header_mobile_navbar .language.lang-open .lang_item::after {
    transform: rotate(180deg) !important;
}
.header_mobile_navbar .language .lang_widget:hover .lang_item {
    filter: none;
}
/* 平板/手機：語言下拉改為「點擊展開」——靜態流於藥丸下方，
   預設收合，由 JS 切換 .lang-open（不再依賴 hover）*/
.header_mobile_navbar .language .lang_dropdown {
    top: auto !important;
    left: auto !important;
    width: 100%;
    padding: 0 !important;
    margin-top: 0;
    max-height: 0;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition:
        max-height var(--xssc-dur) var(--xssc-ease),
        opacity var(--xssc-dur) var(--xssc-ease),
        margin-top var(--xssc-dur) var(--xssc-ease);
}
.header_mobile_navbar .language.lang-open .lang_dropdown {
    max-height: 320px;
    margin-top: 10px;
    opacity: 1 !important;
    visibility: visible !important;
}
/* 語言下拉：藥丸下方的置中卡片列 */

.header_mobile_navbar .language .lang_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 6px;
    background: var(--xssc-gray-50);
    border: 1px solid var(--xssc-gray-100);
    border-radius: 14px;
}
.header_mobile_navbar .language .lang_list li {
    padding: 0;
    margin: 0;
}
.header_mobile_navbar .language .lang_list li a {
    display: block;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--xssc-ink-dim);
    font-weight: 600;
    font-size: 0.92rem;
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        background var(--xssc-dur) var(--xssc-ease);
}
.header_mobile_navbar .language .lang_list li a:hover {
    background: rgba(0, 115, 200, 0.16);
    color: var(--xssc-primary);
}

/* ============================================================
   頁尾：深藍質感（品牌 Deep Blue）
   ============================================================ */
footer.footer_color {
    position: relative;
    background:
        radial-gradient(80% 120% at 85% 0%, rgba(0, 160, 205, 0.18), transparent 60%),
        linear-gradient(180deg, #172a88 0%, #101a5e 55%, #0b1147 100%);
    overflow: hidden;
}
/* 頂部品牌漸層細線 */
footer.footer_color::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--xssc-grad-brand);
    z-index: 2;
}
/* 低透明度水感光暈（背景輔助，非主角） */
footer.footer_color::after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -140px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: var(--xssc-grad-aqua);
    opacity: 0.08;
    filter: blur(30px);
    pointer-events: none;
}
footer.footer_color .footer_top {
    position: relative;
    z-index: 1;
    padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 36px);
}
footer.footer_color .footer_logo .logo_item {
    display: inline-block;
    padding: 10px 10px;
    background: #fff;
    border-radius: var(--xssc-radius);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
footer.footer_color .footer_logo img {
    max-height: 60px;
    max-width: 100%;
}

/* ---- 聯絡資訊：橫向排列，icon 做成水藍圓底 chip ---- */
footer.footer_color .social_info .theme-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    margin: 0;
}
footer.footer_color .social_info .theme-footer li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0;
    color: #dbe6ff;
    font-size: 0.98rem;
    line-height: 1.4;
    padding: 0;
}
footer.footer_color .social_info .theme-footer li > span {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}
/* 讓數值可縮排換行，避免擠壓「地址」等標籤導致直排斷字 */
footer.footer_color .social_info .theme-footer li > a {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
/* 手機版：地址等長內容改為圖示置頂、標籤與內容左對齊不斷字 */
@media (max-width: 767px) {
    footer.footer_color .social_info .theme-footer {
        gap: 14px 0;
    }
    footer.footer_color .social_info .theme-footer li {
        width: 100%;
        align-items: flex-start;
    }
    footer.footer_color .social_info .fas-icon {
        margin-top: 1px;
    }
}
footer.footer_color .social_info .fas-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 160, 205, 0.16);
    color: var(--xssc-secondary);
    font-size: 0.92rem;
    position: relative;
    top: auto;
    left: auto;
    border: 1px solid rgb(0 160 205 / 14%);
}
footer.footer_color .social_info a,
footer.footer_color .copy_right,
footer.footer_color .footer_bottom {
    color: #eaf1ff;
}
footer.footer_color .social_info a {
    text-decoration: none;
    transition: color var(--xssc-dur) var(--xssc-ease);
}
footer[class*="footer_layout"] .site_map .footer_menu li a:hover,
footer[class*="footer_layout"] .social_info li a:hover {
    color: var(--xssc-yellow);
}

.tooltip {
    background-color: var(--xssc-orange);
}
.tooltip:after {
    border-top-color: var(--xssc-orange);
}
/* ---- 頁尾社群圖示：深底半透明白圓鈕，hover 水藍 ---- */

.social_icon ul {
    gap: 10px;
    margin: 0;
}

footer .social_icon li {
    padding: 0;
}

footer.footer_color .social_icon .theme-footer > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.05rem;
    opacity: 1 !important;
    transition:
        background var(--xssc-dur) var(--xssc-ease),
        color var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease),
        border-color var(--xssc-dur) var(--xssc-ease);
}
footer.footer_color .social_icon .theme-footer > li > a:hover {
    background: var(--xssc-secondary) !important;
    border-color: var(--xssc-secondary);
    color: #fff !important;
    transform: translateY(-3px);
}

/* ---- 頁尾底部列：分隔線 + 柔和文字 ---- */
footer.footer_color .footer_bottom {
    padding: 16px 0;
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
footer.footer_color .footer_bottom .copy_right,
footer.footer_color .footer_bottom .col-md-6 > div {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
footer.footer_color .footer_bottom .col-md-6:last-child > div {
    text-align: right;
}
@media (max-width: 767px) {
    footer.footer_color .footer_bottom .col-md-6:last-child > div {
        text-align: center;
        margin-top: 6px;
    }
}

/* ============================================================
   Cookie 同意視窗：品牌浮動卡片（覆蓋 plugin，不動 HTML）
   ============================================================ */
#cookie-dialog {
    background-color: transparent !important;
    padding: 0 16px 18px;
    pointer-events: none; /* 透明區不擋點擊，只有卡片可互動 */
}
#cookie-dialog .cookie-privacy-message {
    pointer-events: auto;
    max-width: 1120px;
    padding: 22px 30px;
    border-radius: var(--xssc-radius-lg);
    background: linear-gradient(135deg, #172a88 0%, #0073c8 100%);
    box-shadow: var(--xssc-shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
#cookie-dialog .cookie-privacy-message h4 {
    color: #fff;
    font-weight: 700;
}
#cookie-dialog .cookie-privacy-message a {
    color: var(--xssc-yellow);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#cookie-dialog .cookie-privacy-message #agree-cookie-btn {
    width: 100%;
    min-width: 128px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border: 0;
    border-radius: var(--xssc-radius-pill);
    background: var(--xssc-orange);
    color: #fff;
    font-size: 0.975rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--xssc-shadow);
}
#cookie-dialog .cookie-privacy-message #agree-cookie-btn:hover {
    background-color: var(--xssc-yellow);
    color: var(--xssc-deep);
    transform: translateY(-1px);
}

@media (max-width: 991px) {
    #cookie-dialog .cookie-privacy-message #agree-cookie-btn {
        width: 100%;
    }
}

.banner-content h2 {
    font-weight: 600;
}

/* ============================================================
   內頁文章／產品列表（課程介紹 / products 等）美化
   ------------------------------------------------------------
   套用於 .article-list-1 卡片列表；結構不動，純樣式與互動。
   卡片圓角、柔和陰影、hover 浮起、圖片微縮放、等高卡片、
   詳細內容改為品牌藍描邊（hover 填滿），避免橘色氾濫（60-30-10）。
   ============================================================ */

/* ---- 子分類切換列（產品分類 pills）---- */
.pageMain .top_section .navigation-field {
    gap: 10px;
    margin: 0;
}
.pageMain .top_section .navigation-field > li {
    padding: 0;
}
.pageMain .navigation-field li a {
    display: inline-block;
    padding: 12px 20px;
    border-radius: var(--xssc-radius-pill);
    background: var(--xssc-gray-100);
    color: var(--xssc-ink-dim);
    font-weight: 600;
    font-size: 0.95rem;
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        background var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.pageMain .navigation-field li a:hover {
    background: rgba(0, 115, 200, 0.1);
    color: var(--xssc-primary);
}
.pageMain .navigation-field li.active a {
    background: var(--xssc-grad-aqua);
    color: #fff;
    box-shadow: var(--xssc-shadow-sm);
}

/* 手機版：覆蓋主題的整欄堆疊（width:100%、直角相連），
   改為置中、可換行的膠囊列，與桌機視覺一致 */
@media (max-width: 767px) {
    .pageMain .top_section .navigation-field {
        border-radius: 0;
        gap: 8px;
        margin: 0;
        justify-content: center;
    }
    .pageMain .top_section .navigation-field > li {
        width: auto;
        margin-bottom: 0;
        overflow: visible;
    }
    .pageMain .top_section .navigation-field > li > a,
    .pageMain .navigation-field li a {
        display: inline-block;
        width: auto;
        border: 0;
        border-radius: var(--xssc-radius-pill);
        padding: 11px 16px;
        font-size: 0.9rem;
    }
    /* 消除主題對首/末項的直角圓角覆蓋 */
    .pageMain .top_section .navigation-field > li:first-of-type a,
    .pageMain .top_section .navigation-field > li:last-of-type a {
        border-radius: var(--xssc-radius-pill);
    }
}

/* ---- 區塊主標題 ---- */
.pageMain .main_title_widget {
    text-align: center;
    margin-bottom: 34px;
}
.pageMain .main_title_widget h1 {
    color: var(--xssc-deep);
    font-weight: 800;
}

/* ---- 卡片本體：圓角、柔和陰影、等高、hover 浮起 ---- */
.article-list-1 .col-article {
    margin-bottom: 28px;
}
.article-list-1 .article-thumb {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--xssc-white);
    border-radius: var(--xssc-radius-lg);
    overflow: hidden;
    box-shadow: var(--xssc-shadow);
    transition:
        transform var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease);
}
.article-list-1.article-list-border .article-thumb {
    border: 1px solid var(--xssc-gray-100);
}
.article-list-1 .article-thumb:hover {
    transform: translateY(-6px);
    box-shadow: var(--xssc-shadow-hover);
}

/* ---- 圖片：等比裁切、圓角容器、hover 微縮放 ---- */
.article-list-1 .article-image {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--xssc-gray-50);
}
.article-list-1 .article-image a {
    display: block;
    width: 100%;
    height: 100%;
}
.article-list-1 .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--xssc-dur-slow) var(--xssc-ease);
}
.article-list-1 .article-thumb:hover .article-image img {
    transform: scale(1.06);
}

/* ---- 日期（最新資訊）：品牌藍日曆 icon、清爽字距 ---- */
.article-list-1 .a-date {
    margin-bottom: 10px;
    color: var(--xssc-ink-dim);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}
.article-list-1 .a-date::before {
    color: var(--xssc-primary);
}

/* ---- 內文區：撐滿等高、按鈕沉底對齊 ---- */
.article-list-1 .article-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 5px 5px;
}
.article-list-1 .article-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.article-list-1 .a-t1 {
    margin: 0 0 10px;
    font-size: 1.12rem;
    line-height: 1.4;
}
.article-list-1 .a-t1 a {
    color: var(--xssc-deep);
    font-weight: 700;
    transition: color var(--xssc-dur) var(--xssc-ease);
}
.article-list-1 .article-thumb:hover .a-t1 a,
.article-list-1 .a-t1 a:hover {
    color: var(--xssc-primary);
}
.article-list-1 .a-desc {
    margin: 0;
    color: var(--xssc-ink-dim);
    font-size: 0.95rem;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 詳細內容：品牌藍描邊 → hover 漸層填滿（避免橘色氾濫）---- */
.article-list-1 .a-more-box {
    margin-top: auto;
}
.article-list-1 .a-more.btn.btn-default {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    margin-top: 18px;
    border-radius: var(--xssc-radius-pill);
    background: transparent; /* 按鈕本身底色原為黑，透明化以露出 ::before 描邊藥丸 */
    color: var(--xssc-primary);
    font-weight: 600;
    font-size: 0.9rem;
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease);
}
/* 主題以 ::before 當作藥丸底色（原為橘）：改為品牌藍描邊、透明底 */
.article-list-1 .a-more.btn.btn-default::before {
    border-radius: var(--xssc-radius-pill);
    border: 1.5px solid var(--xssc-primary);
    background: transparent;
    opacity: 1;
}
/* 箭頭 */
.article-list-1 .a-more.btn.btn-default::after {
    content: "\f061"; /* arrow-right */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 0.72rem;
    transition: transform var(--xssc-dur) var(--xssc-ease);
}
/* 填色僅在真正支援 hover 的裝置生效，避免觸控點擊後卡在填色狀態 */
@media (hover: hover) {
    .article-list-1 .a-more.btn.btn-default:hover {
        color: #fff;
        box-shadow: var(--xssc-shadow-hover);
    }
    .article-list-1 .a-more.btn.btn-default:hover::before {
        background: var(--xssc-grad-aqua);
        border-color: transparent;
        opacity: 1;
    }
    .article-list-1 .a-more.btn.btn-default:hover::after {
        transform: translateX(3px);
    }
}
/* 觸控裝置：改用 :active 做「點擊瞬間」回饋，放開即恢復描邊 */
@media (hover: none) {
    .article-list-1 .a-more.btn.btn-default:active {
        color: #fff;
    }
    .article-list-1 .a-more.btn.btn-default:active::before {
        background: var(--xssc-grad-aqua);
        border-color: transparent;
    }
}

/* ---- 分頁 ---- */
.pages .pagination {
    gap: 8px;
}
.pages .page-item .page-link {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--xssc-gray-100);
    border-radius: 12px;
    color: var(--xssc-ink-dim);
    font-weight: 600;
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        background var(--xssc-dur) var(--xssc-ease),
        border-color var(--xssc-dur) var(--xssc-ease);
}
.pages .page-item .page-link:hover {
    background: rgba(0, 115, 200, 0.08);
    border-color: rgba(0, 115, 200, 0.24);
    color: var(--xssc-primary);
}
.pages .page-item.active .page-link {
    background: var(--xssc-grad-aqua);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--xssc-shadow-sm);
    background-position: 20% 20%;
    background-size: 140% 140%;
}
.pages .page-item.disabled .page-link {
    opacity: 0.45;
}

/* ============================================================
   文章詳細頁（news_view / 內頁單篇）美化
   ------------------------------------------------------------
   標題日期 meta、內文圖片圓角、上一篇/返回上頁/下一篇按鈕品牌化。
   結構不動，純樣式；editor-area 內的行內樣式內容不覆蓋。
   ============================================================ */

/* ---- 標題下方發布日期 ---- */
.main_title_widget .post_time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--xssc-ink-dim);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}
.main_title_widget .post_time i {
    color: var(--xssc-primary);
}

.page_news_view .main_title_widget {
    text-align: center;
}

.page_news_view .main_title_widget h1::after {
    width: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.page_news_view .main_title_widget h1::before {
    height: 1px;
    bottom: 1px;
}

/* ---- 內文圖片：圓角、響應式（不動已內嵌樣式的排版）---- */
.editor-area img {
    max-width: 100%;
    height: auto;
    border-radius: var(--xssc-radius);
}

/* ---- 文末導覽：上一篇 / 返回上頁 / 下一篇 ---- */
.backBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 44px;
}
.backBox .btn.btn-default {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--xssc-radius-pill);
    background-position: 20% 20%;
    background-size: 140% 140%;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        box-shadow var(--xssc-dur) var(--xssc-ease),
        transform var(--xssc-dur) var(--xssc-ease);
}
/* 預設（返回上頁，無箭頭 icon）＝ 實心主按鈕；主題 ::before 當藥丸底（原橘） */
.backBox .btn.btn-default::before {
    border-radius: var(--xssc-radius-pill);
    border: 1.5px solid transparent;
    background: var(--xssc-grad-aqua);
    opacity: 1;
    background-position: 20% 20%;
    background-size: 140% 140%;
}

.backBox .btn-default > .fa-angle-left,
.backBox .btn-default > .fa-angle-right {
    margin: 0;
    top: 0;
    letter-spacing: normal;
    width: auto;
}

@media (hover: hover) {
    .backBox .btn.btn-default:hover {
        box-shadow: var(--xssc-shadow-hover);
        transform: translateY(-2px);
        background-position: 20% 20%;
        background-size: 140% 140%;
    }
    .backBox .btn.btn-default:hover::before {
        background: var(--xssc-grad-brand);
        background-position: 20% 20%;
        background-size: 140% 140%;
    }
}
/* 上一篇 / 下一篇（含箭頭 icon）＝ 品牌藍描邊，hover 才填滿 */
.backBox .btn.btn-default:has(i) {
    color: var(--xssc-primary);
}
.backBox .btn.btn-default:has(i)::before {
    background: transparent;
    border-color: var(--xssc-primary);
}
@media (hover: hover) {
    .backBox .btn.btn-default:has(i):hover {
        color: #fff;
    }
    .backBox .btn.btn-default:has(i):hover::before {
        background: var(--xssc-grad-aqua);
        border-color: transparent;
        background-position: 20% 20%;
        background-size: 140% 140%;
    }
}
/* 停用狀態（無上一篇或下一篇）：淡化、不可點 */
.backBox .btn.btn-default.btnDisable {
    color: var(--xssc-gray-300);
    cursor: default;
    pointer-events: none;
}
.backBox .btn.btn-default.btnDisable::before {
    border-color: var(--xssc-gray-100);
    background: transparent;
}
.backBox .btn.btn-default.btnDisable:hover {
    color: var(--xssc-gray-300);
    transform: none;
    box-shadow: none;
}

@media (max-width: 767px) {
    .backBox .btn.btn-default {
        padding: 12px 18px;
    }
}

/* ============================================================
   產品詳細頁（products_view）美化
   ------------------------------------------------------------
   圖庫主圖／縮圖、型號副標、產品分頁 tabs 品牌化；結構不動。
   ============================================================ */

/* 詳細頁標題靠左（回復佈景主題設定，修正列表置中規則對內頁的越界）*/
.page_products_view .main_title_widget {
    text-align: left;
}

.page_products_view .main_title_widget h1 {
    font-size: clamp(1.6rem, 3vw, 1.8rem);
}

.page_products_view .main_title_widget h1::before {
    height: 1px;
    bottom: 1px;
}

/* ---- 主圖：圓角、細邊、柔和陰影 ---- */
.product_view #mainCarousel {
    border-radius: var(--xssc-radius-lg);
    border: 1px solid var(--xssc-gray-100);
    background: var(--xssc-gray-50);
    overflow: hidden;
    box-shadow: var(--xssc-shadow-sm);
}
.product_view #mainCarousel img {
    border-radius: var(--xssc-radius-lg);
}

/* ---- 縮圖：圓角、選中／hover 品牌藍框 ---- */
.product_view #thumbCarousel .f-carousel__slide button {
    border-radius: var(--xssc-radius-sm);
    border-color: var(--xssc-gray-100);
    overflow: hidden;
}
.product_view #thumbCarousel .f-carousel__slide button:hover {
    opacity: 1;
    border-color: rgba(0, 115, 200, 0.5);
}
.product_view #thumbCarousel .f-carousel__slide.is-selected button {
    border-color: var(--xssc-primary);
    box-shadow: 0 0 0 1px var(--xssc-primary);
}
.product_view #thumbCarousel .f-carousel__slide button img {
    border-radius: 5px;
}
/* ---- 型號副標：品牌藍 eyebrow ---- */
.product_info .product_subtitle {
    color: var(--xssc-primary);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 4px 0 14px;
}

/* ---- 產品分頁 tabs：品牌藍藥丸（取代橘色 active）---- */
.products-view-style1 .editor-area .nav-tabs .nav-link {
    border: 1px solid var(--xssc-gray-100);
    border-radius: var(--xssc-radius-pill);
    background: var(--xssc-gray-50);
    color: var(--xssc-ink-dim);
    font-weight: 600;
    padding: 12px 22px;
    line-height: 1;
}
.products-view-style1 .editor-area .nav-tabs .nav-link:hover {
    color: var(--xssc-primary);
    border-color: rgba(0, 115, 200, 0.35);
    background: rgba(0, 115, 200, 0.06);
}
.products-view-style1 .editor-area .nav-tabs .nav-item.show .nav-link,
.products-view-style1 .editor-area .nav-tabs .nav-link.active {
    color: #fff;
    border-color: transparent;
    background: var(--xssc-grad-aqua);
    box-shadow: var(--xssc-shadow-sm);
}

/* ============================================================
   常見問題／頁面 Accordion（手風琴）美化
   ------------------------------------------------------------
   Bootstrap accordion；展開列原被主題設為橘色 → 改品牌藍漸層。
   箭頭為 FA glyph（color:inherit），隨文字色自動變化。結構不動。
   ============================================================ */
.pageMain .editor-area .accordion .accordion-item {
    border: 1px solid var(--xssc-gray-100);
    border-radius: var(--xssc-radius);
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: var(--xssc-shadow-sm);
    transition: box-shadow var(--xssc-dur) var(--xssc-ease);
}
.pageMain .editor-area .accordion .accordion-item:hover {
    box-shadow: var(--xssc-shadow);
}

/* ---- 問題（收合狀態）---- */
.pageMain .editor-area .accordion-item > .accordion-header .accordion-button {
    padding: 1.05rem 1.25rem;
    color: var(--xssc-deep);
    background: #fff;
    font-weight: 600;
    font-size: 1.02rem;
    transition:
        color var(--xssc-dur) var(--xssc-ease),
        background var(--xssc-dur) var(--xssc-ease);
}
.pageMain .editor-area .accordion-item > .accordion-header .accordion-button:hover {
    color: var(--xssc-primary);
    background: rgba(0, 115, 200, 0.05);
}

/* ---- 問題（展開狀態）：品牌藍漸層（取代橘色）---- */
.pageMain .editor-area .accordion-item > .accordion-header .accordion-button:not(.collapsed) {
    color: #fff;
    background: var(--xssc-grad-aqua);
    box-shadow: none;
}

/* 箭頭旋轉過渡 */
.pageMain .editor-area .accordion-button::after {
    transition: transform var(--xssc-dur) var(--xssc-ease);
}

/* ---- 答案 ---- */
.pageMain .editor-area .accordion-item .accordion-body {
    padding: 1.1rem 1.25rem 1.2rem;
    color: var(--xssc-ink);
    line-height: 1.85;
    background: #fff;
    border-left: 3px solid rgba(0, 115, 200, 0.25);
}

/* ---- Q：／A： 懸掛縮排：換行文字對齊「：」之後的內容，不再縮回標籤下 ---- */
.pageMain .editor-area .accordion-item > .accordion-header .accordion-button {
    padding-left: calc(1.25rem + 1.6em);
    text-indent: -1.6em;
}
.pageMain .editor-area .accordion-button::after {
    text-indent: 0;
}
.pageMain .editor-area .accordion-item .accordion-body {
    padding-left: calc(1.25rem + 1.6em);
    text-indent: -1.6em;
}
.pageMain .editor-area .accordion-item .accordion-body p {
    margin-bottom: 0;
}

/* ============================================================
   手機底部快速聯絡列（#mobile-field，僅 <480px 顯示）
   原為 5 塊全彩色滿版方塊（電話/LINE/FB/地圖/信箱）→ 資訊平台感、
   與品牌藍系統衝突。改為：浮起白色圓角列（60% 白），品牌藍描邊圖示
   （30% 藍），僅「撥打電話」為活力橘 CTA（≤10% 點綴）。結構不動。
   ============================================================ */
@media (max-width: 479px) {
    #mobile-field {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 4px;
        padding: 6px !important;
        background: #ffffff !important;
        border: 1px solid var(--xssc-gray-100);
        border-radius: 18px;
        box-shadow:
            0 10px 30px rgba(15, 31, 107, 0.16),
            0 2px 8px rgba(15, 31, 107, 0.08);
    }
    /* 各按鈕底色由彩虹改為透明，讓內層 <a> 呈現統一品牌樣式 */
    #mobile-field .btn-tel,
    #mobile-field .btn-line,
    #mobile-field .btn-facebook,
    #mobile-field .btn-address,
    #mobile-field .btn-email {
        background-color: transparent !important;
    }
    #mobile-field .control-btn a {
        height: 46px !important;
        border-radius: 13px;
        color: var(--xssc-primary) !important;
        background: transparent;
        font-size: 1.2rem !important;
        transition:
            color var(--xssc-dur) var(--xssc-ease),
            background var(--xssc-dur) var(--xssc-ease),
            transform var(--xssc-dur) var(--xssc-ease);
    }
    #mobile-field .control-btn i {
        line-height: 1 !important;
    }
    /* 觸控回饋：按下時淡藍底 + 微縮 */
    #mobile-field .control-btn a:active {
        background: rgba(0, 115, 200, 0.1);
        transform: scale(0.94);
    }
    /* 主要行動：撥打電話 = 活力橘 CTA（品牌 10% 點綴） */
    #mobile-field .btn-tel a {
        color: #fff !important;
        background: linear-gradient(135deg, var(--xssc-orange), var(--xssc-yellow));
        box-shadow: 0 4px 12px rgba(243, 152, 0, 0.34);
    }
    #mobile-field .btn-tel a:active {
        background: linear-gradient(135deg, var(--xssc-orange), var(--xssc-yellow));
        transform: scale(0.94);
    }
}