/*
Theme Name: EduPro - Online Course Theme
Theme URI: https://yoursite.com/edupro
Author: Your Name
Author URI: https://yoursite.com
Description: Premium WordPress theme for online course websites. Fully compatible with LearnDash LMS and WooCommerce. Features a modern, professional design optimized for education platforms.
Version: 1.9.69
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edupro
Tags: education, learning, courses, learndash, woocommerce, responsive, rtl-language-support

EduPro WordPress Theme
Copyright (C) 2024 Your Name
*/

/* ============================================
   ROOT VARIABLES & RESET
   ============================================ */
:root {
  /* Bảng màu chủ đạo: xanh dương sáng làm màu chính, --accent cyan để nhấn chữ/gạch chân tiêu đề. --secondary (vàng đồng) giữ lại cho các trang khác dùng riêng. */
  --primary: #015f9f;
  --primary-dark: #0c4f9e;
  --primary-light: #1ebbf0;
  --accent: #22d3ee;
  --accent-dark: #0891b2;
  --secondary: #c9992e;
  --secondary-light: #faf3e3;
  --dark: #0c1a2e;
  --dark-muted: #33445c;
  --gray: #64748b;
  --gray-light: #f1f5f9;
  --border: #e2e8f0;
  --white: #ffffff;
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;

  --topbar-bg: #071c38;

  --font-heading: 'Roboto', 'SVN-Gilroy', sans-serif;
  --font-body: 'Roboto', 'Nunito Sans', sans-serif;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.14);
  --shadow-xl: 0 32px 60px rgba(0,0,0,0.18);

  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1280px;
  --container-px: 24px;
}

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

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--dark-muted);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.2rem; line-height: 1.7; color: var(--gray); }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 120px 0; }

.section-header { text-align: center; margin-bottom: 56px; }
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-light);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.section-title { margin-bottom: 16px; }
.section-desc { max-width: 640px; margin: 0 auto; color: var(--gray); font-size: 1.1rem; }
/* Vùng nút CTA canh giữa dưới 1 khối lưới (dùng chung cho nhiều section: Khóa học nổi bật, Tin tức...) */
.section-cta { text-align: center; margin-top: 40px; }

/* Gạch chân ngắn dưới tiêu đề section (dùng cả ở tiêu đề căn giữa lẫn căn trái) */
.section-title-accent {
  width: 56px;
  height: 4px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.section-title-accent--center { margin: -4px auto 20px; }
.section-title-accent--left { margin: -4px 0 0; }

/* Header dạng "trái + link xem tất cả" — dùng cho Khóa học nổi bật, Lộ trình, Tin tức, Đánh giá học viên */
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-heading-sm {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 10px;
}
.section-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-link i { transition: transform var(--transition); }
.section-link:hover { color: var(--primary-dark); }
.section-link:hover i { transform: translateX(3px); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap { gap: 16px; }
.gap-lg { gap: 32px; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(26, 86, 219, 0.35);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 86, 219, 0.4);
}
.btn-secondary {
  background: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
  box-shadow: 0 4px 14px rgba(255, 107, 43, 0.35);
}
.btn-secondary:hover {
  background: #e55a1f;
  border-color: #e55a1f;
  color: var(--white);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-white {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}
.btn-white:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
  transform: translateY(-2px);
}
.btn-lg { padding: 18px 40px; font-size: 1.05rem; border-radius: var(--radius-lg); }
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-full { width: 100%; }
.btn-icon { padding: 12px; border-radius: 50%; }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card-body { padding: 24px; }
.card-thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-thumb img { transform: scale(1.05); }

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-secondary { background: var(--secondary-light); color: var(--secondary); }
.badge-success { background: #dcfce7; color: var(--success); }
.badge-dark { background: var(--dark); color: var(--white); }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.form-control {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
.form-control::placeholder { color: var(--gray); opacity: 0.7; }
.form-control.is-error { border-color: var(--error); }
.form-error { font-size: 0.8rem; color: var(--error); margin-top: 6px; display: flex; align-items: center; gap: 4px; }

/* Honeypot chống bot spam ở form Đăng ký — đẩy ra ngoài khung nhìn thay vì display:none/visibility:hidden vì 1 số bot biết bỏ qua field ẩn kiểu đó. */
.edupro-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================
   TOP BAR (hotline, giấy phép, social, email)
   ============================================ */
.site-topbar {
  background: var(--topbar-bg);
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 38px;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-left a { color: rgba(255,255,255,0.85); font-weight: 600; }
.topbar-left a:hover { color: var(--secondary); }
.topbar-left .topbar-sep { color: rgba(255,255,255,0.3); }
.topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.topbar-social { display: flex; align-items: center; gap: 10px; }
.topbar-social a { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.topbar-social a:hover { color: white; }
.topbar-email a { color: rgba(255,255,255,0.85); }
.topbar-email a:hover { color: var(--secondary); }
@media (max-width: 900px) {
  .site-topbar { font-size: 0.72rem; }
  .topbar-inner { height: auto; flex-direction: column; align-items: flex-start; padding: 6px 0; gap: 4px; }
}
@media (max-width: 600px) {
  .site-topbar { display: none; }
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}

.site-logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dark);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
}
.site-logo-img {
  display: block;
  max-height: 48px;
  width: auto;
}
.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-muted);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.main-nav a:hover, .main-nav .current-menu-item > a {
  color: var(--primary);
  background: var(--primary-light);
}

/* Dropdown */
.main-nav .menu-item-has-children { position: relative; }
.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 100;
}
.main-nav .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.main-nav .sub-menu a {
  padding: 10px 14px;
  width: 100%;
  border-radius: var(--radius-sm);
  color: var(--dark-muted);
  font-size: 0.875rem;
}
.main-nav .sub-menu a:hover { background: var(--gray-light); color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-cart { position: relative; }
.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: var(--secondary);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- v1.9.66 — Dropdown "Tài khoản" (SỬA LẠI v1.9.65 theo phản hồi
   "css không đẹp") ----
   TRƯỚC: 2 nút rời (Tài khoản + mũi tên) ghép cạnh nhau — hover đổi màu
   lệch tông vì mỗi nút có nền/hiệu ứng hover riêng, submenu không có gì
   chỉ rõ nó thuộc về nút nào, trông "lơ lửng".
   NAY: GỘP thành 1 <button> duy nhất (icon + chữ + mũi tên dùng chung 1
   nền/màu/hiệu ứng hover của `.btn-outline` có sẵn — không lệch tông khi
   hover nữa), submenu thêm mũi tên nhỏ (`::before` hình vuông xoay 45°)
   trỏ thẳng lên nút để rõ mối liên hệ, giống kiểu "speech bubble" quen
   thuộc. Vẫn tái dùng đúng ngôn ngữ thẻ nổi bo góc + đổ bóng của
   `.main-nav .sub-menu`, neo bên phải (`right:0`) vì nằm sát mép phải
   header. ---- */
.header-account { position: relative; display: flex; align-items: center; }
.header-account-btn { gap: 8px; }
.header-account-caret {
  font-size: 0.65rem;
  margin-left: -2px;
  transition: transform var(--transition);
}
.header-account:hover .header-account-caret,
.header-account.is-open .header-account-caret,
.header-account-btn[aria-expanded="true"] .header-account-caret {
  transform: rotate(180deg);
}
.header-account-submenu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 100;
}
/* Mũi tên nhỏ nối submenu với nút Tài khoản phía trên */
.header-account-submenu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.header-account:hover .header-account-submenu,
.header-account.is-open .header-account-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}
.header-account-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--dark-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.header-account-submenu a i { width: 16px; text-align: center; color: var(--gray); }
.header-account-submenu a:hover { background: var(--primary-light); color: var(--primary); }
.header-account-submenu a:hover i { color: var(--primary); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.nav-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================
   MOBILE NAV PANEL — v1.9.38
   ============================================
   `#mobile-nav-panel` (header.php) — panel menu overlay TOÀN MÀN HÌNH cho
   mobile, đặt HẲN NGOÀI <header>/.site-header (khác `#main-nav` — nav
   ngang chỉ dùng cho desktop, đã ẩn ở mobile qua rule `.main-nav{display:
   none}` bên dưới). Lý do tách riêng: `.site-header` có backdrop-filter,
   mà theo đặc tả CSS bất kỳ ancestor nào có transform/filter/backdrop-
   filter khác `none` sẽ tự trở thành "containing block" cho các phần tử
   con `position:fixed` — nếu panel còn nằm lồng trong `.site-header` thì
   `position:fixed` của nó sẽ bị tính so với khung header (~72-100px) thay
   vì toàn viewport, khiến panel bị "giam" chỉ cao vài chục px (bug đã lặp
   lại qua 3 lần sửa offset ở v1.9.35-v1.9.37 vì cách vá không đúng gốc).
   Đặt ngoài <header> loại bỏ hẳn khả năng này. Ẩn hoàn toàn ở desktop qua
   `display:none` mặc định — chỉ hiện (dạng fixed, trượt từ trái) trong
   @media max-width:768px bên dưới. */
.mobile-nav-panel { display: none; }

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 55%, #123a6b 100%);
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px;
  color: white;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(201, 153, 46, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.hero h1 {
  color: white;
  margin-bottom: 20px;
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  line-height: 1.15;
}
.hero h1 span { color: var(--accent); }
.hero .lead { color: rgba(255,255,255,0.75); margin-bottom: 36px; font-size: 1.15rem; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.stat-item { }
.stat-number {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  line-height: 1;
}
.stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-top: 4px; }

.hero-visual { position: relative; }
.hero-card-stack { position: relative; }
.hero-main-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.hero-main-card img { width: 100%; display: block; }
.floating-card {
  position: absolute;
  background: white;
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: float 3s ease-in-out infinite;
}
.floating-card:nth-child(2) {
  bottom: -20px;
  left: -24px;
  animation-delay: -1.5s;
}
.floating-card:nth-child(3) {
  top: 24px;
  right: -24px;
  animation-delay: -0.8s;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.floating-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.floating-icon.blue { background: var(--primary-light); }
.floating-icon.blue i { color: var(--primary); }
.floating-icon.orange { background: var(--secondary-light); }
.floating-icon.orange i { color: var(--secondary); }
.floating-card-text .label { font-size: 0.7rem; color: var(--gray); font-weight: 500; }
.floating-card-text .value { font-size: 0.9rem; font-weight: 700; color: var(--dark); }

/* Hero — thẻ minh họa dự phòng khi chưa upload hero_image (Customizer) */
.hero-main-card--fallback { background: linear-gradient(135deg, #1e3a8a, #3b82f6); padding: 48px; display: flex; align-items: center; justify-content: center; }
.hero-fallback-content { text-align: center; color: white; }
.hero-fallback-icon { font-size: 5rem; margin-bottom: 16px; }
.hero-fallback-title { font-size: 1.2rem; font-weight: 700; color: white; }
.hero-fallback-sub { font-size: 0.9rem; opacity: 0.8; }

/* ============================================
   COURSE CARDS
   ============================================ */
.course-card { }
.course-card .card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition);
}
.course-card:hover .card-thumb::after { opacity: 1; }
.course-card-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--transition);
}
.course-card:hover .course-card-overlay { opacity: 1; }
.course-card .card-body { }
.card-category { position: absolute; top: 12px; left: 12px; }
.course-card-thumb-fallback {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: rgba(255,255,255,0.9);
}
.course-card-thumb-fallback i { font-size: 2.2rem; color: rgba(255,255,255,0.35); }
.course-card-thumb-fallback-title { font-size: 0.95rem; font-weight: 700; color: white; line-height: 1.4; }
.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.course-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-title a { color: var(--dark); text-decoration: none; }
.course-title a:hover { color: var(--primary); }
.course-instructor {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 12px;
}
.course-instructor img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.course-instructor-label { font-size: 0.7rem; color: var(--gray); }
.course-instructor-name { font-size: 0.85rem; font-weight: 600; color: var(--dark); }
.course-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.course-info-item { display: flex; align-items: center; gap: 5px; }
.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.course-price { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
/* 0đ -> "Miễn phí" màu xanh, có giá -> màu đỏ (đồng bộ với single-sfwd-courses.php) */
.course-price--free { color: var(--success); }
.course-price--paid { color: var(--error); }
.course-price--paid del { color: var(--gray); font-size: 0.85rem; font-weight: 400; opacity: 0.8; }
.course-price--paid ins { text-decoration: none; }
.course-actions { display: flex; gap: 10px; }
.course-actions .btn { flex: 1; }
.course-price .original {
  font-size: 0.85rem;
  color: var(--gray);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 6px;
}
.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}
.stars { color: #f59e0b; letter-spacing: -1px; }

/* ============================================
   FEATURES SECTION
   ============================================ */
.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition);
}
.feature-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light), var(--shadow);
  transform: translateY(-4px);
}
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.feature-icon--primary { background: var(--primary-light); color: var(--primary); }
.feature-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.feature-desc { font-size: 0.9rem; color: var(--gray); line-height: 1.6; }

