* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #090d16 !important; 
color: #f3f4f6 !important;            
margin: 0;
padding: 0;
line-height: 1.5;
}

@keyframes pageFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

body {
animation: none;
}

.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(9, 13, 22, 0.85) !important; 
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.brand-name {
color: #ffffff !important;margin:AUTO
}
.brand-subtitle {
color: #ffffff !important;
text-align: center;
margin: auto;
}

.site-header::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(239,68,68,0.45),
transparent
);
opacity: 0.7;
}
.header-inner {
width: 100%;
max-width: 1500px;
margin: 0 auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #111827;
transition:
transform 0.25s ease;
margin:auto
}
.brand:hover {
transform: translateX(2px);
}
.brand-icon {
width: 38px;
height: 38px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#ef4444,
#dc2626
);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
box-shadow:
0 5px 15px rgba(239,68,68,0.28);
position: relative;
overflow: hidden;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.brand-icon::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);
transform:
translateX(-80px)
rotate(20deg);
transition:
transform 0.6s ease;
}
.brand:hover .brand-icon {
transform:
translateY(-2px)
rotate(-2deg);
box-shadow:
0 8px 22px rgba(239,68,68,0.35);
}
.brand:hover .brand-icon::after {
transform:
translateX(80px)
rotate(20deg);
}

.app {
width: 100%;
max-width: 1500px;
margin: 0 auto;
padding: 24px 28px 40px;
animation:
contentAppear 0.7s ease 0.05s both;
}
@keyframes contentAppear {
from {
opacity: 0;
transform:
translateY(18px)
scale(0.99);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}

.layout {
display: grid;
grid-template-columns:
minmax(0, 1fr);
width: 100%;
}

.sidebar {
border-radius: 18px;
overflow: hidden;
position: sticky;
top: 92px;
box-shadow:
0 5px 20px rgba(15,23,42,0.035);
transition:
box-shadow 0.3s ease,
transform 0.3s ease;
}
.sidebar:hover {
box-shadow:
0 12px 35px rgba(15,23,42,0.07);
}
.sidebar-header {
padding: 20px;
border-bottom:
1px solid #f0f1f3;
position: relative;
}
.sidebar-header::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background:
linear-gradient(
#ef4444,
#fb7185
);
}
.sidebar-title {
font-size: 15px;
font-weight: 750;
color: #111827;
}
.sidebar-description {
margin-top: 5px;
font-size: 12px;
color: #9ca3af;
line-height: 1.5;
}

.playlist-list {
padding: 10px;
max-height: calc(100vh - 160px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
background: transparent !important;
border: 0 !important;
}
.playlist-item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 11px 12px;
margin: 3px 0;
border-radius: 10px;
text-decoration: none;
color: #fff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}

.playlist-item::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 70%;
height: 100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.55),
transparent
);
transform: skewX(-20deg);
transition:
left 0.6s ease;
}
.playlist-item:hover::after {
left: 140%;
}
.playlist-item:hover {
background:
linear-gradient(
90deg,
#f9fafb,
#ffffff
);
color: #111827;
transform:
translateX(3px);
}
.playlist-item.active {
background:
linear-gradient(
100deg,
#fff1f2,
#fff8f8
);
color: #dc2626;
font-weight: 650;
box-shadow:
inset 3px 0 0 #ef4444,
0 4px 12px rgba(239,68,68,0.06);
}
.playlist-icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: #f3f4f6;
font-size: 12px;
transition:
transform 0.25s ease,
background 0.25s ease;
}
.playlist-item:hover .playlist-icon {
transform:
scale(1.08)
rotate(-3deg);
}
.playlist-item.active .playlist-icon {
background:
linear-gradient(
135deg,
#fee2e2,
#fecaca
);
color: #dc2626;
animation:
playlistPulse 2s ease-in-out infinite;
}
@keyframes playlistPulse {
0%,
100% {
box-shadow:
0 0 0 0 rgba(239,68,68,0.15);
}
50% {
box-shadow:
0 0 0 6px rgba(239,68,68,0);
}
}

.content {
min-width: 0;
}

.video-card {
background: rgba(255, 255, 255, 0.03) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 18px;
overflow: hidden;
scroll-margin-top: 80px; 
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.video-card:hover {
transform:
translateY(-2px);
box-shadow:
0 14px 40px rgba(15,23,42,0.08);
}

.favorite-bar {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 10px 16px;
background: rgba(0, 0, 0, 0.35);
border-top: 1px solid rgba(255,255,255,0.06);
}

#btnYeuThich {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 20px;
background: rgba(255,255,255,0.05);
color: #ffffff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
color .25s ease,
background .25s ease,
border-color .25s ease,
transform .2s ease,
box-shadow .25s ease;
}

#btnYeuThich:hover {
background: rgba(255,255,255,0.10);
border-color:
rgba(239,68,68,0.35);
transform: translateY(-1px);
}

#btnYeuThich.is-favorite {
color: #ef4444;
border-color:
rgba(239,68,68,0.45);
background:
rgba(239,68,68,0.10);
box-shadow:
0 0 18px rgba(239,68,68,0.12);
}

.favorite-heart {
font-size: 16px;
line-height: 1;
transition:
transform .25s ease;
}
#btnYeuThich:hover .favorite-heart {
transform: scale(1.15);
}

#btnYeuThich.is-favorite .favorite-heart {
animation:
favoriteHeartPulse .5s ease;
}
@keyframes favoriteHeartPulse {
0% {
transform: scale(1);
}
40% {
transform: scale(1.35);
}
100% {
transform: scale(1);
}
}

@media (max-width: 600px) {
.favorite-bar {
padding: 9px 12px;
}
#btnYeuThich {
padding: 7px 12px;
font-size: 12px;
}
}

