/* custom style */

/* 背景 */
@media (min-width: 922px) {
  body {
    background-image:url("/sysdata/attach/layout.css//5f723737a908358c545c49737b7da3db.png");
  }
}


/* 彈跳視窗底色 */
.body-tmpl-modal,
.body-tmpl-edit{
  background-color:white;
}


/* 系統選單 */
.fs-sysbar.navbar-inverse,
.fs-mobile-navbar .navbar-inverse {
  background-color: white;
  border: none;
}

.fs-sysbar.navbar-inverse .navbar-brand,
.fs-sysbar.navbar-inverse .navbar-brand:hover,
.fs-sysbar.navbar-inverse .navbar-brand:focus,
.fs-mobile-navbar .navbar-inverse .navbar-brand:hover,
.fs-mobile-navbar .navbar-inverse .navbar-brand:focus {
  color:black;
}

.fs-mobile-navbar .navbar-inverse .navbar-brand,
.fs-navbar-title a,
.fs-navbar-btns a {
  color: white;
}

.fs-sysbar.navbar-inverse .navbar-nav>li>a {
  color: #777;
}

.fs-sysbar.navbar-inverse .navbar-nav>li>a:hover,
.fs-sysbar.navbar-inverse .navbar-nav>li>a:focus {
  color: #111;
  background-color: white;
}

.fs-sysbar.navbar-inverse .navbar-nav>.open>a,
.fs-sysbar.navbar-inverse .navbar-nav>.open>a:hover,
.fs-sysbar.navbar-inverse .navbar-nav>.open>a:focus {
  color: black;
  background-color: #FAFAFA;
}

.fs-sysbar.navbar-inverse .fs-logo {
  margin-top: -5px;
}


/* Banner */
.fs-sys-banner {
  background-color: white;
  background-image: url("/sysdata/attach/layout.css//f1efdad1a7eba6c14181638f0b8f787f.jpg");
  padding: 10px;
  border-bottom: 1px solid #ddd
}

.fs-sys-banner .fs-banner-title {
  color: #333;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

/* 網站選單 */
.fs-sitebar {
  background: linear-gradient(45deg,#68C,#4AE,#8CE);
}

.fs-sitebar .nav > li > a {
  color: white ;
  border-bottom-color: transparent;
}

.fs-sitebar .nav > li > a:hover,
.fs-sitebar .nav > li > a:focus {
  background-color: rgba(79, 93, 117,.7);
}

.fs-nav > ul > li:hover > a {
  border-bottom-color: transparent;
}

.fs-sitebar .nav .open > a,
.fs-sitebar .nav .open > a:hover,
.fs-sitebar .nav .open > a:focus {
  background-color: rgba(79, 93, 117,.7);
  border-bottom-color: transparent;
}

/*.fs-mobile-navbar .navbar-inverse .navbar-brand,
.fs-course-sysbar {
  background-color: #224;
  border-color: #224;
}*/

.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: transparent;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: transparent;
}

/*.fs-mobile-navbar .navbar-inverse {
  background-color:#224;
}*/

.fs-mobile-navbar .navbar-inverse .navbar-brand:hover {
  color: white;
}

.fs-sitebar .fs-nav > ul > li.active > a,
.fs-sitebar .fs-nav > ul > li.active > a:focus {
  color: #fff;
  border-color:transparent;
}

.fs-sitebar .fs-nav > ul > li.active:hover > a {
  background-color: rgba(79, 93, 117,.7);
}
 


/* 按鈕 */
.btn-primary {
  background-color: #68C;
  border-color: #68C;
}

.btn-primary:focus,
.btn-primary:active {
  background-color: #458;
  border-color: #458;
}

.btn-primary:hover {
  background-color: #56A;
  border-color: #56A;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus{
  background-color: #458;
  border-color: #458;
}


/* 側欄 */
.nav > li > a:hover,
.nav > li > a:focus,
.fs-thumblist .curr {
  background-color: #f5f5f5;
}


/* 表格 */
.fs-table .table.custom,
tbody {
  border-top-color: #4AE;
  border-top-width: 3px;
  border-bottom-color: #ddd;
}

.fs-th {
  background-color: #EEE;
}


/* filterEX */
.filter {
  border-color: transparent;
}


/* 下拉式選單 */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #f5f5f5;
}

/* 媒體 */
#fs-media-content {
 background-color: #fff;
 border: solid 1px #ddd;
 padding: 20px;
}



/* 使網站選單間距縮小 */


/* 桌機版選單列 */
.fs-sitebar.visible-md-block.visible-lg-block {
  height: 45px;
  min-height: 45px;
  border-bottom-width: 0 !important;
}

/* ul / li 先清掉可能干擾 */
.fs-sitebar .fs-nav > ul,
.fs-sitebar .nav {
  margin: 0;
  padding: 0;
}

.fs-sitebar .fs-nav > ul > li,
.fs-sitebar .nav > li {
  height: 45px;
  margin: 0;
  padding: 0;
}

/* 直接用 flex 讓文字垂直置中 */
.fs-sitebar .fs-nav > ul > li > a,
.fs-sitebar .nav > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: 45px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  box-sizing: border-box;
  border: 0;
}

/* 如果 a 裡面還有 span，也一起歸零 */
.fs-sitebar .fs-nav > ul > li > a > *,
.fs-sitebar .nav > li > a > * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

a[href="https://ctld.video.nccu.edu.tw/"][target=""]{
    padding-top: 10.5px !important; padding-left: 14px !important; padding-right: 11px !important;
}

a.navbar-brand[href="/"]{
    padding-left: 22px; font-size: 24px; height:36px; font-family: "Roboto Condensed", "Arial", sans-serif; color: #363636 !important;
}


.fs-sitebar.visible-md-block.visible-lg-block{
    height: 45px; border-bottom-width: 0px !important;
}

.fs-mobile-navbar.navbar-inverse{
    background-color: #FFF !important;
}

div a:has(img[src="/sysdata/attach/p.27/1fb1bf464190f9e13dbc3eaf8288bf1d.png"]) {
    display: block; /* 保持這個設定，確保行為規範 */
    max-width: 100%; /* 保持這個設定，防止溢出 */
    overflow: hidden; /* 保持這個設定，隱藏溢出內容 */

    /* 解決圖片縮小的關鍵：移除或歸零 padding 和 border */
    padding: 0 !important;      /* 移除所有內邊距 */
    border: none !important;    /* 移除所有邊框 */

    /* 如果有其他影響寬度的元素，也可以考慮歸零它們 */
    margin: 0 !important;       /* 移除所有外邊距 */
    box-sizing: border-box !important; /* 強制使用邊框盒模型，確保寬度包含 padding/border */
}

 /* 測試：調整課程中心的樣式 */

a[href="/approve/myExternalRecord"],
a[href="/exercise/my"],
a[href="/process/progress"],
li:has(a[href="/course/calendar"]),
li:has(a[href="/course/dailySchedule"]),
a[href="/course/myCalendar"] {
  display: none !important;
}

.image-info.lower-right.image-info-text {
background-color: #008dc5 !important;
}

/* course 專屬 banner：乾淨版 */
.fs-course-banner {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e5e5 !important;
  min-height: 88px !important;
  height: 88px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 40px !important;
  box-sizing: border-box;
}

/* 課程名稱文字 */
.fs-course-banner .fs-banner-title,
.fs-course-banner .fs-banner-title a,
.fs-course-banner .fs-banner-title .text,
.fs-course-banner .fs-banner-title a span {
  color: #6c6c6c !important;
  text-shadow: none !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* 移除預設可能干擾的 margin */
.fs-course-banner .fs-banner-title {
  margin: 0 !important;
  padding: 0 !important;
}

/*去連結黑邊*/
a:focus,
a:active,
button:focus,
button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   NCCU DKB｜課程中心優化 CSS（整合整理版）
   整理說明：
   - 上方原站台 / banner / 選單 / 去連結黑邊以前樣式保持原樣
   - 已移除中間重複貼上的原站台基礎 CSS
   - 下方保留課程中心、我的學習、課程資訊 popup、課程內部頁與教材頁樣式
========================================================= */

/* =========================================================
   NCCU DKB｜課程中心全域優化 CSS（整理版）
   版本：2026-07 整理
   說明：
   1. 保留課程分類介紹
   2. 保留左側三層課程分類樹
   3. 整理右側課程列表、搜尋列、卡片、分頁
   4. 移除重複覆蓋規則，將最後確認的樣式合併
========================================================= */


/* =========================================================
   0. 全域變數
========================================================= */

html.dkb-course-latest-page {
  --dkb-primary: #008dc5;
  --dkb-primary-dark: #006f9f;
  --dkb-primary-soft: #e8f6fb;
  --dkb-primary-softer: #f3fafc;

  --dkb-text-main: #17384d;
  --dkb-text-sub: #5f7380;
  --dkb-text-light: #8a9aa5;

  --dkb-border: #e5edf2;
  --dkb-border-soft: #eef4f7;

  --dkb-card-bg: #ffffff;

  --dkb-radius-lg: 18px;
  --dkb-radius-md: 14px;
  --dkb-radius-sm: 10px;

  --dkb-shadow-soft: 0 10px 28px rgba(25, 58, 78, 0.08);
  --dkb-shadow-card: 0 8px 22px rgba(25, 58, 78, 0.075);
  --dkb-shadow-card-hover: 0 14px 34px rgba(25, 58, 78, 0.14);
}


/* =========================================================
   1. AJAX 初始準備狀態
========================================================= */

html.dkb-course-preparing #fs-content,
html.dkb-course-preparing .fs-content,
html.dkb-course-preparing #fs-media-content {
  opacity: 0 !important;
}


/* =========================================================
   2. 課程分類介紹
========================================================= */

.course-type-switch-block {
  width: 100% !important;
  margin: 0 0 24px !important;
  box-sizing: border-box !important;
}

.course-type-switch-inner {
  padding: 22px 24px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fbfcfd 0%, #f4f8fb 100%) !important;
  border: 1px solid #dce7ee !important;
  box-shadow: 0 8px 20px rgba(18, 42, 61, 0.05) !important;
  box-sizing: border-box !important;
}

.course-type-switch-title {
  margin: 0 0 18px !important;
  text-align: center !important;
  color: #1f3443 !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.course-type-logo-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.course-type-logo-card {
  padding: 12px 10px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dfe8ee !important;
  box-shadow: 0 4px 12px rgba(18, 42, 61, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.course-type-logo-card:hover {
  transform: translateY(-2px) !important;
  border-color: #cfe0ea !important;
  box-shadow: 0 8px 16px rgba(18, 42, 61, 0.08) !important;
}

.course-type-logo-card.active {
  border-color: #008dc5 !important;
  box-shadow: 0 0 0 2px rgba(0, 141, 197, 0.10) !important;
  background: #f5fbfe !important;
}

.course-type-logo-box {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.course-type-logo-box img {
  max-width: 100% !important;
  max-height: 48px !important;
  display: block !important;
  object-fit: contain !important;
}

.course-type-logo-name {
  color: #24495d !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

.course-type-content-panel {
  min-height: 74px !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dfe8ee !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
  box-sizing: border-box !important;
}

.course-type-content-name {
  margin: 0 0 6px !important;
  color: #1f3443 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.course-type-content-desc {
  margin: 0 !important;
  color: #617682 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}


/* =========================================================
   3. 左側課程分類標題
========================================================= */

#fs-sidebar .fs-text-divider.dkb-sidebar-enhanced {
  position: relative !important;
  margin: 0 0 14px !important;
  padding: 18px 18px 18px 74px !important;
  min-height: 76px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 18px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 141, 197, 0.13), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f5faff 100%) !important;
  border: 1px solid #dcebf3 !important;
  box-shadow: 0 8px 22px rgba(24, 56, 77, 0.045) !important;

  color: #18384d !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

#fs-sidebar .fs-text-divider.dkb-sidebar-enhanced::before {
  content: "▦" !important;

  position: absolute !important;
  left: 18px !important;
  top: 50% !important;

  width: 44px !important;
  height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
  background: #e6f4fa !important;
  color: #008dc5 !important;

  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform: translateY(-50%) !important;
}


/* =========================================================
   4. 左側課程分類樹：外層清理
========================================================= */

#fs-sidebar.dkb-course-sidebar-wrap,
#fs-sidebar .drawer-contents-reserve,
#fs-sidebar .drawer-body-reserve,
#fs-sidebar #mbox,
#fs-sidebar #mbox-inline,
#fs-sidebar .module.app-course_latest-sidebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#courseCategoryMenu.dkb-course-category-menu {
  overflow: hidden !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #dcebf3 !important;
  box-shadow: 0 8px 22px rgba(24, 56, 77, 0.045) !important;
}

#courseCategoryMenu.dkb-course-category-menu ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#courseCategoryMenu.dkb-course-category-menu li {
  list-style: none !important;
}

#courseCategoryMenu.dkb-course-category-menu .item,
#courseCategoryMenu.dkb-course-category-menu .main,
#courseCategoryMenu.dkb-course-category-menu .children {
  background-image: none !important;
  border: 0 !important;
}

#courseCategoryMenu.dkb-course-category-menu a,
#courseCategoryMenu.dkb-course-category-menu a:hover,
#courseCategoryMenu.dkb-course-category-menu a:focus {
  text-decoration: none !important;
}


/* =========================================================
   5. 左側課程分類樹：共用
========================================================= */

#courseCategoryMenu .dkb-tree-item {
  list-style: none !important;
}

#courseCategoryMenu .dkb-tree-top-item {
  margin: 4px 0 !important;
}

#courseCategoryMenu .dkb-tree-main {
  position: relative !important;
  cursor: pointer !important;

  min-height: 46px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  border-radius: 14px !important;

  transition:
    background 0.22s ease,
    box-shadow 0.22s ease !important;
}

#courseCategoryMenu .dkb-tree-main:hover {
  background: #f5faff !important;
}


/* =========================================================
   6. 第一層、第二層：LOGO 與文字
========================================================= */

#courseCategoryMenu .dkb-tree-item-icon {
  width: 34px !important;
  height: 34px !important;

  margin-left: 8px !important;
  flex: 0 0 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  overflow: visible !important;
  cursor: pointer !important;
}

#courseCategoryMenu .dkb-tree-item-icon img {
  display: block !important;

  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;

  object-fit: contain !important;
  cursor: pointer !important;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease !important;
}

#courseCategoryMenu .dkb-tree-link {
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    color 0.18s ease !important;
}

#courseCategoryMenu .dkb-level-link-1,
#courseCategoryMenu .dkb-level-link-2 {
  flex: 1 1 auto !important;

  display: flex !important;
  align-items: center !important;

  min-width: 0 !important;
  min-height: 46px !important;

  padding: 10px 4px !important;

  color: #18384d !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;

  text-decoration: none !important;
  white-space: normal !important;
}

#courseCategoryMenu .dkb-level-link-1:hover,
#courseCategoryMenu .dkb-level-link-1:focus,
#courseCategoryMenu .dkb-level-link-2:hover,
#courseCategoryMenu .dkb-level-link-2:focus {
  color: #008dc5 !important;
  text-decoration: none !important;
}

#courseCategoryMenu .dkb-tree-main:hover > .dkb-tree-link {
  color: #008dc5 !important;
}

#courseCategoryMenu .dkb-tree-main:hover > .dkb-tree-item-icon img {
  transform: scale(1.09) !important;
  opacity: 0.92 !important;
}


/* =========================================================
   7. 左側第一層：固定欄位對齊
========================================================= */

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  column-gap: 10px !important;
  align-items: center !important;

  min-height: 46px !important;
  padding: 0 6px 0 8px !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;
  margin-left: 0 !important;
  justify-self: center !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-height: 46px !important;
  padding: 10px 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle {
  grid-column: 3 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;

  justify-self: center !important;

  float: none !important;
  position: static !important;
}

#courseCategoryMenu .dkb-level-1:not(.dkb-has-children) > .dkb-tree-main::after {
  content: "" !important;
  display: block !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 34px !important;
  height: 34px !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main::before {
  display: none !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .caretBlock {
  float: none !important;
  position: static !important;
}


/* =========================================================
   8. 左側第二層：固定欄位與縮排
========================================================= */

#courseCategoryMenu .dkb-level-1 > .dkb-tree-children {
  margin-left: 8px !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

#courseCategoryMenu .dkb-level-2 {
  margin: 6px 0 !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 30px !important;
  column-gap: 7px !important;
  align-items: center !important;

  min-height: 48px !important;
  padding: 0 5px 0 6px !important;

  border-radius: 14px !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-tree-item-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 30px !important;
  height: 30px !important;
  margin-left: 0 !important;
  padding-left: 18px !important;

  justify-self: center !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-tree-item-icon img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-level-link-2 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  min-height: 48px !important;

  padding: 8px 0 8px 20px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;

  white-space: nowrap !important;
  word-break: keep-all !important;

  font-size: 14px !important;
  line-height: 1.35 !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-tree-toggle {
  grid-column: 3 !important;
  grid-row: 1 !important;

  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;

  justify-self: center !important;

  float: none !important;
  position: static !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main::before,
#courseCategoryMenu .dkb-level-2 > .dkb-tree-main::after {
  display: none !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .caretBlock {
  float: none !important;
  position: static !important;
}


/* =========================================================
   9. 左側第三層：課程類型
========================================================= */

#courseCategoryMenu .dkb-level-2 > .dkb-tree-children {
  margin-left: 40px !important;
  padding-left: 12px !important;
  border-left: 2px solid #dcebf3 !important;
}

#courseCategoryMenu .dkb-level-3 {
  margin: 2px 0 !important;
}

#courseCategoryMenu .dkb-level-main-3 {
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

#courseCategoryMenu .dkb-level-link-3 {
  position: relative !important;

  display: flex !important;
  align-items: center !important;

  min-height: 34px !important;
  padding: 7px 8px 7px 18px !important;

  border-radius: 10px !important;
  color: #536875 !important;

  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;

  text-decoration: none !important;
  white-space: normal !important;

  transition:
    background 0.22s ease,
    color 0.22s ease !important;
}

#courseCategoryMenu .dkb-level-link-3::before {
  content: "" !important;

  position: absolute !important;
  left: 8px !important;
  top: 50% !important;

  width: 4px !important;
  height: 4px !important;

  border-radius: 50% !important;
  background: #9bb3c1 !important;

  transform: translateY(-50%) !important;
}

#courseCategoryMenu .dkb-level-link-3:hover,
#courseCategoryMenu .dkb-level-link-3:focus,
#courseCategoryMenu .dkb-level-link-3.dkb-is-current {
  background: rgba(0, 141, 197, 0.07) !important;
  color: #008dc5 !important;
  text-decoration: none !important;
}

#courseCategoryMenu .dkb-level-link-3:hover::before,
#courseCategoryMenu .dkb-level-link-3.dkb-is-current::before {
  background: #008dc5 !important;
}

#courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main .dkb-level-link-3 {
  background: rgba(0, 141, 197, 0.08) !important;
  color: #008dc5 !important;
  font-weight: 800 !important;
}


/* =========================================================
   10. 左側展開 / 收合箭頭
========================================================= */

#courseCategoryMenu .dkb-tree-toggle {
  order: 3 !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 6px 0 0 !important;

  flex: 0 0 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;
  background: transparent !important;

  cursor: pointer !important;
}

#courseCategoryMenu .dkb-tree-toggle:hover {
  background: #e6f4fa !important;
}

#courseCategoryMenu .dkb-is-expanded > .dkb-tree-main .dkb-tree-toggle {
  background: rgba(0, 141, 197, 0.08) !important;
}

#courseCategoryMenu .caretIcon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
}

#courseCategoryMenu .fs-font-square-plus::before,
#courseCategoryMenu .fa-square-plus::before,
#courseCategoryMenu .fs-font-square-minus::before,
#courseCategoryMenu .fa-square-minus::before {
  content: "›" !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform-origin: center center !important;
}

#courseCategoryMenu .fs-font-square-plus::before,
#courseCategoryMenu .fa-square-plus::before {
  color: #7b8d99 !important;
  transform: translateY(-1px) rotate(0deg) !important;
}

#courseCategoryMenu .fs-font-square-minus::before,
#courseCategoryMenu .fa-square-minus::before {
  color: #008dc5 !important;
  transform: translateX(3px) rotate(90deg) !important;
}

#courseCategoryMenu .dkb-tree-main:hover > .dkb-tree-toggle .caretIcon::before {
  color: #008dc5 !important;
}


/* =========================================================
   11. 左側目前路徑 / 展開狀態
========================================================= */

#courseCategoryMenu .dkb-tree-top-item.dkb-is-expanded > .dkb-tree-main,
#courseCategoryMenu .dkb-tree-top-item.dkb-has-current-child > .dkb-tree-main,
#courseCategoryMenu .dkb-tree-top-item.dkb-is-current-item > .dkb-tree-main {
  background: linear-gradient(135deg, #f5faff 0%, #eef8fd 100%) !important;
  box-shadow: inset 3px 0 0 #008dc5 !important;
}

#courseCategoryMenu .dkb-tree-top-item.dkb-is-expanded > .dkb-tree-main .dkb-level-link-1,
#courseCategoryMenu .dkb-tree-top-item.dkb-has-current-child > .dkb-tree-main .dkb-level-link-1,
#courseCategoryMenu .dkb-tree-top-item.dkb-is-current-item > .dkb-tree-main .dkb-level-link-1,
#courseCategoryMenu .dkb-level-1 > .dkb-tree-main .dkb-tree-leaf-link.dkb-is-current {
  color: #008dc5 !important;
}

#courseCategoryMenu .dkb-level-1.dkb-is-current-item > .dkb-tree-main {
  background: linear-gradient(135deg, #f5faff 0%, #eef8fd 100%) !important;
  box-shadow: inset 3px 0 0 #008dc5 !important;
}

#courseCategoryMenu .dkb-level-2.dkb-is-expanded > .dkb-tree-main,
#courseCategoryMenu .dkb-level-2.dkb-has-current-child > .dkb-tree-main,
#courseCategoryMenu .dkb-level-2.dkb-is-current-item > .dkb-tree-main {
  background: #f7fbfd !important;
}

#courseCategoryMenu .dkb-level-2.dkb-is-expanded > .dkb-tree-main .dkb-level-link-2,
#courseCategoryMenu .dkb-level-2.dkb-has-current-child > .dkb-tree-main .dkb-level-link-2,
#courseCategoryMenu .dkb-level-2.dkb-is-current-item > .dkb-tree-main .dkb-level-link-2 {
  color: #008dc5 !important;
}


/* =========================================================
   12. 側邊欄抽屜按鈕
========================================================= */

#fs-sidebar .drawer-controls a {
  border-radius: 999px !important;
  background: #008dc5 !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 141, 197, 0.2) !important;
  box-shadow: 0 6px 14px rgba(0, 141, 197, 0.18) !important;
}

#fs-sidebar .drawer-controls a:hover {
  background: #006f9b !important;
}

#fs-sidebar .drawer-controls .drawer-icon {
  color: #ffffff !important;
}


/* =========================================================
   13. 課程中心｜隱藏系統預設工具與提示
========================================================= */

html.dkb-course-latest-page .dkb-hide-course-info-tools,
html.dkb-course-latest-page .dkb-hide-course-right-tools,
html.dkb-course-latest-page .dkb-hide-filter-button,
html.dkb-course-latest-page .dkb-hide-onsite-hint,
html.dkb-course-latest-page .dkb-hide-course-hint-text,
html.dkb-course-latest-page .dkb-hide-course-header-desc {
  display: none !important;
}

/* 直接 selector 保險版 */
html.dkb-course-latest-page .app-course_latest:not(.app-course_latest-sidebar) .info .fs-hint,
html.dkb-course-latest-page .app-course_latest:not(.app-course_latest-sidebar) .pull-right > .fs-tools,
html.dkb-course-latest-page .app-course_latest:not(.app-course_latest-sidebar) button[name="btn-filter"],
html.dkb-course-latest-page #fs-content button[name="btn-filter"],
html.dkb-course-latest-page .fs-content button[name="btn-filter"],
html.dkb-course-latest-page #fs-media-content button[name="btn-filter"],
html.dkb-course-latest-page button[name="btn-filter"].fs-icon-btn,
html.dkb-course-latest-page button.fs-icon-btn.dkb-hide-filter-button,
html.dkb-course-latest-page .app-course_latest-pageHeader .ext2.fs-hint {
  display: none !important;
}


/* =========================================================
   14. 右側內容容器：移除最外層白框
========================================================= */

html.dkb-course-latest-page #fs-content,
html.dkb-course-latest-page .fs-content {
  color: var(--dkb-text-main);
}

html.dkb-course-latest-page #fs-content,
html.dkb-course-latest-page #fs-content > .row,
html.dkb-course-latest-page #fs-content > .row > .col-xs-12,
html.dkb-course-latest-page #xbox,
html.dkb-course-latest-page #xbox-inline,
html.dkb-course-latest-page #xbox-front,
html.dkb-course-latest-page #xbox-rear,
html.dkb-course-latest-page #xbox-inline > .module {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   15. 右側頁首：麵包屑與標題卡片
========================================================= */

html.dkb-course-latest-page .dkb-original-breadcrumb-hidden,
html.dkb-course-latest-page .app-course_latest-breadcrumb.dkb-original-breadcrumb-hidden {
  display: none !important;
}

html.dkb-course-latest-page .dkb-breadcrumb-in-card {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html.dkb-course-latest-page .dkb-breadcrumb-in-card .breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;

  color: #8a9aa5 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

html.dkb-course-latest-page .dkb-breadcrumb-in-card .breadcrumb > li {
  display: inline-flex !important;
  align-items: center !important;
}

html.dkb-course-latest-page .dkb-breadcrumb-in-card .breadcrumb > li + li::before {
  content: "／" !important;
  padding: 0 8px !important;
  color: #b8c6ce !important;
}

html.dkb-course-latest-page .dkb-breadcrumb-in-card .breadcrumb a {
  color: var(--dkb-primary) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html.dkb-course-latest-page .dkb-breadcrumb-in-card .breadcrumb a:hover {
  color: var(--dkb-primary-dark) !important;
  text-decoration: none !important;
}

html.dkb-course-latest-page .dkb-breadcrumb-in-card .breadcrumb .active {
  color: var(--dkb-text-light) !important;
  font-weight: 600 !important;
}

html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header,
html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header-mobile {
  background: linear-gradient(135deg, #f4fbff 0%, #ffffff 58%, #f7fbfd 100%) !important;
  border: 1px solid var(--dkb-border-soft) !important;
  border-radius: var(--dkb-radius-lg) !important;
  padding: 24px 28px 26px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--dkb-shadow-soft) !important;
}

html.dkb-course-latest-page .app-course_latest-pageHeader h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html.dkb-course-latest-page .app-course_latest-pageHeader .title {
  float: none !important;
  display: block !important;

  margin-top: 0 !important;

  color: var(--dkb-text-main) !important;
  font-size: 28px !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.25 !important;
}

html.dkb-course-latest-page .app-course_latest-pageHeader .title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 12px;
  margin-bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--dkb-primary), rgba(0, 141, 197, 0.28));
}


/* =========================================================
   16. 右側搜尋 / 篩選列
========================================================= */

html.dkb-course-latest-page .mod_course-list_latest > .filter {
  background: #ffffff !important;
  border: 1px solid var(--dkb-border-soft) !important;
  border-radius: var(--dkb-radius-lg) !important;
  padding: 18px 18px 16px !important;
  margin-bottom: 22px !important;
  box-shadow: var(--dkb-shadow-soft) !important;
}

html.dkb-course-latest-page .mod_course-list_latest .filter .form-inline {
  margin: 0 !important;
}

html.dkb-course-latest-page .mod_course-list_latest .input-group.search {
  width: 100% !important;
}

html.dkb-course-latest-page .mod_course-list_latest .input-group.search .form-control {
  height: 42px !important;
  border: 1px solid var(--dkb-border) !important;
  border-right: 0 !important;
  border-radius: 999px 0 0 999px !important;
  padding: 8px 15px !important;
  color: var(--dkb-text-main) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  background: #fbfdfe !important;
}

html.dkb-course-latest-page .mod_course-list_latest .input-group.search .form-control:focus {
  border-color: rgba(0, 141, 197, 0.45) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 141, 197, 0.10) !important;
}

html.dkb-course-latest-page .mod_course-list_latest #filter_search_btn {
  height: 42px !important;
  border: 1px solid var(--dkb-border) !important;
  border-left: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 8px 15px !important;
  color: #ffffff !important;
  background: var(--dkb-primary) !important;
  box-shadow: none !important;
}

html.dkb-course-latest-page .mod_course-list_latest #filter_search_btn:hover {
  background: var(--dkb-primary-dark) !important;
}

html.dkb-course-latest-page .mod_course-list_latest .form-group {
  margin-bottom: 0 !important;
}

html.dkb-course-latest-page .mod_course-list_latest .control-label {
  color: var(--dkb-text-sub) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
}

html.dkb-course-latest-page .mod_course-list_latest .select2-container--default .select2-selection--single {
  height: 42px !important;
  border: 1px solid var(--dkb-border) !important;
  border-radius: 999px !important;
  background: #fbfdfe !important;
  box-shadow: none !important;
}

html.dkb-course-latest-page .mod_course-list_latest .select2-selection__rendered {
  line-height: 40px !important;
  color: var(--dkb-text-main) !important;
  padding-left: 14px !important;
  padding-right: 32px !important;
  font-size: 14px !important;
}

html.dkb-course-latest-page .mod_course-list_latest .select2-selection__arrow {
  height: 40px !important;
  right: 8px !important;
}

html.dkb-course-latest-page .mod_course-list_latest .select2-selection__clear {
  color: var(--dkb-text-light) !important;
  margin-right: 6px !important;
}


/* =========================================================
   17. 右側課程卡片列表
========================================================= */

