/**
 * AptisGO - Unified Exam Tips & Strategies Styles (exam_tips.css)
 * Hợp nhất định dạng Giao diện tối (Dark Theme), Highlight API và Components của 8 trang Mẹo học
 * Tuân thủ Clean Architecture & Zero-Regression
 */

/* ==========================================================================
   1. CSS Custom Highlight API (Dành cho chức năng bôi màu văn bản)
   ========================================================================== */
::highlight(highlight-yellow) { background-color: rgba(253, 224, 71, 0.45); }
::highlight(highlight-green)  { background-color: rgba(134, 239, 172, 0.45); }
::highlight(highlight-blue)   { background-color: rgba(147, 197, 253, 0.45); }
::highlight(highlight-pink)   { background-color: rgba(249, 168, 212, 0.45); }
::highlight(highlight-orange) { background-color: rgba(253, 186, 116, 0.45); }

/* ==========================================================================
   2. DYNAMIC DARK THEME (Đồng bộ theo chế độ Tối html.dark / data-theme="dark")
   ========================================================================== */
html.dark body, [data-theme="dark"] body, .dark body,
html.dark, [data-theme="dark"], .dark,
html.dark .bg-body-tertiary, [data-theme="dark"] .bg-body-tertiary,
html.dark .content-wrapper, [data-theme="dark"] .content-wrapper,
html.dark .main-footer, [data-theme="dark"] .main-footer {
  background-color: #050506 !important;
  color: #ededef !important;
}

/* Thẻ Card, Hộp ghi chú & Mẹo */
html.dark .card, [data-theme="dark"] .card,
html.dark .practice-card, [data-theme="dark"] .practice-card,
html.dark .card-meo, [data-theme="dark"] .card-meo,
html.dark .vocab-card, [data-theme="dark"] .vocab-card,
html.dark .note, [data-theme="dark"] .note,
html.dark .toc, [data-theme="dark"] .toc,
html.dark .action-card, [data-theme="dark"] .action-card,
html.dark .info-box, [data-theme="dark"] .info-box,
html.dark .question-box, [data-theme="dark"] .question-box,
html.dark .meo-card, [data-theme="dark"] .meo-card {
  background-color: #0c0d14 !important;
  background: #0c0d14 !important;
  border: 1px solid #1f293d !important;
  color: #ededef !important;
}

html.dark .template-card .card-body, [data-theme="dark"] .template-card .card-body {
  background-color: #101117 !important;
  color: #ededef !important;
}

/* Bảng biểu tối */
html.dark .table, [data-theme="dark"] .table,
html.dark .intro-table, [data-theme="dark"] .intro-table {
  color: #ededef !important;
  border-color: #1f293d !important;
}
html.dark .table th, [data-theme="dark"] .table th,
html.dark .intro-table th, [data-theme="dark"] .intro-table th,
html.dark .table thead th, [data-theme="dark"] .table thead th,
html.dark .intro-table thead th, [data-theme="dark"] .intro-table thead th {
  background-color: #10121d !important;
  background: #10121d !important;
  color: #63a7ff !important;
  border-color: #1f293d !important;
}
html.dark .table td, [data-theme="dark"] .table td,
html.dark .intro-table td, [data-theme="dark"] .intro-table td {
  background-color: #0c0d14 !important;
  background: #0c0d14 !important;
  color: #ededef !important;
  border-color: #1f293d !important;
}
html.dark .table-hover tbody tr:hover td, [data-theme="dark"] .table-hover tbody tr:hover td {
  background-color: #141724 !important;
}

/* Tiêu đề & Văn bản tối */
html.dark h1, [data-theme="dark"] h1,
html.dark h2, [data-theme="dark"] h2,
html.dark h3, [data-theme="dark"] h3,
html.dark h4, [data-theme="dark"] h4,
html.dark h5, [data-theme="dark"] h5,
html.dark h6, [data-theme="dark"] h6,
html.dark .text-dark, [data-theme="dark"] .text-dark,
html.dark strong, [data-theme="dark"] strong,
html.dark b, [data-theme="dark"] b,
html.dark .section-title, [data-theme="dark"] .section-title,
html.dark .meo-section-title, [data-theme="dark"] .meo-section-title {
  color: #ededef !important;
}
html.dark p, [data-theme="dark"] p,
html.dark li, [data-theme="dark"] li,
html.dark span:not(.badge):not(.hl):not(.rule-badge), [data-theme="dark"] span:not(.badge):not(.hl):not(.rule-badge),
html.dark div:not(.alert):not(.badge):not(.prep-badge):not(.modal-content):not(.modal-header):not(.card-body):not(.skill-icon),
[data-theme="dark"] div:not(.alert):not(.badge):not(.prep-badge):not(.modal-content):not(.modal-header):not(.card-body):not(.skill-icon) {
  color: #d1d5db !important;
}
html.dark .text-muted, [data-theme="dark"] .text-muted {
  color: #8a92a3 !important;
}

