:root {
  /* màu brand chính, chỉnh 1 chỗ là áp toàn site */
  --df-primary: #0071F9;
  --df-primary-soft: rgba(0, 113, 249, 0.06);
  --df-primary-dark: #0056d6;
  --df-header-h: 72px;

  /* Layout system - dễ thay đổi ở đây */
  --df-container-padding-x: 1rem;
  --df-container-padding-y: 1.5rem;
  --df-container-max-width-sm: 42rem;
  --df-container-max-width-md: 56rem;
  --df-container-max-width-lg: 72rem;
  --df-container-max-width-xl: 80rem;

  /* Modern UI Design Tokens */
  /* Gradients */
  --df-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --df-gradient-blue: linear-gradient(135deg, #0071F9 0%, #00c6fb 100%);
  --df-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --df-gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --df-gradient-sidebar: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%);
  --df-gradient-card-bg: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);

  /* Shadows */
  --df-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --df-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --df-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
  --df-shadow-glow: 0 0 20px rgba(0, 113, 249, 0.25);
  --df-shadow-success: 0 4px 15px rgba(16, 185, 129, 0.3);
  --df-shadow-error: 0 4px 15px rgba(239, 68, 68, 0.3);

  /* Transitions */
  --df-transition-fast: all 0.15s ease;
  --df-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --df-transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Border Radius */
  --df-radius-sm: 0.5rem;
  --df-radius-md: 0.75rem;
  --df-radius-lg: 1rem;
  --df-radius-xl: 1.25rem;
  --df-radius-2xl: 1.5rem;
  --df-radius-full: 9999px;

  /* Accent Colors */
  --df-accent-vocab: #f59e0b;
  --df-accent-mcq: #10b981;
  --df-accent-matching: #8b5cf6;
  --df-accent-listening: #ec4899;
  --df-accent-fill: #06b6d4;
  --df-accent-grammar: #6366f1;
}

/* =========================
   Tailwind v4 Reset Overrides
   Fix aggressive resets from Tailwind CSS v4 base layer
   ========================= */

/* Restore default list styles where needed */
ol:not([class]),
ul:not([class]) {
  list-style: revert;
  padding-left: 1.5rem;
}

/* Keep inline behavior for inline images and svgs when needed */
img.inline,
svg.inline,
.inline-img img,
.inline-svg svg {
  display: inline;
  vertical-align: middle;
}

/* Restore heading sizes and weights for content areas */
.df-content h1,
.df-vocab-body h1,
article h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.df-content h2,
.df-vocab-body h2,
article h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.df-content h3,
.df-vocab-body h3,
article h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Restore form element backgrounds */
input:not([type="checkbox"]):not([type="radio"]):not([class*="bg-"]),
select:not([class*="bg-"]),
textarea:not([class*="bg-"]) {
  background-color: #fff;
}

/* Ensure buttons have visible backgrounds when needed */
button:not([class*="bg-"]):not(.df-audio-btn):not(.df-sidebar-toggle-btn) {
  background-color: #fff;
}

/* =========================
   End Tailwind v4 Reset Overrides
   ========================= */

/* =========================
   Course List Cards - Modern Design
   ========================= */
.df-course-card {
  background: #fff;
  border-radius: var(--df-radius-xl);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--df-shadow-card);
  overflow: hidden;
  transition: var(--df-transition-smooth);
}

.df-course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--df-shadow-card-hover);
  border-color: rgba(0, 113, 249, 0.2);
}

.df-course-card-image {
  width: 100%;
  height: 12rem;
  overflow: hidden;
  position: relative;
  background: rgb(241 245 249);
}

.df-course-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.df-course-card:hover .df-course-card-overlay {
  opacity: 1;
}

.df-course-card-placeholder {
  width: 100%;
  height: 12rem;
  background: linear-gradient(135deg, #e0f2fe 0%, #c7d2fe 50%, #e9d5ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.df-course-card-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
}

.df-course-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, #0071F9 0%, #00c6fb 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--df-radius-lg);
  transition: var(--df-transition-smooth);
  box-shadow: 0 4px 15px rgba(0, 113, 249, 0.25);
}