html.dkb-course-latest-page .course-thumbnail {
  margin-top: 4px !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-thumbnails {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-thumbnail {
  display: flex !important;
  height: auto !important;
  margin-bottom: 26px !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-thumbnail .fs-imageEx {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  background: #ffffff !important;
  border: 1px solid #e8f0f4 !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  box-shadow: var(--dkb-shadow-card) !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-thumbnail .fs-imageEx:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--dkb-shadow-card-hover) !important;
  border-color: rgba(0, 141, 197, 0.22) !important;
}


/* 課程圖片 */
html.dkb-course-latest-page .course-thumbnail .thumbnail {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

html.dkb-course-latest-page .course-thumbnail .img-container {
  height: 150px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #edf4f7 !important;
  transition:
    transform 0.32s ease,
    filter 0.32s ease !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-imageEx:hover .img-container {
  transform: scale(1.035) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}


/* 右下角狀態標籤：已加入 / 已通過等 */
html.dkb-course-latest-page .course-thumbnail .fs-thumbnail .image-info.lower-right.image-info-text {
  right: 10px !important;
  bottom: 10px !important;

  opacity: 1 !important;
  background: rgba(0, 141, 197, 0.92) !important;
  background-color: rgba(0, 141, 197, 0.92) !important;
  background-image: none !important;

  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 10px !important;
  padding: 5px 10px !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;

  box-shadow: 0 5px 12px rgba(0, 74, 106, 0.22) !important;
  backdrop-filter: blur(6px);
}


/* 課程文字區 */
html.dkb-course-latest-page .course-thumbnail .fs-caption.extended-caption {
  flex: 1 1 auto !important;

  display: flex !important;
  flex-direction: column !important;

  padding: 20px 16px 16px !important;
  background: #ffffff !important;
  overflow: visible !important;
}

/* 課程名稱區固定兩行高度，讓短課名與長課名排版一致 */
html.dkb-course-latest-page .course-thumbnail .fs-label {
  margin: 0 0 14px !important;
  min-height: 46px !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-label a {
  color: var(--dkb-text-main) !important;
  text-decoration: none !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-label a > span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  color: var(--dkb-text-main) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  letter-spacing: 0.01em !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-label a:hover > span {
  color: var(--dkb-primary-dark) !important;
}


/* 授課教師 / 課程時長固定貼底 */
html.dkb-course-latest-page .course-thumbnail .fs-caption.extended-caption > .fs-hint {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  margin-top: auto !important;
  padding-top: 12px !important;

  border-top: 1px solid #eef4f7 !important;

  color: var(--dkb-text-sub) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

html.dkb-course-latest-page .course-thumbnail .dkb-course-teacher-label,
html.dkb-course-latest-page .course-thumbnail .dkb-course-organizer-label,
html.dkb-course-latest-page .course-thumbnail .dkb-clean-course-meta {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  margin: 0 0 4px !important;
  padding: 0 !important;

  color: var(--dkb-text-sub) !important;
  background: transparent !important;
  border: 0 !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.dkb-course-latest-page .course-thumbnail .dkb-clean-course-meta {
  margin-bottom: 0 !important;
}

html.dkb-course-latest-page .course-thumbnail .dkb-clean-course-meta::before {
  content: none !important;
  display: none !important;
}


/* =========================================================
   18. 分頁
========================================================= */

html.dkb-course-latest-page .fs-pagination {
  background: #ffffff !important;
  border: 1px solid var(--dkb-border-soft) !important;
  border-radius: var(--dkb-radius-lg) !important;
  padding: 16px 18px !important;
  margin-top: 4px !important;
  box-shadow: var(--dkb-shadow-soft) !important;
}

html.dkb-course-latest-page .fs-pagination .pagination {
  margin: 0 !important;
}

html.dkb-course-latest-page .fs-pagination .pagination > li > a,
html.dkb-course-latest-page .fs-pagination .pagination > li > span {
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 3px !important;
  padding: 7px 11px !important;

  border: 1px solid var(--dkb-border) !important;
  border-radius: 999px !important;

  color: var(--dkb-text-sub) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}

html.dkb-course-latest-page .fs-pagination .pagination > li > a:hover {
  color: var(--dkb-primary-dark) !important;
  background: var(--dkb-primary-soft) !important;
  border-color: rgba(0, 141, 197, 0.25) !important;
}

html.dkb-course-latest-page .fs-pagination .pagination > .active > span,
html.dkb-course-latest-page .fs-pagination .pagination > .active > a {
  color: #ffffff !important;
  background: var(--dkb-primary) !important;
  border-color: var(--dkb-primary) !important;
}

html.dkb-course-latest-page .fs-pagination .pagination > .disabled > span {
  color: #b9c5cc !important;
  background: #f7fafc !important;
}

html.dkb-course-latest-page .fs-pagination-go {
  margin-top: 10px !important;
  color: var(--dkb-text-light) !important;
  font-size: 13px !important;
}

html.dkb-course-latest-page .fs-pagination-input {
  width: 44px !important;
  height: 30px !important;
  border: 1px solid var(--dkb-border) !important;
  border-radius: 999px !important;
  text-align: center !important;
  color: var(--dkb-text-main) !important;
  background: #fbfdfe !important;
}


/* =========================================================
   19. Modal 微調
========================================================= */

html.dkb-course-latest-page #courseInfo_modal .modal-content {
  border: 0 !important;
  border-radius: var(--dkb-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(18, 45, 64, 0.22) !important;
}

html.dkb-course-latest-page #courseInfo_modal .modal-header {
  border-bottom: 1px solid var(--dkb-border-soft) !important;
  background: #f8fbfd !important;
  padding: 18px 22px !important;
}

html.dkb-course-latest-page #courseInfo_modal .modal-title {
  color: var(--dkb-text-main) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

html.dkb-course-latest-page #courseInfo_modal .modal-body {
  padding: 22px !important;
}


/* =========================================================
   20. RWD
========================================================= */

@media (max-width: 991px) {
  .course-type-logo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #courseCategoryMenu.dkb-course-category-menu {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  #courseCategoryMenu .dkb-level-link-1,
  #courseCategoryMenu .dkb-level-link-2 {
    font-size: 14px !important;
  }

  #courseCategoryMenu .dkb-level-link-3 {
    font-size: 13px !important;
  }

  html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header-mobile {
    margin-bottom: 14px !important;
  }

  html.dkb-course-latest-page .mod_course-list_latest > .filter {
    padding: 16px !important;
  }

  html.dkb-course-latest-page .mod_course-list_latest .filter .col-sm-4,
  html.dkb-course-latest-page .mod_course-list_latest .filter .col-sm-8 {
    margin-bottom: 10px !important;
  }

  html.dkb-course-latest-page .course-thumbnail .img-container {
    height: 170px !important;
  }
}

@media (max-width: 767px) {
  html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header,
  html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header-mobile {
    padding: 18px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }

  html.dkb-course-latest-page .app-course_latest-pageHeader .title {
    font-size: 22px !important;
  }

  html.dkb-course-latest-page .dkb-breadcrumb-in-card {
    margin-bottom: 14px !important;
  }

  html.dkb-course-latest-page .dkb-breadcrumb-in-card .breadcrumb {
    font-size: 12.5px !important;
  }

  html.dkb-course-latest-page .mod_course-list_latest > .filter {
    border-radius: 16px !important;
  }

  html.dkb-course-latest-page .course-thumbnail .fs-thumbnail {
    margin-bottom: 18px !important;
  }

  html.dkb-course-latest-page .course-thumbnail .fs-thumbnail .fs-imageEx {
    border-radius: 16px !important;
  }

  html.dkb-course-latest-page .course-thumbnail .img-container {
    height: 190px !important;
  }

  html.dkb-course-latest-page .course-thumbnail .fs-caption.extended-caption {
    padding: 14px 15px 16px !important;
  }

  html.dkb-course-latest-page .course-thumbnail .fs-label {
    min-height: auto !important;
  }

  html.dkb-course-latest-page .course-thumbnail .fs-label a > span {
    font-size: 16px !important;
    -webkit-line-clamp: 2 !important;
  }

  html.dkb-course-latest-page .fs-pagination {
    padding: 14px 10px !important;
  }

  html.dkb-course-latest-page .fs-pagination .pagination > li > a,
  html.dkb-course-latest-page .fs-pagination .pagination > li > span {
    min-width: 32px !important;
    height: 32px !important;
    padding: 5px 9px !important;
    margin: 0 2px !important;
  }
}

@media (max-width: 640px) {
  .course-type-switch-inner {
    padding: 18px 16px 16px !important;
    border-radius: 14px !important;
  }

  .course-type-switch-title {
    font-size: 24px !important;
    margin-bottom: 14px !important;
  }

  .course-type-logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .course-type-logo-box {
    height: 42px !important;
  }

  .course-type-logo-box img {
    max-height: 42px !important;
  }

  .course-type-logo-name {
    font-size: 13px !important;
  }

  .course-type-content-panel {
    min-height: auto !important;
    padding: 14px !important;
  }

  .course-type-content-name {
    font-size: 16px !important;
  }

  .course-type-content-desc {
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  #courseCategoryMenu .dkb-tree-children {
    margin-left: 16px !important;
    padding-left: 10px !important;
  }

  #courseCategoryMenu .dkb-tree-item-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    margin-left: 6px !important;
  }

  #courseCategoryMenu .dkb-tree-item-icon img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }
}

/* =========================================================
   修正：強制顯示課程卡片底部資訊
   授課教師 / 課程時長
========================================================= */

html.dkb-course-latest-page .course-thumbnail .fs-caption.extended-caption {
  min-height: 142px !important;
  overflow: visible !important;
}

html.dkb-course-latest-page .course-thumbnail .fs-caption.extended-caption > .fs-hint {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  min-height: auto !important;
  max-height: none !important;

  overflow: visible !important;

  margin-top: auto !important;
  padding-top: 12px !important;

  border-top: 1px solid #eef4f7 !important;

  color: #5f7380 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

html.dkb-course-latest-page .course-thumbnail .dkb-course-teacher-label,
html.dkb-course-latest-page .course-thumbnail .dkb-course-organizer-label,
html.dkb-course-latest-page .course-thumbnail .dkb-clean-course-meta {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 0 4px !important;
  padding: 0 !important;

  color: #5f7380 !important;
  background: transparent !important;
  border: 0 !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.dkb-course-latest-page .course-thumbnail .dkb-clean-course-meta {
  margin-bottom: 0 !important;
}

html.dkb-course-latest-page .course-thumbnail .dkb-clean-course-meta::before {
  content: none !important;
  display: none !important;
}

/* =========================================================
   課程中心｜分頁右側頁碼輸入器位置
========================================================= */

/* 整個輸入器往右移 */
html.dkb-course-latest-page .fs-pagination-go {
  margin-left: 28px !important;
}

/* =========================================================
   課程中心｜大分類切換滑塊
   最新課程 / 我的學習
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch {
  margin: 0 0 14px !important;
  padding: 0 !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-inner {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  padding: 5px !important;

  background: #e9f4f9 !important;
  border: 1px solid #d5e8f1 !important;
  border-radius: 999px !important;

  box-shadow: 0 6px 16px rgba(24, 56, 77, 0.055) !important;

  overflow: hidden !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-inner::before {
  content: "" !important;

  position: absolute !important;
  top: 5px !important;
  left: 5px !important;

  width: calc(50% - 5px) !important;
  height: calc(100% - 10px) !important;

  border-radius: 999px !important;

  background: #008dc5 !important;
  box-shadow: 0 6px 14px rgba(0, 141, 197, 0.22) !important;

  transform: translateX(0) !important;
  transition: transform 0.22s ease !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-inner.is-learning::before {
  transform: translateX(100%) !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item {
  position: relative !important;
  z-index: 1 !important;

  min-height: 38px !important;
  padding: 9px 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  color: #4f6978 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;

  transition:
    color 0.18s ease,
    transform 0.18s ease !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item:hover {
  text-decoration: none !important;
  color: #006f9f !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item.is-active {
  color: #ffffff !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item.is-active:hover {
  color: #ffffff !important;
}


/* =========================================================
   課程中心｜隱藏麵包屑
   原本外部麵包屑、以及之前搬進標題卡片內的麵包屑都隱藏
========================================================= */

html.dkb-course-hub-page #fs-content .app-course_latest-breadcrumb,
html.dkb-course-hub-page #fs-content .dkb-breadcrumb-in-card,
html.dkb-course-hub-page #fs-content .breadcrumb {
  display: none !important;
}


/* =========================================================
   我的學習｜隱藏原本左側欄
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-hide-original-learning-sidebar {
  display: none !important;
}


/* =========================================================
   我的學習｜平級選單
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-menu {
  margin: 0 0 14px !important;
  padding: 12px !important;

  border-radius: 20px !important;

  background: #ffffff !important;
  border: 1px solid #dcebf3 !important;

  box-shadow: 0 8px 22px rgba(24, 56, 77, 0.045) !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item {
  min-height: 46px !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  column-gap: 10px !important;
  align-items: center !important;

  padding: 6px 10px !important;
  margin: 3px 0 !important;

  border-radius: 14px !important;

  color: #18384d !important;
  text-decoration: none !important;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item:hover {
  background: #f5faff !important;
  color: #008dc5 !important;
  text-decoration: none !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item.is-active {
  background: linear-gradient(135deg, #f5faff 0%, #eef8fd 100%) !important;
  box-shadow: inset 3px 0 0 #008dc5 !important;
  color: #008dc5 !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-icon {
  width: 32px !important;
  height: 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  background: #e6f4fa !important;
  color: #008dc5 !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-text {
  min-width: 0 !important;

  color: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;

  border-radius: 999px !important;

  background: #edf6fa !important;
  color: #5f7380 !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item.is-active .dkb-learning-flat-count {
  background: #008dc5 !important;
  color: #ffffff !important;
}


/* =========================================================
   最新課程頁｜滑塊與原本課程分類樹間距
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch + #mbox,
html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch + .dkb-learning-flat-menu {
  margin-top: 0 !important;
}

/* =========================================================
   課程中心｜滑塊切換 AJAX loading
========================================================= */

html.dkb-course-hub-ajax-loading #fs-sidebar,
html.dkb-course-hub-ajax-loading #fs-content {
  opacity: 0.45 !important;
  pointer-events: none !important;
  transition: opacity 0.12s ease !important;
}

html #fs-sidebar,
html #fs-content {
  transition: opacity 0.12s ease !important;
}

/* =========================================================
   課程中心｜正常換頁時的淡出過渡
   避免最新課程 / 我的學習切換時硬跳
========================================================= */

html.dkb-course-hub-page #fs-sidebar,
html.dkb-course-hub-page #fs-content {
  transition: opacity 0.12s ease, transform 0.12s ease !important;
}

html.dkb-course-hub-page.dkb-course-hub-page-leaving #fs-sidebar,
html.dkb-course-hub-page.dkb-course-hub-page-leaving #fs-content {
  opacity: 0.55 !important;
  transform: translateY(2px) !important;
  pointer-events: none !important;
}

/* =========================================================
   NCCU DKB｜課程中心左側欄統一樣式整理版
   用途：
   1. 統一「最新課程」課程分類樹與「我的學習」平級選單的外觀
   2. 保留最新課程三層結構
   3. 我的學習底下改成與最新課程第一層同一套卡片列樣式
   4. 建議放在課程中心 CSS 最下方，或取代原本「左側課程分類樹」與「我的學習平級選單」相關區塊
========================================================= */


/* =========================================================
   0. 左側欄共用變數
========================================================= */

html.dkb-course-latest-page,
html.dkb-course-hub-page {
  --dkb-primary: #008dc5;
  --dkb-primary-dark: #006f9f;
  --dkb-primary-soft: #e8f6fb;
  --dkb-primary-softer: #f3fafc;

  --dkb-text-main: #17384d;
  --dkb-text-sub: #5f7380;
  --dkb-text-light: #8a9aa5;

  --dkb-border: #e5edf2;
  --dkb-border-soft: #eef4f7;
  --dkb-sidebar-border: #dcebf3;

  --dkb-radius-lg: 20px;
  --dkb-radius-md: 14px;
  --dkb-radius-sm: 10px;

  --dkb-shadow-sidebar: 0 8px 22px rgba(24, 56, 77, 0.045);
}


/* =========================================================
   1. 左側欄外層清理
========================================================= */

html.dkb-course-hub-page #fs-sidebar,
html.dkb-course-latest-page #fs-sidebar,
#fs-sidebar.dkb-course-sidebar-wrap,
#fs-sidebar .drawer-contents-reserve,
#fs-sidebar .drawer-body-reserve,
#fs-sidebar #mbox,
#fs-sidebar #mbox-inline,
#fs-sidebar .module.app-course_latest-sidebar,
#fs-sidebar .module.mod_course-myCourseSidebar,
#fs-sidebar .module.mod_course-myCoursePageHint,
#fs-sidebar .module.mod_userInfo-show {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   2. 左側欄上方：最新課程 / 我的學習切換滑塊
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch {
  margin: 0 0 14px !important;
  padding: 0 !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-inner {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  padding: 5px !important;

  background: #e9f4f9 !important;
  border: 1px solid #d5e8f1 !important;
  border-radius: 999px !important;

  box-shadow: 0 6px 16px rgba(24, 56, 77, 0.055) !important;
  overflow: hidden !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-inner::before {
  content: "" !important;

  position: absolute !important;
  top: 5px !important;
  left: 5px !important;

  width: calc(50% - 5px) !important;
  height: calc(100% - 10px) !important;

  border-radius: 999px !important;

  background: var(--dkb-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 141, 197, 0.22) !important;

  transform: translateX(0) !important;
  transition: transform 0.22s ease !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-inner.is-learning::before {
  transform: translateX(100%) !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item {
  position: relative !important;
  z-index: 1 !important;

  min-height: 38px !important;
  padding: 9px 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  color: #4f6978 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;

  transition:
    color 0.18s ease,
    transform 0.18s ease !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item:hover {
  color: var(--dkb-primary-dark) !important;
  text-decoration: none !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item.is-active,
html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch-item.is-active:hover {
  color: #ffffff !important;
}


/* =========================================================
   3. 左側欄內容面板：最新課程 / 我的學習共用
========================================================= */

#courseCategoryMenu.dkb-course-category-menu,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-menu {
  overflow: hidden !important;

  margin: 0 0 14px !important;
  padding: 14px !important;

  border-radius: var(--dkb-radius-lg) !important;

  background: #ffffff !important;
  border: 1px solid var(--dkb-sidebar-border) !important;

  box-shadow: var(--dkb-shadow-sidebar) !important;
}

#courseCategoryMenu.dkb-course-category-menu ul,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-menu ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#courseCategoryMenu.dkb-course-category-menu li,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-menu li {
  list-style: none !important;
}

#courseCategoryMenu.dkb-course-category-menu a,
#courseCategoryMenu.dkb-course-category-menu a:hover,
#courseCategoryMenu.dkb-course-category-menu a:focus,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item:hover,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item:focus {
  text-decoration: none !important;
}


/* =========================================================
   4. 左側欄項目列：最新課程第一層 / 我的學習共用
========================================================= */

/*
   最新課程第一層：
   #courseCategoryMenu .dkb-level-1 > .dkb-tree-main

   我的學習：
   .dkb-learning-flat-item

   統一成同一套 3 欄：
   icon / text / action
========================================================= */

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item {
  min-height: 46px !important;

  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  column-gap: 10px !important;
  align-items: center !important;

  padding: 0 6px 0 8px !important;
  margin: 4px 0 !important;

  border-radius: var(--dkb-radius-md) !important;

  color: var(--dkb-text-main) !important;
  background: transparent !important;

  cursor: pointer !important;

  transition:
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main:hover,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item:hover {
  background: #f5faff !important;
  color: var(--dkb-primary) !important;
}


/* =========================================================
   5. 左側欄 icon：最新課程 / 我的學習共用
========================================================= */

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;

  justify-self: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  background: #e6f4fa !important;
  color: var(--dkb-primary) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  overflow: hidden !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon {
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon img {
  display: block !important;

  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;

  object-fit: contain !important;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main:hover > .dkb-tree-item-icon img {
  transform: scale(1.09) !important;
  opacity: 0.92 !important;
}


/* =========================================================
   6. 左側欄文字：最新課程 / 我的學習共用
========================================================= */

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-text {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  min-height: 46px !important;

  display: flex !important;
  align-items: center !important;

  padding: 10px 0 !important;
  margin: 0 !important;

  color: inherit !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1:hover,
#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1:focus {
  color: var(--dkb-primary) !important;
  text-decoration: none !important;
}


/* =========================================================
   7. 右側欄位：最新課程箭頭 / 我的學習數字
========================================================= */

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-count {
  grid-column: 3 !important;
  grid-row: 1 !important;

  justify-self: center !important;

  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle {
  background: transparent !important;
  cursor: pointer !important;
  float: none !important;
  position: static !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle:hover {
  background: #e6f4fa !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-count {
  min-width: 24px !important;
  width: auto !important;
  height: 24px !important;
  padding: 0 8px !important;

  border-radius: 999px !important;

  background: #edf6fa !important;
  color: var(--dkb-text-sub) !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* 沒有子層的最新課程第一層，保留第三欄，讓它跟我的學習有數字的列對齊 */
#courseCategoryMenu .dkb-level-1:not(.dkb-has-children) > .dkb-tree-main::after {
  content: "" !important;
  display: block !important;

  grid-column: 3 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;
}

#courseCategoryMenu .dkb-level-1 > .dkb-tree-main::before {
  display: none !important;
}


/* =========================================================
   8. 左側欄 active 狀態：最新課程 / 我的學習共用
========================================================= */

#courseCategoryMenu .dkb-tree-top-item.dkb-is-expanded > .dkb-tree-main,
#courseCategoryMenu .dkb-tree-top-item.dkb-has-current-child > .dkb-tree-main,
#courseCategoryMenu .dkb-tree-top-item.dkb-is-current-item > .dkb-tree-main,
#courseCategoryMenu .dkb-level-1.dkb-is-current-item > .dkb-tree-main,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item.is-active {
  background: linear-gradient(135deg, #f5faff 0%, #eef8fd 100%) !important;
  box-shadow: inset 3px 0 0 var(--dkb-primary) !important;
  color: var(--dkb-primary) !important;
}

#courseCategoryMenu .dkb-tree-top-item.dkb-is-expanded > .dkb-tree-main .dkb-level-link-1,
#courseCategoryMenu .dkb-tree-top-item.dkb-has-current-child > .dkb-tree-main .dkb-level-link-1,
#courseCategoryMenu .dkb-tree-top-item.dkb-is-current-item > .dkb-tree-main .dkb-level-link-1,
#courseCategoryMenu .dkb-level-1.dkb-is-current-item > .dkb-tree-main .dkb-level-link-1,
#courseCategoryMenu .dkb-level-1 > .dkb-tree-main .dkb-tree-leaf-link.dkb-is-current {
  color: var(--dkb-primary) !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item.is-active .dkb-learning-flat-count {
  background: var(--dkb-primary) !important;
  color: #ffffff !important;
}


/* =========================================================
   9. 最新課程第二層
========================================================= */

#courseCategoryMenu .dkb-level-1 > .dkb-tree-children {
  margin-left: 8px !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

#courseCategoryMenu .dkb-level-2 {
  margin: 6px 0 !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main {
  min-height: 48px !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 30px !important;
  column-gap: 7px !important;
  align-items: center !important;

  padding: 0 5px 0 6px !important;
  border-radius: var(--dkb-radius-md) !important;

  background: transparent !important;

  transition:
    background 0.22s ease,
    color 0.22s ease !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main:hover {
  background: #f5faff !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-tree-item-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 30px !important;
  height: 30px !important;
  margin-left: 0 !important;
  padding-left: 18px !important;

  justify-self: center !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-tree-item-icon img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-level-link-2 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  min-height: 48px !important;

  display: flex !important;
  align-items: center !important;

  padding: 8px 0 8px 20px !important;
  margin: 0 !important;

  color: var(--dkb-text-main) !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main:hover > .dkb-level-link-2,
#courseCategoryMenu .dkb-level-2.dkb-is-expanded > .dkb-tree-main .dkb-level-link-2,
#courseCategoryMenu .dkb-level-2.dkb-has-current-child > .dkb-tree-main .dkb-level-link-2,
#courseCategoryMenu .dkb-level-2.dkb-is-current-item > .dkb-tree-main .dkb-level-link-2 {
  color: var(--dkb-primary) !important;
}

#courseCategoryMenu .dkb-level-2.dkb-is-expanded > .dkb-tree-main,
#courseCategoryMenu .dkb-level-2.dkb-has-current-child > .dkb-tree-main,
#courseCategoryMenu .dkb-level-2.dkb-is-current-item > .dkb-tree-main {
  background: #f7fbfd !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main > .dkb-tree-toggle {
  grid-column: 3 !important;
  grid-row: 1 !important;

  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;

  justify-self: center !important;

  float: none !important;
  position: static !important;
}

#courseCategoryMenu .dkb-level-2 > .dkb-tree-main::before,
#courseCategoryMenu .dkb-level-2 > .dkb-tree-main::after {
  display: none !important;
}


/* =========================================================
   10. 最新課程第三層
========================================================= */

#courseCategoryMenu .dkb-level-2 > .dkb-tree-children {
  margin-left: 40px !important;
  padding-left: 12px !important;
  border-left: 2px solid var(--dkb-sidebar-border) !important;
}

#courseCategoryMenu .dkb-level-3 {
  margin: 2px 0 !important;
}

#courseCategoryMenu .dkb-level-main-3 {
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: var(--dkb-radius-sm) !important;
}

#courseCategoryMenu .dkb-level-link-3 {
  position: relative !important;

  min-height: 34px !important;
  padding: 7px 8px 7px 18px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: var(--dkb-radius-sm) !important;

  color: #536875 !important;

  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;

  text-decoration: none !important;
  white-space: normal !important;

  transition:
    background 0.22s ease,
    color 0.22s ease !important;
}

#courseCategoryMenu .dkb-level-link-3::before {
  content: "" !important;

  position: absolute !important;
  left: 8px !important;
  top: 50% !important;

  width: 4px !important;
  height: 4px !important;

  border-radius: 50% !important;
  background: #9bb3c1 !important;

  transform: translateY(-50%) !important;
}

#courseCategoryMenu .dkb-level-link-3:hover,
#courseCategoryMenu .dkb-level-link-3:focus,
#courseCategoryMenu .dkb-level-link-3.dkb-is-current,
#courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main .dkb-level-link-3 {
  background: rgba(0, 141, 197, 0.08) !important;
  color: var(--dkb-primary) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

#courseCategoryMenu .dkb-level-link-3:hover::before,
#courseCategoryMenu .dkb-level-link-3.dkb-is-current::before,
#courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main .dkb-level-link-3::before {
  background: var(--dkb-primary) !important;
}


/* =========================================================
   11. 最新課程箭頭
========================================================= */

#courseCategoryMenu .caretIcon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
}

#courseCategoryMenu .fs-font-square-plus::before,
#courseCategoryMenu .fa-square-plus::before,
#courseCategoryMenu .fs-font-square-minus::before,
#courseCategoryMenu .fa-square-minus::before {
  content: "›" !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform-origin: center center !important;
}

#courseCategoryMenu .fs-font-square-plus::before,
#courseCategoryMenu .fa-square-plus::before {
  color: #7b8d99 !important;
  transform: translateY(-1px) rotate(0deg) !important;
}

#courseCategoryMenu .fs-font-square-minus::before,
#courseCategoryMenu .fa-square-minus::before {
  color: var(--dkb-primary) !important;
  transform: translateX(3px) rotate(90deg) !important;
}

#courseCategoryMenu .dkb-tree-main:hover > .dkb-tree-toggle .caretIcon::before {
  color: var(--dkb-primary) !important;
}


/* =========================================================
   12. 隱藏我的學習原始左側欄
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-hide-original-learning-sidebar {
  display: none !important;
}


/* =========================================================
   13. 隱藏麵包屑
========================================================= */

html.dkb-course-hub-page #fs-content .app-course_latest-breadcrumb,
html.dkb-course-hub-page #fs-content .dkb-breadcrumb-in-card,
html.dkb-course-hub-page #fs-content .breadcrumb {
  display: none !important;
}


/* =========================================================
   14. 左側欄抽屜按鈕
========================================================= */

#fs-sidebar .drawer-controls a {
  border-radius: 999px !important;
  background: var(--dkb-primary) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 141, 197, 0.2) !important;
  box-shadow: 0 6px 14px rgba(0, 141, 197, 0.18) !important;
}

#fs-sidebar .drawer-controls a:hover {
  background: var(--dkb-primary-dark) !important;
}

#fs-sidebar .drawer-controls .drawer-icon {
  color: #ffffff !important;
}


/* =========================================================
   15. 正常換頁淡出，不使用 AJAX 切換
========================================================= */

html.dkb-course-hub-page #fs-sidebar,
html.dkb-course-hub-page #fs-content {
  transition:
    opacity 0.12s ease,
    transform 0.12s ease !important;
}

html.dkb-course-hub-page.dkb-course-hub-page-leaving #fs-sidebar,
html.dkb-course-hub-page.dkb-course-hub-page-leaving #fs-content {
  opacity: 0.55 !important;
  transform: translateY(2px) !important;
  pointer-events: none !important;
}


/* =========================================================
   16. RWD
========================================================= */

@media (max-width: 991px) {
  #courseCategoryMenu.dkb-course-category-menu,
  html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-menu {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  #courseCategoryMenu .dkb-level-link-1,
  #courseCategoryMenu .dkb-level-link-2,
  html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-text {
    font-size: 14px !important;
  }

  #courseCategoryMenu .dkb-level-link-3 {
    font-size: 13px !important;
  }
}

@media (max-width: 640px) {
  #courseCategoryMenu .dkb-tree-children {
    margin-left: 16px !important;
    padding-left: 10px !important;
  }

  #courseCategoryMenu .dkb-tree-item-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    margin-left: 6px !important;
  }

  #courseCategoryMenu .dkb-tree-item-icon img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }
}

/* =========================================================
   課程中心｜左側欄最終修正
   1. 隱藏「課程分類」標題
   2. 隱藏「我的學習」原始標題
   3. 我的學習三個項目改成跟最新課程分類一致
========================================================= */


/* =========================================================
   1. 最新課程｜隱藏「課程分類」標題
========================================================= */

/* 你之前 JS 加上的強化標題 */
html.dkb-course-hub-page #fs-sidebar .fs-text-divider.dkb-sidebar-enhanced,
html.dkb-course-latest-page #fs-sidebar .fs-text-divider.dkb-sidebar-enhanced {
  display: none !important;
}

/* 保險：如果系統標題沒有 dkb-sidebar-enhanced，也一起隱藏 */
html.dkb-course-hub-page #fs-sidebar .app-course_latest-sidebar .fs-text-divider,
html.dkb-course-latest-page #fs-sidebar .app-course_latest-sidebar .fs-text-divider {
  display: none !important;
}


/* =========================================================
   2. 我的學習｜隱藏原始系統標題與原始選單
========================================================= */

html.dkb-course-hub-page #fs-sidebar .mod_course-myCoursePageHint,
html.dkb-course-hub-page #fs-sidebar .mod_userInfo-show,
html.dkb-course-hub-page #fs-sidebar .mod_course-myCourseSidebar,
html.dkb-course-hub-page #fs-sidebar .dkb-hide-original-learning-sidebar {
  display: none !important;
}


/* =========================================================
   3. 左側欄面板統一
   最新課程分類樹 / 我的學習平級選單 使用同樣外觀
========================================================= */

html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu.dkb-course-category-menu,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu.dkb-course-category-menu,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-menu {
  margin: 0 0 14px !important;
  padding: 14px !important;

  border-radius: 20px !important;

  background: #ffffff !important;
  border: 1px solid #dcebf3 !important;

  box-shadow: 0 8px 22px rgba(24, 56, 77, 0.045) !important;
}


/* =========================================================
   4. 我的學習｜三個項目改成跟最新課程第一層一樣
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item {
  min-height: 46px !important;

  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  column-gap: 10px !important;
  align-items: center !important;

  padding: 0 6px 0 8px !important;
  margin: 4px 0 !important;

  border-radius: 14px !important;

  background: transparent !important;
  color: #18384d !important;

  text-decoration: none !important;
  cursor: pointer !important;

  transition:
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item:hover {
  background: #f5faff !important;
  color: #008dc5 !important;
  text-decoration: none !important;
}


/* =========================================================
   5. 我的學習｜左側 icon 改成跟最新課程欄位一致
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  background: #e6f4fa !important;
  color: #008dc5 !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}


/* =========================================================
   6. 我的學習｜標題文字改成跟最新課程一樣
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-text {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  min-height: 46px !important;

  display: flex !important;
  align-items: center !important;

  padding: 10px 0 !important;
  margin: 0 !important;

  color: inherit !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 保險：如果裡面還殘留系統 .text 或 span 樣式，也一併壓過 */
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item .text,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item span {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}