/* ============================================
   INSTRUCTOR SECTION
   ============================================ */
.instructor-card {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  transition: all var(--transition);
}
.instructor-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.instructor-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 4px solid var(--primary-light);
}
.instructor-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.instructor-title { font-size: 0.85rem; color: var(--gray); margin-bottom: 12px; }
.instructor-stats { display: flex; gap: 20px; justify-content: center; }
.inst-stat { text-align: center; }
.inst-stat-num { font-weight: 700; font-size: 1rem; color: var(--primary); }
.inst-stat-lbl { font-size: 0.7rem; color: var(--gray); }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: var(--primary-light);
  line-height: 1;
}
.testimonial-text { font-size: 0.95rem; line-height: 1.7; color: var(--dark-muted); margin-bottom: 20px; font-style: italic; }
.rating--stars { margin-bottom: 16px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.author-name { font-weight: 700; font-size: 0.9rem; color: var(--dark); }
.author-role { font-size: 0.8rem; color: var(--gray); }

/* ============================================
   PRICING
   ============================================ */
.pricing-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.pricing-card.featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light), var(--shadow-xl);
  transform: scale(1.04);
}
.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.pricing-badge {
  display: inline-block;
  background: var(--secondary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.pricing-name { font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.pricing-price { margin-bottom: 16px; }
.pricing-price .amount { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1; }
.pricing-price .period { font-size: 0.9rem; color: var(--gray); }
/* Giá hiển thị qua WooCommerce get_price_html() (del/ins) — dùng cho card "Nhóm khóa học (Lộ trình)" trên trang chủ */
.pricing-price .woocommerce-Price-amount { font-family: var(--font-heading); font-weight: 800; color: var(--primary); }
.pricing-price del { opacity: 0.6; margin-right: 8px; }
.pricing-price del .woocommerce-Price-amount { font-size: 1rem; font-weight: 500; color: var(--gray); }
.pricing-price ins { text-decoration: none; }
.pricing-price ins .woocommerce-Price-amount { font-size: 1.9rem; }
.pricing-price > .woocommerce-Price-amount { font-size: 1.9rem; }
.pricing-desc { font-size: 0.875rem; color: var(--gray); margin-bottom: 24px; }
.pricing-card > .badge { margin-bottom: 12px; }
.pricing-features { margin-bottom: 28px; }
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.pricing-feature:last-child { border-bottom: none; }
.pricing-feature .check { color: var(--success); font-size: 1rem; flex-shrink: 0; }
.pricing-feature .cross { color: var(--gray); font-size: 1rem; flex-shrink: 0; opacity: 0.5; }
.pricing-feature.disabled { opacity: 0.45; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.cta-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cta-inner h2 { color: white; margin-bottom: 16px; }
.cta-inner p { color: rgba(255,255,255,0.8); font-size: 1.1rem; margin-bottom: 36px; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.7);
  padding-top: 72px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand p { font-size: 0.875rem; line-height: 1.7; margin: 16px 0 24px; max-width: 280px; }
.footer-social { display: flex; gap: 10px; }
.social-link {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all var(--transition);
  font-size: 0.9rem;
}
.social-link:hover { background: var(--primary); color: white; transform: translateY(-2px); }
.footer-heading {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition);
}
.footer-links a:hover { color: white; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact-item { display: flex; gap: 12px; font-size: 0.875rem; }
.contact-icon { color: var(--primary); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { color: rgba(255,255,255,0.4); font-size: 0.8rem; }
.footer-bottom-links a:hover { color: white; }

/* ============================================
   STATS COUNTER BAND ("NHỮNG CON SỐ BIẾT NÓI")
   ============================================ */
.stats-band {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
  color: white;
}
.stats-band-title { color: white; }
.stats-band .grid { text-align: center; }
.stats-band .stat-item .stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--secondary);
}
.stats-band .stat-item .stat-label { color: rgba(255,255,255,0.75); font-size: 0.95rem; margin-top: 6px; }

/* ============================================
   NEWS / TIN TỨC CARD
   ============================================ */
.news-card .card-body { }
.news-date { font-size: 0.78rem; color: var(--secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.news-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-title a { color: inherit; }
.news-excerpt { font-size: 0.875rem; color: var(--gray); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================
   TẠI SAO NÊN HỌC ONLINE + VIDEO (front-page.php)
   ============================================ */
.why-online-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.why-item {
  display: flex;
  gap: 18px;
  margin-bottom: 32px;
}
.why-item:last-child { margin-bottom: 0; }
.why-item-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.why-item-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.why-item-desc { font-size: 0.9rem; color: var(--gray); line-height: 1.7; }
.why-item-bullets { padding-left: 2px; }
.why-item-bullets li {
  position: relative;
  padding-left: 16px;
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.65;
  margin-bottom: 4px;
}
.why-item-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.feature-card .why-item-bullets { text-align: left; margin-top: 4px; }
.why-online-video-caption { font-size: 0.85rem; color: var(--gray); margin-top: 16px; line-height: 1.7; }
.why-online-video-caption a { font-weight: 600; }

/* Khung video 16:9 dùng chung (video giới thiệu, section "Tại sao học online"...) */
.video-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================
   BUTTON — biến thể viền trắng (dùng trên nền hero tối)
   ============================================ */
.btn-white-outline {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.5);
}
.btn-white-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
  color: white;
  transform: translateY(-2px);
}

/* ============================================
   HERO — hàng 4 tính năng nhanh + ảnh minh họa (v1.7.0)
   ============================================ */
.hero-quick-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 8px 0 32px;
}
.hero-quick-feature { display: flex; align-items: center; gap: 10px; }
.hero-quick-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}
.hero-quick-feature span { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.88); line-height: 1.3; }

.hero-visual { position: relative; }
.hero-visual-arrow { position: absolute; top: -6%; right: -4%; width: 55%; height: auto; z-index: 0; opacity: 0.9; }
.hero-visual-graphic { position: relative; z-index: 1; }
.hero-visual-img { width: 100%; border-radius: var(--radius-xl); display: block; }
.hero-visual-fallback {
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  color: rgba(255,255,255,0.25);
}

/* ============================================
   THỐNG KÊ — thanh trắng nổi dưới hero (v1.7.0)
   ============================================ */
.stats-strip-wrap { position: relative; z-index: 3; padding-bottom: 24px; }
.stats-strip {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 32px 40px;
  margin-top: -56px;
}
.stats-strip-item { display: flex; align-items: center; gap: 16px; }
.stats-strip-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.stats-strip-num { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--dark); line-height: 1.1; }
.stats-strip-lbl { font-size: 0.85rem; color: var(--gray); margin-top: 2px; }