.df-course-card-btn:hover {
  background: linear-gradient(135deg, #0056d6 0%, #0096db 100%);
  box-shadow: 0 6px 20px rgba(0, 113, 249, 0.35);
  transform: translateY(-1px);
}

.df-course-card-btn:active {
  transform: translateY(0);
}

/* Course Cards - Responsive */
@media (max-width: 768px) {
  .df-course-card:hover {
    transform: translateY(-3px);
    /* Smaller lift on mobile */
  }

  .df-course-card-image,
  .df-course-card-placeholder {
    height: 10rem;
  }

  .df-course-card-btn {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {

  .df-course-card-image,
  .df-course-card-placeholder {
    height: 8rem;
  }

  .df-course-card-placeholder svg {
    width: 3rem;
    height: 3rem;
  }
}

html,
body {
  height: 100%;
}

body {
  position: relative;
  overflow: hidden;
}

/* Allow scrolling in admin pages */
body.df-admin {
  overflow: auto !important;
  height: auto !important;
  position: static !important;
}

.df-main-scroll {
  height: calc(100vh - var(--df-header-h));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
}

.df-main-content-wrapper {
  min-height: calc(100vh - var(--df-header-h) - 60px);
  display: flex;
  flex-direction: column;
}

.df-footer {
  padding: 0;
  background: #fff;
  margin-top: auto;
}

/* Footer responsive adjustments */
@media (max-width: 768px) {
  .df-footer {
    padding-bottom: 1rem;
  }
}

/* =========================
   Layout System - Unified Container System
   
   TẤT CẢ MÀN HÌNH ĐỀU FULL WIDTH (100%)
   Dùng container classes để giới hạn nội dung khi cần
   
   Cách dùng trong template:
   {% block main_classes %}df-page-container-lg{% endblock %}
   
   Các loại container:
   - df-page-full: Full width, no padding (cho course layout với sidebar)
   - df-page-container: Full width với padding (cho layout đặc biệt)
   - df-page-container-sm: Full width với padding (cho flashcards, forms nhỏ)
   - df-page-container-md: Full width với padding (cho dashboard, home)
   - df-page-container-lg: Full width với padding (cho list views, tables)
   - df-page-container-xl: Full width với padding (cho footer, wide content)
   
   LƯU Ý: Tất cả container đều full width (100%), chỉ khác nhau ở padding.
   Không có max-width hay margin auto để đảm bảo chiếm toàn bộ không gian.
   
   Thay đổi padding/max-width: chỉnh CSS variables ở :root
   ========================= */

/* Base: Full width, no padding (cho course layout với sidebar) */
.df-page-full {
  width: 100%;
  padding: 0;
}

/* Container: Full width với padding, giới hạn nội dung bên trong */
.df-page-container {
  width: 100%;
  padding: var(--df-container-padding-y) var(--df-container-padding-x);
}

/* Container: Full width với padding, KHÔNG có max-width hay margin auto */
.df-page-container-sm {
  width: 100%;
  padding: var(--df-container-padding-y) var(--df-container-padding-x);
}

.df-page-container-md {
  width: 100%;
  padding: var(--df-container-padding-y) var(--df-container-padding-x);
}

.df-page-container-lg {
  width: 100%;
  padding: var(--df-container-padding-y) var(--df-container-padding-x);
}

.df-page-container-xl {
  width: 100%;
  padding: var(--df-container-padding-y) var(--df-container-padding-x);
}

/* Responsive padding - tự động tăng padding trên màn hình lớn */
@media (min-width: 1024px) {
  :root {
    --df-container-padding-x: 1.5rem;
    /* lg:px-6 */
  }
}

/* When top navbar is fixed, push content down so it doesn't get covered */
.df-has-fixed-header {
  padding-top: var(--df-header-h);
}

/* Responsive header height for mobile */
@media (max-width: 640px) {
  :root {
    --df-header-h: 64px;
    /* Giảm chiều cao header trên mobile */
  }
}

/* =========================
   Header responsive guardrails
   - Prevent desktop menu + hamburger showing at the same time
   - Do not rely on utility ordering (fixes rare Tailwind/override conflicts)
   Breakpoint matches current templates (sm = 640px)
   ========================= */
@media (max-width: 639.98px) {
  .df-site-header nav {
    display: none !important;
  }

  .df-site-header #mobileMenuButton {
    display: flex !important;
  }
}

@media (min-width: 640px) {
  .df-site-header #mobileMenuButton {
    display: none !important;
  }

  .df-site-header #mobileMenu {
    display: none !important;
  }

  .df-site-header nav {
    display: flex !important;
  }
}

/* pill active / default dùng chung cho mọi nơi */
.df-pill-active {
  background-color: var(--df-primary);
  border-color: var(--df-primary);
}

.df-pill-default {
  background-color: #ffffff;
  border-color: rgb(226 232 240);
}

.df-pill-default:hover {
  background-color: var(--df-primary-soft);
  border-color: rgb(203 213 225);
}

/* =========================
   Course / Lesson layout
   - Ensure sidebar + main are horizontal on desktop
   - Use most of the screen width (avoid max-w-6xl)
   ========================= */

/* Loại bỏ padding cho course page để chiếm toàn bộ không gian */
.df-course-page {
  padding: 0 !important;
}

.df-course-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* Không có gap để chiếm toàn bộ không gian */
  width: 100%;
  margin: 0;
  /* Loại bỏ margin */
}

.df-course-sidebar {
  flex: 0 0 16rem;
  /* 256px */
  width: 16rem;
  font-size: 0.8rem;
  padding: 0;
  margin: 0;
  position: relative;
  transition: transform 0.3s ease, width 0.3s ease;
}

.df-course-sidebar.collapsed {
  transform: translateX(-100%);
  width: 0;
  flex: 0 0 0;
}

.df-course-sidebar-inner {
  position: sticky;
  top: 0;
  /* fallback sẽ bị override ở desktop */
  padding: 1rem 0;
  /* Thêm padding dọc để scroll đẹp hơn */
  transition: opacity 0.3s ease;
}

.df-course-sidebar.collapsed .df-course-sidebar-inner {
  opacity: 0;
  pointer-events: none;
}

