/**
 * Frog-Job Learning — CSS cho những trang KHÔNG do template mới tiếp quản.
 *
 * Template Focus Mode và trang khoá học đã có giao diện riêng trong
 * assets/css/focus-mode.css. Tệp này chỉ lo phần còn lại:
 *
 *   • Khu vực học viên, nơi có danh sách khoá học
 *   • Trang lưu trữ khoá học
 *   • Trang khoá học, khi bạn tắt tính năng tiếp quản trong cài đặt
 *   • Hai shortcode [frog_job_progress] và [frog_job_course_head] dùng ở
 *     bất kỳ đâu, kể cả trong Elementor
 *
 * Phần Focus Mode đã được gỡ khỏi tệp này — template mới lo trọn.
 */

/**
 * Frog-Job Course Experience — lớp giao diện khu học tập
 *
 * Mọi màu và số đo đều lấy từ biến CSS, do plugin bơm vào từ trang cài đặt.
 * Đổi màu ở cài đặt là đổi toàn bộ, không phải sửa tệp này.
 *
 * Tệp chỉ được nạp trên trang LearnDash — xem enqueue_assets() trong PHP.
 */

/* ==========================================================
   1. NHỊP CHUNG — cùng khung với các trang khác của website
   ========================================================== */

.learndash-wrapper:not(.ld-focus .learndash-wrapper) {
	max-width: var(--fjx-width);
	margin-inline: auto;
}

.ld-focus .learndash-wrapper {
	max-width: none;
}

.learndash-wrapper > * + * {
	margin-top: 22px;
}

/* Bề ngang đọc được. Mắt người thoải mái nhất ở 65–75 ký tự mỗi dòng. */
.learndash-wrapper p,
.learndash-wrapper li,
.fjx-course-head__desc {
	max-width: 74ch;
	line-height: 1.75;
}

.learndash-wrapper h2,
.learndash-wrapper h3 {
	position: relative;
	color: var(--fjx-ink);
	font-weight: 840;
	letter-spacing: -0.03em;
	line-height: 1.25;
}

.learndash-wrapper h2 {
	margin-top: 42px;
	padding-top: 22px;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

/* Gạch nhấn ngắn trước mỗi tiêu đề mục — chi tiết lặp lại trên
   toàn bộ website, nên nó là thứ làm trang khoá học "thuộc về". */
.learndash-wrapper h2::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	border-radius: 999px;
	background: var(--fjx-accent);
	content: "";
}

/* ==========================================================
   2. KHỐI ĐẦU KHOÁ HỌC — do plugin tự dựng
   ========================================================== */

.fjx-course-head {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
	margin: 0 0 34px;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--fjx-line);
	border-radius: var(--fjx-radius);
	background: var(--fjx-cream);
}

.fjx-course-head--noimg {
	grid-template-columns: minmax(0, 1fr);
}

.fjx-course-head__media {
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(7, 82, 61, 0.1);
}

.fjx-course-head__media img {
	display: block;
	width: 100%;
	height: auto;
}

.fjx-course-head__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--fjx-primary);
	font-size: 0.78rem;
	font-weight: 850;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fjx-course-head__title {
	margin: 0 0 12px;
	color: var(--fjx-ink);
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 880;
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.fjx-course-head__desc {
	margin: 0 0 18px;
	color: var(--fjx-muted);
}

.fjx-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fjx-meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--fjx-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fjx-ink);
	font-size: 0.84rem;
	font-weight: 730;
	line-height: 1;
}

.fjx-meta li b {
	color: var(--fjx-primary);
	font-weight: 850;
}

/* ==========================================================
   3. THANH TIẾN TRÌNH — tự dựng, không kế thừa gì
   ==========================================================
   Thanh mặc định của LearnDash bị cắt mất nửa trên trên giao diện này, do
   một phần tử cha có overflow:hidden. Sửa bằng CSS không tới được vì vấn đề
   nằm ở cấu trúc HTML không kiểm soát được. Nên plugin dựng thanh riêng.
   ========================================================== */

