/* ==========================================================================
   LearnDash Modern Focus Experience & Smart Notes - Ultimate Stylesheet
   Includes: Focus Mode Canvas + Single Course Landing Page Redesign
   ========================================================================== */

:root {
	--ld-primary: #146c43;
	--ld-primary-hover: #0e5233;
	--ld-accent: #00b894;
	--ld-accent-hover: #009475;
	
	--ld-bg-main: #f8fafc;
	--ld-bg-card: #ffffff;
	--ld-bg-sidebar: #ffffff;
	--ld-bg-topbar: #ffffff;
	
	--ld-text-main: #0f172a;
	--ld-text-muted: #64748b;
	--ld-text-light: #94a3b8;
	
	--ld-border: #e2e8f0;
	--ld-border-light: #f1f5f9;
	
	--ld-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
	--ld-shadow-md: 0 4px 14px rgba(0,0,0,0.07);
	--ld-shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
	
	--ld-radius-sm: 6px;
	--ld-radius-md: 10px;
	--ld-radius-lg: 16px;
	
	--ld-font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ld-font-head: var(--ld-font-body);
	--ld-topbar-height: 64px;
	--ld-sidebar-width: 320px;
}

/* Dark Theme Overrides */
.ld-dark-mode {
	--ld-bg-main: #0b0f19;
	--ld-bg-card: #151c2c;
	--ld-bg-sidebar: #151c2c;
	--ld-bg-topbar: #151c2c;
	
	--ld-text-main: #f8fafc;
	--ld-text-muted: #94a3b8;
	--ld-text-light: #64748b;
	
	--ld-border: #26334d;
	--ld-border-light: #1b2438;
	
	--ld-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
	--ld-shadow-md: 0 4px 14px rgba(0,0,0,0.5);
}

/* Reset & Base HTML Isolation */
html.ld-dark-mode, 
body.ld-focus-mode-body,
body.ld-course-landing-body {
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--ld-bg-main) !important;
	color: var(--ld-text-main) !important;
	font-family: var(--ld-font-body) !important;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

*, *::before, *::after {
	box-sizing: border-box;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: var(--ld-bg-main);
}
::-webkit-scrollbar-thumb {
	background: var(--ld-border);
	border-radius: 10px;
}

/* Container */
.ld-course-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* TOPBAR */
.ld-focus-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--ld-topbar-height);
	background: var(--ld-bg-topbar);
	border-bottom: 1px solid var(--ld-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	z-index: 10000;
	box-shadow: var(--ld-shadow-sm);
	backdrop-filter: blur(12px);
}

.ld-focus-topbar-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ld-topbar-back-home {
	font-size: 13px;
	font-weight: 600;
	color: var(--ld-text-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease;
}

.ld-topbar-back-home:hover {
	color: var(--ld-primary);
}

.ld-topbar-btn {
	background: transparent;
	border: 1px solid var(--ld-border);
	color: var(--ld-text-main);
	width: 40px;
	height: 40px;
	border-radius: var(--ld-radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 15px;
}

.ld-topbar-btn:hover {
	background: var(--ld-border-light);
	border-color: var(--ld-primary);
	color: var(--ld-primary);
}

/* ==========================================================
   CHE CHẮN NÚT KHỎI CSS CỦA THEME + ICON SVG NỘI TUYẾN
   ==========================================================
   Hai lỗi từng thấy trên site thật:

   1. Style nút toàn cục của theme/Elementor "thấm" vào nút của thanh
      (nền hồng). Quy tắc kit của Elementor dạng .elementor-kit-N button
      có độ ưu tiên (0,1,1) — cao hơn .ld-topbar-btn (0,1,0) — nên phải
      khoá các thuộc tính nền tảng bằng !important. Đây là thành phần
      của riêng plugin, khoá lại không ảnh hưởng gì khác.
   2. Icon FontAwesome nạp từ CDN — CDN hỏng là nút thành ô trống.
      Icon của thanh nay là SVG nội tuyến (xem focus-app.php); các quy
      tắc dưới đây định cỡ và chọn icon nào hiện, JS chỉ bật tắt lớp.
   ========================================================== */
.ld-focus-topbar .ld-topbar-btn {
	background: transparent !important;
	border: 1px solid var(--ld-border) !important;
	color: var(--ld-text-main) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0 !important;
	appearance: none;
	-webkit-appearance: none;
}

.ld-focus-topbar .ld-topbar-btn:hover {
	background: var(--ld-border-light) !important;
	border-color: var(--ld-primary) !important;
	color: var(--ld-primary) !important;
}

.ld-topbar-btn .fjl-icon {
	width: 18px;
	height: 18px;
	display: block;
	pointer-events: none;
}

/* Sáng/tối: in sẵn cả trăng lẫn mặt trời, lớp ld-dark-mode (trên html
   hoặc trên khối bọc embed) quyết định cái nào hiện. */
.fjl-icon-sun { display: none !important; }
.ld-dark-mode .fjl-icon-sun { display: block !important; }
.ld-dark-mode .fjl-icon-moon { display: none !important; }

/* Toàn màn hình: lớp is-fullscreen trên nút quyết định mở hay thu. */
.fjl-icon-compress { display: none !important; }
#ld-focus-fullscreen-toggle.is-fullscreen .fjl-icon-compress { display: block !important; }
#ld-focus-fullscreen-toggle.is-fullscreen .fjl-icon-expand { display: none !important; }

.ld-focus-brand-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.ld-focus-brand-logo img {
	max-height: 36px;
	width: auto;
}

.ld-brand-text {
	font-weight: 700;
	font-size: 18px;
	color: var(--ld-primary);
	letter-spacing: -0.5px;
}

.ld-focus-topbar-divider {
	width: 1px;
	height: 24px;
	background: var(--ld-border);
}

.ld-topbar-lesson-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ld-text-muted);
	max-width: 350px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ld-focus-topbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ld-focus-user-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 12px;
	background: var(--ld-border-light);
	border-radius: 30px;
	border: 1px solid var(--ld-border);
}

