/* ==========================================================================
   ALPHA EDUCATION — FRONTEND DARK MODE
   Scoped under: html.ae-dark-mode
   Excludes: .main-test-exam, .testQuestionExam (those have their own contrast)
   ========================================================================== */

/* ─── CSS Variables ───────────────────────────────────────────────────────── */
html.ae-dark-mode {
    --dm-bg-primary: #000000;
    --dm-bg-secondary: #0a0a0a;
    --dm-bg-card: #000000;
    --dm-bg-elevated: #0a0a0a;
    --dm-bg-input: #000000;
    --dm-bg-hover: #252525;
    --dm-text-primary: #f0f0f0;
    --dm-text-secondary: #b0b0b0;
    --dm-text-muted: #808080;
    --dm-border: #2a2a2a;
    --dm-border-light: #3a3a3a;
    --dm-accent: #e94560;
    --dm-accent-hover: #ff5a75;
    --dm-link: #53a8ff;
    --dm-link-hover: #7dc0ff;
    --dm-success: #4caf50;
    --dm-warning: #ffb74d;
    --dm-danger: #ef5350;
    --dm-shadow: rgba(0, 0, 0, 0.6);
}

/* ─── Global / Body ───────────────────────────────────────────────────────── */
html.ae-dark-mode body {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode {
    background-color: var(--dm-bg-primary) !important;
    color-scheme: dark;
}

/* ─── Exclude Test Pages ──────────────────────────────────────────────────── */
/* .main-test-exam and .testQuestionExam use their own contrast system —
   NO dark-mode overrides are applied to them.  The absence of rules here
   is intentional; do NOT add html.ae-dark-mode .main-test-exam selectors. */

/* ─── Typography ──────────────────────────────────────────────────────────── */
html.ae-dark-mode h1,
html.ae-dark-mode h2,
html.ae-dark-mode h3,
html.ae-dark-mode h4,
html.ae-dark-mode h5,
html.ae-dark-mode h6 {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode p,
html.ae-dark-mode span,
html.ae-dark-mode label,
html.ae-dark-mode li,
html.ae-dark-mode td,
html.ae-dark-mode th,
html.ae-dark-mode dt,
html.ae-dark-mode dd {
    color: var(--dm-text-primary);
}

html.ae-dark-mode a {
    color: var(--dm-link);
}

html.ae-dark-mode a:hover {
    color: var(--dm-link-hover);
}

html.ae-dark-mode .mona-content {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .mona-content a {
    color: var(--dm-link) !important;
}

/* ─── Links – Subtypes ────────────────────────────────────────────────────── */
html.ae-dark-mode .t-link,
html.ae-dark-mode .t-text,
html.ae-dark-mode .t-text a,
html.ae-dark-mode .course-nav .item a,
html.ae-dark-mode .exm-txt,
html.ae-dark-mode .exq-it .text {
    color: var(--dm-text-primary) !important;
}

/* ─── Tags ────────────────────────────────────────────────────────────────── */
html.ae-dark-mode .tag-nm,
html.ae-dark-mode span.tag.tag-nm,
html.ae-dark-mode .tag-nm.free,
html.ae-dark-mode body .news-list .tag.tag-nm {
    color: #ffffff !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ─── Search Button Icon Fix ──────────────────────────────────────────────── */
html.ae-dark-mode input.hd-search-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    filter: none !important;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
html.ae-dark-mode .hd {
    background-color: #000000 !important;
    border-bottom: none !important;
    border: none !important;
}

html.ae-dark-mode .hd-top {
    background-color: #000000 !important;
    border-bottom: none !important;
    border: none !important;
}

html.ae-dark-mode .hd-top .b-box,
html.ae-dark-mode .hd-top .t-link,
html.ae-dark-mode .hd-top .b-info {
    color: var(--dm-text-secondary) !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html.ae-dark-mode .hd-top .b-box {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

html.ae-dark-mode .hd-bot {
    background-color: #000000 !important;
    border: none !important;
    border-top: none !important;
}

/* ─── Dark Mode Inversion Utility ────────────────────────────────────────── */
html.ae-dark-mode .ae-dm-invert,
html.ae-dark-mode img.ae-dm-invert {
    filter: invert(1) brightness(2) !important;
}

/* ─── Auto-Invert General UI Icons (Default Targets) ─────────────────────── */
html.ae-dark-mode .hd-top img[src$=".svg"],
html.ae-dark-mode .hd-bot img[src$=".svg"],
html.ae-dark-mode .ft-bot img[src$=".svg"],
html.ae-dark-mode .hd .b-box span.icon img,
html.ae-dark-mode .b-info span.icon img,
html.ae-dark-mode .ft-sc .t-list .i-link img {
    filter: invert(1) brightness(2) !important;
}

/* ─── Swiper Controls Fix ─────────────────────────────────────────────────── */
html.ae-dark-mode .swiper-control-btn {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border) !important;
}

/* ─── Complianz Cookie Banner Dark Mode Fix ───────────────────────────────── */
html.ae-dark-mode #cmplz-cookiebanner-container .cmplz-cookiebanner {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border) !important;
}

html.ae-dark-mode #cmplz-cookiebanner-container .cmplz-title,
html.ae-dark-mode #cmplz-cookiebanner-container .cmplz-message,
html.ae-dark-mode #cmplz-cookiebanner-container .cmplz-links a,
html.ae-dark-mode #cmplz-cookiebanner-container p,
html.ae-dark-mode #cmplz-cookiebanner-container span,
html.ae-dark-mode #cmplz-cookiebanner-container div {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode #cmplz-cookiebanner-container .cmplz-btn {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

html.ae-dark-mode #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
    background-color: var(--dm-primary) !important;
    color: #fff !important;
    border: none !important;
}

html.ae-dark-mode #cmplz-cookiebanner-container .cmplz-header {
    background: transparent !important;
}

html.ae-dark-mode .swiper-control-btn.swiper-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
}

html.ae-dark-mode .swiper-control-btn.swiper-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
}

html.ae-dark-mode .swiper-control-btn::after,
html.ae-dark-mode .swiper-control-btn::before,
html.ae-dark-mode .swiper-control-btn i {
    display: none !important;
}

html.ae-dark-mode .hd-nav .menu-list>li>a,
html.ae-dark-mode .hd .menu-list .menu-link,
html.ae-dark-mode .hd .menu-list>li>a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .hd-nav .menu-list>li>a:hover,
html.ae-dark-mode .hd .menu-list>li>a:hover {
    color: var(--dm-accent) !important;
}

/* Header Dropdown Menus */
html.ae-dark-mode .hd-nav .sub-menu,
html.ae-dark-mode .hd .menu-list .sub-menu {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 8px 24px var(--dm-shadow) !important;
}

html.ae-dark-mode .hd-nav .sub-menu a,
html.ae-dark-mode .hd .menu-list .sub-menu a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .hd-nav .sub-menu a:hover,
html.ae-dark-mode .hd .menu-list .sub-menu a:hover {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-accent) !important;
}

