/* ===========================
   Tablet
=========================== */

@media (max-width:900px){

    .sidebar{

        width:90px;

        padding:20px 10px;

    }


    .logo h2{

        font-size:18px;

        text-align:center;

    }


    .logo span{

        display:none;

    }


    .sidebar ul{

        margin-top:30px;

    }


    .sidebar li{

        justify-content:center;

        padding:14px 10px;

        font-size:22px;

    }


    .sidebar li span{

        display:none;

    }


    .navbar{

        padding:0 20px;

    }


    .search-box{

        width:70%;

    }


    .cover{

        width:280px;

        aspect-ratio:1 / 1;

    }


    .info h1{

        font-size:28px;

    }


    .info p{

        font-size:16px;

    }

}


/* ===========================
   Mobile
=========================== */

@media (max-width:650px){


    body{

        overflow:auto;

    }


    .container{

        flex-direction:column;

    }



    /* Sidebar dưới */

    .sidebar{

        order:2;

        width:100%;

        height:75px;

        padding:0;

        display:flex;

        justify-content:center;

        align-items:center;

    }


    .logo{

        display:none;

    }


    .sidebar nav{

        width:100%;

    }


    .sidebar ul{

        display:flex;

        justify-content:space-evenly;

        align-items:center;

        width:100%;

        height:100%;

        margin:0;

        padding:0;

    }


    .sidebar li{

        flex:1;

        justify-content:center;

        padding:0;

        font-size:24px;

    }


    .sidebar li span{

        display:none;

    }



    /* Main */

    .main{

        order:1;

        width:100%;

        padding:20px;

    }



    /* Navbar */

    .navbar{

        height:auto;

        padding:10px 0;

        gap:10px;

    }


    .search-box{

        flex:1;

        width:auto;

    }


    .user span{

        display:none;

    }



    /* Player */

    .player{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-align:center;

        gap:20px;

        padding:20px 0;

    }



    /* Album */

    .cover{

        width:min(70vw,220px);

        aspect-ratio:1 / 1;

    }


    .cover img{

        width:100%;

        height:100%;

        object-fit:cover;

    }



    /* Info */

    .info{

        width:100%;

        text-align:center;

    }


    .info h1{

        margin-top:0;

        font-size:24px;

    }


    .info p{

        font-size:15px;

    }

}



/* ===========================
   Small Mobile
=========================== */

@media (max-width:400px){


    .main{

        padding:15px;

    }


    .cover{

        width:min(75vw,180px);

    }


    .info h1{

        font-size:20px;

    }


    .info p{

        font-size:14px;

    }


    .sidebar li{

        font-size:20px;

    }


    .navbar{

        padding:8px 0;

    }

}
/* ===========================
   Player Controls Responsive
=========================== */


/* Tablet */

@media (max-width:900px){

    .controls{

        gap:15px;

        margin-top:25px;

    }


    .controls button{

        width:55px;

        height:55px;

        font-size:22px;

    }


    #playBtn{

        width:68px;

        height:68px;

        font-size:28px;

    }

}



/* Mobile */

@media (max-width:650px){


    .player{

        flex-direction:column;

        gap:25px;

        justify-content:center;

        align-items:center;

        text-align:center;

    }


    .info{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

    }


    .controls{

        width:100%;

        justify-content:center;

        gap:18px;

        margin-top:25px;

    }


    .controls button{

        width:55px;

        height:55px;

        font-size:22px;

    }


    #playBtn{

        width:70px;

        height:70px;

        font-size:30px;

    }

}



/* Small Mobile */

@media (max-width:400px){


    .controls{

        gap:12px;

        margin-top:20px;

    }


    .controls button{

        width:48px;

        height:48px;

        font-size:20px;

    }


    #playBtn{

        width:62px;

        height:62px;

        font-size:26px;

    }

}
/* ===========================
   Player Responsive
=========================== */


/* Tablet */

@media (max-width:900px){


    .player{

        gap:40px;

    }


    .info{

        width:100%;

        max-width:400px;

    }


    .progress-container{

        max-width:400px;

    }


    #volume{

        width:130px;

    }


}



/* ===========================
   Mobile
=========================== */

@media (max-width:650px){


    .player{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:25px;

        padding:20px;

        text-align:center;

    }



    .cover{

        width:220px;

        aspect-ratio:1 / 1;

        height:auto;

    }



    .info{

        width:100%;

        max-width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

    }



    .info h1{

        font-size:24px;

        margin-top:10px;

    }



    .info p{

        font-size:15px;

    }



    .controls{

        gap:15px;

        margin-top:25px;

    }



    .controls button{

        width:55px;

        height:55px;

        font-size:22px;

    }



    #playBtn{

        width:70px;

        height:70px;

        font-size:30px;

    }



    .progress-container{

        width:100%;

        max-width:350px;

        gap:8px;

        margin-top:20px;

    }



    #progress{

        width:100%;

    }



    .volume-box{

        margin-top:15px;

    }



    #volume{

        width:120px;

    }


}



/* ===========================
   Small Mobile
=========================== */

@media (max-width:400px){


    .cover{

        width:180px;

    }



    .controls{

        gap:10px;

    }



    .controls button{

        width:48px;

        height:48px;

        font-size:20px;

    }



    #playBtn{

        width:60px;

        height:60px;

        font-size:26px;

    }



    .progress-container{

        max-width:280px;

        font-size:12px;

    }



    #volume{

        width:100px;

    }


}