/* =========================================================
   Trang Âm Nhạc - diện mạo riêng (xanh da trời / sky-blue), phân biệt với
   Trang Truyện (be/tan) và Trang Thơ (hồng). Chỉ load trong
   Areas/Nhac/Views/Shared/_Nhaclayout.cshtml.
   Nền chính (.nennhac / .nennhactrai / .nentieude5) đã có sẵn trong base.css,
   file này chỉ bổ sung phần base.css/danhsach.css chưa có.
   ========================================================= */

/* ---- Thanh chuyển đổi cách sắp xếp ---- */
.nhac-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 22px;
}

.nhac-sort-tab {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    background-color: #dbf0fc;
    color: #0d5b82 !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #a8dbf5;
    box-shadow: 0 1px 3px rgba(13, 91, 130, 0.15);
    transition: all .2s ease;
}

.nhac-sort-tab:hover {
    background-color: #c3e8fb;
    transform: translateY(-1px);
}

.nhac-sort-tab.active {
    background-color: #1a86c4;
    color: #fff !important;
    border-color: #1a86c4;
}

@media (max-width: 600px) {
    .nhac-sort-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin: 4px -4px 18px;
    }

    .nhac-sort-tabs::-webkit-scrollbar {
        display: none;
    }

    .nhac-sort-tab {
        flex-shrink: 0;
        padding: 6px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ---- Dropdown "Tìm theo chủ đề / tính chất" ở sidebar ----
   base.css co rule "#letrai select" (id + element, specificity cao hon
   class thuong) dat mau xanh reu/oliu (#CBD5B8 nen, #4E741C vien) cho MOI
   the select trong khung sidebar - phai ghi de bang selector cung gan id
   #letrai moi thang duoc, giong cach da xu ly #letrai img. */
.nhac-dropdown-box {
    margin-bottom: 10px;
    padding: 0 10px;
}

#letrai .nhac-dropdown-box select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #a8dbf5 !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #0d5b82 !important;
    box-shadow: none !important;
}

#letrai .nhac-dropdown-box option {
    background-color: #fff !important;
    color: #0d5b82 !important;
    border-top: none !important;
}

/* ---- Điểm nhấn xanh cho các khối sidebar dùng chung (xem nhiều, năm sao...) ---- */
.nennhactrai .sidebar-title {
    color: #0d5b82;
    border-bottom-color: #a8dbf5;
}

/* ---- Sua loi anh sao de len chu "luot nghe" trong sidebar ----
   base.css co rule cu "#letrai img { position:absolute; }" (danh cho 1 anh trang tri
   rieng cua thiet ke goc), nhung #letrai la chinh ID cua khung sidebar Nhac - khien
   MOI anh trong do (ke ca sao10.gif tung dong) bi keo ra khoi dong chay binh thuong va
   de chong len dong "X luot nghe" ben duoi. Ghi de lai thanh static cho rieng anh sao. */
#letrai .truyen-stars img {
    position: static !important;
    z-index: auto !important;
}

/* ---- Hộp gợi ý tìm kiếm nhanh ---- */
#nhac-search-box {
    position: relative;
}

.suggestions-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #f5fbfe;
    border: 1px solid #c3e0ee;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    margin-top: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.suggestions-box .suggestion-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.suggestions-box .suggestion-list li {
    padding: 8px 14px;
    border-bottom: 1px solid #e3f2fb;
}

.suggestions-box .suggestion-list li:last-child {
    border-bottom: none;
}

.suggestions-box .suggestion-list a {
    color: #0d5b82;
    font-weight: bold;
    text-decoration: none;
}

.suggestions-box .suggestion-list a:hover {
    text-decoration: underline;
}

.suggestions-box .text-muted {
    color: #888;
    font-size: 12px;
}

/* ---- Thẻ bài hát trong danh sách chính ---- */
.nhac-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nhac-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 20px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(13, 91, 130, 0.12);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.nhac-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 12px rgba(13, 91, 130, 0.18);
}

.nhac-item-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.nhac-item-stars img {
    height: 16px;
}

.nhac-item-titlerow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nhac-item-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}

.nhac-item-title {
    font-family: music, "Times New Roman", serif;
    font-size: 19px;
    font-weight: bold;
    color: #0d5b82 !important;
    text-decoration: none !important;
    line-height: 1.5;
}