/* Header Icons & Actions */
html.ae-dark-mode .hd-ctr,
html.ae-dark-mode .hd-act .icon,
html.ae-dark-mode .hd-act i {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .btn-login {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .btn-login .inner {
    color: var(--dm-text-primary) !important;
}

/* Header Search Box */
html.ae-dark-mode .hd-search-box,
html.ae-dark-mode .searchPanel {
    background-color: #000000 !important;
    border: 1px solid var(--dm-border) !important;
}

html.ae-dark-mode .hd-search-ip {
    background-color: #000000 !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .hd-search-his {
    color: var(--dm-text-primary) !important;
}

/* Header CTA Button */
html.ae-dark-mode .hd-btn .btn.roate {
    background-color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #fff !important;
}

html.ae-dark-mode .hd-btn .btn.roate:hover {
    background-color: var(--dm-accent-hover) !important;
}

/* Mobile Menu */
html.ae-dark-mode .mobile {
    background-color: var(--dm-bg-secondary) !important;
}

html.ae-dark-mode .mobile-nav .menu-list a {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .mobile-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

html.ae-dark-mode .mobile-content {
    color: var(--dm-text-primary) !important;
}

/* Hamburger Lines */
html.ae-dark-mode .hd-burger .line {
    background-color: var(--dm-text-primary) !important;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
html.ae-dark-mode .ft {
    background-color: var(--dm-bg-primary) !important;
    border-top: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .ft-wrap,
html.ae-dark-mode .ft-box,
html.ae-dark-mode .ft-nav,
html.ae-dark-mode .ft-sc {
    color: var(--dm-text-secondary) !important;
}

html.ae-dark-mode .ft-box .txt {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .ft-box .t-link {
    color: var(--dm-text-secondary) !important;
}

html.ae-dark-mode .ft-box .t-link:hover {
    color: var(--dm-link) !important;
}

html.ae-dark-mode .ft-nav .menu a {
    color: var(--dm-text-secondary) !important;
}

html.ae-dark-mode .ft-nav .menu a:hover {
    color: var(--dm-link) !important;
}

html.ae-dark-mode .ft-bot {
    background-color: var(--dm-bg-primary) !important;
    border-top: 1px solid var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

/* ─── Page Sections & Containers ──────────────────────────────────────────── */
html.ae-dark-mode .sec,
html.ae-dark-mode section,
html.ae-dark-mode .container {
    color: var(--dm-text-primary);
}

/* Sections with light backgrounds */
html.ae-dark-mode [class*="sec-"],
html.ae-dark-mode .sec-about,
html.ae-dark-mode .sec-home,
html.ae-dark-mode .sec-feature,
html.ae-dark-mode .sec-course,
html.ae-dark-mode .sec-team,
html.ae-dark-mode .sec-review,
html.ae-dark-mode .sec-faq,
html.ae-dark-mode .sec-cta,
html.ae-dark-mode .sec-partner,
html.ae-dark-mode .sec-schedule,
html.ae-dark-mode .sec-contact,
html.ae-dark-mode .sec-news,
html.ae-dark-mode .sec-blog {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

/* Inner section gradients / backgrounds */
html.ae-dark-mode .sec-bg,
html.ae-dark-mode .b-bg {
    background-color: var(--dm-bg-secondary) !important;
}

/* ─── Cards & Boxes ───────────────────────────────────────────────────────── */
html.ae-dark-mode .b-card,
html.ae-dark-mode .b-box,
html.ae-dark-mode .b-item,
html.ae-dark-mode .b-wrap,
html.ae-dark-mode .box-item,
html.ae-dark-mode .b-info,
html.ae-dark-mode .b-content,
html.ae-dark-mode .card,
html.ae-dark-mode .item {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .b-card:hover,
html.ae-dark-mode .box-item:hover,
html.ae-dark-mode .b-item:hover {
    background-color: var(--dm-bg-elevated) !important;
    box-shadow: 0 8px 24px var(--dm-shadow) !important;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
html.ae-dark-mode .btn {
    color: var(--dm-text-primary);
}

html.ae-dark-mode .btn-pri,
html.ae-dark-mode .btn-primary,
html.ae-dark-mode .btn.roate {
    background-color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #fff !important;
}

html.ae-dark-mode .btn-pri:hover,
html.ae-dark-mode .btn-primary:hover,
html.ae-dark-mode .btn.roate:hover {
    background-color: var(--dm-accent-hover) !important;
    border-color: var(--dm-accent-hover) !important;
}

html.ae-dark-mode .btn-sec,
html.ae-dark-mode .btn-secondary,
html.ae-dark-mode .btn-outline {
    background-color: transparent !important;
    border-color: var(--dm-border-light) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .btn-sec:hover,
html.ae-dark-mode .btn-secondary:hover,
html.ae-dark-mode .btn-outline:hover {
    background-color: var(--dm-bg-hover) !important;
    border-color: var(--dm-accent) !important;
}

/* ─── Forms & Inputs ──────────────────────────────────────────────────────── */
html.ae-dark-mode input,
html.ae-dark-mode textarea,
html.ae-dark-mode select {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode input::placeholder,
html.ae-dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

html.ae-dark-mode input:focus,
html.ae-dark-mode textarea:focus,
html.ae-dark-mode select:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2) !important;
}

html.ae-dark-mode .form-input,
html.ae-dark-mode .form-ip,
html.ae-dark-mode .monaField {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* Checkbox & Radio */
html.ae-dark-mode .checker {
    color: var(--dm-text-primary) !important;
}

/* ─── Login / Registration Page ───────────────────────────────────────────── */
html.ae-dark-mode .sign,
html.ae-dark-mode .sign-wrap,
html.ae-dark-mode .sign-form,
html.ae-dark-mode .sign-main {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .sign-logo,
html.ae-dark-mode .sign-title,
html.ae-dark-mode .sign-desc {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .sign-forgot,
html.ae-dark-mode .sign-register {
    color: var(--dm-link) !important;
}

html.ae-dark-mode .sign-or {
    color: var(--dm-text-muted) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .sign-social .btn,
html.ae-dark-mode .sign-social a {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* ─── Account Dashboard ───────────────────────────────────────────────────── */
html.ae-dark-mode .acc,
html.ae-dark-mode .acc-wrap,
html.ae-dark-mode .acc-main {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .acc-sidebar,
html.ae-dark-mode .acc-side {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .acc-sidebar a,
html.ae-dark-mode .acc-side a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .acc-sidebar a:hover,
html.ae-dark-mode .acc-side a:hover,
html.ae-dark-mode .acc-sidebar a.active,
html.ae-dark-mode .acc-side a.active {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-accent) !important;
}

html.ae-dark-mode .acc-content,
html.ae-dark-mode .acc-box {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* Acc Dashboard info boxes */
html.ae-dark-mode .dashboard-box,
html.ae-dark-mode .dashboard-item,
html.ae-dark-mode .acc-info,
html.ae-dark-mode .acc-card {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* ─── Tables ──────────────────────────────────────────────────────────────── */
html.ae-dark-mode table {
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode table th {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode table td {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode table tr:nth-child(even) td {
    background-color: var(--dm-bg-secondary) !important;
}

html.ae-dark-mode .acc-table th {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .acc-table td {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .acc-table tbody tr:hover td {
    background-color: var(--dm-bg-hover) !important;
}

/* ─── Exam List Page ──────────────────────────────────────────────────────── */
html.ae-dark-mode .exam-list,
html.ae-dark-mode .exam-wrap,
html.ae-dark-mode .exam-main {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .exam-card,
html.ae-dark-mode .exam-item,
html.ae-dark-mode .b-exam,
html.ae-dark-mode .exam-box {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .exam-card:hover,
html.ae-dark-mode .exam-item:hover,
html.ae-dark-mode .b-exam:hover {
    background-color: var(--dm-bg-elevated) !important;
    box-shadow: 0 4px 16px var(--dm-shadow) !important;
}

/* Exam filtering */
html.ae-dark-mode .exam-filter,
html.ae-dark-mode .exam-filter .filter-item,
html.ae-dark-mode .exam-filter .filter-btn {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .exam-filter .filter-btn.active,
html.ae-dark-mode .exam-filter .filter-item.active {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
}

/* Category side panels */
html.ae-dark-mode .catexams-side,
html.ae-dark-mode .catexams-side .side-fixed-wrap,
html.ae-dark-mode .catexams-side .catexams-side-head,
html.ae-dark-mode .catexams-side .catexams-side-inner,
html.ae-dark-mode .catexams-side.side-fixed,
html.ae-dark-mode .exam-filter.catexams-side,
html.ae-dark-mode .exam-filter.catexams-side.side-fixed,
html.ae-dark-mode .exams-side .side-fixed-wrap,
html.ae-dark-mode .exam-sidebar,
html.ae-dark-mode .exam-sidebar .inner {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .catexams-side *,
html.ae-dark-mode .exam-filter.catexams-side *,
html.ae-dark-mode .exam-sidebar * {
    color: var(--dm-text-primary) !important;
}

/* ─── Blog / Single Posts ─────────────────────────────────────────────────── */
html.ae-dark-mode .blog-item,
html.ae-dark-mode .blog-card,
html.ae-dark-mode .blog-box {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .single-content,
html.ae-dark-mode .single-wrap,
html.ae-dark-mode .post-content,
html.ae-dark-mode .blog-content {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .blog-info-tag span {
    color: var(--dm-text-muted) !important;
}

html.ae-dark-mode .comments-area {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .comment-respond {
    background-color: var(--dm-bg-card) !important;
}

/* ─── WooCommerce ─────────────────────────────────────────────────────────── */
html.ae-dark-mode .woocommerce {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .woocommerce .product,
html.ae-dark-mode .woocommerce .products li {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .woocommerce table.shop_table {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .woocommerce table.shop_table th {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .woocommerce table.shop_table td {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .woocommerce #respond input#submit,
html.ae-dark-mode .woocommerce a.button,
html.ae-dark-mode .woocommerce button.button,
html.ae-dark-mode .woocommerce input.button {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
    border-color: var(--dm-accent) !important;
}

html.ae-dark-mode .woocommerce #respond input#submit:hover,
html.ae-dark-mode .woocommerce a.button:hover,
html.ae-dark-mode .woocommerce button.button:hover,
html.ae-dark-mode .woocommerce input.button:hover {
    background-color: var(--dm-accent-hover) !important;
}

html.ae-dark-mode .woocommerce form .form-row input.input-text,
html.ae-dark-mode .woocommerce form .form-row textarea {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .woocommerce-billing-fields>h3,
html.ae-dark-mode .woocommerce-additional-fields>h3,
html.ae-dark-mode #order_review_heading,
html.ae-dark-mode .cart-collaterals .cart_totals h2 {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th {
    background: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

/* Mini Cart */
html.ae-dark-mode .side-cmini,
html.ae-dark-mode .side-cmini .side-fixed-wrap,
html.ae-dark-mode .cmini,
html.ae-dark-mode .cmini-wrap {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .cmini-head {
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.ae-dark-mode .side-cmini .side-close i {
    color: var(--dm-text-primary) !important;
}

/* ─── WP Caption ──────────────────────────────────────────────────────────── */
html.ae-dark-mode .wp-caption {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

/* ─── 404 Page ────────────────────────────────────────────────────────────── */
html.ae-dark-mode .mona-wrapper-404 {
    background: var(--dm-bg-card) !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5) !important;
}

html.ae-dark-mode .mona-wrapper-404 .title-404 {
    color: var(--dm-danger) !important;
}

html.ae-dark-mode .mona-wrapper-404 .mona-button-style {
    border-color: var(--dm-accent) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .mona-wrapper-404 .mona-button-style:hover {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

/* ─── Breadcrumbs ─────────────────────────────────────────────────────────── */
html.ae-dark-mode .breadcrumb,
html.ae-dark-mode .breadcrumbs {
    color: var(--dm-text-muted) !important;
}

html.ae-dark-mode .breadcrumb a,
html.ae-dark-mode .breadcrumbs a {
    color: var(--dm-link) !important;
}

/* ─── Modals & Popups ─────────────────────────────────────────────────────── */
html.ae-dark-mode .popup-main,
html.ae-dark-mode .popup-wrapper,
html.ae-dark-mode .popup-main-wrapper,
html.ae-dark-mode .popup-over {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .popup-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

html.ae-dark-mode .popup-close {
    color: var(--dm-text-primary) !important;
}

/* jQuery Confirm (mona-alert) */
html.ae-dark-mode .jconfirm .jconfirm-box {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .jconfirm .jconfirm-box .jconfirm-title-c {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .jconfirm .jconfirm-box .jconfirm-content {
    color: var(--dm-text-secondary) !important;
}

/* ─── Side Panels ─────────────────────────────────────────────────────────── */
html.ae-dark-mode .side-fixed:not(.side-dark-mode),
html.ae-dark-mode .side-fixed:not(.side-dark-mode) .side-fixed-wrap {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .side-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

html.ae-dark-mode .side-close {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .side-fixed .b-panel {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .side-fixed .b-head {
    color: var(--dm-text-primary) !important;
}

/* ─── Swiper / Slider ─────────────────────────────────────────────────────── */
html.ae-dark-mode .swiper-pagination-bullet {
    background: var(--dm-text-muted) !important;
}

html.ae-dark-mode .swiper-pagination-bullet-active {
    background: var(--dm-accent) !important;
}

html.ae-dark-mode .swiper-button-next,
html.ae-dark-mode .swiper-button-prev {
    color: var(--dm-text-primary) !important;
}

/* ─── Select2 Dropdown ────────────────────────────────────────────────────── */
html.ae-dark-mode .select2-container .select2-selection {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .select2-dropdown {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .select2-results__option {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .select2-results__option--highlighted {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* ─── Fancybox / Lightbox ─────────────────────────────────────────────────── */
html.ae-dark-mode .fancybox__backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* ─── Contact Form 7 ──────────────────────────────────────────────────────── */
html.ae-dark-mode .wpcf7 {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .wpcf7 input,
html.ae-dark-mode .wpcf7 textarea,
html.ae-dark-mode .wpcf7 select {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .wpcf7 .wpcf7-submit {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
}

/* ─── WPForms ─────────────────────────────────────────────────────────────── */
html.ae-dark-mode .wpforms-container {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .wpforms-container input,
html.ae-dark-mode .wpforms-container textarea,
html.ae-dark-mode .wpforms-container select {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* ─── TranslatePress Language Switcher ────────────────────────────────────── */
html.ae-dark-mode .trp-language-switcher,
html.ae-dark-mode .trp-ls-shortcode-language {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .trp-ls-shortcode-current-language {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .trp-ls-shortcode-language a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .trp-ls-shortcode-language a:hover {
    background-color: var(--dm-bg-hover) !important;
}

/* ─── Pagination ──────────────────────────────────────────────────────────── */
html.ae-dark-mode .page-numbers,
html.ae-dark-mode .mona-product-pagination .page-numbers {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .page-numbers.current {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
    border-color: var(--dm-accent) !important;
}

/* ─── Back to Top ─────────────────────────────────────────────────────────── */
html.ae-dark-mode .back-to-top {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .back-to-top .triangle {
    border-bottom-color: var(--dm-text-primary) !important;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
html.ae-dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.ae-dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-primary);
}

html.ae-dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-border-light);
    border-radius: 4px;
}

html.ae-dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted);
}

/* ─── Images — Reduce Brightness Slightly ─────────────────────────────────── */
html.ae-dark-mode img:not([src*="logo"]):not(.wp-admin-bar img):not(.hd-logo img):not(.custom-logo-link img):not(.ft-bot img):not(.i-link img):not(.ic-link img) {
    filter: brightness(0.9);
    transition: filter 0.3s ease;
}

html.ae-dark-mode img:hover {
    filter: brightness(1);
}

/* ─── Cookie Banner ───────────────────────────────────────────────────────── */
html.ae-dark-mode .cookie-banner,
html.ae-dark-mode .cookie-consent,
html.ae-dark-mode [class*="cookie"] {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* ─── Exam / History Process Pages ────────────────────────────────────────── */
html.ae-dark-mode .sec-exp-history,
html.ae-dark-mode .history-wrap,
html.ae-dark-mode .history-item {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .history-card,
html.ae-dark-mode .history-box {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

/* ─── Sidebar Widgets ─────────────────────────────────────────────────────── */
html.ae-dark-mode .widget,
html.ae-dark-mode .sidebar .widget {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .widget-title,
html.ae-dark-mode .widgettitle {
    color: var(--dm-text-primary) !important;
}

/* ─── Schedule / Team Pages ───────────────────────────────────────────────── */
html.ae-dark-mode .team-card,
html.ae-dark-mode .team-item,
html.ae-dark-mode .schedule-item {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* ─── FAQ / Accordion ─────────────────────────────────────────────────────── */
html.ae-dark-mode .faq-item,
html.ae-dark-mode .faq-question,
html.ae-dark-mode .b-colapse-pannel {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .faq-answer,
html.ae-dark-mode .b-colapse-pannel .b-content {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

/* ─── Alert Boxes (Mona Alert, jQuery Confirm) ────────────────────────────── */
html.ae-dark-mode .mona-alert,
html.ae-dark-mode .alpha-notification {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* ─── Progress Bars & Status ──────────────────────────────────────────────── */
html.ae-dark-mode .progress-bar {
    background-color: var(--dm-bg-elevated) !important;
}

html.ae-dark-mode .t-status {
    color: var(--dm-text-primary) !important;
}

/* ─── Tabs ────────────────────────────────────────────────────────────────── */
html.ae-dark-mode .tab-nav,
html.ae-dark-mode .tab-list {
    border-bottom-color: var(--dm-border) !important;
}

html.ae-dark-mode .tab-item,
html.ae-dark-mode .tab-btn {
    color: var(--dm-text-muted) !important;
}

html.ae-dark-mode .tab-item.active,
html.ae-dark-mode .tab-btn.active {
    color: var(--dm-accent) !important;
    border-bottom-color: var(--dm-accent) !important;
}

/* ─── Misc Overrides ──────────────────────────────────────────────────────── */
/* Background: #fff or white */
html.ae-dark-mode [style*="background: #fff"],
html.ae-dark-mode [style*="background:#fff"],
html.ae-dark-mode [style*="background-color: #fff"],
html.ae-dark-mode [style*="background-color:#fff"],
html.ae-dark-mode [style*="background: white"],
html.ae-dark-mode [style*="background-color: white"],
html.ae-dark-mode [style*="background: rgb(255"],
html.ae-dark-mode [style*="background-color: rgb(255"] {
    background-color: var(--dm-bg-card) !important;
}

/* C-pri — theme primary color helper */
html.ae-dark-mode .c-pri {
    color: var(--dm-accent) !important;
}

html.ae-dark-mode .c-sec {
    color: var(--dm-link) !important;
}

/* Background white helpers */
html.ae-dark-mode .bg-white,
html.ae-dark-mode .bg-light {
    background-color: var(--dm-bg-card) !important;
}

/* Box shadow adjustments */
html.ae-dark-mode [class*="shadow"],
html.ae-dark-mode .shadow {
    box-shadow: 0 4px 16px var(--dm-shadow) !important;
}

/* Borders */
html.ae-dark-mode hr {
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .mona-content table th,
html.ae-dark-mode .mona-content table td {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .mona-content blockquote {
    border-left-color: var(--dm-accent) !important;
    color: var(--dm-text-secondary) !important;
}

/* ─── Dark Mode Toggle Button ─────────────────────────────────────────────── */
/* ─── Dark Mode Toggle Button ─────────────────────────────────────────────── */
.ae-dark-mode-toggle {
    position: fixed;
    bottom: 60px;
    /* Align with back-to-top */
    left: 30px;
    /* Move to left */
    right: auto;
    z-index: 99999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease, opacity 0.5s ease, transform 0.3s ease;
    background-color: #1a1a2e;
    color: #ffd93d;
    opacity: 1;
    pointer-events: auto;
}

/* Auto-hide state */
.ae-dark-mode-toggle.ae-hide {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

html.ae-dark-mode .ae-dark-mode-toggle {
    background-color: #fff;
    color: #f4a020;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ae-dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 1 !important;
    /* Always show on hover */
}

/* ─── Course Cards & Box Fixes ────────────────────────────────────────────── */
html.ae-dark-mode .crses-card,
html.ae-dark-mode .item,
html.ae-dark-mode .b-box,
html.ae-dark-mode .inner,
html.ae-dark-mode .form-gr,
html.ae-dark-mode .crs-it {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}

html.ae-dark-mode .crs-it:hover {
    background-color: var(--dm-bg-hover) !important;
}

html.ae-dark-mode .crs-it .t-info,
html.ae-dark-mode .crs-it .t-price,
html.ae-dark-mode .crs-it .label,
html.ae-dark-mode .crs-it span,
html.ae-dark-mode .crs-it p {
    color: var(--dm-text-secondary) !important;
}

html.ae-dark-mode .crs-it .t-head a {
    color: var(--dm-text-primary) !important;
}

/* ─── Navigation Menu Fixes ───────────────────────────────────────────────── */
html.ae-dark-mode .menu-list a,
html.ae-dark-mode .menu-item a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .menu-list a:hover,
html.ae-dark-mode .menu-item.current-menu-item>a,
html.ae-dark-mode .menu-item.active>a {
    color: var(--dm-accent) !important;
}

/* ─── Contact Page Fixes ──────────────────────────────────────────────────── */
html.ae-dark-mode .mona-contact-map-info,
html.ae-dark-mode .contact-map-info,
html.ae-dark-mode .contact-info-box,
html.ae-dark-mode .ctm-panel {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 12px var(--dm-shadow) !important;
}

html.ae-dark-mode .mona-contact-map-info .title,
html.ae-dark-mode .contact-map-info h3,
html.ae-dark-mode .ctm-panel .tt {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .mona-contact-map-info .desc,
html.ae-dark-mode .contact-map-info p,
html.ae-dark-mode .ctm-panel .desc,
html.ae-dark-mode .ctm-panel .text-link,
html.ae-dark-mode .ctm-panel a,
html.ae-dark-mode .ctm-panel * {
    color: var(--dm-text-primary) !important;
}

/* Google Maps — Improved Dark Mode Filter */
/* MAP FILTER REMOVED BY USER REQUEST */

html.ae-dark-mode .ctm-map {
    background-color: #1a1a1a !important;
}

/* ─── Logo & Icon Inversion (Fix for Dark Logos/Icons) ────────────────────── */
/* LOGO INVERSION REMOVED BY USER REQUEST */

/* Ensure swapped logos don't have conflicting filters unless specifically requested */
/* html.ae-dark-mode img.ae-dm-custom-logo {
    filter: none !important;
} */

/* ─── Account / Profile Page Fixes ────────────────────────────────────────── */
/* Sidebar Navigation */
html.ae-dark-mode .woocommerce-MyAccount-navigation,
html.ae-dark-mode .user-sidebar {
    background-color: var(--dm-bg-card) !important;
    border-right: 1px solid var(--dm-border) !important;
}

html.ae-dark-mode .woocommerce-MyAccount-navigation ul li,
html.ae-dark-mode .user-sidebar ul li {
    border-bottom-color: var(--dm-border) !important;
}

html.ae-dark-mode .woocommerce-MyAccount-navigation ul li a,
html.ae-dark-mode .user-sidebar a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .woocommerce-MyAccount-navigation ul li.is-active a,
html.ae-dark-mode .user-sidebar a.active {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-accent) !important;
    font-weight: bold;
}

/* User Profile Card */
html.ae-dark-mode .mona-user-card,
html.ae-dark-mode .user-info,
html.ae-dark-mode .user-profile-card {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 12px var(--dm-shadow) !important;
}

html.ae-dark-mode .mona-user-card .name,
html.ae-dark-mode .user-info .name {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .mona-user-card .email,
html.ae-dark-mode .user-info .role {
    color: var(--dm-text-muted) !important;
}

/* Charts (Canvas) — Invert to make visible on dark bg */
html.ae-dark-mode canvas,
html.ae-dark-mode .skillChart canvas,
html.ae-dark-mode #myChart {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Stats / Progress Boxes */
html.ae-dark-mode .acc-panel,
html.ae-dark-mode .stats-box,
html.ae-dark-mode .progress-box {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .acc-panel .value,
html.ae-dark-mode .stats-box .number {
    color: var(--dm-accent) !important;
}

/* Course Cards */
html.ae-dark-mode .course-item,
html.ae-dark-mode .product-item,
html.ae-dark-mode .mona-course-item {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .course-item .title,
html.ae-dark-mode .product-item .title a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .course-item:hover,
html.ae-dark-mode .product-item:hover {
    background-color: var(--dm-bg-elevated) !important;
    box-shadow: 0 8px 24px var(--dm-shadow) !important;
}

/* ─── Navigation Submenus (Refined) ────────────────────────────────────────── */
html.ae-dark-mode .hd-nav .sub-menu,
html.ae-dark-mode .hd-nav .menu-list,
html.ae-dark-mode .sub-menu,
html.ae-dark-mode .menu-list {
    background-color: var(--dm-bg-card) !important;
    box-shadow: 0 4px 12px var(--dm-shadow) !important;
}

html.ae-dark-mode .hd-nav .sub-menu a,
html.ae-dark-mode .hd-nav .menu-list a,
html.ae-dark-mode .sub-menu a,
html.ae-dark-mode .menu-list a,
html.ae-dark-mode .menu-link,
html.ae-dark-mode .menu-item a {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .hd-nav .sub-menu a:hover,
html.ae-dark-mode .hd-nav .menu-list a:hover,
html.ae-dark-mode .sub-menu a:hover,
html.ae-dark-mode .menu-list a:hover,
html.ae-dark-mode .menu-link:hover,
html.ae-dark-mode .menu-item.current-menu-item>a,
html.ae-dark-mode .menu-item.active>a {
    background-color: transparent !important;
    color: var(--dm-accent) !important;
}

/* ─── Course Detail Page Fixes ────────────────────────────────────────────── */
/* Accordions */
html.ae-dark-mode .b-it.collapse-item,
html.ae-dark-mode .b-it.collapse-item.active,
html.ae-dark-mode .faq-item.active {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .b-it.collapse-item .b-head .tt,
html.ae-dark-mode .b-it.collapse-item .b-content {
    color: var(--dm-text-primary) !important;
}

/* Swiper Buttons */
html.ae-dark-mode .swiper-control-btn,
html.ae-dark-mode .swiper-button-next,
html.ae-dark-mode .swiper-button-prev {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
}

html.ae-dark-mode .swiper-control-btn:hover,
html.ae-dark-mode .swiper-button-next:hover,
html.ae-dark-mode .swiper-button-prev:hover {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-accent) !important;
}

/* Popups */
html.ae-dark-mode .popup-content,
html.ae-dark-mode .popup-wrap {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
}

html.ae-dark-mode .popup-close {
    background-color: transparent !important;
    color: var(--dm-text-primary) !important;
}

/* ─── Account Page Fixes ──────────────────────────────────────────────────── */
/* Profile Header & Sidebar */
html.ae-dark-mode .woocommerce-MyAccount-navigation,
html.ae-dark-mode .user-profile-header,
html.ae-dark-mode .user-info-box {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* Info Boxes / Disclaimers */
html.ae-dark-mode .exam-disclaimer-box,
html.ae-dark-mode .exam-disclaimer,
html.ae-dark-mode .sec-acc .bg-white {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

/* Charts */
html.ae-dark-mode .chart-container,
html.ae-dark-mode canvas {
    background-color: transparent !important;
    /* Invert filter handles the color */
}

/* Progress Text & Headings */
html.ae-dark-mode .progress-title,
html.ae-dark-mode .sec-acc h2,
html.ae-dark-mode .sec-acc h3,
html.ae-dark-mode .sec-acc h4,
html.ae-dark-mode .acc-title {
    color: var(--dm-text-primary) !important;
}

/* Obscure Text Fixes */
html.ae-dark-mode .text-muted,
html.ae-dark-mode .desc {
    color: var(--dm-text-secondary) !important;
}

/* ─── Sections & Large Layout Blocks ──────────────────────────────────────── */
/* ─── About Us Section (Deep Fix) ─────────────────────────────────────────── */
html.ae-dark-mode .sec-about,
html.ae-dark-mode .sec-tch,
html.ae-dark-mode [class*="sec-"] {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .sec-about .container,
html.ae-dark-mode .sec-tch .container,
html.ae-dark-mode .mona-section .container,
html.ae-dark-mode .mona-section .inner {
    background-color: transparent !important;
    /* Remove white bg from containers */
}

html.ae-dark-mode .tch-wrap,
html.ae-dark-mode .sec-tch .item,
html.ae-dark-mode .sec-about .item {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Fix specific white rounded sections */
html.ae-dark-mode [style*="border-radius"][style*="background: #fff"],
html.ae-dark-mode [style*="border-radius"][style*="background-color: #fff"],
html.ae-dark-mode [style*="background: rgb(249"],
html.ae-dark-mode [style*="background-color: rgb(249"] {
    background-color: var(--dm-bg-card) !important;
}

/* ─── Header & Login Button ───────────────────────────────────────────────── */
html.ae-dark-mode .hd-search-wrap,
html.ae-dark-mode .header-search {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .hd-search-wrap input,
html.ae-dark-mode .header-search input {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
}

/* Specific override for Thi Thử Ngay / Liên hệ buttons to be transparent */
html.ae-dark-mode .header-action-btn,
html.ae-dark-mode .btn-login,
html.ae-dark-mode .btn-contact,
html.ae-dark-mode a[href*="tai-khoan"],
html.ae-dark-mode a[href*="lien-he"],
html.ae-dark-mode .hd-btn a {
    background-color: transparent !important;
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    /* User requested NO border */
    box-shadow: none !important;
}

/* Hover state for these buttons */
html.ae-dark-mode .header-action-btn:hover,
html.ae-dark-mode .btn-login:hover,
html.ae-dark-mode .btn-contact:hover,
html.ae-dark-mode .hd-btn a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

/* Preserve .btn-login original styling (transparent/red) */
html.ae-dark-mode .btn-login .inner {
    color: #fff !important;
}

/* ─── Reinforce Google Maps ───────────────────────────────────────────────── */
/* Using a more specific selector to ensure override */
/* MAP FILTER REMOVED BY USER REQUEST */

/* ─── Account Page: COMPREHENSIVE FIX ────────────────────────────────────── */
/* Sidebar container */
html.ae-dark-mode .b-inner,
html.ae-dark-mode .woocommerce-MyAccount-content {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

/* AI Credit Box */
html.ae-dark-mode .ai-credit-container,
html.ae-dark-mode [class*="credit-container"],
html.ae-dark-mode [class*="credit-box"] {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* Test History Table */
html.ae-dark-mode table,
html.ae-dark-mode table thead,
html.ae-dark-mode table tbody,
html.ae-dark-mode table tr,
html.ae-dark-mode table th,
html.ae-dark-mode table td {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode table thead th {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    font-weight: 600;
}

html.ae-dark-mode table tbody tr:nth-child(even) {
    background-color: var(--dm-bg-secondary) !important;
}

html.ae-dark-mode table tbody tr:hover {
    background-color: var(--dm-bg-hover) !important;
}

/* Status Badges */
html.ae-dark-mode .t-status.is-true {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: var(--dm-success) !important;
    border: 1px solid var(--dm-success) !important;
}

html.ae-dark-mode .t-status.is-warn {
    background-color: rgba(239, 83, 80, 0.2) !important;
    color: var(--dm-danger) !important;
    border: 1px solid var(--dm-danger) !important;
}

html.ae-dark-mode .t-status {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

/* Pagination */
html.ae-dark-mode .page-numbers {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .page-numbers.current {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
}

/* Progress Bars */
html.ae-dark-mode .progress-bar-container,
html.ae-dark-mode [class*="progress-track"],
html.ae-dark-mode .progress {
    background-color: var(--dm-bg-elevated) !important;
}

/* Header Top Bar (Obscure text fix) */
html.ae-dark-mode .hd-top,
html.ae-dark-mode .hd-top * {
    color: var(--dm-text-secondary) !important;
}

html.ae-dark-mode .hd-top a {
    color: var(--dm-text-primary) !important;
}

/* Buttons (mode toggle, actions) */
html.ae-dark-mode .modeToggleBtn,
html.ae-dark-mode button:not(.ae-dark-mode-toggle) {
    color: var(--dm-text-primary) !important;
}

/* Facebook Widget — Mask with dark overlay */
html.ae-dark-mode iframe[src*="facebook.com"],
html.ae-dark-mode [class*="fb-page"],
html.ae-dark-mode .fb_iframe_widget {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) !important;
}

/* ─── NUCLEAR: Catch-all for inline white backgrounds ─────────────────────── */
html.ae-dark-mode [style*="background: #fff"],
html.ae-dark-mode [style*="background:#fff"],
html.ae-dark-mode [style*="background-color: #fff"],
html.ae-dark-mode [style*="background-color:#fff"],
html.ae-dark-mode [style*="background: white"],
html.ae-dark-mode [style*="background-color: white"],
html.ae-dark-mode [style*="background: rgb(255"],
html.ae-dark-mode [style*="background-color: rgb(255"],
html.ae-dark-mode [style*="background: rgb(249"],
html.ae-dark-mode [style*="background-color: rgb(249"],
html.ae-dark-mode [style*="background: rgb(248"],
html.ae-dark-mode [style*="background-color: rgb(248"],
html.ae-dark-mode [style*="background: rgb(247"],
html.ae-dark-mode [style*="background-color: rgb(247"],
html.ae-dark-mode [style*="background: rgb(245"],
html.ae-dark-mode [style*="background-color: rgb(245"],
html.ae-dark-mode [style*="background: rgb(240"],
html.ae-dark-mode [style*="background-color: rgb(240"],
html.ae-dark-mode [style*="background: rgb(236"],
html.ae-dark-mode [style*="background-color: rgb(236"],
html.ae-dark-mode [style*="background: rgb(254"],
html.ae-dark-mode [style*="background-color: rgb(254"],
html.ae-dark-mode [style*="background: rgb(224"],
html.ae-dark-mode [style*="background-color: rgb(224"],
html.ae-dark-mode [style*="background-color: #f7f9fc"],
html.ae-dark-mode [style*="background: #f7f9fc"],
html.ae-dark-mode [style*="background-color: #f9f9f9"],
html.ae-dark-mode [style*="background: #f9f9f9"],
html.ae-dark-mode [style*="background-color: #f5f5f5"],
html.ae-dark-mode [style*="background: #f5f5f5"],
html.ae-dark-mode [style*="background-color: #eee"],
html.ae-dark-mode [style*="background: #eee"] {
    background-color: var(--dm-bg-card) !important;
}

/* ─── NUCLEAR: Catch-all for dark text colors on dark backgrounds ─────────── */
html.ae-dark-mode [style*="color: #333"],
html.ae-dark-mode [style*="color:#333"],
html.ae-dark-mode [style*="color: #444"],
html.ae-dark-mode [style*="color:#444"],
html.ae-dark-mode [style*="color: #555"],
html.ae-dark-mode [style*="color:#555"],
html.ae-dark-mode [style*="color: #666"],
html.ae-dark-mode [style*="color:#666"],
html.ae-dark-mode [style*="color: black"],
html.ae-dark-mode [style*="color:black"],
html.ae-dark-mode [style*="color: #000"],
html.ae-dark-mode [style*="color:#000"] {
    color: var(--dm-text-primary) !important;
}

/* ─── EXAM FILTER PAGE (/bo-loc-de-thi/) ──────────────────────────────────── */
html.ae-dark-mode .exam-sidebar,
html.ae-dark-mode .exam-sidebar .inner,
html.ae-dark-mode .exam-filter,
html.ae-dark-mode .filter-panel {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .exam-sidebar .tt,
html.ae-dark-mode .exam-sidebar label,
html.ae-dark-mode .exam-sidebar span,
html.ae-dark-mode .exam-sidebar a,
html.ae-dark-mode .filter-panel .tt,
html.ae-dark-mode .filter-panel label {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .checkbox-custom,
html.ae-dark-mode .radio-custom,
html.ae-dark-mode input[type="checkbox"],
html.ae-dark-mode input[type="radio"] {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-light) !important;
}

html.ae-dark-mode .reuse-btn-reset,
html.ae-dark-mode .clear-filters {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .breadcrumb-item,
html.ae-dark-mode .breadcrumb a,
html.ae-dark-mode .breadcrumb span {
    color: var(--dm-text-secondary) !important;
}

/* ─── ACCOUNT PAGE: TARGETED ELEMENT FIXES ────────────────────────────────── */
/* Test/Course name text */
html.ae-dark-mode .t-name,
html.ae-dark-mode .t-name a,
html.ae-dark-mode .t-name span,
html.ae-dark-mode .t-head,
html.ae-dark-mode .t-head a {
    color: #ffffff !important;
}

/* Account panels and boxes */
html.ae-dark-mode .b-py,
html.ae-dark-mode .acc-view,
html.ae-dark-mode .acc-table,
html.ae-dark-mode .acc-panel,
html.ae-dark-mode .acc-score,
html.ae-dark-mode .acc-wrap,
html.ae-dark-mode .acc-rowrow,
html.ae-dark-mode .col-col-9 {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

/* AI Credit stats */
html.ae-dark-mode .total-remaining-label,
html.ae-dark-mode .total-remaining-value,
html.ae-dark-mode .trml-text,
html.ae-dark-mode .used-label,
html.ae-dark-mode .footer-note,
html.ae-dark-mode .progress-label,
html.ae-dark-mode .progress-value {
    color: var(--dm-text-secondary) !important;
}

/* Par group (participant groups with icons) */
html.ae-dark-mode .par-gr,
html.ae-dark-mode .b-group,
html.ae-dark-mode .b-content {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .par-gr .icon,
html.ae-dark-mode .par-gr .text,
html.ae-dark-mode .par-gr span {
    color: var(--dm-text-primary) !important;
}

/* Course recommendation cards in account */
html.ae-dark-mode .acc-panel .crses-card,
html.ae-dark-mode .acc-panel .crs-it,
html.ae-dark-mode .acc-panel .course-item {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
}

/* ─── FOOTER LOGOS: CATCH ALL ─────────────────────────────────────────────── */
/* ─── REMOVED BROAD LOGO INVERSION ────────────────────────────────────────── */
/* User requests to keep original logo colors. */
html.ae-dark-mode .custom-logo:not(.ae-dm-invert),
html.ae-dark-mode .custom-logo-link img:not(.ae-dm-invert) {
    filter: none !important;
}

/* ─── SELECT2 DROPDOWN FIXES ────────────────────────────────────────────── */
html.ae-dark-mode .select2-container--default .select2-selection--single,
html.ae-dark-mode .select2-dropdown,
html.ae-dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .select2-container--default .select2-results__option[aria-selected=true],
html.ae-dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dm-bg-hover) !important;
    color: #fff !important;
}

/* ─── EXAM TOC HOVER FIX ──────────────────────────────────────────────────── */
html.ae-dark-mode .exam-toc a:hover,
html.ae-dark-mode .exam-toc-content li:hover,
html.ae-dark-mode .exam-toc-content .active {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-accent) !important;
}

html.ae-dark-mode .exam-toc a:hover span,
html.ae-dark-mode .exam-toc-content li:hover span {
    color: var(--dm-accent) !important;
}

/* ─── PROGRESS CHART TEXT FIX ─────────────────────────────────────────────── */
html.ae-dark-mode .chart-title,
html.ae-dark-mode .chart-info,
html.ae-dark-mode .progress-text,
html.ae-dark-mode .chart-wrapper p,
html.ae-dark-mode .chart-wrapper span,
html.ae-dark-mode .monawoo-skill-chart-tabs-integrated * {
    color: var(--dm-text-primary) !important;
    fill: var(--dm-text-primary) !important;
    /* SVG Text Fix */
}

html.ae-dark-mode .monawoo-skill-chart-tabs-integrated {
    background-color: var(--dm-bg-card) !important;
}

/* ─── UNIVERSAL: Force ALL text inside dark mode to be light ──────────────── */
html.ae-dark-mode h1,
html.ae-dark-mode h2,
html.ae-dark-mode h3,
html.ae-dark-mode h4,
html.ae-dark-mode h5,
html.ae-dark-mode h6 {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode p,
html.ae-dark-mode span,
html.ae-dark-mode label,
html.ae-dark-mode li,
html.ae-dark-mode td,
html.ae-dark-mode th,
html.ae-dark-mode div,
html.ae-dark-mode a:not(.btn):not([class*="button"]) {
    color: var(--dm-text-primary);
}

/* ─── EXAM TOC (Table of Contents Sidebar) ───────────────────────────────── */
html.ae-dark-mode .exam-toc,
html.ae-dark-mode .exam-toc-sima,
html.ae-dark-mode .exam-toc-toggle-btn,
html.ae-dark-mode .exam-toc-header,
html.ae-dark-mode .exam-toc-content {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.ae-dark-mode .exam-toc-toggle-btn.hide {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
}

html.ae-dark-mode .exam-toc *,
html.ae-dark-mode .exam-toc-toggle-icon {
    color: var(--dm-text-primary) !important;
}

/* ─── Section Pseudo-Element Backgrounds ──────────────────────────────────── */
html.ae-dark-mode section::before,
html.ae-dark-mode section::after,
html.ae-dark-mode .sec-crssw::before,
html.ae-dark-mode .sec-crssw::after,
html.ae-dark-mode .ss-pd::before,
html.ae-dark-mode .ss-pd::after {
    background-color: var(--dm-bg-primary) !important;
    background: var(--dm-bg-primary) !important;
}

/* Override sections with light hardcoded backgrounds (#F4F7FB etc) */
html.ae-dark-mode section.sec-crssw,
html.ae-dark-mode section.ss-pd,
html.ae-dark-mode section[class*="sec-"],
html.ae-dark-mode .set-wrap,
html.ae-dark-mode .set-block {
    background-color: var(--dm-bg-primary) !important;
}

/* ─── Text Description Fix ────────────────────────────────────────────────── */
html.ae-dark-mode .t-des,
html.ae-dark-mode .t-title,
html.ae-dark-mode .t-info,
html.ae-dark-mode .t-txt,
html.ae-dark-mode .f-des,
html.ae-dark-mode .f-title {
    color: var(--dm-text-primary) !important;
}

/* ─── Google Maps: Final Nuclear Override ─────────────────────────────────── */
/* ─── Google Maps: Reset (User Request) ───────────────────────────────────── */
/* Removed filter: invert(...) to keep original map appearance */
html.ae-dark-mode iframe[src*="google"] {
    filter: none !important;
    border: none !important;
}

/* ─── Transition for Dark Mode ────────────────────────────────────────────── */
html.ae-dark-mode-transition,
html.ae-dark-mode-transition *,
html.ae-dark-mode-transition *::before,
html.ae-dark-mode-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ─── Fix for 'Thi Thử Ngay' Button (User Report) ─────────────────────────── */
html.ae-dark-mode .hd-btn .btn.roate {
    background-color: #b91d1c !important;
    /* Original Red */
    border-color: #b91d1c !important;
    color: #fff !important;
}

html.ae-dark-mode .hd-btn .btn.roate .inner {
    background-color: transparent !important;
    color: #fff !important;
}

html.ae-dark-mode .hd-btn .btn.roate:hover {
    background-color: #a31817 !important;
}

/* ─── Generic Fix for Buttons with .inner (Covers 'Liên hệ' etc) ───────────── */
html.ae-dark-mode .btn .inner {
    background-color: transparent !important;
}

/* ─── Contact Form Submit Button (Likely 'Liên hệ') ───────────────────────── */
html.ae-dark-mode input.wpcf7-form-control.wpcf7-submit,
html.ae-dark-mode .wpcf7-submit,
html.ae-dark-mode input[type="submit"] {
    background-color: #b91d1c !important;
    color: #fff !important;
    border: 1px solid #b91d1c !important;
}

html.ae-dark-mode input.wpcf7-form-control.wpcf7-submit:hover,
html.ae-dark-mode .wpcf7-submit:hover,
html.ae-dark-mode input[type="submit"]:hover {
    background-color: #a31817 !important;
}

/* ─── Google Maps: Definitive Fix ─────────────────────────────────────────── */
html.ae-dark-mode .sec-ctm::before,
html.ae-dark-mode .sec-ctm::after,
html.ae-dark-mode .ctm-map::before,
html.ae-dark-mode .ctm-map::after {
    background: transparent !important;
    display: none !important;
}

html.ae-dark-mode .ctm-map {
    background: transparent !important;
}

html.ae-dark-mode iframe[src*="google.com/maps"] {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    position: relative !important;
}

/* ─── NUCLEAR FIXES (User Requested) ──────────────────────────────────────── */
/* Rules below are now managed via the Alpha Dark Mode Inversion Manager in Admin */


/* 3. CHART TEXT FIX (User Requested) ──────────────────────────────────── */
/* Use high specificity to override inline styles */
html.ae-dark-mode .ae-chart-title,
html.ae-dark-mode div.ae-chart-title,
html.ae-dark-mode .ae-chart-score,
html.ae-dark-mode div.ae-chart-score,
html.ae-dark-mode .ae-chart-score span {
    color: #ffffff !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    /* Add slight shadow for better contrast */
}

/* Ensure the "Estimated IELTS" text is also visible */
html.ae-dark-mode .ae-chart-title+div,
html.ae-dark-mode .ae-chart-score+div {
    color: #cbd5e1 !important;
    /* Lighter gray for subtitle */
}

/* 4. PARTIAL DARK MODE (User Requested) ─────────────────────────────── */
/* Force Light Mode for Content Area on specific pages (Login, Register, Contact) */
html.ae-dark-mode body.page-template-contact-template main,
html.ae-dark-mode body.page-template-contact-template .main-content,
html.ae-dark-mode body.page-template-contact-template .entry-content,
html.ae-dark-mode .page-login,
html.ae-dark-mode .page-register {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Specific Contact Panel Fix REMOVED - It now follows default dark mode rules */

/* Login/Register Specific Exclusions (User Request: "không áp dụng dark mode cho cái login-panel...") */
html.ae-dark-mode .login-panel,
html.ae-dark-mode .register-panel,
html.ae-dark-mode .sec-login,
html.ae-dark-mode .ss-pd {
    background-color: #ffffff !important;
    color: #333333 !important;
    background-image: none !important;
}

html.ae-dark-mode .login-panel *,
html.ae-dark-mode .register-panel *,
html.ae-dark-mode .sec-login *,
html.ae-dark-mode .ss-pd * {
    color: #333333 !important;
}

/* Ensure inputs are visible in these light mode areas */
html.ae-dark-mode body.page-template-contact-template input,
html.ae-dark-mode body.page-template-contact-template textarea,
html.ae-dark-mode .page-login input,
html.ae-dark-mode .page-register input,
html.ae-dark-mode .login-panel input,
html.ae-dark-mode .sec-login input {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #ccc !important;
}

/* Fix Map Container Background specifically for Contact Page Partial Mode */
html.ae-dark-mode body.page-template-contact-template .sec-ctm,
html.ae-dark-mode body.page-template-contact-template .ctm-map {
    background: transparent !important;
}

/* Ensure Google Maps iframe is NOT inverted (even in partial mode, just to be safe) */
html.ae-dark-mode iframe[src*="google.com/maps"] {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ─── Homepage / Introduction Sections Fix ────────────────────────────────── */
/* Targets: .sec-hab, .sec-hdt, .sec-crssw, .sec-std, .sec-tch, .sec-smt, .sec-newsrl */

/* Titles */
html.ae-dark-mode .sec-hab .t-title,
html.ae-dark-mode .sec-hdt .t-title,
html.ae-dark-mode .sec-crssw .t-title,
html.ae-dark-mode .sec-std .t-title,
html.ae-dark-mode .sec-tch .t-title,
html.ae-dark-mode .sec-smt .t-title,
html.ae-dark-mode .sec-newsrl .t-title,
html.ae-dark-mode .abi-panel .t-title,
html.ae-dark-mode .tt-head .t-title,
html.ae-dark-mode .rs-title .title,
html.ae-dark-mode .page-news .news-head .t-title,
html.ae-dark-mode .mona-empty-message {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .srw-head .t-title,
html.ae-dark-mode .srw-head .head p {
    color: var(--dm-text-primary) !important;
}

/* Descriptions & Text */
html.ae-dark-mode .sec-hab .t-des,
html.ae-dark-mode .sec-hdt .t-des,
html.ae-dark-mode .sec-hdt .t-text,
html.ae-dark-mode .sec-crssw .t-des,
html.ae-dark-mode .sec-std .t-des,
html.ae-dark-mode .sec-tch .t-des,
html.ae-dark-mode .sec-smt .t-des,
html.ae-dark-mode .sec-newsrl .t-des,
html.ae-dark-mode .abi-panel .t-des,
html.ae-dark-mode .abn-box .t-des,
html.ae-dark-mode .mona-content {
    color: var(--dm-text-secondary) !important;
}

/* Secondary/Highlight Text (often span.c-sec) */
html.ae-dark-mode .c-sec {
    color: var(--dm-link) !important;
    /* Make highlights readable */
}

/* Numbers / Stats */
html.ae-dark-mode .countNum,
html.ae-dark-mode .t-num,
html.ae-dark-mode .t-num-static {
    color: var(--dm-accent) !important;
}

/* Box Backgrounds */
html.ae-dark-mode .abn-box,
html.ae-dark-mode .hdt-it,
html.ae-dark-mode .tch-panel,
html.ae-dark-mode .srw-panel,
html.ae-dark-mode .hsf-panel {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Slick/Swiper Arrows */
html.ae-dark-mode .swiper-control-btn {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
}

html.ae-dark-mode .swiper-control-btn:hover {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
}

/* ─── AGGRESSIVE CONTRAST FIX (User Request: "Scan & Fix Grey Text") ─── */
/* Force all common text wrappers to white/light in Dark Mode */

html.ae-dark-mode .t-title,
html.ae-dark-mode .t-des,
html.ae-dark-mode .t-text,
html.ae-dark-mode .txt,
html.ae-dark-mode .p1,
html.ae-dark-mode .c-sec,
html.ae-dark-mode .t-name,
html.ae-dark-mode .t-num,
html.ae-dark-mode .t-num-static,
html.ae-dark-mode .b-head,
html.ae-dark-mode .b-des,
html.ae-dark-mode .mona-content,
html.ae-dark-mode .mona-content p,
html.ae-dark-mode .mona-content span,
html.ae-dark-mode .mona-content li,
html.ae-dark-mode .mona-content div,
html.ae-dark-mode .mona-content h1,
html.ae-dark-mode .mona-content h2,
html.ae-dark-mode .mona-content h3,
html.ae-dark-mode .mona-content h4,
html.ae-dark-mode .mona-content h5,
html.ae-dark-mode .mona-content h6 {
    color: var(--dm-text-primary) !important;
}

/* Specific Fix for "Chúng tôi là ai" / Intro Sections where text might be stuck */
html.ae-dark-mode .sec-abi .abi-panel .b-ctn,
html.ae-dark-mode .sec-abi .abi-panel .b-ctn *,
html.ae-dark-mode .sec-abn .abn-box .t-des,
html.ae-dark-mode .sec-abn .abn-box .t-des *,
html.ae-dark-mode .sec-tch .tch-panel .t-des,
html.ae-dark-mode .sec-tch .tch-panel .t-des * {
    color: var(--dm-text-secondary) !important;
}

/* Headings in Intro should be bright white */
html.ae-dark-mode .sec-abi .t-title,
html.ae-dark-mode .sec-abn .t-title,
html.ae-dark-mode .sec-tch .t-title,
html.ae-dark-mode .sec-smt .t-title,
html.ae-dark-mode .sec-srw .t-title {
    color: #ffffff !important;
}

/* Button Text (Inner) Fix */
html.ae-dark-mode .btn .inner,
html.ae-dark-mode a.btn .inner,
html.ae-dark-mode button.btn .inner {
    color: inherit !important;
    /* Let button text inherit from button color (usually white) */
}

/* Fix specific grey color rgb(51, 51, 51) hardcoded inline or in other css */
html.ae-dark-mode [style*="color: rgb(51, 51, 51)"],
html.ae-dark-mode [style*="color: #333"] {
    color: var(--dm-text-primary) !important;
}


/* ─── AGGRESSIVE DARK MODE FIX (User Request: "Alpha Grid / Intro Text") ─── */
html.ae-dark-mode span,
html.ae-dark-mode p,
html.ae-dark-mode strong,
html.ae-dark-mode .p1 span,
html.ae-dark-mode .mona-content * {
    color: var(--dm-text-primary) !important;
}

/* Fix specific grey colors (rgb(51, 51, 51) / #333) used inline or in rigid css */
html.ae-dark-mode [style*="color: rgb(51, 51, 51)"],
html.ae-dark-mode [style*="color: #333"],
html.ae-dark-mode [style*="color: #333333"] {
    color: #ffffff !important;
}

/* Sidebar / Info Labels */
html.ae-dark-mode .t-des,
html.ae-dark-mode .txt,
html.ae-dark-mode .t-name {
    color: var(--dm-text-secondary) !important;
}

/* Button Fix */
html.ae-dark-mode .btn,
html.ae-dark-mode .btn:hover {
    color: #fff !important;
}

/* ─── FIX DARK MODE BACKGROUNDS (Refining "White Areas") ─── */
/* Targets: .sec-hdt (Why choose us), .sec-tch (Teachers), .bg-gray, .hdt-it */

html.ae-dark-mode .sec-hdt,
html.ae-dark-mode .sec-hdt .bg-gray,
html.ae-dark-mode .sec-tch,
html.ae-dark-mode .sec-tch .tch-wrap,
html.ae-dark-mode .sec-tch .bg-gray,
html.ae-dark-mode .bg-gray {
    background-color: var(--dm-bg-base) !important;
}

/* Fix for white cards in dark mode */
html.ae-dark-mode .hdt-it,
html.ae-dark-mode .tch-item .inner,
html.ae-dark-mode .b-box,
html.ae-dark-mode .b-panel {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Slider/Carousel Navigation Backgrounds */
html.ae-dark-mode .slick-arrow,
html.ae-dark-mode .swiper-button-next,
html.ae-dark-mode .swiper-button-prev {
    background-color: var(--dm-bg-elevated) !important;
    color: #fff !important;
}

/* Ensure text inside these sections is readable (White/Light) */
html.ae-dark-mode .sec-hdt *,
html.ae-dark-mode .sec-tch * {
    color: var(--dm-text-primary) !important;
}

/* Specific fix for "Giới thiệu" page white boxes */
html.ae-dark-mode .sec-intro .content-box,
html.ae-dark-mode .about-us-box {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

/* ─── HOME PAGE DARK MODE FIX (Section hab & hdt) ─── */
html.ae-dark-mode .sec-hab,
html.ae-dark-mode .sec-hab .b-box,
html.ae-dark-mode .sec-hdt .hdt-it {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Lift negative z-index background images above the solid card background, keep text on top */
html.ae-dark-mode .sec-hdt .hdt-it .b-img {
    z-index: 0 !important;
}

html.ae-dark-mode .sec-hdt .hdt-it .b-inner {
    position: relative;
    z-index: 2 !important;
}

html.ae-dark-mode .sec-hab .b-box *,
html.ae-dark-mode .sec-hdt .hdt-it * {
    color: var(--dm-text-primary) !important;
}

/* Fix for icons and backgrounds in these blocks */
html.ae-dark-mode .sec-hab .b-box .icon,
html.ae-dark-mode .sec-hdt .hdt-it .icon {
    background-color: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

/* ─── ADDITIONAL HOME PAGE DARK MODE FIXES (Round 8) ─── */
/* Targetting .sec-hab and .sec-hdt more specifically */

html.ae-dark-mode .sec-hab .t-gr .icon {
    background: var(--dm-bg-elevated) !important;
}

html.ae-dark-mode .sec-hab .b-box:hover {
    border-color: var(--dm-border-highlight) !important;
    background-color: var(--dm-bg-elevated) !important;
}

/* Fix for grey text in these sections */
html.ae-dark-mode .sec-hab .t-des,
html.ae-dark-mode .sec-hdt .txt,
html.ae-dark-mode .sec-hab .txt {
    color: var(--dm-text-secondary) !important;
}

/* ─── FINAL POLISH: MENU & BREADCRUMBS (Round 9) ─── */
html.ae-dark-mode .menu-list,
html.ae-dark-mode .hd-nav,
html.ae-dark-mode #menu-menu-chinh {
    background: #000000 !important;
    background-color: #000000 !important;
}

html.ae-dark-mode .breadcrumb-wrapper {
    background-color: var(--dm-bg-primary) !important;
    background: #000000 !important;
    border: none !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.ae-dark-mode .breadcrumb-wrapper .breadcrumb-list,
html.ae-dark-mode .breadcrumb-wrapper *,
html.ae-dark-mode .breadcrumb-item,
html.ae-dark-mode .breadcrumb-item a {
    color: var(--dm-text-primary) !important;
}

/* Fix for lingering grey background in sub-menus if any */
html.ae-dark-mode .sub-menu {
    background-color: #000000 !important;
}

/* ─── FINAL AGGRESSIVE BLACK-OUT: FORMS & CONTAINERS (Round 11) ─── */
html.ae-dark-mode input,
html.ae-dark-mode textarea,
html.ae-dark-mode select,
html.ae-dark-mode .wpcf7-form-control,
html.ae-dark-mode .form-control,
html.ae-dark-mode body.page-template-contact-template input,
html.ae-dark-mode body.page-template-contact-template textarea {
    background-color: #000000 !important;
    background: #000000 !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Fix for .b-wrap and .b-head ghost backgrounds */
html.ae-dark-mode .b-wrap,
/* html.ae-dark-mode .b-head,  <-- Model removed this */
html.ae-dark-mode .b-panel,
html.ae-dark-mode .ctr-panel,
html.ae-dark-mode .sct-form {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fix for Banner Head: Transparent bg + White text */
html.ae-dark-mode .b-head {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.ae-dark-mode .b-head .txt,
html.ae-dark-mode .b-head .t-text,
html.ae-dark-mode .b-head .t-title,
html.ae-dark-mode .bnh-head .t-des {
    color: #fff !important;
    opacity: 1 !important;
}

/* Specific fix for placeholders to be legible on black */
html.ae-dark-mode ::placeholder {
    color: var(--dm-text-muted) !important;
    opacity: 1;
}

/* ─── FINAL POLISH: NEWS / BLOG PAGE (Round 12) ─── */
html.ae-dark-mode .news-it,
html.ae-dark-mode .news-it .b-content,
html.ae-dark-mode .blog-item,
html.ae-dark-mode .post-item {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

html.ae-dark-mode .news-it .t-text a,
html.ae-dark-mode .news-it .t-des,
html.ae-dark-mode .news-it .t-gr .txt {
    color: var(--dm-text-primary) !important;
}

html.ae-dark-mode .news-it .t-gr .icon {
    filter: invert(1);
}

/* ─── FINAL POLISH: NEWS PAGE BACKGROUND (Round 13) ─── */
html.ae-dark-mode body.blog .sec-news,
html.ae-dark-mode body.archive .sec-news,
html.ae-dark-mode .sec-news,
html.ae-dark-mode .page-news,
html.ae-dark-mode main.page-news,
html.ae-dark-mode .page-lists {
    background-color: #000000 !important;
    background: #000000 !important;
}

html.ae-dark-mode .news-head.pro-head .t-title {
    color: var(--dm-text-primary) !important;
}

/* Fix Facebook Widget: NO inversion, clean container */
html.ae-dark-mode .fb_iframe_widget,
html.ae-dark-mode .fb-page,
html.ae-dark-mode .fb-page span,
html.ae-dark-mode .fb-page iframe {
    filter: none !important;
    background-color: transparent !important;
    border-radius: 8px;
    visibility: visible !important;
}

/* Fix obscured images "behind" overlays in Dark Mode */
html.ae-dark-mode .b-img::after,
html.ae-dark-mode .sec-hab .b-box::after,
html.ae-dark-mode .mona-overlay {
    background: transparent !important;
    display: none !important;
}

/* Force specific slider images to display correctly in dark mode */
html.ae-dark-mode .hdt-it .b-img img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    background: transparent !important;
}

/* Hide large obscure graphics that cover content in dark mode */
html.ae-dark-mode .hsf-dcor img,
html.ae-dark-mode .hsf-dcor {
    display: none !important;
}

/* Fix text color visibility in "Tại sao bạn nên chọn" section */
html.ae-dark-mode .hab-panel .t-des,
html.ae-dark-mode .hab-panel .t-des * {
    color: var(--dm-text-primary) !important;
}

/* Ensure the ext text displays by injecting data-ext attribute */
.bnh-image .box-dcor .b-inner .t-num::after {
    content: attr(data-ext);
    font-size: 1em;
    font-weight: inherit;
    font-family: inherit;
    margin-left: 4px;
}

/* Ensure inverted images are fully opaque and visible */
html.ae-dark-mode .ae-dm-invert {
    opacity: 1 !important;
    visibility: visible !important;
}


/* NUCLEAR BUTTON FIX: Force high-visibility Red in Dark Mode */
html.ae-dark-mode .btn,
html.ae-dark-mode .hd-btn a,
html.ae-dark-mode .mona-btn,
html.ae-dark-mode .stt-btn a,
html.ae-dark-mode div.hd-btn a,
html.ae-dark-mode a.btn {
    background-color: #d21f3c !important;
    /* Prominent Red */
    background: #d21f3c !important;
    color: #ffffff !important;
    border: none !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

html.ae-dark-mode .btn:hover,
html.ae-dark-mode .hd-btn a:hover {
    background-color: #ff3355 !important;
    transform: translateY(-1px) !important;
}

/* ─── DARK MODE TOGGLE ICONS ─── */
.ae-dark-mode-toggle .ae-sun-icon {
    display: none !important;
}

.ae-dark-mode-toggle .ae-moon-icon {
    display: flex !important;
    color: #000000 !important;
    /* Force black in light mode */
}

html.ae-dark-mode .ae-dark-mode-toggle .ae-sun-icon {
    display: flex !important;
    color: #ffffff !important;
}

html.ae-dark-mode .ae-dark-mode-toggle .ae-moon-icon {
    display: none !important;
}

/* ─── HEADER TOGGLE BOX STYLING ─── */
/* Match the login avatar icon exactly: 
   32x32px size, circle on desktop, rounded square on mobile */
.ae-dark-mode-toggle.ae-dark-mode-toggle-header {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    /* Circle on desktop */
    border: 1px solid #000 !important;
    /* Solid black border on light mode */
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Adjust the border color in dark mode */
html.ae-dark-mode .ae-dark-mode-toggle.ae-dark-mode-toggle-header {
    border-color: #fff !important;
    /* Solid white border on dark mode */
}

/* Apply border to Search icon ONLY on Desktop */
@media (min-width: 992px) {
    .hd-search.searchJS {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        /* Circle on desktop */
        border: 1px solid #000 !important;
        /* Solid black border on light mode */
    }

    html.ae-dark-mode .hd-search.searchJS {
        border-color: #fff !important;
        /* Solid white border on dark mode */
    }
}

@media (max-width: 991px) {

    .ae-dark-mode-toggle.ae-dark-mode-toggle-header {
        width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
        /* Rounded square (vuông tròn) on mobile */
        border-color: #000 !important;
        /* Solid black border on mobile light mode */
    }

    html.ae-dark-mode .ae-dark-mode-toggle.ae-dark-mode-toggle-header {
        border-color: #fff !important;
        /* Solid white border on mobile dark mode */
    }
}