/* Toggle button - nhô ra menu */
.df-sidebar-toggle-btn {
  position: absolute;
  top: 50%;
  right: -3rem;
  /* Nhô ra ngoài menu */
  transform: translateY(-50%);
  width: 3rem;
  height: 4rem;
  background: linear-gradient(135deg, #0071F9 0%, #0056d6 100%);
  border: none;
  border-radius: 0 0.5rem 0.5rem 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 50;
  color: white;
  font-weight: 600;
}

.df-sidebar-toggle-btn:hover {
  background: linear-gradient(135deg, #0056d6 0%, #0044b3 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) translateX(2px);
}

.df-sidebar-toggle-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.df-sidebar-toggle-icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.3s ease;
  font-weight: 700;
}

.df-course-sidebar.collapsed .df-sidebar-toggle-icon {
  transform: rotate(180deg);
}

.df-sidebar-toggle-text {
  font-size: 0.65rem;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.05em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* =========================
   Todo List Styles
   ========================= */

.df-todo-item {
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.df-todo-checkbox {
  cursor: pointer;
  transition: all 0.2s ease;
}

.df-todo-checkbox:hover {
  border-color: #3b82f6;
}

.df-todo-title {
  transition: all 0.2s ease;
}

.df-todo-title:focus {
  background: #f8fafc;
  border-radius: 0.5rem;
}

.df-todo-delete {
  cursor: pointer;
  opacity: 0.6;
}

.df-todo-item:hover .df-todo-delete {
  opacity: 1;
}

.df-course-main {
  flex: 1 1 auto;
  min-width: 0;
  /* prevent overflow pushing layout */
  width: 100%;
  /* Chiếm toàn bộ không gian còn lại */
  margin: 0;
  /* Loại bỏ tất cả margin */
}

/* Đảm bảo main content không che sidebar khi sidebar fixed */
@media (min-width: 901px) {
  .df-course-main {
    margin: 0 !important;
    /* Loại bỏ tất cả margin */
    padding: 0 !important;
    /* Loại bỏ tất cả padding */
    /* padding-left: 16rem !important; Chỉ giữ padding-left để tránh che sidebar */
    width: 100%;
    /* Chiếm toàn bộ không gian */
    box-sizing: border-box;
    /* Đảm bảo padding được tính trong width */
  }
}

@media (max-width: 900px) {
  .df-course-layout {
    flex-direction: column;
  }

  .df-course-sidebar {
    width: 100%;
    flex-basis: auto;
  }

  .df-course-sidebar-inner {
    position: static;
  }

  /* Adjust toggle button position on mobile/tablet */
  .df-sidebar-toggle-btn {
    position: absolute;
    top: 50%;
    right: -3rem;
    transform: translateY(-50%);
  }

  .df-course-sidebar.collapsed .df-sidebar-toggle-btn {
    right: 0;
  }
}

/* Keep sidebar fixed on desktop (below top header). */
@media (min-width: 901px) {
  .df-course-sidebar {
    position: relative;
  }

  .df-course-sidebar-inner {
    position: fixed;
    top: var(--df-header-h);
    /* sát navbar */
    left: 0;
    /* sát mép trái */
    width: 16rem;
    height: calc(100vh - var(--df-header-h));
    max-height: calc(100vh - var(--df-header-h));
    overflow-y: auto;
    /* Cho phép scroll dọc */
    overflow-x: hidden;
    /* Ẩn scroll ngang */
    z-index: 40;
    /* đảm bảo hiển thị trên các element khác */
  }

  .df-sidebar-toggle-btn {
    position: fixed;
    top: calc(var(--df-header-h) + 50%);
    right: -3rem;
    transform: translateY(-50%);
    z-index: 50;
  }

  .df-course-sidebar.collapsed .df-sidebar-toggle-btn {
    right: 0;
  }
}

/* Sidebar visuals: sát mép, font nhỏ hơn */
.df-course-sidebar-inner {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* Modern Sidebar Header with Gradient */
.df-sidebar-header {
  background: var(--df-gradient-sidebar);
  color: #fff;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.df-sidebar-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.df-sidebar-back-btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--df-radius-md);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: var(--df-transition-fast);
}

.df-sidebar-back-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(-2px);
}

/* =========================
   Modern sidebar items
   ========================= */
.df-side-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid transparent;
  border-radius: var(--df-radius-md);
  color: rgb(15 23 42);
  transition: var(--df-transition-fast);
  font-size: 0.8125rem;
  font-weight: 500;
}

.df-side-item:hover {
  background: rgba(0, 113, 249, 0.08);
  border-left-color: rgba(0, 113, 249, 0.4);
}

.df-side-item-active {
  background: rgba(0, 113, 249, 0.10);
  border-left-color: var(--df-primary);
}

.df-side-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: 9999px;
  border: 2px solid rgb(30 41 59);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(30 41 59);
  font-size: 1rem;
  font-weight: 600;
}

/* Sidebar - Responsive Mobile */
@media (max-width: 900px) {
  .df-sidebar-header {
    padding: 0.875rem;
  }

  .df-side-item {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.5rem;
  }

  .df-side-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    font-size: 0.875rem;
  }

  .df-section-toggle {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}

.df-side-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(100 116 139);
  /* slate-500 */
}

/* Simple media frame (nice even when no image is provided) */
.df-media-frame {
  background-color: rgb(241 245 249);
  /* slate-100 */
  background-image:
    radial-gradient(circle at 12px 12px, rgba(0, 113, 249, 0.12) 2px, transparent 2px),
    radial-gradient(circle at 36px 36px, rgba(2, 132, 199, 0.10) 2px, transparent 2px);
  background-size: 48px 48px;
}

/* Fixed-size vocab illustration (consistent across cards) */
.df-vocab-media {
  flex: 0 0 320px;
  width: 320px;
  max-width: 100%;
  align-self: flex-start;
}

