/* ==========================================================================
   1. QUY CHUẨN CHUNG HỆ THỐNG & RESET
   ========================================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x pan-y !important;
}
html, body {
    height: 100%;
    overflow: hidden; 
}
body {
    background: var(--theme-body-bg, #f0f2f5);
    display: flex;
    justify-content: center;
    align-items: center; 
}
#pc-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none;
    background: var(--theme-app-bg, #fff);
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary, #000);
}

/* ==========================================================================
   2. KHUNG CHỨA DI ĐỘNG & LỚP BỌC TỰ CO GIÃN THÔNG MINH
   ========================================================================= */
#mobile-container {
    width: 100%;
    max-width: 414px;
    background: var(--theme-app-bg, #fff);
    padding: 24px 24px 32px 24px; 
    box-sizing: border-box;
    
    /* GIA CỐ SAFARI: Ưu tiên dùng chiều cao 100% của body làm mốc chuẩn trước khi dvh được tính toán */
    height: 100%; 
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh; 
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Lớp bọc đóng vai trò xương sống Flexbox định hình trục dọc từ template */
.player-layout-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* GIA CỐ SAFARI: Chuyển hẳn về flex-start để các phần tử tự xếp chồng đè lên nhau từ trên xuống, 
       ngăn chặn việc space-between tự tính toán khoảng trống sai khi vừa đăng nhập */
    justify-content: flex-start; 
}

/* ==========================================================================
   3. GIAO DIỆN THÀNH PHẦN TRÌNH PHÁT NHẠC
   ========================================================================= */
