.d-display {
    display: block;
}

.container {
    /* background: #fff; */
    padding: 10px;
    border-radius: 10px;
    /* width: 900px; */
    margin: 0 auto 20px auto;
    color: #000;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
}

.chapter-item {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin: 0 auto 20px auto;
    display: block;
}

.chapter-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border-bottom: 1px solid #E5E6EA;
    padding-bottom: 16px;
    align-items: center;
}

/* 標題 */
.chapter-header h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 0 8px;
    background-color: transparent;
    border: none;
    display: inline-block;
}

.header-icon {
    border-radius: 16px;
    width: 40px;
    height: 40px;
    background-color: #0074D1;
    display: flex;
    align-items: center;
    justify-content: center;

}

.header-icon span.r-arrow {
    border: solid #ffffff;
    border-width: 0px 3px 3px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: 0px 8px 0 12px;
    transform: rotate(135deg);
}

.chapters {
    display: flex;
    gap: 8px;
    margin: 20px auto 0 auto;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

/*章節樣式*/
/* 1. 基礎區塊樣式 */
.section {
    padding: 4px 16px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    
    /* 重要：必須設定 position 且給予基礎 z-index */
    position: relative;
    z-index: 1; 
    
    /* 增加上下 margin 確保標籤有足夠空間顯示，不撞到上一行 */
    margin: 4px 5px; 
    transition: background 0.2s;
}

/* 2. Active 狀態：橘色背景 */
.section.active {
    background: #FBE9C3;
    font-weight: bold;
    border: 1px solid #FBE9C3;
    /* 啟動狀態也稍微提高一點層級，但低於 hover */
    z-index: 2; 
}

/* 3. 藍色上方標籤 (::before) */
.section::before {
    content: attr(data-title);
    position: absolute;
    
    /* 初始位置 */
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    
    padding: 4px 12px;
    background: #3174d1;
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;

    /* 預設隱藏 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease-out;
    
    /* 標籤本身的層級要確保最高 */
    z-index: 1001; 
}

/* 4. 關鍵修正：當 hover 時，將整個區塊提升到最頂層 */
.section:hover {
    background: #fcdca9;
    /* 強制超越所有其他 section 元素 */
    z-index: 1000 !important; 
}

/* 5. 顯示標籤並往上浮動 */
.section:hover::before {
    opacity: 1;
    visibility: visible;
    top: -42px; /* 拉得更高，確保不被下一行蓋到 */
}

/* tabs */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.tab {
    border: none;
    background: #D9EDFF;
    padding: 12px 18px;
    border-radius: 6px;
    cursor: pointer;
    color: #4D4D4D;
}

.tab.active {
    background: #0074D1;
    color: #fff;
    font-weight: bold;
}

/* tab-content */
.tab-content-wrapper {
    display: none;
}

.tab-content-wrapper.active {
    display: block;
    background: #D9EDFF50;
    padding: 10px 10px;
    border-radius: 6px;
    text-align: left;
}

/* 卷類選項 */
.options {
    /* display: flex;
    flex-wrap: wrap;
    gap: 8px; */
    margin-bottom: 10px;
    /* margin: 8px; */
}

.option {
    padding: 8px 14px;
    border: none;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #4D4D4D;
    margin: 4px auto;
}

.option:hover {
    background: #0066cc;
    color: #fff;
}

.option.active {
    background: #0074D1;
    color: #fff;
    font-weight: bold
}

/* 補充講義 */
.sub-menu {
    background: #fff;
    /* background: #fdf6e3; */
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
    display: none;

    /* 🔹 預設關閉 */
}

.checkboxes {
    display: flex;
    margin: 12px 0;
    align-items: center;
    flex-wrap: wrap;
}

.checkboxes label {
    margin-right: 15px;
    align-items: center;
}

.confirm {
    background: #0066cc;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}

.confirm:hover {
    background: #004a99;
    color: #fff;
}

li.tb-col6 button.active {
    background: #FBE9C3;
    color: #4D4D4D;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}

/* li.tb-col6 button:hover,li.tb-col6 button.active  {
    background: #FFE09D;
} */

button i {
    background: url(../images/icon_confirm.png) no-repeat center center;
    height: 15px;
    width: 15px;
    margin-right: 10px;
    display: inline-block;
}

/* pop up  */
.modal-content .icon-back {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    background-color: #0074D1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

}

.icon-back i.r-arrow {
    border: solid #ffffff;
    border-width: 0px 3px 3px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin: 0px 8px 0 12px;
    transform: rotate(135deg);
}

/* 選單 */
ul.first-nav,
ul.fstwo-nav {
    /* gap: 20px; */
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    margin: 10px auto;


}

ul.first-nav li,
ul.first-nav li a {
    width: 150px;
    height: 100px;
    background: #F5F5F6;
    border: 1px solid #80808020;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
}

ul.fstwo-nav li,
ul.fstwo-nav li a {
    width: 120px;
    height: 80px;
    background: #F5F5F6;
    border: 1px solid #80808020;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 12px;
    cursor: pointer;
    margin: 10px;

}

ul.first-nav li.active,
ul.fstwo-nav li.active {
    background: #FBE9C3;
    border: 1px solid #FBE9C3;
}

ul.first-nav li:hover,
ul.fstwo-nav li:hover {
    background-color: #FBE9C3;
}



@media screen and (max-width:768px) {

    ul.first-nav,
    ul.fstwo-nav {
        gap: 5px;
    }

    ul.first-nav li {
        width: 25%;
        height: 100px;
        margin: 10px auto;

    }
}