@charset "utf-8";
 /* =========================================
       1. 基礎與深色主題設定
       ========================================= */
    :root {
        --theme-color: #ff004d; /* 桃紅色重點色 */
        --bg-color: #121212;
        --card-bg: #1e1e1e;
    }

    html {
        font-size: 100%; /* 確保基準為瀏覽器預設 (通常是 16px) */
    }

    body {
        background-color: var(--bg-color);
        /* 建議設定基礎字級，例如 1rem */
        font-size: 1rem; 
    }

    /* =========================================
       2. Hero 區塊 (左影片/右資訊)
       ========================================= */
	.SocialNerwork { background:#000; padding-top:20px;}
	.SocialNerwork > div  { width:100%; padding:0 20px; display:flex; justify-content:flex-end; gap:10px; max-width:75rem;  margin:0 auto;}
	.SocialNerwork > div .breadcrumb-wrap  { width:calc( 100% - 125px ); padding:0; display:flex; align-items:center;}
	.SocialNerwork > div .breadcrumb-wrap .breadcrumb { justify-content:flex-start; align-items:center; margin:0;}
	.SocialNerwork > div .social  { width:125px; padding:0; display:flex; justify-content:flex-end; gap:10px;  margin:0 auto;}
	.SocialNerwork > div .social img { display:block;}
	   
    .course-hero-section {
        background-color: #000;
        padding: 20px 0 60px 0;
        color: #fff;
    }

    .hero-grid {
        display: flex;
        gap: 40px;
        align-items: start;
        max-width:75rem;
        margin: 0 auto;
        padding: 0 20px;
    }

    .video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: 8px;
        background: #000;
    }

    .video-container iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
    }