.nhac-item-title:hover {
    color: #1a86c4 !important;
}

.nhac-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    text-align: right;
}

.nhac-item-nhacsi,
.nhac-item-casi {
    font-size: 14px;
    font-weight: normal;
    color: #17799c !important;
    text-decoration: none !important;
}

.nhac-item-nhacsi:hover,
.nhac-item-casi:hover {
    text-decoration: underline !important;
}

.nhac-item-views {
    display: inline-block;
    font-size: 13px;
    color: #555;
    background: #fff;
    border: 1px solid #a8dbf5;
    border-radius: 12px;
    padding: 3px 12px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .nhac-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .nhac-item-side {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---- Trang nghe bài hát ---- */
#vntqReaderBox .nentho2 {
    min-height: 200px;
}

#vntqReaderBox .nentho1 {
    margin-top: 10px;
}

.nhac-media-box {
    margin: 18px 0;
}

.nhac-media-box audio {
    outline: none;
}

.vntq-dark-mode #vntqTextContent,
.vntq-dark-mode #vntqTextContent * {
    color: #b3c6d1 !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

.vntq-dark-mode blockquote {
    background: #1e2a30 !important;
    border-color: #3a4f59 !important;
}

.vntq-dark-mode blockquote p {
    color: #cfe3ec !important;
    background-image: none !important;
}

#vntqReaderBox.vntq-dark-mode,
.vntq-dark-mode .nentieude5 {
    background-image: none !important;
}

/* ---- Ten bai hat tren trang nghe: font bay buom (UVNBayBuom_R - khac voi
   UVNBayBuomHep_R ma Trang Tho da dung cho 'ThoTuaFont', de giu rieng biet
   giua 2 khu vuc), mau xanh duong nhat ban trong suot ---- */
@font-face {
    font-family: 'NhacTuaFont';
    src: url('/fonts/UVNBayBuom_R.TTF');
    font-weight: normal;
    font-style: normal;
}

#vntqReaderBox .vntq-reader-title {
    font-family: 'NhacTuaFont', music, "Times New Roman", serif !important;
    font-weight: normal !important;
    color: rgba(23, 121, 156, 0.8) !important;
    text-shadow: none !important;
    letter-spacing: 0.5px;
    margin-top: 20px !important;
    margin-bottom: 18px !important;
}

/* Tang khoang cach voi ten nhac si/ca si o tren */
#vntqReaderBox .vntq-author-top {
    margin-bottom: 6px;
    padding-bottom: 14px;
}

#vntqReaderBox .vntq-author-top a {
    color: #0d5b82 !important;
}

#vntqReaderBox .vntq-stats-container {
    margin-bottom: 20px;
}

/* ---- Khung tieu de (.nentieude5, anh nen nguoi choi guitar 315x221) truoc day qua thap -
   noi dung (ten nhac si/ca si + tua bai + thong ke) chi cao ~120px nen anh nen chi lo ra 1
   dai mong o tren cung. Them khoang dem tren de day noi dung xuong, cho toan bo anh nen
   315x221 hien ra day du truoc khi toi khoi phat nhac. */
#vntqReaderBox .nentieude5 {
    min-height: 280px;
    padding-top: 50px;
    box-sizing: border-box;
}

.chuto50,
.chuto40,
.chuto30,
.chutieude {
    color: #0d5b82 !important;
    font-weight: bold !important;
}

/* ---- Khối "Cùng nhạc sĩ / cùng ca sĩ" cuối trang nghe ---- */
.nhac-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.nhac-related-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(23, 121, 156, 0.25);
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.nhac-related-item:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.nhac-related-title {
    font-size: 16px;
    color: #0d5b82 !important;
    line-height: 1.3;
}

.nhac-related-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nhac-related-views {
    font-size: 12px;
    color: #888;
}

.nhac-related-more {
    text-align: center;
    margin-top: 14px;
}

.nhac-related-more a {
    font-size: 14px;
    font-weight: bold;
    color: #0d5b82 !important;
    text-decoration: none !important;
}

.nhac-related-more a:hover {
    text-decoration: underline !important;
}

.vntq-dark-mode .nhac-related-item {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.vntq-dark-mode .nhac-related-title {
    color: #8fcaea !important;
}

@media (max-width: 480px) {
    .nhac-related-grid {
        grid-template-columns: 1fr;
    }
}