/* HT_POS_MUSIC_ANNOUNCEMENT_V1_20260810 */
.ht-pos-audio-dock{position:fixed;right:12px;bottom:84px;z-index:65;display:flex;gap:7px;pointer-events:none}.ht-pos-audio-dock-btn{pointer-events:auto;border:1px solid #e4e7ec;background:#fff;color:#172033;border-radius:13px;box-shadow:0 8px 26px rgba(16,24,40,.16);min-width:72px;height:52px;padding:5px 10px;display:grid;place-items:center;align-content:center;gap:1px;font-weight:900}.ht-pos-audio-dock-btn span{font-size:20px;line-height:1}.ht-pos-audio-dock-btn b{font-size:10px}.ht-pos-audio-dock-btn.announce{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.ht-pos-audio-modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.52);padding:18px;align-items:flex-end;justify-content:center}.ht-pos-audio-modal.open{display:flex}.ht-pos-audio-sheet{width:min(620px,100%);max-height:min(760px,88vh);overflow:auto;background:#fff;border-radius:20px;padding:16px;box-shadow:0 24px 80px rgba(0,0,0,.28)}.ht-pos-audio-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.ht-pos-audio-head strong{font-size:18px}.ht-pos-audio-head small{display:block;color:#c2410c;font-weight:800;margin-top:3px}.ht-pos-audio-head>button{border:0;background:#f2f4f7;border-radius:10px;width:38px;height:38px;font-weight:900}.ht-pos-audio-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.ht-pos-audio-tabs button{border:0;border-radius:10px;padding:10px;background:#f2f4f7;color:#475467;font-weight:900}.ht-pos-audio-tabs button.active{background:#fff7ed;color:#c2410c}.ht-pos-player{border:1px solid #eaecf0;background:#fbfcfe;border-radius:15px;padding:14px}.ht-pos-player-title small{display:block;color:#667085;font-size:11px}.ht-pos-player-title b{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#htPosMusicProgress{width:100%;margin:12px 0}.ht-pos-player-controls{display:flex;justify-content:center;gap:8px}.ht-pos-player-controls button{border:0;width:42px;height:42px;border-radius:12px;background:#eef2f6;font-size:18px}.ht-pos-player-controls button.main{background:#f97316;color:#fff;width:50px}.ht-pos-player-controls button.active{background:#ffedd5;color:#c2410c}.ht-pos-volume{display:flex;align-items:center;gap:8px;margin-top:10px}.ht-pos-volume input{flex:1}.ht-pos-audio-list,.ht-pos-announcement-list{display:grid;gap:7px;margin-top:12px}.ht-pos-track,.ht-pos-announcement{border:1px solid #eaecf0;background:#fff;border-radius:11px;padding:11px 12px;text-align:left;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:6px;color:#172033}.ht-pos-track.active{border-color:#fdba74;background:#fff7ed}.ht-pos-track span,.ht-pos-announcement span{font-size:18px}.ht-pos-track b,.ht-pos-announcement b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ht-pos-announcement small{color:#f97316;font-weight:900}.ht-pos-announcement-tip{padding:10px;border-radius:10px;background:#f8fafc;color:#475467;font-size:12px;line-height:1.4}.ht-pos-stop-announcement{width:100%;margin-top:10px;border:0;border-radius:10px;background:#fff1f0;color:#b42318;padding:10px;font-weight:900}.ht-pos-audio-empty{padding:16px;text-align:center;color:#667085;font-size:12px}.ht-pos-music-toast{position:fixed;left:50%;bottom:150px;z-index:250;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#172033;color:#fff;padding:10px 14px;border-radius:10px;max-width:min(440px,90vw);font-size:12px;font-weight:800;transition:.18s}.ht-pos-music-toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:700px){.ht-pos-audio-dock{right:7px;bottom:74px}.ht-pos-audio-dock-btn{min-width:62px;height:46px;padding:4px 7px}.ht-pos-audio-dock-btn span{font-size:17px}.ht-pos-audio-modal{padding:8px}.ht-pos-audio-sheet{border-radius:16px;padding:12px;max-height:90vh}}@media(orientation:landscape) and (max-height:760px){.ht-pos-audio-dock{bottom:62px}.ht-pos-audio-dock-btn{height:42px}.ht-pos-audio-sheet{max-height:94vh}}

/* HT_POS_MUSIC_INLINE_NAV_RECOVERY_V6_6_48_1_26_3_20260810
   🎵 Nhạc + 🔊 Thông báo là item thật trong #posBottomNav.
   Không tạo hàng riêng, không floating, không sửa pos.css core. */
#posBottomNav.pos-bottom-nav{
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
}

/* Wrapper không chiếm cột; 2 button bên trong tham gia trực tiếp grid của bottom nav. */
#posBottomNav .ht-pos-audio-dock{
    display:contents!important;
    position:static!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
}

/* Khớp giao diện item gốc Bán hàng / Đơn hàng / ... */
#posBottomNav .ht-pos-audio-dock-btn,
#posBottomNav .ht-pos-audio-dock-btn.announce{
    pointer-events:auto!important;
    position:static!important;
    min-width:0!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    padding:6px 4px!important;
    background:#fff!important;
    color:#7a8495!important;
    box-shadow:none!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:4px!important;
    font-size:11px!important;
    font-weight:800!important;
}

#posBottomNav .ht-pos-audio-dock-btn span{
    font-size:21px!important;
    line-height:1!important;
}
#posBottomNav .ht-pos-audio-dock-btn b{
    font-size:10px!important;
    line-height:1.1!important;
}
#posBottomNav .ht-pos-audio-dock-btn:active,
#posBottomNav .ht-pos-audio-dock-btn:focus-visible{
    color:var(--orange,#f97316)!important;
    background:#fff7f2!important;
}