.player {
width: 100%;
background: #050505;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}

.player::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background:
radial-gradient(
circle at 50% 50%,
transparent 45%,
rgba(0,0,0,0.22) 100%
);
}
.player::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background:
linear-gradient(
90deg,
#ef4444,
#fb7185,
#ef4444
);
transform:
scaleX(0);
transform-origin: left;
transition:
transform 0.8s ease;
z-index: 3;
}
.video-card:hover .player::after {
transform:
scaleX(1);
}
.player iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
opacity: 1;
transition:
opacity 0.35s ease,
transform 0.5s ease;
}
.player iframe.loading {
opacity: 0;
transform:
scale(1.015);
}

.video-info {
padding: 20px 22px;
position: relative;
}
.current-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #9ca3af;
font-weight: 750;
margin-bottom: 7px;
display: flex;
align-items: center;
gap: 7px;
}
.current-label::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #ef4444;
box-shadow:
0 0 0 4px rgba(239,68,68,0.10);
animation:
livePulse 1.8s infinite;
}
@keyframes livePulse {
0% {
box-shadow:
0 0 0 0 rgba(239,68,68,0.25);
}
70% {
box-shadow:
0 0 0 6px rgba(239,68,68,0);
}
100% {
box-shadow:
0 0 0 0 rgba(239,68,68,0);
}
}
.current-title {
font-size: 20px;
line-height: 1.4;
font-weight: 750;
color: #ffffff !important;
margin: 0;
animation:
titleFade 0.4s ease;
}
@keyframes titleFade {
from {
opacity: 0;
transform:
translateY(6px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}

.video-section {
margin-top: 20px;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 4px 18px rgba(15,23,42,0.035);
}
.video-section-header {
padding: 18px 20px;
border-bottom:
1px solid #30343d;
display: flex;
align-items: center;
justify-content: space-between;
}
.section-title {
font-size: 15px;
font-weight: 750;
color: #fff;
}
.section-count {
font-size: 12px;
color: #9ca3af;
padding: 5px 9px;
background: #000;
border-radius: 20px;
}

.video-list {
display: none;
}
.video-list.show {
display: block;
animation:
playlistFadeIn 0.4s ease both;
}
@keyframes playlistFadeIn {
from {
opacity: 0;
transform:
translateY(8px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}

.video-item {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 20px;
border-bottom:
1px solid #f3f4f6;
text-decoration: none;
color: #374151;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
background 0.25s ease,
transform 0.25s ease,
padding-left 0.25s ease;
}
.video-item:last-child {
border-bottom: 0;
}
.video-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background:
linear-gradient(
#ef4444,
#fb7185
);
transform:
scaleY(0);
transform-origin: center;
transition:
transform 0.25s ease;
}
.video-item:hover {
background:
linear-gradient(
90deg,
#fafafa,
#ffffff
);
padding-left: 24px;
}
.video-item:hover::before {
transform:
scaleY(1);
}
.video-number {
width: 70px;
height: 40px;
flex: 0 0 70px;
border-radius: 8px;
overflow: hidden;
background: #111827;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 3px 10px rgba(0,0,0,.25);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.video-number img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-number::after {
content: "▶";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 13px;
background: rgba(0,0,0,.18);
opacity: 0;
transition: opacity .25s ease;
}
.video-item:hover .video-number {
transform: scale(1.06);
box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.video-item:hover .video-number::after {
opacity: 1;
}
.video-item.active .video-number {
box-shadow:
0 0 0 2px #ef4444,
0 5px 15px rgba(239,68,68,.35);
}

@media (max-width: 600px) {
.video-number {
width: 64px;
height: 38px;
flex-basis: 64px;
}
}
.playlist-card {
background: rgba(255, 255, 255, 0.03) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 18px;
}
.playlist-header h2 {
color: #ffffff !important;
}
.playlist-subtitle {
color: #9ca3af !important;
}

.video-item {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 12px;
color: #e5e7eb !important;
transition: all 0.2s ease;
}
.video-item:hover {
background: rgba(255, 255, 255, 0.08) !important;
}

.video-title {
color: #f3f4f6 !important;
}
.video-meta {
color: #9ca3af !important;
}

.video-item.active {
background: rgba(239, 68, 68, 0.15) !important;
border-color: rgba(239, 68, 68, 0.5) !important;
}
.video-item.active .video-title {
color: #ef4444 !important; 
}
@keyframes activeNumber {
0%,
100% {
transform:
scale(1);
}
50% {
transform:
scale(1.06);
}
}
.video-item.active .video-name {
color: #dc2626;
font-weight: 650;
}
.video-name {
font-size: 14px;
line-height: 1.5;
color:#ffffff !important;
transition:
color 0.25s ease;
}

.video-list.show .video-item {
animation:
itemAppear 0.45s ease both;
}
.video-list.show .video-item:nth-child(1) {
animation-delay: 0.03s;
}
.video-list.show .video-item:nth-child(2) {
animation-delay: 0.08s;
}
.video-list.show .video-item:nth-child(3) {
animation-delay: 0.13s;
}
.video-list.show .video-item:nth-child(4) {
animation-delay: 0.18s;
}
.video-list.show .video-item:nth-child(5) {
animation-delay: 0.23s;
}
.video-list.show .video-item:nth-child(6) {
animation-delay: 0.28s;
}
@keyframes itemAppear {
from {
opacity: 0;
transform:
translateX(-8px);
}
to {
opacity: 1;
transform:
translateX(0);
}
}

.ripple {
position: absolute;
border-radius: 50%;
background:
rgba(239,68,68,0.16);
transform:
scale(0);
animation:
rippleAnimation 0.6s ease-out;
pointer-events: none;
}
@keyframes rippleAnimation {
to {
transform:
scale(4);
opacity: 0;
}
}

.empty-message {
padding: 30px 20px;
text-align: center;
color: #9ca3af;
font-size: 14px;
}

.footer {
text-align: center;
padding: 28px 10px 10px;
color: #9ca3af;
font-size: 12px;
opacity: 0.8;
transition:
opacity 0.25s ease;
}
.footer:hover {
opacity: 1;
}

::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient(
#d1d5db,
#9ca3af
);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background:
linear-gradient(
#ef4444,
#dc2626
);
}

@media (max-width: 900px) {
.layout {
grid-template-columns:
minmax(0, 1fr);
}

.playlist-list {
display: block;
overflow-y: auto;
overflow-x: hidden;
}
.playlist-item {
width: 100%;
white-space: normal;
}
.playlist-icon {
display: flex;
}
.video-card:hover {
transform: none;
}
}

@media (max-width: 600px) {
.site-header {
height: 58px;
}
.header-inner {
padding: 0 15px;
}
.brand-icon {
width: 32px;
height: 32px;
border-radius: 8px;
}
.brand-name {
font-size: 16px;
}
.brand-subtitle {
display: none;
}
.app {
padding: 12px 10px 30px;
}
.layout {
gap: 12px;
}
.sidebar {
border-radius: 13px;
}
.sidebar-header {
padding: 15px;
}
.video-card,
.video-section {
border-radius: 13px;
}
.video-info {
padding: 16px;
}
.current-title {
font-size: 17px;
}
.video-item {
padding: 11px 14px;
}
.video-item:hover {
padding-left: 17px;
}
.video-number {
width: 28px;
height: 28px;
flex-basis: 28px;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

#welcomeOverlay {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
background: #090d16;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #ffffff;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#welcomeOverlay.hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.overlay-bg-glow {
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(239, 68, 68, 0.22) 0%, rgba(0, 0, 0, 0) 70%);
top: -100px;
left: -100px;
filter: blur(50px);
animation: glowFloat 8s ease-in-out infinite alternate;
}
.overlay-bg-glow.glow-2 {
top: auto;
left: auto;
bottom: -100px;
right: -100px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
animation-delay: -4s;
}
@keyframes glowFloat {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(60px, 40px) scale(1.15); }
}

.welcome-card {
position: relative;
z-index: 2;
text-align: center;
padding: 40px 30px;
max-width: 480px;
width: 90%;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cardAppear {
from { opacity: 0; transform: translateY(30px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

.disc-wrapper {
margin: 0 auto 20px;
width: 90px;
height: 90px;
position: relative;
}
.vinyl-disc {
width: 100%;
height: 100%;
border-radius: 50%;
background: repeating-radial-gradient(
#111827,
#111827 2px,
#1f2937 3px,
#111827 4px
);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
animation: spinDisc 10s linear infinite;
}
.disc-center {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #ef4444, #dc2626);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #090d16;
}
.disc-play-icon {
font-size: 11px;
color: #fff;
margin-left: 2px;
}
@keyframes spinDisc {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.welcome-brand {
font-size: 20px;
font-weight: 800;
letter-spacing: 3px;
color: #ef4444;
text-transform: uppercase;
margin-bottom: 6px;
}
.welcome-title {
font-size: 24px;
font-weight: 800;
margin: 0 0 8px;
letter-spacing: -0.5px;
background: linear-gradient(180deg, #ffffff 0%, #d1d5db 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.welcome-subtitle {
font-size: 13px;
color: #9ca3af;
margin: 0 0 24px;
line-height: 1.4;
}

.sound-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 20px;
margin-bottom: 28px;
}
.sound-wave span {
width: 4px;
height: 100%;
background: #ef4444;
border-radius: 3px;
animation: waveAnim 1.2s ease-in-out infinite alternate;
}
.sound-wave span:nth-child(1) { animation-delay: 0.1s; }
.sound-wave span:nth-child(2) { animation-delay: 0.3s; }
.sound-wave span:nth-child(3) { animation-delay: 0.5s; }
.sound-wave span:nth-child(4) { animation-delay: 0.2s; }
.sound-wave span:nth-child(5) { animation-delay: 0.4s; }
@keyframes waveAnim {
0% { height: 4px; opacity: 0.3; }
100% { height: 22px; opacity: 1; }
}

.btn-start {
position: relative;
width: 100%;
padding: 16px 28px;
border: none;
border-radius: 16px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #ffffff;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 25px rgba(239, 68, 68, 0.4);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.btn-start::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.btn-start:hover::before {
left: 160%;
}
.btn-start:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 35px rgba(239, 68, 68, 0.5);
}
.btn-start:active {
transform: translateY(1px) scale(0.98);
}
.btn-icon {
font-size: 12px;
}
```css

.header-inner {
display: flex;
align-items: center;
}
.brand {
display: inline-flex;
align-items: center;
gap: 14px;
text-decoration: none;
position: relative;
padding: 8px 12px;
border-radius: 14px;
transition: all .35s ease;
}

.brand:hover {
background: rgba(255,255,255,.06);
transform: translateY(-1px);
}

.brand-icon {
width: 48px;
height: 48px;
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}

.brand-icon-core {
width: 18px;
height: 18px;
border-radius: 50%;
background:
radial-gradient(
circle,
#ffffff 0%,
#7dd3fc 25%,
#38bdf8 55%,
#0284c7 100%
);
box-shadow:
0 0 8px #38bdf8,
0 0 18px rgba(56,189,248,.8),
0 0 35px rgba(56,189,248,.45);
animation: brandCorePulse 2s ease-in-out infinite;
}

.brand-icon-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(56,189,248,.55);
}
.ring-1 {
width: 30px;
height: 30px;
animation:
brandRingPulse 2.2s ease-out infinite;
}
.ring-2 {
width: 44px;
height: 44px;
border-color: rgba(56,189,248,.25);
animation:
brandRingPulse 2.2s ease-out infinite .6s;
}

.brand-dot {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #7dd3fc;
box-shadow:
0 0 7px #38bdf8,
0 0 12px #38bdf8;
}
.dot-1 {
top: 1px;
left: 22px;
animation:
dotBlink 1.5s ease-in-out infinite;
}
.dot-2 {
right: 1px;
top: 22px;
animation:
dotBlink 1.5s ease-in-out infinite .5s;
}
.dot-3 {
bottom: 1px;
left: 22px;
animation:
dotBlink 1.5s ease-in-out infinite 1s;
}

.brand-text {
display: flex;
flex-direction: column;
justify-content: center;
}

.brand-name {
position: relative;
font-size: 18px;
font-weight: 800;
letter-spacing: 2px;
line-height: 1.1;
color: #ffffff;

text-shadow:
0 0 6px rgba(255,255,255,.35),
0 0 18px rgba(56,189,248,.25);
overflow: hidden;
}

.brand-name::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 70%;
height: 100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);
transform: skewX(-20deg);
animation: brandShine 3.5s ease-in-out infinite;
}

.brand-subtitle {
margin-top: 5px;
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
color: #67e8f9;
text-shadow:
0 0 6px rgba(34,211,238,.8),
0 0 15px rgba(34,211,238,.35);
animation:
subtitleBlink 2s ease-in-out infinite;
}

.loading-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: #67e8f9;
box-shadow:
0 0 6px #22d3ee,
0 0 12px #22d3ee;
animation:
loadingDot 1.2s ease-in-out infinite;
}

@keyframes brandCorePulse {
0%,
100% {
transform: scale(1);
box-shadow:
0 0 8px #38bdf8,
0 0 18px rgba(56,189,248,.8),
0 0 35px rgba(56,189,248,.45);
}
50% {
transform: scale(1.25);
box-shadow:
0 0 12px #ffffff,
0 0 25px #38bdf8,
0 0 45px rgba(56,189,248,.7);
}
}
@keyframes brandRingPulse {
0% {
transform: scale(.75);
opacity: .8;
}
70% {
transform: scale(1.15);
opacity: .1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
@keyframes dotBlink {
0%,
100% {
opacity: .25;
transform: scale(.7);
}
50% {
opacity: 1;
transform: scale(1.4);
}
}
@keyframes brandShine {
0% {
left: -120%;
}
35%,
100% {
left: 150%;
}
}
@keyframes subtitleBlink {
0%,
100% {
opacity: .65;
}
50% {
opacity: 1;
}
}
@keyframes loadingDot {
0%,
100% {
transform: scale(.6);
opacity: .4;
}
50% {
transform: scale(1.5);
opacity: 1;
}
}

.brand:hover .brand-icon-core {
animation-duration: .8s;
}
.brand:hover .brand-name {
text-shadow:
0 0 8px rgba(255,255,255,.6),
0 0 25px rgba(56,189,248,.6);
}

@media (max-width: 600px) {
.brand {
gap: 10px;
padding: 6px 8px;
}
.brand-icon {
width: 40px;
height: 40px;
}
.brand-name {
font-size: 13px;
letter-spacing: 1.5px;
}
.brand-subtitle {
font-size: 16px;
letter-spacing: 2px;
}
.ring-1 {
width: 26px;
height: 26px;
}
.ring-2 {
width: 37px;
height: 37px;
}
}

#loadMoreMusic {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 220px;
margin: 20px auto 10px;
padding: 11px 24px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 30px;
background: linear-gradient(
135deg,
#1c1c1c,
#292929
);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
box-shadow:
0 5px 20px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease,
border-color 0.25s ease;
}

#loadMoreMusic::after {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
font-size: 13px;
transition:
transform 0.25s ease,
background 0.25s ease;
}

#loadMoreMusic:hover {
transform: translateY(-2px);
background: linear-gradient(
135deg,
#252525,
#353535
);
border-color: rgba(255, 255, 255, 0.25);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.35),
0 0 18px rgba(255, 255, 255, 0.05);
}

#loadMoreMusic:hover::after {
transform: translateY(3px);
background: rgba(255, 255, 255, 0.15);
}

#loadMoreMusic:active {
transform: translateY(0) scale(0.97);
}

#loadMoreMusic:disabled {
cursor: wait;
opacity: 0.65;
transform: none;
box-shadow:
0 3px 12px rgba(0, 0, 0, 0.15);
}

#loadMoreMusic:disabled::after {
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
background: transparent;
animation:
loadMoreSpin 0.7s linear infinite;
}
@keyframes loadMoreSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

#search {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 8px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
background:
linear-gradient(
145deg,
#202020,
#101010
);
color: #fff;
font-size: 18px;
cursor: pointer;
box-shadow:
0 5px 18px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.08);
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;
}
#search:hover {
transform: translateY(-2px);
background:
linear-gradient(
145deg,
#303030,
#151515
);
box-shadow:
0 8px 25px rgba(0,0,0,0.45),
0 0 15px rgba(255,255,255,0.05);
}
#search:active {
transform:
scale(.94);
}

#searchModal,
.favorite-confirm-modal,
#hdPlaylistModal {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
box-sizing: border-box !important;
}
#searchModal,
.favorite-confirm-modal,
#hdPlaylistModal {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

#searchModal {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background:
rgba(0,0,0,0.72);
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
}

#searchModal.show {
display: flex;
animation:
searchModalFade .22s ease;
}

.search-box {
position: relative;
width: 100%;
max-width: 480px;
max-height: calc(100dvh - 40px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 32px 28px 28px;
border-radius: 24px;
border:
1px solid rgba(255,255,255,0.12);
background:
linear-gradient(
145deg,
rgba(35,35,35,.98),
rgba(15,15,15,.98)
);
box-shadow:
0 25px 80px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.06);
transform:
translateY(0);
}

.search-close {
position: absolute;
top: 12px;
right: 14px;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background:
rgba(255,255,255,.07);
color: #fff;
font-size: 25px;
line-height: 1;
cursor: pointer;
transition:
background .2s ease,
transform .2s ease;
}
.search-close:hover {
background:
rgba(255,255,255,.15);
transform:
rotate(90deg);
}

.search-icon-big {
width: 62px;
height: 62px;
margin:
0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
145deg,
#292929,
#111
);
border:
1px solid rgba(255,255,255,.1);
font-size: 28px;
box-shadow:
0 10px 30px rgba(0,0,0,.35);
}

.search-title {
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 700;
letter-spacing: .3px;
}
.search-subtitle {
margin-top: 8px;
text-align: center;
color:
rgba(255,255,255,.55);
font-size: 12px;
line-height: 1.5;
}

.search-input-wrapper {
margin-top: 24px;
}
#txtSearchkey {
width: 100%;
box-sizing: border-box;
height: 52px;
padding:
0 17px;
border-radius: 14px;
border:
1px solid rgba(255,255,255,.12);
outline: none;
background:
rgba(255,255,255,.06);
color: #fff;
font-size: 14px;
transition:
border-color .2s ease,
background .2s ease,
box-shadow .2s ease;
}
#txtSearchkey::placeholder {
color:
rgba(255,255,255,.38);
}
#txtSearchkey:focus {
border-color:
rgba(255,255,255,.3);
background:
rgba(255,255,255,.09);
box-shadow:
0 0 0 3px rgba(255,255,255,.04);
}

#btnSeach {
width: 100%;
height: 50px;
margin-top: 14px;
border: 0;
border-radius: 14px;
background:
linear-gradient(
135deg,
#ffffff,
#dcdcdc
);
color: #111;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow:
0 8px 25px rgba(0,0,0,.3);
transition:
transform .2s ease,
box-shadow .2s ease;
}
#btnSeach:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 30px rgba(0,0,0,.4);
}
#btnSeach:active {
transform:
scale(.98);
}
#btnSeach:disabled {
opacity: .55;
cursor: wait;
}

@keyframes searchModalFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@media (max-width: 600px) {
#searchModal {
padding: 15px;
}
.search-box {
padding:
30px 20px 22px;
border-radius: 20px;
}
.search-title {
font-size: 18px;
}
}

#videotimkiem {
width: 100%;
margin-top: 12px;
}

.search-loading {
padding: 25px 15px;
text-align: center;
color:
rgba(255,255,255,.55);
font-size: 13px;
}

.search-empty {
padding: 25px 15px;
text-align: center;
color:
rgba(255,255,255,.5);
font-size: 13px;
}

.search-error {
padding: 20px;
margin: 10px 0;
border-radius: 14px;
background:
rgba(255,60,60,.08);
border:
1px solid rgba(255,80,80,.12);
color:
rgba(255,150,150,.9);
text-align: center;
font-size: 13px;
}

.search-result-title {
margin:
18px 0 10px;
padding:
0 5px;
color:
rgba(255,255,255,.65);
font-size: 12px;
font-weight: 600;
letter-spacing: .5px;
}

.favorite-confirm-modal {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background:
rgba(0,0,0,0.72);
backdrop-filter:
blur(10px);
-webkit-backdrop-filter:
blur(10px);
}
.favorite-confirm-modal.show {
display: flex;
animation:
favoriteModalFade .2s ease;
}
@keyframes favoriteModalFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.favorite-confirm-box {
width: 100%;
max-width: 390px;
padding: 28px 24px 22px;
text-align: center;
border-radius: 22px;
border:
1px solid
rgba(255,255,255,0.10);
background:
linear-gradient(
145deg,
rgba(35,35,35,.98),
rgba(12,12,12,.98)
);
box-shadow:
0 25px 80px
rgba(0,0,0,.65);
animation:
favoriteBoxAppear
.25s
cubic-bezier(.16,1,.3,1);
}
@keyframes favoriteBoxAppear {
from {
opacity: 0;
transform:
translateY(15px)
scale(.94);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}

.favorite-confirm-icon {
width: 58px;
height: 58px;
margin:
0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ef4444;
background:
rgba(239,68,68,.10);
border:
1px solid
rgba(239,68,68,.20);
font-size: 26px;
}

.favorite-confirm-title {
color: #fff;
font-size: 19px;
font-weight: 750;
}

.favorite-confirm-message {
margin-top: 9px;
color: #9ca3af;
font-size: 13px;
line-height: 1.5;
max-height: 60px;
overflow: hidden;
}

.favorite-confirm-actions {
display: flex;
gap: 10px;
margin-top: 24px;
}
.favorite-confirm-actions button {
flex: 1;
height: 44px;
border-radius: 12px;
cursor: pointer;
font-size: 13px;
font-weight: 650;
transition:
transform .2s ease,
background .2s ease;
}
.favorite-btn-cancel {
border:
1px solid
rgba(255,255,255,.10);
background:
rgba(255,255,255,.06);
color: #fff;
}
.favorite-btn-remove {
border: 0;
background:
linear-gradient(
135deg,
#ef4444,
#dc2626
);
color: #fff;
}
.favorite-confirm-actions button:hover {
transform:
translateY(-1px);
}

.youtube-controls {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #0d111b;
border-top: 1px solid rgba(255,255,255,0.06);
}

.youtube-controls button {
width: 38px;
height: 34px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
background: rgba(255,255,255,0.05);
color: #ffffff;
cursor: pointer;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
transition:
background .2s ease,
transform .15s ease;
}
.youtube-controls button:hover {
background: rgba(255,255,255,0.12);
transform: translateY(-1px);
}
.youtube-controls button:active {
transform: scale(.94);
}

#btnPlayPause {
width: 44px;
background: rgba(239,68,68,0.16);
border-color: rgba(239,68,68,0.30);
}

.youtube-mode-btn {
width: 36px;
height: 36px;
margin-left: 4px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
background: rgba(255,255,255,.05);
color: #fff;
cursor: pointer;
font-size: 16px;
transition: all .2s ease;
}
.youtube-mode-btn:hover {
background: rgba(255,255,255,.12);
transform: translateY(-1px);
}
.youtube-mode-btn.active {
color: #ef4444;
border-color: rgba(239,68,68,.55);
background: rgba(239,68,68,.12);
box-shadow: 0 0 14px rgba(239,68,68,.12);
}
.youtube-mode-label {
min-width: 82px;
margin-left: 6px;
font-size: 11px;
color: #9ca3af;
white-space: nowrap;
}
@media (max-width: 600px) {
.youtube-mode-btn {
width: 32px;
height: 32px;
font-size: 14px;
}
.youtube-mode-label {
display: none;
}
}
.youtube-time {
min-width: 90px;
color: #cbd5e1;
font-size: 12px;
text-align: center;
white-space: nowrap;
}

.youtube-progress {
flex: 1;
height: 6px;
background: rgba(255,255,255,0.12);
border-radius: 20px;
cursor: pointer;
overflow: hidden;
}
#youtubeProgressBar {
width: 0%;
height: 100%;
background: #ef4444;
border-radius: 20px;
transition: width .15s linear;
}
body.sidebar-menu-open {
overflow: hidden;
}

@media (max-width: 600px) {
.youtube-controls {
gap: 6px;
padding: 8px;
}
.youtube-controls button {
width: 34px;
height: 32px;
}
#btnPlayPause {
width: 40px;
}
.youtube-time {
min-width: 78px;
font-size: 11px;
}
}

#btnMenu {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 8px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
background:
linear-gradient(
145deg,
#202020,
#101010
);
color: #fff;
cursor: pointer;
box-shadow:
0 5px 18px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.08);
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#btnMenu:hover {
transform: translateY(-2px);
background:
linear-gradient(
145deg,
#303030,
#151515
);
box-shadow:
0 8px 25px rgba(0,0,0,0.45),
0 0 15px rgba(255,255,255,0.05);
}
#btnMenu:active {
transform: scale(.94);
}

.menu-lines {
width: 18px;
height: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-lines span {
display: block;
width: 100%;
height: 2px;
border-radius: 10px;
background: #ffffff;
transition:
transform .3s ease,
opacity .25s ease,
width .3s ease;
}

#btnMenu.is-open .menu-lines span:nth-child(1) {
transform:
translateY(7px)
rotate(45deg);
}
#btnMenu.is-open .menu-lines span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
#btnMenu.is-open .menu-lines span:nth-child(3) {
transform:
translateY(-7px)
rotate(-45deg);
}

.sidebar {
position: fixed;

top: 50%;
left: 50%;
width: 320px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
z-index: 100001;
border-radius: 18px;
overflow: hidden;
background: rgba(12, 16, 27, 0.96);
border: 1px solid rgba(255, 255, 255, 0.10);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.55),
0 0 30px rgba(0, 0, 0, 0.25);

opacity: 0;
visibility: hidden;
pointer-events: none;

transform: translate(-50%, calc(-50% - 15px)) scale(0.96);
transform-origin: center center;
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}

.sidebar-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 17px 17px 15px;
border-bottom:
1px solid rgba(255,255,255,0.08);
background:
linear-gradient(
135deg,
rgba(255,255,255,.05),
rgba(255,255,255,.015)
);
}
.sidebar-popup-title {
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
color: #ffffff;
}
.sidebar-popup-subtitle {
margin-top: 3px;
font-size: 11px;
color: #8f98a8;
}

#btnCloseMenu {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(255,255,255,.10);
border-radius: 10px;
background:
rgba(255,255,255,.05);
color: #ffffff;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition:
transform .25s ease,
background .25s ease,
color .25s ease;
}
#btnCloseMenu:hover {
transform:
rotate(90deg)
scale(1.05);
background:
rgba(239,68,68,.15);
color: #ef4444;
}

.sidebar .playlist-item {
min-height: 46px;
border:
1px solid transparent;
}
.sidebar .playlist-item:hover {
background:
rgba(255,255,255,.08);
color: #ffffff;
transform:
translateX(4px);
}
.sidebar .playlist-item.active {
background:
linear-gradient(
90deg,
rgba(239,68,68,.18),
rgba(239,68,68,.05)
);
color: #ff6b6b;
border-color:
rgba(239,68,68,.15);
box-shadow:
inset 3px 0 0 #ef4444;
}

#sidebarBackdrop {
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
#sidebarBackdrop.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

@media (max-width: 600px) {
#btnMenu,
#search {
width: 38px;
height: 38px;
}
#btnMenu {
margin-left: 4px;
}
#search {
margin-left: 5px;
}
.sidebar {
top: 50%;
left: 50%;
width: calc(100vw - 20px);
max-width: calc(100vw - 20px);
max-height: calc(100vh - 30px);
border-radius: 16px;
transform:
translate(-50%, calc(-50% - 15px))
scale(0.97);
}
.sidebar.is-open {
transform:
translate(-50%, -50%)
scale(1);
}
.sidebar-popup-header {
padding: 15px;
}
.playlist-list {
max-height: calc(100vh - 130px);
padding: 8px;
}
.sidebar .playlist-item {
min-height: 48px;
padding: 12px;
font-size: 14px;
}
}

#sidebarMenu {
position: fixed !important;

top: 50vh !important;
left: 50vw !important;
right: auto !important;
bottom: auto !important;
width: 320px;
max-width: calc(100vw - 40px);

height: auto;
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
margin: 0 !important;
z-index: 999999 !important;
overflow: hidden;
box-sizing: border-box;
background: rgba(12, 16, 27, 0.97);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 18px;
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.55),
0 0 30px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);

opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translate3d(-50%, -50%, 0)
scale(0.96);
transform-origin: center center;
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.3s cubic-bezier(.16, 1, .3, 1);
}

#sidebarMenu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translate3d(-50%, -50%, 0)
scale(1);
}

#sidebarMenu .sidebar-popup-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
padding: 14px 16px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}

#sidebarMenu .playlist-list {
display: block !important;
width: 100%;
max-height: calc(100vh - 105px);
max-height: calc(100dvh - 105px);
padding: 10px;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
border: 0 !important;
background: transparent !important;
scrollbar-width: thin;
}

#sidebarBackdrop {
position: fixed !important;
inset: 0 !important;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 999998 !important;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.25s ease,
visibility 0.25s ease;
}
#sidebarBackdrop.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

body.sidebar-menu-open {
overflow: hidden !important;
}

.playlist-item .playlist-main {
display:flex;
align-items:center;
gap:8px;
min-width:0;
flex:1;
}
.playlist-menu-name {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.playlist-edit-btn {
width:42px;
height:42px;
min-width:42px;
flex:0 0 42px;
border:1px solid rgba(255,255,255,.10);
border-radius:11px;
background:rgba(255,255,255,.07);
color:#9ca3af;
cursor:pointer;
opacity:.78;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
line-height:1;
position:relative;
z-index:10;
touch-action:manipulation;
transition:all .2s ease;
}

.playlist-edit-btn:hover,
.playlist-edit-btn:focus {
opacity:1;
color:#fff;
background:rgba(239,68,68,.18);
border-color:rgba(239,68,68,.35);
transform:scale(1.04);
outline:none;
}
.search-playlist-item {
display:none !important;
}
.search-playlist-item.is-visible {
display:flex !important;
}
.playlist-add-btn {
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
margin:8px 0 5px;
padding:11px 12px;
border:1px dashed rgba(255,255,255,.18);
border-radius:11px;
background:rgba(255,255,255,.035);
color:#d1d5db;
cursor:pointer;
font-size:13px;
font-weight:650;
transition:all .2s ease;
}
.playlist-add-btn:hover {
color:#fff;
border-color:rgba(239,68,68,.45);
background:rgba(239,68,68,.08);
transform:translateY(-1px);
}
.playlist-item .playlist-edit-btn + .playlist-main {
padding-right:0;
}
.video-add-playlist {
margin-left:auto;
width:34px;
height:34px;
min-width:34px;
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
background:rgba(255,255,255,.05);
color:#d1d5db;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
line-height:1;
transition:all .2s ease;
z-index:5;
}
.video-add-playlist:hover {
transform:scale(1.06);
background:rgba(255,255,255,.10);
}
.video-add-playlist.is-added {
color:#22c55e;
border-color:rgba(34,197,94,.4);
background:rgba(34,197,94,.10);
font-size:16px;
}
.video-item .video-name {
min-width:0;
flex:1;
}
.playlist-setup-note,
.playlist-limit-note {
padding:28px 20px;
text-align:center;
color:#9ca3af;
font-size:14px;
}
.playlist-setup-note strong {
color:#fff;
}
.playlist-meta {
margin-left:auto;
font-size:10px;
color:#9ca3af;
opacity:.75;
}
@media (max-width:600px) {
.playlist-edit-btn {
width:42px;
height:42px;
min-width:42px;
flex-basis:42px;
font-size:19px;
}
.video-add-playlist {
width:31px;
height:31px;
min-width:31px;
font-size:17px;
}
}

#hdPlaylistModal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:rgba(3,7,18,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .22s ease}
html.hd-modal-open{overflow:hidden !important;overscroll-behavior:none !important}
body.hd-modal-open{overflow:hidden !important;overscroll-behavior:none !important}
#hdPlaylistModal{position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;width:100vw !important;height:100vh !important;height:100dvh !important;min-height:100vh !important;margin:0 !important;padding:20px !important;overflow-y:auto !important;overflow-x:hidden !important;overscroll-behavior:contain !important;-webkit-overflow-scrolling:touch;box-sizing:border-box !important}
#hdPlaylistModal.show{display:flex;opacity:1}
.hd-modal-card{width:min(460px,100%);max-height:min(760px,calc(100vh - 40px));overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:linear-gradient(145deg,rgba(24,29,43,.98),rgba(10,14,24,.98));box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.035) inset;transform:translateY(12px) scale(.97);transition:transform .24s ease;color:#fff}
#hdPlaylistModal.show .hd-modal-card{transform:translateY(0) scale(1)}
.hd-modal-head{display:flex;align-items:center;gap:13px;padding:20px 20px 15px;border-bottom:1px solid rgba(255,255,255,.08)}
.hd-modal-icon{width:43px;height:43px;display:flex;align-items:center;justify-content:center;flex:0 0 43px;border-radius:14px;background:linear-gradient(135deg,#ffcc33,#ff8a00);color:#171717;font-size:21px;box-shadow:0 7px 22px rgba(255,160,0,.2)}
.hd-modal-title{font-size:18px;font-weight:800;line-height:1.2;margin:0}
.hd-modal-subtitle{font-size:12px;color:rgba(255,255,255,.54);margin-top:4px;line-height:1.45}
.hd-modal-close{margin-left:auto;width:35px;height:35px;border:0;border-radius:11px;background:rgba(255,255,255,.07);color:#fff;font-size:20px;cursor:pointer;transition:.18s}
.hd-modal-close:hover{background:rgba(255,255,255,.13);transform:rotate(4deg)}
.hd-modal-body{padding:18px 20px;overflow:auto;max-height:calc(100vh - 220px)}
.hd-field{margin-bottom:16px}
.hd-field:last-child{margin-bottom:0}
.hd-label{display:block;margin:0 0 8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.72);letter-spacing:.2px}
.hd-input-wrap{position:relative}
.hd-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;color:rgba(255,255,255,.4);pointer-events:none}
.hd-input{width:100%;height:48px;box-sizing:border-box;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:rgba(255,255,255,.055);color:#fff;outline:0;padding:0 14px;font:inherit;font-size:14px;transition:border-color .18s,box-shadow .18s,background .18s}
.hd-input.has-icon{padding-left:40px}
.hd-input::placeholder{color:rgba(255,255,255,.3)}
.hd-input:focus{border-color:rgba(255,184,45,.75);background:rgba(255,255,255,.075);box-shadow:0 0 0 3px rgba(255,184,45,.11)}
.hd-help{margin-top:7px;font-size:11px;line-height:1.55;color:rgba(255,255,255,.45)}
.hd-info{display:flex;gap:10px;padding:12px 13px;margin-top:4px;border:1px solid rgba(255,184,45,.14);border-radius:13px;background:rgba(255,184,45,.055);color:rgba(255,255,255,.62);font-size:11px;line-height:1.55}
.hd-info-icon{font-size:15px;color:#ffca3a;flex:0 0 auto}
.hd-modal-foot{display:flex;gap:10px;padding:15px 20px 20px;border-top:1px solid rgba(255,255,255,.08)}
.hd-btn{height:46px;border:0;border-radius:13px;padding:0 18px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:.18s;letter-spacing:.1px}
.hd-btn-secondary{flex:1;background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.08)}
.hd-btn-secondary:hover{background:rgba(255,255,255,.11)}
.hd-btn-primary{flex:1.25;background:linear-gradient(135deg,#ffd34f,#ff9d00);color:#161616;box-shadow:0 8px 25px rgba(255,160,0,.2)}
.hd-btn-primary:hover{transform:translateY(-1px);box-shadow:0 11px 30px rgba(255,160,0,.28)}
.hd-btn-danger{background:rgba(255,75,75,.11);color:#ff9a9a;border:1px solid rgba(255,75,75,.14)}
.hd-playlist-list{display:flex;flex-direction:column;gap:8px}
.hd-playlist-option{display:flex;align-items:center;gap:11px;min-height:62px;padding:9px 11px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035);cursor:pointer;transition:.18s;box-sizing:border-box}
.hd-playlist-option:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.hd-playlist-option.selected{background:rgba(255,190,45,.09);border-color:rgba(255,190,45,.4)}
.hd-check{width:25px;height:25px;display:flex;align-items:center;justify-content:center;flex:0 0 25px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(0,0,0,.12);color:transparent;font-size:14px;font-weight:900}
.hd-playlist-option.selected .hd-check{background:linear-gradient(135deg,#ffd34f,#ff9d00);border-color:transparent;color:#171717}
.hd-playlist-text{min-width:0;flex:1}
.hd-playlist-name{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-playlist-keyword{display:block;margin-top:3px;font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-playlist-count{font-size:10px;color:rgba(255,255,255,.45);white-space:nowrap}
.hd-add-new{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:43px;margin-top:10px;border:1px dashed rgba(255,190,45,.35);border-radius:12px;background:rgba(255,190,45,.045);color:#ffd15a;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.hd-add-new:hover{background:rgba(255,190,45,.09)}
.hd-empty{padding:25px 10px;text-align:center;color:rgba(255,255,255,.45);font-size:12px;line-height:1.6}
#hdPlaylistToast{position:fixed;left:50%;bottom:25px;z-index:1000000;transform:translate(-50%,20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:9px;max-width:min(420px,calc(100vw - 30px));padding:12px 15px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(18,22,32,.95);box-shadow:0 15px 45px rgba(0,0,0,.4);color:#fff;font-size:12px;transition:.22s}
#hdPlaylistToast.show{opacity:1;transform:translate(-50%,0)}
#hdPlaylistToast .hd-toast-icon{color:#ffd052;font-size:16px}
@media(max-width:600px){#hdPlaylistModal{padding:12px;align-items:center}.hd-modal-card{width:100%;border-radius:22px;max-height:calc(100vh - 24px)}.hd-modal-body{max-height:calc(100vh - 205px)}.hd-modal-foot{padding-bottom:calc(15px + env(safe-area-inset-bottom))}.hd-btn{height:48px}.hd-modal-head{padding-top:17px}.hd-playlist-option{min-height:60px}}
/* Standalone player additions */
.brand-subtitle{font-size:11px} #currentTitle{padding:12px 0;font-weight:600}
.playlist-editor-form{display:grid;gap:12px}.playlist-editor-form label{display:grid;gap:6px}
.playlist-editor-form input{width:100%;padding:12px;border:1px solid #555;border-radius:12px;color:inherit;background:transparent;font:inherit}
.video-number img{object-fit:cover}.music-note{padding:24px;text-align:center;line-height:1.8}
button:disabled{opacity:.5;cursor:not-allowed}.hd-playlist-option{cursor:pointer}
.video-add-playlist{flex-shrink:0}.video-add-playlist.is-added{color:#ffd166}
#hdPlaylistModal.show{display:flex!important}.search-modal.show{display:flex!important}

#currentTitle{overflow-wrap:anywhere}

/* Home, voice search, and the Font Awesome YouTube brand. */
[hidden]{display:none!important}
.brand-youtube{font-size:44px;color:#ff0033;flex-shrink:0;line-height:1}
.home-subtitle{padding:0 20px 16px;color:#9ca3af;margin:0;font-size:13px}
.resume-last{display:block;width:100%;padding:14px 18px;margin:0 0 18px;border:1px solid #374151;border-radius:14px;background:#141923;color:#e5e7eb;text-align:left;font:inherit;cursor:pointer}
.video-list.home-grid.show{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:20px}
.home-grid .video-item{display:flex;position:relative;flex-direction:column;align-items:stretch;gap:10px;padding:0 0 14px;margin:0;overflow:hidden;border-radius:14px;border:1px solid #272d37;background:#111620}
.home-grid .video-number{width:100%;height:auto;aspect-ratio:16/9;border-radius:0;margin:0;background:#202632;flex:none}
.home-grid .video-number img{width:100%;height:100%;object-fit:cover;border-radius:0}
.home-grid .video-number::after{display:none}
.home-grid .video-name{padding:0 48px 0 14px;white-space:normal;line-height:1.5;min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-grid .video-add-playlist{position:absolute;right:10px;bottom:16px}
.home-grid .music-note{grid-column:1/-1}
.voice-input-wrapper{position:relative;display:flex;align-items:center}
#txtSearchkey{padding-right:62px}
.voice-search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:#262c37;color:#e5e7eb;font-size:18px;cursor:pointer;display:grid;place-items:center}
.voice-search-btn.is-listening{background:#e11d48;color:white;box-shadow:0 0 0 5px rgba(225,29,72,.17)}
.voice-status{min-height:20px;font-size:13px;color:#aeb7c6;text-align:center;margin:10px 0;line-height:1.5}
.voice-status.is-error{color:#fda4af}
@media(max-width:600px){.brand-youtube{font-size:34px}.video-list.home-grid.show{grid-template-columns:1fr;gap:14px;padding:12px}.home-subtitle{padding-left:14px}.resume-last{font-size:13px}}