.fjx-prog {
	display: block !important;
	position: relative !important;
	z-index: 2;
	box-sizing: border-box;
	clear: both;
	width: 100%;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 26px 0 30px !important;
	padding: 20px 22px !important;
	overflow: visible !important;
	border: 1px solid var(--fjx-line);
	border-radius: var(--fjx-radius);
	background: #fff;
	line-height: 1.5 !important;
}

.fjx-prog * {
	box-sizing: border-box;
	max-height: none !important;
	overflow: visible !important;
}

.fjx-prog__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 11px;
}

.fjx-prog__label {
	color: var(--fjx-primary);
	font-size: 0.78rem;
	font-weight: 850;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fjx-prog__steps {
	color: var(--fjx-muted);
	font-size: 0.86rem;
	font-weight: 700;
}

.fjx-prog__track {
	width: 100%;
	height: 10px !important;
	min-height: 10px !important;
	border-radius: 999px;
	background: rgba(7, 82, 61, 0.12);
	overflow: hidden !important;
}

.fjx-prog__fill {
	height: 10px !important;
	min-height: 10px !important;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fjx-primary), var(--fjx-accent));
	transition: width 600ms ease;
}

.fjx-prog__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.fjx-prog__percent {
	color: var(--fjx-ink);
	font-size: 1.05rem;
	font-weight: 840;
}

.fjx-prog__percent.is-done {
	color: var(--fjx-primary);
}

.fjx-prog__done {
	margin-left: 6px;
	font-size: 0.82rem;
	font-weight: 750;
}

/* ==========================================================
   4. NÚT
   ========================================================== */

.fjx-btn,
.learndash-wrapper .ld-button,
.learndash-wrapper #learndash_mark_complete_button,
.learndash-wrapper .learndash_mark_complete_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px !important;
	padding: 14px 26px !important;
	border: 1px solid transparent !important;
	border-radius: 13px !important;
	background: var(--fjx-primary) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-family: inherit !important;
	font-size: 0.98rem !important;
	font-weight: 820 !important;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: 0 13px 28px rgba(11, 125, 89, 0.22) !important;
	transition: transform 180ms ease, background-color 180ms ease !important;
}

.fjx-btn:hover,
.learndash-wrapper .ld-button:hover,
.learndash-wrapper #learndash_mark_complete_button:hover {
	background: var(--fjx-dark) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-alternate {
	border-color: var(--fjx-line) !important;
	background: #fff !important;
	color: var(--fjx-dark) !important;
	-webkit-text-fill-color: var(--fjx-dark);
	box-shadow: none !important;
}

/* ==========================================================
   5. DANH SÁCH BÀI HỌC
   ========================================================== */

.learndash-wrapper .ld-item-list {
	counter-reset: fjx-step;
	margin-top: 14px;
	margin-bottom: 34px;
}

.learndash-wrapper .ld-item-list .ld-item-list-item {
	margin-bottom: 10px !important;
	border: 1px solid var(--fjx-line) !important;
	border-radius: var(--fjx-radius) !important;
	background: #fff !important;
	overflow: hidden;
	transition: transform 180ms ease, border-color 180ms ease,
		box-shadow 180ms ease;
}

.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
	border-color: var(--fjx-light) !important;
	transform: translateY(-2px);
	box-shadow: var(--fjx-shadow);
}

/* Bắt cả những biến thể tên lớp khác — bản trước gõ chính xác một tên
   và trượt, khiến danh sách bài vẫn là khung viền mảnh với liên kết
   gạch chân. */