.ld-user-avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: block;
}

.ld-user-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ld-text-main);
}

/* ==========================================================================
   COURSE LANDING PAGE STYLES (sfwd-courses)
   ========================================================================== */

/* Trang khoá học nay dùng header của website (get_header) và KHÔNG còn
   thanh Focus Mode ghim cứng phía trên. Dòng
   padding-top: var(--ld-topbar-height) cũ là tàn dư của bản canvas —
   chính là dải trống 64px giữa header website và khối hero xanh.
   Đặt hẳn về 0 thay vì xoá dòng, để không quy tắc nào chèn lại được. */
.ld-course-app-container {
	padding-top: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* HERO SECTION */
.ld-course-hero-section {
	background: linear-gradient(135deg, #0d3822 0%, #146c43 100%);
	color: #ffffff;
	padding: 45px 0 50px 0;
	position: relative;
}

.ld-dark-mode .ld-course-hero-section {
	background: linear-gradient(135deg, #09121d 0%, #10261c 100%);
}

.ld-course-hero-content {
	max-width: 750px;
}

.ld-course-badges {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.ld-badge-category {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(5px);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ld-badge-enrolled {
	background: var(--ld-accent);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ld-course-hero-title {
	font-family: var(--ld-font-head);
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 16px 0;
	line-height: 1.25;
	color: #ffffff !important;
}

.ld-course-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 25px;
}

.ld-course-hero-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ld-course-progress-box {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--ld-radius-md);
	padding: 14px 18px;
	max-width: 550px;
}

.ld-progress-text {
	font-size: 13px;
	margin-bottom: 8px;
	color: #ffffff;
}

/* COURSE BODY GRID */
.ld-course-body-section {
	padding: 40px 0;
	flex: 1;
}

.ld-course-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 35px;
}

/* TABS NAVIGATION & STRICT DISPLAY OVERRIDES */
.ld-course-tabs-nav {
	display: flex;
	gap: 10px;
	border-bottom: 2px solid var(--ld-border);
	margin-bottom: 25px;
}

.ld-course-tab-btn {
	background: transparent !important;
	border: none !important;
	padding: 12px 22px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ld-text-muted) !important;
	cursor: pointer !important;
	position: relative;
	bottom: -2px;
	border-bottom: 3px solid transparent !important;
	transition: all 0.2s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-shadow: none !important;
}

.ld-course-tab-btn:hover {
	color: var(--ld-primary) !important;
}

.ld-course-tab-btn.active {
	color: var(--ld-primary) !important;
	border-bottom-color: var(--ld-primary) !important;
	background: var(--ld-border-light) !important;
	border-radius: var(--ld-radius-md) var(--ld-radius-md) 0 0 !important;
}

/* STRICT TAB PANE VISIBILITY RULES TO PREVENT OVERLAPPING */
.ld-course-tab-pane {
	display: none !important;
}

.ld-course-tab-pane.active {
	display: block !important;
}

.ld-course-card {
	background: var(--ld-bg-card);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-lg);
	padding: 30px;
	box-shadow: var(--ld-shadow-md);
	margin-bottom: 30px;
}

.ld-card-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ld-text-main);
	margin: 0 0 20px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* CURRICULUM ROWS */