/* Core POS đã tự dành đúng chiều cao cho bottom nav; hủy mọi utility spacing của các thử nghiệm vị trí cũ. */
body:not(.login-page){
    padding-bottom:76px!important;
}
.pos-grid{
    height:calc(100vh - 144px)!important;
}

@media(max-width:700px){
    body:not(.login-page){padding-bottom:68px!important}
    #posBottomNav .ht-pos-audio-dock-btn span{font-size:18px!important}
    #posBottomNav .ht-pos-audio-dock-btn b{font-size:9px!important}
}

@media(orientation:landscape) and (max-height:760px){
    #posBottomNav .ht-pos-audio-dock-btn{
        padding:4px 2px!important;
    }
    #posBottomNav .ht-pos-audio-dock-btn span{font-size:16px!important}
    #posBottomNav .ht-pos-audio-dock-btn b{font-size:8px!important}
}

/* HT_POS_MUSIC_SMALL_SCREEN_MODAL_FIX_V6_6_48_1_26_4_20260810
   Fix POS/APK màn hình nhỏ: popup player luôn nằm trọn viewport và cuộn được.
   Không thay đổi bottom nav / player logic / POS core. */
.ht-pos-audio-modal,
.ht-pos-audio-modal.open{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    z-index:100000!important;
    box-sizing:border-box!important;
}

.ht-pos-audio-modal.open{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:10px!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    background:rgba(15,23,42,.58)!important;
}

.ht-pos-audio-sheet{
    position:relative!important;
    width:min(620px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    min-height:0!important;
    margin:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
}

/* Header luôn nhìn thấy khi cuộn danh sách nhạc dài. */
.ht-pos-audio-head{
    position:sticky!important;
    top:-16px!important;
    z-index:4!important;
    background:#fff!important;
    padding-top:16px!important;
    padding-bottom:8px!important;
}

/* POS tablet/APK landscape thấp: compact player để không bị cắt. */
@media (orientation:landscape) and (max-height:760px){
    .ht-pos-audio-modal.open{
        align-items:flex-start!important;
        padding:6px!important;
    }
    .ht-pos-audio-sheet{
        width:min(680px,calc(100vw - 12px))!important;
        max-width:calc(100vw - 12px)!important;
        max-height:calc(100dvh - 12px)!important;
        padding:10px!important;
        margin:0 auto!important;
        border-radius:12px!important;
    }
    .ht-pos-audio-head{
        top:-10px!important;
        padding-top:10px!important;
        padding-bottom:6px!important;
    }
    .ht-pos-audio-head strong{font-size:15px!important}
    .ht-pos-audio-tabs{margin:8px 0!important}
    .ht-pos-audio-tabs button{padding:7px!important}
    .ht-pos-player{padding:9px!important}
    #htPosMusicProgress{margin:7px 0!important}
    .ht-pos-player-controls{gap:6px!important}
    .ht-pos-player-controls button{
        width:36px!important;
        height:34px!important;
        border-radius:9px!important;
        font-size:15px!important;
    }
    .ht-pos-player-controls button.main{width:42px!important}
    .ht-pos-volume{margin-top:6px!important}
    .ht-pos-audio-list,
    .ht-pos-announcement-list{
        gap:5px!important;
        margin-top:7px!important;
    }
    .ht-pos-track,
    .ht-pos-announcement{
        padding:7px 9px!important;
        border-radius:9px!important;
    }
}

/* Rất thấp (ví dụ WebView hữu dụng chỉ ~500px): chuyển sheet gần full-screen. */
@media (max-height:560px){
    .ht-pos-audio-modal.open{
        align-items:flex-start!important;
        padding:4px!important;
    }
    .ht-pos-audio-sheet{
        width:calc(100vw - 8px)!important;
        max-width:calc(100vw - 8px)!important;
        max-height:calc(100dvh - 8px)!important;
        border-radius:10px!important;
    }
}

/* Portrait/màn hẹp. */
@media (max-width:700px){
    .ht-pos-audio-modal.open{padding:6px!important}
    .ht-pos-audio-sheet{
        width:calc(100vw - 12px)!important;
        max-width:calc(100vw - 12px)!important;
        max-height:calc(100dvh - 12px)!important;
    }
}

/* HT_POS_MUSIC_ALL_SCREEN_MODAL_V6_6_48_1_26_5_20260810 */
.ht-pos-audio-modal{display:none!important}
.ht-pos-audio-modal.open{display:flex!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding:8px!important;z-index:2147483000!important;box-sizing:border-box!important}
.ht-pos-audio-sheet{position:relative!important;width:min(620px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;min-height:0!important;margin:auto!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;box-sizing:border-box!important}
.ht-pos-audio-head{position:sticky!important;top:0!important;z-index:10!important;background:#fff!important;padding-top:4px!important;padding-bottom:6px!important}
@media (max-height:760px),(max-width:700px){.ht-pos-audio-modal.open{align-items:flex-start!important;padding:5px!important}.ht-pos-audio-sheet{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;height:calc(100dvh - 10px)!important;max-height:calc(100dvh - 10px)!important;border-radius:10px!important;padding:9px!important}.ht-pos-audio-tabs{margin:6px 0!important}.ht-pos-audio-tabs button{padding:6px!important}.ht-pos-player{padding:8px!important}#htPosMusicProgress{margin:6px 0!important}.ht-pos-player-controls button{width:34px!important;height:32px!important}.ht-pos-player-controls button.main{width:40px!important}.ht-pos-audio-list,.ht-pos-announcement-list{margin-top:6px!important;gap:4px!important}.ht-pos-track,.ht-pos-announcement{padding:6px 8px!important}}