.top-nav-bar, .song-info-row, .controls-row, .bar-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-nav-bar {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nav-border-bottom, #f0f0f0);
    flex-shrink: 0; /* Ép thanh điều hướng trên không bị bóp méo */
}
.customer-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-secondary, #555555);
}
.logout-box-trigger, .control-icon, .action-btn, .logout-btn {
    display: flex;
    align-items: center;
}
.logout-btn, .control-icon, .action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary, #000);
}
.logout-btn { padding: 4px; }
.package-section { margin-top: 14px; flex-shrink: 0; }
.package-id {
    font-size: 54px;
    font-weight: bold;
    color: var(--text-muted, #b8b8b8);
    line-height: 1;
}
.package-sub {
    font-size: 13px;
    color: var(--text-primary, #000);
    margin-top: 6px;
    font-weight: bold;
}
.action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-action-row, #e3e3e3);
    padding: 4px;
    border-radius: 18px;
    margin-top: 16px;
    border: 1px solid var(--border-action-row, #ccc);
    flex-shrink: 0;
}
.action-btn {
    font-size: 11px;
    font-weight: bold;
    padding: 15px 4px;
    justify-content: center;
    gap: 6px;
    text-align: left;
}
.action-btn:first-child { border-right: 1px solid var(--border-divider, #bbb); }
.btn-subtext { font-weight: normal; font-size: 10px; color: var(--text-secondary, #555); }


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x pan-y !important;
}
html, body {
    height: 100%;
    overflow: hidden; 
}
body {
    background: var(--theme-body-bg, #f0f2f5);
    display: flex;
    justify-content: center;
    align-items: center; 
}
#pc-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none;
    background: var(--theme-app-bg, #fff);
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary, #000);
}

/* ==========================================================================
   2. KHUNG CHỨA DI ĐỘNG & LỚP BỌC TỰ CO GIÃN THÔNG MINH
   ========================================================================= */
#mobile-container {
    width: 100%;
    max-width: 414px;
    background: var(--theme-app-bg, #fff);
    padding: 24px 24px 32px 24px; 
    box-sizing: border-box;
    
    /* GIA CỐ SAFARI: Ưu tiên dùng chiều cao 100% của body làm mốc chuẩn trước khi dvh được tính toán */
    height: 100%; 
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh; 
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Lớp bọc đóng vai trò xương sống Flexbox định hình trục dọc từ template */
.player-layout-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* TỐI ƯU: Đổi sang space-between để phân bổ đều các nhóm nội dung lớn,
       kết hợp cùng việc gỡ margin-top: auto ở nhóm chân đế để triệt tiêu khoảng trống hoác */
    justify-content: space-between; 
}

/* ==========================================================================
   3. GIAO DIỆN THÀNH PHẦN TRÌNH PHÁT NHẠC
   ========================================================================= */
.top-nav-bar, .song-info-row, .controls-row, .bar-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-nav-bar {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nav-border-bottom, #f0f0f0);
    flex-shrink: 0; /* Ép thanh điều hướng trên không bị bóp méo */
}
.customer-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-secondary, #555555);
}
.logout-box-trigger, .control-icon, .action-btn, .logout-btn {
    display: flex;
    align-items: center;
}
.logout-btn, .control-icon, .action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary, #000);
}
.logout-btn { padding: 4px; }
.package-section { margin-top: 14px; flex-shrink: 0; }
.package-id {
    font-size: 54px;
    font-weight: bold;
    color: var(--text-muted, #b8b8b8);
    line-height: 1;
}
.package-sub {
    font-size: 13px;
    color: var(--text-primary, #000);
    margin-top: 6px;
    font-weight: bold;
}
.action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-action-row, #e3e3e3);
    padding: 4px;
    border-radius: 18px;
    margin-top: 16px;
    border: 1px solid var(--border-action-row, #ccc);
    flex-shrink: 0;
}
.action-btn {
    font-size: 11px;
    font-weight: bold;
    padding: 15px 4px;
    justify-content: center;
    gap: 6px;
    text-align: left;
}
.action-btn:first-child { border-right: 1px solid var(--border-divider, #bbb); }
.btn-subtext { font-weight: normal; font-size: 10px; color: var(--text-secondary, #555); }



/* CỤM PHÁT NHẠC CHÂN ĐẾ: ĐƯỢC ƯU TIÊN SỐ 1 */
.music-player-group { 
    display: flex; 
    flex-direction: column; 
    width: 100%;
    
    /* TỐI ƯU: Loại bỏ `margin-top: auto` (vì thuộc tính này đẩy cụm xuống kịch đáy trên màn hình dài 
       gây ra khoảng hở lớn). Sử dụng margin cố định để kiểm soát khoảng cách với ảnh album phía trên */
    margin-top: 0; 
    
    /* KHÓA CHẾT KÍCH THƯỚC: Ra lệnh cho Safari bảo vệ cụm chữ + nút bấm, cấm co bóp hay đẩy tràn */
    flex-shrink: 0; 
}
.song-info-row { margin-bottom: 12px; }
.song-title { font-size: 18px; font-weight: 600; color: var(--text-primary, #000); text-transform: uppercase; letter-spacing: 0.5px; }
.song-artist { font-size: 11px; color: var(--text-secondary, #666666); margin-top: 5px; }
.song-icons { display: flex; gap: 14px; align-items: center; color: var(--text-primary, #000); }
.progress-bar { width: 100%; height: 4px; background: var(--progress-bg, #e0e0e0); border-radius: 2px; position: relative; }
.progress-current { width: 35%; height: 100%; background: var(--progress-current, #000); border-radius: 2px; }
.progress-dot { position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: var(--progress-current, #000); border-radius: 50%; }
.time-stamps { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-timestamp, #888); margin-top: 6px; margin-bottom: 16px; font-weight: bold; }
.controls-row { padding: 0 4px; }
.control-icon { justify-content: center; }

/* ==========================================================================
   4. GIAO DIỆN FORM ĐĂNG NHẬP / ĐĂNG KÝ
   ========================================================================= */
.login-screen, .register-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8px;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease-in-out;
}
.login-header, .register-header { margin-bottom: 32px; text-align: left; }
.login-header h1, .register-header h1 { font-size: 28px; font-weight: bold; color: var(--text-primary, #1a1a1a); margin-bottom: 8px; }
.login-header p, .register-header p { font-size: 14px; color: var(--text-secondary, #757575); }
.login-screen form, .register-screen form { display: flex; flex-direction: column; gap: 14px; }
.login-screen input, .register-screen input {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border-action-row, #e9ecef);
    background-color: var(--bg-action-row, #f8f9fa);
    border-radius: 14px;
    font-size: 16px !important; 
    color: var(--text-primary, #1a1a1a);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.login-screen input:focus, .register-screen input:focus { border-color: var(--text-primary, #1a1a1a); background-color: #ffffff; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); }
.login-screen button, .register-screen button { width: 100%; padding: 16px; background-color: var(--text-primary, #1a1a1a); color: #ffffff; border: none; border-radius: 14px; font-size: 15px; font-weight: bold; cursor: pointer; margin-top: 8px; transition: opacity 0.15s; }
.login-screen button:active, .register-screen button:active { opacity: 0.8; }
.toggle-account-box { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-secondary, #757575); }
.toggle-account-box span { color: var(--text-primary, #1a1a1a); font-weight: bold; cursor: pointer; margin-left: 4px; }
.toggle-account-box span:hover { text-decoration: underline; }
#errorMsg, #regErrorMsg, #regSuccessMsg { font-size: 13px; font-weight: 500; margin: 2px 0 6px 0; padding: 0 4px; text-align: left; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    #mobile-container { border-radius: 0; }
}

/* ==========================================================================
   5. KHỐI TRỐNG DÙNG CHUNG BARDETAIL BẢO ĐẢM KHÔNG XUNG ĐỘT
   ========================================================================= */
.bar-detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end; 
  z-index: 1000;
  border-radius: inherit; 
}
.bar-detail-container {
  width: 100%;
  max-height: 50vh; 
  background-color: #ffffff; 
  border-radius: 24px 24px 0 0; 
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  animation: slideUpBar 0.25s ease-out;
}
.bar-detail-header { padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.bar-detail-header h3 { margin: 0; font-size: 16px; color: #333; }
.btn-close-bar { background: none; border: none; font-size: 18px; cursor: pointer; color: #999; }
.bar-detail-content { flex: 1; overflow-y: auto; padding-top: 15px; }

@keyframes slideUpBar {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}