@import"https://unpkg.com/open-props/easings.min.css";
.sun-and-moon>:is(.moon,.sun,.sun-beams){transform-origin:center center}.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill)}.theme-toggle:is(:hover,:focus-visible)>.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill-hover)}.sun-and-moon>.sun-beams{stroke:var(--icon-fill);stroke-width:2px}.theme-toggle:is(:hover,:focus-visible) .sun-and-moon>.sun-beams{stroke:var(--icon-fill-hover)}[data-theme=light] .sun-and-moon>.sun{transform:scale(1.75)}[data-theme=light] .sun-and-moon>.sun-beams{opacity:0}[data-theme=light] .sun-and-moon>.moon>circle{transform:translate(-7px)}@supports (cx: 1){[data-theme=light] .sun-and-moon>.moon>circle{transform:translate(0);cx:17}}@media (prefers-reduced-motion: no-preference){.sun-and-moon>.sun{transition:transform .5s var(--ease-elastic-3)}.sun-and-moon>.sun-beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}.sun-and-moon .moon>circle{transition:transform .25s var(--ease-out-5)}@supports (cx: 1){.sun-and-moon .moon>circle{transition:cx .25s var(--ease-out-5)}}[data-theme=light] .sun-and-moon>.sun{transform:scale(1.75);transition-timing-function:var(--ease-3);transition-duration:.25s}[data-theme=light] .sun-and-moon>.sun-beams{transform:rotate(-25deg);transition-duration:.15s}[data-theme=light] .sun-and-moon>.moon>circle{transition-delay:.25s;transition-duration:.5s}}.theme-toggle{--size: 2rem;--icon-fill: hsl(200, 100%, 50%);--icon-fill-hover: hsl(266, 100%, 44%);background:none;border:none;padding:0;inline-size:var(--size);block-size:var(--size);aspect-ratio:1;border-radius:50%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:5px}.theme-toggle>svg{inline-size:100%;block-size:100%;stroke-linecap:round}[data-theme=dark] .theme-toggle{--icon-fill: hsl(49, 94%, 45%);--icon-fill-hover: #f24738 }@media (hover: none){.theme-toggle{--size: 48px }}*{box-sizing:border-box;margin:0}html{block-size:100%;color-scheme:light}html[data-theme=dark]{color-scheme:dark}@supports not (color-scheme: dark){html[data-theme=dark]{background:#111}}body{min-block-size:100%;align-content:center;justify-content:center;place-content:center}.github-corner{fill:#ff69b4;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}[data-theme=dark] .github-corner{fill:indigo}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}

body #searchQuery {
    background-color: #f5f5f7;
    color: #000000;
}
body.dark-theme {
    background-color: #121212 ;
    color: #f0f0f0;
    
}
body.dark-theme .search-icon-image {
    display:none;
 
    
}

body.dark-theme .card p {

color:#f2ecdb;
transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme .card h2 {

    color:#f2ecdb;
    transition: background-color 0.3s ease, color 0.3s ease;
    }


body.dark-theme #searchQuery {
    background-color: #0f0f0f;
    color: #f1ecdb;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme .card-content{
    background-color: #000000;
    
}

body.dark-theme .card{
    box-shadow: 0 10px 30px rgba(212, 212, 212, 0.08);
    background-color: #121212;
    color:#f0f0f0;
}

body.dark-theme .modal{

    background-color: black;

}
body.dark-theme .modal-text{

    color:#f2ecdb;

}
body.dark-theme .modal-title{

    color:#f2ecdb;

}

body.dark-theme .tag{
    background-color: rgb(99, 99, 99);
    color:#f2ecdb;

}

body.dark-theme #password-tab{
    background-color: rgb(99, 99, 99);
    color:#f2ecdb;

}

body.dark-theme  .menu > li > a {
    display: block;
    padding: 5px 0; /* Tăng padding để khu vực click rộng hơn */
    text-decoration: none;
    color: #ffffff; /* Màu chữ trắng */
    font-weight: bold;
    transition: color 0.3s ease; /* Hiệu ứng chuyển đổi màu chữ mượt mà */
  }

body.dark-theme .menu > li > a:hover {
    color: #00ff9d; /* Màu chữ khi rê chuột */
  }

  body.dark-theme #searchForm {

    border: 1px solid #00ff9d;
  }


body.dark-theme .fixed-search   {

    background-color: #0f0f0f;
}

body.dark-theme .music-player-container {

    background-color: #000000;

}

body.dark-theme  .control-button {

    color: #00ff9d;
}

body.dark-theme .track-info {

    color: #00ff9d;
}

body.dark-theme #seekBar::-webkit-slider-thumb {
    background: #00ff9d;
}

body.dark-theme .time-display {


    color: #00ff9d;
}

body.dark-theme  #volumeBar::-webkit-slider-thumb {
    background: #00ff9d;
}


body.dark-theme .menu-bo-tron a:hover {
	background-color: #A7dca5; /* Màu nền khi di chuột qua */
  }


  body.dark-theme .tooltip .tooltiptext {
    
    background-color: #497568;
    color: #ffffff;
  }
  body.dark-theme .language-switcher select {

    color:rgb(255, 255, 255);
  }

  body.dark-theme .language-switcher select:focus {
    background-color: #121212;
  
  }


.theme-toggle{

    top: 10px;
    left: 10px;
    z-index: 1000;
    position: fixed;
}
body.dark-theme .filter-tag-button {
    border-color: var(--icon-fill); /* Màu border ở dark mode */
    color: var(--icon-fill); /* Màu chữ ở dark mode */
}

body.dark-theme .filter-tag-button:hover,
body.dark-theme .filter-tag-button.active {
    background-color: var(--icon-fill);
    color: #00ff9d; /* Màu chữ khi active/hover ở dark mode */
}

body.dark-theme .notification-container {

    background-color: rgb(223, 223, 223);
}