/* PC */
@media (min-width:1023px) {
    #overlay{
        display: none;
    }
}

/*Tablet*/
@media (min-width:857px) and (max-width:1023px){
    .grid-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Chia thành hai cột bằng nhau */
        gap: 10px;
        padding: 0;
        list-style-type: none;
    }

    

    .container{
        padding: 0px;
    }
    
    .grid-list li {
        box-sizing: border-box; /* Padding và border được tính vào chiều rộng */
        border: none;
        display: flex;
        justify-content: start;
    }

    .grid-list li a {
        padding: 0px;
    }
}

/* Mobile */ 
@media (max-width:857px){
    p,h2,h4,h3{
        padding: 0 10px;
    }

    .grid-list{
        display: none;
    }

    #logo{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    #image_2108603137 img{
        margin-top: 20px;
    }

    .container{
        padding: 0px;
    }

    .fa-solid {
        display: inline-block;
    }

    #logo button{
        display: inline-block;
        left: -250px;
        background-color: transparent;
        border: none;
    }

    #myButton:focus + #content{
        left: 0;
    }

    .custom-button{
        display: none;
    }
    .sec-1{
        flex-direction: column;
        margin-right: auto;
        margin-right: auto;
    }
    .sec-1-col{
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    
    .sec-1-col-2{
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .sec-1-col p {
        padding:0 10px;
    }

    .sec-1-col h1{
        padding:0 10px;
    } 

    .sec-1-col .play{
        margin-left: 10px;
    }

    .col_inner{
        width: 95%;
        padding: 0;
    
    }

    .sec-4{
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .sec-5{
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .img_play, .img_download {
        padding: 50px;
        width: 50%;
    }

    .wp-caption img{
        width: 90%;
        height: autos;
    }


    .sec-7{
        padding: 0px;
        flex-direction: column;
    }

    .column{
        width: 100%;
        padding: 0px;
        align-items: center;
    }

    .box p {
        display: inline-block;
    }

    .box{
        width: 90%;
        margin-top: 170px;
    }

    .sec-2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 50px;
    }

}