.rbt-section-gap-compact {
  padding: 20px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rbt-section-gap-compact {
    padding: 20px 0;
  }
}
@media only screen and (max-width: 767px) {
  .rbt-section-gap-compact {
    padding: 20px 0;
  }
}
/* ============================================================
   Course Card Swiper Custom Styles 
   ============================================================ */

/* 確保 Swiper 容器有足夠空間顯示箭頭 */
.course-card-swiper-activation {
    padding: 10px 5px;
    position: relative;
}

/* 修正箭頭動畫圖示重疊問題 (解決看到4個箭頭的Bug) */
.course-card-swiper-activation .custom-overfolow {
    position: relative;
    overflow: hidden;
    display: block;
    height: 20px;
    width: 20px;
}

.course-card-swiper-activation .custom-overfolow i {
    position: absolute;
    inset: 0;
    transition: 0.4s;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.course-card-swiper-activation .custom-overfolow i.rbt-icon-top {
    transform: translateY(100%);
}

.course-card-swiper-activation .rbt-swiper-arrow:hover .rbt-icon {
    transform: translateY(-100%);
}

.course-card-swiper-activation .rbt-swiper-arrow:hover .rbt-icon-top {
    transform: translateY(0);
}

/* 確保卡片在 Swiper 中高度統一 */
.course-card-swiper-activation .swiper-slide {
    height: auto;
}

.course-card-swiper-activation .rbt-card {
    height: 100%;
}

/* ============================================================
   Banner Full Image with Button Only
   ============================================================ */

/* 只顯示圖片和按鈕的banner */
.rbt-banner-11 .banner-image-only .swiper-slide {
    min-height: 600px !important;
    position: relative !important;
    overflow: hidden !important;
}

.rbt-banner-11 .banner-image-only .row {
    width: 100% !important;
    position: relative !important;
    min-height: 600px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 圖片列 - 拉滿整個區域 */
.rbt-banner-11 .banner-image-only .col-lg-6:nth-child(1) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    flex: none !important;
    max-width: none !important;
}

.rbt-banner-11 .banner-image-only .course-thumbnail {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.rbt-banner-11 .banner-image-only .course-thumbnail a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.rbt-banner-11 .banner-image-only .course-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 文字列 - 保留按鈕並移到中間下方 */
.rbt-banner-11 .banner-image-only .col-lg-6:nth-child(2) {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

.rbt-banner-area.rbt-banner-11.bg-color-darker,
.rbt-banner-area.rbt-banner-11 {
    background: transparent !important;
}

.rbt-banner-11 .banner-image-only .content {
    min-height: 600px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
}

.rbt-banner-11 .banner-image-only .inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-bottom: 40px !important;
}

.rbt-banner-11 .banner-image-only .section-title {
    display: block !important;
    text-align: center !important;
    margin-bottom: 16px !important;
}

.rbt-banner-11 .banner-image-only .section-title .subtitle {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
}

.rbt-banner-11 .banner-image-only .rbt-course-meta-wrapper,
.rbt-banner-11 .banner-image-only .feature-sin,
.rbt-banner-11 .banner-image-only .rbt-author-meta {
    display: none !important;
}

.rbt-banner-11 .banner-image-only .banner-title {
    display: block !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 40px !important;
    line-height: 1.15 !important;
    margin-bottom: 18px !important;
    max-width: 860px !important;
}

.rbt-banner-11 .banner-image-only .banner-title .theme-gradient {
    background: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.rbt-banner-11 .banner-image-only .description {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto 28px !important;
}

/* 只顯示按鈕 */
.rbt-banner-11 .banner-image-only .slider-btn {
    width: auto !important;
    margin: 0 !important;
    z-index: 11 !important;
}


/* 移除右側白條可能來源 */
.rbt-banner-11 .banner-image-only .col-lg-6,
.rbt-banner-11 .banner-image-only .swiper-slide,
.rbt-banner-11 .banner-image-only .swiper-wrapper {
    background: transparent !important;
}

/* Responsive - 平板 */
@media only screen and (max-width: 991px) {
    .rbt-banner-11 .banner-image-only .swiper-slide,
    .rbt-banner-11 .banner-image-only .row {
        min-height: 500px !important;
    }

    .rbt-banner-11 .banner-image-only .content {
        min-height: 500px !important;
    }
}

/* Responsive - 手機 */
@media only screen and (max-width: 767px) {
    .rbt-banner-11 .banner-image-only .swiper-slide,
    .rbt-banner-11 .banner-image-only .row {
        min-height: 400px !important;
    }

    .rbt-banner-11 .banner-image-only .content {
        min-height: 400px !important;
        padding-bottom: 30px !important;
    }
}

/* Testimonial tight spacing */
.rbt-testimonial-area.testimonial-tight {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.rbt-testimonial-area.testimonial-tight .scroll-animation-wrapper {
    margin-top: 0 !important;
}

/* Expand main menu responsive collapse breakpoint */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .rbt-main-navigation {
        display: none !important;
    }
    .rbt-btn-wrapper.d-none.d-xl-block {
        display: none !important;
    }
    .mobile-menu-bar {
        display: flex !important;
    }
    .mobile-menu-bar .hamberger {
        display: flex !important;
    }
}

/* Header / Footer white background overrides */
.rbt-header,
.rbt-header-wrapper,
.rbt-header.rbt-header-10,
.rbt-header .rbt-header-wrapper {
    background: #ffffff !important;
}
.rbt-header .rbt-header-content,
.rbt-header .mainmenu-nav .mainmenu > li > a,
.rbt-header .category-text,
.rbt-header .hamberger-button {
    color: var(--color-body) !important;
}
.rbt-header .mainmenu-nav .mainmenu > li > a:hover,
.rbt-header .mainmenu-nav .mainmenu > li > a:focus {
    color: var(--color-primary) !important;
}

footer.rbt-footer,
footer.rbt-footer.footer-style-1,
footer.rbt-footer.bg-color-darker,
footer.rbt-footer .footer-top,
footer.rbt-footer .footer-bottom {
    background: #ffffff !important;
}
footer.rbt-footer,
footer.rbt-footer a,
footer.rbt-footer .footer-widget,
footer.rbt-footer .footer-widget .title,
footer.rbt-footer .footer-widget p,
footer.rbt-footer .footer-widget li a {
    color: var(--color-body) !important;
}
footer.rbt-footer a:hover {
    color: var(--color-primary) !important;
}

/* ============================================================
   雙層 Header 導覽列
   ============================================================ */

/* 讓 header wrapper 支援兩層 */
.spark-header-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
}

/* 第一層：Logo + 搜尋 + 右邊按鈕 */
.spark-header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 讓 header-left 內部橫向排列，不換行 */
.spark-header-top-row .header-left,
.spark-header-top-row .rbt-header-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}

/* header-info 也橫排 */
.spark-header-top-row .header-info {
    display: flex;
    align-items: center;
}

/* Category 已被 body class 隱藏，確保不佔任何高度/寬度 */
.spark-hide-category .rbt-category-menu-wrapper,
.spark-hide-category .rbt-category-btn,
.spark-hide-category .header-info:has(.rbt-category-menu-wrapper) {
    display: none !important;
}

/* 第二層：主選單 */
.spark-header-nav-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.05);
    min-height: 48px;
}