/* =========================================================
   7. 我的學習｜右側數字徽章
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-count {
  grid-column: 3 !important;
  grid-row: 1 !important;

  justify-self: center !important;

  min-width: 24px !important;
  width: auto !important;
  height: 24px !important;

  padding: 0 8px !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  background: #edf6fa !important;
  color: #5f7380 !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}


/* =========================================================
   8. 我的學習｜目前頁面 active 狀態
   跟最新課程分類的 active 狀態一致
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item.is-active {
  background: linear-gradient(135deg, #f5faff 0%, #eef8fd 100%) !important;
  box-shadow: inset 3px 0 0 #008dc5 !important;
  color: #008dc5 !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item.is-active .dkb-learning-flat-count {
  background: #008dc5 !important;
  color: #ffffff !important;
}


/* =========================================================
   9. 滑塊與下方選單距離統一
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch {
  margin-bottom: 14px !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch + #mbox,
html.dkb-course-hub-page #fs-sidebar .dkb-course-hub-switch + .dkb-learning-flat-menu {
  margin-top: 0 !important;
}

/* =========================================================
   我的學習｜三個項目文字樣式對齊最新課程
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item .dkb-learning-flat-text {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  min-height: 46px !important;

  display: flex !important;
  align-items: center !important;

  padding: 10px 0 !important;
  margin: 0 !important;

  color: inherit !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 避免 XMS+ 原本 span / text 樣式蓋回來 */
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item .dkb-learning-flat-text,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item .dkb-learning-flat-text span,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item .text {
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  font-family: inherit !important;
}


/* =========================================================
   我的學習｜前方圖示改成 LOGO 圖片
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  overflow: visible !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-icon img {
  display: block !important;

  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;

  object-fit: contain !important;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease !important;
}

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item:hover .dkb-learning-flat-icon img {
  transform: scale(1.09) !important;
  opacity: 0.92 !important;
}


/* =========================================================
   我的學習｜沒有數字的項目保留右側欄位，但不顯示括號
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-count.is-empty {
  display: block !important;

  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: transparent !important;
  font-size: 0 !important;
}

/* 已修課程、收藏課程如果還有殘留括號，直接隱藏 */
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item[href="/course/completeList"] .dkb-learning-flat-count,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item[href="/course/followed"] .dkb-learning-flat-count {
  display: block !important;

  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;

  padding: 0 !important;
  background: transparent !important;

  color: transparent !important;
  font-size: 0 !important;
}

/* =========================================================
   我的學習｜隱藏右側數字圓圈
   待修 / 已修 / 收藏 都不顯示括號或徽章
========================================================= */

html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-count,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-count.is-empty,
html.dkb-course-hub-page #fs-sidebar .dkb-learning-flat-item.is-active .dkb-learning-flat-count {
  display: none !important;
}

/* =========================================================
   最新課程｜隱藏搜尋框內的目前篩選類別提示
   例如：類別：文學院旗艦課程（含子類別）
========================================================= */

html.dkb-course-latest-page .mod_course-list_latest .filter-attr,
html.dkb-course-hub-page .mod_course-list_latest .filter-attr {
  display: none !important;
}

/* =========================================================
   最新課程｜頁首標題區縮矮
========================================================= */

html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header,
html.dkb-course-hub-page .app-course_latest-pageHeader .fs-page-header {
  padding: 18px 24px 20px !important;
  margin-bottom: 16px !important;
}

/* 手機版頁首也一起縮矮 */
html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header-mobile,
html.dkb-course-hub-page .app-course_latest-pageHeader .fs-page-header-mobile {
  padding: 16px 20px 18px !important;
  margin-bottom: 14px !important;
}

/* 標題字本身稍微維持氣勢，不要太小 */
html.dkb-course-latest-page .app-course_latest-pageHeader .title,
html.dkb-course-hub-page .app-course_latest-pageHeader .title {
  font-size: 26px !important;
  line-height: 1.25 !important;
}

/* 標題底線靠近一點 */
html.dkb-course-latest-page .app-course_latest-pageHeader .title::after,
html.dkb-course-hub-page .app-course_latest-pageHeader .title::after {
  margin-top: 20px !important;
}

/* =========================================================
   最新課程｜頁首標題卡片縮矮
   重點：縮小標題底線下方留白
========================================================= */

html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header,
html.dkb-course-hub-page .app-course_latest-pageHeader .fs-page-header {
  padding-top: 18px !important;
  padding-right: 24px !important;
  padding-bottom: 12px !important;
  padding-left: 24px !important;

  margin-bottom: 16px !important;
}

/* h2 本身不要撐出多餘高度 */
html.dkb-course-latest-page .app-course_latest-pageHeader h2,
html.dkb-course-hub-page .app-course_latest-pageHeader h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 標題文字 */
html.dkb-course-latest-page .app-course_latest-pageHeader .title,
html.dkb-course-hub-page .app-course_latest-pageHeader .title {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 26px !important;
  line-height: 1.25 !important;
}

/* 襯線本身與標題距離維持，不動太多 */
html.dkb-course-latest-page .app-course_latest-pageHeader .title::after,
html.dkb-course-hub-page .app-course_latest-pageHeader .title::after {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* 已隱藏的說明文字不要佔高度 */
html.dkb-course-latest-page .app-course_latest-pageHeader .ext2.fs-hint,
html.dkb-course-hub-page .app-course_latest-pageHeader .ext2.fs-hint {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   左側欄｜第一層項目對齊修正
   修正：全部數位課程 icon / 文字 / 箭頭沒有對齊
========================================================= */

html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  column-gap: 10px !important;
  align-items: center !important;

  min-height: 46px !important;
  padding: 0 8px !important;
}

/* 第一層 LOGO 固定在第一欄 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;

  justify-self: center !important;
  align-self: center !important;
}

/* 第一層文字固定在第二欄 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  min-height: 46px !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* 第一層箭頭固定在第三欄 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle {
  grid-column: 3 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: center !important;
  align-self: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  float: none !important;
  position: static !important;
}

/* 箭頭圖示本身置中 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-tree-toggle .caretIcon,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-tree-toggle .caretIcon {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   左側欄｜第三層整列可點擊視覺
========================================================= */

html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3 {
  cursor: pointer !important;
}

html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover .dkb-level-link-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover .dkb-level-link-3,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3 {
  background: rgba(0, 141, 197, 0.08) !important;
  color: #008dc5 !important;
  text-decoration: none !important;
}

/* =========================================================
   右側標題區｜縮小襯線下方空白
========================================================= */

html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header,
html.dkb-course-hub-page .app-course_latest-pageHeader .fs-page-header {
  padding-top: 18px !important;
  padding-right: 24px !important;
  padding-bottom: 6px !important;
  padding-left: 24px !important;

  margin-bottom: 16px !important;
}

/* h2 不要撐出額外高度 */
html.dkb-course-latest-page .app-course_latest-pageHeader h2,
html.dkb-course-hub-page .app-course_latest-pageHeader h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 標題文字本身 */
html.dkb-course-latest-page .app-course_latest-pageHeader .title,
html.dkb-course-hub-page .app-course_latest-pageHeader .title {
  margin-top: 10px !important;
  padding: 0 !important;

  font-size: 30px !important;
  line-height: 1.25 !important;
}

/* 襯線下方不要再有多餘 margin */
html.dkb-course-latest-page .app-course_latest-pageHeader .title::after,
html.dkb-course-hub-page .app-course_latest-pageHeader .title::after {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* 說明文字徹底不佔高度 */
html.dkb-course-latest-page .app-course_latest-pageHeader .ext2.fs-hint,
html.dkb-course-hub-page .app-course_latest-pageHeader .ext2.fs-hint {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

  /* =========================================================
   左側欄｜第三層 hover：只亮整條，不特別強調文字
========================================================= */

/* 第三層整列 hover 時，只保留背景 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover {
  background: rgba(0, 141, 197, 0.08) !important;
}

/* hover 時文字不要變藍、不要變粗 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover .dkb-level-link-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover .dkb-level-link-3,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3 {
  background: transparent !important;
  color: #536875 !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

/* hover 時小圓點也不要特別變色 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover .dkb-level-link-3::before,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover .dkb-level-link-3::before,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3::before,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3::before {
  background: #9bb3c1 !important;
}

/* =========================================================
   左側欄｜第三層 hover / active 統一成整條反饋
   hover：整條淡藍
   跳轉後 active：整條淡藍 + 左側藍線
   文字本身不另外變藍、不另外變粗
========================================================= */


/* 第三層整列基礎設定 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3 {
  position: relative !important;

  border-radius: 10px !important;
  cursor: pointer !important;

  background: transparent !important;

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease !important;
}


/* hover：整條淡藍 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3 > .dkb-tree-main:hover,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover {
  background: rgba(0, 141, 197, 0.08) !important;
}


/* active：跳轉後目前所在第三層，整條淡藍 + 左側藍線 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main {
  background: rgba(0, 141, 197, 0.08) !important;
  box-shadow: inset 3px 0 0 #008dc5 !important;
}


/* active + hover：維持同樣整條效果 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main:hover,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main:hover {
  background: rgba(0, 141, 197, 0.10) !important;
  box-shadow: inset 3px 0 0 #008dc5 !important;
}


/* 第三層文字本身：一般狀態、hover、active 都不要特別變藍或變粗 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-link-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-link-3,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main .dkb-level-link-3,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main .dkb-level-link-3,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-link-3.dkb-is-current,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-link-3.dkb-is-current {
  background: transparent !important;
  color: #536875 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}


/* 小圓點也不要因 hover / active 變成藍色 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-link-3::before,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-link-3::before,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3::before,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-main-3:hover .dkb-level-link-3::before,
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main .dkb-level-link-3::before,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main .dkb-level-link-3::before {
  background: #9bb3c1 !important;
}

/* =========================================================
   左側欄｜第三層 active 不顯示左側襯線
   第一層保留藍色左線，第三層只保留整條淡藍背景
========================================================= */

html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main {
  background: rgba(0, 141, 197, 0.08) !important;
  box-shadow: none !important;
}

html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main:hover,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-3.dkb-is-current-item > .dkb-tree-main:hover {
  background: rgba(0, 141, 197, 0.10) !important;
  box-shadow: none !important;
}

/* =========================================================
   左側欄｜第一層項目 LOGO / 文字垂直置中修正
   例如：全部數位課程
========================================================= */

/* 第一層整列固定為三欄，並強制垂直置中 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  column-gap: 10px !important;

  align-items: center !important;

  min-height: 46px !important;
  height: 46px !important;

  padding: 0 8px !important;
  margin: 4px 0 !important;

  line-height: 1 !important;
}

/* 第一層 LOGO 欄位置中 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  align-self: center !important;
  justify-self: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
}

/* 第一層 LOGO 圖片置中 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon img,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-item-icon img {
  display: block !important;

  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
}

/* 第一層文字欄位置中 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  min-height: 46px !important;
  height: 46px !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 1.35 !important;

  transform: none !important;
}

/* 第一層文字內部 span 也不要吃到系統舊樣式 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1 span,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-level-link-1 span {
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.35 !important;
  vertical-align: middle !important;
}

/* 第一層箭頭欄位置中 */
html.dkb-course-hub-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle,
html.dkb-course-latest-page #fs-sidebar #courseCategoryMenu .dkb-level-1 > .dkb-tree-main > .dkb-tree-toggle {
  grid-column: 3 !important;
  grid-row: 1 !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  align-self: center !important;
  justify-self: center !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;

  float: none !important;
  position: static !important;
}

/* =========================================================
   右側標題區｜分類標題置中
========================================================= */

html.dkb-course-latest-page .app-course_latest-pageHeader .fs-page-header,
html.dkb-course-hub-page .app-course_latest-pageHeader .fs-page-header {
  text-align: center !important;
}

/* 標題文字置中 */
html.dkb-course-latest-page .app-course_latest-pageHeader .title,
html.dkb-course-hub-page .app-course_latest-pageHeader .title {
  display: inline-block !important;
  text-align: center !important;
}

/* 標題下方襯線也跟著置中 */
html.dkb-course-latest-page .app-course_latest-pageHeader .title::after,
html.dkb-course-hub-page .app-course_latest-pageHeader .title::after {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   我的學習右側標題區
   待修課程 / 已修課程 / 收藏的課程
   樣式比照最新課程右側藍色標題
========================================================= */

/* 標題卡片容器 */
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header {
  position: relative !important;

  margin: 0 0 16px !important;
  padding: 18px 24px 8px !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.08) !important;

  text-align: center !important;
}

/* h2 不要撐出額外高度 */
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header h2,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header h2,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header h2,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header h2,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header h2,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 標題文字 */
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header .title,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header .title,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header .title,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header .title,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header .title,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header .title {
  float: none !important;
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;

  text-align: center !important;
}

/* 標題下方藍色短線 */
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header .title::after,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header .title::after,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header .title::after,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header .title::after,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header .title::after,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header .title::after {
  content: "" !important;
  display: block !important;

  width: 56px !important;
  height: 4px !important;

  margin: 10px auto 0 !important;

  background: #008dc5 !important;
  border-radius: 999px !important;
}

/* 標題右側系統工具先收掉，避免影響置中 */
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header .ext,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header .ext,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header .ext,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header .ext,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header .ext,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header .ext {
  display: none !important;
}

/* 已修課程的說明文字先隱藏，不佔高度 */
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header .ext2.fs-hint,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header .ext2.fs-hint {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 手機版標題也一起套 */
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header-mobile,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header-mobile,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header-mobile,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header-mobile,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header-mobile,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header-mobile {
  position: relative !important;

  margin: 0 0 16px !important;
  padding: 16px 18px 8px !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.075) !important;

  text-align: center !important;
}

html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header-mobile h2,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header-mobile h2,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header-mobile h2,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header-mobile h2,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header-mobile h2,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header-mobile h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header-mobile .title,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header-mobile .title,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header-mobile .title,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header-mobile .title,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header-mobile .title,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header-mobile .title {
  float: none !important;
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;

  text-align: center !important;
}

html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header-mobile .title::after,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header-mobile .title::after,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header-mobile .title::after,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header-mobile .title::after,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header-mobile .title::after,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header-mobile .title::after {
  content: "" !important;
  display: block !important;

  width: 52px !important;
  height: 4px !important;

  margin: 9px auto 0 !important;

  background: #008dc5 !important;
  border-radius: 999px !important;
}

/* 手機版工具與說明文字先不佔標題高度 */
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-page-header-mobile .ext,
html.dkb-course-hub-page .app-course_completeList-show .fs-page-header-mobile .ext,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-page-header-mobile .ext,
html.dkb-course-hub-page .app-course_notCompleteList-show .fs-mobile-tools,
html.dkb-course-hub-page .app-course_completeList-show .fs-mobile-tools,
html.dkb-course-hub-page .app-course_followed-pageHeader .fs-mobile-tools,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-page-header-mobile .ext,
html.dkb-course-latest-page .app-course_completeList-show .fs-page-header-mobile .ext,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-page-header-mobile .ext,
html.dkb-course-latest-page .app-course_notCompleteList-show .fs-mobile-tools,
html.dkb-course-latest-page .app-course_completeList-show .fs-mobile-tools,
html.dkb-course-latest-page .app-course_followed-pageHeader .fs-mobile-tools {
  display: none !important;
}

/* =========================================================
   課程中心｜隱藏篩選按鈕與匯出 Excel
   適用：待修課程 / 已修課程 / 收藏的課程
========================================================= */

/* 隱藏篩選按鈕 */
html.dkb-course-hub-page #fs-content button[name="btn-filter"],
html.dkb-course-latest-page #fs-content button[name="btn-filter"] {
  display: none !important;
}

/* 隱藏已修課程的匯出 Excel */
html.dkb-course-hub-page #fs-content .app-course_completeList-show a[href*="mode=export"],
html.dkb-course-latest-page #fs-content .app-course_completeList-show a[href*="mode=export"] {
  display: none !important;
}

/* =========================================================
   我的學習頁｜右側功能頁標題設計
   適用：待修課程 / 已修課程 / 收藏的課程
========================================================= */

/* 桌機版標題外層 */
#fs-content .app-course_notCompleteList-show .fs-page-header,
#fs-content .app-course_completeList-show .fs-page-header,
#fs-content .app-course_followed-pageHeader .fs-page-header,
.fs-content .app-course_notCompleteList-show .fs-page-header,
.fs-content .app-course_completeList-show .fs-page-header,
.fs-content .app-course_followed-pageHeader .fs-page-header {
  position: relative !important;

  margin: 0 0 20px !important;
  padding: 4px 0 14px 18px !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  text-align: left !important;
}

/* 左側藍色垂直線 */
#fs-content .app-course_notCompleteList-show .fs-page-header::before,
#fs-content .app-course_completeList-show .fs-page-header::before,
#fs-content .app-course_followed-pageHeader .fs-page-header::before,
.fs-content .app-course_notCompleteList-show .fs-page-header::before,
.fs-content .app-course_completeList-show .fs-page-header::before,
.fs-content .app-course_followed-pageHeader .fs-page-header::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  top: 5px !important;

  width: 5px !important;
  height: 30px !important;

  background: linear-gradient(180deg, #008dc5 0%, #36b6df 100%) !important;
  border-radius: 999px !important;
}

/* 清掉系統 h2 預設 */
#fs-content .app-course_notCompleteList-show .fs-page-header h2,
#fs-content .app-course_completeList-show .fs-page-header h2,
#fs-content .app-course_followed-pageHeader .fs-page-header h2,
.fs-content .app-course_notCompleteList-show .fs-page-header h2,
.fs-content .app-course_completeList-show .fs-page-header h2,
.fs-content .app-course_followed-pageHeader .fs-page-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 標題文字 */
#fs-content .app-course_notCompleteList-show .fs-page-header .title,
#fs-content .app-course_completeList-show .fs-page-header .title,
#fs-content .app-course_followed-pageHeader .fs-page-header .title,
.fs-content .app-course_notCompleteList-show .fs-page-header .title,
.fs-content .app-course_completeList-show .fs-page-header .title,
.fs-content .app-course_followed-pageHeader .fs-page-header .title {
  float: none !important;
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;

  text-align: left !important;
}

/* 取消之前可能留下的短藍線 */
#fs-content .app-course_notCompleteList-show .fs-page-header .title::after,
#fs-content .app-course_completeList-show .fs-page-header .title::after,
#fs-content .app-course_followed-pageHeader .fs-page-header .title::after,
.fs-content .app-course_notCompleteList-show .fs-page-header .title::after,
.fs-content .app-course_completeList-show .fs-page-header .title::after,
.fs-content .app-course_followed-pageHeader .fs-page-header .title::after {
  content: none !important;
  display: none !important;
}

/* 標題右側工具收掉，避免破壞標題版面 */
#fs-content .app-course_notCompleteList-show .fs-page-header .ext,
#fs-content .app-course_completeList-show .fs-page-header .ext,
#fs-content .app-course_followed-pageHeader .fs-page-header .ext,
.fs-content .app-course_notCompleteList-show .fs-page-header .ext,
.fs-content .app-course_completeList-show .fs-page-header .ext,
.fs-content .app-course_followed-pageHeader .fs-page-header .ext {
  display: none !important;
}

/* 已修課程的說明文字：改成小型副標，而不是完全擠在標題下 */
#fs-content .app-course_completeList-show .fs-page-header .ext2.fs-hint,
.fs-content .app-course_completeList-show .fs-page-header .ext2.fs-hint {
  display: block !important;

  margin: 7px 0 0 !important;
  padding: 0 !important;

  color: #7b8d98 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* 如果待修或收藏未來也有 ext2，統一副標樣式 */
#fs-content .app-course_notCompleteList-show .fs-page-header .ext2.fs-hint,
#fs-content .app-course_followed-pageHeader .fs-page-header .ext2.fs-hint,
.fs-content .app-course_notCompleteList-show .fs-page-header .ext2.fs-hint,
.fs-content .app-course_followed-pageHeader .fs-page-header .ext2.fs-hint {
  margin: 7px 0 0 !important;
  color: #7b8d98 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* 手機版標題外層 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile,
#fs-content .app-course_completeList-show .fs-page-header-mobile,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile,
.fs-content .app-course_completeList-show .fs-page-header-mobile,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile {
  position: relative !important;

  margin: 0 0 18px !important;
  padding: 4px 0 13px 16px !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  text-align: left !important;
}

/* 手機版左側藍線 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile::before,
#fs-content .app-course_completeList-show .fs-page-header-mobile::before,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile::before,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile::before,
.fs-content .app-course_completeList-show .fs-page-header-mobile::before,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  top: 5px !important;

  width: 5px !important;
  height: 27px !important;

  background: linear-gradient(180deg, #008dc5 0%, #36b6df 100%) !important;
  border-radius: 999px !important;
}

/* 手機版 h2 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile h2,
#fs-content .app-course_completeList-show .fs-page-header-mobile h2,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile h2,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile h2,
.fs-content .app-course_completeList-show .fs-page-header-mobile h2,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 手機版標題文字 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile .title,
#fs-content .app-course_completeList-show .fs-page-header-mobile .title,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile .title,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile .title,
.fs-content .app-course_completeList-show .fs-page-header-mobile .title,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile .title {
  float: none !important;
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 23px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;

  text-align: left !important;
}

/* 手機版取消短線 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile .title::after,
#fs-content .app-course_completeList-show .fs-page-header-mobile .title::after,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile .title::after,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile .title::after,
.fs-content .app-course_completeList-show .fs-page-header-mobile .title::after,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile .title::after {
  content: none !important;
  display: none !important;
}

/* 手機版工具收掉 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile .ext,
#fs-content .app-course_completeList-show .fs-page-header-mobile .ext,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile .ext,
#fs-content .app-course_notCompleteList-show .fs-mobile-tools,
#fs-content .app-course_completeList-show .fs-mobile-tools,
#fs-content .app-course_followed-pageHeader .fs-mobile-tools,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile .ext,
.fs-content .app-course_completeList-show .fs-page-header-mobile .ext,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile .ext,
.fs-content .app-course_notCompleteList-show .fs-mobile-tools,
.fs-content .app-course_completeList-show .fs-mobile-tools,
.fs-content .app-course_followed-pageHeader .fs-mobile-tools {
  display: none !important;
}

/* =========================================================
   我的學習頁｜下方內容區塊統一樣式
   適用：待修課程 / 已修課程 / 收藏的課程
========================================================= */

/* ================================
   已修課程｜統計卡片
================================ */

#fs-content .app-course_completeList-show .fs-report,
.fs-content .app-course_completeList-show .fs-report {
  margin: 0 0 22px !important;
}

#fs-content .app-course_completeList-show .fs-report > div,
.fs-content .app-course_completeList-show .fs-report > div {
  margin-bottom: 12px !important;
}

#fs-content .app-course_completeList-show .fs-report .report,
.fs-content .app-course_completeList-show .fs-report .report {
  min-height: 96px !important;

  padding: 18px 18px 16px !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.055) !important;
}

#fs-content .app-course_completeList-show .fs-report .report .title,
.fs-content .app-course_completeList-show .fs-report .report .title {
  margin: 0 0 8px !important;

  color: #6f8390 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

#fs-content .app-course_completeList-show .fs-report .report .title .fs-iconfont,
.fs-content .app-course_completeList-show .fs-report .report .title .fs-iconfont {
  color: #008dc5 !important;
  margin-right: 5px !important;
}

#fs-content .app-course_completeList-show .fs-report .report .number,
.fs-content .app-course_completeList-show .fs-report .report .number {
  color: #17384d !important;
  font-size: 30px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

#fs-content .app-course_completeList-show .fs-report .report .fs-small,
.fs-content .app-course_completeList-show .fs-report .report .fs-small {
  color: #6f8390 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}


/* ================================
   搜尋 / 篩選區塊
================================ */

#fs-content .app-course_notCompleteList-show .filter,
#fs-content .app-course_completeList-show .filter,
.fs-content .app-course_notCompleteList-show .filter,
.fs-content .app-course_completeList-show .filter {
  margin: 0 0 18px !important;
  padding: 16px 18px !important;

  background: #f8fbfd !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* 搜尋框 */
#fs-content .app-course_notCompleteList-show .filter .input-group.search .form-control,
#fs-content .app-course_completeList-show .filter .input-group.search .form-control,
.fs-content .app-course_notCompleteList-show .filter .input-group.search .form-control,
.fs-content .app-course_completeList-show .filter .input-group.search .form-control {
  height: 38px !important;

  color: #17384d !important;
  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;

  box-shadow: none !important;
}

#fs-content .app-course_notCompleteList-show .filter .input-group.search .form-control:focus,
#fs-content .app-course_completeList-show .filter .input-group.search .form-control:focus,
.fs-content .app-course_notCompleteList-show .filter .input-group.search .form-control:focus,
.fs-content .app-course_completeList-show .filter .input-group.search .form-control:focus {
  border-color: #8ccfe7 !important;
  box-shadow: 0 0 0 3px rgba(0, 141, 197, 0.10) !important;
}

/* 搜尋按鈕 */
#fs-content .app-course_notCompleteList-show .filter .input-group.search .btn,
#fs-content .app-course_completeList-show .filter .input-group.search .btn,
.fs-content .app-course_notCompleteList-show .filter .input-group.search .btn,
.fs-content .app-course_completeList-show .filter .input-group.search .btn {
  height: 38px !important;

  color: #ffffff !important;
  background: #008dc5 !important;

  border: 1px solid #008dc5 !important;
  border-radius: 0 10px 10px 0 !important;

  box-shadow: none !important;
}

#fs-content .app-course_notCompleteList-show .filter .input-group.search .btn:hover,
#fs-content .app-course_completeList-show .filter .input-group.search .btn:hover,
.fs-content .app-course_notCompleteList-show .filter .input-group.search .btn:hover,
.fs-content .app-course_completeList-show .filter .input-group.search .btn:hover {
  background: #0079aa !important;
  border-color: #0079aa !important;
}

/* 表單 label / select */
#fs-content .app-course_notCompleteList-show .filter .control-label,
#fs-content .app-course_completeList-show .filter .control-label,
.fs-content .app-course_notCompleteList-show .filter .control-label,
.fs-content .app-course_completeList-show .filter .control-label {
  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#fs-content .app-course_notCompleteList-show .filter select.form-control,
#fs-content .app-course_completeList-show .filter select.form-control,
.fs-content .app-course_notCompleteList-show .filter select.form-control,
.fs-content .app-course_completeList-show .filter select.form-control {
  height: 38px !important;

  color: #17384d !important;
  background-color: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 10px !important;

  box-shadow: none !important;
}

/* 共幾筆 */
#fs-content .app-course_notCompleteList-show .filter .filter-attr,
#fs-content .app-course_completeList-show .filter .filter-attr,
.fs-content .app-course_notCompleteList-show .filter .filter-attr,
.fs-content .app-course_completeList-show .filter .filter-attr {
  margin-top: 12px !important;
  color: #7b8d98 !important;
  font-size: 13px !important;
}


/* ================================
   已修 / 待修｜表格
================================ */

#fs-content .app-course_notCompleteList-show .fs-table,
#fs-content .app-course_completeList-show .fs-table,
.fs-content .app-course_notCompleteList-show .fs-table,
.fs-content .app-course_completeList-show .fs-table {
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;
}

#fs-content .app-course_notCompleteList-show .fs-table .table,
#fs-content .app-course_completeList-show .fs-table .table,
.fs-content .app-course_notCompleteList-show .fs-table .table,
.fs-content .app-course_completeList-show .fs-table .table {
  margin-bottom: 0 !important;
}

#fs-content .app-course_notCompleteList-show .fs-table thead tr,
#fs-content .app-course_completeList-show .fs-table thead tr,
.fs-content .app-course_notCompleteList-show .fs-table thead tr,
.fs-content .app-course_completeList-show .fs-table thead tr {
  background: #f4f9fc !important;
}

#fs-content .app-course_notCompleteList-show .fs-table thead th,
#fs-content .app-course_completeList-show .fs-table thead th,
.fs-content .app-course_notCompleteList-show .fs-table thead th,
.fs-content .app-course_completeList-show .fs-table thead th {
  padding: 13px 12px !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 750 !important;

  border-bottom: 1px solid #e5edf2 !important;
}

#fs-content .app-course_notCompleteList-show .fs-table tbody td,
#fs-content .app-course_completeList-show .fs-table tbody td,
.fs-content .app-course_notCompleteList-show .fs-table tbody td,
.fs-content .app-course_completeList-show .fs-table tbody td {
  padding: 13px 12px !important;

  color: #17384d !important;
  font-size: 14px !important;

  border-top: 1px solid #eef3f6 !important;
}

#fs-content .app-course_notCompleteList-show .fs-table tbody tr:hover,
#fs-content .app-course_completeList-show .fs-table tbody tr:hover,
.fs-content .app-course_notCompleteList-show .fs-table tbody tr:hover,
.fs-content .app-course_completeList-show .fs-table tbody tr:hover {
  background: #f8fbfd !important;
}

#fs-content .app-course_notCompleteList-show .fs-table a,
#fs-content .app-course_completeList-show .fs-table a,
.fs-content .app-course_notCompleteList-show .fs-table a,
.fs-content .app-course_completeList-show .fs-table a {
  color: #17384d !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

#fs-content .app-course_notCompleteList-show .fs-table a:hover,
#fs-content .app-course_completeList-show .fs-table a:hover,
.fs-content .app-course_notCompleteList-show .fs-table a:hover,
.fs-content .app-course_completeList-show .fs-table a:hover {
  color: #008dc5 !important;
}


/* ================================
   收藏的課程｜清單區塊
================================ */

#fs-content .mod_follower-courseFollowed #courseFollowedXtree,
.fs-content .mod_follower-courseFollowed #courseFollowedXtree {
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;
}

/* 收藏列表表頭 */
#fs-content .mod_follower-courseFollowed .list-header,
.fs-content .mod_follower-courseFollowed .list-header {
  padding: 13px 16px !important;

  color: #526b7a !important;
  background: #f4f9fc !important;

  border-bottom: 1px solid #e5edf2 !important;
}

/* 收藏列表項目 */
#fs-content .mod_follower-courseFollowed .xtree-list,
.fs-content .mod_follower-courseFollowed .xtree-list {
  margin: 0 !important;
  padding: 0 !important;
}

#fs-content .mod_follower-courseFollowed .xtree-node .header,
.fs-content .mod_follower-courseFollowed .xtree-node .header {
  padding: 13px 16px !important;

  background: #ffffff !important;
  border-top: 1px solid #eef3f6 !important;
}

#fs-content .mod_follower-courseFollowed .xtree-node:first-child .header,
.fs-content .mod_follower-courseFollowed .xtree-node:first-child .header {
  border-top: 0 !important;
}

#fs-content .mod_follower-courseFollowed .xtree-node .header:hover,
.fs-content .mod_follower-courseFollowed .xtree-node .header:hover {
  background: #f8fbfd !important;
}

#fs-content .mod_follower-courseFollowed .node-title a,
.fs-content .mod_follower-courseFollowed .node-title a {
  color: #17384d !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

#fs-content .mod_follower-courseFollowed .node-title a:hover,
.fs-content .mod_follower-courseFollowed .node-title a:hover {
  color: #008dc5 !important;
}

/* =========================================================
   我的學習頁｜移除右側最外層白色框
   適用：待修課程 / 已修課程 / 收藏的課程
========================================================= */

/* 右側內容主要外層：移除白底、邊框、陰影 */
#fs-content,
#fs-content > .row,
#fs-content > .row > .col-xs-12,
#fs-content #xbox,
#fs-content #xbox-inline,
#fs-content #xbox-front,
#fs-content #xbox-rear,
#fs-content .module.app-course_notCompleteList,
#fs-content .module.app-course_completeList,
#fs-content .module.app-course_followed,
#fs-content .module.mod_follower {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 真的承載內容的模組也不要白色外框 */
#fs-content .app-course_notCompleteList-show,
#fs-content .app-course_completeList-show,
#fs-content .app-course_followed-pageHeader,
#fs-content .mod_follower-courseFollowed {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 如果 XMS+ 在模組上有 padding，這裡把外層多餘留白收掉 */
#fs-content #xbox-inline {
  padding: 0 !important;
}


/* =========================================================
   我的學習頁｜待修 / 已修表格平面化
========================================================= */

#fs-content .app-course_notCompleteList-show .fs-table,
#fs-content .app-course_completeList-show .fs-table,
#fs-content .app-course_notCompleteList-show .fs-table-responsive,
#fs-content .app-course_completeList-show .fs-table-responsive,
#fs-content .app-course_notCompleteList-show .tableWidth,
#fs-content .app-course_completeList-show .tableWidth {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* 表格本體不要外框 */
#fs-content .app-course_notCompleteList-show table.table,
#fs-content .app-course_completeList-show table.table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  margin-bottom: 0 !important;
}

/* 表頭 */
#fs-content .app-course_notCompleteList-show table.table thead tr,
#fs-content .app-course_completeList-show table.table thead tr {
  background: #f4f9fc !important;
}

#fs-content .app-course_notCompleteList-show table.table thead th,
#fs-content .app-course_completeList-show table.table thead th {
  padding: 13px 12px !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 750 !important;

  background: #f4f9fc !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
}

/* 內容列 */
#fs-content .app-course_notCompleteList-show table.table tbody td,
#fs-content .app-course_completeList-show table.table tbody td {
  padding: 13px 12px !important;

  color: #17384d !important;
  font-size: 14px !important;

  background: transparent !important;
  border-top: 1px solid #eef3f6 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* hover */
#fs-content .app-course_notCompleteList-show table.table-hover tbody tr:hover td,
#fs-content .app-course_completeList-show table.table-hover tbody tr:hover td {
  background: #f8fbfd !important;
}


/* =========================================================
   我的學習頁｜修正「類別」欄位被擠成 ...
========================================================= */

/* 時數欄固定小一點 */
#fs-content .app-course_notCompleteList-show table.table .col-hour,
#fs-content .app-course_completeList-show table.table .col-hour,
#fs-content .app-course_notCompleteList-show table.table th.col-hour,
#fs-content .app-course_completeList-show table.table th.col-hour,
#fs-content .app-course_notCompleteList-show table.table td.col-hour,
#fs-content .app-course_completeList-show table.table td.col-hour {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
}

/* 類別欄給足寬度 */
#fs-content .app-course_notCompleteList-show table.table .col-category,
#fs-content .app-course_completeList-show table.table .col-category,
#fs-content .app-course_notCompleteList-show table.table th.col-category,
#fs-content .app-course_completeList-show table.table th.col-category,
#fs-content .app-course_notCompleteList-show table.table td.col-category,
#fs-content .app-course_completeList-show table.table td.col-category {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 190px !important;
}