/* ============================================
   NHÓM KHÓA HỌC (LỘ TRÌNH) — banner màu trên mỗi pricing-card (v1.7.0)
   ============================================ */
.pricing-card { padding: 0; overflow: hidden; }
.pricing-card-banner {
  position: relative;
  padding: 28px 28px 24px;
  color: white;
  overflow: hidden;
}
.pricing-card-banner-tag {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.pricing-card-banner-title { color: white; font-size: 1.3rem; margin-bottom: 6px; position: relative; z-index: 1; }
.pricing-card-banner-sub { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin: 0; position: relative; z-index: 1; }
.pricing-card-banner-icon {
  position: absolute;
  right: 16px;
  bottom: 10px;
  font-size: 3.5rem;
  color: rgba(255,255,255,0.15);
}
.path-banner--blue { background: linear-gradient(135deg, #2563eb, #1e40af); }
.path-banner--violet { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.path-banner--teal { background: linear-gradient(135deg, #0d9488, #0f766e); }
.pricing-card-body { padding: 28px; }
.pricing-card-body .pricing-features { margin-bottom: 20px; }
.pricing-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.pricing-price-row .pricing-price { margin-bottom: 0; }

/* ============================================
   TIN TỨC — badge ngày đè lên ảnh + link "Đọc thêm" (v1.7.0)
   ============================================ */
.news-date-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  text-align: center;
  box-shadow: var(--shadow);
  line-height: 1.1;
}
.news-date-badge-day { display: block; font-size: 1.1rem; font-weight: 800; color: var(--dark); }
.news-date-badge-month { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--primary); }
.news-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--primary); margin-top: 4px; }
.news-readmore i { transition: transform var(--transition); }
.news-readmore:hover i { transform: translateX(3px); }

/* ============================================
   HỌC VIÊN NÓI GÌ — carousel (v1.7.0)
   ============================================ */
.testimonial-carousel { position: relative; }
.testimonial-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 24px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.testimonial-carousel-track::-webkit-scrollbar { display: none; }
.testimonial-carousel-track > .testimonial-card { scroll-snap-align: start; }
.testimonial-carousel-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 2;
}
.testimonial-carousel-arrow:hover { background: var(--primary); color: white; }
.testimonial-carousel-arrow--prev { left: -22px; }
.testimonial-carousel-arrow--next { right: -22px; }
.testimonial-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.testimonial-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition);
}
.testimonial-carousel-dot.is-active { background: var(--primary); width: 22px; border-radius: 100px; }

/* ============================================
   NEWSLETTER — thẻ trắng bo góc (v1.7.0, thay cho band tối trước đó)
   ============================================ */
.newsletter-section { padding-top: 0; }
.newsletter-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.newsletter-copy-row { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 260px; }
.newsletter-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.newsletter-copy h2 { font-size: 1.3rem; margin-bottom: 4px; }
.newsletter-copy p { color: var(--gray); font-size: 0.9rem; margin: 0; }
.newsletter-form { width: 100%; max-width: 380px; flex-shrink: 0; }
.newsletter-form-row { display: flex; gap: 0; }
.newsletter-form-row .form-control { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.newsletter-form-row .btn { border-radius: 0 var(--radius) var(--radius) 0; white-space: nowrap; }
.newsletter-msg { min-height: 1.2em; font-size: 0.85rem; margin-top: 10px; }
.newsletter-msg.is-success { color: var(--success); }
.newsletter-msg.is-error { color: var(--error); }

/* ============================================
   NHÓM HỌC (LEARNDASH GROUPS)
   ============================================ */
.group-course-block .card-thumb { display: none; }
.group-lesson-locked { color: var(--gray); }

/* ============================================
   AJAX: MARK COMPLETE & BÌNH LUẬN
   ============================================ */
.ld-complete-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #dcfce7;
  color: #15803d;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
}
.edupro-comment-notice { margin: 0; }

/* ============================================
   KHU VỰC BÌNH LUẬN CHUẨN WORDPRESS (comments.php)
   Áp dụng cho MỌI trang dùng comments_template()/get_comments() thủ công
   — khóa học (tab "Đánh giá"), bài học (tab "Trao đổi & Thảo luận", xem
   inc/lesson-content-tabs-meta.php), nhóm, bài viết... — khác với khối
   bình luận riêng của LearnDash Focus Mode (.ld-focus-comments*, xem
   phía dưới). Trước v1.9.25 chỉ ô "Bình luận" được style, 3 field Tên/
   Email/Trang web + checkbox "Lưu thông tin" vẫn dùng markup mặc định
   của WordPress nên nhìn thô, không đồng bộ (xem comments.php).

   v1.9.52 — Redesign toàn bộ 1 bình luận (trước đó chỉ có style inline
   tối thiểu trong edupro_comment_render(), nhìn thô: không thẻ/khung,
   không avatar rõ ràng, chữ dính sát nhau) thành dạng "thẻ" (card) —
   nền nhẹ, bo góc, khoảng cách rõ ràng, avatar có viền, nút "Trả lời"
   dạng pill có icon, khối bình luận trả lời (children) thụt vào có
   viền trái màu primary để thấy rõ đang trong 1 nhánh trao đổi. Toàn bộ
   inline style cũ trong inc/template-tags.php (edupro_comment_render())
   đã được chuyển hết sang các class dưới đây (.edupro-comment-card,
   .edupro-comment-avatar, .edupro-comment-header...) để dễ chỉnh sửa
   sau này mà không cần đổi PHP.
   ============================================ */
.edupro-comments { margin-top: 8px; }
.edupro-comments .comments-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border);
}
.edupro-comments .comments-title::before {
  content: "\f086";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  font-size: 1rem;
}
.edupro-comments .comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edupro-comments .no-comments {
  color: var(--gray);
  padding: 16px 0;
}

/* Thẻ 1 bình luận */
.edupro-comment-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--gray-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.edupro-comment-card:hover {
  border-color: var(--primary-light, var(--border));
  box-shadow: var(--shadow-sm);
}
.edupro-comment-avatar { flex-shrink: 0; }
.edupro-comment-avatar img {
  display: block;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--border);
}
.edupro-comment-body { flex: 1; min-width: 0; }
.edupro-comment-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.edupro-comment-author {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
}
.edupro-comment-date {
  font-size: 0.78rem;
  color: var(--gray);
}
.edupro-comment-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warning);
  background: rgba(217, 119, 6, 0.1);
  padding: 4px 10px;
  border-radius: 100px;
  margin: 0 0 10px;
}
.edupro-comment-card .comment-text {
  font-size: 0.92rem;
  color: var(--dark-muted);
  line-height: 1.7;
  word-wrap: break-word;
}
.edupro-comment-card .comment-text p:last-child { margin-bottom: 0; }
.edupro-comment-actions { margin-top: 10px; }
.edupro-comment-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 5px 14px;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.edupro-comment-actions a:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* Bình luận trả lời (nested/threaded) — thụt vào, viền trái màu primary
   để thấy rõ đang trong 1 nhánh trao đổi, thay vì chỉ đường kẻ mờ. */
