/* =========================================================
   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;
    }
}

/* ---- Nut chon che do Sang/Toi (tren o "Tim Theo Chu De") ---- */
.nhac-theme-switch {
    display: flex;
    gap: 8px;
    margin: 0 10px 10px;
}

.nhac-theme-btn {
    flex: 1;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    transition: all .2s ease;
}

.nhac-theme-btn.nhac-theme-active {
    background: linear-gradient(135deg, #e6f4fa, #d0ecf7);
    border-color: #4fb3d9;
    color: #0d5b82;
    font-weight: bold;
}

/* ---- 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: nowrap;
    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-thumb {
    flex: 0 0 auto;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(13, 91, 130, 0.25);
    box-shadow: 0 1px 4px rgba(13, 91, 130, 0.2);
}

.nhac-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

/* FIX 2026-08-14: theo yeu cau nguoi dung - dua icon (loai bai hat) len chung hang voi
   so sao, nam BEN TRAI so sao (truoc day icon nam o hang duoi, chung voi ten bai hat -
   xem _NhacGrid.cshtml, icon da chuyen vao trong .nhac-item-stars). */
.nhac-item-stars {
    display: flex;
    align-items: center;
    gap: 6px;
}

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

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

.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;
    /* FIX 2026-08-14: xem chu thich chi tiet cung ngay o .tho-item-title (tho-theme.css)
       - cung font "music", cung trieu chung net chu bi "overflow:hidden" cat mat, cung
       fix: tang line-height 1.5 -> 2.6. */
    line-height: 2.6;
    flex: 1 1 0;
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

.nhac-item-nhacsi,
.nhac-item-casi {
    font-size: 14px;
    font-weight: normal;
    color: #17799c !important;
    text-decoration: none !important;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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) {
    /* Gian rong khung sat mep + tieu de/nghe si qua dai TU DONG XUONG DONG thay vi
       cat "..." (yeu cau nguoi dung 2026-08-04: "tên hoặc tác giả quá dài thì tự
       động xuống hàng không tràn khung", "các danh sách trong thơ, nhạc, phim, ẩm
       thực đều có thể giãn rộng ra nếu cho phép"). */
    .nhac-list {
        margin-left: -6px;
        margin-right: -6px;
    }

    .nhac-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 10px;
    }

    .nhac-item-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    .nhac-item-side {
        align-items: flex-start;
        max-width: 100%;
        text-align: left;
    }

    .nhac-item-nhacsi,
    .nhac-item-casi {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        max-width: 100%;
    }
}

/* ---- 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;
}

/* "#content blockquote p" trong base.css (co ID, khong !important) tu dat
   background-color:#f2f2f2 rieng cho the <p> ben trong - phai ghi de voi
   specificity cao hon (them "#content"), khong chi dua vao class. */
.vntq-dark-mode #content blockquote p,
.vntq-dark-mode blockquote p {
    color: #cfe3ec !important;
    background-color: #1e2a30 !important;
    background-image: none !important;
    text-shadow: 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;
}

.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;
    }
}