.ld-course-curriculum-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ld-course-lesson-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ld-border-light);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-md);
	padding: 14px 18px;
	transition: all 0.2s ease;
}

.ld-course-lesson-row:hover {
	border-color: var(--ld-primary);
	box-shadow: var(--ld-shadow-sm);
}

.ld-lesson-row-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.ld-lesson-row-title {
	font-size: 14px;
	color: var(--ld-text-main);
}

.ld-btn-start-lesson {
	background: var(--ld-primary);
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 20px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s ease;
}

.ld-btn-start-lesson:hover {
	background: var(--ld-primary-hover);
}

.ld-lesson-locked-badge {
	font-size: 12px;
	color: var(--ld-text-light);
	background: var(--ld-border);
	padding: 4px 10px;
	border-radius: 12px;
}

/* SIDEBAR STICKY CTA CARD */
.ld-course-cta-card {
	background: var(--ld-bg-card);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-lg);
	overflow: hidden;
	box-shadow: var(--ld-shadow-lg);
	position: sticky;
	top: calc(var(--ld-topbar-height) + 20px);
}

.ld-cta-thumbnail {
	width: 100%;
	height: 190px;
	overflow: hidden;
	background: var(--ld-border-light);
}

.ld-cta-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ld-cta-body {
	padding: 25px;
}

.ld-cta-enrolled-status {
	background: rgba(20, 108, 67, 0.1);
	color: var(--ld-primary);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: var(--ld-radius-md);
	text-align: center;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ld-btn-cta-primary {
	width: 100%;
	background: var(--ld-primary) !important;
	color: #ffffff !important;
	text-align: center;
	padding: 14px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border-radius: var(--ld-radius-md) !important;
	text-decoration: none !important;
	display: block !important;
	box-shadow: 0 4px 12px rgba(20, 108, 67, 0.25);
	transition: all 0.2s ease !important;
}

.ld-btn-cta-primary:hover {
	background: var(--ld-primary-hover) !important;
	transform: translateY(-2px);
}

.ld-btn-cta-secondary {
	width: 100%;
	background: transparent;
	color: var(--ld-text-main);
	border: 1px solid var(--ld-border);
	text-align: center;
	padding: 10px;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--ld-radius-md);
	text-decoration: none;
	display: block;
	margin-top: 10px;
}

.ld-cta-features-list {
	margin-top: 25px;
	border-top: 1px solid var(--ld-border);
	padding-top: 20px;
}

.ld-cta-features-list h5 {
	font-size: 13px;
	font-weight: 700;
	color: var(--ld-text-main);
	margin: 0 0 12px 0;
}

.ld-cta-features-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ld-cta-features-list li {
	font-size: 13px;
	color: var(--ld-text-muted);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.ld-course-footer {
	background: var(--ld-bg-card);
	border-top: 1px solid var(--ld-border);
	padding: 20px 0;
	text-align: center;
	font-size: 13px;
	color: var(--ld-text-muted);
}

/* ==========================================================================
   FOCUS MODE CANVAS STYLES
   ========================================================================== */

.ld-focus-app-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--ld-bg-main);
}

.ld-focus-main-layout {
	display: flex;
	margin-top: var(--ld-topbar-height);
	min-height: calc(100vh - var(--ld-topbar-height));
}

.ld-focus-sidebar {
	width: var(--ld-sidebar-width);
	background: var(--ld-bg-sidebar);
	border-right: 1px solid var(--ld-border);
	display: flex;
	flex-direction: column;
	transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	position: sticky;
	top: var(--ld-topbar-height);
	height: calc(100vh - var(--ld-topbar-height));
	overflow-y: auto;
}

.ld-focus-sidebar.is-collapsed {
	margin-left: calc(-1 * var(--ld-sidebar-width));
}

.ld-focus-sidebar-header {
	padding: 20px;
	border-bottom: 1px solid var(--ld-border);
}

