/* Unified accessible theme layer — loaded after style.css/backend.css. */
:root {
  color-scheme: light;
  --ui-bg: #f6f8fc;
  --ui-surface: #ffffff;
  --ui-surface-2: #f1f5f9;
  --ui-surface-3: #e8eef6;
  --ui-text: #172033;
  --ui-text-soft: #475569;
  --ui-muted: #64748b;
  --ui-border: #dbe3ee;
  --ui-primary: #0369a1;
  --ui-primary-hover: #075985;
  --ui-primary-soft: #e0f2fe;
  --ui-focus: #0ea5e9;
  --ui-success: #047857;
  --ui-warning: #b45309;
  --ui-danger: #b91c1c;
  --ui-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --ui-shadow-sm: 0 2px 10px rgba(15, 23, 42, .06);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #08111f;
  --ui-surface: #101c2e;
  --ui-surface-2: #16243a;
  --ui-surface-3: #20304a;
  --ui-text: #f1f5f9;
  --ui-text-soft: #d3deec;
  --ui-muted: #a8b7ca;
  --ui-border: #30425d;
  --ui-primary: #38bdf8;
  --ui-primary-hover: #7dd3fc;
  --ui-primary-soft: #12334a;
  --ui-focus: #7dd3fc;
  --ui-success: #34d399;
  --ui-warning: #fbbf24;
  --ui-danger: #f87171;
  --ui-shadow: 0 16px 38px rgba(0, 0, 0, .28);
  --ui-shadow-sm: 0 3px 14px rgba(0, 0, 0, .22);
}

html { background: var(--ui-bg); scroll-behavior: smooth; }
body {
  background: var(--ui-bg) !important;
  color: var(--ui-text-soft);
  min-width: 320px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body, .site-header, .backend-main, .backend-content,
.content-section, .page-view, .auth-page {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 65%, transparent);
  outline-offset: 2px;
}

