/* ================= PLAYLIST PAGE (ISOLATED) ================= */

.playlist-page {
    color: #fff;
}

/* ================= HEADER ================= */

.playlist-header {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

/* Ảnh bìa lớn */
.playlist-cover-big {
    width: 240px;
    height: 240px;
    border-radius: 14px;
    overflow: hidden;
    background: #1a2e2c;
}

.playlist-cover-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Meta bên phải */
.playlist-meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

.playlist-type,
.playlist-update {
    margin: 0;
    margin-bottom: 6px;
    color: #9fb2ad;
}



/* ================= HEADER TITLE – GIỐNG SONG PAGE ================= */
.playlist-meta h1 {
    font-size: 32px;      /* hoặc 28px tùy layout */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;   /* 👈 giới hạn 1 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
}




/* ================= ACTIONS ================= */

.playlist-actions {
    display: flex;
    gap: 16px;
    margin-top: auto;
}

.playlist-actions button {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Play */
/* .btn-play {
    background: #00d2d3;
    color: #000;
    padding: 14px 44px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 18px;
    transition: background 0.2s;
}

.btn-play i {
    margin-right: 8px;
    font-size: 18px;
}
 */


.btn-play {
    background: #00d2d3;
    color: #001a1a;
    min-width: 190px;
    height: 44px;              /* 🔒 chiều cao cố định */
    border-radius: 999px;
    font-weight: 700;
    font-size: 18px;
    transition: background 0.2s;

    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-play i {
    width: 18px;               /* 🔒 khóa width icon */
    text-align: center;
    margin-right: 8px;
    font-size: 18px;
    flex-shrink: 0;
}

/* Download / More */
.btn-download,
.btn-more {
    display: inline-flex;       /* cho icon và chữ nằm ngang */
    align-items: center;        /* căn giữa theo chiều dọc */
    gap: 8px;                   /* khoảng cách giữa icon và chữ */
    background: #1a2e2c;
    color: #fff;
    padding: 12px 24px;         /* giảm padding quá rộng nếu muốn */
    border-radius: 999px;
    font-size: 16px;
    cursor: pointer;
}

.btn-download i,
.btn-more i {
    font-size: 16px;
    /* không cần margin nữa vì đã dùng gap */
}


/* ================= TABLE ================= */

.playlist-table {
    margin-top: 20px;
}

.playlist-table-head,
.playlist-row {
    display: grid;
    grid-template-columns: 40px 56px 5fr 2fr 60px 48px;
    align-items: center;
    padding: 12px;
}


.playlist-table-head {
    font-size: 13px;
    color: #9ca3af;
    border-bottom: 1px solid #1f2933;
}

.playlist-row {
    border-bottom: 1px solid #1f2933;
    transition: background 0.2s;
}

.playlist-row:hover {
    background: rgba(255,255,255,0.06);
}

.playlist-row.playing {
    background: rgba(0,210,211,0.12);
}

.index {
    color: #9ca3af;
}

/* ================= PLAYLIST SONG COVER ================= */
.playlist-song-cover {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;       
    border-radius: 4px;
    flex-shrink: 0;
    background: #1a2e2c;
    cursor: pointer;
}

.playlist-song-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transition: transform 0.25s ease, filter 0.2s;
}

/* Hover chỉ áp dụng cho bài chưa phát */
.playlist-row:not(.playing):hover .playlist-song-cover img {
    filter: brightness(60%);
}

/* Khi bài đang phát */
.playlist-row.playing .playlist-song-cover img {
    transform: scale(1.15);
    filter: brightness(65%);
}

/* Icon overlay (Play hoặc GIF Equalizer) */
.playlist-song-cover::after {
    content: "\f04b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.playlist-row:not(.playing):hover .playlist-song-cover::after {
    opacity: 1;
}

.playlist-row.playing .playlist-song-cover::after {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url('/public/assets/gif/live.gif');
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
}

/* ================= TITLE ================= */ 

/* ================= PLAYLIST SONG TITLE (1 LINE + 3 CHẤM, thụt vào) ================= */
.playlist-song-title {
    display: block;               /* không dùng flex để ellipsis hoạt động */
    height: 1.2em;                /* 1 dòng */
    line-height: 1.2em;           /* khớp height */
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;             /* ẩn phần vượt */
    text-overflow: ellipsis;      /* 3 chấm */
    white-space: nowrap;          /* không xuống dòng */
    padding-left: 2px;            /* thụt vào trái */
    padding-right: 30px;           /* cách cột kế hoặc 3 chấm không sát mép */
}

/* ================= TEXT ================= */

.playlist-row span {
    font-size: 14px;
    opacity: 0.85;
}

.playlist-row span:last-child {
    text-align: right;
    opacity: 0.7;
}

/* ================= DURATION ================= */

.playlist-table-head span:last-child,
.playlist-row .playlist-duration {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* ===== PLAYLIST ROW ===== */
/* .playlist-row {
    position: relative;
    cursor: pointer;
} */

.playlist-row.active {
    background: rgba(0,210,211,0.14);
}

.playlist-row.active .playlist-song-title {
    color: #00d2d3;
}

/* ===== COVER + ICON ===== */
.playlist-song-cover {
    position: relative;
    width: 40px;
    height: 40px;
}

.playlist-song-cover img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.row-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: .15s;
}

.playlist-row:hover .row-play-icon,
.playlist-row.active .row-play-icon {
    opacity: 1;
}

.row-play-icon i {
    color: #fff;
    font-size: 14px;
}

/* ================= EXTRA COLUMN (MỚI – KHÔNG ĐỤNG CŨ) ================= */

.playlist-extra {
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-extra i {
    font-size: 14px;
    opacity: .5;
    cursor: pointer;
}

.playlist-row:hover .playlist-extra i {
    opacity: 1;
}















.playlist-actions {
    display: flex;
    flex-direction: column; /* 2 hàng */
    gap: 12px; /* khoảng cách giữa 2 hàng */
    margin-top: auto;
}

.playlist-actions-top {
    display: flex;
    gap: 8px; /* khoảng cách giữa các nút nhỏ */
}

.playlist-actions-main {
    display: flex;
    gap: 16px; /* nếu muốn thêm nút khác cùng hàng Play */
}

/* Nút nhỏ phía trên */
.btn-more {
    background: #1f2933;
    color: #fff;
    padding: 8px 14px; /* nhỏ hơn nút Play */
    border-radius: 999px;
    font-size: 14px;
}

/* Giữ nút Play to */
/* .btn-play {
    background: #00d2d3;
    color: #000;
    padding: 14px 44px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 18px;
} */


/* .btn-play {
    background: #00d2d3;
    color: #000;
    padding: 14px 40px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 18px;
} */

/* ================= PLAYLIST ARTISTS (1 LINE + 3 CHẤM, cách cột thời gian) ================= */
.playlist-song-artists {
    display: block;             
    max-width: calc(100% - 8px); /* giảm 8px so với cell, tránh dính cột kế */
    height: 1.2em;              
    line-height: 1.2em;         
    overflow: hidden;           
    text-overflow: ellipsis;    
    white-space: nowrap;        
    padding-left: 2px;          
    padding-right: 30px;          /* cách cột thời gian */
}