.spark-header-nav-row .mainmenu-nav {
    width: 100%;
}

.spark-header-nav-row .mainmenu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.rbt-header .spark-header-nav-row .mainmenu-nav .mainmenu > li > a {
    height: 48px;
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ============================================================
   LOGO 旁漸層標語文字
   ============================================================ */

.spark-logo-tagline {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    animation: spark-tagline-fadein 0.8s ease 0.3s forwards;
}

@keyframes spark-tagline-fadein {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.spark-logo-wrapper {
    display: flex;
    align-items: flex-end;
}

/* ============================================================
   隱藏 Category 按鈕
   ============================================================ */

.spark-hide-category .rbt-category-menu-wrapper,
.spark-hide-category .rbt-category-btn {
    display: none !important;
}

/* ============================================================
   Banner 縮小 - 同時看到圖片和 Avatar 輪播
   ============================================================ */

.spark-banner-compact .rbt-banner-area.rbt-banner-11 {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}

.spark-banner-compact .rbt-banner-11 .banner-image-only .swiper-slide,
.spark-banner-compact .rbt-banner-11 .banner-image-only .row {
    min-height: 400px !important;
}

.spark-banner-compact .rbt-banner-11 .banner-image-only .content {
    min-height: 400px !important;
}

/* ============================================================
   精選推薦 / 熱門作品 區塊 標題 + 英文副標 + 箭頭右上角
   ============================================================ */

/* 區塊頭部 flex 排版 */
.spark-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 12px;
}

/* 左側標題群 */
.spark-section-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spark-section-en-label {
    font-size: clamp(15px, 1.1vw, 21px);
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 0;
    display: block;
}

.spark-section-zh-title {
    font-size: clamp(38px, 2.5vw, 50px) !important;
    font-weight: 900 !important;
    margin: 0 !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    color: #111827 !important;
    font-family: 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

/* 右側箭頭群 */
.spark-section-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.spark-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15);
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 16px;
    color: var(--color-body, #444);
}

.spark-arrow-btn:hover {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #fff;
}

.spark-section-view-more-btn {
    height: 38px;
    line-height: 38px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 8px;
}

/* 右側「查看全部」連結 */
.spark-view-all-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #6366f1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.spark-view-all-link:hover {
    opacity: 0.75;
}

/* 隱藏 Swiper 內建箭頭（改為外部控制） */
.spark-external-nav .rbt-swiper-arrow {
    display: none !important;
}

.spark-curated-area {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
}

.spark-trending-area {
    margin-top: 64px;
    padding-bottom: 48px !important;
}

.spark-commodity-filter-top .default-exp-wrapper {
    margin-top: 14px;
}