.learndash-wrapper [class*="ld-item-list"] a,
.learndash-wrapper [class*="ld-lesson-item"] a,
.learndash-wrapper [class*="ld-topic-row"] a,
.learndash-wrapper .ld-item-list .ld-item-list-item a {
	display: flex !important;
	align-items: center;
	gap: 4px;
	padding: 16px 18px !important;
	color: var(--fjx-ink) !important;
	font-weight: 760 !important;
	text-decoration: none !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item a:hover {
	color: var(--fjx-dark) !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-title::before {
	counter-increment: fjx-step;
	content: counter(fjx-step);
	display: inline-flex;
	width: 30px;
	height: 30px;
	margin-right: 12px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9px;
	background: var(--fjx-tint);
	color: var(--fjx-dark);
	font-size: 0.82rem;
	font-weight: 850;
}

.learndash-wrapper .ld-item-list .ld-item-list-item.ld-is-complete .ld-item-title::before {
	background: var(--fjx-primary);
	color: #fff;
}

.learndash-wrapper .ld-status-icon.ld-status-complete {
	border-color: var(--fjx-primary) !important;
	background: var(--fjx-primary) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-status-icon.ld-status-incomplete {
	border-color: var(--fjx-light) !important;
	background: transparent !important;
}

/* Bảng danh sách kiểu cũ */
.learndash-wrapper .ld-table-list {
	border: 1px solid var(--fjx-line) !important;
	border-radius: var(--fjx-radius) !important;
	overflow: hidden;
}

.learndash-wrapper .ld-table-list-header {
	background: var(--fjx-cream) !important;
	color: var(--fjx-ink) !important;
	font-weight: 840 !important;
}

.learndash-wrapper .ld-table-list-item:hover {
	background: var(--fjx-cream) !important;
}

/* ==========================================================
   6. ĐIỀU HƯỚNG BÀI HỌC
   ==========================================================
   LearnDash in ba liên kết cùng chữ khi khoá chỉ có một bài. Xoá bằng CSS
   thì rủi ro với khoá nhiều bài, nên phân cấp thị giác thay vì xoá.
   ========================================================== */

.learndash-wrapper .ld-content-actions {
	margin: 32px 0 !important;
	padding: 20px 0 !important;
	border-top: 1px solid var(--fjx-line);
	border-bottom: 1px solid var(--fjx-line);
}

.learndash-wrapper .ld-content-actions .ld-content-action:first-child a,
.learndash-wrapper .ld-content-actions .ld-content-action:last-child a {
	color: var(--fjx-muted) !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	opacity: 0.8;
}

.learndash-wrapper .ld-content-actions .ld-content-action:first-child a:hover,
.learndash-wrapper .ld-content-actions .ld-content-action:last-child a:hover {
	color: var(--fjx-dark) !important;
	opacity: 1;
}

/* ==========================================================
   7. ĐƯỜNG DẪN, TAB, THÔNG BÁO
   ========================================================== */

.learndash-wrapper .ld-breadcrumbs {
	padding: 0 0 14px !important;
	border-bottom: 1px solid var(--fjx-line);
	background: transparent !important;
	font-size: 0.86rem;
}

.learndash-wrapper .ld-breadcrumbs a {
	color: var(--fjx-primary) !important;
	font-weight: 700;
}

.learndash-wrapper .ld-tabs .ld-tab-list .ld-tab.ld-active {
	border-bottom-color: var(--fjx-primary) !important;
	color: var(--fjx-dark) !important;
}

.learndash-wrapper .ld-alert {
	border-radius: 13px !important;
	border-left: 4px solid var(--fjx-accent) !important;
	background: var(--fjx-cream) !important;
	color: var(--fjx-ink) !important;
}

.learndash-wrapper .ld-alert .ld-alert-icon {
	background: var(--fjx-primary) !important;
}

/* ==========================================================
   8. VIDEO VÀ KHUNG NHÚNG
   ========================================================== */

.learndash-wrapper .ld-video,
.learndash-wrapper .ld-video-wrapper,
.learndash-wrapper iframe,
.ld-focus-content iframe {
	max-width: 100%;
	border: 0;
	border-radius: var(--fjx-radius);
	overflow: hidden;
	background: var(--fjx-ink);
}

/* ==========================================================
   9. KHU GHI CHÚ — dựng lại hoàn toàn
   ==========================================================
   Add-on Notes của LearnDash dùng giao diện mặc định: tiêu đề xanh dương,
   đường kẻ ngang, liên kết gạch chân. Nhìn như thuộc về một website khác.

   Tên lớp khác nhau giữa các phiên bản add-on, nên phần dưới dùng bộ chọn
   theo tên lớp gần đúng — bắt được nhiều biến thể hơn là gõ chính xác một
   tên và cầu may.
   ========================================================== */

/* --- Tiêu đề khu ghi chú --- */
.learndash-wrapper [class*="note"] h2,
.learndash-wrapper [class*="note"] h3,
.ld-focus-content [class*="note"] h2 {
	color: var(--fjx-ink) !important;
	font-weight: 840 !important;
	letter-spacing: -0.03em;
}

/* --- Thanh gập: Thêm ghi chú / Ghi chú liên quan / Tất cả ghi chú --- */
.learndash-wrapper [class*="note"] .ld-expand-button,
.learndash-wrapper [class*="note"] [class*="accordion"],
.learndash-wrapper [class*="note"] [class*="toggle"],
.learndash-wrapper [class*="note-header"],
.learndash-wrapper [class*="note_header"] {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px !important;
	padding: 15px 18px !important;
	border: 1px solid var(--fjx-line) !important;
	border-bottom: 1px solid var(--fjx-line) !important;
	border-radius: 13px !important;
	background: var(--fjx-cream) !important;
	color: var(--fjx-dark) !important;
	font-size: 1rem !important;
	font-weight: 820 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color 180ms ease, background-color 180ms ease;
}

.learndash-wrapper [class*="note"] .ld-expand-button:hover,
.learndash-wrapper [class*="note-header"]:hover {
	border-color: var(--fjx-light) !important;
	background: var(--fjx-tint) !important;
	color: var(--fjx-dark) !important;
}

/* Bỏ đường kẻ xanh dương mặc định dưới thanh gập */
.learndash-wrapper [class*="note"] hr,
.learndash-wrapper [class*="note"] [class*="divider"] {
	display: none !important;
}

/* --- Ô nhập --- */
.learndash-wrapper [class*="note"] input[type="text"],
.learndash-wrapper [class*="note"] textarea,
.ld-focus-content [class*="note"] input[type="text"],
.ld-focus-content [class*="note"] textarea {
	width: 100%;
	min-height: 50px;
	padding: 14px 16px !important;
	border: 1px solid var(--fjx-line) !important;
	border-radius: 13px !important;
	background: #fff !important;
	color: var(--fjx-ink) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	box-shadow: none !important;
}

.learndash-wrapper [class*="note"] input[type="text"]:focus,
.learndash-wrapper [class*="note"] textarea:focus {
	border-color: var(--fjx-accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 4px rgba(36, 184, 122, 0.16) !important;
}

/* --- Trình soạn thảo --- */
.learndash-wrapper [class*="note"] .mce-panel,
.learndash-wrapper [class*="note"] .wp-editor-container {
	border: 1px solid var(--fjx-line) !important;
	border-radius: 13px !important;
	overflow: hidden;
}

.learndash-wrapper [class*="note"] .mce-toolbar-grp {
	border-bottom: 1px solid var(--fjx-line) !important;
	background: var(--fjx-cream) !important;
}

.learndash-wrapper [class*="note"] .mce-statusbar {
	display: none !important;
}

/* --- Thẻ ghi chú đã lưu --- */
.learndash-wrapper [class*="note-item"],
.learndash-wrapper [class*="note_item"],
.learndash-wrapper [class*="single-note"] {
	margin-bottom: 12px !important;
	padding: 18px 20px !important;
	border: 1px solid var(--fjx-line) !important;
	border-radius: var(--fjx-radius) !important;
	background: #fff !important;
	box-shadow: none !important;
}

.learndash-wrapper [class*="note-item"]:hover {
	border-color: var(--fjx-light) !important;
}

.learndash-wrapper [class*="note-title"],
.learndash-wrapper [class*="note_title"] {
	margin-bottom: 6px !important;
	color: var(--fjx-ink) !important;
	font-size: 1.02rem !important;
	font-weight: 820 !important;
}

.learndash-wrapper [class*="note-date"],
.learndash-wrapper [class*="note_date"] {
	color: var(--fjx-muted) !important;
	font-size: 0.84rem !important;
}

/* --- Liên kết thao tác: Xoá / Tải về / Mở --- */
.learndash-wrapper [class*="note"] a:not(.fjx-btn):not(.ld-button) {
	color: var(--fjx-primary) !important;
	font-weight: 750 !important;
	text-decoration: none !important;
	text-underline-offset: 3px;
}

.learndash-wrapper [class*="note"] a:not(.fjx-btn):not(.ld-button):hover {
	color: var(--fjx-dark) !important;
	text-decoration: underline !important;
}

/* Liên kết xoá giữ màu cảnh báo */
.learndash-wrapper [class*="note"] a[class*="delete"],
.learndash-wrapper [class*="note"] a[href*="delete"] {
	color: #b32d2e !important;
}

/* --- Trạng thái rỗng --- */
.learndash-wrapper [class*="no-note"],
.learndash-wrapper [class*="no_note"],
.learndash-wrapper [class*="notes-empty"] {
	padding: 22px !important;
	border: 1px dashed var(--fjx-line) !important;
	border-radius: var(--fjx-radius) !important;
	background: var(--fjx-cream) !important;
	color: var(--fjx-muted) !important;
	text-align: center;
	font-size: 0.94rem;
}

/* --- Nút gửi --- */
.learndash-wrapper [class*="note"] input[type="submit"],
.learndash-wrapper [class*="note"] button[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 50px !important;
	padding: 13px 30px !important;
	border: 0 !important;
	border-radius: 13px !important;
	background: var(--fjx-primary) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-family: inherit !important;
	font-size: 0.98rem !important;
	font-weight: 820 !important;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(11, 125, 89, 0.2) !important;
}

.learndash-wrapper [class*="note"] input[type="submit"]:hover,
.learndash-wrapper [class*="note"] button[type="submit"]:hover {
	background: var(--fjx-dark) !important;
}

/* ==========================================================
   9B. KHU GHI CHÚ CỦA FROG-JOB — tự dựng
   ==========================================================
   HTML do plugin sinh ra nên tên lớp cố định, không phải đoán như với
   add-on của LearnDash.
   ========================================================== */

.fjx-notes {
	margin: 40px 0 0;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--fjx-line);
	border-radius: var(--fjx-radius);
	background: #fff;
}

.fjx-notes--guest {
	background: var(--fjx-cream);
	color: var(--fjx-muted);
	text-align: center;
}

.fjx-notes__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fjx-line);
}

.fjx-notes__title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fjx-ink);
	font-size: 1.3rem !important;
	font-weight: 850;
	letter-spacing: -0.03em;
}

