/* ===== 🎨 ปรับสีหลัก (Primary / Secondary / Background) ===== */
:root {
  --brand-primary: #FFCC00 !important;
  --brand-secondary: #ffcc00c0 !important;
  --brand-accent: #66bb6a !important;    /* เขียวอ่อน */
  --brand-success: #43a047 !important;
  --brand-danger: #c62828 !important;
  --brand-warning: #f9a825 !important;
  --brand-info: #0288d1 !important;
  /* --header-right-text-color: #9C7749 !important; สีตัวอักษรเมนูผู้ใช้ด้านขวา */
  --pgn-color-primary-base: #000000 !important;
  --pgn-color-dropdown-link-base: #000000 !important; /* Drop down item */

}

/* ===== 🙈 ซ่อนลิงก์ Help ที่หัวหรือฟุตเตอร์ ===== */

/* ซ่อนลิงก์ Help ที่อยู่ใน Header */
a[href="null"], 
a[href="/help"] {
  display: none !important;
}

/* สำหรับกรณี Help อยู่ใน nav-course หรือ container อื่น */
.nav-course a[href="/help"],
.container-xl a[href="null"] {
  display: none !important;
}

/* ===== 🙈 ซ่อน Footer เดิมของระบบ ===== */
.wrapper-footer {
  display: none !important;
}

/* ===== 🎨 จัดสไตล์ Footer ที่สร้างโดย JavaScript ===== */
#custom-footer {
  padding: 2rem 15px;
  color: #bd9b13; /* สีตัวอักษรหลักของ Footer */
  border-top: 1px solid #E5E7EB;
  width: 100%;
  box-sizing: border-box;
}

/* --- Layout เริ่มต้นสำหรับจอเล็ก (เรียงบนลงล่าง) --- */
#custom-footer .footer-main-content {
  display: block;
  margin-bottom: 2rem;
}

#custom-footer .footer-column {
  margin-bottom: 1.5rem;
}

/* --- Layout สำหรับจอใหญ่ (กว้างกว่า 768px) --- */
@media (min-width: 768px) {
  #custom-footer .footer-main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
  }

  #custom-footer .footer-column {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0; /* ไม่ต้องมีระยะห่างด้านล่างเมื่อเป็นคอลัมน์ */
  }
}

#custom-footer h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #000; /* สีหัวข้อ */
}

#custom-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#custom-footer ul li {
  margin-bottom: 0.5rem;
  padding-left: 1em;
  text-indent: -1em;
}

#custom-footer ul li::before {
  content: '•';
  color: #000;
  margin-right: 0.5em;
}

#custom-footer a {
  color: #000000; /* สีฟ้อน*/
  text-decoration: none;
}

#custom-footer a:hover {
  color: #b49209;
  text-decoration: underline;
}

#custom-footer .copyright-site-new {
  font-size: 0.75rem;
  color: #6c757d;
  text-align: left;
  margin-top: 2rem;
  border-top: 1px solid #E5E7EB;
  padding-top: 1rem;
}

/* ===== 🎨 ปรับสีปุ่มและส่วนประกอบอื่นๆ ในหน้า Course Home ===== */

/* ปุ่ม "Resume course" */
.btn-brand {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #000000 !important; 
}

.btn-brand:hover {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
}

/* Drop down item */
.dropdown-item {
  color: var(--pgn-color-dropdown-link-base) !important;
}

/* ปุ่ม "Expand all" */
.btn-outline-primary {
  color: var(--pgn-color-primary-base) !important;
  border-color: var(--brand-primary) !important;
}