/* 基礎容器 */
        .product-img-container {
            width: 560px;
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        /* 上方大圖區塊 */
        .product-img-container .main-display {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            position: relative;
            overflow: hidden;
        }

        .product-img-container .main-display img {
            width: 100%;
            height: auto;
            background: white;
            aspect-ratio: 4 / 3;
            border: 1px solid #333;
            border-radius: 10px;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: opacity 0.2s ease-in-out;
        }
		
		.dark .product-img-container .main-display img {
            background: var(--card-bg);
        }

        /* 下方小圖捲動區外層 (為了放置箭頭) */
        .product-img-container .thumb-slider {
            position: relative;
            display: flex;
            align-items:flex-start;
            gap: 5px;
        }

        /* 下方小圖捲動區塊 */
        .product-img-container .thumb-list {
            display: flex;
            gap: 10px;
            overflow-x: auto; 
            padding-bottom: 12px;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth; /* 點擊箭頭時平滑捲動 */
            flex: 1;
        }

        /* 捲軸美化 */
        .product-img-container .thumb-list::-webkit-scrollbar { height: 6px; }
        .product-img-container .thumb-list::-webkit-scrollbar-track {
            background: var(--card-bg);
            border-radius: 10px;
        }
        .product-img-container .thumb-list::-webkit-scrollbar-thumb {
            background: #ccc; 
            border-radius: 10px;
            transition: background 0.3s;
        }
        .product-img-container .thumb-list::-webkit-scrollbar-thumb:hover { background: #999; }

        /* 導覽箭頭樣式 */
        .product-img-container .nav-btn {
            width: 30px;
            height: 70px; /* 與小圖同高 */
            background: #fff;
            border: 1px solid #eee;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            z-index: 2;
        }
        .product-img-container .nav-btn:hover { background: #f0f0f0; }
        .product-img-container .nav-btn::after {
            content: '';
            width: 8px;
            height: 8px;
            border-top: 2px solid #666;
            border-left: 2px solid #666;
            display: block;
        }
        .product-img-container .prev-btn::after { transform: rotate(-45deg); }
        .product-img-container .next-btn::after { transform: rotate(135deg); }

        /* 單個小圖樣式 */
        .product-img-container .thumb-item {
            flex: 0 0 70px;
            height: 70px;
            border: 1px solid #eee;
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 4px;
            transition: border-color 0.2s;
            overflow: hidden;
        }
        .product-img-container .thumb-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .product-img-container .thumb-item:hover { border-color: #999; }
        .product-img-container .thumb-item.active { border-color: #ff6026; border-width: 2px; }

    .course-info-card {
        width: 460px;
            max-width:100%;
        background: var(--card-bg);
        padding: 25px;
        border-radius: 10px;
        border: 1px solid #333;
    }
    
    /* 這裡使用變數，假設變數本身已經處理好單位，若無則建議變數內也存 rem */
    .course-info-card .badge { background-color: var(--primary-color); color: #fff; border-radius: var(--radius-tag); padding: var(--tag-padding); font-size: var(--tag-font-size); font-weight: 600; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.15); margin-bottom:10px; display:inline-block; }
    .course-info-card .badge.new { background-color: var(--badge-bg); }
    
    /* 14px -> 0.875rem */
    .info-stat-joined { color: #ccc; font-size: 0.875rem; margin-bottom: 15px; display: block; }
    
    .info-list { list-style: none; padding: 0; margin: 0 0 20px 0; }
    
    /* 15px -> 0.9375rem */
    .info-list li { margin-bottom: 12px; font-size: 0.9375rem; color: #ddd; display: flex; align-items: center; }
    .info-list li i { width: 24px; margin-right: 8px; color: #999; text-align: center; }

    /* 14px -> 0.875rem */
    .installment-plan { border-top: 1px solid #444; padding-top: 15px; margin-top: 15px; color: #aaa; font-size: 0.875rem; display: flex; align-items: center; }
    .installment-plan i { color: #28a745; margin-right: 8px; }

    .price-area { margin-top: 25px; display: flex; align-items: baseline; gap: 12px; }
    
    /* 32px -> 2rem */
    .price-sale { font-size: 2rem; font-weight: bold; color: var(--theme-color); }
    
    /* 16px -> 1rem */
    .price-original { font-size: 1rem; text-decoration: line-through; color: #777; }

    /* 18px -> 1.125rem */
    .btn-buy-large { display: block; width: 100%; background-color: var(--theme-color); color: #fff; text-align: center; padding: 14px; border-radius: 6px; font-weight: bold; font-size: 1.125rem; margin-top: 20px; text-decoration: none; transition: 0.3s; }
    .btn-buy-large:hover { filter: brightness(1.1); }
	.product-meta { display: flex; justify-content:flex-start; font-size: 0.875rem; color: var(--text-muted); gap:10px; margin-top: 20px; }
	.category { color:#aaa; font-weight: 500; padding:10px; background:rgba(255,255,255,0.1 ); border-radius: 6px; transition: 0.3s;  }
	.category:hover {color:white; background: var(--primary-color);}

    /* =========================================
       3. 頁籤導航 (Fixed 模擬 Sticky)
       ========================================= */
    .course-nav-bar {
        width: 100%;
        background-color: #000;
        border-bottom: 1px solid #333;
        z-index: 900;
        height: 60px; /* 固定高度 */
        transition: top 0.2s; /* 定位切換順暢 */
    }

    /* ★ JS 控制：當變成 Fixed 時的樣式 ★ */
    .course-nav-bar.is-fixed {
        position: fixed;
        left: 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }

    .tabs-inner {
        max-width:75rem;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        gap: 40px;
        height: 100%;
        align-items: center;
    }

    .tab-item {
        color: #aaa;
        text-decoration: none;
        /* 16px -> 1rem */
        font-size: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        font-weight: 500;
    }

    .tab-item:hover, .tab-item.active { color: #fff; }

    .tab-item.active::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 3px;
        background-color: var(--theme-color);
    }

    /* =========================================
       4. 內容區塊
       ========================================= */
    .content-area { 
        max-width: var(--container-width); 
        margin: 0 auto; 
        padding:0 var(--container-padding-x); 
    }

    .course-section {
        padding: 60px 0;
        border-bottom: 1px solid #222;
    }

    .section-title { font-size: 1.75rem; margin-bottom: 20px; color: #fff; padding-left: 15px; border-left: 4px solid var(--theme-color); }
    
    /* 24px -> 1.5rem */
    .text-highlight { font-size: 1.5rem; line-height: 1.5; margin-bottom: 20px; color: #eebb99; }
    .text-highlight b { color: #eebb99; }
    
    /* 18px -> 1.125rem */
    .course-body p, .course-body li { font-size: 1.125rem; line-height: 1.8; color: #ccc; margin-bottom: 15px; }

    /* =========================================
       5. FAQ 手風琴樣式 (配合 script.js 邏輯)
       ========================================= */
    .faq-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .faq-item {
        background-color: #1e1e1e;
        border: 1px solid #333;
        border-radius: 8px;
        overflow: hidden;
        transition: border-color 0.3s;
    }

    .faq-item:hover { border-color: #555; }

    /* 題目 */
    .faq-question {
        padding: 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        /* 18px -> 1.125rem */
        font-size: 1.125rem;
        color: #fff;
        background-color: #1e1e1e;
        transition: background-color 0.3s;
    }

    .faq-question:hover { background-color: #2a2a2a; }

    .faq-question .icon {
        color: var(--theme-color);
        transition: transform 0.3s;
    }

    /* 答案 (關鍵：動畫與隱藏) */
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background-color: #181818;
    }

    .answer-content {
        padding: 20px;
        border-top: 1px solid #333;
        color: #ccc;
        line-height: 1.6;
        /* 16px -> 1rem */
        font-size: 1rem;
    }

    /* 當 script.js 加上 active class 時 */
    .faq-item.active .faq-question .icon {
        transform: rotate(45deg); 
    }
    
    .btn-more { display:block; width:114px; margin:20px auto; text-align:center;}

    /* RWD */
    @media (max-width: 68.75rem) {
        .product-img-container { width:calc( 50% - 20px );}
        .course-info-card { width:calc( 50% - 20px );}
    }
    @media (max-width: 56.25rem) {
        .hero-grid { display:block; max-width:37.5rem;}
         .product-img-container { width:100%; margin-bottom:40px;}
        .course-info-card { width:100%;}
        .tabs-inner { overflow-x: auto; white-space: nowrap; padding: 0 15px; gap: 25px; }
        .tabs-inner { justify-content:center;}
    }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; margin-bottom:2rem; }

/* =========================================
   4. 產品卡片主體 (Product Card)
   ========================================= */
.product-grid .product-card { 
    display: flex; flex-direction: column; background:#252525;
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--card-shadow); 
    transition: all 0.3s ease; border: 1px solid #121212; 
}
.product-grid .news-title { color:#e4e6eb;}
.wrapper.dark .product-grid .product-card { background:#252525;}
.product-grid .product-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); }

/* 圖片與標籤 (Thumb & Badge) */
.product-grid .product-thumb { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.product-grid .product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-grid .product-card:hover .product-thumb img { transform: scale(1.05); }

.product-grid .badge { 
    position: absolute; top: 0.75rem; left: 0.75rem; background-color: var(--primary-color); 
    color: #fff; border-radius: var(--radius-tag); padding: var(--tag-padding); 
    font-size: var(--tag-font-size); font-weight: 600; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.15); 
}
.product-grid .badge.new { background-color: var(--badge-bg); }

.product-grid .badge + .badge.new { left:calc( 5rem - 8px );}

/* 內容區塊 (Body) */
.product-grid .product-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product-grid .product-meta { margin-top:0; margin-bottom:0.75rem;}
.product-grid .category,
.product-grid .category:hover{ color: var(--primary-color); padding:0; background:none;}
.product-grid .product-title { 
    font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.4; color: var(--text-color); 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; 
}

/* 價格與按鈕 (Footer) */
.product-grid .product-footer { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid #f1f2f6; padding-top: 1rem; margin-top: auto; }
.product-grid .price-group { display: flex; flex-direction: column; }
.product-grid .price-original { font-size: 0.8125rem; text-decoration: line-through; color: var(--price-muted); }
.product-grid .price-sale { font-size: 1.25rem; font-weight: 700; color: var(--price-color); }

.product-grid .btn-buy { 
    font-size: 0.875rem; font-weight: 600; color: var(--primary-color); 
    background: rgba(9, 132, 227, 0.1); padding: 0.5rem 1rem; border-radius: 2rem; transition: 0.3s; 
}
.product-grid .product-card:hover .btn-buy { background: var(--primary-color); color: #fff; }


@media (max-width: 62rem) { /* 992px */
    .product-grid .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 48rem) { /* 768px */
    .SocialNerwork > div { display:block;}
    .SocialNerwork > div .breadcrumb-wrap { display:block; width:100%; margin-bottom:15px;}
	.SocialNerwork > div .breadcrumb-wrap .breadcrumb { justify-content:center; white-space:nowrap;}
    .product-grid .product-grid { grid-template-columns: 1fr; }
    .product-grid .product-categories { 
        justify-content: flex-start; overflow-x: auto; 
        white-space: nowrap; padding-bottom: 0.5rem; gap: 1rem; 
    }
}

/* 1. 段落描述 */
/* 這裡維持 calc 計算，因為 rem 也是可以被 calc 計算的單位 */



html.Font-Large .course-info-card .badge { font-size:calc( var(--tag-font-size) * 1.1 ); }
html.Font-Small .course-info-card .badge { font-size:calc( var(--tag-font-size) * 0.9 ); }
html.Font-Large .section-title { font-size:calc( 1.75rem * 1.1 ); }
html.Font-Small .section-title { font-size:calc( 1.75rem * 0.9 ); }
html.Font-Large .info-list li { font-size:calc( 0.9375rem * 1.1 ); }
html.Font-Small .info-list li { font-size:calc( 0.9375rem * 0.9 ); }
html.Font-Large .price-sale { font-size:calc( 2rem * 1.1 ); }
html.Font-Small .price-sale { font-size:calc( 2rem * 0.9 ); }
html.Font-Large .price-original { font-size:calc( 1rem * 1.1 ); }
html.Font-Small .price-original { font-size:calc( 1rem * 0.9 ); }
html.Font-Large .btn-buy-large { font-size:calc( 1.125rem * 1.1 ); }
html.Font-Small .btn-buy-large { font-size:calc( 1.125rem * 0.9 ); }
html.Font-Large .tab-item { font-size:calc( 1rem * 1.1 ); }
html.Font-Small .tab-item { font-size:calc( 1rem * 0.9 ); }
html.Font-Large .btn-more { width:134px;}
html.Font-Small .btn-more { width:114px;}