.ld-focus-sidebar-title-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.ld-focus-back-link {
	color: var(--ld-text-muted);
	font-size: 16px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ld-focus-back-link:hover {
	color: var(--ld-primary);
}

.ld-focus-course-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	color: var(--ld-text-main);
	line-height: 1.3;
}

.ld-focus-progress-card {
	background: var(--ld-border-light);
	padding: 14px;
	border-radius: var(--ld-radius-md);
	border: 1px solid var(--ld-border);
}

.ld-focus-progress-info {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 600;
	color: var(--ld-text-muted);
	margin-bottom: 8px;
}

.ld-focus-progress-percent {
	color: var(--ld-primary);
	font-weight: 700;
}

.ld-focus-progress-bar-bg {
	height: 8px;
	background: var(--ld-border);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 8px;
}

.ld-focus-progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ld-primary), var(--ld-accent));
	border-radius: 10px;
	transition: width 0.4s ease;
}

.ld-focus-progress-steps {
	font-size: 12px;
	color: var(--ld-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.ld-focus-sidebar-body {
	padding: 12px;
}

.ld-focus-lesson-item {
	border-radius: var(--ld-radius-md);
	margin-bottom: 6px;
	overflow: hidden;
	transition: background 0.2s ease;
}

.ld-focus-lesson-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: var(--ld-radius-md);
}

.ld-focus-lesson-item:hover .ld-focus-lesson-header {
	background: var(--ld-border-light);
}

.ld-focus-lesson-item.is-active .ld-focus-lesson-header {
	background: rgba(20, 108, 67, 0.12);
	border-left: 3px solid var(--ld-primary);
}

.ld-focus-lesson-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-decoration: none;
	color: var(--ld-text-main);
	font-size: 13px;
	font-weight: 500;
	flex: 1;
	line-height: 1.4;
}

.ld-focus-status-icon {
	color: var(--ld-text-light);
	font-size: 15px;
	margin-top: 2px;
}

.ld-focus-lesson-item.is-completed .ld-focus-status-icon {
	color: var(--ld-accent);
}

.ld-focus-lesson-item.is-active .ld-focus-status-icon {
	color: var(--ld-primary);
}

.ld-focus-lesson-num {
	font-weight: 700;
	color: var(--ld-text-muted);
}

.ld-focus-accordion-toggle {
	background: transparent;
	border: none;
	color: var(--ld-text-muted);
	cursor: pointer;
	padding: 4px;
	font-size: 12px;
}

.ld-focus-topics-list {
	padding-left: 32px;
	padding-bottom: 8px;
}

.ld-focus-topic-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	font-size: 12px;
	color: var(--ld-text-muted);
	text-decoration: none;
	border-radius: var(--ld-radius-sm);
	transition: background 0.2s ease;
}

.ld-focus-topic-item:hover {
	background: var(--ld-border-light);
	color: var(--ld-primary);
}

.ld-focus-topic-item.is-active {
	color: var(--ld-primary);
	font-weight: 600;
}

.ld-focus-stage {
	flex: 1;
	background: var(--ld-bg-main);
	padding: 30px;
	overflow-y: auto;
}

.ld-focus-stage-content {
	max-width: 1000px;
	margin: 0 auto;
}

.ld-focus-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ld-text-muted);
	margin-bottom: 12px;
}

.ld-focus-breadcrumb a {
	color: var(--ld-text-muted);
	text-decoration: none;
}

.ld-focus-breadcrumb a:hover {
	color: var(--ld-primary);
}

.ld-focus-post-title {
	font-family: var(--ld-font-head);
	font-size: 28px;
	font-weight: 700;
	color: var(--ld-text-main);
	margin: 0 0 20px 0;
	line-height: 1.3;
}

.ld-focus-access-restricted-card {
	background: var(--ld-bg-card);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-lg);
	padding: 40px;
	text-align: center;
	box-shadow: var(--ld-shadow-md);
	margin-bottom: 30px;
}

.ld-restricted-icon {
	width: 64px;
	height: 64px;
	background: rgba(225, 29, 72, 0.1);
	color: #e11d48;
	font-size: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.ld-focus-access-restricted-card h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ld-text-main);
	margin: 0 0 10px 0;
}

.ld-focus-access-restricted-card p {
	font-size: 14px;
	color: var(--ld-text-muted);
	max-width: 500px;
	margin: 0 auto 25px auto;
	line-height: 1.6;
}

.ld-restricted-btns {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}