.df-vocab-media-box {
  width: 100%;
  height: 180px;
  /* fixed height for consistency */
  border-radius: 1rem;
  /* ~rounded-2xl */
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  /* slate-200 */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.df-vocab-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .df-vocab-media {
    flex-basis: 100%;
    width: 100%;
  }

  .df-vocab-media-box {
    height: 200px;
  }
}

/* Vocab card: 2-column top section (minimal, not boring) */
/* Wrapper để center và 70% width */
.df-vocab-list-wrapper {
  width: 70%;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.df-vocab-card {
  position: relative;
  border-radius: var(--df-radius-xl);
  background: var(--df-gradient-card-bg);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--df-shadow-card);
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.5rem auto;
  max-height: 700px;
  overflow-y: auto;
  transition: var(--df-transition-smooth);
  backdrop-filter: blur(10px);
}

.df-vocab-card:last-child {
  margin-bottom: 0;
}

.df-vocab-card-inner {
  position: relative;
  border-radius: var(--df-radius-xl);
}

.df-vocab-card:hover {
  box-shadow: var(--df-shadow-card-hover);
  border-color: rgba(0, 113, 249, 0.3);
  transform: translateY(-2px);
}

.df-vocab-top {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}

/* Responsive: màn hình nhỏ thì ảnh xuống dưới */
@media (max-width: 1024px) {
  .df-vocab-top {
    grid-template-columns: 1fr;
  }

  .df-vocab-list-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .df-vocab-card {
    max-height: none;
  }
}

/* Vocabulary Cards - Tablet */
@media (max-width: 768px) {
  .df-vocab-card {
    border-radius: var(--df-radius-lg);
  }

  .df-vocab-card-inner {
    padding: 1rem;
  }

  .df-vocab-card:hover {
    transform: none;
    /* Disable hover lift on touch devices */
  }

  .df-vocab-word {
    font-size: 1.25rem;
  }

  .df-vocab-phonetic {
    font-size: 0.8rem;
    padding: 0.1rem 0.375rem;
  }

  .df-audio-btn {
    padding: 0.35rem 0.5rem;
  }

  .df-audio-label {
    display: none;
    /* Hide US/UK labels on mobile */
  }
}