/* 類別文字不要省略成 ... */
#fs-content .app-course_notCompleteList-show table.table td.col-category .text-overflow,
#fs-content .app-course_completeList-show table.table td.col-category .text-overflow {
  max-width: none !important;
  width: auto !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* 類別 span 也不要省略 */
#fs-content .app-course_notCompleteList-show table.table td.col-category span,
#fs-content .app-course_completeList-show table.table td.col-category span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* 課程名稱可以保留彈性，不要被類別欄擠爆 */
#fs-content .app-course_notCompleteList-show table.table td[colspan="2"],
#fs-content .app-course_completeList-show table.table td[colspan="2"] {
  width: auto !important;
}

/* =========================================================
   我的學習頁｜保留內容白色圓角框，優化表格內部
   適用：待修課程 / 已修課程
========================================================= */

/* 保留表格內容的白底圓角框 */
#fs-content .app-course_notCompleteList-show .fs-table,
#fs-content .app-course_completeList-show .fs-table,
.fs-content .app-course_notCompleteList-show .fs-table,
.fs-content .app-course_completeList-show .fs-table {
  overflow: hidden !important;

  margin: 0 0 20px !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;
}

/* 中間容器不要額外再產生第二層框 */
#fs-content .app-course_notCompleteList-show .fs-table-responsive,
#fs-content .app-course_completeList-show .fs-table-responsive,
#fs-content .app-course_notCompleteList-show .tableWidth,
#fs-content .app-course_completeList-show .tableWidth,
.fs-content .app-course_notCompleteList-show .fs-table-responsive,
.fs-content .app-course_completeList-show .fs-table-responsive,
.fs-content .app-course_notCompleteList-show .tableWidth,
.fs-content .app-course_completeList-show .tableWidth {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 表格本體 */
#fs-content .app-course_notCompleteList-show table.table,
#fs-content .app-course_completeList-show table.table,
.fs-content .app-course_notCompleteList-show table.table,
.fs-content .app-course_completeList-show table.table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;

  margin-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 表頭 */
#fs-content .app-course_notCompleteList-show table.table thead tr,
#fs-content .app-course_completeList-show table.table thead tr,
.fs-content .app-course_notCompleteList-show table.table thead tr,
.fs-content .app-course_completeList-show table.table thead tr {
  background: #f4f9fc !important;
}

#fs-content .app-course_notCompleteList-show table.table thead th,
#fs-content .app-course_completeList-show table.table thead th,
.fs-content .app-course_notCompleteList-show table.table thead th,
.fs-content .app-course_completeList-show table.table thead th {
  padding: 14px 12px !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 750 !important;

  background: #f4f9fc !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
}

/* 內容列 */
#fs-content .app-course_notCompleteList-show table.table tbody td,
#fs-content .app-course_completeList-show table.table tbody td,
.fs-content .app-course_notCompleteList-show table.table tbody td,
.fs-content .app-course_completeList-show table.table tbody td {
  padding: 14px 12px !important;

  color: #17384d !important;
  font-size: 14px !important;

  background: #ffffff !important;
  border-top: 1px solid #eef3f6 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* hover */
#fs-content .app-course_notCompleteList-show table.table-hover tbody tr:hover td,
#fs-content .app-course_completeList-show table.table-hover tbody tr:hover td,
.fs-content .app-course_notCompleteList-show table.table-hover tbody tr:hover td,
.fs-content .app-course_completeList-show table.table-hover tbody tr:hover td {
  background: #f8fbfd !important;
}

/* 課程名稱 */
#fs-content .app-course_notCompleteList-show table.table td[colspan="2"] a,
#fs-content .app-course_completeList-show table.table td[colspan="2"] a,
.fs-content .app-course_notCompleteList-show table.table td[colspan="2"] a,
.fs-content .app-course_completeList-show table.table td[colspan="2"] a {
  color: #002b45 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#fs-content .app-course_notCompleteList-show table.table td[colspan="2"] a:hover,
#fs-content .app-course_completeList-show table.table td[colspan="2"] a:hover,
.fs-content .app-course_notCompleteList-show table.table td[colspan="2"] a:hover,
.fs-content .app-course_completeList-show table.table td[colspan="2"] a:hover {
  color: #008dc5 !important;
}

/* =========================================================
   已修課程｜統計摘要列新版
   取代原本四張小卡片
========================================================= */

/* 移除 Bootstrap row 的 clearfix，避免 Grid 排版被擠歪 */
#fs-content .app-course_completeList-show .fs-report.default.row::before,
#fs-content .app-course_completeList-show .fs-report.default.row::after,
.fs-content .app-course_completeList-show .fs-report.default.row::before,
.fs-content .app-course_completeList-show .fs-report.default.row::after {
  content: none !important;
  display: none !important;
}

/* 外層改成一整條白色圓角統計列 */
#fs-content .app-course_completeList-show .fs-report,
.fs-content .app-course_completeList-show .fs-report {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;

  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;

  overflow: hidden !important;
}

/* 徹底取消 Bootstrap col 欄寬 */
#fs-content .app-course_completeList-show .fs-report > div,
.fs-content .app-course_completeList-show .fs-report > div {
  float: none !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* 每一格統計項目 */
#fs-content .app-course_completeList-show .fs-report .report,
.fs-content .app-course_completeList-show .fs-report .report {
  position: relative !important;

  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 6px !important;
  align-items: center !important;

  min-height: 92px !important;
  height: 100% !important;

  padding: 18px 20px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 每格之間的淡分隔線 */
#fs-content .app-course_completeList-show .fs-report > div + div .report,
.fs-content .app-course_completeList-show .fs-report > div + div .report {
  border-left: 1px solid #eef3f6 !important;
}

/* 移除舊版卡片上方藍線 */
#fs-content .app-course_completeList-show .fs-report .report::before,
.fs-content .app-course_completeList-show .fs-report .report::before {
  content: none !important;
  display: none !important;
}

/* 小標題 */
#fs-content .app-course_completeList-show .fs-report .report .title,
.fs-content .app-course_completeList-show .fs-report .report .title {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
}

/* icon 圓底 */
#fs-content .app-course_completeList-show .fs-report .report .title .fs-iconfont,
.fs-content .app-course_completeList-show .fs-report .report .title .fs-iconfont {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 26px !important;
  height: 26px !important;

  margin-right: 8px !important;

  color: #008dc5 !important;
  background: rgba(0, 141, 197, 0.09) !important;
  border-radius: 999px !important;

  font-size: 13px !important;
}

/* 數字 */
#fs-content .app-course_completeList-show .fs-report .report .number,
.fs-content .app-course_completeList-show .fs-report .report .number {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;

  display: block !important;

  margin: 0 !important;

  color: #17384d !important;
  font-size: 30px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

/* 百分比小字 */
#fs-content .app-course_completeList-show .fs-report .report .fs-small,
.fs-content .app-course_completeList-show .fs-report .report .fs-small {
  color: #6f8390 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  margin-left: 2px !important;
}

/* hover：只做很淡的底色，不浮起 */
#fs-content .app-course_completeList-show .fs-report .report:hover,
.fs-content .app-course_completeList-show .fs-report .report:hover {
  background: #f8fbfd !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 平板：兩欄 */
@media (max-width: 991px) {
  #fs-content .app-course_completeList-show .fs-report,
  .fs-content .app-course_completeList-show .fs-report {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fs-content .app-course_completeList-show .fs-report > div:nth-child(3) .report,
  .fs-content .app-course_completeList-show .fs-report > div:nth-child(3) .report {
    border-left: 0 !important;
    border-top: 1px solid #eef3f6 !important;
  }

  #fs-content .app-course_completeList-show .fs-report > div:nth-child(4) .report,
  .fs-content .app-course_completeList-show .fs-report > div:nth-child(4) .report {
    border-top: 1px solid #eef3f6 !important;
  }
}

/* 手機：一欄 */
@media (max-width: 575px) {
  #fs-content .app-course_completeList-show .fs-report,
  .fs-content .app-course_completeList-show .fs-report {
    grid-template-columns: 1fr !important;
  }

  #fs-content .app-course_completeList-show .fs-report > div .report,
  .fs-content .app-course_completeList-show .fs-report > div .report {
    border-left: 0 !important;
    border-top: 1px solid #eef3f6 !important;
  }

  #fs-content .app-course_completeList-show .fs-report > div:first-child .report,
  .fs-content .app-course_completeList-show .fs-report > div:first-child .report {
    border-top: 0 !important;
  }
}

/* =========================================================
   已修課程｜列印按鈕移到通過狀態右側
========================================================= */

#fs-content .app-course_completeList-show #assert,
.fs-content .app-course_completeList-show #assert {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

#fs-content .app-course_completeList-show .dkb-complete-print-wrap,
.fs-content .app-course_completeList-show .dkb-complete-print-wrap {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

#fs-content .app-course_completeList-show .dkb-complete-print-btn,
.fs-content .app-course_completeList-show .dkb-complete-print-btn {
  height: 38px !important;
  padding: 8px 14px !important;

  color: #526b7a !important;
  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 10px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

#fs-content .app-course_completeList-show .dkb-complete-print-btn:hover,
.fs-content .app-course_completeList-show .dkb-complete-print-btn:hover {
  color: #008dc5 !important;
  border-color: #8ccfe7 !important;
  background: #f8fbfd !important;
}

#fs-content .app-course_completeList-show .dkb-hide-empty-print-container,
.fs-content .app-course_completeList-show .dkb-hide-empty-print-container {
  display: none !important;
}


/* =========================================================
   已修課程｜隱藏搜尋條件 / 共幾筆提示
========================================================= */

#fs-content .app-course_completeList-show .filter .filter-attr,
#fs-content .app-course_completeList-show .filter .fs-attrExtText,
.fs-content .app-course_completeList-show .filter .filter-attr,
.fs-content .app-course_completeList-show .filter .fs-attrExtText {
  display: none !important;
}

/* =========================================================
   已修課程｜通過狀態 label 與下拉選單間距
========================================================= */

#fs-content .app-course_completeList-show #assert,
.fs-content .app-course_completeList-show #assert {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-right: 14px !important;
}

#fs-content .app-course_completeList-show #assert .control-label,
.fs-content .app-course_completeList-show #assert .control-label {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

#fs-content .app-course_completeList-show #assert select,
.fs-content .app-course_completeList-show #assert select {
  margin-left: 0 !important;
}

/* =========================================================
   已修課程｜列印按鈕對齊修正
========================================================= */

#fs-content .app-course_completeList-show .dkb-complete-print-wrap,
.fs-content .app-course_completeList-show .dkb-complete-print-wrap {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 16px !important;
}

#fs-content .app-course_completeList-show .dkb-complete-print-btn,
.fs-content .app-course_completeList-show .dkb-complete-print-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 38px !important;
  min-height: 38px !important;

  padding: 0 14px !important;
  margin: 0 !important;

  color: #526b7a !important;
  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 10px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  box-shadow: none !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}

/* 讓 span 本身也垂直置中 */
#fs-content .app-course_completeList-show .dkb-complete-print-btn .text,
.fs-content .app-course_completeList-show .dkb-complete-print-btn .text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 100% !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* hover */
#fs-content .app-course_completeList-show .dkb-complete-print-btn:hover,
.fs-content .app-course_completeList-show .dkb-complete-print-btn:hover {
  color: #008dc5 !important;
  border-color: #8ccfe7 !important;
  background: #f8fbfd !important;
}

/* =========================================================
   我的學習頁｜移除右側標題底線
   適用：待修課程 / 已修課程 / 收藏的課程
========================================================= */

/* 桌機版：移除標題區底線 */
#fs-content .app-course_notCompleteList-show .fs-page-header,
#fs-content .app-course_completeList-show .fs-page-header,
#fs-content .app-course_followed-pageHeader .fs-page-header,
.fs-content .app-course_notCompleteList-show .fs-page-header,
.fs-content .app-course_completeList-show .fs-page-header,
.fs-content .app-course_followed-pageHeader .fs-page-header {
  border-bottom: 0 !important;
}

/* 桌機版：移除 h2 可能帶的底線 */
#fs-content .app-course_notCompleteList-show .fs-page-header h2,
#fs-content .app-course_completeList-show .fs-page-header h2,
#fs-content .app-course_followed-pageHeader .fs-page-header h2,
.fs-content .app-course_notCompleteList-show .fs-page-header h2,
.fs-content .app-course_completeList-show .fs-page-header h2,
.fs-content .app-course_followed-pageHeader .fs-page-header h2 {
  border-bottom: 0 !important;
  box-shadow: none !important;
}


/* 桌機版：移除 title 後方可能生成的線 */
#fs-content .app-course_notCompleteList-show .fs-page-header .title::after,
#fs-content .app-course_completeList-show .fs-page-header .title::after,
#fs-content .app-course_followed-pageHeader .fs-page-header .title::after,
.fs-content .app-course_notCompleteList-show .fs-page-header .title::after,
.fs-content .app-course_completeList-show .fs-page-header .title::after,
.fs-content .app-course_followed-pageHeader .fs-page-header .title::after {
  content: none !important;
  display: none !important;
}

/* 手機版：移除標題區底線 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile,
#fs-content .app-course_completeList-show .fs-page-header-mobile,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile,
.fs-content .app-course_completeList-show .fs-page-header-mobile,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile {
  border-bottom: 0 !important;
}

/* 手機版：移除 h2 可能帶的底線 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile h2,
#fs-content .app-course_completeList-show .fs-page-header-mobile h2,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile h2,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile h2,
.fs-content .app-course_completeList-show .fs-page-header-mobile h2,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile h2 {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* 手機版：移除 title 後方可能生成的線 */
#fs-content .app-course_notCompleteList-show .fs-page-header-mobile .title::after,
#fs-content .app-course_completeList-show .fs-page-header-mobile .title::after,
#fs-content .app-course_followed-pageHeader .fs-page-header-mobile .title::after,
.fs-content .app-course_notCompleteList-show .fs-page-header-mobile .title::after,
.fs-content .app-course_completeList-show .fs-page-header-mobile .title::after,
.fs-content .app-course_followed-pageHeader .fs-page-header-mobile .title::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   最新課程｜降低右側標題卡高度
========================================================= */

#fs-content .app-course_latest-pageHeader .fs-page-header,
.fs-content .app-course_latest-pageHeader .fs-page-header {
  min-height: 0 !important;

  margin: 0 0 16px !important;
  padding: 22px 24px 20px !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;

  text-align: center !important;
}

/* h2 不要撐高 */
#fs-content .app-course_latest-pageHeader .fs-page-header h2,
.fs-content .app-course_latest-pageHeader .fs-page-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 標題文字降低一點 */
#fs-content .app-course_latest-pageHeader .fs-page-header .title,
.fs-content .app-course_latest-pageHeader .fs-page-header .title {
  float: none !important;
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #00324f !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}

/* 底下藍色短線縮短間距 */
#fs-content .app-course_latest-pageHeader .fs-page-header .title::after,
.fs-content .app-course_latest-pageHeader .fs-page-header .title::after {
  content: "" !important;
  display: block !important;

  width: 44px !important;
  height: 4px !important;

  margin: 10px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}

/* 隱藏副資訊，不讓它撐高度 */
#fs-content .app-course_latest-pageHeader .fs-page-header .ext,
#fs-content .app-course_latest-pageHeader .fs-page-header .ext2,
#fs-content .app-course_latest-pageHeader .fs-page-header .fs-hint,
.fs-content .app-course_latest-pageHeader .fs-page-header .ext,
.fs-content .app-course_latest-pageHeader .fs-page-header .ext2,
.fs-content .app-course_latest-pageHeader .fs-page-header .fs-hint {
  display: none !important;
}


/* =========================================================
   已修課程｜隱藏底部原生列印區與說明文字
========================================================= */

#fs-content .app-course_completeList-show .dkb-hide-empty-print-container,
.fs-content .app-course_completeList-show .dkb-hide-empty-print-container,
#fs-content .app-course_completeList-show .fs-p,
.fs-content .app-course_completeList-show .fs-p {
  display: none !important;
}

#fs-content .app-course_completeList-show .dkb-hide-filter-note,
.fs-content .app-course_completeList-show .dkb-hide-filter-note,
#fs-content .app-course_completeList-show .filter .filter-attr,
.fs-content .app-course_completeList-show .filter .filter-attr,
#fs-content .app-course_completeList-show .filter .fs-attrExtText,
.fs-content .app-course_completeList-show .filter .fs-attrExtText {
  display: none !important;
}

html.dkb-course-hub-page .dkb-hide-course-hint-text,
html.dkb-course-latest-page .dkb-hide-course-hint-text,
#fs-content .dkb-hide-course-hint-text,
.fs-content .dkb-hide-course-hint-text {
  display: none !important;
}

/* =========================================================
   列印頁｜我的學習風格橫向報表版
========================================================= */

/* 強制橫向列印 */
@page {
  size: A4 landscape;
  margin: 10mm;
}

html.dkb-styled-print-page,
html.dkb-styled-print-page body {
  margin: 0 !important;
  padding: 0 !important;
  background: #f4f9fc !important;
  color: #17384d !important;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", "微軟正黑體", sans-serif !important;
}

html.dkb-styled-print-page * {
  box-sizing: border-box !important;
}

/* =========================================================
   外層容器
========================================================= */

html.dkb-styled-print-page #fs-media-content {
  width: 100% !important;
  max-width: 1160px !important;
  margin: 22px auto !important;
  padding: 0 20px !important;
  background: transparent !important;
}

html.dkb-styled-print-page #fs-media-content > .row,
html.dkb-styled-print-page #fs-media-content .col-xs-12,
html.dkb-styled-print-page #xbox,
html.dkb-styled-print-page #xbox-inline {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.dkb-styled-print-page .app-course_completeList-show {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 隱藏不需要的原生區塊 */
html.dkb-styled-print-page .modal,
html.dkb-styled-print-page #xbox-front,
html.dkb-styled-print-page #xbox-rear,
html.dkb-styled-print-page .fs-page-header-mobile,
html.dkb-styled-print-page .fs-textList.fs-hint,
html.dkb-styled-print-page .dkb-hide-course-hint-text {
  display: none !important;
}

/* =========================================================
   平台名稱
========================================================= */

html.dkb-styled-print-page .app-course_completeList-show > div[style*="font-size"] {
  display: block !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  color: #00324f !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
}

/* =========================================================
   使用者資料卡
========================================================= */

html.dkb-styled-print-page .app-course_completeList-show > .fs-p {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dkb-styled-print-page .fs-attrList,
html.dkb-styled-print-page .fs-attrList.fs-border {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 22px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 18px 20px !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-left: 5px solid #35bfd0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;
}

html.dkb-styled-print-page .fs-attrList .clearfix {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  align-items: baseline !important;
  column-gap: 8px !important;

  float: none !important;
  clear: none !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dkb-styled-print-page .fs-attrList .clearfix::before,
html.dkb-styled-print-page .fs-attrList .clearfix::after {
  content: none !important;
  display: none !important;
}

html.dkb-styled-print-page .fs-attrList .attr {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;

  text-align: right !important;
  white-space: nowrap !important;
}

html.dkb-styled-print-page .fs-attrList .value {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;

  white-space: normal !important;
  word-break: break-word !important;
}

/* =========================================================
   標題：我的學習頁風格
========================================================= */

html.dkb-styled-print-page .fs-page-header {
  display: block !important;
  position: relative !important;

  margin: 0 0 16px !important;
  padding: 2px 0 14px 18px !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  text-align: left !important;
}

html.dkb-styled-print-page .fs-page-header::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  top: 2px !important;

  width: 5px !important;
  height: 30px !important;

  background: linear-gradient(180deg, #008dc5 0%, #35bfd0 100%) !important;
  border-radius: 999px !important;
}

html.dkb-styled-print-page .fs-page-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html.dkb-styled-print-page .fs-page-header .title {
  float: none !important;
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
}

html.dkb-styled-print-page .fs-page-header .title::after {
  content: none !important;
  display: none !important;
}

html.dkb-styled-print-page .fs-page-header .ext2 {
  display: none !important;
}

/* =========================================================
   統計摘要：單一白底摘要列
========================================================= */

html.dkb-styled-print-page .fs-report::before,
html.dkb-styled-print-page .fs-report::after,
html.dkb-styled-print-page .fs-report.row::before,
html.dkb-styled-print-page .fs-report.row::after {
  content: none !important;
  display: none !important;
}

html.dkb-styled-print-page .fs-report {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;

  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;
  overflow: hidden !important;
}

html.dkb-styled-print-page .fs-report > div {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

html.dkb-styled-print-page .fs-report .report {
  position: relative !important;

  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;

  height: 82px !important;
  min-height: 82px !important;

  margin: 0 !important;
  padding: 14px 18px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.dkb-styled-print-page .fs-report > div + div .report {
  border-left: 1px solid #eef3f6 !important;
}

html.dkb-styled-print-page .fs-report .report .title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 0 6px !important;
  padding: 0 !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

html.dkb-styled-print-page .fs-report .report .title .fs-iconfont {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px !important;
  height: 24px !important;

  margin-right: 8px !important;

  color: #008dc5 !important;
  background: rgba(0, 141, 197, 0.09) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

html.dkb-styled-print-page .fs-report .report .number {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 30px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: left !important;
}

html.dkb-styled-print-page .fs-report .report .fs-small {
  color: #6f8390 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  margin-left: 2px !important;
}

/* =========================================================
   表格：我的學習頁白底圓角卡片
========================================================= */

html.dkb-styled-print-page .fs-table {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  background: #ffffff !important;

  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 58, 78, 0.045) !important;
}

html.dkb-styled-print-page .fs-table-responsive,
html.dkb-styled-print-page .tableWidth {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dkb-styled-print-page table,
html.dkb-styled-print-page table.table,
html.dkb-styled-print-page #completeListTable {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;

  table-layout: auto !important;
  border-collapse: collapse !important;

  background: #ffffff !important;
  border: 0 !important;
}

html.dkb-styled-print-page thead tr,
html.dkb-styled-print-page thead th {
  background: #f4f9fc !important;
}

html.dkb-styled-print-page thead th {
  padding: 13px 10px !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;

  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
  white-space: nowrap !important;
}

html.dkb-styled-print-page tbody td {
  padding: 13px 10px !important;

  color: #17384d !important;
  font-size: 13px !important;
  line-height: 1.45 !important;

  background: #ffffff !important;
  border: 0 !important;
  border-top: 1px solid #eef3f6 !important;
  vertical-align: middle !important;
}

html.dkb-styled-print-page tbody tr:first-child td {
  border-top: 0 !important;
}

html.dkb-styled-print-page table a {
  color: #00324f !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html.dkb-styled-print-page .text-overflow,
html.dkb-styled-print-page .sm-text-overflow {
  max-width: none !important;
  width: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 表格欄寬 */
html.dkb-styled-print-page .col-name {
  width: 88px !important;
}

html.dkb-styled-print-page .col-category {
  width: 128px !important;
}

html.dkb-styled-print-page .col-hour {
  width: 52px !important;
}

html.dkb-styled-print-page .col-date {
  width: 92px !important;
}

html.dkb-styled-print-page .col-char4 {
  width: 72px !important;
}

html.dkb-styled-print-page .col-hour,
html.dkb-styled-print-page .col-date,
html.dkb-styled-print-page .col-char4 {
  text-align: center !important;
  white-space: nowrap !important;
}

html.dkb-styled-print-page .fs-image-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.dkb-styled-print-page .fs-image-inline img {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
}

/* =========================================================
   實際列印輸出：固定橫向
========================================================= */

@page {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  html.dkb-styled-print-page,
  html.dkb-styled-print-page body {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html.dkb-styled-print-page #fs-media-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.dkb-styled-print-page #fs-media-content > .row,
  html.dkb-styled-print-page #fs-media-content .col-xs-12,
  html.dkb-styled-print-page #xbox,
  html.dkb-styled-print-page #xbox-inline {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.dkb-styled-print-page .app-course_completeList-show {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .app-course_completeList-show > div[style*="font-size"] {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  html.dkb-styled-print-page .app-course_completeList-show > .fs-p {
    margin: 0 0 10px !important;
  }

  html.dkb-styled-print-page .fs-attrList,
  html.dkb-styled-print-page .fs-attrList.fs-border {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px 16px !important;

    padding: 10px 12px !important;

    border: 1px solid #e5edf2 !important;
    border-left: 4px solid #35bfd0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-attrList .clearfix {
    grid-template-columns: 105px minmax(0, 1fr) !important;
  }

  html.dkb-styled-print-page .fs-attrList .attr,
  html.dkb-styled-print-page .fs-attrList .value {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  html.dkb-styled-print-page .fs-page-header {
    margin: 0 0 10px !important;
    padding: 2px 0 10px 16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-page-header::before {
    top: 2px !important;
    height: 25px !important;
  }

  html.dkb-styled-print-page .fs-page-header .title {
    font-size: 21px !important;
  }

  html.dkb-styled-print-page .fs-report {
    margin: 0 0 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-report .report {
    height: 58px !important;
    min-height: 58px !important;
    padding: 8px 12px !important;
  }

  html.dkb-styled-print-page .fs-report .report .title {
    margin-bottom: 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  html.dkb-styled-print-page .fs-report .report .title .fs-iconfont {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    margin-right: 6px !important;
  }

  html.dkb-styled-print-page .fs-report .report .number {
    font-size: 23px !important;
  }

  html.dkb-styled-print-page .fs-table {
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.dkb-styled-print-page table,
  html.dkb-styled-print-page table.table,
  html.dkb-styled-print-page #completeListTable {
    table-layout: fixed !important;
    width: 100% !important;
  }

  html.dkb-styled-print-page thead th {
    padding: 7px 5px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  html.dkb-styled-print-page tbody td {
    padding: 8px 5px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html.dkb-styled-print-page .col-name {
    width: 72px !important;
  }

  html.dkb-styled-print-page .col-category {
    width: 110px !important;
  }

  html.dkb-styled-print-page .col-hour {
    width: 42px !important;
  }

  html.dkb-styled-print-page .col-date {
    width: 82px !important;
  }

  html.dkb-styled-print-page .col-char4 {
    width: 62px !important;
  }

  html.dkb-styled-print-page .fs-image-inline img {
    width: 13px !important;
    height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
  }

  html.dkb-styled-print-page tr {
    page-break-inside: avoid !important;
  }

  html.dkb-styled-print-page a[href]::after {
    content: "" !important;
  }
}

/* =========================================================
   列印輸出｜橫向版寬度修正
   讓內容不要貼滿紙張，改成置中的報表版面
========================================================= */

@page {
  size: A4 landscape;
  margin: 12mm;
}

@media print {
  html.dkb-styled-print-page,
  html.dkb-styled-print-page body {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /*
    關鍵：
    不要讓內容滿版 100%，改成 94% 並置中。
    這樣列印出來比較像正式報表，不會被擠到邊界。
  */
  html.dkb-styled-print-page #fs-media-content {
    width: 94% !important;
    max-width: 250mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html.dkb-styled-print-page #fs-media-content > .row,
  html.dkb-styled-print-page #fs-media-content .col-xs-12,
  html.dkb-styled-print-page #xbox,
  html.dkb-styled-print-page #xbox-inline {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.dkb-styled-print-page .app-course_completeList-show {
    width: 100% !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 平台名稱：稍微縮小，不要太像頁首標題 */
  html.dkb-styled-print-page .app-course_completeList-show > div[style*="font-size"] {
    margin: 0 0 8px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
  }

  /* 使用者資料卡：不要滿到太寬 */
  html.dkb-styled-print-page .fs-attrList,
  html.dkb-styled-print-page .fs-attrList.fs-border {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px 18px !important;

    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 9px 14px !important;

    background: #ffffff !important;
    border: 1px solid #d8e5ec !important;
    border-left: 4px solid #35bfd0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-attrList .clearfix {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  html.dkb-styled-print-page .fs-attrList .attr,
  html.dkb-styled-print-page .fs-attrList .value {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  /* 標題卡：目前太高、太滿，列印時壓低 */
  html.dkb-styled-print-page .fs-page-header {
    margin: 0 0 9px !important;
    padding: 10px 14px 9px !important;

    background: #ffffff !important;
    border: 1px solid #d8e5ec !important;
    border-radius: 12px !important;
    box-shadow: none !important;

    text-align: center !important;
  }

  html.dkb-styled-print-page .fs-page-header::before {
    display: none !important;
    content: none !important;
  }

  html.dkb-styled-print-page .fs-page-header .title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  html.dkb-styled-print-page .fs-page-header .title::after {
    width: 42px !important;
    height: 3px !important;
    margin-top: 6px !important;
  }

  /* 統計卡：四格可以再窄一點 */
  html.dkb-styled-print-page .fs-report {
    margin: 0 0 9px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-report .report {
    height: 54px !important;
    min-height: 54px !important;
    padding: 6px 10px !important;
  }

  html.dkb-styled-print-page .fs-report .report .title {
    margin-bottom: 2px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  html.dkb-styled-print-page .fs-report .report .title .fs-iconfont {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    margin-right: 5px !important;
  }

  html.dkb-styled-print-page .fs-report .report .number {
    font-size: 22px !important;
  }

  /* 表格：縮一點，避免看起來滿版壓迫 */
  html.dkb-styled-print-page .fs-table {
    width: 100% !important;
    margin: 0 auto !important;

    border: 1px solid #d8e5ec !important;
    border-top: 2px solid #35aee2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.dkb-styled-print-page table,
  html.dkb-styled-print-page table.table,
  html.dkb-styled-print-page #completeListTable {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  html.dkb-styled-print-page thead th {
    padding: 6px 5px !important;
    font-size: 10.2px !important;
    line-height: 1.25 !important;
  }

  html.dkb-styled-print-page tbody td {
    padding: 7px 5px !important;
    font-size: 10.2px !important;
    line-height: 1.35 !important;
  }

  /* 橫向欄寬：給課程名稱更多空間 */
  html.dkb-styled-print-page .col-name {
    width: 70px !important;
  }

  html.dkb-styled-print-page .col-category {
    width: 105px !important;
  }

  html.dkb-styled-print-page .col-hour {
    width: 40px !important;
  }

  html.dkb-styled-print-page .col-date {
    width: 80px !important;
  }

  html.dkb-styled-print-page .col-char4 {
    width: 58px !important;
  }

  html.dkb-styled-print-page .fs-image-inline img {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
  }

  html.dkb-styled-print-page tr {
    page-break-inside: avoid !important;
  }

  html.dkb-styled-print-page a[href]::after {
    content: "" !important;
  }
}

/* =========================================================
   列印輸出｜橫向寬度修正
   修正：列印預覽時內容被往中間擠
========================================================= */

@page {
  size: A4 landscape;
  margin: 8mm;
}

@media print {
  html.dkb-styled-print-page,
  html.dkb-styled-print-page body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /*
    關鍵：
    不要再用 94%、90%、max-width:250mm。
    直接吃滿橫向 A4 的可列印區域。
  */
  html.dkb-styled-print-page #fs-media-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }

  html.dkb-styled-print-page #fs-media-content > .row,
  html.dkb-styled-print-page #fs-media-content .col-xs-12,
  html.dkb-styled-print-page #xbox,
  html.dkb-styled-print-page #xbox-inline,
  html.dkb-styled-print-page .app-course_completeList-show {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /*
    Bootstrap row / col 可能會造成左右擠壓，列印時清掉。
  */
  html.dkb-styled-print-page .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.dkb-styled-print-page [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    使用者資料區：維持橫向三欄，但不要壓縮到中間。
  */
  html.dkb-styled-print-page .fs-attrList,
  html.dkb-styled-print-page .fs-attrList.fs-border {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px 18px !important;

    margin: 0 0 10px !important;
    padding: 10px 14px !important;

    background: #ffffff !important;
    border: 1px solid #d8e5ec !important;
    border-left: 4px solid #35bfd0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-attrList .clearfix {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    column-gap: 6px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  html.dkb-styled-print-page .fs-attrList .attr,
  html.dkb-styled-print-page .fs-attrList .value {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  /*
    標題、統計、表格都吃滿同一個寬度。
  */
  html.dkb-styled-print-page .fs-page-header,
  html.dkb-styled-print-page .fs-report,
  html.dkb-styled-print-page .fs-table {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.dkb-styled-print-page .fs-page-header {
    margin-bottom: 10px !important;
    padding: 10px 14px 9px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-report {
    margin-bottom: 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-report .report {
    height: 56px !important;
    min-height: 56px !important;
    padding: 7px 12px !important;
  }

  html.dkb-styled-print-page .fs-table {
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.dkb-styled-print-page table,
  html.dkb-styled-print-page table.table,
  html.dkb-styled-print-page #completeListTable {
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  html.dkb-styled-print-page thead th {
    padding: 7px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  html.dkb-styled-print-page tbody td {
    padding: 8px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  /*
    橫向欄寬：讓課程名稱吃最多空間。
  */
  html.dkb-styled-print-page .col-name {
    width: 72px !important;
  }

  html.dkb-styled-print-page .col-category {
    width: 110px !important;
  }

  html.dkb-styled-print-page .col-hour {
    width: 42px !important;
  }

  html.dkb-styled-print-page .col-date {
    width: 82px !important;
  }

  html.dkb-styled-print-page .col-char4 {
    width: 62px !important;
  }

  html.dkb-styled-print-page a[href]::after {
    content: "" !important;
  }
}

/* =========================================================
   列印輸出｜橫向滿版修正版
   注意：瀏覽器列印設定請關閉「頁首與頁尾」
========================================================= */

@page {
  size: A4 landscape;
  margin: 6mm;
}

@media print {
  html.dkb-styled-print-page,
  html.dkb-styled-print-page body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html.dkb-styled-print-page #fs-media-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html.dkb-styled-print-page #fs-media-content > .row,
  html.dkb-styled-print-page #fs-media-content .col-xs-12,
  html.dkb-styled-print-page #xbox,
  html.dkb-styled-print-page #xbox-inline,
  html.dkb-styled-print-page .app-course_completeList-show {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.dkb-styled-print-page [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.dkb-styled-print-page .app-course_completeList-show > div[style*="font-size"] {
    margin: 0 0 7px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
  }

  html.dkb-styled-print-page .app-course_completeList-show > .fs-p {
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  html.dkb-styled-print-page .fs-attrList,
  html.dkb-styled-print-page .fs-attrList.fs-border {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px 18px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 9px 14px !important;

    background: #ffffff !important;
    border: 1px solid #d8e5ec !important;
    border-left: 4px solid #35bfd0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-attrList .clearfix {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    column-gap: 6px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;
  }

  html.dkb-styled-print-page .fs-attrList .clearfix::before,
  html.dkb-styled-print-page .fs-attrList .clearfix::after {
    content: none !important;
    display: none !important;
  }

  html.dkb-styled-print-page .fs-attrList .attr,
  html.dkb-styled-print-page .fs-attrList .value {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html.dkb-styled-print-page .fs-page-header {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 8px !important;
    padding: 10px 14px 9px !important;

    border: 1px solid #d8e5ec !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-page-header .title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  html.dkb-styled-print-page .fs-report {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.dkb-styled-print-page .fs-report .report {
    height: 54px !important;
    min-height: 54px !important;
    padding: 6px 10px !important;
  }

  html.dkb-styled-print-page .fs-table {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.dkb-styled-print-page table,
  html.dkb-styled-print-page table.table,
  html.dkb-styled-print-page #completeListTable {
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  html.dkb-styled-print-page thead th {
    padding: 6px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  html.dkb-styled-print-page tbody td {
    padding: 7px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html.dkb-styled-print-page .col-name {
    width: 72px !important;
  }

  html.dkb-styled-print-page .col-category {
    width: 110px !important;
  }

  html.dkb-styled-print-page .col-hour {
    width: 42px !important;
  }

  html.dkb-styled-print-page .col-date {
    width: 82px !important;
  }

  html.dkb-styled-print-page .col-char4 {
    width: 62px !important;
  }

  html.dkb-styled-print-page .fs-image-inline img {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
  }

  html.dkb-styled-print-page tr {
    page-break-inside: avoid !important;
  }

  html.dkb-styled-print-page a[href]::after {
    content: "" !important;
  }
}


/* =========================================================
   30. 課程資訊 Modal｜外層跳窗樣式（整理版）
   說明：
   1. 只作用於 #courseInfo_modal
   2. 不再使用全域 .btn / button，避免誤傷網站其他按鈕
   3. 標題採置中、對稱設計，符合跳窗視覺
========================================================= */

#courseInfo_modal .modal-dialog {
  width: min(900px, calc(100vw - 48px)) !important;
  max-width: 900px !important;
  margin: 32px auto !important;
}

#courseInfo_modal .modal-content {
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid #d8e5ec !important;
  border-radius: 24px !important;
  box-shadow: 0 22px 56px rgba(15, 37, 51, 0.24) !important;

  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", "微軟正黑體", sans-serif !important;
}

#courseInfo_modal .modal-header {
  position: relative !important;

  padding: 24px 72px 20px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.08), transparent 48%),
    #ffffff !important;

  border-bottom: 1px solid #e5edf2 !important;
  text-align: center !important;
}

#courseInfo_modal_Label {
  display: block !important;

  margin: 0 auto !important;
  padding: 0 !important;

  color: #00324f !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
}

#courseInfo_modal_Label::after {
  content: "" !important;
  display: block !important;

  width: 54px !important;
  height: 4px !important;

  margin: 12px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}

#courseInfo_modal_Label .fs-hint {
  display: none !important;
}

/* 只改課程資訊 Modal 的右上角關閉按鈕 */
#courseInfo_modal .modal-header .close {
  position: absolute !important;
  right: 22px !important;
  top: 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #8aa0ad !important;
  background: #f4f9fc !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 999px !important;

  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  opacity: 1 !important;

  transition: all 0.18s ease !important;
}

#courseInfo_modal .modal-header .close:hover {
  color: #00324f !important;
  background: #eaf6fb !important;
  border-color: #bfe3f0 !important;
  transform: rotate(90deg) !important;
}

#courseInfo_modal .modal-header .close span {
  display: block !important;
  line-height: 1 !important;
}

#courseInfo_modal .modal-body {
  padding: 0 !important;
  background: #ffffff !important;
}

#courseInfo_modal .iframe-loading-msg {
  padding: 48px 24px !important;
  color: #526b7a !important;
  font-size: 14px !important;
  background: #f8fbfd !important;
}

#courseInfo_modal .fs-modal-iframe {
  display: block !important;

  width: 100% !important;
  min-height: 640px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: 0 !important;
}


/* =========================================================
   31. 課程資訊 Modal｜iframe 內頁共用基礎樣式
   說明：
   1. 不靠 JS 加 class
   2. 以 body:has(#openTrialMaterialXtree) 限縮在課程 syllabus 頁
   3. 避免污染一般網站頁面
========================================================= */

body:has(#openTrialMaterialXtree) {
  color: #17384d !important;
  background: #ffffff !important;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", "微軟正黑體", sans-serif !important;
}

body:has(#openTrialMaterialXtree) * {
  box-sizing: border-box !important;
}

body:has(#openTrialMaterialXtree) .fs-margin-large,
body:has(#openTrialMaterialXtree) .fs-description,
body:has(#openTrialMaterialXtree) .well,
body:has(#openTrialMaterialXtree) .panel,
body:has(#openTrialMaterialXtree) .fs-box {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   32. 課程資訊 Modal｜上方報名區與報名按鈕
   說明：
   1. 僅作用於 syllabus 頁的第一個含按鈕區塊
   2. 不再全域改 .btn / button
========================================================= */

body:has(#openTrialMaterialXtree) .fs-margin-large:first-child:has(a.btn, button.btn, input[type="submit"]),
body:has(#openTrialMaterialXtree) .fs-p:first-child:has(a.btn, button.btn, input[type="submit"]),
body:has(#openTrialMaterialXtree) .well:first-child:has(a.btn, button.btn, input[type="submit"]),
body:has(#openTrialMaterialXtree) .panel:first-child:has(a.btn, button.btn, input[type="submit"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  max-width: 780px !important;
  min-height: 92px !important;

  margin: 24px auto 26px !important;
  padding: 22px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.06), transparent 46%),
    #f8fbfd !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.055) !important;
}

body:has(#openTrialMaterialXtree) .fs-margin-large:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(#openTrialMaterialXtree) .fs-margin-large:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(#openTrialMaterialXtree) .fs-margin-large:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"],
body:has(#openTrialMaterialXtree) .fs-p:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(#openTrialMaterialXtree) .fs-p:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(#openTrialMaterialXtree) .fs-p:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"],
body:has(#openTrialMaterialXtree) .well:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(#openTrialMaterialXtree) .well:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(#openTrialMaterialXtree) .well:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"],
body:has(#openTrialMaterialXtree) .panel:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(#openTrialMaterialXtree) .panel:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(#openTrialMaterialXtree) .panel:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 88px !important;
  height: 44px !important;
  padding: 0 22px !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #008dc5 0%, #35bfd0 100%) !important;

  border: 0 !important;
  border-radius: 12px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 8px 18px rgba(0, 141, 197, 0.22) !important;
  transition: all 0.18s ease !important;
}

body:has(#openTrialMaterialXtree) .fs-margin-large:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(#openTrialMaterialXtree) .fs-margin-large:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(#openTrialMaterialXtree) .fs-margin-large:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover,
body:has(#openTrialMaterialXtree) .fs-p:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(#openTrialMaterialXtree) .fs-p:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(#openTrialMaterialXtree) .fs-p:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover,
body:has(#openTrialMaterialXtree) .well:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(#openTrialMaterialXtree) .well:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(#openTrialMaterialXtree) .well:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover,
body:has(#openTrialMaterialXtree) .panel:first-child:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(#openTrialMaterialXtree) .panel:first-child:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(#openTrialMaterialXtree) .panel:first-child:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover {
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(0, 141, 197, 0.28) !important;
}


/* =========================================================
   33. 課程資訊 Modal｜課程基本資訊卡
   說明：
   1. 左右對稱，不使用左側襯線
   2. 隱藏「其他資訊」標題
   3. 保留「開課單位」，讓它直接接在「簡介」之後
========================================================= */

body:has(#openTrialMaterialXtree) dl.dl-horizontal {
  max-width: 780px !important;

  margin: 28px auto 32px !important;
  padding: 26px 32px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.055), transparent 46%),
    #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.06) !important;

  color: #17384d !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal::before,
body:has(#openTrialMaterialXtree) dl.dl-horizontal::after {
  content: none !important;
  display: none !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal .legend {
  display: block !important;

  margin: 0 0 18px !important;
  padding: 0 0 13px !important;

  color: #00324f !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;

  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal .legend::after {
  content: "" !important;
  display: block !important;

  width: 42px !important;
  height: 3px !important;

  margin: 10px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}

/* 「其他資訊」標題不顯示 */
body:has(#openTrialMaterialXtree) dl.dl-horizontal .legend:not(:first-child) {
  display: none !important;
}

/* 教材區的 dl 只有「課程教材」legend，不能被上面規則影響 */
body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) dl.dl-horizontal .legend {
  display: block !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal dt {
  float: left !important;

  width: 132px !important;

  margin: 0 !important;
  padding: 10px 18px 10px 0 !important;

  color: #526b7a !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.65 !important;

  text-align: right !important;
  white-space: nowrap !important;

  background: transparent !important;
  border: 0 !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal dd {
  margin-left: 152px !important;
  padding: 10px 0 !important;

  color: #17384d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;

  border-bottom: 1px solid rgba(216, 229, 236, 0.75) !important;
  background: transparent !important;

  word-break: break-word !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal dd > div {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.75 !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal dd a {
  color: #008dc5 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal dd a:hover {
  color: #00324f !important;
  text-decoration: none !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal .fs-hint {
  color: #7b909d !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

body:has(#openTrialMaterialXtree) dl.dl-horizontal dd span,
body:has(#openTrialMaterialXtree) dl.dl-horizontal dd div,
body:has(#openTrialMaterialXtree) dl.dl-horizontal dd p {
  color: inherit !important;
  font-family: inherit !important;
}


/* =========================================================
   34. 課程資訊 Modal｜課程教材整包卡片
   結構：
   .fs-margin-large
     .fs-description > dl.dl-horizontal > .legend
     #openTrialMaterialXtree > ol.xtree-list
========================================================= */

body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) {
  max-width: 780px !important;

  margin: 28px auto 34px !important;
  padding: 26px 32px 24px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.045), transparent 46%),
    #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.06) !important;
}

body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) .fs-description {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) dl.dl-horizontal {
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) dl.dl-horizontal .legend {
  display: block !important;

  margin: 0 0 18px !important;
  padding: 0 0 13px !important;

  color: #00324f !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;

  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
}

body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) dl.dl-horizontal .legend::after {
  content: "" !important;
  display: block !important;

  width: 42px !important;
  height: 3px !important;

  margin: 10px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  background: transparent !important;
  border: 0 !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #eef3f6 !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node:last-child {
  border-bottom: 0 !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node .header,
body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node .center-part,
body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label {
  display: block !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label {
  display: grid !important;
  grid-template-columns: 32px 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;

  min-height: 44px !important;
  padding: 10px 0 !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label .sn,
body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label .hint,
body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label .icon,
body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label .text {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label .sn {
  grid-column: 1 !important;

  color: #526b7a !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label > .icon {
  grid-column: 2 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;

  color: #00324f !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label > .icon .fs-iconfont {
  color: #00324f !important;
  font-size: 15px !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label > .text {
  grid-column: 3 !important;

  min-width: 0 !important;

  color: #17384d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .node-title,
body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .fs-singleLineText,
body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .text-overflow {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .fs-singleLineText > .icon {
  display: none !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label .hint {
  grid-column: 4 !important;
  justify-self: end !important;

  color: #7b909d !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node .header.hover:hover {
  background: transparent !important;
}

body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node:hover .text-overflow {
  color: #008dc5 !important;
}


/* =========================================================
   35. 課程資訊 Modal｜RWD
========================================================= */

@media (max-width: 768px) {
  #courseInfo_modal .modal-dialog {
    width: calc(100vw - 24px) !important;
    margin: 16px auto !important;
  }

  #courseInfo_modal .modal-content {
    border-radius: 18px !important;
  }

  #courseInfo_modal .modal-header {
    padding: 20px 56px 18px !important;
  }

  #courseInfo_modal_Label {
    font-size: 18px !important;
  }

  #courseInfo_modal .modal-header .close {
    right: 16px !important;
    top: 16px !important;
  }

  #courseInfo_modal .fs-modal-iframe {
    min-height: 70vh !important;
  }

  body:has(#openTrialMaterialXtree) dl.dl-horizontal,
  body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) {
    max-width: none !important;

    margin: 20px 18px 28px !important;
    padding: 22px 22px !important;

    border-radius: 18px !important;
  }

  body:has(#openTrialMaterialXtree) dl.dl-horizontal .legend,
  body:has(#openTrialMaterialXtree) .fs-margin-large:has(#openTrialMaterialXtree) dl.dl-horizontal .legend {
    font-size: 16px !important;
  }

  body:has(#openTrialMaterialXtree) dl.dl-horizontal dt {
    float: none !important;
    width: auto !important;

    padding: 10px 0 2px !important;

    text-align: left !important;
  }

  body:has(#openTrialMaterialXtree) dl.dl-horizontal dd {
    margin-left: 0 !important;
    padding: 0 0 12px !important;
  }

  body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label {
    grid-template-columns: 28px 22px minmax(0, 1fr) auto !important;
    column-gap: 6px !important;
  }

  body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label > .text {
    font-size: 13px !important;
  }

  body:has(#openTrialMaterialXtree) #openTrialMaterialXtree .xtree-node-label .hint {
    font-size: 12px !important;
  }
}

/* =========================================================
   課程資訊 Modal｜報名區與報名按鈕修正
   說明：
   只作用在 syllabus 課程資訊頁，不影響全站其他按鈕
========================================================= */

/* 只在有課程資訊 dl 的 syllabus 頁面內處理按鈕區 */
body:has(dl.dl-horizontal) .fs-p:has(a.btn, button.btn, input[type="submit"]),
body:has(dl.dl-horizontal) .fs-box:has(a.btn, button.btn, input[type="submit"]),
body:has(dl.dl-horizontal) .well:has(a.btn, button.btn, input[type="submit"]),
body:has(dl.dl-horizontal) .panel:has(a.btn, button.btn, input[type="submit"]),
body:has(dl.dl-horizontal) .fs-margin-large:has(a.btn, button.btn, input[type="submit"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  max-width: 780px !important;
  min-height: 92px !important;

  margin: 24px auto 28px !important;
  padding: 22px 24px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.06), transparent 46%),
    #f8fbfd !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.055) !important;
}

/* 只改 syllabus 課程資訊頁裡面的報名按鈕 */
body:has(dl.dl-horizontal) .fs-p:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(dl.dl-horizontal) .fs-p:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(dl.dl-horizontal) .fs-p:has(a.btn, button.btn, input[type="submit"]) input[type="submit"],

body:has(dl.dl-horizontal) .fs-box:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(dl.dl-horizontal) .fs-box:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(dl.dl-horizontal) .fs-box:has(a.btn, button.btn, input[type="submit"]) input[type="submit"],

body:has(dl.dl-horizontal) .well:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(dl.dl-horizontal) .well:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(dl.dl-horizontal) .well:has(a.btn, button.btn, input[type="submit"]) input[type="submit"],

body:has(dl.dl-horizontal) .panel:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(dl.dl-horizontal) .panel:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(dl.dl-horizontal) .panel:has(a.btn, button.btn, input[type="submit"]) input[type="submit"],

body:has(dl.dl-horizontal) .fs-margin-large:has(a.btn, button.btn, input[type="submit"]) a.btn,
body:has(dl.dl-horizontal) .fs-margin-large:has(a.btn, button.btn, input[type="submit"]) button.btn,
body:has(dl.dl-horizontal) .fs-margin-large:has(a.btn, button.btn, input[type="submit"]) input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 92px !important;
  height: 46px !important;
  padding: 0 24px !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #008dc5 0%, #35bfd0 100%) !important;

  border: 0 !important;
  border-radius: 12px !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 8px 18px rgba(0, 141, 197, 0.22) !important;
  transition: all 0.18s ease !important;
}

/* hover */
body:has(dl.dl-horizontal) .fs-p:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(dl.dl-horizontal) .fs-p:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(dl.dl-horizontal) .fs-p:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover,

body:has(dl.dl-horizontal) .fs-box:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(dl.dl-horizontal) .fs-box:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(dl.dl-horizontal) .fs-box:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover,

body:has(dl.dl-horizontal) .well:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(dl.dl-horizontal) .well:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(dl.dl-horizontal) .well:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover,

body:has(dl.dl-horizontal) .panel:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(dl.dl-horizontal) .panel:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(dl.dl-horizontal) .panel:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover,

body:has(dl.dl-horizontal) .fs-margin-large:has(a.btn, button.btn, input[type="submit"]) a.btn:hover,
body:has(dl.dl-horizontal) .fs-margin-large:has(a.btn, button.btn, input[type="submit"]) button.btn:hover,
body:has(dl.dl-horizontal) .fs-margin-large:has(a.btn, button.btn, input[type="submit"]) input[type="submit"]:hover {
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(0, 141, 197, 0.28) !important;
}

/* =========================================================
   NCCU DKB｜課程內部頁樣式
   適用：
   /course/{courseId}
   /course/syllabus?courseId=xxx

   目標：
   1. 隱藏右側麵包屑
   2. 隱藏課程內容標題旁的收藏工具
   3. 優化 page banner
   4. 優化課程內部左右欄樣式
========================================================= */


/* =========================================================
   0. 課程內部頁共用變數
========================================================= */

#page-2L-root {
  --dkb-primary: #008dc5;
  --dkb-primary-dark: #006f9f;
  --dkb-primary-soft: #e8f6fb;
  --dkb-primary-softer: #f3fafc;

  --dkb-text-main: #17384d;
  --dkb-text-sub: #5f7380;
  --dkb-text-light: #8a9aa5;

  --dkb-border: #e5edf2;
  --dkb-border-soft: #eef4f7;

  --dkb-card-bg: #ffffff;

  --dkb-radius-lg: 20px;
  --dkb-radius-md: 16px;
  --dkb-radius-sm: 12px;

  --dkb-shadow-soft: 0 10px 28px rgba(25, 58, 78, 0.08);
  --dkb-shadow-card: 0 8px 22px rgba(25, 58, 78, 0.065);
  --dkb-shadow-card-hover: 0 14px 34px rgba(25, 58, 78, 0.12);
}


/* =========================================================
   1. 頁面主體基礎
========================================================= */


#page-2L-root #page-main {
  color: var(--dkb-text-main) !important;
}
#page-2L-root #page-main > .container {
  padding-top: 24px !important;
  padding-bottom: 42px !important;
}

/* 清掉 XMS+ 內層多餘白框 */
#page-2L-root #page-main #fs-content,
#page-2L-root #page-main #fs-sidebar,
#page-2L-root #page-main #xbox,
#page-2L-root #page-main #xbox-inline,
#page-2L-root #page-main #xbox-front,
#page-2L-root #page-main #xbox-rear,
#page-2L-root #page-main #mbox,
#page-2L-root #page-main #mbox-inline,
#page-2L-root #page-main #mbox-front,
#page-2L-root #page-main #mbox-rear {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   2. Page Banner｜課程頁頂部 Banner
========================================================= */

/*#page-2L-root #page-banner {
  background: transparent !important;
}

#page-2L-root #page-banner .fs-course-banner {
  position: relative !important;

  min-height: 138px !important;
  padding: 0 !important;

  background:
    radial-gradient(circle at 18% 20%, rgba(95, 194, 223, 0.22), transparent 32%),
    linear-gradient(135deg, #00324f 0%, #006f9f 52%, #008dc5 100%) !important;

  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#page-2L-root #page-banner .fs-course-banner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 42%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.18), transparent 28%) !important;

  pointer-events: none !important;
}

#page-2L-root #page-banner .fs-course-banner .container {
  position: relative !important;
  z-index: 1 !important;
}

#page-2L-root #page-banner .fs-banner-wrap {
  min-height: 138px !important;

  display: flex !important;
  align-items: center !important;

  padding: 26px 0 !important;
}

#page-2L-root #page-banner .fs-banner-logo {
  flex: 0 0 58px !important;

  width: 58px !important;
  height: 58px !important;

  margin: 0 18px 0 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 18px !important;

  box-shadow: 0 10px 26px rgba(0, 35, 55, 0.18) !important;
  backdrop-filter: blur(8px);
}

#page-2L-root #page-banner .fs-banner-logo img.logo {
  display: block !important;

  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;

  object-fit: contain !important;
}

#page-2L-root #page-banner .fs-banner-text {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#page-2L-root #page-banner .fs-banner-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;

  text-shadow: 0 2px 10px rgba(0, 35, 55, 0.18) !important;
}

#page-2L-root #page-banner .fs-banner-title a,
#page-2L-root #page-banner .fs-banner-title a:hover,
#page-2L-root #page-banner .fs-banner-title a:focus,
#page-2L-root #page-banner .fs-banner-title .text {
  color: #ffffff !important;
  text-decoration: none !important;
}*/


/* =========================================================
   3. 右側內容｜隱藏麵包屑
========================================================= */

#page-2L-root #fs-content .app-course-breadcrumb,
#page-2L-root #fs-content .app-course-breadcrumb .breadcrumb,
#page-2L-root #fs-content .breadcrumb {
  display: none !important;
}


/* =========================================================
   4. 左側欄｜課程側欄外層
========================================================= */

#page-2L-root #fs-sidebar {
  color: var(--dkb-text-main) !important;
}

#page-2L-root #fs-sidebar .drawer-contents-reserve,
#page-2L-root #fs-sidebar .drawer-body-reserve,
#page-2L-root #fs-sidebar .module.mod_course-courseSidebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 左側整張卡 */
#page-2L-root #fs-sidebar .mod_course-courseSidebar {
  overflow: hidden !important;

  margin: 0 0 18px !important;
  padding: 14px !important;

  background: #ffffff !important;
  border: 1px solid #dcebf3 !important;
  border-radius: 22px !important;

  box-shadow: 0 8px 22px rgba(24, 56, 77, 0.055) !important;
}


/* =========================================================
   5. 左側欄｜課程縮圖
========================================================= */

#page-2L-root #fs-sidebar .mod_course-courseSidebar > .fs-image {
  margin: 0 0 14px !important;
  padding: 0 !important;

  overflow: hidden !important;
  border-radius: 18px !important;

  background: #edf4f7 !important;
  border: 1px solid #e5edf2 !important;
}

#page-2L-root #fs-sidebar .mod_course-courseSidebar > .fs-image img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  object-fit: cover !important;
}

#page-2L-root #fs-sidebar .mod_course-courseSidebar > .fs-divider {
  display: none !important;
}


/* =========================================================
   6. 左側欄｜課程內容 / 課程資訊選單
========================================================= */

#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li {
  margin: 4px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 選單項目 */
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a {
  position: relative !important;

  min-height: 48px !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 12px !important;

  color: var(--dkb-text-main) !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 14px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  transition:
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* icon 圓底 */
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a .fs-iconfont {
  grid-column: 1 !important;

  width: 32px !important;
  height: 32px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  color: var(--dkb-primary) !important;
  background: #e6f4fa !important;

  border-radius: 12px !important;

  font-size: 14px !important;
  line-height: 1 !important;
}

/* 文字 */
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a .text {
  grid-column: 2 !important;

  min-width: 0 !important;

  color: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* hover */
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a:hover,
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a:focus {
  color: var(--dkb-primary) !important;
  background: #f5faff !important;
  text-decoration: none !important;
}

/* active / 目前頁面 */
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li.active > a,
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a.active,
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a.current,
#page-2L-root #fs-sidebar .mod_course-courseSidebar .fs-menu ul.nav > li > a[href].active {
  color: var(--dkb-primary) !important;
  background: linear-gradient(135deg, #f5faff 0%, #eef8fd 100%) !important;
  box-shadow: inset 3px 0 0 var(--dkb-primary) !important;
}


/* =========================================================
   7. 左側欄｜抽屜按鈕
========================================================= */

#page-2L-root #fs-sidebar .drawer-controls a {
  border-radius: 999px !important;
  background: var(--dkb-primary) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 141, 197, 0.2) !important;
  box-shadow: 0 6px 14px rgba(0, 141, 197, 0.18) !important;
}

#page-2L-root #fs-sidebar .drawer-controls a:hover {
  background: var(--dkb-primary-dark) !important;
}

#page-2L-root #fs-sidebar .drawer-controls .drawer-icon {
  color: #ffffff !important;
}


/* =========================================================
   8. 右側內容｜整體卡片化
========================================================= */

#page-2L-root #fs-content {
  color: var(--dkb-text-main) !important;
}

#page-2L-root #fs-content #xbox-inline > .module {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 課程內容主卡 */
#page-2L-root #fs-content .mod_activityList-show > .fs-block.fs-margin-large {
  overflow: hidden !important;

  margin: 0 0 22px !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;
}


/* =========================================================
   9. 右側內容｜課程內容標題區
========================================================= */

#page-2L-root #fs-content .mod_activityList-show .fs-block-header {
  position: relative !important;

  margin: 0 !important;
  padding: 22px 28px 18px !important;

  background:
    radial-gradient(circle at top left, rgba(0, 141, 197, 0.07), transparent 35%),
    #ffffff !important;

  border-bottom: 1px solid #e5edf2 !important;
}

#page-2L-root #fs-content .mod_activityList-show .fs-block-header::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  top: 22px !important;

  width: 5px !important;
  height: 30px !important;

  background: linear-gradient(180deg, #008dc5 0%, #35bfd0 100%) !important;
  border-radius: 999px !important;
}

#page-2L-root #fs-content .mod_activityList-show .block-title {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--dkb-text-main) !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
}

/* 隱藏課程內容旁邊的收藏工具 */
#page-2L-root #fs-content .mod_activityList-show .block-title .ext-tools,
#page-2L-root #fs-content .mod_activityList-show .block-title .fs-tools,
#page-2L-root #fs-content .mod_activityList-show .block-title a[title="收藏"],
#page-2L-root #fs-content .mod_activityList-show .block-title a[href="#"][title="收藏"] {
  display: none !important;
}


/* =========================================================
   10. 右側內容｜課程內容列表外層
========================================================= */

#page-2L-root #fs-content .mod_activityList-show .fs-block-body {
  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
}

#page-2L-root #fs-content #activityTree {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* 表頭 */
#page-2L-root #fs-content #activityTree .list-header {
  margin: 0 !important;
  padding: 12px 20px !important;

  color: #526b7a !important;
  background: #f4f9fc !important;

  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

#page-2L-root #fs-content #activityTree .list-header .ext-col,
#page-2L-root #fs-content #activityTree .list-header .text-center {
  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}


/* =========================================================
   11. 右側內容｜活動列表項目
========================================================= */

#page-2L-root #fs-content #activityTree .xtree-list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  background: #ffffff !important;
}

#page-2L-root #fs-content #activityTree .xtree-node {
  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid #eef3f6 !important;
}

#page-2L-root #fs-content #activityTree .xtree-node:last-child {
  border-bottom: 0 !important;
}

#page-2L-root #fs-content #activityTree .xtree-node .header {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;

  transition:
    background 0.18s ease,
    color 0.18s ease !important;
}

#page-2L-root #fs-content #activityTree .xtree-node .header:hover {
  background: #f8fbfd !important;
}

#page-2L-root #fs-content #activityTree .xtree-node .center-part {
  min-height: 48px !important;

  margin: 0 !important;
  padding: 12px 20px !important;

  display: block !important;

  background: transparent !important;
  border: 0 !important;
}


/* 右側欄位 */
#page-2L-root #fs-content #activityTree .hidden-xs.pull-right {
  margin: 0 !important;
  padding: 0 !important;
}

#page-2L-root #fs-content #activityTree .ext-col {
  color: #667b88 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

#page-2L-root #fs-content #activityTree .col-char7 {
  color: #526b7a !important;
  font-weight: 650 !important;
}


/* 左側項目內容 */
#page-2L-root #fs-content #activityTree .xtree-node-label {
  display: flex !important;
  align-items: center !important;

  min-width: 0 !important;

  color: var(--dkb-text-main) !important;
}

#page-2L-root #fs-content #activityTree .xtree-node-label .sn,
#page-2L-root #fs-content #activityTree .xtree-node-label > .icon,
#page-2L-root #fs-content #activityTree .xtree-node-label > .text {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-2L-root #fs-content #activityTree .xtree-node-label .sn {
  flex: 0 0 34px !important;

  color: #526b7a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#page-2L-root #fs-content #activityTree .xtree-node-label > .icon {
  flex: 0 0 28px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #00324f !important;
}

#page-2L-root #fs-content #activityTree .xtree-node-label > .icon .fs-iconfont {
  color: #00324f !important;
  font-size: 15px !important;
}

#page-2L-root #fs-content #activityTree .xtree-node-label > .text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}


/* 課程活動標題 */
#page-2L-root #fs-content #activityTree .node-title,
#page-2L-root #fs-content #activityTree .fs-singleLineText,
#page-2L-root #fs-content #activityTree .text-overflow {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#page-2L-root #fs-content #activityTree .fs-singleLineText > div:not(.icon) a {
  color: var(--dkb-text-main) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content #activityTree .fs-singleLineText > div:not(.icon) a:hover {
  color: var(--dkb-primary) !important;
  text-decoration: none !important;
}


/* =========================================================
   12. 右側內容｜課程狀態 / 退選區
========================================================= */

#page-2L-root #fs-content .app-course-statusBar {
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

#page-2L-root #fs-content .app-course-statusBar .alert {
  margin: 0 0 12px !important;
  padding: 12px 16px !important;

  color: #8a5a00 !important;
  background: #fff8e7 !important;
  border: 1px solid #f3d99a !important;
  border-radius: 14px !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}

#page-2L-root #fs-content .app-course-statusBar .fs-p {
  margin: 0 !important;
  padding: 0 !important;
}

/* 退選連結弱化 */
#page-2L-root #fs-content .app-course-statusBar .fs-p > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 34px !important;
  padding: 0 12px !important;

  color: #7b909d !important;
  background: transparent !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content .app-course-statusBar .fs-p > a:hover {
  color: #b25b5b !important;
  border-color: #e5b8b8 !important;
  background: #fff7f7 !important;
}


/* =========================================================
   13. 課程資訊頁右側內容
   /course/syllabus?courseId=xxx
========================================================= */

/* 課程資訊頁的 dl 卡片 */
#page-2L-root #fs-content dl.dl-horizontal {
  margin: 0 0 22px !important;
  padding: 26px 32px !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;

  color: var(--dkb-text-main) !important;
}

#page-2L-root #fs-content dl.dl-horizontal .legend {
  margin: 0 0 18px !important;
  padding: 0 0 13px !important;

  color: #00324f !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;

  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
}

#page-2L-root #fs-content dl.dl-horizontal .legend::after {
  content: "" !important;
  display: block !important;

  width: 42px !important;
  height: 3px !important;

  margin: 10px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}

#page-2L-root #fs-content dl.dl-horizontal dt {
  width: 132px !important;

  margin: 0 !important;
  padding: 9px 18px 9px 0 !important;

  color: #526b7a !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.65 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#page-2L-root #fs-content dl.dl-horizontal dd {
  margin-left: 152px !important;
  padding: 9px 0 !important;

  color: var(--dkb-text-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;

  border-bottom: 1px solid rgba(216, 229, 236, 0.75) !important;
  word-break: break-word !important;
}

#page-2L-root #fs-content dl.dl-horizontal dd:last-child {
  border-bottom: 0 !important;
}

#page-2L-root #fs-content dl.dl-horizontal a {
  color: var(--dkb-primary) !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content dl.dl-horizontal a:hover {
  color: var(--dkb-primary-dark) !important;
}


/* =========================================================
   14. Modal 共用微調：限制在課程內部頁
========================================================= */

#page-2L-root .modal-content {
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(18, 45, 64, 0.22) !important;
}

#page-2L-root .modal-header {
  border-bottom: 1px solid #e5edf2 !important;
  background: #f8fbfd !important;
}

#page-2L-root .modal-title {
  color: var(--dkb-text-main) !important;
  font-weight: 850 !important;
}


/* =========================================================
   15. RWD
========================================================= */

@media (max-width: 991px) {
  #page-2L-root #page-main > .container {
    padding-top: 18px !important;
  }

  #page-2L-root #fs-sidebar .mod_course-courseSidebar {
    margin-bottom: 18px !important;
    border-radius: 18px !important;
  }

  #page-2L-root #page-banner .fs-course-banner {
    min-height: 116px !important;
  }

  #page-2L-root #page-banner .fs-banner-wrap {
    min-height: 116px !important;
  }

  #page-2L-root #page-banner .fs-banner-title {
    font-size: 24px !important;
  }

  #page-2L-root #fs-content .mod_activityList-show .block-title {
    font-size: 22px !important;
  }
}