.comment-list .children {
  list-style: none;
  margin: 14px 0 0 32px;
  padding: 14px 0 0 20px;
  border-left: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comment-list .children .edupro-comment-card { background: var(--white); }

.comment-form-box {
  margin-top: 24px;
  padding: 24px;
  background: var(--gray-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.comment-form-box #reply-title,
.comment-form-box .comment-reply-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 16px;
}
.comment-form-box .comment-reply-title small { font-weight: 400; font-size: 0.8rem; margin-left: 8px; }
.comment-form-box .comment-reply-title small a { color: var(--gray); }
.comment-form-box .comment-notes,
.comment-form-box .logged-in-as { font-size: 0.85rem; color: var(--dark-muted); margin-bottom: 16px; }
.comment-form-box .logged-in-as a { color: var(--primary); }

/* Tên + Email nằm 2 cột trên desktop, xếp chồng trên mobile */
.comment-form-box #commentform {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.comment-form-box .comment-form-comment,
.comment-form-box .comment-notes,
.comment-form-box .logged-in-as,
.comment-form-box .form-submit,
.comment-form-box .comment-form-cookies-consent { flex: 0 0 100%; }
.comment-form-box .form-group--half { flex: 1 1 220px; }

.comment-form-box .form-submit { margin: 4px 0 0; }
.comment-form-box .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 16px;
  font-size: 0.85rem;
  color: var(--dark-muted);
}
.comment-form-box .comment-form-cookies-consent input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.comment-form-box .comment-form-cookies-consent label { margin: 0; font-weight: 400; }

.comment-form-box #cancel-comment-reply-link {
  color: var(--gray);
  font-weight: 400;
  text-decoration: underline;
}

/* ============================================
   LEARNDASH STYLES
   ============================================ */
.learndash-wrapper .ld-course-list-item { /* overrides */ }

.ld-breadcrumbs { font-size: 0.875rem; color: var(--gray); margin-bottom: 24px; }
.ld-breadcrumbs a { color: var(--gray); }
.ld-breadcrumbs a:hover { color: var(--primary); }

/* LearnDash Course header */
.learndash-wrapper .ld-course-header {
  background: var(--primary);
  color: white;
  padding: 40px;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
}

/* LearnDash lesson list — tên class thật do LearnDash render (đã xác minh trực tiếp trên trang học bài,
   không phải .ld-table-list* như bản v1.9.63 đoán nhầm): container .ld-lesson-items, từng dòng .ld-lesson-item. */
.learndash-wrapper .ld-lesson-items {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.learndash-wrapper .ld-lesson-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  transition: background var(--transition);
}
.learndash-wrapper .ld-lesson-item:hover { background: var(--gray-light); }

/* Progress bar */
.ld-progress .ld-progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.ld-progress .ld-progress-bar-percentage {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 100px;
  transition: width 0.5s ease;
}

/* LearnDash navigation */
.ld-nav-section-item { border-radius: var(--radius); overflow: hidden; }
.ld-focus-sidebar { border-right: 1px solid var(--border); }

/* Chỉ giao diện cho phần thu gọn theo Section Heading (logic nhóm/ẩn-hiện ở js/main.js -> EduPro.focusSectionNav()) — chỉ thêm mũi tên/con trỏ khi JS đã gắn class .edupro-ld-section-toggle.
   v1.9.68 — sửa lại đúng tên class thật .ld-lesson-item-section-heading (kiểm tra trực tiếp trên trang học bài
   đã đăng nhập mới phát hiện bản v1.9.63 dùng nhầm tên .ld-table-list-header, nên JS không nhóm/ẩn được gì). */
.ld-lesson-item-section-heading.edupro-ld-section-toggle {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 40px !important;
}
.ld-lesson-item-section-heading.edupro-ld-section-toggle::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transition);
}
.ld-lesson-item-section-heading.edupro-ld-section-toggle.is-expanded::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* ============================================
   v1.9.0 — NỘI DUNG KHÓA HỌC: KIỂU "ACCORDION"
   ------------------------------------------------
   Thay thế cho .curriculum-section-tabs (kiểu "Tab", style vẫn
   để inline trong single-sfwd-courses.php) khi Admin chọn
   "Accordion" ở metabox trên màn hình sửa Course (xem
   inc/course-display-meta.php). Mỗi Section là 1 <details>
   xếp chồng — bên trong lồng thêm <details> của từng Lesson
   (edupro_render_course_curriculum_lesson()), tạo accordion 2
   tầng hoàn toàn bằng HTML gốc, không cần JS.
   ============================================ */
.curriculum-section-accordion { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.curriculum-accordion-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.curriculum-accordion-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  background: var(--primary-light);
  list-style: none;
}
.curriculum-accordion-section-title::-webkit-details-marker { display: none; }
.curriculum-accordion-section-title::before {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.curriculum-accordion-section[open] > .curriculum-accordion-section-title::before { transform: rotate(180deg); }
/* Span đầu tiên (tiêu đề Section) giãn hết khoảng trống còn lại, đẩy
   .curriculum-accordion-section-count về sát mép phải — không cần
   justify-content:space-between (sẽ lệch vì ::before cũng là 1 flex item). */
.curriculum-accordion-section-title > span:first-of-type { flex: 1; }
.curriculum-accordion-section-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray);
  white-space: nowrap;
}
.curriculum-accordion-section-body { padding: 16px 20px; }
.curriculum-accordion-section-body .curriculum-accordion-section-body { padding: 0; }

/* Cuộn dọc khi danh sách bài học quá dài — áp dụng cho cả 3 kiểu hiển thị: accordion (mỗi Section), tab (mỗi Section) và danh sách phẳng (không dùng Section, kể cả trong tab theo khóa học ở trang Nhóm). */
.curriculum-accordion-section-body,
.curriculum-tab-panel,
.curriculum-lessons-scroll {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.curriculum-accordion-section-body::-webkit-scrollbar,
.curriculum-tab-panel::-webkit-scrollbar,
.curriculum-lessons-scroll::-webkit-scrollbar { width: 6px; }
.curriculum-accordion-section-body::-webkit-scrollbar-thumb,
.curriculum-tab-panel::-webkit-scrollbar-thumb,
.curriculum-lessons-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
.curriculum-accordion-section-body::-webkit-scrollbar-track,
.curriculum-tab-panel::-webkit-scrollbar-track,
.curriculum-lessons-scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================
   v1.9.8 — Hero khóa học: giới hạn số dòng mô tả (excerpt "sạch", xem
   edupro_get_clean_excerpt() trong inc/template-tags.php) — tránh mô tả
   quá dài đẩy hero cao bất thường, đồng thời có "…" rõ ràng khi bị cắt.
   ============================================ */
.hero-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   XVAST PLAYER: POSTER + NÚT PLAY
   ------------------------------------------------
   .xvast-player-block bọc: .xvast-poster (ảnh đại diện + nút Play, hiện
   sẵn) + nút Download (nếu có, hiện sẵn NGAY, không đợi bấm Play).

   v1.9.16 — .xvast-poster giờ là 1 thẻ <a href="...?player=xvast"> bọc
   ngoài .xvast-poster-play (giờ là <span>, không phải <button> nữa) — bấm
   Play chỉ là 1 liên kết bình thường, KHÔNG cần JS (xem functions.php,
   filter learndash_template_tab_content, và README.md mục v1.9.16 để biết
   đầy đủ lý do: player Xvast bắt buộc cần document.write() lúc parse
   trang lần đầu VÀ cần điều hướng đăng nhập top-level thật sang xvast.com
   — cả 2 chỉ đúng khi đây thực sự là 1 lượt tải trang mới, nên dùng thẳng
   query string `?player=xvast` trên chính URL bài học thay vì JS/iframe).
   Không còn trạng thái "active" hay khung chứa player nào trên
   .xvast-poster nữa — khi bấm Play, TRÌNH DUYỆT tải lại toàn bộ trang.
   ============================================ */
.xvast-player-block { margin: 20px 0; }
.xvast-player-block > p { margin-top: 14px; } /* khoảng cách giữa poster và nút Download hiện sẵn bên dưới */
.xvast-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--dark);
  background-image: linear-gradient(135deg, var(--primary-dark), var(--dark));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* .xvast-poster giờ là thẻ <a> (v1.9.16) */
  cursor: pointer;
}
.xvast-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  transition: background var(--transition);
}
.xvast-poster:hover::before { background: rgba(0, 0, 0, 0.35); }
.xvast-poster-play {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition), background var(--transition);
}
.xvast-poster-play i { margin-left: 4px; } /* icon play lệch tâm, bù lại cho cân */
.xvast-poster-play:hover { transform: scale(1.08); background: var(--white); }

/* ============================================
   LEARNDASH FOCUS MODE — COMMENTS (khu vực trao đổi dưới bài học/khóa học)
   ============================================ */
/* Markup gốc từ plugin (sfwd-lms/themes/ld30/templates/focus/comments.php + comments_list.php), không sửa trực tiếp file plugin — chỉ override bằng CSS theo class có sẵn để trông như khung trao đổi/chat chuyên nghiệp.
   Ẩn CÓ ĐIỀU KIỆN bằng CSS in ra qua PHP chỉ khi ở trang Lesson (is_singular('sfwd-lessons')) — vì Lesson có tab riêng "Trao đổi & Thảo luận" thay thế (xem inc/lesson-content-tabs-meta.php), còn Topic/Quiz vẫn dùng khối gốc này. Style bên dưới áp dụng cho cả 2 trường hợp. */
.ld-focus-comments {
  max-width: 760px;
  margin: 8px auto 0;
  padding: 32px 0 8px;
}