/* Vocabulary Cards - Mobile */
@media (max-width: 480px) {
  .df-vocab-list-wrapper {
    padding: 0 0.5rem;
  }

  .df-vocab-card {
    margin-bottom: 1rem;
  }

  .df-vocab-card-inner {
    padding: 0.875rem;
  }

  .df-vocab-word {
    font-size: 1.125rem;
  }

  .df-vocab-body {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .df-vocab-media {
    flex-basis: 100%;
    width: 100%;
  }

  .df-vocab-media-box {
    height: 150px;
    border-radius: var(--df-radius-md);
  }
}

/* Typography - Modern word styling */
.df-vocab-word {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #1e3a5f 0%, #0071F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.df-vocab-phonetic {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(100 116 139);
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  background: rgba(100, 116, 139, 0.1);
  border-radius: var(--df-radius-full);
}

.df-vocab-body {
  font-size: 16px;
  /* 16px cho từ bình thường */
  line-height: 1.7;
}

/* Audio Player Controls */
.df-vocab-audio-controls {
  flex-shrink: 0;
}

.df-audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* 0.375rem * 0.8 = 0.3rem */
  padding: 0.4rem 0.6rem;
  /* 0.5rem * 0.8, 0.75rem * 0.8 */
  border: 1.5px solid rgb(203 213 225);
  /* slate-300 */
  border-radius: 0.5rem;
  /* 0.625rem * 0.8 */
  background: #fff;
  color: rgb(71 85 105);
  /* slate-600 */
  font-size: 0.6rem;
  /* 0.75rem * 0.8 */
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.df-audio-btn:hover {
  background: rgb(241 245 249);
  /* slate-100 */
  border-color: rgb(148 163 184);
  /* slate-400 */
  color: rgb(30 41 59);
  /* slate-800 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.df-audio-btn-sm:hover {
  color: rgb(30 41 59) !important;
  /* slate-800 - đảm bảo màu khi hover */
  background: rgb(241 245 249) !important;
  /* slate-100 */
  border-color: rgb(148 163 184) !important;
  /* slate-400 */
}

.df-audio-btn-sm:hover .df-audio-icon-sm {
  color: rgb(30 41 59) !important;
  /* slate-800 */
  stroke: rgb(30 41 59) !important;
  /* slate-800 */
}

.df-audio-btn-sm.df-audio-btn-playing {
  background: rgb(37 99 235) !important;
  /* blue-600 */
  border-color: rgb(37 99 235) !important;
  color: #fff !important;
}

.df-audio-btn-sm.df-audio-btn-playing .df-audio-icon-sm {
  color: #fff !important;
  stroke: #fff !important;
}

/* Marked word styling in examples */
.df-marked-word {
  font-weight: 700;
  color: rgb(30 41 59);
  /* slate-800 - đậm hơn text thường */
  background: linear-gradient(180deg, transparent 60%, rgba(37, 99, 235, 0.15) 60%);
  padding: 0 0.125rem;
  border-radius: 0.125rem;
}

.df-audio-btn:active {
  background: rgb(226 232 240);
  /* slate-200 */
  transform: translateY(0) scale(0.98);
}

.df-audio-btn.df-audio-btn-playing {
  background: rgb(37 99 235);
  /* blue-600 */
  border-color: rgb(37 99 235);
  color: #fff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.df-audio-btn.df-audio-btn-playing:hover {
  background: rgb(29 78 216);
  /* blue-700 */
  border-color: rgb(29 78 216);
}

.df-audio-icon {
  width: 0.9rem;
  /* 1.125rem * 0.8 */
  height: 0.9rem;
  /* 1.125rem * 0.8 */
  flex-shrink: 0;
  stroke-width: 2.5;
  display: block;
  color: inherit;
  /* Inherit color from button */
}

.df-audio-label {
  font-size: 0.55rem;
  /* 0.6875rem * 0.8 = 0.55rem (8.8px) */
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Simple audio icon for examples (no button, just icon) */
.df-example-audio-icon {
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
  margin-top: 0.125rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgb(100 116 139) !important;
  /* slate-500 - màu nhẹ nhàng */
  transition: color 150ms ease !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.df-example-audio-icon:hover {
  color: rgb(37 99 235) !important;
  /* blue-600 - màu xanh khi hover */
}

.df-example-audio-icon.df-audio-btn-playing {
  color: rgb(37 99 235) !important;
  /* blue-600 - màu xanh khi đang phát */
}

.df-example-audio-icon-svg {
  width: 1.25rem !important;
  /* 20px */
  height: 1.25rem !important;
  stroke-width: 2.5 !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  /* Không block click events */
}

/* Legacy styles for backward compatibility */
.df-example-audio-controls {
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.df-audio-btn-sm {
  padding: 0.5rem !important;
  gap: 0 !important;
  min-width: 2.5rem !important;
  /* Tăng lên 40px */
  min-height: 2.5rem !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgb(71 85 105) !important;
  /* slate-600 - đảm bảo có màu */
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  border: 1.5px solid rgb(203 213 225) !important;
  /* slate-300 */
  border-radius: 0.625rem !important;
}

.df-audio-icon-sm {
  width: 1.5rem !important;
  /* 24px - tăng từ 18px để dễ nhìn hơn */
  height: 1.5rem !important;
  stroke-width: 2.5 !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: rgb(71 85 105) !important;
  /* slate-600 - màu rõ ràng */
  stroke: rgb(71 85 105) !important;
  /* slate-600 - đảm bảo stroke có màu */
  fill: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  /* Không block click events */
}

.df-audio-btn-sm .df-audio-label {
  display: none;
  /* Hide label for small buttons */
}

.df-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: rgb(51 65 85);
  user-select: none;
}

.df-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.df-switch-ui {
  width: 46px;
  height: 26px;
  border-radius: 9999px;
  background: rgb(226 232 240);
  /* slate-200 */
  position: relative;
  transition: background-color 120ms ease;
  flex: 0 0 46px;
  border: 1px solid rgb(203 213 225);
  /* slate-300 - viền rõ hơn */
}

.df-switch-ui::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25);
  /* Shadow rõ hơn */
  transition: transform 120ms ease;
  border: 1px solid rgb(203 213 225);
  /* Viền cho nút tròn */
}

.df-switch input:checked+.df-switch-ui {
  background: rgb(37 99 235);
  /* blue-600 - màu xanh đậm rõ hơn */
  border-color: rgb(37 99 235);
}

.df-switch input:checked+.df-switch-ui::after {
  transform: translateX(20px);
  border-color: transparent;
  /* Bỏ viền khi active */
}


/* =========================
   Matching (4x4) game
   ========================= */
.df-match-wrap {
  max-width: 100%;
  /* Chiếm toàn bộ không gian */
  margin: 0 !important;
  /* Loại bỏ margin */
  width: 100%;
}

.df-match-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.df-match-tile {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
  user-select: none;
}

.df-match-tile:hover {
  border-color: rgba(0, 113, 249, 0.25);
  background: rgba(0, 113, 249, 0.04);
}

.df-match-tile:disabled {
  cursor: default;
  opacity: 0.55;
  box-shadow: none;
}

.df-match-tile[data-kind="word"] {
  color: #d97706;
  /* amber-600 */
  font-weight: 800;
  font-size: 0.92rem;
  /* ~ -20% */
}

.df-match-tile[data-kind="meaning"] {
  color: rgb(30 64 175);
  /* blue-800 */
  font-weight: 700;
  font-size: 0.76rem;
  /* ~ -20% */
  line-height: 1.35;
}

.df-match-tile--selected {
  border-color: rgba(0, 113, 249, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 113, 249, 0.18);
  background: rgba(0, 113, 249, 0.05);
}

.df-match-tile--matched {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
}

@media (max-width: 640px) {
  .df-match-board {
    gap: 10px;
  }

  .df-match-tile {
    padding: 10px;
    border-radius: 14px;
  }
}

/* =========================
   Course Lesson Breadcrumb - Sticky Navigation
   ========================= */
.df-lesson-breadcrumb {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  transition: box-shadow 0.2s ease;
}

.df-lesson-breadcrumb::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Add shadow when scrolled (optional enhancement) */
.df-lesson-breadcrumb.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.df-lesson-breadcrumb.scrolled::after {
  opacity: 1;
}

/* =========================
   Course Sidebar - Section Dropdown & Views
   ========================= */
.df-section-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.df-section-item:hover {
  border-color: rgb(203 213 225);
  /* slate-300 */
}

.df-section-toggle {
  user-select: none;
  outline: none;
}

.df-section-toggle:focus {
  outline: 2px solid rgba(0, 113, 249, 0.2);
  outline-offset: -2px;
  border-radius: 0.5rem;
}

.df-section-arrow {
  transition: transform 0.2s ease;
}

.df-section-arrow.rotate-180 {
  transform: rotate(180deg);
}

.df-section-lessons {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.df-section-lessons:not(.hidden) {
  max-height: 1000px;
  /* Adjust based on your needs */
}

.df-section-toggle span.truncate {
  transition: color 0.2s ease;
}

.df-section-toggle:hover span.truncate {
  color: var(--df-primary);
}

/* =========================
   Feedback Module - Góc Cải Tiến
   ========================= */

/* Page Layout */
.df-feedback-page,
.df-feedback-detail-page,
.df-feedback-form-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Header Section */
.df-feedback-header {
  margin-bottom: 2rem;
}

.df-feedback-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.df-feedback-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 2rem;
  font-weight: 700;
  color: rgb(15 23 42);
  margin: 0;
}

.df-feedback-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--df-primary);
}

