@media (min-width: 1366px){
    html>body{
        background: rgb(29, 29, 29);
    }
    
    button.button-click{
        transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu mượt */
    }
    button.button-click:active{
        animation: lightUp 0.5s ease;
    }
    @keyframes lightUp {
        0% {
            background-color: rgb(178, 119226, 223); /* Sáng lên */
        }
        100% {
            background-color: rgb(67, 126, 255); /* Trở lại màu ban đầu */
        }
    }
    html>body>div.top-panel{
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    html>body>div.top-panel>button#home{
        background: none;
        border-style: none;
        display: flex;
        align-items: center;
    }
    html>body>div.top-panel>button#home>img{
        height: 32px;
        width: 32px;
    }
    html>body>div.top-panel>button#home>span{
        font-size: 25px;
        color: rgb(255, 255, 255);
        padding-left: 5px;
    }
    html>body>div.top-panel>div.search{
        display: flex;
    }
    html>body>div.top-panel>div.search>span{
        border-radius: 40px 0px 0px 40px;
        background: rgb(0, 0, 0);
        display: flex;
        align-items: center;
        padding: 0px 20px 0px 20px;
        color: rgb(200, 200, 200);
    }
    html>body>div.top-panel>div.search>input{
        width: 400px;
        height: 30px;
        border-radius: 0px 0px 0px 0px;
        background: rgb(0, 0, 0);
        display: flex;
        align-items: center;
        padding: 0px 20px 0px 20px;
        color: rgb(200, 200, 200);
        border-style: none;
    }
    html>body>div.top-panel>div.search>button{
        border-radius: 0px 40px 40px 0px;
        background: rgb(189, 183, 183, 0.1);
        display: flex;
        align-items: center;
        padding: 0px 20px 0px 20px;
        height: 100%;
        border-style: none;
    }
    html>body>div.top-panel>div.search>button>img{
        width: 35px;
        height: 30px;
    }
    html>body>div.top-panel>button#upload{
        border-style: none;
        background: none;
        padding: 0px 16px 0px 16px;
    }
    html>body>div.top-panel>button#upload>img{
        height: 30px;
        width: 30px;
    }
    html>body>div.top-panel>button#login, button#logout{
        font-size: 25px;
        background: rgb(67, 126, 255);
        color: rgb(255, 255, 255);
        border-radius: 40px;
        padding: 0px 16px 0px 16px;
        border-style: none;
        position: relative;
        right: 0px;
    }
    html>body>div.bottom-panel{
        width: 100%;
        height: calc(100% - 50px - 20px);
        margin-top: 20px;
        display: flex;
    }
    html>body>div.bottom-panel>div.left-panel{
        height: 100%;
        width: calc(100% - 205px);
        padding: 0px 5px 0px 0px;
    }
    html>body>div.bottom-panel>div.left-panel>video#play-video{
        width: 100%;
        height: 500px;
        border-radius: 20px;
    }
    html>body>div.bottom-panel>div.left-panel>div#video-name{
        display: flex;
        align-items: center;
        min-height: 50px;
        margin-top: 5px;
        position: relative;
    }
    html>body>div.bottom-panel>div.left-panel>div#video-name>div#name{
        padding: 0px 10px 0px 10px;
        color: rgb(255, 255, 255);
        font-size: 25px;
        max-width: calc(100% - 120px);
        white-space: nowrap; /* Văn bản không xuống dòng */
        overflow: hidden; /* Ẩn phần văn bản tràn ra */
        text-overflow: ellipsis; /* Hiển thị "..." khi văn bản bị cắt */
    }
    html>body>div.bottom-panel>div.left-panel>div#video-name>button#video-name-edit-apply{
        background: rgb(55, 108, 252);
        border-style: none;
        padding: 0px 5px 0px 5px;
        color: rgb(255, 255, 255);
        border-radius: 20px;
        font-size: 18px;
        height: 25px;
        width: 100px;
        margin-left: 10px;
    
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button{
        position: relative;
        margin-top: 5px;
        display: flex;
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button>button{
        padding: 0px;
        background: rgba(114, 114, 114, 0.5);
        border-style: none;
        border-radius: 20px;
        padding: 0px 5px 0px 5px;
        display: flex;
        margin: 0px 0px 0px 5px;
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button>button>svg{
        fill: rgb(255, 255, 255);
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button>button>span{
        color: rgb(255, 255, 255);
        font-size: 20px;
        padding: 0px 0px 0px 5px;
    
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group{
        padding: 10px 5px 0px 5px;
        display: flex;
        background: rgba(160, 160, 160, 0.2);
        border-radius: 10px;
        margin-top: 10px;
        overflow-x:scroll;
        overflow-y: hidden;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group::-webkit-scrollbar {
        height: 10px; /* Độ cao của thanh cuộn ngang */
        background: none; /* Màu nền thanh cuộn */
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group::-webkit-scrollbar-thumb {
        background-color: #888; /* Màu của đường trượt */
        border-radius: 5px; /* Bo tròn góc */
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div.video-sub{
        display: flex;
        background: none;
        border-radius: 5px;
        padding: 0px 5px 0px 5px;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div.video-sub>video#video{
        
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div.video-sub>button{
        background: none;
        width: 20px;
        padding: 0px;
        border-style: none;
        position: relative;
        margin-left: -20px;
        height: 30px;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div.video-sub>video#video{
        height: 100px;
        width: 200px;
        border-radius: 10px;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div#add-group{
        background: rgb(151, 151, 151);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        width: 200px;
        padding: 0px 5px 0px 5px;
        border-radius: 10px;
    }
    html>body>div.bottom-panel>div.right-panel{
        background: none;
        width: 195px;
        height: calc(100%);;
        padding: 0px 0px 0px 5px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    html>body>div.bottom-panel>div.right-panel>button.back{
        background: rgb(79, 79, 79);
        border-style: none;
        width: 100%;
    }
    html>body>div.bottom-panel>div.right-panel::-webkit-scrollbar{
        background: rgb(34, 34, 34);
        width: 10px;
    }
    html>body>div.bottom-panel>div.right-panel::-webkit-scrollbar-thumb{
        background: rgb(112, 112, 112);
        border-radius: 15px;
    
    }
    html>body>div.bottom-panel>div.right-panel>div#video-sub{
        display: grid;
        background: rgb(14, 13, 13);
        border-radius: 10px;
        margin: 5px 0px 5px 0px;
    }
    html>body>div.bottom-panel>div.right-panel>div#theme{
        display: grid;
        background: rgb(37, 184, 0);
        border-radius: 10px;
        margin: 5px 0px 5px 0px;
        padding: 10px 5px 10px 5px;
        height: max-content;
        white-space: nowrap; /* Văn bản không xuống dòng */
        overflow: hidden; /* Ẩn phần văn bản tràn ra */
        text-overflow: ellipsis; /* Hiển thị "..." khi văn bản bị cắt */
    }
    html>body>div.bottom-panel>div.right-panel>div#video-sub>video{
        height: 150px;
        width: 100%;
        margin: 0px 2.5px 0px -2.5px;
        padding: 2.5px 0px 2.5px 0px;
        border-radius: 15px;
    }
    html>body>div.bottom-panel>div.right-panel>div#video-sub>span#video-name{
        font-size: 18px;
        color: rgb(255, 255, 255);
        position: relative;
        margin-top: -150px;
        white-space: nowrap; /* Văn bản không xuống dòng */
        overflow: hidden; /* Ẩn phần văn bản tràn ra */
        text-overflow: ellipsis; /* Hiển thị "..." khi văn bản bị cắt */
        height: max-content;
    }
    
    html>body>div.add-video-to-group{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background: rgb(0, 0, 0);
        padding: 5px 5px 5px 5px;
        height: calc(100% - 200px);
        width: calc(100% - 100px);
        display: grid;
        display: none;
    }
    html>body>div.add-video-to-group>div.top{
        display: flex;
        flex: 0;
        height: max-content;
    }
    html>body>div.add-video-to-group>div.top>span.name{
        font-size: 25px;
        width: max-content;
        color: rgb(255, 255, 255);
    }
    html>body>div.add-video-to-group>div.top>span.value{
        font-size: 25px;
        color: rgb(9, 255, 0);
        width: max-content;
    }
    
    html>body>div.add-video-to-group>div.bottom{
        display: grid;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub{
        display: flex;
        align-items: center;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>img{
        width: 200px;
        height: 150px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>span.name{
        width: max-content;
        white-space: nowrap;
        margin: 0px 5px 0px 0px;
        color: rgb(255, 255, 255);
        font-size: 22px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>span#video-name, select#group-current{
        font-size: 22px;
        color: rgb(222, 34, 255);
        margin: 0px 5px 0px 0px;
        max-width: 250px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>span#video-name, select#video-name{
        max-width: 300px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>button#remove, button#apply{
        width: max-content;
        height: max-content;
        font-size: 22px;
    }
    html>body>div.add-video-to-group>span.change-status{
        margin: auto;
        flex: 0;
    }
    
    html>body>div.add-video-to-group>div.video-sub-button{
        margin: auto;
        flex: 0;
    }
    
    html>body>div.upload-video{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: calc(100% - 200px);
        height: calc(100% - 200px);
        background: rgb(15, 15, 15);
        color: rgb(255, 255, 255);
        padding: 5px;
    }
    html>body>div.upload-video>span.title{
        width: 100%;
        justify-content: center;
        display: grid;
        font-size: 25px;
        flex: 0;
        height: max-content;
    }
    html>body>div.upload-video>div.body{
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }
    html>body>div.upload-video>div.body>div.video-sub{
        display: grid;
        align-items: center;
        margin: 0px 0px 5px 0px;
        background: rgb(37, 37, 37);
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list{

    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n{
        display: flex;
        align-items: center;
    }
    html>body>div.upload-video>div.body>div.video-sub>input.file{
        display: none;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>label{
        margin-left: 5px;
        background: rgb(255, 255, 255);
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>button,span{
        margin: 0px 5px 0px 5px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>input.video-name{
        border-style: solid;
        border-width: 1px;
        border-color: rgb(0, 255, 0);
        font-size: 20px;
        width: 200px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>select{
        width: 150px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>input:focus{
        outline: 1px solid rgb(0, 255, 0);
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>div.ProgressA{
        height: 10px;
        width: 150px;
        background: rgb(0, 0, 0);
        border-style: solid;
        border-width: 1px;
        border-color: rgb(75, 75, 75);
        margin: 0px 5px 0px 5px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>div.ProgressA>div.ProgressB{
        width: 0%;
        height: 100%;
        background: rgb(255, 255, 255);
    }
    
    /* hộp thoại nhận data */
    html>body>div.input-data-box{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background: rgb(15, 15, 15);
        color: rgb(255, 255, 255);
        padding: 5px;
        box-shadow: rgb(255, 0, 0) 0px 0px 1px 1px;
        display: grid;
        justify-content: center;
    }
    html>body>div.input-data-box>span{
        font-size: 25px;
        text-align: center;
        color: rgb(178, 101, 250);
    }
    html>body>div.input-data-box>input{
        width: 100%;
        font-size: 18px;
    }
    html>body>div.input-data-box>div.button_action{
        justify-content: center;
        display: flex;
    }
    html>body>div.input-data-box>div.button_action>button{
        margin: 5px;
    }
}
@media (max-width: 1366px){
    html>body{
        background: rgb(29, 29, 29);
    }
    
    button.button-click{
        transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu mượt */
    }
    button.button-click:active{
        animation: lightUp 0.5s ease;
    }
    @keyframes lightUp {
        0% {
            background-color: rgb(178, 119226, 223); /* Sáng lên */
        }
        100% {
            background-color: rgb(67, 126, 255); /* Trở lại màu ban đầu */
        }
    }
    html>body>div.top-panel{
        height: 100px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    html>body>div.top-panel>button#home{
        background: none;
        border-style: none;
        display: flex;
        align-items: center;
    }
    html>body>div.top-panel>button#home>img{
        height: 64px;
        width: 64px;
    }
    html>body>div.top-panel>button#home>span{
        font-size: 25px;
        color: rgb(255, 255, 255);
        padding-left: 5px;
    }
    html>body>div.top-panel>div.search{
        display: flex;
        height: 50px;
        
    }
    html>body>div.top-panel>div.search>span{
        border-radius: 40px 0px 0px 40px;
        background: rgb(0, 0, 0);
        display: flex;
        align-items: center;
        padding: 0px 20px 0px 20px;
        height: 100%;
        color: rgb(200, 200, 200);
    }
    html>body>div.top-panel>div.search>input{
        width: 400px;
        height: 30px;
        border-radius: 0px 0px 0px 0px;
        background: rgb(0, 0, 0);
        display: flex;
        align-items: center;
        padding: 0px 20px 0px 20px;
        height: 100%;
        color: rgb(200, 200, 200);
        border-style: none;
    }
    html>body>div.top-panel>div.search>button{
        border-radius: 0px 40px 40px 0px;
        background: rgb(189, 183, 183, 0.1);
        display: flex;
        align-items: center;
        padding: 0px 20px 0px 20px;
        height: 100%;
        border-style: none;
    }
    html>body>div.top-panel>div.search>button>img{
        width: 35px;
        height: 30px;
    }
    html>body>div.top-panel>button#upload{
        border-style: none;
        background: none;
        padding: 0px 16px 0px 16px;
    }
    html>body>div.top-panel>button#upload>img{
        height: 64px;
        width: 64px;
    }
    html>body>div.top-panel>button#login, button#logout{
        font-size: 32px;
        background: rgb(67, 126, 255);
        color: rgb(255, 255, 255);
        border-radius: 40px;
        padding: 0px 16px 0px 16px;
        border-style: none;
        position: relative;
        right: 0px;
    }
    html>body>div.bottom-panel{
        width: 100%;
        height: calc(100% - 100px - 20px);
        margin-top: 20px;
    }
    html>body>div.bottom-panel>div.left-panel{
        height: max-content;
        padding: 0px 5px 0px 0px;
    }
    html>body>div.bottom-panel>div.left-panel>video#play-video{
        width: 100%;
        height: 500px;
        border-radius: 20px;
    }
    html>body>div.bottom-panel>div.left-panel>div#video-name{
        display: flex;
        align-items: center;
        min-height: 50px;
        margin-top: 5px;
        position: relative;
    }
    html>body>div.bottom-panel>div.left-panel>div#video-name>div#name{
        padding: 0px 10px 0px 10px;
        color: rgb(255, 255, 255);
        font-size: 25px;
        max-width: calc(100% - 120px);
        white-space: nowrap; /* Văn bản không xuống dòng */
        overflow: hidden; /* Ẩn phần văn bản tràn ra */
        text-overflow: ellipsis; /* Hiển thị "..." khi văn bản bị cắt */
    }
    html>body>div.bottom-panel>div.left-panel>div#video-name>button#video-name-edit-apply{
        background: rgb(55, 108, 252);
        border-style: none;
        padding: 0px 5px 0px 5px;
        color: rgb(255, 255, 255);
        border-radius: 20px;
        font-size: 18px;
        height: 25px;
        width: 100px;
        margin-left: 10px;
    
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button{
        position: relative;
        margin-top: 5px;
        display: flex;
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button>button{
        padding: 0px;
        background: rgba(114, 114, 114, 0.5);
        border-style: none;
        border-radius: 20px;
        padding: 0px 5px 0px 5px;
        display: flex;
        margin: 0px 0px 0px 5px;
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button>button>svg{
        fill: rgb(255, 255, 255);
    }
    html>body>div.bottom-panel>div.left-panel>div#action-button>button>span{
        color: rgb(255, 255, 255);
        font-size: 20px;
        padding: 0px 0px 0px 5px;
    
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group{
        padding: 10px 5px 0px 5px;
        display: flex;
        background: rgba(160, 160, 160, 0.2);
        border-radius: 10px;
        margin-top: 10px;
        overflow-x:scroll;
        overflow-y: hidden;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group::-webkit-scrollbar {
        height: 10px; /* Độ cao của thanh cuộn ngang */
        background: none; /* Màu nền thanh cuộn */
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group::-webkit-scrollbar-thumb {
        background-color: #888; /* Màu của đường trượt */
        border-radius: 5px; /* Bo tròn góc */
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div.video-sub{
        display: flex;
        background: none;
        border-radius: 5px;
        padding: 0px 5px 0px 5px;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div.video-sub>button{
        background: none;
        width: 20px;
        padding: 0px;
        border-style: none;
        position: relative;
        margin-left: -20px;
        height: 30px;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div.video-sub>video#video{
        height: 200px;
        width: 200px;
        border-radius: 10px;
    }
    html>body>div.bottom-panel>div.left-panel>div.video-group>div#add-group{
        background: rgb(151, 151, 151);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        width: 200px;
        padding: 0px 5px 0px 5px;
        border-radius: 10px;
    }
    html>body>div.bottom-panel>div.right-panel{
        background: none;
        width: 100%;
        padding: 0px 0px 0px 5px;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    html>body>div.bottom-panel>div.right-panel>button.back{
        background: rgb(79, 79, 79);
        border-style: none;
        width: 100%;
    }
    html>body>div.bottom-panel>div.right-panel::-webkit-scrollbar{
        background: rgb(34, 34, 34);
        width: 10px;
    }
    html>body>div.bottom-panel>div.right-panel::-webkit-scrollbar-thumb{
        background: rgb(112, 112, 112);
        border-radius: 15px;
    
    }
    html>body>div.bottom-panel>div.right-panel>div#video-sub{
        display: flex;
        background: rgb(14, 13, 13);
        border-radius: 10px;
        margin: 5px 0px 5px 0px;
    }
    html>body>div.bottom-panel>div.right-panel>div#theme{
        display: grid;
        background: rgb(37, 184, 0);
        border-radius: 10px;
        margin: 5px 0px 5px 0px;
        padding: 10px 5px 10px 5px;
        height: 50px;
        font-size: 25px;
        white-space: nowrap; /* Văn bản không xuống dòng */
        overflow: hidden; /* Ẩn phần văn bản tràn ra */
        text-overflow: ellipsis; /* Hiển thị "..." khi văn bản bị cắt */
        align-items: center;
    }
    html>body>div.bottom-panel>div.right-panel>div#video-sub>video{
        height: 150px;
        width: max-content;
        margin: 0px 2.5px 0px -2.5px;
        padding: 2.5px 0px 2.5px 0px;
        border-radius: 15px;
    }
    html>body>div.bottom-panel>div.right-panel>div#video-sub>span#video-name{
        font-size: 18px;
        color: rgb(255, 255, 255);
        position: relative;
        white-space: nowrap; /* Văn bản không xuống dòng */
        overflow: hidden; /* Ẩn phần văn bản tràn ra */
        text-overflow: ellipsis; /* Hiển thị "..." khi văn bản bị cắt */
        height: max-content;
    }
    
    html>body>div.add-video-to-group{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background: rgb(0, 0, 0);
        padding: 5px 5px 5px 5px;
        height: calc(100% - 200px);
        width: calc(100% - 100px);
        display: grid;
        display: none;
    }
    html>body>div.add-video-to-group>div.top{
        display: flex;
        flex: 0;
        height: max-content;
    }
    html>body>div.add-video-to-group>div.top>span.name{
        font-size: 25px;
        width: max-content;
        color: rgb(255, 255, 255);
    }
    html>body>div.add-video-to-group>div.top>span.value{
        font-size: 25px;
        color: rgb(9, 255, 0);
        width: max-content;
    }
    
    html>body>div.add-video-to-group>div.bottom{
        display: grid;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub{
        display: flex;
        align-items: center;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>img{
        width: 200px;
        height: 150px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>span.name{
        width: max-content;
        white-space: nowrap;
        margin: 0px 5px 0px 0px;
        color: rgb(255, 255, 255);
        font-size: 22px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>span#video-name, select#group-current{
        font-size: 22px;
        color: rgb(222, 34, 255);
        margin: 0px 5px 0px 0px;
        max-width: 250px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>span#video-name, select#video-name{
        max-width: 300px;
    }
    html>body>div.add-video-to-group>div.bottom>div.video-sub>button#remove, button#apply{
        width: max-content;
        height: max-content;
        font-size: 22px;
    }
    html>body>div.add-video-to-group>span.change-status{
        margin: auto;
        flex: 0;
    }
    
    html>body>div.add-video-to-group>div.video-sub-button{
        margin: auto;
        flex: 0;
    }
    
    html>body>div.upload-video{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: calc(100% - 200px);
        height: calc(100% - 200px);
        background: rgb(15, 15, 15);
        color: rgb(255, 255, 255);
        padding: 5px;
    }
    html>body>div.upload-video>span.title{
        width: 100%;
        justify-content: center;
        display: grid;
        font-size: 50px;
        flex: 0;
        height: max-content;
    }
    html>body>div.upload-video>div.body{
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }
    html>body>div.upload-video>div.body>div.video-sub{
        display: grid;
        align-items: center;
        margin: 5px;
        box-shadow: rgb(255, 0, 0) 0px 0px 1px 1px;
        background: rgb(37, 37, 37);
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list{

    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n{
        display: grid;
    }
    html>body>div.upload-video>div.body>div.video-sub>input.file{
        display: none;
    }
    html>body>div.upload-video>div.body>div.video-sub>label{
        margin-left: 5px;
        background: rgb(255, 255, 255);
        width: max-content;

    }
    html>body>div.upload-video>div.body>div.video-sub>label>img{
        width: 64px;
        height: 64px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>button,span{
        margin: 0px 5px 0px 5px;
        font-size: 32px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>input.video-name{
        border-style: solid;
        border-width: 1px;
        border-color: rgb(0, 255, 0);
        font-size: 32px;
        width: 100%;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>select{
        width: 500px;
        font-size: 32px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>input:focus{
        outline: 1px solid rgb(0, 255, 0);
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>div.ProgressA{
        height: 30px;
        width: calc(100% - 10px);
        background: rgb(0, 0, 0);
        border-style: solid;
        border-width: 1px;
        border-color: rgb(75, 75, 75);
        margin: 0px 5px 0px 5px;
    }
    html>body>div.upload-video>div.body>div.video-sub>div.video-list>div.video-sub-n>div.ProgressA>div.ProgressB{
        width: 0%;
        height: 100%;
        background: rgb(255, 255, 255);
    }
    html>body>div.upload-video>button#clean-video{
        font-size: 50px;
    }
    html>body>div.upload-video>div.button-action>button#add-video{
        font-size: 50px;
    }
    
    /* hộp thoại nhận data */
    html>body>div.input-data-box{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background: rgb(15, 15, 15);
        color: rgb(255, 255, 255);
        padding: 5px;
        box-shadow: rgb(255, 0, 0) 0px 0px 1px 1px;
        display: grid;
        justify-content: center;
    }
    html>body>div.input-data-box>span{
        font-size: 32px;
        text-align: center;
        color: rgb(178, 101, 250);
    }
    html>body>div.input-data-box>input{
        width: 100%;
        font-size: 50px;
    }
    html>body>div.input-data-box>div.button_action{
        justify-content: center;
        display: flex;
    }
    html>body>div.input-data-box>div.button_action>button{
        margin: 5px;
        font-size: 50px;
    }
}