.spark-commodity-filter-top .default-exp-wrapper .filter-inner {
    padding-top: 20px;
}

@media only screen and (max-width: 991px) {
    .spark-curated-area {
        padding-top: 22px !important;
        padding-bottom: 0 !important;
    }

    .spark-trending-area {
        margin-top: 44px;
        padding-bottom: 36px !important;
    }

    .spark-commodity-filter-top .default-exp-wrapper {
        margin-top: 10px;
    }

    .spark-commodity-filter-top .default-exp-wrapper .filter-inner {
        padding-top: 16px;
    }
}

/* ============================================================
   商品卡片 - 簡潔樣式（圖片 + 標題 + 星星 + 價格）
   ============================================================ */

/* 精選推薦卡片 */
.spark-product-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s, transform 0.25s;
    background: #fff;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
}

.spark-product-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.spark-product-card .spark-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 65%;
    overflow: hidden;
    border-radius: 8px;
}

.spark-product-card .spark-card-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.spark-product-card:hover .spark-card-img-wrap img {
    transform: scale(1.05);
}

.spark-product-card .spark-discount-badge {
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(94, 53, 177, 0.28));
}

.spark-product-card .spark-discount-badge span {
    font-size: 11px;
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
}

.spark-product-card .spark-discount-badge span + span {
    font-size: 10px;
    margin-top: 1px;
}

.spark-product-card .spark-card-body {
    padding: 18px 4px 4px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.spark-product-card .spark-card-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--color-heading, #1a1a2e);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.spark-product-card .spark-card-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}

.spark-product-card .spark-card-stars i {
    font-size: 14px;
    color: #f59e0b;
}

.spark-product-card .spark-card-price-row {
    display: flex;
    align-items: baseline;
    margin-top: auto;
}

.spark-product-card .spark-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-heading, #1a1a2e);
    letter-spacing: -0.01em;
}

/* ============================================================
   熱門作品 卡片 - 簡潔樣式
   ============================================================ */

.spark-author-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s, transform 0.25s;
    background: #fff;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
}

.spark-author-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.spark-author-card .spark-author-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 65%;
    overflow: hidden;
    border-radius: 8px;
}

.spark-author-card .spark-author-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.spark-author-card:hover .spark-author-img-wrap img {
    transform: scale(1.05);
}

/* Top 10 序號標籤 */
.spark-author-number-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(99,102,241,0.4);
    letter-spacing: 0.05em;
}

.spark-author-card .spark-author-body {
    padding: 18px 4px 4px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.spark-author-card .spark-author-name {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--color-heading, #1a1a2e);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.spark-author-card .spark-author-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}

.spark-author-card .spark-author-stars i {
    font-size: 14px;
    color: #f59e0b;
}

.spark-author-card .spark-author-price-row {
    display: flex;
    align-items: baseline;
    margin-top: auto;
}

.spark-author-card .spark-author-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-heading, #1a1a2e);
    letter-spacing: -0.01em;
}

/* ============================================================
   Footer 重新設計（對應設計圖）
   ============================================================ */

.spark-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.07);
}

.spark-footer .footer-top {
    padding: 50px 0 40px;
}

.spark-footer .spark-footer-logo-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: #555;
    margin-top: 12px;
    margin-bottom: 16px;
}

.spark-footer .spark-footer-social {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    list-style: none;
    padding: 0;
}

.spark-footer .spark-footer-social li a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #555;
    transition: all 0.2s;
}

.spark-footer .spark-footer-social li a:hover {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #fff !important;
}

.spark-footer .spark-footer-col-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 16px;
}

.spark-footer .spark-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spark-footer .spark-footer-links li {
    margin-bottom: 10px;
}

.spark-footer .spark-footer-links li a {
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.spark-footer .spark-footer-links li a:hover {
    color: var(--color-primary, #6366f1) !important;
}

.spark-footer .spark-footer-contact-text {
    font-size: 13.5px;
    color: #555;
    margin-bottom: 16px;
}

.spark-footer .spark-footer-contact-btn {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 40px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.spark-footer .spark-footer-contact-btn:hover {
    opacity: 0.85;
    color: #fff !important;
}

.spark-footer .spark-footer-bottom {
    border-top: 1px solid rgba(0,0,0,0.07);
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.spark-footer .spark-footer-copyright {
    font-size: 13px;
    color: #888;
}

.spark-footer .spark-footer-policy-links {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.spark-footer .spark-footer-policy-links li a {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.spark-footer .spark-footer-policy-links li a:hover {
    color: var(--color-primary, #6366f1) !important;
}

/* Commodity content page */
.rbt-overlay-page-wrapper .spark-content-hero-container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.spark-content-hero-title .title {
    margin-bottom: 0;
}

.blog-content-wrapper .spark-content-tagcloud {
    margin-bottom: 10px;
}

.spark-content-author {
    padding-top: 24px;
}

@media only screen and (max-width: 767px) {
    .rbt-overlay-page-wrapper .spark-content-hero-container {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .spark-content-author {
        padding-top: 18px;
    }
}