@media (max-width: 767px) {
  #page-2L-root #page-main > .container {
    padding-top: 16px !important;
    padding-bottom: 32px !important;
  }

  #page-2L-root #page-banner .fs-course-banner {
    display: none !important;
  }

  #page-2L-root #fs-sidebar .mod_course-courseSidebar {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  #page-2L-root #fs-sidebar .mod_course-courseSidebar > .fs-image {
    border-radius: 16px !important;
  }

  #page-2L-root #fs-content .mod_activityList-show > .fs-block.fs-margin-large {
    border-radius: 18px !important;
  }

  #page-2L-root #fs-content .mod_activityList-show .fs-block-header {
    padding: 18px 20px 16px !important;
  }

  #page-2L-root #fs-content .mod_activityList-show .fs-block-header::before {
    top: 19px !important;
    height: 26px !important;
  }

  #page-2L-root #fs-content .mod_activityList-show .block-title {
    font-size: 21px !important;
  }

  #page-2L-root #fs-content #activityTree .list-header {
    display: none !important;
  }

  #page-2L-root #fs-content #activityTree .xtree-node .center-part {
    padding: 12px 16px !important;
  }

  #page-2L-root #fs-content #activityTree .xtree-node-label {
    align-items: flex-start !important;
  }

  #page-2L-root #fs-content #activityTree .xtree-node-label .sn {
    flex-basis: 30px !important;
  }

  #page-2L-root #fs-content #activityTree .xtree-node-label > .icon {
    flex-basis: 24px !important;
    padding-top: 1px !important;
  }

  #page-2L-root #fs-content #activityTree .fs-singleLineText > div:not(.icon) a {
    font-size: 14px !important;
  }

  #page-2L-root #fs-content dl.dl-horizontal {
    padding: 22px 22px !important;
    border-radius: 18px !important;
  }

  #page-2L-root #fs-content dl.dl-horizontal dt {
    float: none !important;
    width: auto !important;
    padding: 9px 0 2px !important;
    text-align: left !important;
  }

  #page-2L-root #fs-content dl.dl-horizontal dd {
    margin-left: 0 !important;
    padding: 0 0 11px !important;
  }
}