.df-feedback-subtitle {
  color: rgb(100 116 139);
  font-size: 1rem;
  margin: 0.5rem 0 0;
}

.df-feedback-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, var(--df-primary) 0%, #00c6fb 100%);
  color: #fff;
  font-weight: 600;
  border-radius: var(--df-radius-lg);
  transition: var(--df-transition-smooth);
  box-shadow: 0 4px 15px rgba(0, 113, 249, 0.25);
  text-decoration: none;
}

.df-feedback-create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 113, 249, 0.35);
}

/* Filter Section */
.df-feedback-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.df-feedback-tabs {
  display: flex;
  gap: 0.5rem;
  background: #fff;
  padding: 0.25rem;
  border-radius: var(--df-radius-lg);
  box-shadow: var(--df-shadow-sm);
}

.df-feedback-tab {
  padding: 0.625rem 1.25rem;
  border-radius: var(--df-radius-md);
  font-weight: 500;
  color: rgb(71 85 105);
  text-decoration: none;
  transition: var(--df-transition-fast);
}

.df-feedback-tab:hover {
  background: rgb(241 245 249);
  color: rgb(15 23 42);
}

.df-feedback-tab.active {
  background: var(--df-primary);
  color: #fff;
}

.df-feedback-filter-group {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.df-feedback-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.df-feedback-filter label {
  font-size: 0.875rem;
  color: rgb(100 116 139);
}

.df-feedback-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid rgb(226 232 240);
  border-radius: var(--df-radius-md);
  font-size: 0.875rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  cursor: pointer;
  transition: var(--df-transition-fast);
}

.df-feedback-select:hover {
  border-color: var(--df-primary);
}

/* Feedback Card */
.df-feedback-card {
  display: flex;
  gap: 1rem;
  background: #fff;
  border-radius: var(--df-radius-xl);
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: var(--df-shadow-sm);
  transition: var(--df-transition-smooth);
  text-decoration: none;
  color: inherit;
}

.df-feedback-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--df-shadow-card-hover);
  border-color: rgba(0, 113, 249, 0.3);
}

/* Vote Box */
.df-vote-box {
  flex: 0 0 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: rgb(248 250 252);
  border: 2px solid rgb(226 232 240);
  border-radius: var(--df-radius-lg);
  cursor: pointer;
  transition: var(--df-transition-smooth);
  gap: 0.25rem;
}

.df-vote-box:hover {
  border-color: var(--df-primary);
  background: var(--df-primary-soft);
}

.df-vote-box.voted {
  border-color: var(--df-primary);
  background: var(--df-primary);
  color: #fff;
}

.df-vote-box.voted .df-vote-arrow {
  stroke: #fff;
}

.df-vote-count {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.df-vote-arrow {
  width: 1.5rem;
  height: 1.5rem;
  stroke: rgb(100 116 139);
  transition: var(--df-transition-fast);
}

.df-vote-box:hover .df-vote-arrow {
  stroke: var(--df-primary);
  transform: translateY(-2px);
}

.df-vote-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(148 163 184);
}

.df-vote-box.voted .df-vote-label {
  color: rgba(255, 255, 255, 0.8);
}

/* Large Vote Box (Detail Page) */
.df-vote-box-large {
  flex: 0 0 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(248 250 252);
  border: 2px solid rgb(226 232 240);
  border-radius: var(--df-radius-xl);
  cursor: pointer;
  transition: var(--df-transition-smooth);
  gap: 0.375rem;
}

.df-vote-box-large:hover {
  border-color: var(--df-primary);
  background: var(--df-primary-soft);
}

.df-vote-box-large.voted {
  border-color: var(--df-primary);
  background: var(--df-primary);
  color: #fff;
}

.df-vote-box-large.voted .df-vote-arrow {
  stroke: #fff;
}

.df-vote-box-large .df-vote-count {
  font-size: 2rem;
}

.df-vote-box-large .df-vote-arrow {
  width: 2rem;
  height: 2rem;
}

/* Card Content */
.df-feedback-card-content {
  flex: 1;
  min-width: 0;
}

.df-feedback-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.df-feedback-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(15 23 42);
  margin: 0;
  line-height: 1.4;
}

.df-feedback-card-desc {
  color: rgb(71 85 105);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.df-feedback-card-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: rgb(148 163 184);
  flex-wrap: wrap;
}

.df-feedback-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Badges */
.df-feedback-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.df-type-badge,
.df-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--df-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Type Badges */
.df-type-badge.df-type-feature {
  background: rgba(99, 102, 241, 0.1);
  color: rgb(99 102 241);
}

