/* MOBILE RESPONSIVE FIXES FROM PHASE 2 */
@media screen and (max-width: 768px) {
  
  /* =========================================
     1. HEADER FIXES
     ========================================= */
  .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 12px 8px !important;
  }
  .header-actions {
    display: contents !important; /* Trải phẳng các nút ra để flexbox quản lý */
  }
  
  /* Row 1: Logo (trái), Notifications (phải), Theme (phải) */
  .logo-brand {
    order: 1 !important;
    flex: 1 1 50% !important; /* Đẩy các nút khác sang phải */
    justify-content: flex-start !important;
    padding: 0 !important;
  }
  #btnNotifications {
    order: 2 !important;
  }
  #btnThemeToggle {
    order: 3 !important;
  }
  
  /* Row 2: Login & VIP */
  #btnHeaderLogin, #btnUserProfile {
    order: 4 !important;
    flex: 1 1 45% !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  #btnActivateVIP {
    order: 5 !important;
    flex: 1 1 45% !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  
  /* Row 3: Search Bar */
  .search-container {
    order: 6 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 10px !important; /* Thu hẹp 2 bên một chút */
    margin-top: 4px !important;
  }
  .search-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  
  /* Phóng to Logo web trên điện thoại thêm 20% */
  .logo-brand {
    font-size: 19px !important;
  }
  .logo-brand img {
    width: 41px !important;
    height: 41px !important;
  }
  #userNameDisplay {
    display: none !important;
  }
  #userAvatar {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* =========================================
     2. STORY INFO & SIDEBAR FIXES
     ========================================= */
  .info-table {
    grid-template-columns: 80px 1fr !important;
    font-size: 13px !important;
  }
  .detail-tabs-row {
    justify-content: flex-start !important;
    padding: 0 10px !important;
  }
  .detail-cover-box {
    margin: 0 auto !important;
    width: 90% !important; 
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 1 / 1.35 !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
  }
  .detail-cover-box img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
  .info-value {
    word-break: break-word;
  }

  /* =========================================
     3. READER FIXES
     ========================================= */
  #readerBodyText {
    font-size: 18px !important;
    line-height: 1.85 !important;
    padding: 0 16px !important;
  }
  .reader-content {
    padding: 0 4px !important;
  }
  #ttsPlayerBar { padding: 10px 10px !important; gap: 5px !important; }
  #ttsRateSelect, #ttsPitchSelect { font-size: 11px !important; padding: 3px 4px !important; max-width: 70px; }
  .reader-nav-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .reader-chapter-select {
    max-width: 100% !important;
    font-size: 13px !important;
  }

  /* Reader Toolbar Layout Fixes - Gọn gàng và hợp lý */
  .reader-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
  }
  .reader-nav-strip {
    display: contents !important; /* Trải phẳng để grid của toolbar quản lý */
  }
  .reader-toolbar > div[style*="visibility: hidden"] { 
    display: none !important; /* Ẩn cái div tàng hình đi */
  }
  
  /* Hàng 1: Nút Quay Lại (trái), Chọn Chương (giữa kéo dài), Âm Thanh (phải) */
  #btnReaderBack { 
    grid-column: 1 / 2; 
    grid-row: 1; 
    justify-self: start; 
  }
  #selectReaderChapter { 
    grid-column: 2 / 4; 
    grid-row: 1; 
    width: 100% !important; 
    margin: 0 !important; 
  }
  #readerAudioBtn { 
    grid-column: 4 / 5; 
    grid-row: 1; 
    justify-self: end; 
  }
  
  /* Hàng 2: Trái, Cài Đặt, Info, Phải (Chia đều 4 cột) */
  #btnPrevChapter { 
    grid-column: 1 / 2; 
    grid-row: 2; 
    width: 100% !important; 
  }
  #btnFontDecrease { 
    grid-column: 2 / 3; 
    grid-row: 2; 
    width: 100% !important; 
  }
  #btnStoryInfoNav { 
    grid-column: 3 / 4; 
    grid-row: 2; 
    width: 100% !important; 
  }
  #btnNextChapter { 
    grid-column: 4 / 5; 
    grid-row: 2; 
    width: 100% !important; 
  }
}