/* =========================================================
   NCCU DKB｜課程內部頁｜右側狀態區 / 簡介區補強
   適用：
   1. 完成課程狀態 + 下載證書
   2. 課程簡介
   3. 課程尚未完成 + 退選
========================================================= */


/* =========================================================
   1. 右側所有補充模組基礎間距
========================================================= */

#page-2L-root #fs-content .app-course-passStatusBar,
#page-2L-root #fs-content .app-course-intro,
#page-2L-root #fs-content .app-course-statusBar,
#page-2L-root #fs-content .app-course-courseStoreMsg,
#page-2L-root #fs-content .app-course-multiRolesAlert,
#page-2L-root #fs-content .app-course-closedAlert {
  margin: 0 0 18px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   2. 完成課程狀態區｜已完成 + 檢視學習紀錄 + 下載證書
   HTML：
   .app-course-passStatusBar
     .alert.alert-info
     .text-center > a[data-url*="/certificate/preview"]
========================================================= */

#page-2L-root #fs-content .app-course-passStatusBar {
  overflow: hidden !important;

  padding: 18px 22px !important;

  background:
    radial-gradient(circle at top left, rgba(0, 141, 197, 0.06), transparent 34%),
    #ffffff !important;

  border: 1px solid #e5edf2 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;
}

/* 已完成提示 */
#page-2L-root #fs-content .app-course-passStatusBar .alert.alert-info {
  position: relative !important;

  margin: 0 0 14px !important;
  padding: 14px 18px !important;

  color: #12516d !important;
  background: #eef9fd !important;

  border: 1px solid #ccebf5 !important;
  border-radius: 16px !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;

  box-shadow: none !important;
}

/* 左側小狀態點 */
#page-2L-root #fs-content .app-course-passStatusBar .alert.alert-info::before {
  content: "✓" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;

  margin-right: 8px !important;

  color: #ffffff !important;
  background: #008dc5 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* 學習紀錄連結 */
#page-2L-root #fs-content .app-course-passStatusBar .alert.alert-info a {
  color: #008dc5 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content .app-course-passStatusBar .alert.alert-info a:hover {
  color: #006f9f !important;
  text-decoration: none !important;
}

/* 下載證書按鈕外層 */
#page-2L-root #fs-content .app-course-passStatusBar > .text-center {
  margin: 0 !important;
  padding: 2px 0 0 !important;
}

/* 下載證書按鈕 */
#page-2L-root #fs-content .app-course-passStatusBar a[data-url*="/certificate/preview"],
#page-2L-root #fs-content .app-course-passStatusBar a.btn[data-target="#previewCertModal"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 118px !important;
  height: 42px !important;
  padding: 0 20px !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #008dc5 0%, #35bfd0 100%) !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 8px 18px rgba(0, 141, 197, 0.22) !important;
  transition: all 0.18s ease !important;
}

#page-2L-root #fs-content .app-course-passStatusBar a[data-url*="/certificate/preview"]::before,
#page-2L-root #fs-content .app-course-passStatusBar a.btn[data-target="#previewCertModal"]::before {
  content: "↓" !important;
  margin-right: 7px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#page-2L-root #fs-content .app-course-passStatusBar a[data-url*="/certificate/preview"]:hover,
#page-2L-root #fs-content .app-course-passStatusBar a.btn[data-target="#previewCertModal"]:hover {
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(0, 141, 197, 0.28) !important;
}


/* =========================================================
   3. 課程簡介區
   HTML：
   .app-course-intro
     .fs-block
       .fs-block-header > .block-title
       .fs-block-body
========================================================= */

#page-2L-root #fs-content .app-course-intro > .fs-block {
  overflow: hidden !important;

  margin: 0 0 22px !important;
  padding: 0 !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;
}

/* 簡介標題區 */
#page-2L-root #fs-content .app-course-intro .fs-block-header {
  position: relative !important;

  margin: 0 !important;
  padding: 22px 28px 18px !important;

  background:
    radial-gradient(circle at top left, rgba(0, 141, 197, 0.06), transparent 35%),
    #ffffff !important;

  border-bottom: 1px solid #e5edf2 !important;
}

#page-2L-root #fs-content .app-course-intro .fs-block-header::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  top: 22px !important;

  width: 5px !important;
  height: 30px !important;

  background: linear-gradient(180deg, #008dc5 0%, #35bfd0 100%) !important;
  border-radius: 999px !important;
}

/* 簡介標題 */
#page-2L-root #fs-content .app-course-intro .block-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
}

/* 簡介文字區 */
#page-2L-root #fs-content .app-course-intro .fs-block-body {
  margin: 0 !important;
  padding: 22px 28px 26px !important;

  color: #17384d !important;
  background: #ffffff !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.01em !important;
}

/* 簡介內文 div / p 統一 */
#page-2L-root #fs-content .app-course-intro .fs-block-body div,
#page-2L-root #fs-content .app-course-intro .fs-block-body p,
#page-2L-root #fs-content .app-course-intro .fs-block-body span {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}


/* =========================================================
   4. 尚未完成 / 退選區
   HTML：
   .app-course-statusBar
     .alert.alert-warning
     .fs-p.text-center > a[data-target*="confirmDropCourseModal"]
========================================================= */

#page-2L-root #fs-content .app-course-statusBar {
  overflow: hidden !important;

  margin: 18px 0 0 !important;
  padding: 18px 22px !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;
}

/* 尚未完成提示 */
#page-2L-root #fs-content .app-course-statusBar .alert.alert-warning {
  position: relative !important;

  margin: 0 0 14px !important;
  padding: 14px 18px !important;

  color: #8a5a00 !important;
  background: #fff8e7 !important;

  border: 1px solid #f1d891 !important;
  border-radius: 16px !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.6 !important;

  box-shadow: none !important;
}

/* 左側提示點 */
#page-2L-root #fs-content .app-course-statusBar .alert.alert-warning::before {
  content: "!" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;

  margin-right: 8px !important;

  color: #ffffff !important;
  background: #d99a00 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* 退選外層 */
#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center {
  margin: 0 !important;
  padding: 2px 0 0 !important;
}

/* 退選按鈕：弱化，不跟主 CTA 搶視覺 */
#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center > a[data-target*="confirmDropCourseModal"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 82px !important;
  height: 36px !important;
  padding: 0 16px !important;

  color: #7b909d !important;
  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  transition: all 0.18s ease !important;
}

#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center > a[data-target*="confirmDropCourseModal"]::before {
  content: "退" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px !important;
  height: 18px !important;

  margin-right: 6px !important;

  color: #9a6a6a !important;
  background: #fff3f3 !important;
  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center > a[data-target*="confirmDropCourseModal"]:hover {
  color: #b25b5b !important;
  background: #fff7f7 !important;
  border-color: #e5b8b8 !important;
  text-decoration: none !important;
}


/* =========================================================
   5. 空狀態處理
   有些頁面 app-course-statusBar / passStatusBar 可能是空 module
========================================================= */

#page-2L-root #fs-content .app-course-passStatusBar:empty,
#page-2L-root #fs-content .app-course-statusBar:empty,
#page-2L-root #fs-content .app-course-intro:empty,
#page-2L-root #fs-content .app-course-courseStoreMsg:empty {
  display: none !important;
}


/* =========================================================
   6. 退選確認 Modal 內按鈕限定樣式
   避免使用全域 .btn 影響其他頁
========================================================= */

#page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 72px !important;
  height: 38px !important;
  padding: 0 18px !important;

  color: #ffffff !important;
  background: #b25b5b !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  box-shadow: 0 6px 14px rgba(178, 91, 91, 0.2) !important;
}

#page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 72px !important;
  height: 38px !important;
  padding: 0 18px !important;

  color: #526b7a !important;
  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}


/* =========================================================
   7. 下載證書 Modal 限定樣式
========================================================= */

#page-2L-root #previewCertModal .modal-content,
#page-2L-root #learnLogModal .modal-content {
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(18, 45, 64, 0.22) !important;
}

#page-2L-root #previewCertModal .modal-header,
#page-2L-root #learnLogModal .modal-header {
  padding: 18px 22px !important;

  background: #f8fbfd !important;
  border-bottom: 1px solid #e5edf2 !important;
}

#page-2L-root #previewCertModal .modal-title,
#page-2L-root #learnLogModal .modal-title {
  color: #17384d !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

#page-2L-root #previewCertModal .modal-body,
#page-2L-root #learnLogModal .modal-body {
  padding: 24px !important;
  background: #ffffff !important;
}

#page-2L-root #previewCertModal .iframe-loading-msg,
#page-2L-root #learnLogModal .iframe-loading-msg {
  min-height: 120px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #526b7a !important;
  font-size: 14px !important;
}


/* =========================================================
   8. RWD
========================================================= */

@media (max-width: 767px) {
  #page-2L-root #fs-content .app-course-passStatusBar,
  #page-2L-root #fs-content .app-course-statusBar {
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }

  #page-2L-root #fs-content .app-course-passStatusBar .alert.alert-info,
  #page-2L-root #fs-content .app-course-statusBar .alert.alert-warning {
    padding: 13px 15px !important;
    font-size: 13.5px !important;
    text-align: left !important;
  }

  #page-2L-root #fs-content .app-course-intro > .fs-block {
    border-radius: 18px !important;
  }

  #page-2L-root #fs-content .app-course-intro .fs-block-header {
    padding: 18px 20px 16px !important;
  }

  #page-2L-root #fs-content .app-course-intro .fs-block-header::before {
    top: 19px !important;
    height: 26px !important;
  }

  #page-2L-root #fs-content .app-course-intro .block-title {
    font-size: 21px !important;
  }

  #page-2L-root #fs-content .app-course-intro .fs-block-body {
    padding: 18px 20px 22px !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
}

/* =========================================================
   課程內部頁｜課程資訊頁整理
   1. 隱藏課程資訊裡重複的「簡介」
   2. 隱藏課程資訊裡重複的「課程教材」
   3. 重做課程資訊標題樣式
   4. 讓白色資訊卡置中
========================================================= */


/* =========================================================
   1. 課程資訊頁｜資訊卡置中
========================================================= */

#page-2L-root #fs-content dl.dl-horizontal {
  max-width: 780px !important;
  width: 100% !important;

  margin: 0 auto 24px !important;
  padding: 26px 32px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.045), transparent 46%),
    #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;

  color: #17384d !important;
}


/* =========================================================
   2. 課程資訊頁｜標題樣式
   把原本黑字黑線改成網站調性的藍色置中標題
========================================================= */

#page-2L-root #fs-content dl.dl-horizontal .legend {
  display: block !important;

  margin: 0 0 20px !important;
  padding: 0 0 14px !important;

  color: #00324f !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
}

#page-2L-root #fs-content dl.dl-horizontal .legend::after {
  content: "" !important;
  display: block !important;

  width: 46px !important;
  height: 3px !important;

  margin: 10px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}


/* =========================================================
   3. 課程資訊頁｜隱藏重複的「簡介」
   說明：
   依照目前 XMS+ 結構，簡介通常是第 8 組 dt / dd
========================================================= */

#page-2L-root #fs-content dl.dl-horizontal dt:nth-of-type(8),
#page-2L-root #fs-content dl.dl-horizontal dd:nth-of-type(8) {
  display: none !important;
}


/* =========================================================
   4. 課程資訊頁｜隱藏重複的「課程教材」
   結構：
   .fs-margin-large
     .fs-description > dl.dl-horizontal > .legend 課程教材
     #openTrialMaterialXtree
========================================================= */

#page-2L-root #fs-content .fs-margin-large:has(#openTrialMaterialXtree),
#page-2L-root #fs-content #openTrialMaterialXtree {
  display: none !important;
}


/* =========================================================
   5. 課程資訊頁｜資訊列重新整理
========================================================= */

#page-2L-root #fs-content dl.dl-horizontal dt {
  float: left !important;
  width: 132px !important;

  margin: 0 !important;
  padding: 10px 18px 10px 0 !important;

  color: #526b7a !important;
  background: transparent !important;

  border: 0 !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.65 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#page-2L-root #fs-content dl.dl-horizontal dd {
  margin-left: 152px !important;
  padding: 10px 0 !important;

  color: #17384d !important;
  background: transparent !important;

  border-bottom: 1px solid rgba(216, 229, 236, 0.75) !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;

  word-break: break-word !important;
}

#page-2L-root #fs-content dl.dl-horizontal dd > div {
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
  font-family: inherit !important;
  line-height: 1.75 !important;
}

#page-2L-root #fs-content dl.dl-horizontal dd a {
  color: #008dc5 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content dl.dl-horizontal dd a:hover {
  color: #006f9f !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content dl.dl-horizontal .fs-hint {
  color: #7b909d !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}


/* =========================================================
   6. 手機版
========================================================= */

@media (max-width: 767px) {
  #page-2L-root #fs-content dl.dl-horizontal {
    max-width: none !important;

    margin: 0 0 22px !important;
    padding: 22px 22px !important;

    border-radius: 18px !important;
  }

  #page-2L-root #fs-content dl.dl-horizontal .legend {
    font-size: 17px !important;
  }

  #page-2L-root #fs-content dl.dl-horizontal dt {
    float: none !important;
    width: auto !important;

    padding: 10px 0 2px !important;

    text-align: left !important;
  }

  #page-2L-root #fs-content dl.dl-horizontal dd {
    margin-left: 0 !important;
    padding: 0 0 12px !important;
  }
}

/* =========================================================
   課程內部頁｜課程資訊頁修正
   1. 取消前面 nth-of-type 誤隱藏
   2. 隱藏「其他資訊」標題，但保留開課單位
   3. 隱藏「課程教材」整塊
   4. 重做課程資訊標題與白色資訊卡置中
========================================================= */


/* =========================================================
   1. 取消前面 nth-of-type 誤隱藏
   避免把「開課單位」藏掉
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dt,
#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dd {
  display: block !important;
}


/* =========================================================
   2. 隱藏右側課程資訊頁麵包屑
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-breadcrumb,
#page-2L-root #fs-content .app-course_syllabus-breadcrumb .breadcrumb {
  display: none !important;
}


/* =========================================================
   3. 課程資訊頁標題樣式
   原本黑字黑線改成跟網站一致的白卡＋置中藍色標題
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header,
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile {
  max-width: 780px !important;
  width: 100% !important;

  margin: 0 auto 18px !important;
  padding: 22px 28px 18px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.055), transparent 46%),
    #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;

  text-align: center !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header h2,
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header .title,
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile .title {
  float: none !important;
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #17384d !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;

  text-align: center !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header .title::after,
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile .title::after {
  content: "" !important;
  display: block !important;

  width: 54px !important;
  height: 4px !important;

  margin: 10px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header .ext,
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile .fs-mobile-tools {
  display: none !important;
}


/* =========================================================
   4. 課程資訊白色資料卡置中
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) {
  max-width: 780px !important;
  width: 100% !important;

  margin: 0 auto 24px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) .fs-description {
  margin: 0 !important;
  padding: 0 !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) dl.dl-horizontal {
  max-width: 780px !important;
  width: 100% !important;

  margin: 0 auto !important;
  padding: 26px 32px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.04), transparent 46%),
    #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.065) !important;

  color: #17384d !important;
}


/* =========================================================
   5. 隱藏「其他資訊」標題，但保留下面的開課單位
   這頁第一張資料卡裡唯一的 legend 就是「其他資訊」
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) dl.dl-horizontal > .legend {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  overflow: hidden !important;
}


/* =========================================================
   6. 隱藏「課程教材」整塊
   因為課程內容頁已經有教材列表
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:has(#openTrialMaterialXtree),
#page-2L-root #fs-content .app-course_syllabus-syllabus #openTrialMaterialXtree {
  display: none !important;
}


/* =========================================================
   7. 資訊列樣式
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal::before,
#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal::after {
  content: none !important;
  display: none !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dt {
  float: left !important;
  clear: left !important;

  width: 132px !important;

  margin: 0 !important;
  padding: 10px 18px 10px 0 !important;

  color: #526b7a !important;
  background: transparent !important;

  border: 0 !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.65 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dd {
  margin-left: 152px !important;
  padding: 10px 0 !important;

  color: #17384d !important;
  background: transparent !important;

  border-bottom: 1px solid rgba(216, 229, 236, 0.75) !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;

  word-break: break-word !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dd:last-child {
  border-bottom: 0 !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dd > div {
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
  font-family: inherit !important;
  line-height: 1.75 !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dd a {
  color: #008dc5 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dd a:hover {
  color: #006f9f !important;
  text-decoration: none !important;
}

#page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal .fs-hint {
  color: #7b909d !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}


/* =========================================================
   8. 課程資訊頁底部登入 / 提示區
   例如：已通過課程，沒有提供退選的功能
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-signin {
  max-width: 780px !important;
  width: 100% !important;

  margin: 0 auto 22px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock {
  margin: 0 !important;
  padding: 14px 18px !important;

  color: #7b909d !important;
  background: #f8fbfd !important;

  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;

  font-size: 13px !important;
  line-height: 1.6 !important;
}


/* =========================================================
   9. 手機版
========================================================= */

@media (max-width: 767px) {
  #page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header,
  #page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile {
    max-width: none !important;

    margin: 0 0 16px !important;
    padding: 18px 20px 16px !important;

    border-radius: 18px !important;
  }

  #page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header .title,
  #page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile .title {
    font-size: 22px !important;
  }

  #page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) {
    max-width: none !important;
    margin: 0 0 22px !important;
  }

  #page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) dl.dl-horizontal {
    max-width: none !important;

    padding: 22px 22px !important;
    border-radius: 18px !important;
  }

  #page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dt {
    float: none !important;
    clear: none !important;

    width: auto !important;

    padding: 10px 0 2px !important;

    text-align: left !important;
  }

  #page-2L-root #fs-content .app-course_syllabus-syllabus dl.dl-horizontal dd {
    margin-left: 0 !important;
    padding: 0 0 12px !important;
  }

  #page-2L-root #fs-content .app-course_syllabus-signin {
    max-width: none !important;
  }
}

/* =========================================================
   課程內部頁｜退選區重新設計
   適用：
   1. 課程內容頁底部 .app-course-statusBar
   2. 課程資訊頁底部 .app-course_syllabus-signin
========================================================= */


/* =========================================================
   1. 課程內容頁｜尚未完成 / 退選整區
========================================================= */

#page-2L-root #fs-content .app-course-statusBar {
  max-width: none !important;
  width: 100% !important;

  margin: 20px 0 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 尚未完成提示：改成乾淨的提示條，不要像系統警告框 */
#page-2L-root #fs-content .app-course-statusBar .alert.alert-warning {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;

  margin: 0 0 10px !important;
  padding: 11px 16px !important;

  color: #7a5a18 !important;
  background: #fffaf0 !important;

  border: 1px solid #f1dfb7 !important;
  border-radius: 14px !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;

  box-shadow: none !important;
}

/* 取消之前可能加過的 ! 圓點 */
#page-2L-root #fs-content .app-course-statusBar .alert.alert-warning::before {
  content: none !important;
  display: none !important;
}

/* 退選區：獨立成一條低調操作列 */
#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  margin: 0 !important;
  padding: 8px 2px 0 !important;

  background: transparent !important;
  border: 0 !important;
}

/* 退選連結：低調次要按鈕 */
#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center > a[data-target*="confirmDropCourseModal"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  min-width: auto !important;
  height: 34px !important;

  padding: 0 13px !important;
  margin: 0 !important;

  color: #8a6b6b !important;
  background: #ffffff !important;

  border: 1px solid #ead6d6 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 4px 10px rgba(70, 40, 40, 0.035) !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

/* 退選 icon：用文字產生，不依賴 fontawesome */
#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center > a[data-target*="confirmDropCourseModal"]::before {
  content: "×" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 17px !important;
  height: 17px !important;

  color: #b56a6a !important;
  background: #fff3f3 !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

/* hover：明確但不刺眼 */
#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center > a[data-target*="confirmDropCourseModal"]:hover,
#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center > a[data-target*="confirmDropCourseModal"]:focus {
  color: #a94444 !important;
  background: #fff7f7 !important;
  border-color: #e2bcbc !important;

  text-decoration: none !important;

  box-shadow: 0 7px 16px rgba(169, 68, 68, 0.08) !important;
  transform: translateY(-1px) !important;
}


/* =========================================================
   2. 課程資訊頁｜退選 / 提示區
   常見文字：
   已通過課程，沒有提供退選的功能
   或未完成課程時會有退選入口
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-signin {
  max-width: 780px !important;
  width: 100% !important;

  margin: 0 auto 22px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 課程資訊頁底部提示整區 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 14px 18px !important;

  color: #7b909d !important;
  background: #f8fbfd !important;

  border: 1px solid #e5edf2 !important;
  border-radius: 16px !important;

  font-size: 13px !important;
  line-height: 1.6 !important;

  box-shadow: 0 6px 16px rgba(25, 58, 78, 0.035) !important;
}

/* 清掉空 p 造成的多餘高度 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:empty {
  display: none !important;
}

/* 提示文字 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-hint {
  margin: 0 !important;
  padding: 0 !important;

  color: #7b909d !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* 如果課程資訊頁也出現退選連結，一併套同樣風格 */
#page-2L-root #fs-content .app-course_syllabus-signin a[data-target*="confirmDropCourseModal"],
#page-2L-root #fs-content .app-course_syllabus-signin a[href="#"][data-toggle="modal"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  height: 34px !important;

  margin-top: 8px !important;
  padding: 0 13px !important;

  color: #8a6b6b !important;
  background: #ffffff !important;

  border: 1px solid #ead6d6 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 4px 10px rgba(70, 40, 40, 0.035) !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

#page-2L-root #fs-content .app-course_syllabus-signin a[data-target*="confirmDropCourseModal"]::before,
#page-2L-root #fs-content .app-course_syllabus-signin a[href="#"][data-toggle="modal"]::before {
  content: "×" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 17px !important;
  height: 17px !important;

  color: #b56a6a !important;
  background: #fff3f3 !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#page-2L-root #fs-content .app-course_syllabus-signin a[data-target*="confirmDropCourseModal"]:hover,