.df-type-badge.df-type-bug {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239 68 68);
}

/* Status Badges */
.df-status-badge.df-status-new {
  background: rgba(100, 116, 139, 0.1);
  color: rgb(100 116 139);
}

.df-status-badge.df-status-planned {
  background: rgba(59, 130, 246, 0.1);
  color: rgb(59 130 246);
}

.df-status-badge.df-status-in_progress {
  background: rgba(245, 158, 11, 0.15);
  color: rgb(217 119 6);
}

.df-status-badge.df-status-done {
  background: rgba(16, 185, 129, 0.1);
  color: rgb(16 185 129);
}

/* Empty State */
.df-feedback-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: #fff;
  border-radius: var(--df-radius-xl);
  border: 2px dashed rgb(226 232 240);
}

.df-feedback-empty svg {
  color: rgb(203 213 225);
  margin-bottom: 1rem;
}

.df-feedback-empty h3 {
  font-size: 1.25rem;
  color: rgb(71 85 105);
  margin: 0 0 0.5rem;
}

.df-feedback-empty p {
  color: rgb(148 163 184);
  margin: 0 0 1.5rem;
}

/* Pagination */
.df-feedback-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.df-pagination-btn {
  padding: 0.625rem 1rem;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: var(--df-radius-md);
  font-weight: 500;
  color: rgb(71 85 105);
  text-decoration: none;
  transition: var(--df-transition-fast);
}

.df-pagination-btn:hover {
  border-color: var(--df-primary);
  color: var(--df-primary);
}

.df-pagination-info {
  color: rgb(100 116 139);
  font-size: 0.875rem;
}

/* Detail Page */
.df-feedback-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(100 116 139);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 1.5rem;
  transition: var(--df-transition-fast);
}

.df-feedback-back-link:hover {
  color: var(--df-primary);
}

.df-feedback-detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
}

@media (max-width: 900px) {
  .df-feedback-detail-layout {
    grid-template-columns: 1fr;
  }
}

.df-feedback-detail-card {
  background: #fff;
  border-radius: var(--df-radius-xl);
  padding: 1.5rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: var(--df-shadow-card);
}

.df-feedback-detail-header {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(241 245 249);
}

.df-feedback-detail-title-section {
  flex: 1;
}

.df-feedback-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(15 23 42);
  margin: 0.75rem 0 0.5rem;
  line-height: 1.4;
}

.df-feedback-detail-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: rgb(100 116 139);
  flex-wrap: wrap;
}

.df-feedback-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.df-feedback-detail-body h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(100 116 139);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

.df-feedback-description {
  font-size: 1rem;
  line-height: 1.75;
  color: rgb(51 65 85);
}

.df-feedback-description p {
  margin: 0 0 1rem;
}

/* Sidebar */
.df-feedback-sidebar-card {
  background: #fff;
  border-radius: var(--df-radius-xl);
  padding: 1.25rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: var(--df-shadow-sm);
}

.df-feedback-sidebar-card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(100 116 139);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

.df-feedback-info-list {
  margin: 0;
}

.df-feedback-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgb(241 245 249);
}

.df-feedback-info-item:last-child {
  border-bottom: none;
}

.df-feedback-info-item dt {
  font-size: 0.875rem;
  color: rgb(100 116 139);
}

.df-feedback-info-item dd {
  font-size: 0.875rem;
  color: rgb(15 23 42);
  margin: 0;
}

/* Comments Section */
.df-feedback-comments-section {
  margin-top: 2rem;
}

.df-feedback-comments-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(15 23 42);
  margin: 0 0 1.5rem;
}

.df-feedback-comments-title svg {
  color: var(--df-primary);
}

/* Comment Form */
.df-comment-form {
  background: #fff;
  border-radius: var(--df-radius-xl);
  padding: 1.25rem;
  border: 1px solid rgb(226 232 240);
  margin-bottom: 1.5rem;
}

.df-comment-form textarea {
  width: 100%;
  border: 1px solid rgb(226 232 240);
  border-radius: var(--df-radius-md);
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  resize: vertical;
  transition: var(--df-transition-fast);
  margin-bottom: 1rem;
}

.df-comment-form textarea:focus {
  outline: none;
  border-color: var(--df-primary);
  box-shadow: 0 0 0 3px rgba(0, 113, 249, 0.1);
}

.df-comment-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--df-primary);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: var(--df-radius-md);
  cursor: pointer;
  transition: var(--df-transition-fast);
}

.df-comment-submit-btn:hover {
  background: var(--df-primary-dark);
}