.fjx-notes__title::before {
	display: none !important;
}

.fjx-notes__count {
	color: var(--fjx-muted);
	font-size: 0.86rem;
	font-weight: 720;
}

.fjx-notes__flash {
	margin: 0 0 16px;
	padding: 12px 15px;
	border-left: 3px solid var(--fjx-accent);
	border-radius: 10px;
	background: var(--fjx-tint);
	color: var(--fjx-dark);
	font-size: 0.92rem;
	font-weight: 700;
}

.fjx-notes__flash--warn {
	border-left-color: #c79a3b;
	background: #fff8f0;
	color: #8a5510;
}

/* --- Biểu mẫu --- */

.fjx-notes__form {
	margin-bottom: 26px;
}

.fjx-notes__label {
	display: block;
	margin-bottom: 6px;
	color: var(--fjx-ink);
	font-size: 0.9rem;
	font-weight: 760;
}

.fjx-notes__label span {
	color: var(--fjx-muted);
	font-weight: 600;
}

.fjx-notes__input,
.fjx-notes__textarea {
	width: 100%;
	margin-bottom: 16px;
	padding: 13px 15px;
	border: 1px solid var(--fjx-line);
	border-radius: 13px;
	background: #fff;
	color: var(--fjx-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
}

.fjx-notes__textarea {
	min-height: 130px;
	resize: vertical;
}

.fjx-notes__input:focus,
.fjx-notes__textarea:focus {
	border-color: var(--fjx-accent);
	outline: none;
	box-shadow: 0 0 0 4px rgba(36, 184, 122, 0.16);
}

.fjx-notes__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.fjx-notes__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--fjx-primary);
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 760;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.fjx-notes__link:hover {
	color: var(--fjx-dark);
}