/* Mẹo học Grammar: các danh sách gạch dòng và CTA */
html.dark .meo-tip-list li, [data-theme="dark"] .meo-tip-list li {
  border-bottom-color: #1f293d !important;
}
html.dark .meo-cta, [data-theme="dark"] .meo-cta {
  background-color: #10121d !important;
  border: 1px solid #1f293d !important;
}
html.dark .meo-cta p, [data-theme="dark"] .meo-cta p {
  color: #ffffff !important;
}

/* Modal tối */
html.dark .modal-content, [data-theme="dark"] .modal-content {
  background-color: #0c0d14 !important;
  color: #ededef !important;
  border: 1px solid #1f293d !important;
}
html.dark .modal-header, [data-theme="dark"] .modal-header {
  background-color: #10121d !important;
  border-bottom: 1px solid #1f293d !important;
  color: #ededef !important;
}
html.dark .modal-header .modal-title, [data-theme="dark"] .modal-header .modal-title {
  color: #63a7ff !important;
}
html.dark .btn-close, [data-theme="dark"] .btn-close {
  filter: invert(1) !important;
}

/* Nút thoát Modal tùy chỉnh (.btn-close-custom) */
.btn-close-custom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}
.btn-close-custom:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  opacity: 1 !important;
  transform: scale(1.08) !important;
}
html.dark .btn-close-custom, [data-theme="dark"] .btn-close-custom, .dark .btn-close-custom {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.9 !important;
}
html.dark .btn-close-custom:hover, [data-theme="dark"] .btn-close-custom:hover, .dark .btn-close-custom:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
}


/* Liên kết tối */
html.dark a:not([class*="btn"]):not(.nav-link):not(.text-dark):not(.text-white),
[data-theme="dark"] a:not([class*="btn"]):not(.nav-link):not(.text-dark):not(.text-white) {
  color: #63a7ff !important;
}
html.dark a:not([class*="btn"]):not(.nav-link):not(.text-dark):not(.text-white):hover,
[data-theme="dark"] a:not([class*="btn"]):not(.nav-link):not(.text-dark):not(.text-white):hover {
  color: #a7cbff !important;
}

html.dark .navbar.meo-navbar, [data-theme="dark"] .navbar.meo-navbar,
html.dark .legacy-content .header, [data-theme="dark"] .legacy-content .header,
html.dark .main-header, [data-theme="dark"] .main-header {
  background: #07080d !important;
  border-bottom: 1px solid #1f293d !important;
}
html.dark .navbar-white, [data-theme="dark"] .navbar-white,
html.dark .bg-light, [data-theme="dark"] .bg-light {
  background-color: #07080d !important;
}

/* Input tối */
html.dark .form-control, [data-theme="dark"] .form-control,
html.dark #filterInput, [data-theme="dark"] #filterInput {
  background-color: #101117 !important;
  border-color: #1f293d !important;
  color: #ededef !important;
}

/* TOC sidebar tối */
html.dark .toc .list-group-item, [data-theme="dark"] .toc .list-group-item {
  background-color: transparent !important;
  color: #a8adb7 !important;
}
html.dark .toc .list-group-item:hover, [data-theme="dark"] .toc .list-group-item:hover,
html.dark .toc .list-group-item.active, [data-theme="dark"] .toc .list-group-item.active {
  background-color: #141724 !important;
  color: #63a7ff !important;
}

/* Fix cho .rule-badge và các badge trong chế độ tối */
html.dark .rule-badge, [data-theme="dark"] .rule-badge, .dark .rule-badge {
  background-color: rgba(234, 88, 12, 0.25) !important;
  color: #ffaa66 !important;
  border: 1px solid rgba(249, 115, 22, 0.4) !important;
}

html.dark .alert-info, [data-theme="dark"] .alert-info, .dark .alert-info {
  background-color: rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  color: #7dd3fc !important;
}