body {
  transition: background 1s ease;
  color: #000; /* chữ mặc định */
}


body.dark .related-post-section.spad,
body.dark .latest-blog.spad,
body.dark .header-section,
body.dark .hero-title,
body.dark {
  background: #1e1e1e;
  color: #fff; /* chữ trong dark mode */
}

/* text */
body.dark .related-post-section.spad .section-title h2,
body.dark .related-post-section.spad .section-title p,
body.dark .contact-section.spad .section-title h2,
body.dark .contact-section.spad .section-title p,
body.dark .contact-section.spad .cs-text .ct-address span,
body.dark .contact-section.spad .cs-text .ct-address p,
body.dark .contact-section.spad ul,
body.dark .contact-section.spad li,
body.dark .contact-section.spad li span,
body.dark .latest-blog.spad .section-title h2,
body.dark .home-about-section.spad h2,
body.dark .home-about-section.spad p,
body.dark .home-about-section.spad ul,
body.dark .home-about-section.spad li,
body.dark .breadcrumb-section .breadcrumb-text h2,
body.dark .breadcrumb-section .breadcrumb-text .bt-option span,
body.dark .breadcrumb-section .breadcrumb-text .bt-option a,
body.dark .about-section.spad .section-title h2,
body.dark .about-section.spad .section-title p,
body.dark .about-section.spad .about-text p,
body.dark .about-section.spad .about-text h3,
body.dark .about-section.spad .about-text ul li,
body.dark .hero-title h2,
body.dark .hero-title p,
body.dark .testimonial-section.spad .section-title h2,
body.dark .testimonial-section.spad .section-title p,
body.dark .team-member-section .section-title h2,
body.dark .team-member-section .section-title p,
body.dark .blog-details-section .bd-text .bd-title p,
body.dark .blog-details-section .bd-text .bd-quote h4,
body.dark .blog-details-section .bd-text .bd-quote p,
body.dark .blog-details-section .bd-text .bd-quote span,
body.dark .bd-more-text h4,
body.dark .bd-more-text p,
body.dark .latest-blog.spad .section-title p {
  color: #fff;
}
/* Màu chữ menu desktop */
body.dark .header-section .nav-menu .mainmenu ul li a {
  color: #fff;
}

/* Menu mobile được plugin tạo trong #mobile-menu-wrap */
body.dark #mobile-menu-wrap,
body.dark #mobile-menu-wrap ul li a {
  background: #1e1e1e !important;
  color: #fff !important;
}


/* nút toggle */
.toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  background: #ffcc00;
  cursor: pointer;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.8),
              0 0 40px rgba(255, 204, 0, 0.6);
}

body.dark .toggle-btn {
  background: #444;
  color: #fff;
  box-shadow: 0 0 20px rgba(200, 200, 200, 0.8),
              0 0 40px rgba(200, 200, 200, 0.6);
}

/* icon animation */
.icon {
  position: absolute;
  font-size: 80px;
  opacity: 0;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  transition: top 1s ease, opacity 0.5s ease;
}

.icon.show {
  top: 40%;
  opacity: 1;
}

.icon.fly-down {
  top: 120vh; /* rơi hẳn xuống ngoài màn hình */
  opacity: 0;
}