/* =====================================================
   THÔNG TIN BÀI HÁT
   ===================================================== */

.song-taxonomy-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;

    margin: 8px 0 16px;
    padding: 8px 0;

    color: #666666;
    font-size: 14px;

    border-bottom: 1px solid #eeeeee;
}

.song-taxonomy-item strong {
    margin-right: 4px;
    color: #333333;
}


/* =====================================================
   THANH ĐIỀU KHIỂN TĂNG / HẠ TÔNG
   Thứ tự:
   b - select - # - Cuộn - A+ - A- - Anh ↔ Em
   ===================================================== */

.song-transpose-bar {
    position: sticky;
    top: 0;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;

    width: 100%;
    margin: 0 0 20px;
    padding: 10px 12px;

    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}


/* Tất cả phần tử con trong thanh không tạo khoảng cách thừa */

.song-transpose-bar > * {
    margin: 0 !important;
}


/* Ẩn phần "Tông hiện tại" */

.song-transpose-bar .song-current-key,
.song-transpose-bar .song-current-key-value {
    display: none !important;
}


/* Nhóm điều khiển tông */

.song-key-controls {
    display: contents;
}


/* Select tông */

.song-key-select {
    width: 86px;
    height: 36px;
    min-height: 36px;

    margin: 0;
    padding: 0 8px;

    color: #222222;
    background: #ffffff;
    border: 1px solid #2271b1;
    border-radius: 4px;

    font-size: 14px;
    text-align: center;
    line-height: 36px;

    box-sizing: border-box;
    cursor: pointer;
}


/* Nút b và # */

.song-transpose-button,
.song-transpose-bar > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 36px;
    min-height: 36px;

    margin: 0;
    padding: 0;

    color: #ffffff;
    background: #2271b1;
    border: 1px solid #2271b1;
    border-radius: 4px;

    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;

    box-sizing: border-box;
    cursor: pointer;
}

.song-transpose-button:hover,
.song-transpose-bar > button:hover {
    background: #135e96;
    border-color: #135e96;
}


/* =====================================================
   NHÓM NÚT ĐỌC BÀI HÁT
   ===================================================== */

.gct-reader-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0;
    padding: 0;
}


/* Nút Cuộn, A+, A-, Anh ↔ Em */

.gct-reader-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 42px;
    height: 36px;
    min-height: 36px;

    margin: 0;
    padding: 0 12px;

    color: #ffffff;
    background: #5b6675;
    border: 1px solid #5b6675;
    border-radius: 4px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    box-sizing: border-box;
    cursor: pointer;
}

.gct-reader-toolbar button:hover {
    background: #424b57;
    border-color: #424b57;
}


/* Nhãn kích thước chữ nếu còn được sử dụng */

.gct-font-size-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 36px;
    min-height: 36px;

    color: #333333;
    background: #ffffff;
    border: 1px solid #d0d5db;
    border-radius: 4px;

    font-size: 13px;
    font-weight: 600;
    text-align: center;

    box-sizing: border-box;
}


/* =====================================================
   NỘI DUNG BÀI HÁT
   ===================================================== */

.gct-reader-content {
    font-size: var(--gct-font-size, 18px);
    line-height: 1.8;
}


/*
 * Không để hợp âm bị tách dòng.
 * Các phần tử này cũng được JavaScript bỏ qua
 * khi đổi Anh ↔ Em.
 */

.gct-reader-content .inserted-chord,
.gct-reader-content .music-chord,
.gct-reader-content a[data-chord],
.gct-reader-content [data-chord] {
    display: inline-block;
    white-space: nowrap;
}


/* =====================================================
   RESPONSIVE MOBILE
   ===================================================== */

@media (max-width: 600px) {
    .song-transpose-bar {
        position: relative;
        top: auto;

        align-items: center;
        justify-content: flex-start;
        gap: 6px;

        padding: 8px;
    }

    .song-transpose-button,
    .song-transpose-bar > button {
        width: 34px;
        height: 34px;
        min-height: 34px;
    }

    .song-key-select {
        width: 76px;
        height: 34px;
        min-height: 34px;
    }

    .gct-reader-toolbar {
        width: 100%;
        gap: 6px;
    }

    .gct-reader-toolbar button {
        height: 34px;
        min-height: 34px;
        padding: 0 9px;

        font-size: 12px;
    }

    .gct-font-size-label {
        height: 34px;
        min-height: 34px;
    }
}