#page-2L-root #fs-content .app-course_syllabus-signin a[href="#"][data-toggle="modal"]:hover {
  color: #a94444 !important;
  background: #fff7f7 !important;
  border-color: #e2bcbc !important;

  text-decoration: none !important;

  box-shadow: 0 7px 16px rgba(169, 68, 68, 0.08) !important;
  transform: translateY(-1px) !important;
}


/* =========================================================
   3. 退選確認 Modal｜重新設計
========================================================= */

#page-2L-root [id^="confirmDropCourseModal_"] .modal-content {
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid #e5edf2 !important;
  border-radius: 20px !important;

  box-shadow: 0 18px 48px rgba(18, 45, 64, 0.22) !important;
}

#page-2L-root [id^="confirmDropCourseModal_"] .modal-header {
  padding: 20px 24px 16px !important;

  background:
    radial-gradient(circle at top center, rgba(169, 68, 68, 0.055), transparent 46%),
    #ffffff !important;

  border-bottom: 1px solid #f0e2e2 !important;
}

#page-2L-root [id^="confirmDropCourseModal_"] .modal-title {
  color: #7a4444 !important;

  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

#page-2L-root [id^="confirmDropCourseModal_"] .modal-body {
  padding: 24px 26px !important;

  color: #17384d !important;
  background: #ffffff !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

#page-2L-root [id^="confirmDropCourseModal_"] .modal-footer {
  padding: 14px 20px 20px !important;

  background: #fbfdfe !important;
  border-top: 1px solid #eef4f7 !important;

  text-align: center !important;
}

/* 確定退選：紅色破壞性按鈕 */
#page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 84px !important;
  height: 38px !important;

  padding: 0 18px !important;
  margin: 0 4px !important;

  color: #ffffff !important;
  background: #b65f5f !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  box-shadow: 0 6px 14px rgba(182, 95, 95, 0.22) !important;

  transition: all 0.18s ease !important;
}

#page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-primary:hover {
  background: #a94a4a !important;
  color: #ffffff !important;

  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(182, 95, 95, 0.28) !important;
}

/* 取消：中性按鈕 */
#page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 84px !important;
  height: 38px !important;

  padding: 0 18px !important;
  margin: 0 4px !important;

  color: #526b7a !important;
  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-shadow: none !important;

  transition: all 0.18s ease !important;
}

#page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-default:hover {
  color: #17384d !important;
  background: #f4f9fc !important;
  border-color: #c8dce6 !important;
}


/* =========================================================
   4. 手機版
========================================================= */

@media (max-width: 767px) {
  #page-2L-root #fs-content .app-course-statusBar .alert.alert-warning {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #page-2L-root #fs-content .app-course-statusBar .fs-p.text-center {
    justify-content: center !important;
    padding-top: 10px !important;
  }

  #page-2L-root #fs-content .app-course_syllabus-signin {
    max-width: none !important;
  }

  #page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-primary,
  #page-2L-root [id^="confirmDropCourseModal_"] .modal-footer .btn-default {
    min-width: 96px !important;
  }
}

/* =========================================================
   課程內部頁｜退選區最終修正
   1. 課程內容頁：直接隱藏退選
   2. 課程資訊頁：取消外層大框，只保留退選按鈕
========================================================= */


/* =========================================================
   1. 課程內容頁｜拔掉退選連結
   保留「課程尚未完成」提示，不顯示退選操作
========================================================= */

#page-2L-root #fs-content .app-course-statusBar .fs-p.text-center {
  display: none !important;
}

/* 如果某些課程的退選外層不是 fs-p，也補一層保險 */
#page-2L-root #fs-content .app-course-statusBar a[data-target*="confirmDropCourseModal"] {
  display: none !important;
}


/* =========================================================
   2. 課程資訊頁｜取消外層大框
   避免出現「大框包小框」
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-signin {
  max-width: 780px !important;
  width: 100% !important;

  margin: 0 auto 22px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 外層不再做成卡片 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  min-height: auto !important;
}

/* 清掉空白段落 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:empty {
  display: none !important;
}

/* 如果只有提示文字，例如「已通過課程，沒有提供退選的功能」 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-hint {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto !important;
  padding: 10px 16px !important;

  color: #7b909d !important;
  background: #f8fbfd !important;

  border: 1px solid #e5edf2 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;

  box-shadow: none !important;
}


/* =========================================================
   3. 課程資訊頁｜如果有退選按鈕，只保留單顆低調按鈕
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-signin a[data-target*="confirmDropCourseModal"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  width: auto !important;
  min-width: auto !important;
  height: 34px !important;

  margin: 0 auto !important;
  padding: 0 13px !important;

  color: #8a6b6b !important;
  background: #ffffff !important;

  border: 1px solid #ead6d6 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 4px 10px rgba(70, 40, 40, 0.035) !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

#page-2L-root #fs-content .app-course_syllabus-signin a[data-target*="confirmDropCourseModal"]::before {
  content: "×" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 17px !important;
  height: 17px !important;

  color: #b56a6a !important;
  background: #fff3f3 !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#page-2L-root #fs-content .app-course_syllabus-signin a[data-target*="confirmDropCourseModal"]:hover {
  color: #a94444 !important;
  background: #fff7f7 !important;
  border-color: #e2bcbc !important;

  text-decoration: none !important;

  box-shadow: 0 7px 16px rgba(169, 68, 68, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   課程資訊頁｜退選按鈕修正
   1. 不影響「已通過課程，沒有提供退選的功能」提示
   2. 只處理真正包含退選 modal 的 fs-p
   3. 拿掉外層藍色小框，只保留紅色退選按鈕
========================================================= */


/* 保留已通過課程提示，不隱藏 fs-hint */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-hint {
  display: block !important;

  margin: 0 !important;
  padding: 10px 16px !important;

  color: #7b909d !important;
  background: #f8fbfd !important;

  border: 1px solid #e5edf2 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}


/* 課程資訊頁底部 signin 區外層 */
#page-2L-root #fs-content .app-course_syllabus-signin {
  max-width: 780px !important;
  width: 100% !important;

  margin: -6px auto 18px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* fs-signInBlock 只作為容器，不要做成藍色卡片 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;
  height: auto !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* 空白段落隱藏，避免撐高 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:empty {
  display: none !important;
}


/* 只處理真正包著退選按鈕的 fs-p */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:has(a[data-target*="confirmDropCourseModal"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* 退選按鈕本體 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:has(a[data-target*="confirmDropCourseModal"]) > a[data-target*="confirmDropCourseModal"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  width: auto !important;
  min-width: auto !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  color: #9f5555 !important;
  background: #ffffff !important;

  border: 1px solid #e7caca !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 4px 10px rgba(169, 68, 68, 0.045) !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}


/* 退選按鈕小 icon */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:has(a[data-target*="confirmDropCourseModal"]) > a[data-target*="confirmDropCourseModal"]::before {
  content: "×" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 17px !important;
  height: 17px !important;

  color: #b56a6a !important;
  background: #fff3f3 !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}


/* hover */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:has(a[data-target*="confirmDropCourseModal"]) > a[data-target*="confirmDropCourseModal"]:hover,
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:has(a[data-target*="confirmDropCourseModal"]) > a[data-target*="confirmDropCourseModal"]:focus {
  color: #a94444 !important;
  background: #fff7f7 !important;
  border-color: #e2bcbc !important;

  text-decoration: none !important;

  box-shadow: 0 7px 16px rgba(169, 68, 68, 0.08) !important;
  transform: translateY(-1px) !important;
}


/* modal 外層不要被退選按鈕區影響 */
#page-2L-root #fs-content .app-course_syllabus-signin .fs-signInBlock .fs-p:has(a[data-target*="confirmDropCourseModal"]) .text-left {
  display: block !important;
}

/* =========================================================
   課程資訊頁｜標題與資訊卡左側對齊右欄
   修正 max-width + margin auto 造成的置中問題
========================================================= */

/* 課程資訊標題卡：不要置中縮寬，改成吃滿右側欄位 */
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header,
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile {
  max-width: none !important;
  width: 100% !important;

  margin: 0 0 18px 0 !important;
}

/* 課程資訊資料卡外層：不要置中 */
#page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) {
  max-width: none !important;
  width: 100% !important;

  margin: 0 0 24px 0 !important;
}

/* 課程資訊 dl 白卡：不要置中縮寬 */
#page-2L-root #fs-content .app-course_syllabus-syllabus > .fs-margin-large:not(:has(#openTrialMaterialXtree)) dl.dl-horizontal {
  max-width: none !important;
  width: 100% !important;

  margin: 0 !important;
}

/* =========================================================
   課程資訊頁｜右側標題卡高度對齊左側側欄
   修正右側藍框比左側高的問題
========================================================= */

#page-2L-root #fs-content .app-course_syllabus-syllabus {
  padding-top: 14px !important;
}

/* 避免標題卡自己再產生多餘上距 */
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header,
#page-2L-root #fs-content .app-course_syllabus-syllabus .fs-page-header-mobile {
  margin-top: 0 !important;
}

/* =========================================================
   課程內容頁｜學習紀錄彈窗 readlogModal 優化
   適用：點擊學習成果時間後出現的閱讀紀錄彈窗
========================================================= */


/* =========================================================
   1. Modal 外框
========================================================= */

#page-2L-root #readlogModal .modal-dialog {
  max-width: 760px !important;
  width: calc(100% - 32px) !important;

  margin: 72px auto 32px !important;
}

#page-2L-root #readlogModal .modal-content {
  overflow: hidden !important;

  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 22px !important;

  box-shadow: 0 18px 48px rgba(18, 45, 64, 0.22) !important;

  color: #17384d !important;
}


/* =========================================================
   2. Modal Header
========================================================= */

#page-2L-root #readlogModal .modal-header {
  position: relative !important;

  padding: 22px 28px 18px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.06), transparent 48%),
    #ffffff !important;

  border-bottom: 1px solid #e5edf2 !important;
}

#page-2L-root #readlogModal .modal-header::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 22px !important;

  width: 5px !important;
  height: 30px !important;

  background: linear-gradient(180deg, #008dc5 0%, #35bfd0 100%) !important;
  border-radius: 0 999px 999px 0 !important;
}

#page-2L-root #readlogModal .modal-title {
  margin: 0 !important;
  padding: 0 38px 0 0 !important;

  color: #00324f !important;

  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;

  text-align: left !important;
}


/* 關閉 X */
#page-2L-root #readlogModal .modal-header .close {
  position: absolute !important;
  right: 20px !important;
  top: 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #7b909d !important;
  background: #f4f9fc !important;

  border: 1px solid #e5edf2 !important;
  border-radius: 999px !important;

  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  opacity: 1 !important;
  text-shadow: none !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease !important;
}

#page-2L-root #readlogModal .modal-header .close:hover {
  color: #00324f !important;
  background: #eef6fa !important;
  border-color: #d8e5ec !important;

  transform: translateY(-1px) !important;
}

#page-2L-root #readlogModal .modal-header .close span {
  display: block !important;
  line-height: 1 !important;
}


/* =========================================================
   3. Modal Body
========================================================= */

#page-2L-root #readlogModal .modal-body {
  padding: 24px 28px 22px !important;

  color: #17384d !important;
  background: #ffffff !important;

  font-size: 14px !important;
  line-height: 1.7 !important;
}


/* =========================================================
   4. 表格外框
========================================================= */

#page-2L-root #readlogModal .fs-table {
  overflow: hidden !important;

  margin: 0 0 16px !important;
  padding: 0 !important;

  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-top: 3px solid #35aee2 !important;
  border-radius: 16px !important;

  box-shadow: none !important;
}

#page-2L-root #readlogModal .fs-table-responsive,
#page-2L-root #readlogModal .tableWidth {
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;

  overflow-x: auto !important;
}


/* =========================================================
   5. 表格本體
========================================================= */

#page-2L-root #readlogModal table,
#page-2L-root #readlogModal table.table,
#page-2L-root #readlogModal #readTimeTable {
  width: 100% !important;
  min-width: 620px !important;

  margin: 0 !important;

  background: #ffffff !important;

  border-collapse: collapse !important;
  table-layout: auto !important;
}

#page-2L-root #readlogModal #readTimeTable thead tr,
#page-2L-root #readlogModal #readTimeTable thead th {
  background: #f4f9fc !important;
}

#page-2L-root #readlogModal #readTimeTable thead th {
  padding: 12px 14px !important;

  color: #17384d !important;

  border: 0 !important;
  border-bottom: 1px solid #d8e5ec !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;

  text-align: center !important;
  white-space: nowrap !important;
}

#page-2L-root #readlogModal #readTimeTable tbody td {
  padding: 14px 14px !important;

  color: #17384d !important;
  background: #ffffff !important;

  border: 0 !important;
  border-top: 1px solid #eef3f6 !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;

  text-align: center !important;
  vertical-align: middle !important;
}

#page-2L-root #readlogModal #readTimeTable tbody tr:first-child td {
  border-top: 0 !important;
}

#page-2L-root #readlogModal #readTimeTable tbody tr:hover td {
  background: #f8fbfd !important;
}


/* 文字不要被 XMS+ 的 text-overflow 截斷 */
#page-2L-root #readlogModal #readTimeTable .text-overflow {
  max-width: none !important;
  width: auto !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}


/* IP 欄位稍微淡一點 */
#page-2L-root #readlogModal #readTimeTable .col-char7 {
  color: #526b7a !important;
  font-size: 12.5px !important;
}


/* =========================================================
   6. 有效時間摘要
========================================================= */

#page-2L-root #readlogModal .fs-text-bold {
  display: inline-flex !important;
  align-items: center !important;

  margin: 0 0 8px !important;
  padding: 9px 13px !important;

  color: #00324f !important;
  background: #f4f9fc !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

#page-2L-root #readlogModal .fs-text-bold::before {
  content: "✓" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px !important;
  height: 18px !important;

  margin-right: 7px !important;

  color: #ffffff !important;
  background: #35aee2 !important;

  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#page-2L-root #readlogModal .modal-body > .fs-hint {
  margin: 0 !important;
  padding: 0 !important;

  color: #7b909d !important;

  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}


/* =========================================================
   7. Footer / 關閉按鈕
========================================================= */

#page-2L-root #readlogModal .modal-footer {
  padding: 16px 22px 20px !important;

  background: #fbfdfe !important;

  border-top: 1px solid #eef4f7 !important;

  text-align: center !important;
}

#page-2L-root #readlogModal .modal-footer::before,
#page-2L-root #readlogModal .modal-footer::after {
  content: none !important;
  display: none !important;
}

#page-2L-root #readlogModal .modal-footer > div {
  display: flex !important;
  justify-content: center !important;
}

#page-2L-root #readlogModal .modal-footer .btn-default {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 92px !important;
  height: 38px !important;

  margin: 0 !important;
  padding: 0 18px !important;

  color: #526b7a !important;
  background: #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-shadow: none !important;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease !important;
}

#page-2L-root #readlogModal .modal-footer .btn-default:hover,
#page-2L-root #readlogModal .modal-footer .btn-default:focus {
  color: #00324f !important;
  background: #f4f9fc !important;
  border-color: #c8dce6 !important;

  transform: translateY(-1px) !important;
}


/* =========================================================
   8. 手機版
========================================================= */

@media (max-width: 767px) {
  #page-2L-root #readlogModal .modal-dialog {
    width: calc(100% - 20px) !important;
    margin: 56px auto 24px !important;
  }

  #page-2L-root #readlogModal .modal-header {
    padding: 20px 22px 16px !important;
  }

  #page-2L-root #readlogModal .modal-title {
    padding-right: 40px !important;

    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  #page-2L-root #readlogModal .modal-body {
    padding: 20px 18px 18px !important;
  }

  #page-2L-root #readlogModal table,
  #page-2L-root #readlogModal table.table,
  #page-2L-root #readlogModal #readTimeTable {
    min-width: 560px !important;
  }

  #page-2L-root #readlogModal #readTimeTable thead th,
  #page-2L-root #readlogModal #readTimeTable tbody td {
    padding: 11px 10px !important;
    font-size: 12.5px !important;
  }

  #page-2L-root #readlogModal .fs-text-bold {
    border-radius: 14px !important;
    white-space: normal !important;
  }
}

/* =========================================================
   影片教材頁｜整個下方資訊區隱藏
   隱藏包含左側媒體資訊 + 右側教材列表的整個 container
========================================================= */

/*#page-main > .container:has(#fs-media-content):has(#fs-sidebar) {
  display: none !important;
}*/

/* =========================================================
   課程資訊彈窗｜課程教材列表排版修正 強制版
   直接鎖定 #openTrialMaterialXtree，不用 JS、不用 :has()
========================================================= */

#openTrialMaterialXtree,
#openTrialMaterialXtree * {
  box-sizing: border-box !important;
}

/* 教材區外層置中 */
#openTrialMaterialXtree {
  width: 100% !important;
  max-width: 820px !important;

  margin: 0 auto !important;
  padding: 10px 28px 24px !important;

  background: #ffffff !important;
}

/* 清掉清單預設 */
#openTrialMaterialXtree > .xtree-list {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

/* 每一列 */
#openTrialMaterialXtree .xtree-node {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
}

/* 清掉 XMS+ 原本 header / center-part 版型 */
#openTrialMaterialXtree .xtree-node > .header,
#openTrialMaterialXtree .xtree-node > .header > .center-part {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
}

/* 關鍵：把 span.xtree-node-label 改成 grid */
#openTrialMaterialXtree .xtree-node-label {
  display: grid !important;
  grid-template-columns: 42px 28px minmax(0, 1fr) 64px !important;
  grid-template-areas: "sn icon title time" !important;
  align-items: center !important;
  column-gap: 12px !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-bottom: 1px solid #eef3f6 !important;

  background: transparent !important;
}

#openTrialMaterialXtree .xtree-node:last-child .xtree-node-label {
  border-bottom: 0 !important;
}

/* 強制解除 XMS+ float */
#openTrialMaterialXtree .xtree-node-label > .sn,
#openTrialMaterialXtree .xtree-node-label > .hint,
#openTrialMaterialXtree .xtree-node-label > .icon,
#openTrialMaterialXtree .xtree-node-label > .text {
  float: none !important;
  clear: none !important;
  position: static !important;

  display: block !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}

/* 編號 */
#openTrialMaterialXtree .xtree-node-label > .sn {
  grid-area: sn !important;

  color: #526b7a !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;

  text-align: left !important;
}

/* icon */
#openTrialMaterialXtree .xtree-node-label > .icon {
  grid-area: icon !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#openTrialMaterialXtree .xtree-node-label > .icon .fs-iconfont {
  color: #00324f !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* 標題 */
#openTrialMaterialXtree .xtree-node-label > .text {
  grid-area: title !important;

  color: #17384d !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;

  text-align: left !important;
}

/* 標題內層全部放開寬度 */
#openTrialMaterialXtree .xtree-node-label > .text .node-title,
#openTrialMaterialXtree .xtree-node-label > .text .fs-singleLineText {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* 標題文字截斷 */
#openTrialMaterialXtree .xtree-node-label > .text .text-overflow {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  color: #17384d !important;
}

/* 時間：雖然 HTML 在前面，但用 grid-area 放到最右 */
#openTrialMaterialXtree .xtree-node-label > .hint {
  grid-area: time !important;

  color: #7b909d !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  text-align: right !important;
  white-space: nowrap !important;
}

/* hover */
#openTrialMaterialXtree .xtree-node-label:hover {
  background: #f8fbfd !important;
}

/* =========================================================
   課程資訊彈窗｜報名成功後畫面簡化
   只保留「報名成功」與「進入課程」按鈕
========================================================= */


/* 報名成功區塊整體 */
.fs-signUpResponse {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  max-width: 520px !important;
  width: 100% !important;

  margin: 24px auto 26px !important;
  padding: 30px 28px !important;

  background:
    radial-gradient(circle at top center, rgba(0, 141, 197, 0.06), transparent 48%),
    #ffffff !important;

  border: 1px solid #d8e5ec !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 28px rgba(25, 58, 78, 0.075) !important;

  text-align: center !important;
}


/* 報名成功標題 */
.fs-signUpResponse .title {
  margin: 0 0 18px !important;
  padding: 0 !important;

  color: #00324f !important;

  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
}

.fs-signUpResponse .title::after {
  content: "" !important;
  display: block !important;

  width: 52px !important;
  height: 4px !important;

  margin: 12px auto 0 !important;

  background: linear-gradient(90deg, #008dc5 0%, #5fc2df 100%) !important;
  border-radius: 999px !important;
}


/* 隱藏「我的學習」說明文字 */
.fs-signUpResponse > div:nth-child(2) {
  display: none !important;
}


/* 進入課程按鈕外層 */
.fs-signUpResponse > div:nth-child(3) {
  display: flex !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* 進入課程按鈕 */
.fs-signUpResponse button.btn-primary,
.fs-signUpResponse .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 132px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 24px !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #008dc5 0%, #35bfd0 100%) !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;

  box-shadow: 0 8px 18px rgba(0, 141, 197, 0.22) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

.fs-signUpResponse button.btn-primary:hover,
.fs-signUpResponse .btn-primary:hover {
  color: #ffffff !important;

  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;

  box-shadow: 0 10px 22px rgba(0, 141, 197, 0.28) !important;
}


/* 隱藏寄信給我、退選等工具 */
.fs-signUpResponse .fs-p,
.fs-signUpResponse .fs-tools,
.fs-signUpResponse ul,
.fs-signUpResponse li,
.fs-signUpResponse a[title*="ics"],
.fs-signUpResponse a[data-target*="confirmDropCourseModal"] {
  display: none !important;
}

/* =========================================================
   課程資訊彈窗｜報名區塊去除灰色外框
   只保留「報名」按鈕
========================================================= */

/* 報名區外層不要有框、底色、陰影 */
.signin-at-top,
.signin-at-top .fs-signInBlock,
.app-course_syllabus-signin .signin-at-top,
.app-course_syllabus-signin .fs-signInBlock {
  margin: 0 auto 22px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 清掉空白錯誤訊息，避免撐出高度 */
.signin-at-top .fs-signInBlock .fs-text-error:empty,
.app-course_syllabus-signin .fs-signInBlock .fs-text-error:empty {
  display: none !important;
}

/* 報名按鈕所在的 fs-p 只作為置中容器，不要有外框 */
.signin-at-top .fs-signInBlock > .fs-p,
.app-course_syllabus-signin .fs-signInBlock > .fs-p {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  text-align: center !important;
}

/* 隱藏 hidden form 外層，不要撐空間 */
.signin-at-top .fs-signInBlock > .text-left,
.app-course_syllabus-signin .fs-signInBlock > .text-left {
  display: none !important;
}

/* 報名按鈕維持主按鈕樣式 */
.signin-at-top .js-signup.btn-primary,
.app-course_syllabus-signin .js-signup.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 120px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 24px !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #008dc5 0%, #35bfd0 100%) !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 8px 18px rgba(0, 141, 197, 0.22) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

.signin-at-top .js-signup.btn-primary:hover,
.app-course_syllabus-signin .js-signup.btn-primary:hover {
  color: #ffffff !important;
  text-decoration: none !important;

  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;

  box-shadow: 0 10px 22px rgba(0, 141, 197, 0.28) !important;
}

/* =========================================================
   臨時修正｜強制恢復所有課程頁麵包屑
   確認完成後可直接刪除整段
========================================================= */

/* 最新課程與我的學習：麵包屑外層 */
html.dkb-course-hub-page body #fs-content .app-course_latest-breadcrumb.app-course_latest-breadcrumb,
html.dkb-course-latest-page body #fs-content .app-course_latest-breadcrumb.app-course_latest-breadcrumb,
html.dkb-course-hub-page body #fs-content .dkb-breadcrumb-in-card.dkb-breadcrumb-in-card,
html.dkb-course-latest-page body #fs-content .dkb-breadcrumb-in-card.dkb-breadcrumb-in-card,
html.dkb-course-latest-page body #fs-content .dkb-original-breadcrumb-hidden.dkb-original-breadcrumb-hidden {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin-top: 0 !important;
  overflow: visible !important;
}

/* 最新課程與我的學習：麵包屑本體 */
html.dkb-course-hub-page body #fs-content .breadcrumb.breadcrumb,
html.dkb-course-latest-page body #fs-content .breadcrumb.breadcrumb {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  align-items: center !important;
  flex-wrap: wrap !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 0 14px !important;
  padding: 8px 0 !important;

  overflow: visible !important;
}

/* 課程內部頁：通用麵包屑外層 */
html body #page-2L-root #fs-content .app-course-breadcrumb.app-course-breadcrumb,
html body #page-2L-root #fs-content .app-course_syllabus-breadcrumb.app-course_syllabus-breadcrumb {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  overflow: visible !important;
}

/* 課程內部頁：麵包屑本體 */
html body #page-2L-root #fs-content .app-course-breadcrumb .breadcrumb.breadcrumb,
html body #page-2L-root #fs-content .app-course_syllabus-breadcrumb .breadcrumb.breadcrumb,
html body #page-2L-root #fs-content .breadcrumb.breadcrumb {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  align-items: center !important;
  flex-wrap: wrap !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 0 14px !important;
  padding: 8px 0 !important;

  overflow: visible !important;
}

/* 麵包屑項目 */
html body #fs-content .breadcrumb.breadcrumb > li {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  align-items: center !important;
  width: auto !important;
  height: auto !important;
}

/* 麵包屑文字與連結 */
html body #fs-content .breadcrumb.breadcrumb a,
html body #fs-content .breadcrumb.breadcrumb span,
html body #fs-content .breadcrumb.breadcrumb .active {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   臨時修正｜恢復所有 dl-horizontal 第 8 組內容
   後續刪除原本 nth-of-type(8) 規則後，可刪除此段
========================================================= */

#page-2L-root #fs-content dl.dl-horizontal dt:nth-of-type(8),
#page-2L-root #fs-content dl.dl-horizontal dd:nth-of-type(8) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   NCCU DKB｜課程中心 Hero
   配色與視覺調性對齊新版首頁
========================================================= */

.course-center-intro {
  --cc-primary: #008dc5;
  --cc-primary-dark: #006f9b;
  --cc-primary-deep: #003f5c;

  --cc-cyan: #35bfd0;
  --cc-cyan-soft: #dff5fa;

  --cc-ink: #1f3443;
  --cc-ink-deep: #17384d;
  --cc-muted: #5d6f7b;
  --cc-muted-light: #7b8b95;

  --cc-white: #ffffff;
  --cc-surface: #f8fbfd;
  --cc-soft: #eef7fb;
  --cc-border: #dce9ef;

  box-sizing: border-box;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto 42px;
  padding: 0;

  color: var(--cc-ink);
  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    "Microsoft JhengHei",
    "微軟正黑體",
    sans-serif;
}

.course-center-intro *,
.course-center-intro *::before,
.course-center-intro *::after {
  box-sizing: border-box;
}


/* =========================================================
   1. Hero 外框
========================================================= */

.course-center-hero {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(300px, 0.82fr);

  align-items: center;
  gap: 42px;

  width: 100%;
  min-height: 390px;

  padding: 40px 46px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(53, 191, 208, 0.18) 0%,
      rgba(53, 191, 208, 0.06) 28%,
      transparent 52%
    ),
    radial-gradient(
      circle at 8% 88%,
      rgba(0, 141, 197, 0.10) 0%,
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5fbfd 46%,
      #edf8fb 100%
    );

  border: 1px solid rgba(0, 141, 197, 0.13);
  border-radius: 28px;

  box-shadow:
    0 18px 40px rgba(18, 42, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}


/* 背景裝飾圓 */

.course-center-hero::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -110px;
  right: -90px;

  width: 310px;
  height: 310px;

  border: 1px solid rgba(0, 141, 197, 0.10);
  border-radius: 50%;

  box-shadow:
    0 0 0 38px rgba(0, 141, 197, 0.028),
    0 0 0 76px rgba(53, 191, 208, 0.018);

  pointer-events: none;
}


/* 左下柔和裝飾 */

.course-center-hero::after {
  content: "";

  position: absolute;
  z-index: -1;

  left: -75px;
  bottom: -105px;

  width: 240px;
  height: 240px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 141, 197, 0.11) 0%,
      rgba(0, 141, 197, 0.04) 48%,
      transparent 72%
    );

  pointer-events: none;
}


/* =========================================================
   2. 左側文案
========================================================= */

.course-center-hero-copy {
  position: relative;
  z-index: 2;

  min-width: 0;
  max-width: 650px;
}


/* 英文／上方小標 */

.course-center-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin: 0 0 10px;

  color: var(--cc-primary);

  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.16em;
}


/* 小標前圓點 */

.course-center-eyebrow::before {
  content: "";

  display: inline-block;
  flex: 0 0 auto;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    var(--cc-primary) 0%,
    var(--cc-cyan) 100%
  );

  box-shadow:
    0 0 0 5px rgba(0, 141, 197, 0.08),
    0 0 14px rgba(0, 141, 197, 0.18);
}


/* 主標題 */

.course-center-title {
  margin: 0;

  color: var(--cc-ink);

  font-size: clamp(38px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.01em;
}


/* 主標題下方短線 */

.course-center-title::after {
  content: "";

  display: block;

  width: 72px;
  height: 5px;

  margin-top: 15px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--cc-primary) 0%,
    var(--cc-cyan) 100%
  );

  box-shadow:
    0 5px 14px rgba(0, 141, 197, 0.16);
}


/* Hero 說明 */

.course-center-lead {
  max-width: 610px;

  margin: 17px 0 0;

  color: var(--cc-muted);

  font-size: 16px;
  font-weight: 500;
  line-height: 1.78;
  letter-spacing: 0.01em;
}


/* =========================================================
   3. 學習影音分類切換
========================================================= */

.course-type-switch {
  margin-top: 24px;
}


/* 分類標題 */

.course-type-switch-title {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0 0 11px;

  color: var(--cc-ink);

  font-size: 15px;
  font-weight: 850;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.course-type-switch-title::before {
  content: "";

  display: block;
  flex: 0 0 auto;

  width: 4px;
  height: 18px;

  border-radius: 999px;

  background: linear-gradient(
    180deg,
    var(--cc-primary) 0%,
    var(--cc-cyan) 100%
  );
}


/* 分類按鈕列 */

.course-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  width: 100%;
}


/* 分類切換按鈕 */

