body.no-scroll-mess {
        overflow: hidden;
    }

    #window-mess {
        background-color: #fff;
        width: 30%;
        height: 550px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
        display: none;
        animation: scale 0.2s ease-in-out;
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    @keyframes scale {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(1);
            opacity: 1;
        }
    }

    #title-bar-mess {
        height: 31px;
        background-color: #d6dae0;
        display: flex;
        justify-content: space-between;
        padding: 5px;
        user-select: none;
        align-items: center; /* Căn giữa theo chiều dọc */
        width: 100%; /* Đảm bảo toàn bộ chiều rộng của title-bar */
    }

    #title-bar-mess > div {
        display: flex;
        align-items: center; /* Căn giữa theo chiều dọc cho cả nhóm phần tử */
        margin-right: 5px;
    }

    #logo-mess {
        height: 18px;
        margin-right: 10px;
    }

    #title-bar-mess span {
        font-size: 14px;
        color: black;
    }

    #file-name-mess {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 300px;
        display: inline-block; /* Cần có display để áp dụng ellipsis */
        align-items: center;  
    }

    #minimize-mess,
    #square-mess,
    #exit-mess {
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px; /* Thêm khoảng cách giữa các icon */
        right: 10px;
    }
  
    .mini-square-exit {
     justify-content: center
    }

    #url-bar-mess {
        height: 28px;
        background-color: #f1f3f4;
        padding: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        border-bottom: 1px solid lightgray;
        display: flex;
        align-items: center;
    }

    #content-mess {
        width: 100%;
        height: 100%;
        border: none;
    }

    .loading-mini {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
        color: #333;
        display: block;
        animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
  
  
    .loading-file-mess {
      position: absolute;
      width: 30px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .circular-file-mess {
      animation: rotate 2s linear infinite;
      height: 100%;
      transform-origin: center;
      width: 100%;
    }

    .path-file-mess {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      animation: dash 1.5s ease-in-out infinite;
      stroke-linecap: round;
      stroke-width: 4;
      stroke: #1E90FF;
    }

    

    .drag-mess {
        position: absolute;
    }

    #minimized-icon {
        display: none;
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        background-color: #d6dae0;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1001;
    }

    #minimized-icon img {
        width: 30px;
        height: 30px;
    }