#show-packages-button {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 25px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
            cursor: pointer;
            z-index: 2000; /* Nằm dưới overlay nhưng trên nội dung khác */
            transition: transform 0.2s ease-in-out;
        }

        #show-packages-button:hover {
            transform: scale(1.05);
            background-color: #0056b3;
        }

        /* --- CSS cho lớp player overlay --- */
        .player-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px); /* Hiệu ứng làm mờ nền phía sau */
            z-index: 2000;
            display: none; /* Mặc định ẩn */
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .player-content {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 90%;
            max-width: 800px;
            transform: scale(0.95);
            animation: zoomIn 0.3s ease-out forwards;
        }

        @keyframes zoomIn {
            from { transform: scale(0.95); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .player-content h2 {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: bold;
            color: #333;
        }

        .player-content .subtitle {
            margin-bottom: 40px;
            color: #666;
            font-size: 16px;
        }

        .packages-container {
            display: flex;
            justify-content: center;
            gap: 25px; /* Khoảng cách giữa các gói */
            flex-wrap: wrap;
        }

        /* --- CSS cho các gói dịch vụ --- */
        .package {
            border: 2px solid #e0e0e0;
            padding: 25px;
            border-radius: 12px;
            width: 210px;
            text-align: left;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
            position: relative; /* Dùng cho tag "Bán chạy" */
             display: flex;
    flex-direction: column;
        }

        .package:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
        }

        .package h3 {
            font-size: 22px;
            margin: 0 0 15px 0;
            color: #007bff;
        }

        .package .price {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }

        .package .price-note {
            font-size: 14px;
            color: #777;
        }

      .package ul {
    display: flex;
    flex-direction: column; /* Buộc các mục bên trong xếp theo chiều dọc */
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

        .package ul li {
    display: block; /* Đảm bảo mỗi mục nằm trên một dòng riêng */
    margin-bottom: 12px;
    color: #555;
}
        
        .package ul li::before {
            content: '✓'; /* Ký tự tick */
            color: #28a745;
            font-weight: bold;
            margin-right: 8px;
        }

        .package-button {
            width: 100%;
            background-color: #007bff;
            color: white;
            border: none;
            padding: 12px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;
             margin-top: auto; /* Tự động đẩy nút xuống đáy */
        }

        .package-button:hover {
            background-color: #0056b3;
        }
        
        /* Gói nổi bật nhất - VĨNH VIỄN */
        .package.popular {
            border-color: #ffc107;
            background-color: #fffcf2;
        }
        
        .package.popular h3 {
            color: #e6a800;
        }

        .package.popular .package-button {
            background-color: #ffc107;
            color: #333;
        }
        
        .package.popular .package-button:hover {
            background-color: #e0a800;
        }

        .popular-tag {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #ffc107;
            color: #333;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: bold;
        }

        @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);
}

/* --- Dark Mode for Premium Packages --- */
body.dark-theme #show-packages-button {
    background-color: #00ff9d;
    color: #121212;
    box-shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
}

body.dark-theme .player-content {
    background-color: #1c1c1e;
    color: #f0f0f0;
}

body.dark-theme .player-content h2,
body.dark-theme .package .price {
    color: #ffffff;
}

body.dark-theme .player-content .subtitle {
    color: #a0a0a0;
}

body.dark-theme .package {
    background-color: #121212;
    border-color: #444;
}

body.dark-theme .package h3 {
    color: #00ff9d;
}

body.dark-theme .package ul li {
    color: #f0f0f0;
}

body.dark-theme .package-button {
    background-color: #333;
    color: #f0f0f0;
}

body.dark-theme .package-button:hover {
    background-color: #444;
}

body.dark-theme .package.popular {
    border-color: #ffc107;
    background-color: #2a2a2a;
}

body.dark-theme .package.popular .package-button {
    background-color: #ffc107;
    color: #121212;
}

body.dark-theme .popular-tag {
    background-color: #ffc107;
    color: #121212;
}

body.dark-theme .package.popular h3 {
            color: #e6a800;
        }