.fjx-notes__empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--fjx-line);
	border-radius: var(--fjx-radius);
	background: var(--fjx-cream);
	color: var(--fjx-muted);
	text-align: center;
	font-size: 0.94rem;
}

/* --- Danh sách ghi chú --- */

.fjx-notes__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fjx-note {
	margin-bottom: 12px;
	padding: 18px 20px;
	border: 1px solid var(--fjx-line);
	border-radius: var(--fjx-radius);
	background: #fff;
	transition: border-color 180ms ease;
}

.fjx-note:hover {
	border-color: var(--fjx-light);
}

.fjx-note__title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	color: var(--fjx-ink);
	font-size: 1.02rem !important;
	font-weight: 830;
}

.fjx-note__title::before {
	display: none !important;
}

.fjx-note__body {
	color: var(--fjx-ink);
	font-size: 0.98rem;
	line-height: 1.7;
}

.fjx-note__body p {
	margin: 0 0 10px;
	max-width: none;
}

.fjx-note__body p:last-child {
	margin-bottom: 0;
}

.fjx-note__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--fjx-line);
}

.fjx-note__date {
	color: var(--fjx-muted);
	font-size: 0.82rem;
}

.fjx-note__step {
	color: var(--fjx-primary) !important;
	font-size: 0.82rem;
	font-weight: 730;
	text-decoration: none !important;
}