.ld-btn-secondary-outline {
	background: transparent;
	color: var(--ld-primary);
	border: 1.5px solid var(--ld-primary);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--ld-radius-md);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.ld-btn-secondary-outline:hover {
	background: var(--ld-primary);
	color: #ffffff;
}

.ld-focus-main-viewer-card {
	background: var(--ld-bg-card);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-lg);
	padding: 25px;
	box-shadow: var(--ld-shadow-md);
	margin-bottom: 30px;
}

.real3dflipbook, .flipbook-container {
	margin: 0 auto !important;
	max-width: 100% !important;
	min-height: 550px;
	border-radius: var(--ld-radius-md);
	overflow: hidden;
}

.ld-focus-action-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ld-bg-card);
	padding: 16px 20px;
	border-radius: var(--ld-radius-md);
	border: 1px solid var(--ld-border);
	box-shadow: var(--ld-shadow-sm);
	margin-bottom: 35px;
}

.ld-focus-action-bar a, 
.ld-btn-primary, 
.learndash_mark_complete_button,
.sfwd-mark-complete input[type="submit"] {
	background: var(--ld-primary) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: var(--ld-radius-md) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: background 0.2s ease, transform 0.1s ease !important;
}

.ld-focus-action-bar a:hover, 
.ld-btn-primary:hover, 
.learndash_mark_complete_button:hover {
	background: var(--ld-primary-hover) !important;
	transform: translateY(-1px);
}

.ld-btn-disabled {
	background: var(--ld-border) !important;
	color: var(--ld-text-light) !important;
	border: none !important;
	padding: 10px 18px !important;
	border-radius: var(--ld-radius-md) !important;
	cursor: not-allowed !important;
}

/* ==========================================================
   NÚT BÀI TRƯỚC / BÀI SAU
   ==========================================================
   Quy tắc .ld-focus-action-bar a ở trên biến MỌI liên kết trong thanh này
   thành nút xanh đậm. Sau khi thay điều hướng bằng thẻ <a> tự dựng, thanh
   sẽ có ba nút xanh giống nhau — mắt không biết nên bấm cái nào.

   Nút giữa "Đánh dấu đã học" mới là việc chính, nên hai nút hai bên hạ
   xuống dạng viền mờ.
   ========================================================== */
.ld-focus-action-bar a.ld-btn-nav {
	background: transparent !important;
	color: var(--ld-text-muted) !important;
	border: 1px solid var(--ld-border) !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}

.ld-focus-action-bar a.ld-btn-nav:hover {
	border-color: var(--ld-primary) !important;
	background: transparent !important;
	color: var(--ld-primary) !important;
}

@media (max-width: 640px) {
	.ld-focus-action-bar {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}

	.ld-focus-action-bar a,
	.ld-focus-action-bar button,
	.ld-focus-nav-prev,
	.ld-focus-nav-next,
	.ld-focus-mark-complete-wrap {
		width: 100%;
		justify-content: center !important;
		text-align: center;
	}

	/* Nút chính lên trên cùng trên màn hình hẹp */
	.ld-focus-mark-complete-wrap {
		order: -1;
	}
}

.ld-focus-notes-wrapper {
	background: var(--ld-bg-card);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-lg);
	padding: 25px;
	box-shadow: var(--ld-shadow-md);
}

.ld-focus-notes-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--ld-border);
	padding-bottom: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 15px;
}

.ld-focus-notes-title-group {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ld-primary);
}

.ld-focus-notes-title-group h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--ld-text-main);
}

.ld-focus-notes-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ld-focus-notes-tabs {
	display: flex;
	background: var(--ld-border-light);
	padding: 4px;
	border-radius: 30px;
	border: 1px solid var(--ld-border);
}

.ld-notes-tab-btn {
	background: transparent;
	border: none;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ld-text-muted);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ld-notes-tab-btn.active {
	background: var(--ld-bg-card);
	color: var(--ld-primary);
	box-shadow: var(--ld-shadow-sm);
}

.ld-focus-btn-export {
	background: var(--ld-border-light);
	color: var(--ld-text-main);
	border: 1px solid var(--ld-border);
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 20px;
	text-decoration: none;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ld-focus-btn-export:hover {
	border-color: var(--ld-primary);
	color: var(--ld-primary);
}

.ld-focus-note-editor-card {
	background: var(--ld-border-light);
	padding: 20px;
	border-radius: var(--ld-radius-md);
	border: 1px solid var(--ld-border);
	margin-bottom: 25px;
}

.ld-focus-note-form-row {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

.ld-focus-input-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ld-text-muted);
	margin-bottom: 6px;
}