/* Header "N Comments" + nút Thu gọn/Mở rộng */
.ld-focus-comments__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}
.ld-focus-comments__header {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark);
}
.ld-focus-comments .ld-expand-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.ld-focus-comments .ld-expand-button:hover { background: var(--secondary-light); color: var(--secondary); }
.ld-focus-comments .ld-expand-button .ld-icon-arrow-down { transition: transform var(--transition); }
.ld-focus-comments .ld-expand-button.ld-expanded .ld-icon-arrow-down { transform: rotate(180deg); }
#ld-comments-post-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  background: var(--primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 20px;
  transition: background var(--transition), transform var(--transition);
}
#ld-comments-post-button:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* Danh sách bình luận — mỗi bình luận là 1 "message card" */
.ld-focus-comments__comments-items { display: flex; flex-direction: column; gap: 4px; }
.ld-focus-comment { list-style: none; }

/*
  Markup gốc của LD: .ld-comment-wrapper chứa 2 khối con NGANG HÀNG
  (không lồng nhau) — .ld-comment-avatar (ảnh đại diện + tên/ngày) và
  .ld-comment-body (nội dung + nút Reply). Xếp .ld-comment-wrapper theo
  cột: hàng trên là avatar+tên/ngày, hàng dưới là bong bóng nội dung
  được thụt vào ngang bằng tên (margin-left = bề rộng avatar + gap) —
  tạo cảm giác "1 tin nhắn" mà không cần đổi cấu trúc HTML của plugin.
*/
.ld-focus-comment .ld-comment-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: var(--gray-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.ld-focus-comment .ld-comment-wrapper:hover { box-shadow: var(--shadow-sm); }

/* Bình luận của Quản lý/Giảng viên — làm nổi bật để học viên dễ nhận diện phản hồi chính thức */
.ld-focus-comment.role-administrator .ld-comment-wrapper,
.ld-focus-comment.role-group_leader .ld-comment-wrapper,
.ld-focus-comment.role-wdm_instructor .ld-comment-wrapper {
  background: var(--primary-light);
  border-color: rgba(12, 45, 85, 0.15);
  border-left: 3px solid var(--primary);
}

.ld-focus-comment .ld-comment-alert {
  display: block;
  font-size: 0.78rem;
  color: var(--warning);
  margin-bottom: 8px;
}

.ld-focus-comment .ld-comment-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ld-focus-comment .ld-comment-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--border);
  display: block;
  flex-shrink: 0;
}
.ld-focus-comment .ld-comment-avatar-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ld-focus-comment .ld-comment-author-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--dark);
}
.ld-focus-comment .ld-comment-permalink {
  font-size: 0.78rem;
  color: var(--gray);
  text-decoration: none;
}
.ld-focus-comment .ld-comment-permalink:hover { color: var(--primary); text-decoration: underline; }

/* Bong bóng nội dung — thụt vào ngang bằng tên (44px avatar + 12px gap) */
.ld-focus-comment .ld-comment-body {
  margin-left: 56px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.ld-focus-comment.role-administrator .ld-comment-body,
.ld-focus-comment.role-group_leader .ld-comment-body,
.ld-focus-comment.role-wdm_instructor .ld-comment-body {
  background: var(--white);
  border-color: rgba(12, 45, 85, 0.12);
}
.ld-focus-comment .ld-comment-body p:last-of-type { margin-bottom: 0; }
.ld-focus-comment .ld-comment-body p { font-size: 0.9rem; line-height: 1.7; color: var(--dark-muted); margin-bottom: 8px; }

.ld-focus-comment .ld-comment-reply { margin-top: 10px; }
.ld-focus-comment .ld-comment-reply a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 6px 14px;
  background: var(--gray-light);
  border-radius: 999px;
  transition: background var(--transition), color var(--transition);
}
.ld-focus-comment .ld-comment-reply a:hover { background: var(--primary); color: var(--white); }

/* Bình luận trả lời (nested) — thụt vào + có đường nối để thấy rõ đang "trao đổi" theo nhánh */
.ld-focus-comments .children {
  list-style: none;
  margin: 6px 0 6px 30px;
  padding-left: 20px;
  border-left: 2px dashed var(--border);
}
.ld-focus-comments .children .ld-comment-wrapper { background: var(--white); }

/* Form "Để lại bình luận" */
.ld-focus-comments__form-container {
  margin-top: 24px;
  padding: 24px;
  background: var(--gray-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.ld-focus-comments__form-container #respond > h3,
.ld-focus-comments__form-container .comment-reply-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
}
.ld-focus-comments__form-container .comment-reply-title small { font-weight: 400; font-size: 0.8rem; margin-left: 8px; }
.ld-focus-comments__form-container .comment-form-comment,
.ld-focus-comments__form-container .comment-form-author,
.ld-focus-comments__form-container .comment-form-email,
.ld-focus-comments__form-container .comment-form-url {
  margin-bottom: 16px;
}
.ld-focus-comments__form-container label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}
.ld-focus-comments__form-container textarea,
.ld-focus-comments__form-container input[type="text"],
.ld-focus-comments__form-container input[type="email"],
.ld-focus-comments__form-container input[type="url"] {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ld-focus-comments__form-container textarea:focus,
.ld-focus-comments__form-container input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(12, 45, 85, 0.12);
}
.ld-focus-comments__form-container textarea { resize: vertical; min-height: 110px; }
.ld-focus-comments__form-container .form-submit { margin-top: 4px; margin-bottom: 0; }
.ld-focus-comments__form-container #submit,
.ld-focus-comments__form-container input[type="submit"] {
  padding: 12px 28px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  background: var(--primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.ld-focus-comments__form-container #submit:hover,
.ld-focus-comments__form-container input[type="submit"]:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.ld-focus-comments__form-container .logged-in-as { font-size: 0.8rem; color: var(--gray); margin-bottom: 12px; }
.ld-focus-comments__form-container .logged-in-as a { color: var(--primary); }
.ld-focus-comments__form-container .comment-notes { font-size: 0.8rem; color: var(--gray); margin-bottom: 16px; }

@media (max-width: 640px) {
  .ld-focus-comment .ld-comment-wrapper { padding: 14px; gap: 8px; }
  .ld-focus-comment .ld-comment-avatar img { width: 36px; height: 36px; }
  .ld-focus-comment .ld-comment-body { margin-left: 0; }
  .ld-focus-comments .children { margin-left: 14px; padding-left: 12px; }
  .ld-focus-comments__form-container { padding: 16px; }
}

/* ============================================
   LESSON CONTENT TABS (v1.9.43)
   ------------------------------------------------
   Style lại tab tuỳ chỉnh + tab hệ thống "Trao đổi & Thảo
   luận" của Lesson (inc/lesson-content-tabs-meta.php) theo
   đúng design token chung của site (--primary, --font-heading,
   --radius*, --shadow-sm, --transition) thay vì màu/khoảng
   cách rời rạc gán trực tiếp qua thuộc tính style="" trước đó.

   Markup: .edupro-lesson-extra-tabs > .course-tab-btn-group >
   .course-tab-btn (+ .is-active khi đang chọn), panel dùng
   .course-tab-panel + [role="tabpanel"]. Có cố ý dùng lại tên
   class .course-tab-btn giống hệt trang khoá học
   (single-sfwd-courses.php) để đồng bộ ngôn ngữ thiết kế toàn
   site, nhưng toàn bộ rule bên dưới đều SCOPE trong
   .edupro-lesson-extra-tabs nên không ảnh hưởng tab của trang
   khoá học (trang đó vẫn đang dùng style="" riêng, chưa đổi
   trong đợt này).
   ============================================ */
.edupro-lesson-extra-tabs {
  margin-top: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.edupro-lesson-extra-tabs .course-tab-btn-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 8px 0;
  background: var(--gray-light);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.edupro-lesson-extra-tabs .course-tab-btn-group::-webkit-scrollbar { display: none; }
.edupro-lesson-extra-tabs .course-tab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.edupro-lesson-extra-tabs .course-tab-btn i { font-size: 0.85rem; opacity: 0.75; }
.edupro-lesson-extra-tabs .course-tab-btn:hover {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.06);
}
.edupro-lesson-extra-tabs .course-tab-btn.is-active {
  color: var(--primary);
  background: var(--white);
  box-shadow: inset 0 -2px 0 0 var(--primary);
}
.edupro-lesson-extra-tabs .course-tab-btn.is-active i { opacity: 1; }
.edupro-lesson-extra-tabs .course-tab-panel {
  padding: 28px;
  color: var(--dark-muted);
  line-height: 1.75;
}
.edupro-lesson-extra-tabs .course-tab-panel > *:last-child { margin-bottom: 0; }
.edupro-lesson-extra-tabs .course-tab-panel p { margin-bottom: 1em; }
.edupro-lesson-extra-tabs .course-tab-panel img { border-radius: var(--radius-sm); }
.edupro-lesson-extra-tabs .course-tab-panel .edupro-comments { margin-top: 0; }
@media (max-width: 640px) {
  .edupro-lesson-extra-tabs .course-tab-btn { padding: 11px 16px; font-size: 0.85rem; }
  .edupro-lesson-extra-tabs .course-tab-panel { padding: 20px; }
}

/* ============================================
   WOOCOMMERCE STYLES
   ============================================ */
.woocommerce-page .woocommerce {  }

/* ============================================
   TRANG GIỎ HÀNG (cart cổ điển — shortcode [woocommerce_cart])
   Layout 2 cột (bảng sản phẩm + khung tổng cộng) theo phong cách bo góc/card của theme.
   ============================================ */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
}

/* Khi WooCommerce in thêm khối thông báo .woocommerce-notices-wrapper (VD sau khi thêm sản phẩm), nó trở thành con thứ nhất của .woocommerce và làm xô lệch grid tự động — nên chỉ định rõ vị trí từng phần tử: thông báo luôn chiếm trọn hàng 1 (span 2 cột), form giỏ hàng + khung tổng cộng cố định ở hàng 2. */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .woocommerce-message,
.woocommerce-cart .woocommerce > .woocommerce-info {
  grid-column: 1 / -1;
  grid-row: 1;
}
.woocommerce-cart-form,
.cart-collaterals {
  grid-column: auto;
  grid-row: 2;
}
.woocommerce-cart-form { grid-column: 1; }
.cart-collaterals { grid-column: 2; }
@media (max-width: 900px) {
  .woocommerce-cart-form,
  .cart-collaterals {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Bảng sản phẩm trong giỏ */
.woocommerce-cart-form table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.woocommerce-cart-form table.shop_table thead th {
  background: var(--gray-light);
  color: var(--dark);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.woocommerce-cart-form table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.woocommerce-cart-form table.shop_table tr:last-child td { border-bottom: none; }

.woocommerce-cart-form .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.woocommerce-cart-form .product-name a {
  font-weight: 600;
  color: var(--dark);
}
.woocommerce-cart-form .product-name a:hover { color: var(--primary); }
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal { color: var(--dark); font-weight: 600; white-space: nowrap; }

.woocommerce-cart-form .quantity .qty {
  width: 64px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

/* Icon "xoá" (x) — chuyển thành nút tròn nhỏ màu đỏ nhạt thay vì icon thô mặc định */
.woocommerce-cart-form .product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fee2e2 !important;
  color: var(--error) !important;
  font-size: 1rem;
  line-height: 1;
}
.woocommerce-cart-form .product-remove a.remove:hover { background: var(--error) !important; color: var(--white) !important; }

/* Hàng mã giảm giá + nút cập nhật giỏ hàng */
.woocommerce-cart-form .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px !important;
  background: var(--gray-light);
}
.woocommerce-cart-form .coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.woocommerce-cart-form #coupon_code {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 160px;
}
.woocommerce-cart-form button[name="apply_coupon"],
.woocommerce-cart-form button[name="update_cart"] {
  background: var(--primary) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
}
.woocommerce-cart-form button[name="update_cart"]:disabled {
  background: var(--gray) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Khung "Tổng cộng giỏ hàng" bên phải */
.cart-collaterals .cart_totals {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.cart-collaterals .cart_totals > h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 16px;
}
.cart-collaterals table.shop_table {
  width: 100%;
  border-collapse: collapse;
}
.cart-collaterals table.shop_table th,
.cart-collaterals table.shop_table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.cart-collaterals table.shop_table th { color: var(--gray); font-weight: 600; font-size: 0.9rem; width: 40%; }
.cart-collaterals table.shop_table td { color: var(--dark); font-weight: 600; text-align: right; }
.cart-collaterals table.shop_table tr:last-child th,
.cart-collaterals table.shop_table tr:last-child td { border-bottom: none; }
.cart-collaterals .order-total th,
.cart-collaterals .order-total td { font-size: 1.15rem; font-weight: 800; color: var(--primary); padding-top: 16px; }

.wc-proceed-to-checkout { margin-top: 20px; }
.wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--primary) !important;
  color: var(--white) !important;
  padding: 16px !important;
  border-radius: var(--radius) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--primary-dark) !important; }