:where(input, select, textarea) {
  min-height: 42px;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

::placeholder { color: var(--ui-muted) !important; opacity: 1; }

/* Shared surfaces and typography. */
.site-header, .header-top, .main-header,
.backend-main, .backend-content,
.content-card, .kpi-card, .chart-card, .table-card,
.course-card, .featured-course-card, .instructor-card,
.pricing-card, .category-card, .value-prop-card,
.builder-chapter-card, .builder-lesson-item,
.enrolled-course-card, .modal-content {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

:where(h1, h2, h3, h4, h5, h6, strong, th, label,
  .course-title, .kpi-value, .card-title, .section-title,
  .instructor-name, .plan-name, .user-info h4) {
  color: var(--ui-text) !important;
}

:where(p, td, small, .course-description, .kpi-title, .kpi-subtitle,
  .text-muted, .lesson-duration-tag, .enrolled-card-meta) {
  color: var(--ui-muted);
}

table { color: var(--ui-text-soft); }
tbody tr { border-color: var(--ui-border) !important; }
tbody tr:hover { background: var(--ui-surface-2) !important; }

.btn-primary, .view-tab-btn.active, .role-tab-btn.active,
.builder-tab-btn.active, .student-view-btn.active,
.course-status-tab-btn.active {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: #fff !important;
}

/* Universal theme control for every page and portal. */
.ui-theme-toggle {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3000;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow);
  font-size: 18px;
}
.ui-theme-toggle:hover { transform: translateY(-2px); border-color: var(--ui-primary); }

/* Dark mode compatibility for legacy inline colors. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .header-top,
html[data-theme="dark"] .main-header { box-shadow: 0 1px 0 var(--ui-border); }

html[data-theme="dark"] :where(
  [style*="background: #fff"], [style*="background:#fff"],
  [style*="background: #ffffff"], [style*="background:#ffffff"],
  [style*="background: #f8fafc"], [style*="background:#f8fafc"]
) { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }

html[data-theme="dark"] :where(
  [style*="color: #0f172a"], [style*="color:#0f172a"],
  [style*="color: #1e293b"], [style*="color:#1e293b"],
  [style*="color: #334155"], [style*="color:#334155"]
) { color: var(--ui-text) !important; }

html[data-theme="dark"] :where(
  [style*="color: #64748b"], [style*="color:#64748b"],
  [style*="color: #475569"], [style*="color:#475569"],
  [style*="color: #94a3b8"], [style*="color:#94a3b8"]
) { color: var(--ui-muted) !important; }

html[data-theme="dark"] :where(
  [style*="border: 1px solid #e2e8f0"],
  [style*="border:1px solid #e2e8f0"]
) { border-color: var(--ui-border) !important; }

html[data-theme="dark"] :where(
  [style*="background: #e2e8f0"], [style*="background:#e2e8f0"],
  [style*="background: #f1f5f9"], [style*="background:#f1f5f9"]
) { background: var(--ui-surface-3) !important; }

html[data-theme="dark"] .backend-sidebar { background: #0b1627 !important; }
html[data-theme="dark"] .menu-item:hover,
html[data-theme="dark"] .menu-item.active { background: #1b314b !important; color: #fff !important; }
html[data-theme="dark"] .filter-period-box select,
html[data-theme="dark"] .input-chapter-name,
html[data-theme="dark"] .input-lesson-name,
html[data-theme="dark"] .student-view-btn,
html[data-theme="dark"] .builder-tab-btn { background: var(--ui-surface-2) !important; }

/* Keep semantic chips readable in both themes. */
html[data-theme="dark"] :where(.badge-blue, .icon-blue-circle, .primary-light) { background: #123c56 !important; color: #7dd3fc !important; }
html[data-theme="dark"] :where(.badge-green, .badge-emerald, .icon-green-circle) { background: #103b34 !important; color: #6ee7b7 !important; }
html[data-theme="dark"] :where(.badge-amber, .icon-amber-circle) { background: #463419 !important; color: #fde68a !important; }
html[data-theme="dark"] :where(.badge-rose, .icon-red-circle) { background: #48202a !important; color: #fda4af !important; }
html[data-theme="dark"] :where(.badge-purple) { background: #352151 !important; color: #d8b4fe !important; }

/* Responsive: preserve portal navigation instead of hiding it. */
@media (max-width: 1024px) {
  .backend-layout { display: flex !important; flex-direction: column; min-height: auto; }
  .backend-sidebar {
    display: block !important;
    width: 100%;
    position: sticky;
    top: 52px;
    z-index: 800;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .sidebar-user-card { display: none !important; }
  .sidebar-menu-nav { display: flex; width: max-content; min-width: 100%; padding: 8px; gap: 5px; }
  .menu-section-label { display: none !important; }
  .menu-item { flex: 0 0 auto; border-radius: 8px; white-space: nowrap; padding: 9px 12px !important; }
  .backend-main { min-width: 0; }
  .role-switcher-bar { gap: 10px; flex-wrap: wrap; padding: 8px 12px; }
  .role-tabs-wrap { max-width: 100%; overflow-x: auto; }
  .content-header { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .table-responsive, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .container { padding-inline: 14px; }
  .backend-content { padding: 16px !important; }
  .kpi-grid, .stats-grid, .course-grid, .courses-grid,
  .gamification-grid, .content-split-grid { grid-template-columns: 1fr !important; }
  .charts-double-row { grid-template-columns: 1fr !important; }
  .role-brand { font-size: 14px; }
  .switcher-badge { display: none; }
  .content-header h1 { font-size: clamp(20px, 6vw, 28px) !important; }
  .hero-title { font-size: clamp(30px, 9vw, 48px) !important; }
  .ui-theme-toggle { width: 44px; height: 44px; }
  button, .btn, .nav-link { min-height: 40px; }
}

@media (max-width: 420px) {
  .backend-content { padding: 12px !important; }
  .kpi-card, .content-card, .chart-card, .table-card { padding: 14px !important; }
  .role-switcher-bar .switcher-left { min-width: 0; }
  .btn-return-portal span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --ui-border: #64748b; --ui-muted: #475569; }
  html[data-theme="dark"] { --ui-border: #94a3b8; --ui-muted: #d5deea; }
}

/* ==========================================================================
   ON-DARK SURFACES — sửa lỗi chữ tối trên nền tối.
   Rule :where(h1..h6, strong, label) { color: var(--ui-text) !important }
   ở trên đè cả những heading nằm trên các section nền navy (hero, CTA,
   footer, hero chi tiết khóa học...). Khối dưới đây trả lại màu sáng cho
   đúng những phần tử nằm TRỰC TIẾP trên nền tối (không chạm vào các thẻ
   card nền trắng lồng bên trong).
   ========================================================================== */
:root { --on-dark-text: #f8fafc; --on-dark-soft: #cbd5e1; --on-dark-dim: #94a3b8; }

.hero-slider-section .hero-title,
.hero-slider-section .hero-slide-content > h1,
.hero-slider-section .hero-slide-content > h2,
.landing-cta-text h2,
.landing-cta-text h3,
.course-detail-hero h1,
.course-detail-hero h2,
.course-detail-hero h3,
.course-detail-hero h4,
.course-detail-hero .cd-hero-title,
.instructor-hero h1,
.instructor-hero h2,
.instructor-hero h3,
.enterprise-hero-section > .container h1,
.enterprise-hero-section > .container h2,
.enterprise-hero-section .enterprise-hero-grid > div > h1,
.enterprise-hero-section .enterprise-hero-grid > div > h2,
.enterprise-hero-section .enterprise-hero-grid > div > h3,
.mindmap-hero h1,
.mindmap-hero h2,
.student-dashboard-header h1,
.student-dashboard-header h2,
.student-dashboard-header h3,
.student-dashboard-header h4,
.site-footer h3,
.site-footer h4,
.site-footer h5 {
  color: var(--on-dark-text) !important;
}

.hero-slider-section .hero-desc,
.landing-cta-text p,
.course-detail-hero p,
.instructor-hero p,
.mindmap-hero p,
.student-dashboard-header p,
.enterprise-hero-section > .container p {
  color: var(--on-dark-soft) !important;
}

.hero-slider-section .hero-badge,
.hero-slider-section .hero-badge * { color: #7dd3fc !important; }

/* Chữ nhấn gradient: nếu trình duyệt không hỗ trợ background-clip:text thì
   vẫn phải đọc được (fallback màu sáng thay vì transparent). */
.hero-title .highlight-text { color: #38bdf8 !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title .highlight-text {
    background: linear-gradient(90deg, #22d3ee, #7dd3fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Footer: link & nhãn phụ */
.site-footer strong, .site-footer label { color: var(--on-dark-text) !important; }
.site-footer p, .site-footer li, .site-footer small { color: var(--on-dark-dim) !important; }

/* ==========================================================================
   NHÃN FLASH SALE (dùng chung: landing, catalog, chi tiết khóa, portal HV)
   ========================================================================== */
.lms-flash-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .2px; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .32);
}
.lms-flash-badge i { font-size: 10px; }
.lms-flash-badge.is-md { font-size: 12px; padding: 6px 12px; gap: 7px; }
.lms-flash-pct,
.lms-flash-time,
.lms-flash-stock {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 1px 6px; font-weight: 800;
}
.lms-flash-time { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .lms-flash-badge .lms-flash-label { display: none; }
  .lms-flash-badge.is-md .lms-flash-label { display: inline; }
}
@media (prefers-reduced-motion: no-preference) {
  .lms-flash-badge i { animation: lmsFlashPulse 1.6s ease-in-out infinite; }
}
@keyframes lmsFlashPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ============================================================
   THANH FLASH SALE CỐ ĐỊNH Ở CHÂN TRANG (nền tối)
   Nền là rgba(15,23,42,.95) nên chữ phải sáng. Quy tắc theme
   :where(h1..h6, strong, ...) { color: var(--ui-text) !important }
   ở trên đã nhuộm <h5> tên khóa học thành xanh navy → gần như
   vô hình. Ghi đè có chủ đích cho đúng thanh này.
   ============================================================ */
.sticky-floating-deal-bar { color: var(--on-dark-text, #f8fafc) !important; }
.sticky-floating-deal-bar h5,
.sticky-floating-deal-bar h4,
.sticky-floating-deal-bar strong,
.sticky-floating-deal-bar .floating-course-text h5 {
  color: var(--on-dark-text, #f8fafc) !important;
}
.sticky-floating-deal-bar .floating-course-text span,
.sticky-floating-deal-bar .countdown-lbl,
.sticky-floating-deal-bar .floating-countdown > span:first-child {
  color: var(--on-dark-soft, #cbd5e1) !important;
}
/* Ô đếm ngược: nền sáng nhạt, chữ xanh nhạt cho rõ trên nền tối. */
.sticky-floating-deal-bar .float-cd-box {
  background: rgba(148, 163, 184, .22) !important;
  color: #7dd3fc !important;
  font-weight: 800;
}
.sticky-floating-deal-bar .floating-flash-badge,
.sticky-floating-deal-bar .floating-flash-badge i { color: #fff !important; }
/* Nút hành động trong thanh giữ nguyên chữ trắng trên nền màu. */
.sticky-floating-deal-bar .btn-float-buy,
.sticky-floating-deal-bar .btn-float-groupon,
.sticky-floating-deal-bar .floating-deal-actions a,
.sticky-floating-deal-bar .floating-deal-actions button { color: #fff !important; }
.sticky-floating-deal-bar .floating-deal-close { color: var(--on-dark-soft, #cbd5e1) !important; }
.sticky-floating-deal-bar .floating-deal-close:hover { color: #fff !important; }

/* Thuộc tính hidden luôn thắng các rule display của component. */
[hidden] { display: none !important; }