.ld-focus-input-field input,
.ld-focus-input-field textarea {
	width: 100%;
	background: var(--ld-bg-card);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-md);
	padding: 10px 14px;
	font-size: 13px;
	color: var(--ld-text-main);
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ld-focus-input-field input:focus,
.ld-focus-input-field textarea:focus {
	outline: none;
	border-color: var(--ld-primary);
	box-shadow: 0 0 0 3px rgba(20, 108, 67, 0.15);
}

.ld-focus-note-footer-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ld-focus-autosave-status {
	font-size: 12px;
	color: var(--ld-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.ld-focus-note-btns {
	display: flex;
	gap: 10px;
}

.ld-btn-secondary {
	background: transparent;
	color: var(--ld-text-muted);
	border: 1px solid var(--ld-border);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--ld-radius-md);
	cursor: pointer;
}

.ld-btn-secondary:hover {
	background: var(--ld-border);
	color: var(--ld-text-main);
}

.ld-focus-list-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
	gap: 12px;
}

.ld-focus-saved-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ld-text-main);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ld-focus-search-box {
	position: relative;
	min-width: 220px;
}

.ld-focus-search-box i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ld-text-light);
	font-size: 12px;
}

.ld-focus-search-box input {
	width: 100%;
	padding: 6px 12px 6px 32px;
	font-size: 12px;
	background: var(--ld-border-light);
	border: 1px solid var(--ld-border);
	border-radius: 20px;
	color: var(--ld-text-main);
	transition: border-color 0.2s ease;
}

.ld-focus-search-box input:focus {
	outline: none;
	border-color: var(--ld-primary);
}

.ld-focus-note-item-card {
	background: var(--ld-bg-card);
	border: 1px solid var(--ld-border);
	border-radius: var(--ld-radius-md);
	padding: 16px;
	margin-bottom: 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ld-focus-note-item-card:hover {
	border-color: var(--ld-primary);
	box-shadow: var(--ld-shadow-sm);
}

.ld-note-item-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.ld-note-item-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--ld-text-main);
	margin: 0;
}

.ld-note-item-tag {
	background: rgba(20, 108, 67, 0.1);
	color: var(--ld-primary);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 12px;
}

.ld-note-item-content {
	font-size: 13px;
	color: var(--ld-text-muted);
	line-height: 1.5;
	margin-bottom: 10px;
	white-space: pre-wrap;
}

.ld-note-item-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: var(--ld-text-light);
	border-top: 1px dashed var(--ld-border);
	padding-top: 8px;
}

.ld-note-item-actions button {
	background: transparent;
	border: none;
	color: var(--ld-text-light);
	cursor: pointer;
	font-size: 12px;
	margin-left: 10px;
	transition: color 0.2s ease;
}