.course-type-tab {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;

  margin: 0;
  padding: 8px 14px;

  background: rgba(255, 255, 255, 0.78);

  border: 1px solid rgba(0, 141, 197, 0.18);
  border-radius: 999px;

  color: var(--cc-muted);

  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  white-space: nowrap;

  cursor: pointer;

  box-shadow:
    0 4px 12px rgba(18, 42, 61, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.course-type-tab:hover {
  color: var(--cc-primary-dark);

  background: #ffffff;
  border-color: rgba(0, 141, 197, 0.45);

  box-shadow:
    0 8px 18px rgba(0, 141, 197, 0.09);

  transform: translateY(-1px);
}

.course-type-tab.is-active {
  color: #ffffff;

  background: linear-gradient(
    135deg,
    var(--cc-primary) 0%,
    #0078aa 100%
  );

  border-color: var(--cc-primary);

  box-shadow:
    0 8px 18px rgba(0, 141, 197, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  transform: none;
}

.course-type-tab:focus {
  outline: none;
}

.course-type-tab:focus-visible {
  outline: 3px solid rgba(0, 141, 197, 0.24);
  outline-offset: 3px;
}


/* =========================================================
   4. 分類說明面板
========================================================= */

.course-type-panel {
  position: relative;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 15px;

  width: 100%;
  min-height: 105px;

  margin-top: 12px;
  padding: 15px 17px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(246, 252, 254, 0.88) 100%
    );

  border: 1px solid rgba(0, 141, 197, 0.14);
  border-radius: 15px;

  box-shadow:
    0 8px 22px rgba(18, 42, 61, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}


/* 面板左側小裝飾 */

.course-type-panel::before {
  content: "";

  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;

  width: 3px;

  border-radius: 0 999px 999px 0;

  background: linear-gradient(
    180deg,
    var(--cc-primary) 0%,
    var(--cc-cyan) 100%
  );
}


/* 分類圖示框 */

.course-type-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #eef9fc 0%,
      #dff3f8 100%
    );

  border: 1px solid rgba(0, 141, 197, 0.13);
  border-radius: 13px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.course-type-panel-icon img {
  display: block;

  width: 31px;
  height: 31px;
  max-width: 31px;
  max-height: 31px;

  object-fit: contain;
}


/* 無圖片時的播放圖示 */

.course-type-fallback-icon {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  overflow: hidden;

  color: transparent;

  font-size: 0;
}

.course-type-fallback-icon::before {
  content: "";

  display: block;

  width: 27px;
  height: 27px;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    var(--cc-primary) 0%,
    var(--cc-cyan) 100%
  );

  box-shadow:
    0 5px 12px rgba(0, 141, 197, 0.18);
}

.course-type-fallback-icon::after {
  content: "";

  position: absolute;
  left: 11px;
  top: 8px;

  width: 0;
  height: 0;

  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  border-left: 8px solid #ffffff;
}


/* 分類內容 */

.course-type-panel-copy {
  min-width: 0;
}

.course-type-panel-name {
  margin: 0;

  color: var(--cc-ink-deep);

  font-size: 17px;
  font-weight: 850;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.course-type-panel-desc {
  margin: 5px 0 0;

  color: var(--cc-muted);

  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.66;
}


/* =========================================================
   5. 右側主意象
========================================================= */

.course-center-hero-visual {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  width: 100%;
}


/* 實際主意象圖片 */

.course-center-hero-image {
  display: block;

  width: 100%;
  max-width: 440px;
  max-height: 310px;
  height: auto;

  object-fit: contain;
  object-position: center;

  filter:
    drop-shadow(
      0 18px 24px rgba(18, 42, 61, 0.12)
    );
}


/* 尚未放入主圖時的預留區 */

.course-center-hero-placeholder {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 270px;

  padding: 30px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 22%,
      rgba(255, 255, 255, 0.22) 0%,
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #008dc5 0%,
      #0078aa 54%,
      #00668f 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 24px;

  color: #ffffff;
  text-align: center;

  box-shadow:
    0 20px 38px rgba(0, 111, 155, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


/* 預留區裝飾光圈 */

.course-center-hero-placeholder::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;

  box-shadow:
    0 0 0 28px rgba(255, 255, 255, 0.038),
    0 0 0 56px rgba(255, 255, 255, 0.024);
}


/* 預留區內文字保持前景 */

.course-center-hero-placeholder > * {
  position: relative;
  z-index: 1;
}

.course-center-placeholder-symbol {
  color: #ffffff;

  font-size: 52px;
  line-height: 1;

  text-shadow:
    0 8px 22px rgba(0, 57, 83, 0.24);
}

.course-center-placeholder-text {
  margin-top: 14px;

  color: rgba(255, 255, 255, 0.92);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}


/* =========================================================
   6. 平板
========================================================= */

@media (max-width: 991px) {
  .course-center-intro {
    margin-bottom: 36px;
  }

  .course-center-hero {
    grid-template-columns:
      minmax(0, 1.18fr)
      minmax(250px, 0.82fr);

    gap: 30px;

    min-height: 370px;

    padding: 34px 36px;

    border-radius: 24px;
  }

  .course-center-title {
    font-size: 40px;
  }

  .course-center-lead {
    font-size: 15.5px;
  }

  .course-type-tab {
    padding: 7px 11px;
    font-size: 12.5px;
  }

  .course-type-panel {
    grid-template-columns:
      44px
      minmax(0, 1fr);

    gap: 13px;

    min-height: 101px;

    padding: 14px 15px;
  }

  .course-type-panel-icon {
    width: 44px;
    height: 44px;
  }

  .course-type-panel-icon img {
    width: 28px;
    height: 28px;
  }

  .course-center-hero-placeholder {
    min-height: 235px;
    border-radius: 20px;
  }
}


/* =========================================================
   7. 手機
========================================================= */

@media (max-width: 767px) {
  .course-center-intro {
    margin-bottom: 30px;
  }

  .course-center-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 25px;

    min-height: 0;

    padding: 28px 22px 22px;

    border-radius: 20px;

    box-shadow:
      0 12px 28px rgba(18, 42, 61, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .course-center-hero::before {
    top: -145px;
    right: -145px;
  }

  .course-center-hero-copy,
  .course-center-hero-visual {
    width: 100%;
    max-width: none;
  }

  .course-center-eyebrow {
    font-size: 12px;
  }

  .course-center-title {
    font-size: 34px;
  }

  .course-center-title::after {
    width: 58px;
    height: 4px;
    margin-top: 12px;
  }

  .course-center-lead {
    margin-top: 14px;

    font-size: 15px;
    line-height: 1.72;
  }

  .course-type-switch {
    margin-top: 21px;
  }

  .course-type-switch-title {
    font-size: 14.5px;
  }

  .course-type-tabs {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;
  }

  .course-type-tab {
    width: 100%;
    min-height: 39px;

    padding: 8px 7px;

    border-radius: 11px;

    font-size: 12.5px;
    text-align: center;
    white-space: normal;
  }

  .course-type-panel {
    grid-template-columns:
      43px
      minmax(0, 1fr);

    gap: 12px;

    min-height: 0;

    margin-top: 10px;
    padding: 14px;
  }

  .course-type-panel-icon {
    width: 43px;
    height: 43px;
    border-radius: 11px;
  }

  .course-type-panel-name {
    font-size: 16px;
  }

  .course-type-panel-desc {
    font-size: 13px;
    line-height: 1.62;
  }

  .course-center-hero-image {
    max-width: 410px;
    max-height: 235px;
  }

  .course-center-hero-placeholder {
    min-height: 180px;

    padding: 24px;

    border-radius: 18px;
  }

  .course-center-placeholder-symbol {
    font-size: 44px;
  }

  .course-center-placeholder-text {
    margin-top: 11px;
    font-size: 13px;
  }
}


/* =========================================================
   8. 極小手機
========================================================= */

@media (max-width: 420px) {
  .course-center-hero {
    padding: 25px 18px 18px;
  }

  .course-center-title {
    font-size: 31px;
  }

  .course-center-lead {
    font-size: 14.5px;
  }

  .course-type-tabs {
    grid-template-columns: 1fr;
  }

  .course-type-tab {
    min-height: 38px;
  }

  .course-type-panel {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .course-type-panel-icon {
    margin: 0 auto;
  }
}


/* =========================================================
   9. 減少動態效果
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .course-center-intro *,
  .course-center-intro *::before,
  .course-center-intro *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   NCCU DKB｜全站頂端導覽固定
   只固定真正的導覽列
   不處理 .fs-course-banner
========================================================= */

/* 第一層 */
body .fs-sysbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  z-index: 99999 !important;

  background: #ffffff !important;
}

/* 第二層：只有頁面真的存在 fs-sitebar 才固定 */
body .fs-sitebar {
  position: fixed !important;

  top: var(--dkb-sysbar-height, 0px) !important;

  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  z-index: 99998 !important;
}

/* 課程 Banner 明確恢復正常定位 */
body .fs-course-banner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  z-index: auto !important;
}

/* =========================================================
   COURSE V2｜課程內頁 Banner 固定
   第一層：.fs-sysbar
   第二層：.fs-course-banner
========================================================= */

/* 課程內頁的第二層 Banner */
html.dkb-course-v2 .fs-course-banner {
  position: fixed !important;

  top: var(--dkb-fixed-sysbar-height, 49px) !important;

  left: 0 !important;
  right: 0 !important;

  width: 100% !important;

  margin: 0 !important;

  z-index: 9998 !important;

  /* 保留原本 inline background-image */
  background-color: #ffffff !important;

  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.06) !important;
}


/* fixed 後補回 Banner 原本佔用的空間 */
html.dkb-course-v2 .dkb-course-banner-spacer {
  display: block !important;

  width: 100% !important;

  height:
    var(--dkb-course-banner-height, 0px) !important;
}


/* 手機版原本就 hidden-sm hidden-xs，不做固定 */
@media (max-width: 991px) {

  html.dkb-course-v2 .fs-course-banner {
    position: static !important;
    top: auto !important;
  }

  html.dkb-course-v2 .dkb-course-banner-spacer {
    display: none !important;
  }

}

/* =========================================================
   NCCU DKB｜COURSE V2
   僅所有 /course 開頭頁面生效
========================================================= */


/* =========================================================
   1. 全局基礎樣式
   僅 /course
========================================================= */

html.dkb-course-v2 body,
html.dkb-course-v2 .body-tmpl-modal {
  background-color: #fafafa !important;
  background-image: none !important;
}

html.dkb-course-v2,
html.dkb-course-v2 body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html.dkb-course-v2 .common-ninja-widget,
html.dkb-course-v2 .fs-main-container,
html.dkb-course-v2 main {
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* =========================================================
   2. 系統選單
   最頂端藍色導覽列
========================================================= */

html.dkb-course-v2 .fs-sysbar.navbar-inverse,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse,
html.dkb-course-v2 .fs-mobile-navbar {
  background-color: #008dc5 !important;
  background-image: none !important;

  border-radius: 0 !important;
  border: none !important;

  padding-top: 7px !important;
  padding-bottom: 7px !important;

  min-height: 35px !important;
}


/* 系統列文字 / icon */

html.dkb-course-v2 .fs-sysbar.navbar-inverse a,
html.dkb-course-v2 .fs-sysbar.navbar-inverse span,
html.dkb-course-v2 .fs-sysbar.navbar-inverse i,
html.dkb-course-v2 .fs-sysbar.navbar-inverse div,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse a,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse span,
html.dkb-course-v2 .fs-mobile-navbar a,
html.dkb-course-v2 .fs-mobile-navbar span,
html.dkb-course-v2 .fs-mobile-navbar i {
  color: #ffffff !important;
}


/* 系統列 hover */

html.dkb-course-v2 .fs-sysbar.navbar-inverse a:hover,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse a:hover,
html.dkb-course-v2 .fs-mobile-navbar a:hover {
  color: #ffffff !important;

  background-color: rgba(255, 255, 255, 0.15) !important;

  border-radius: 4px !important;

  text-decoration: none !important;
}


/* Logo / 網站名稱 hover 不顯示色塊 */

html.dkb-course-v2 .fs-sysbar.navbar-inverse .navbar-brand:hover,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .navbar-brand:hover,
html.dkb-course-v2 .fs-sysbar.navbar-inverse .navbar-header a:hover {
  background-color: transparent !important;

  color: #ffffff !important;

  text-decoration: none !important;
}


/* 展開中項目 */

html.dkb-course-v2 .fs-sysbar.navbar-inverse .open > a,
html.dkb-course-v2 .fs-sysbar.navbar-inverse .open > a:hover,
html.dkb-course-v2 .fs-sysbar.navbar-inverse .open > a:focus,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .open > a,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .open > a:hover,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .open > a:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;

  color: #ffffff !important;

  border-radius: 4px !important;
}


/* =========================================================
   2-1. 系統列下拉選單
========================================================= */

html.dkb-course-v2 .fs-sysbar .dropdown-menu,
html.dkb-course-v2 .fs-mobile-navbar .dropdown-menu {
  background-color: #ffffff !important;

  border: 1px solid #e0e0e0 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

  border-radius: 4px !important;

  padding: 5px 0 !important;
}


/* 下拉項目 */

html.dkb-course-v2 .fs-sysbar.navbar-inverse .dropdown-menu > li > a,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .dropdown-menu > li > a {
  padding: 8px 20px !important;

  font-weight: normal !important;

  background-color: transparent !important;
}


/* 下拉文字 */

html.dkb-course-v2 .fs-sysbar.navbar-inverse .dropdown-menu > li > a,
html.dkb-course-v2 .fs-sysbar.navbar-inverse .dropdown-menu > li > a span,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .dropdown-menu > li > a,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .dropdown-menu > li > a span {
  color: #333333 !important;
}


/* 下拉 hover */

html.dkb-course-v2 .fs-sysbar.navbar-inverse .dropdown-menu > li > a:hover,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .dropdown-menu > li > a:hover {
  background-color: #f5f5f5 !important;
}


html.dkb-course-v2 .fs-sysbar.navbar-inverse .dropdown-menu > li > a:hover,
html.dkb-course-v2 .fs-sysbar.navbar-inverse .dropdown-menu > li > a:hover span,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .dropdown-menu > li > a:hover,
html.dkb-course-v2 .fs-mobile-navbar .navbar-inverse .dropdown-menu > li > a:hover span {
  color: #008dc5 !important;
}


/* =========================================================
   2-2. 手機展開選單
========================================================= */

html.dkb-course-v2 .fs-mobile-navbar .navbar-collapse,
html.dkb-course-v2 .fs-mobile-navbar .dropdown-menu {
  background-color: #ffffff !important;

  border-top: 2px solid #008dc5 !important;
}


html.dkb-course-v2 .fs-mobile-navbar .navbar-collapse a,
html.dkb-course-v2 .fs-mobile-navbar .navbar-collapse span,
html.dkb-course-v2 .fs-mobile-navbar .dropdown-menu a,
html.dkb-course-v2 .fs-mobile-navbar .dropdown-menu span {
  color: #333333 !important;

  text-shadow: none !important;
}


html.dkb-course-v2 .fs-mobile-navbar .navbar-collapse a:hover,
html.dkb-course-v2 .fs-mobile-navbar .navbar-collapse a:focus,
html.dkb-course-v2 .fs-mobile-navbar .dropdown-menu a:hover,
html.dkb-course-v2 .fs-mobile-navbar .dropdown-menu a:focus {
  background-color: #f8f9fa !important;

  color: #008dc5 !important;

  border-radius: 0 !important;
}


@media (max-width: 991px) {

  html.dkb-course-v2 .fs-mobile-navbar {
    background-color: #008dc5 !important;
  }

}


/* =========================================================
   3. 網站選單
   第二條白色主要導覽列
========================================================= */

html.dkb-course-v2 .fs-sitebar {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;

  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #eaeaea !important;

  height: 55px !important;
  min-height: 55px !important;

  display: block;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}


/* 網站選單項目 */

html.dkb-course-v2 .fs-sitebar .nav > li > a {
  height: 55px !important;

  line-height: 55px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;

  color: #6c6c6c !important;

  font-weight: 500 !important;

  background-color: transparent !important;

  transition:
    color 0.25s ease,
    background-color 0.25s ease !important;
}


/* 網站選單 hover */

html.dkb-course-v2 .fs-sitebar .nav > li > a:hover,
html.dkb-course-v2 .fs-sitebar .nav > li > a:focus {
  color: #008dc5 !important;

  background-color: #f5f5f5 !important;

  text-decoration: none !important;
}


/* 網站選單目前頁面 */

html.dkb-course-v2 .fs-sitebar .nav > li.active > a,
html.dkb-course-v2 .fs-sitebar .nav > li.active > a:hover,
html.dkb-course-v2 .fs-sitebar .nav > li.active > a:focus {
  color: #008dc5 !important;

  background-color: #f5f5f5 !important;
}


/* 網站選單下拉選單 */

html.dkb-course-v2 .fs-sitebar .dropdown-menu {
  background-color: #ffffff !important;

  border: 1px solid #e6e6e6 !important;

  border-radius: 6px !important;

  padding: 6px 0 !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
}


html.dkb-course-v2 .fs-sitebar .dropdown-menu > li > a {
  height: auto !important;

  line-height: 1.5 !important;

  padding: 9px 18px !important;

  color: #555555 !important;

  background: transparent !important;
}


html.dkb-course-v2 .fs-sitebar .dropdown-menu > li > a:hover,
html.dkb-course-v2 .fs-sitebar .dropdown-menu > li > a:focus {
  color: #008dc5 !important;

  background-color: #f5f8fa !important;
}


/* =========================================================
   4. 主要內容容器
========================================================= */

html.dkb-course-v2 .fs-content,
html.dkb-course-v2 #fs-media-content {
  background-color: #ffffff !important;

  border: 1px solid #e6eef3 !important;

  border-radius: 8px !important;

  box-shadow:
    0 4px 15px rgba(21, 91, 112, 0.025) !important;

  padding: 30px !important;

  margin-top: 20px !important;
}

/* =========================================================
   NCCU DKB｜課程中心 Hero｜五大類型版
========================================================= */


/* =========================================================
   0. 基礎
========================================================= */

html.dkb-course-hub-page .course-center-intro,
html.dkb-course-hub-page .course-center-intro * {
  box-sizing: border-box !important;
}


/* =========================================================
   1. Hero 外框
========================================================= */

html.dkb-course-hub-page .course-center-intro {
  position: relative !important;

  width: calc(100% - 40px) !important;
  max-width: 1200px !important;

  margin: 38px auto 46px !important;
  padding: 62px 52px 52px !important;

  overflow: hidden !important;

  background:
    #ffffff !important;

  border:
    1px solid #e8eef2 !important;

  border-radius:
    24px !important;

  box-shadow:
    0 12px 34px
    rgba(18, 42, 61, 0.055) !important;

  isolation: isolate !important;
}


/* =========================================================
   2. 課程中心背景意象圖
========================================================= */

html.dkb-course-hub-page
.course-center-hero-art {
  position: absolute !important;

  inset: 0 !important;

  z-index: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;
  user-select: none !important;
}


html.dkb-course-hub-page
.course-center-hero-bg {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 78% !important;
  height: 94% !important;

  max-width: none !important;
  max-height: none !important;

  transform:
    translate(-50%, -50%) !important;

  object-fit: contain !important;
  object-position:
    center center !important;

  /*
    課程中心意象圖透明程度

    0.05 = 非常淡
    0.08 = 建議
    0.12 = 明顯
    0.18 = 偏重
  */

  opacity: 0 !important;

  filter:
    saturate(0.92)
    contrast(0.96) !important;

  pointer-events: none !important;
  user-select: none !important;
}

/* =========================================================
   課程中心標題｜清除舊裝飾線
========================================================= */

html.dkb-course-hub-page
.course-center-intro::before,

html.dkb-course-hub-page
.course-center-intro::after,

html.dkb-course-hub-page
.course-center-heading::before,

html.dkb-course-hub-page
.course-center-heading::after,

html.dkb-course-hub-page
.course-center-title::before {
  content: none !important;
  display: none !important;
}


/* =========================================================
   課程中心標題｜置中短線
========================================================= */

html.dkb-course-hub-page
.course-center-title::after {
  content: "" !important;

  display: block !important;
  position: static !important;

  width: 72px !important;
  height: 4px !important;

  margin: 14px auto 0 !important;

  background:
    linear-gradient(
      90deg,
      #008dc5 0%,
      #65bddf 100%
    ) !important;

  border-radius: 999px !important;

  transform: none !important;
}
/* =========================================================
   3. 實際內容層
========================================================= */

html.dkb-course-hub-page
.course-center-inner {
  position: relative !important;

  z-index: 2 !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   4. 標題區
========================================================= */

html.dkb-course-hub-page
.course-center-heading {
  position: relative !important;

  width: 100% !important;

  margin: 0 auto !important;

  text-align: center !important;
}


html.dkb-course-hub-page
.course-center-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #172f3f !important;

  font-size:
    clamp(
      34px,
      3vw,
      42px
    ) !important;

  font-weight: 900 !important;

  line-height: 1.2 !important;

  letter-spacing:
    0.055em !important;

  text-align: center !important;
}


html.dkb-course-hub-page
.course-center-lead {
  width: 100% !important;
  max-width: 860px !important;

  margin:
    18px auto 0 !important;

  padding: 0 !important;

  color: #536874 !important;

  font-size: 15px !important;
  font-weight: 500 !important;

  line-height: 1.85 !important;

  letter-spacing:
    0.01em !important;

  text-align: center !important;
}


/* =========================================================
   5. 搜尋區
========================================================= */

html.dkb-course-hub-page
.course-center-search {
  display: block !important;

  width: 100% !important;
  max-width: 1040px !important;

  margin:
    32px auto 0 !important;

  padding: 0 !important;
}


html.dkb-course-hub-page
.course-center-search-box {
  position: relative !important;

  display: flex !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


html.dkb-course-hub-page
.course-center-search-input {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: block !important;

  width: 100% !important;
  height: 50px !important;

  margin: 0 !important;

  padding:
    0 54px 0 18px !important;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    ) !important;

  border:
    1px solid #aebac1 !important;

  border-radius:
    6px !important;

  outline: none !important;

  color: #263b49 !important;

  font-family:
    inherit !important;

  font-size: 14px !important;
  font-weight: 500 !important;

  line-height: 50px !important;

  box-shadow:
    0 2px 8px
    rgba(
      18,
      42,
      61,
      0.025
    ) !important;

  transition:
    border-color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease !important;
}


html.dkb-course-hub-page
.course-center-search-input::placeholder {
  color: #8c989f !important;
  opacity: 1 !important;
}


html.dkb-course-hub-page
.course-center-search-input:hover {
  border-color:
    #899ba5 !important;
}


html.dkb-course-hub-page
.course-center-search-input:focus {
  background:
    #ffffff !important;

  border-color:
    #008dc5 !important;

  box-shadow:
    0 0 0 3px
    rgba(
      0,
      141,
      197,
      0.10
    ) !important;
}


/* =========================================================
   6. 搜尋按鈕
========================================================= */

html.dkb-course-hub-page
.course-center-search-submit {
  position: absolute !important;

  top: 50% !important;
  right: 6px !important;

  width: 38px !important;
  height: 38px !important;

  transform:
    translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    transparent !important;

  border: 0 !important;
  border-radius: 6px !important;

  outline: none !important;

  cursor: pointer !important;

  box-shadow: none !important;

  transition:
    background-color 0.2s ease !important;
}


html.dkb-course-hub-page
.course-center-search-submit:hover {
  background:
    rgba(
      0,
      141,
      197,
      0.08
    ) !important;
}


/* =========================================================
   7. 純 CSS 搜尋圖示
========================================================= */

html.dkb-course-hub-page
.course-center-search-icon {
  position: relative !important;

  display: block !important;

  width: 15px !important;
  height: 15px !important;

  border:
    2px solid #718a98 !important;

  border-radius:
    50% !important;
}


html.dkb-course-hub-page
.course-center-search-icon::after {
  content: "" !important;

  position: absolute !important;

  width: 7px !important;
  height: 2px !important;

  right: -6px !important;
  bottom: -3px !important;

  background:
    #718a98 !important;

  border-radius:
    999px !important;

  transform:
    rotate(45deg) !important;

  transform-origin:
    left center !important;
}


html.dkb-course-hub-page
.course-center-search-submit:hover
.course-center-search-icon {
  border-color:
    #008dc5 !important;
}


html.dkb-course-hub-page
.course-center-search-submit:hover
.course-center-search-icon::after {
  background:
    #008dc5 !important;
}


/* =========================================================
   8. 五大課程類型
========================================================= */

html.dkb-course-hub-page
.course-center-types {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    ) !important;

  gap:
    26px !important;

  width: 100% !important;

  margin:
    42px auto 0 !important;

  padding: 0 !important;

  align-items:
    start !important;
}


/* =========================================================
   9. 每一種類型
========================================================= */

html.dkb-course-hub-page
.course-center-type-item {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 4px !important;

  background:
    transparent !important;

  border: 0 !important;

  text-align: left !important;
}


/* =========================================================
   10. 五大類型 LOGO
========================================================= */

html.dkb-course-hub-page
.course-center-type-logo {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 58px !important;
  height: 58px !important;

  margin:
    0 0 17px 0 !important;

  padding: 0 !important;

  flex:
    0 0 58px !important;
}


html.dkb-course-hub-page
.course-center-type-logo img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 58px !important;
  max-height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;
}


/*
  尚未填入 LOGO 時，
  保留相同高度但完全隱形。
*/

html.dkb-course-hub-page
.course-center-type-logo.is-placeholder {
  visibility: hidden !important;
  opacity: 0 !important;
}


/* =========================================================
   11. 類型名稱
========================================================= */

html.dkb-course-hub-page
.course-center-type-name {
  width: 100% !important;

  margin:
    0 0 10px 0 !important;

  padding: 0 !important;

  color:
    #4f7f9f !important;

  font-size:
    15px !important;

  font-weight:
    800 !important;

  line-height:
    1.4 !important;

  letter-spacing:
    0.02em !important;

  text-align:
    left !important;
}


/* =========================================================
   12. 類型說明
========================================================= */

html.dkb-course-hub-page
.course-center-type-desc {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    #687882 !important;

  font-size:
    12px !important;

  font-weight:
    450 !important;

  line-height:
    1.7 !important;

  letter-spacing:
    0.005em !important;

  text-align:
    left !important;
}


/* =========================================================
   13. 無障礙隱藏 Label
========================================================= */

html.dkb-course-hub-page
.course-center-sr-only {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space:
    nowrap !important;

  border: 0 !important;
}


/* =========================================================
   14. 大型平板
========================================================= */

@media (max-width: 1050px) {

  html.dkb-course-hub-page
  .course-center-intro {
    width:
      calc(100% - 32px) !important;

    padding:
      54px 38px 46px !important;
  }


  html.dkb-course-hub-page
  .course-center-types {
    gap:
      22px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-name {
    font-size:
      14px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-desc {
    font-size:
      11.5px !important;
  }

}


/* =========================================================
   15. 平板
========================================================= */

@media (max-width: 900px) {

  html.dkb-course-hub-page
  .course-center-intro {
    width:
      calc(100% - 28px) !important;

    margin:
      28px auto 38px !important;

    padding:
      48px 30px 42px !important;

    border-radius:
      20px !important;
  }


  html.dkb-course-hub-page
  .course-center-types {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;

    gap:
      32px 30px !important;

    margin-top:
      38px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-name {
    font-size:
      15px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-desc {
    font-size:
      12.5px !important;
  }


  html.dkb-course-hub-page
  .course-center-hero-bg {
    width:
      94% !important;

    height:
      82% !important;

    opacity:
      0.065 !important;
  }

}


/* =========================================================
   16. 手機
========================================================= */

@media (max-width: 600px) {

  html.dkb-course-hub-page
  .course-center-intro {
    width:
      calc(100% - 20px) !important;

    margin:
      18px auto 30px !important;

    padding:
      36px 20px 32px !important;

    border-radius:
      18px !important;
  }


  html.dkb-course-hub-page
  .course-center-title {
    font-size:
      30px !important;
  }


  html.dkb-course-hub-page
  .course-center-lead {
    max-width:
      100% !important;

    margin-top:
      15px !important;

    font-size:
      14px !important;

    line-height:
      1.75 !important;

    text-align:
      left !important;
  }


  html.dkb-course-hub-page
  .course-center-search {
    margin-top:
      25px !important;
  }


  html.dkb-course-hub-page
  .course-center-search-input {
    height:
      48px !important;

    padding:
      0 50px 0 15px !important;

    line-height:
      48px !important;
  }


  /*
    手機五種類型使用兩欄，
    不要變成五個超長直向區塊。
  */

  html.dkb-course-hub-page
  .course-center-types {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      28px 22px !important;

    margin-top:
      32px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-item {
    padding:
      0 !important;
  }


  html.dkb-course-hub-page
  .course-center-type-logo {
    width:
      50px !important;

    height:
      50px !important;

    flex-basis:
      50px !important;

    margin-bottom:
      14px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-logo img {
    max-width:
      50px !important;

    max-height:
      50px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-name {
    margin-bottom:
      8px !important;

    font-size:
      14px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-desc {
    font-size:
      12px !important;

    line-height:
      1.65 !important;
  }


  html.dkb-course-hub-page
  .course-center-hero-bg {
    width:
      118% !important;

    height:
      72% !important;

    opacity:
      0.045 !important;
  }

}


/* =========================================================
   17. 超小手機
========================================================= */

@media (max-width: 390px) {

  html.dkb-course-hub-page
  .course-center-intro {
    width:
      calc(100% - 16px) !important;

    padding:
      32px 16px 28px !important;
  }


  html.dkb-course-hub-page
  .course-center-types {
    gap:
      26px 16px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-logo {
    width:
      46px !important;

    height:
      46px !important;

    flex-basis:
      46px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-logo img {
    max-width:
      46px !important;

    max-height:
      46px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-name {
    font-size:
      13.5px !important;
  }


  html.dkb-course-hub-page
  .course-center-type-desc {
    font-size:
      11.5px !important;
  }

}

/* =========================================================
   課程中心 Hero｜XMS+ 原生搜尋框
========================================================= */

html.dkb-course-hub-page
.course-center-search-host {
  position: relative !important;

  width: 100% !important;
  max-width: 1040px !important;

  margin: 32px auto 0 !important;
  padding: 0 !important;
}


/* =========================================================
   原生 input-group
========================================================= */

html.dkb-course-hub-page
.course-center-search-host
.course-center-native-search {
  display: table !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
}


/* =========================================================
   原生輸入框
========================================================= */

html.dkb-course-hub-page
.course-center-search-host
#search {
  display: block !important;

  width: 100% !important;
  height: 50px !important;

  margin: 0 !important;

  padding:
    0 16px !important;

  color:
    #263b49 !important;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    ) !important;

  border:
    1px solid #9fafb8 !important;

  border-right:
    0 !important;

  border-radius:
    6px 0 0 6px !important;

  font-family:
    inherit !important;

  font-size:
    14px !important;

  font-weight:
    500 !important;

  line-height:
    48px !important;

  outline:
    none !important;

  box-shadow:
    none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease !important;
}


html.dkb-course-hub-page
.course-center-search-host
#search::placeholder {
  color:
    #8b989f !important;

  opacity:
    1 !important;
}


html.dkb-course-hub-page
.course-center-search-host
#search:focus {
  background:
    #ffffff !important;

  border-color:
    #008dc5 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(
      0,
      141,
      197,
      0.12
    ) !important;
}


/* =========================================================
   搜尋按鈕外層
========================================================= */

html.dkb-course-hub-page
.course-center-search-host
.input-group-btn {
  width: 1% !important;

  vertical-align:
    middle !important;
}


/* =========================================================
   原生搜尋按鈕
========================================================= */

html.dkb-course-hub-page
.course-center-search-host
#filter_search_btn {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 52px !important;
  height: 50px !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    #688391 !important;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    ) !important;

  border:
    1px solid #9fafb8 !important;

  border-left:
    0 !important;

  border-radius:
    0 6px 6px 0 !important;

  box-shadow:
    none !important;

  outline:
    none !important;

  transition:
    color 0.2s ease,
    background-color 0.2s ease !important;
}


html.dkb-course-hub-page
.course-center-search-host
#filter_search_btn:hover {
  color:
    #008dc5 !important;

  background:
    #f2f9fc !important;
}


/* 原生 glyphicon */

html.dkb-course-hub-page
.course-center-search-host
#filter_search_btn
.glyphicon {
  font-size:
    17px !important;
}