.fjx-note__step:hover {
	text-decoration: underline !important;
}

.fjx-note__foot form {
	margin: 0 0 0 auto;
}

.fjx-note__del {
	padding: 6px 12px;
	border: 1px solid var(--fjx-line);
	border-radius: 9px;
	background: #fff;
	color: var(--fjx-muted);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 720;
	cursor: pointer;
	transition: border-color 180ms ease, color 180ms ease;
}

.fjx-note__del:hover {
	border-color: #b32d2e;
	color: #b32d2e;
}

.fjx-notes__export {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--fjx-line);
	text-align: center;
}

@media (max-width: 600px) {
	.fjx-notes {
		padding: 18px 16px;
	}

	.fjx-note__foot form {
		margin-left: 0;
	}
}

/* ==========================================================
   11. RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {
	.ld-focus-header {
		top: 0 !important;
	}

	.ld-focus-content {
		max-width: 100%;
	}
}

@media (max-width: 782px) {
	.fjx-course-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.fjx-course-head__media {
		max-width: 220px;
	}
}

@media (max-width: 600px) {
	.fjx-prog {
		padding: 16px 16px !important;
	}

	.fjx-btn {
		width: 100%;
		justify-content: center;
	}

	.learndash-wrapper .ld-content-actions {
		display: flex;
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}

	.learndash-wrapper .ld-button,
	.learndash-wrapper #learndash_mark_complete_button {
		width: 100%;
	}

	.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-title::before {
		width: 26px;
		height: 26px;
		margin-right: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fjx-prog__fill,
	.fjx-btn,
	.learndash-wrapper .ld-item-list-item,
	.learndash-wrapper .ld-button {
		transition-duration: 0.01ms !important;
	}
}