@media (max-width: 640px) {
  .woocommerce-cart-form table.shop_table thead { display: none; }
  .woocommerce-cart-form table.shop_table tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    padding: 16px;
    border-bottom: 8px solid var(--gray-light);
  }
  .woocommerce-cart-form table.shop_table td { border-bottom: none; padding: 0; grid-column: 2; }
  .woocommerce-cart-form .product-remove { grid-row: 1 / span 4; grid-column: 1; }
}

/* Product single */
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--radius-lg); overflow: hidden; }

.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--primary); font-size: 1.5rem; font-weight: 800; font-family: var(--font-heading); }

.woocommerce-variation-price .woocommerce-Price-amount { color: var(--primary); }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page .button {
  background: var(--primary) !important;
  color: white !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  transition: all var(--transition) !important;
  border: none !important;
}
.woocommerce .button:hover,
.woocommerce button.button:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px) !important;
}

/* Lưới sản phẩm (Shop/Category/Tag + "Sản phẩm liên quan"). Dùng CSS Grid tự co giãn (auto-fit/minmax) thay vì class .columns-N mặc định của WooCommerce, để chỉ 1 nguồn cấu hình số cột duy nhất. Các trang này 404 với khách (xem inc/woocommerce-visibility.php) nên style ở đây chủ yếu phục vụ Admin xem trước sản phẩm. */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 28px !important;
  margin: 0 0 40px !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce ul.products li.product {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  padding: 0 !important;
  width: auto !important;
  margin: 0 !important;
  position: relative;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin: 16px 20px 6px;
}
.woocommerce ul.products li.product .price {
  display: block;
  margin: 0 20px 16px;
  color: var(--primary);
  font-weight: 800;
  font-family: var(--font-heading);
}
.woocommerce ul.products li.product .button {
  display: block;
  margin: 0 20px 20px !important;
  width: calc(100% - 40px);
  text-align: center;
}
.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--dark) !important;
  color: var(--white) !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.6 !important;
}

/* Sao đánh giá — dùng màu --secondary (vàng đồng) sẵn có của theme thay vì
   màu cam mặc định của WooCommerce, khớp bảng màu site. */
.woocommerce .star-rating { color: var(--secondary); }
.woocommerce .star-rating::before { color: var(--border); }

/* Breadcrumb WooCommerce — khớp phong cách .breadcrumb tự viết của theme
   (xem khối BREADCRUMBS bên dưới) dù không dùng chung 1 class, vì
   .woocommerce-breadcrumb do plugin tự in ra, không đi qua template-part
   breadcrumb của theme. */
.woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 28px !important;
}
.woocommerce-breadcrumb a { color: var(--gray); }
.woocommerce-breadcrumb a:hover { color: var(--primary); }

.woocommerce-result-count,
.woocommerce-ordering { color: var(--gray); font-size: 0.875rem; }
.woocommerce-ordering select.orderby {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
}

/* Trang sản phẩm đơn — khối tóm tắt (tiêu đề/giá/mô tả ngắn/nút mua). Khối
   gallery (.woocommerce-product-gallery) đã có border-radius từ trước, chỉ
   bổ sung phần chưa style: tiêu đề, mô tả ngắn, số lượng, meta. */
.woocommerce div.product .summary { padding-top: 8px; }
.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  margin-bottom: 12px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--dark-muted);
  line-height: 1.7;
  margin: 16px 0;
}
.woocommerce div.product .quantity .qty {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 80px;
  text-align: center;
}
.woocommerce div.product .product_meta {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--gray);
}
.woocommerce div.product .product_meta a { color: var(--gray); }
.woocommerce div.product .product_meta a:hover { color: var(--primary); }

/* Tabs mô tả/đánh giá ở trang sản phẩm đơn — style tối giản khớp phong
   cách .course-tab-btn đã dùng ở single-sfwd-courses.php (không cần JS
   riêng, WooCommerce tự xử lý ẩn/hiện panel). */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 14px 20px;
  font-weight: 600;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.woocommerce div.product .woocommerce-tabs .panel { padding: 28px 0; line-height: 1.75; }

/* "Sản phẩm liên quan" ở cuối trang — dùng lại chính style lưới ở trên. */
.woocommerce div.product .related.products { margin-top: 56px; }
.woocommerce div.product .related.products > h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin-bottom: 24px;
}

/* Checkout steps */
.woocommerce-checkout #order_review_heading { font-family: var(--font-heading); font-size: 1.25rem; }
.woocommerce form .form-row label { font-weight: 600; font-size: 0.875rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  transition: border-color var(--transition) !important;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--primary) !important; }

/* Order summary */
.woocommerce-checkout-review-order-table { border-radius: var(--radius-lg); overflow: hidden; }

/* My account tabs */
.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 4px; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius);
  color: var(--dark-muted);
  font-weight: 500;
  transition: all var(--transition);
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--primary);
  color: white;
}