.df-comment-login-prompt {
  background: rgb(248 250 252);
  border-radius: var(--df-radius-lg);
  padding: 1.25rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.df-comment-login-prompt p {
  margin: 0;
  color: rgb(100 116 139);
}

.df-comment-login-prompt a {
  color: var(--df-primary);
  font-weight: 600;
  text-decoration: none;
}

.df-comment-login-prompt a:hover {
  text-decoration: underline;
}

/* Comments List */
.df-comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.df-comment {
  background: #fff;
  border-radius: var(--df-radius-xl);
  padding: 1.25rem;
  border: 1px solid rgb(226 232 240);
}

/* Admin Comment Highlight */
.df-comment.df-admin-comment {
  border-color: rgb(245 158 11);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.df-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.df-comment-author {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.df-comment-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, rgb(99 102 241) 0%, rgb(139 92 246) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.df-admin-comment .df-comment-avatar {
  background: linear-gradient(135deg, rgb(245 158 11) 0%, rgb(251 191 36) 100%);
}

.df-comment-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.df-comment-author-name {
  font-weight: 600;
  color: rgb(15 23 42);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.df-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: linear-gradient(135deg, rgb(245 158 11) 0%, rgb(251 191 36) 100%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--df-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.df-admin-badge svg {
  width: 0.75rem;
  height: 0.75rem;
}

.df-comment-date {
  font-size: 0.8125rem;
  color: rgb(148 163 184);
}

.df-comment-content {
  color: rgb(51 65 85);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.df-comment-content p {
  margin: 0 0 0.5rem;
}

.df-comment-content p:last-child {
  margin-bottom: 0;
}

.df-comments-empty {
  text-align: center;
  padding: 3rem 2rem;
  background: rgb(248 250 252);
  border-radius: var(--df-radius-xl);
}

.df-comments-empty svg {
  color: rgb(203 213 225);
  margin-bottom: 0.75rem;
}

.df-comments-empty p {
  color: rgb(148 163 184);
  margin: 0;
}

/* Form Page */
.df-feedback-form-card {
  background: #fff;
  border-radius: var(--df-radius-xl);
  padding: 2rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: var(--df-shadow-card);
  max-width: 700px;
  margin: 0 auto;
}

.df-feedback-form-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgb(241 245 249);
}

.df-feedback-form-header h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(15 23 42);
  margin: 0 0 0.5rem;
}

.df-feedback-form-header h1 svg {
  color: var(--df-primary);
}

.df-feedback-form-header p {
  color: rgb(100 116 139);
  margin: 0;
}

.df-feedback-form-errors {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--df-radius-lg);
  margin-bottom: 1.5rem;
  color: rgb(185 28 28);
}

.df-feedback-form-errors svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.df-feedback-form-errors ul {
  margin: 0;
  padding-left: 1rem;
}

.df-feedback-form-errors li {
  margin-bottom: 0.25rem;
}

.df-form-group {
  margin-bottom: 1.5rem;
}

.df-form-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(15 23 42);
  margin-bottom: 0.5rem;
}

.df-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.df-type-option {
  cursor: pointer;
}

.df-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.df-type-option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem;
  background: rgb(248 250 252);
  border: 2px solid rgb(226 232 240);
  border-radius: var(--df-radius-xl);
  transition: var(--df-transition-smooth);
  text-align: center;
}

.df-type-option input:checked+.df-type-option-content {
  border-color: var(--df-primary);
  background: var(--df-primary-soft);
}

.df-type-option-content.df-type-feature svg {
  color: rgb(99 102 241);
}

.df-type-option-content.df-type-bug svg {
  color: rgb(239 68 68);
}

.df-type-option-title {
  font-weight: 600;
  color: rgb(15 23 42);
}

.df-type-option-desc {
  font-size: 0.8125rem;
  color: rgb(100 116 139);
}

.df-form-input,
.df-form-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgb(226 232 240);
  border-radius: var(--df-radius-md);
  font-size: 0.9375rem;
  transition: var(--df-transition-fast);
}

.df-form-input:focus,
.df-form-textarea:focus {
  outline: none;
  border-color: var(--df-primary);
  box-shadow: 0 0 0 3px rgba(0, 113, 249, 0.1);
}

.df-form-textarea {
  resize: vertical;
  min-height: 150px;
}

.df-form-hint {
  display: block;
  font-size: 0.8125rem;
  color: rgb(148 163 184);
  margin-top: 0.375rem;
}

.df-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(241 245 249);
}

.df-form-cancel-btn {
  padding: 0.75rem 1.5rem;
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: var(--df-radius-md);
  font-weight: 500;
  color: rgb(71 85 105);
  text-decoration: none;
  transition: var(--df-transition-fast);
}

.df-form-cancel-btn:hover {
  background: rgb(241 245 249);
  color: rgb(15 23 42);
}

.df-form-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--df-primary) 0%, #00c6fb 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: var(--df-radius-md);
  cursor: pointer;
  transition: var(--df-transition-smooth);
  box-shadow: 0 4px 15px rgba(0, 113, 249, 0.25);
}

.df-form-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 113, 249, 0.35);
}

/* Responsive */
@media (max-width: 640px) {

  .df-feedback-page,
  .df-feedback-detail-page,
  .df-feedback-form-page {
    padding: 1rem;
  }

  .df-feedback-header-content {
    flex-direction: column;
    align-items: stretch;
  }

  .df-feedback-create-btn {
    justify-content: center;
  }

  .df-feedback-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .df-feedback-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .df-feedback-filter-group {
    flex-wrap: wrap;
  }

  .df-feedback-card {
    flex-direction: column;
  }

  .df-vote-box {
    flex: none;
    flex-direction: row;
    width: 100%;
    padding: 0.625rem;
    gap: 0.75rem;
  }

  .df-feedback-detail-header {
    flex-direction: column;
  }

  .df-vote-box-large {
    flex: none;
    flex-direction: row;
    width: 100%;
    padding: 0.75rem;
    gap: 1rem;
  }

  .df-type-selector {
    grid-template-columns: 1fr;
  }

  .df-form-actions {
    flex-direction: column;
  }

  .df-form-cancel-btn,
  .df-form-submit-btn {
    justify-content: center;
    width: 100%;
  }
}