body {
  max-width: 1200px;
  margin: 0 auto 0;
  padding: 0px;
  font-family: system-ui, sans-serif;
  background: #f5f5f5;
}

.item.locked {
  background-color: rgba(255, 0, 0, 0.15); /* đỏ nhạt */
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  margin-bottom: 10px;
  font-size: 1.1em;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
}

.item.active, .item.playing { border-color: #1e90ff; }
.item.isPin { background: #fff7d6; }

.title {
  flex: 1;
  font-weight: bold;
  word-break: break-word;
}

.options-btn {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.3em;
}

.mountains-right {
  position: fixed;
  bottom: 0; right: 0;
  width: 120px; height: 80px;
  background: url('/module/thonhac/asset/png_nui.jpg') no-repeat right bottom / contain;
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

/* Dropdown */
#dropdown {
    position: absolute;
    display: none;
    flex-direction: column;
    min-width: 250px;
    max-width: 90vw;
    left: 40%;
    transform: translateX(-40%);
    /* Căn giữa theo trục X */
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 999;
    transition: all .2s ease;
}

#dropdown button {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-bottom: 1px solid #eee;
  background: #fff;
  text-align: left;
  font-size: 1.2em;
  cursor: pointer;
  transition: all .15s ease;
}

#dropdown button:first-child { border-radius: 12px 12px 0 0; }
#dropdown button:last-child { border-radius: 0 0 12px 12px; border-bottom: none; }
#dropdown button:hover {
  background: #f0f8ff;
  transform: scale(1.03);
  font-weight: bold;
}


  /* === THANH PHÁT NHẠC GỌN NHẸ === */
#player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
  z-index: 9999;
  height: 65px; /* nhỏ gọn hơn mặc định */
  background: #222;
  color: #fff;
  flex-direction: column;
  gap: 0px;
}
#player-title {
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
audio { width: 100%; }


/* Search */
#search-bar {
  position: sticky;
  top: 50px;
  background: #f5f5f5;
  z-index: 50;
  padding: 6px 0;
}

#search {
  width: 100%;
  padding: 10px 36px 10px 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

#clear-search {
  position: absolute;
  right: 2px;
  top: 0; bottom: 0;
  margin: auto;
  height: 100%;
  aspect-ratio: 1;
  font-size: 1em;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

/* Categories */
.category-btn {
  padding: 4px 9px;
  margin-right: 3px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.category-btn.active {
  background: #1e90ff;
  color: #fff;
  border-color: #1e90ff;
}

.badge-new {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: .75em;
  font-weight: bold;
  color: #fff;
  background: red;
  border-radius: 6px;
  animation: blink 1s infinite;
}

@keyframes blink { 25%,75%{opacity:0;} 0%,50%,100%{opacity:1;} }

.listen-count { font-size: .75em; color: #555; margin-left: 6px; }

.categories { margin-top: 4px; }

.cat-label {
  display: inline-block;
  background: #eee;
  color: #333;
  font-size: .75em;
  padding: 1px 5px;
  border-radius: 3px;
  margin: 2px 3px 0 0;
}

.cat-hsd {
  border: 1px solid #ff69b4;
  background: #f0f8ff;
  color: #1e90ff;
  font-style: italic;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

/* Colors & animations */
.song-red { background: #ffccd2; }
.song-aqua { background: #b2ebf2; }
.song-rainbow {
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 400% 400%;
  animation: rainbowMove 8s linear infinite;
  color: #fff;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 6px;
}
@keyframes rainbowMove { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

/* Scroll to top button */

#btnTop {
    position: fixed;
    bottom: 70px;
    right: 20px;
    background: #ff5722;
    color: white;
    padding: 12px 18px;
    font-size: 18px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1001;
}


/* Fancy Buttons */
.btn-neon {
  background: #111;
  color: #0ff;
  padding: 10px 16px;
  border: 2px solid #0ff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 5px #0ff, 0 0 20px #0ff;
  transition: .3s;
}
.btn-neon:hover { box-shadow: 0 0 10px #0ff, 0 0 40px #0ff, 0 0 80px #0ff; }

.btn-sparkle {
  background: #673ab7;
  color: #fff;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.btn-sparkle::before, .btn-sparkle::after {
  position: absolute;
  font-size: 16px;
  animation: sparkleFly 3s linear infinite;
  opacity: .8;
}
.btn-sparkle::before { content: "✨"; top: 0; }
.btn-sparkle::after { content: "💫"; bottom: 0; animation-delay: 1.5s; }
@keyframes sparkleFly {
  0%{left:-20px;opacity:0;}20%{opacity:1;}50%{left:50%;}100%{left:120%;opacity:0;}
}

.btn-lightning {
  position: relative;
  background: #000;
  color: #fff;
  padding: 10px 20px;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}
.btn-lightning::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  animation: lightning 2s infinite;
}
@keyframes lightning { 0%{left:-100%;}50%{left:100%;}100%{left:100%;} }

.btn-gradient {
  padding: 12px 28px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(270deg,#ff6ec4,#7873f5,#4ade80);
  background-size: 600% 600%;
  animation: gradientMove 6s ease infinite;
}
@keyframes gradientMove { 0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;} }

.btn-hologram {
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 12px;
  background: linear-gradient(90deg,#0ff,#f0f,#0ff);
  background-size: 300% 300%;
  animation: hologram 6s linear infinite;
  cursor: pointer;
}
@keyframes hologram { 0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;} }

.btn-diag-stripe {
  background: repeating-linear-gradient(-45deg,#ff9a9e 0 10px,#fad0c4 10px 20px,#fbc2eb 20px 30px,#a1c4fd 30px 40px);
  color: #111;
  font-weight: bold;
  animation: stripeMove 3s linear infinite;
}
@keyframes stripeMove { 0%{background-position:0 0;}100%{background-position:60px 0;} }

.btn-confetti {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,#fef9c3,#fde68a);
  color: #111;
  font-weight: bold;
}
.btn-confetti::before, .btn-confetti::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -30px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #ff0;
  animation: confettiFall 3s linear infinite;
}
.btn-confetti::before {
  box-shadow: -40px -10px #f00, -25px -5px #0ff, -15px 10px #8b5cf6, 0 -15px #60a5fa,
  20px -8px #34d399, 30px -12px #f59e0b, 45px -18px #ef4444, 60px -10px #3b82f6,
  75px -15px #e879f9, -50px -12px #22d3ee, -65px -8px #84cc16, -80px -16px #a855f7,
  90px -20px #fb923c, 110px -15px #06b6d4, -100px -18px #f87171, 130px -22px #4ade80;
  animation-duration: 3.2s;
}
.btn-confetti::after {
  box-shadow: -45px -18px #3b82f6, -20px -8px #f472b6, 15px -12px #a3e635, 35px -20px #f59e0b,
  55px -25px #10b981, 70px -10px #6366f1, 95px -15px #f43f5e, 115px -18px #22d3ee,
  135px -12px #fb923c, 150px -16px #c084fc, -60px -20px #facc15, -90px -15px #2dd4bf,
  -120px -22px #ef4444;
  animation-duration: 3.6s;
  animation-delay: 1.2s;
}
@keyframes confettiFall { 0%{transform:translateY(-30px);opacity:1;}100%{transform:translateY(120px);opacity:0;} }

@media (max-width:600px){ .item { font-size:1em; } }