/* ============================================
   NOTIFICATION / FLASH MESSAGES
   ============================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius) !important;
  border: none !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}
.woocommerce-message { background: #dcfce7 !important; color: #15803d !important; border-left: 4px solid #16a34a !important; }
.woocommerce-info { background: var(--primary-light) !important; color: var(--primary-dark) !important; border-left: 4px solid var(--primary) !important; }
.woocommerce-error { background: #fee2e2 !important; color: #b91c1c !important; border-left: 4px solid var(--error) !important; }

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { color: var(--border); }
.breadcrumb-current { color: var(--dark); font-weight: 500; }

/* ============================================
   SEARCH
   ============================================ */
.search-form { display: flex; gap: 0; }
.search-form input[type="search"] {
  flex: 1;
  padding: 12px 20px;
  border: 1.5px solid var(--border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 0.95rem;
}
.search-form input:focus { outline: none; border-color: var(--primary); }
.search-form button {
  padding: 12px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  transition: background var(--transition);
}
.search-form button:hover { background: var(--primary-dark); }

/* ============================================
   PAGINATION
   the_posts_pagination() bọc các nút số trang trong <div class="nav-links"> bên trong <nav class="pagination">, nên display:flex phải gắn vào .pagination .nav-links (không phải .pagination) để xếp hàng đúng; thêm flex-wrap để tự xuống dòng khi có nhiều số trang.
   ============================================ */
.pagination { margin-top: 48px; }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.pagination a,
.pagination span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark-muted);
  transition: all var(--transition);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pagination .current { background: var(--primary); border-color: var(--primary); color: white; }

/* ============================================
   SIDEBAR / WIDGET
   ============================================ */
.widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.widget-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
}

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-3px); }

/* ============================================
   LOADING / SKELETON
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #e9ecef 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================
   LAYOUT 2 CỘT DÙNG CHUNG (single.php, single-sfwd-courses.php, single-groups.php, archive-sfwd-courses.php, template-tai-khoan.php)
   Dùng class dùng chung thay vì inline style cố định trong PHP, để có thể áp dụng @media và co lại 1 cột trên điện thoại/tablet — bố cục desktop giữ nguyên. */
.edupro-2col-post {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
}
.edupro-2col-course {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	align-items: start;
}
.edupro-archive-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}
.edupro-dashboard-layout {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.edupro-dashboard-layout > aside { flex: 0 0 240px; min-width: 220px; }
.edupro-dashboard-content { flex: 1; min-width: 280px; }
/* Cột phụ dạng "dính" (giỏ mua khóa học, bộ lọc) — phải bỏ sticky khi đã
   xếp chồng 1 cột trên màn hình nhỏ, nếu không sẽ dính đè lên nội dung phía
   trên khi cuộn trang. */
.edupro-sticky-aside { position: sticky; top: 90px; }
/* Grid item mặc định min-width:auto — nếu bên trong có hàng flex không wrap
   (VD thanh tab nhiều khóa học ở single-groups.php/single-sfwd-courses.php),
   nội dung ép cả cột grid (và cả trang) rộng ra ngoài khung, gây tràn ngang,
   đè lệch layout. min-width:0 buộc grid item tôn trọng đúng độ rộng cột,
   để overflow-x:auto của hàng tab bên trong hoạt động đúng. */
.edupro-course-tabs-wrap { min-width: 0; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .edupro-archive-layout { grid-template-columns: 1fr; }
  .edupro-archive-layout .edupro-sticky-aside { position: static; top: auto; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { gap: 40px; }
}
@media (max-width: 768px) {
  :root { --container-px: 16px; }
  .section { padding: 56px 0; }
  .section-lg { padding: 72px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .edupro-2col-post,
  .edupro-2col-course { grid-template-columns: 1fr; gap: 24px; }
  .edupro-dashboard-layout { flex-direction: column; }
  .edupro-dashboard-layout > aside,
  .edupro-dashboard-content { flex: 1 1 100%; min-width: 0; width: 100%; }
  .edupro-sticky-aside { position: static; top: auto; }
  .hero { padding: 64px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  /* CSS cho #mobile-nav-panel (panel menu mobile trượt ra từ trái). */
  .mobile-nav-panel {
    display: block;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 24px 16px;
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s;
    z-index: 1001;
    border-top: 1px solid var(--border);
  }
  .mobile-nav-panel.nav-open { transform: translateX(0); visibility: visible; }
  .mobile-nav-panel ul { display: flex; flex-direction: column; gap: 4px; }
  .mobile-nav-panel a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    padding: 12px 16px;
    color: var(--dark-muted);
    border-radius: var(--radius);
  }
  .mobile-nav-panel a:hover,
  .mobile-nav-panel .current-menu-item > a { color: var(--primary); background: var(--primary-light); }
  .mobile-nav-panel .menu-item-has-children { position: relative; }
  .mobile-nav-panel .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    box-shadow: none;
    border: none;
    background: var(--gray-light);
    margin-top: 4px;
    margin-left: 16px;
    padding: 4px;
    min-width: 0;
  }
  body.nav-overlay::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 998;
  }
  /* Trên mobile chỉ ẩn phần chữ của các nút Nhóm học/Tài khoản/Đăng xuất/Đăng nhập/Đăng ký (.btn-label, xem header.php), giữ icon — nút thu lại thành hình vuông chỉ icon, gọn để không đẩy nav-toggle ra ngoài màn hình. */
  .header-actions { gap: 6px; }
  .header-actions .btn-label { display: none; }
  .header-actions .btn { padding: 10px; gap: 0; }
  /* Nút Tài khoản thu gọn icon-only trên mobile nhưng vẫn giữ mũi tên .header-account-caret — cần khoảng cách nhỏ riêng giữa icon và mũi tên. Giới hạn bề rộng submenu để không tràn màn hình nhỏ. */
  .header-account-btn { gap: 4px; }
  .header-account-submenu { min-width: 200px; max-width: calc(100vw - 32px); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .pricing-card.featured { transform: none; }
  .why-online-grid { grid-template-columns: 1fr; gap: 32px; }
  .newsletter-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-form { max-width: 100%; }
  .section-header-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-quick-features { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); margin-top: -24px; padding: 24px; }
  .testimonial-carousel-track { grid-auto-columns: 100%; }
  .testimonial-carousel-arrow { display: none; }
  .pricing-card-body { padding: 22px; }
  .pricing-card-banner { padding: 22px 22px 20px; }
  .newsletter-card { padding: 28px; justify-content: center; text-align: center; }
  .newsletter-copy-row { justify-content: center; }
  .newsletter-form { max-width: 100%; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }
  .btn-lg { padding: 14px 24px; font-size: 1rem; }
  .hero-stats { gap: 20px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .newsletter-form-row { flex-direction: column; }
  .newsletter-form-row .form-control { border-radius: var(--radius); border-right: 1.5px solid var(--border); }
  .newsletter-form-row .btn { border-radius: var(--radius); width: 100%; }
}

/* Print */
@media print {
  .site-header, .site-footer, .back-to-top, .nav-toggle { display: none !important; }
  .hero { color: black; background: white; }
}

/* ============================================================
   v1.9.64 — TÍCH HỢP BUDDYPRESS (Hoạt động / Hồ sơ / Nhóm)
   ============================================================
   BỐI CẢNH: người dùng đã cài plugin BuddyPress (thư mục
   /buddypress/, bản 14.5.2, dùng bộ template "bp-nouveau" mặc định)
   và yêu cầu lên giao diện đồng bộ với theme — CHƯA gắn theo course_id
   (việc phân loại nhóm/forum theo khóa học sẽ làm sau nếu cần).

   CÁCH HOẠT ĐỘNG: theme KHÔNG có file `page.php` "biết" gì về
   BuddyPress cả — BuddyPress tự nhận diện `page.php` của theme này là
   1 wrapper hợp lệ (xem `bp_get_theme_compat_templates()` trong chính
   mã nguồn plugin: thứ tự ưu tiên tìm `plugin-buddypress.php` ->
   `buddypress.php` -> `community.php` -> `generic.php` -> `page.php` ->
   ...), rồi tự "cấy" nội dung của nó vào ĐÚNG chỗ `the_content()` in ra
   trong `page.php` (khối `.entry-content`, xem file `page.php`). Vì
   vậy KHÔNG cần tạo template PHP riêng nào cho BuddyPress — chỉ cần
   viết CSS để "khoác áo" lại đúng markup/class THẬT mà plugin tự in
   ra (đã xác minh toàn bộ tên class dưới đây bằng cách đọc trực tiếp
   file nguồn `buddypress/bp-templates/bp-nouveau/css/buddypress.css`
   — không phải suy đoán tên class như 1 số plugin không có mã nguồn
   sẵn để đọc).

   Toàn bộ khối này chỉ ĐÈ THÊM (không xoá) CSS gốc của BuddyPress —
   giữ nguyên hành vi/JS gốc (tab chuyển động, dropdown, autocomplete
   nhắc tên...), chỉ đổi màu sắc/bo góc/khoảng cách/font cho khớp theme.
   ============================================================ */

/* ---- Khung chung ---- */
#buddypress,
.buddypress-wrap {
  font-family: var(--font-body);
  color: var(--dark-muted);
}
#buddypress a { color: var(--primary); }
#buddypress h1, #buddypress h2, #buddypress h3, #buddypress h4 {
  font-family: var(--font-heading);
  color: var(--dark);
}

/* ---- Header hồ sơ/nhóm: ảnh bìa + avatar + tên — cùng ngôn ngữ "hero
   banner" đã dùng ở trang chi tiết khóa học/nhóm học (single-groups.php)
   để khu vực cộng đồng không bị lạc phong cách. ---- */
#buddypress #item-header,
.buddypress-wrap #item-header {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  color: var(--white);
}
#cover-image-container { position: relative; background: transparent; }
#header-cover-image { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
#item-header-avatar { padding: 20px 24px 0; }
#item-header-avatar a img,
.single-headers #item-header-avatar a img {
  border: 4px solid var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow);
  background: var(--white);
}
#item-header-content {
  padding: 12px 24px 24px;
}
#item-header-content h2, #item-header-content .bp-header-tag { color: var(--white); }
#item-header-content .user-nicename,
#item-header-content .activity {
  color: rgba(255,255,255,0.75);
}
#item-actions {
  padding: 0 24px 20px;
}