.ld-note-item-actions button.btn-copy:hover { color: var(--ld-accent); }
.ld-note-item-actions button.btn-edit:hover { color: var(--ld-primary); }
.ld-note-item-actions button.btn-delete:hover { color: #e11d48; }

/* Responsive Adjustments */
@media (max-width: 992px) {
	.ld-course-grid {
		grid-template-columns: 1fr;
	}
	.ld-course-cta-card {
		position: static;
	}
	.ld-focus-sidebar {
		position: fixed;
		z-index: 999;
		margin-left: calc(-1 * var(--ld-sidebar-width));
	}
	.ld-focus-sidebar.is-open {
		margin-left: 0;
		box-shadow: var(--ld-shadow-lg);
	}
	.ld-focus-stage {
		padding: 15px;
	}
	.ld-focus-topbar-left .ld-topbar-lesson-name {
		display: none;
	}
	.ld-focus-note-form-row {
		flex-direction: column;
	}
}


/* ==========================================================
   CHẶN LẶP TRONG NỘI DUNG BÀI HỌC
   ==========================================================
   Lớp bảo vệ thứ hai. Phần PHP đã gỡ các bộ lọc của LearnDash, nhưng nếu
   một add-on nào đó chèn thêm đường dẫn hay tiêu đề theo cách khác thì
   những quy tắc dưới đây vẫn giấu được.

   Chỉ áp dụng BÊN TRONG khung nội dung — đường dẫn và tiêu đề của giao
   diện này nằm ngoài khung nên không bị ảnh hưởng.
   ========================================================== */
.ld-focus-content-body .ld-breadcrumbs,
.ld-focus-content-body .learndash_content_wrap > .ld-breadcrumbs,
.ld-focus-content-body .ld-lesson-status,
.ld-focus-content-body .ld-content-actions,
.ld-focus-content-body h1.entry-title,
.ld-focus-content-body .sfwd-course-nav,
.ld-focus-content-body .ld-course-status {
	display: none !important;
}


/* ==========================================================
   CHẾ ĐỘ GIỮ HEADER WEBSITE
   ==========================================================
   Ở chế độ toàn màn hình, thanh trên của Focus Mode được ghim cứng lên đỉnh
   màn hình. Khi giữ header của website thì nó phải nhường chỗ, nếu không hai
   thanh đè lên nhau.

   Giải pháp: thanh Focus Mode chuyển sang dính (sticky) và tự tính khoảng
   trên theo chiều cao header của website — biến --fjnav-h do header Frog-Job
   đặt sẵn. Website nào không đặt biến đó thì mặc định là 0.
   ========================================================== */
.ld-focus-embedded-wrap {
	position: relative;

	/*
	 * Ở chế độ giữ header, thanh Focus Mode là thanh CÔNG CỤ của bài
	 * học chứ không phải header thứ hai — nên thấp và gọn hơn: 54px
	 * thay vì 64px. Ghi đè biến ở đây là mọi phép tính sticky của
	 * thanh và thanh bên trong khối này tự khớp theo.
	 */
	--ld-topbar-height: 54px;
}

.ld-focus-embedded-wrap .ld-focus-topbar {
	padding: 0 14px;
}

.ld-focus-embedded-wrap .ld-topbar-btn {
	width: 36px !important;
	height: 36px !important;
}

.ld-focus-embedded-wrap .ld-topbar-lesson-name {
	font-size: 14px;
}

.ld-focus-embedded-wrap .ld-focus-app-container {
	min-height: 0;
}

.ld-focus-embedded-wrap .ld-focus-topbar {
	position: sticky !important;
	top: var(--fjnav-h, 0px) !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	z-index: 20 !important;
}

/* Thanh bên bám theo thanh trên, không ghim vào đỉnh màn hình */
.ld-focus-embedded-wrap .ld-focus-sidebar {
	position: sticky !important;
	top: calc(var(--fjnav-h, 0px) + var(--ld-topbar-height, 64px)) !important;
	height: auto !important;
	max-height: calc(100vh - var(--fjnav-h, 0px) - var(--ld-topbar-height, 64px)) !important;
}

/* Vùng nội dung không cần đẩy xuống vì thanh trên nay nằm trong luồng.
   LƯU Ý TÊN LỚP: khối trong focus-app.php là .ld-focus-main-layout.
   Bản 2.4.0 viết nhầm thành .ld-focus-main và .ld-focus-body-layout —
   hai lớp không tồn tại — nên margin-top 64px của chế độ canvas vẫn
   được áp dụng và tạo dải trống ngay dưới thanh Focus Mode.
   min-height cũng về 0: chiều cao do nội dung quyết định, không ép
   trang dài quá màn hình khi bài học ngắn. */
.ld-focus-embedded-wrap .ld-focus-main-layout {
	padding-top: 0 !important;
	margin-top: 0 !important;
	min-height: 0 !important;
}

/* ==========================================================
   BỎ PHẦN TRÙNG LẶP KHI ĐÃ CÓ HEADER WEBSITE
   ==========================================================
   Header website ngay phía trên đã có logo và tài khoản người dùng.
   Lặp lại chúng trên thanh Focus Mode làm trang trông như có HAI header.
   focus-app.php đã không in các khối này ở chế độ embed; quy tắc dưới
   đây là lớp bảo vệ thứ hai, phòng khi bộ nhớ đệm còn giữ HTML cũ.
   ========================================================== */
.ld-focus-embedded-wrap .ld-focus-brand-logo,
.ld-focus-embedded-wrap .ld-focus-topbar-divider,
.ld-focus-embedded-wrap .ld-focus-user-menu {
	display: none !important;
}

@media (max-width: 1024px) {
	.ld-focus-embedded-wrap .ld-focus-topbar,
	.ld-focus-embedded-wrap .ld-focus-sidebar {
		position: static !important;
		max-height: none !important;
	}
}