/* ปุ่ม Username */
.btn-outline-primary:hover {
  /* color: #fff !important; */
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* ไอคอน expand/collapse ของ Module */
.btn-icon-primary {
    color: var(--brand-primary) !important;
}

/* หัวข้อชื่อคอร์ส */
.h2 {
    color: #000 !important;
}

/* ลิงก์ภายใน Module */
.collapsible-body a {
    color: var(--pgn-color-primary-base)!important
}

.collapsible-body a:hover {
    color: var(--brand-primary) !important;
    text-decoration: underline;
}

/* ===== 📊 ปรับสีหน้า Progress (แก้ไข) ===== */

/* วงกลม Progress ของ Course Completion */
.donut .donut-segment-group .donut-ring {
  stroke: #f2f7f8!important; /* สีเทาสำหรับส่วนที่ยังไม่คืบหน้า */
}
.donut .donut-segment-group .donut-segment {
  stroke: var(--brand-primary) !important; /* สีหลักสำหรับส่วนที่คืบหน้าแล้ว */
}

/* แถบ Progress Bar ของ Grades */
/* ทำให้แถบพื้นหลังทั้งหมดเป็นสีเทาอ่อน */
.grade-bar .grade-bar__base {
  fill: #aaa8a8e7 !important;
}
/* ทำให้ส่วนที่บอกเกณฑ์ผ่านเป็นสีเทาอ่อนเช่นกัน */
.grade-bar .grade-bar--passing {
  fill: #E0E0E0 !important;
}
/* ทำให้แถบคะแนนปัจจุบันเป็นสีหลักของธีม */
.grade-bar .grade-bar--current-non-passing {
  fill: var(--brand-primary) !important;
}

/* ตัวเลข % ความพยายาม */
#non-passing-grade-tooltip .popover-body {
    color: #000000!important;
}

/* กล่อง tooltip แสดงคะแนนปัจจุบัน (ที่เป็นสีเหลือง) */
.grade-bar-tooltip__tooltip {
  background-color: var(--brand-primary) !important;
}

.grade-bar-tooltip__tooltip .grade-bar-tooltip__arrow {
    border-top-color: var(--brand-primary) !important;
}

/* กรอบ tooltip แสดงคะแนนปัจจุบัน (ที่เป็นสีเหลือง) */
#non-passing-grade-tooltip {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    filter: none;
}

#non-passing-grade-tooltip .arrow:after, #non-passing-grade-tooltip .arrow:before {
    border-top-color: var(--brand-primary) !important;
}

/* ลิงก์ในส่วน "Related links" และลิงก์อื่นๆ */
.col-md-4 a.pgn__hyperlink,
a.muted-link {
  color: var(--pgn-color-primary-base)!important
}

.col-md-4 a.pgn__hyperlink:hover,
a.muted-link:hover {
  color: var(--brand-primary) !important;
}

/* แท็บ "Progress" ที่กำลังถูกเลือก */
.nav-underline-tabs .nav-link.active, .nav-underline-tabs .nav-link:focus, .nav-underline-tabs .nav-link:hover {
    border-bottom-color: var(--brand-primary) !important;
    color: var(--pgn-color-primary-base)!important;
    /* font-weight: var(--pgn-typography-font-weight-normal); */
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--brand-primary) !important;
    color: var(--pgn-color-dropdown-link-active-base);
    text-decoration: none;
}

/* เส้นขอบด้านบนของ Grade Summary Footer */
.border-primary {
    border-color: var(--brand-primary) !important;
}

/* ===== 🎨 ปรับปุ่ม Next ===== */

/* สไตล์ปกติของปุ่ม Next */
.next-button.btn-outline-primary {
  color: var(--pgn-color-primary-base) !important;
  border-color: var(--brand-primary) !important;
  background-color: #fff !important;
  transition: all 0.3s ease;
}

/* เมื่อเอาเมาส์ไปวางให้พื้นหลังเป็นสีรอง แต่ตัวหนังสือไม่เปลี่ยน */
.next-button.btn-outline-primary:hover {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-primary) !important;
  color: #000000 !important; /* ตัวหนังสือเป็นสีขาว หรือเปลี่ยนเป็น var(--brand-primary) ถ้าต้องการ */
}

#paragon-portal-root .new-user-tour-dialog .pgn__action-row button.btn-brand {
    background: var(--brand-secondary) !important;
    border-color: var(--brand-primary) !important;
}

#paragon-portal-root .new-user-tour-dialog .pgn__action-row button.btn-brand:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* เมื่อเอาเมาส์ไปวางในหัวข้อที่เรียน แต่ละหัวข้อย่อยข้างในของ Course*/
.collapsible-body a:hover{
  color: #000000 !important;
}