/* ---- Tab điều hướng (Hoạt động/Hồ sơ/Nhóm/Thành viên...) — cùng ngôn
   ngữ underline/pill đã dùng cho tab bar khóa học (task "curriculum
   tabs" — xem .course-tab-btn) để nhất quán toàn site. ---- */
.buddypress-wrap .bp-navs {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow-x: auto;
}
.buddypress-wrap .bp-navs ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 6px;
}
.buddypress-wrap .bp-navs ul li a,
.buddypress-wrap .bp-navs ul li span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.buddypress-wrap .bp-navs ul li a:hover { background: var(--gray-light); color: var(--dark); }
.buddypress-wrap .bp-navs ul li.selected a,
.buddypress-wrap .bp-navs ul li.current a {
  background: var(--primary);
  color: var(--white);
}
.buddypress-wrap .bp-navs ul li .count {
  background: rgba(0,0,0,0.08);
  border-radius: 100px;
  padding: 1px 7px;
  font-size: 0.72rem;
}
.buddypress-wrap .bp-navs ul li.selected .count,
.buddypress-wrap .bp-navs ul li.current .count { background: rgba(255,255,255,0.25); }

/* ---- Danh sách kiểu thẻ (thành viên, nhóm) — dùng lại .card visual
   language (viền + bo góc + đổ bóng khi hover) cho khớp course-card. ---- */
.buddypress-wrap .bp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
}
.buddypress-wrap .bp-list > li,
.buddypress-wrap .bp-list li {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: box-shadow var(--transition), transform var(--transition);
  list-style: none;
}
.buddypress-wrap .bp-list li:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.buddypress-wrap .bp-list li .item-avatar img.avatar {
  border-radius: 50%;
  border: 2px solid var(--border);
}
.buddypress-wrap .bp-list li .list-title,
.buddypress-wrap .bp-list li .list-title a {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark);
  font-size: 1rem;
}
.buddypress-wrap .bp-list li .item-meta,
.buddypress-wrap .bp-list li .meta,
.buddypress-wrap .bp-list li .last-post {
  color: var(--gray);
  font-size: 0.85rem;
}

/* ---- Avatar chung (mọi nơi khác ngoài .bp-list) ---- */
.buddypress-wrap img.avatar { border-radius: 50%; }

/* ---- Nút bấm — quy về đúng hình dạng/màu .btn/.btn-primary/.btn-outline
   đã dùng xuyên suốt site, không thêm class mới vào markup của plugin,
   chỉ style lại đúng selector thật (.button/.generic-button). ---- */
.buddypress-wrap .button,
.buddypress-wrap a.button,
.buddypress-wrap .generic-button a,
.buddypress-wrap div.generic-button a,
.buddypress-wrap li.generic-button a,
.buddypress-wrap #whats-new-submit input,
.buddypress-wrap input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius);
  border: 2px solid var(--primary);
  background: var(--primary);
  color: var(--white);
  transition: all var(--transition);
  cursor: pointer;
}
.buddypress-wrap .button:hover,
.buddypress-wrap a.button:hover,
.buddypress-wrap .generic-button a:hover,
.buddypress-wrap #whats-new-submit input:hover,
.buddypress-wrap input[type="submit"]:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-1px);
}
/* Nút phụ (VD "Hủy theo dõi", "Rời nhóm") — LearnDash/BP thường gắn
   thêm class .confirm hoặc để plugin tự thêm .loading khi đang xử lý,
   giữ nguyên hành vi JS, chỉ nhạt màu hơn nút chính cho đúng phân cấp
   thị giác (hành động phụ không nên nổi bằng hành động chính). */
.buddypress-wrap .bp-secondary-action a,
.buddypress-wrap .leave-group a {
  background: transparent;
  color: var(--primary);
}
.buddypress-wrap .bp-secondary-action a:hover,
.buddypress-wrap .leave-group a:hover {
  background: var(--primary-light);
}

/* ---- Khung "Bạn đang nghĩ gì?" (đăng hoạt động) — cùng style ô nhập
   liệu đã dùng cho form bình luận Focus Mode (.ld-focus-comments__form-container)
   để 2 khu vực "trao đổi" trên site trông đồng bộ. ---- */
.buddypress-wrap #whats-new-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.buddypress-wrap #whats-new-textarea textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.buddypress-wrap #whats-new-textarea textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---- Dòng hoạt động (activity stream) — "message card" giống hệt
   ngôn ngữ đã build cho .ld-focus-comment (avatar trái + bong bóng nội
   dung phải, meta xám nhỏ) để cảm giác "trao đổi" nhất quán toàn site. ---- */
.buddypress-wrap .activity-list .activity-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.buddypress-wrap .activity-list .activity-item .activity-header .avatar {
  border-radius: 50%;
}
.buddypress-wrap .activity-list .activity-item .activity-header {
  font-size: 0.92rem;
  color: var(--dark-muted);
  margin-bottom: 10px;
}
.buddypress-wrap .activity-list .activity-item .activity-header strong,
.buddypress-wrap .activity-list .activity-item .activity-header a {
  color: var(--dark);
}
.buddypress-wrap .activity-list .activity-item .activity-header .time-since {
  color: var(--gray);
  font-size: 0.78rem;
}
.buddypress-wrap .activity-list .activity-item .activity-content {
  color: var(--dark-muted);
  line-height: 1.7;
}
.buddypress-wrap .activity-list .activity-item ul.activity-meta {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.buddypress-wrap .activity-list .activity-item .activity-meta.action a,
.buddypress-wrap .activity-list .activity-item .activity-meta.action .button {
  background: transparent;
  border: none;
  color: var(--gray);
  padding: 4px 6px;
  font-size: 0.82rem;
}
.buddypress-wrap .activity-list .activity-item .activity-meta.action a:hover {
  color: var(--primary);
  background: transparent;
  transform: none;
}
/* Bình luận trong hoạt động — thụt vào giống nhánh trả lời bình luận
   Focus Mode (.ld-focus-comments .children) để cùng logic phân cấp. */
.buddypress-wrap .activity-comments {
  margin-left: 44px;
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px dashed var(--border);
}
.buddypress-wrap .activity-comments .acomment-content {
  background: var(--gray-light);
  border-radius: var(--radius);
  padding: 10px 14px;
}

/* ---- Form chuẩn (đăng ký hồ sơ, tạo nhóm, cài đặt tài khoản...) ---- */
.buddypress-wrap .standard-form label { font-weight: 600; color: var(--dark); margin-bottom: 6px; display: block; }
.buddypress-wrap .standard-form input[type="text"],
.buddypress-wrap .standard-form input[type="email"],
.buddypress-wrap .standard-form input[type="password"],
.buddypress-wrap .standard-form input[type="url"],
.buddypress-wrap .standard-form textarea,
.buddypress-wrap .standard-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.buddypress-wrap .standard-form input:focus,
.buddypress-wrap .standard-form textarea:focus,
.buddypress-wrap .standard-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---- Phân trang — dùng lại đúng ngôn ngữ .pagination/.nav-links đã
   chuẩn hoá toàn site (xem mục "pagination" ở style.css) thay vì để
   giao diện phân trang mặc định của BuddyPress lạc tông. ---- */
.buddypress-wrap .bp-pagination { margin: 16px 0; }
.buddypress-wrap .bp-pagination .pag-count { color: var(--gray); font-size: 0.85rem; }
.buddypress-wrap .bp-pagination .bp-pagination-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.buddypress-wrap .bp-pagination .bp-pagination-links span,
.buddypress-wrap .bp-pagination .bp-pagination-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--dark-muted);
}
.buddypress-wrap .bp-pagination .bp-pagination-links a:hover,
.buddypress-wrap .bp-pagination .bp-pagination-links a:focus {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.buddypress-wrap .bp-pagination .bp-pagination-links span.current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  #item-header-avatar { padding: 16px 16px 0; }
  #item-header-content { padding: 10px 16px 18px; }
  #item-actions { padding: 0 16px 16px; }
  .buddypress-wrap .bp-list li .item-avatar img.avatar { width: 44px; height: 44px; }
  .buddypress-wrap .activity-comments { margin-left: 0; padding-left: 12px; }
}