.duu-post-more{
    position: relative;
    margin-left: auto;
    padding-right: 0;
    transform: translateX(6px);
    z-index: 9;
}

.duu-more-btn{
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
    outline: none;
}

.duu-more-btn:active{
    background: #f2f2f2;
}

.duu-more-menu{
    display: none;
    position: absolute;
    right: 4px;
    top: 32px;
    min-width: 118px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    overflow: hidden;
    z-index: 99;
}

.duu-post-more.open .duu-more-menu{
    display: block;
}

.duu-more-item{
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #333 !important;
    font-size: 14px;
    text-decoration: none !important;
    white-space: nowrap;
}

.duu-more-item:hover,
.duu-more-item:active{
    background: #f7f7f7;
}

.duu-more-item .icon{
    margin-right: 7px;
    font-size: 13px;
    color: #666;
}
    .wbg {
        position: relative;
        margin-right: -15px;
        margin-left: -15px;
        border-radius: 5px 5px 0 0;
        height: 200px;
        background-image: url('/plugin/duu_quan/images/bg.png');
        background-size: 100% 100%;
    }
    .imgps img {
        width: 100%;
        aspect-ratio: 1/1;
        border: 2px solid #fff;
        border-radius: 10px;
    }
    .cols {
        position: relative;
        width: 100%;
        min-height: 1px;
    }
    .message .row.duu-grid-bigger > .cols-4:only-child {
    flex: 0 0 62%;
    max-width: 62%;
    }
    .cols-4 {
        flex: 0 0 50%;
        max-width: 50%;
        position: relative;
    }
   
    .duu-grid-original > .cols-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
   
    .userimg {
        width: 7rem;
    }
    @media (min-width: 768px) {
        
        .cols-4 {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
}
           .message .row.duu-grid-bigger > .cols-4:only-child {
        flex: 0 0 50%;
        max-width: 50%;
    }
        .cols-4 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
       
        .duu-grid-original > .cols-4 {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .imgps img {
            width: 100%;
            height: 100%;
            border: 2px solid #fff;
            border-radius: 10px;
        }
        .userimg {
            width: 8rem;
        }
    }
    .imgmax img {
        width: 23px;
    }
    .img-thumbnail {
        width: 100%;
        aspect-ratio: 1/1;
    }
    .postimg blockquote {
        display: none;
    }
    .videos {
        position: relative;
        width: 100%;
        padding-top: 100%;
        background-color: #333;
        border-radius: 10px;
        overflow: hidden;
    }
    .videos video {
        display: none;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .play-button {
        width: 48px;
        height: 48px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" fill="white" xmlns="http://www.w3.org/2000/svg"><polygon points="40,30 70,50 40,70"/></svg>') no-repeat center;
        -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" fill="white" xmlns="http://www.w3.org/2000/svg"><polygon points="40,30 70,50 40,70"/></svg>') no-repeat center;
        mask-size: 60%;
        -webkit-mask-size: 60%;
    }
    .modal-content video {
        max-height: 500px;
        max-width: 600px;
        background-color: #333;
        display: block;
    }
 
@media (max-width: 767.98px) {
  .duu-quan-card{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

   
    padding-left: 0 !important;
    padding-right: 0 !important;

    border-radius: 0 !important;
  }


  .duu-quan-card .wbg{
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 767.98px) and (pointer: coarse){

  .modal[id^="san"] .modal-dialog{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    transform: none !important;
  }

  .modal[id^="san"] .modal-content.duu-san-modal-content{
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .modal[id^="san"]{
    padding-right: 0 !important;
  }

  .duu-quan-card .modal[id^="san"] .p-2{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  .duu-quan-card .modal[id^="san"] .sangif-item > div.p-2{
    padding: .5rem !important;
  }

  .duu-quan-card .modal[id^="san"] .sangif-item b{
    white-space: normal !important;
    word-break: break-word !important;
  }
}
@media (min-width: 768px){

  .modal[id^="san"] .modal-dialog{
    width: 92vw !important;      
    max-width: 920px !important; 
    margin: 1.75rem auto !important;
  }

  .modal[id^="san"] .sangif-item b{
    white-space: nowrap !important;  
    word-break: keep-all !important; 
    font-size: 13px;
  }

  .modal[id^="san"] .sangif-item > div > .p-2{
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
  }

  .modal[id^="san"] .sangif-item{
    padding: .5rem !important;
  }
  .modal[id^="san"] .sangif-item > div.p-2{
    padding: .6rem !important;
  }
}
@media (max-width: 767.98px) {

  .duu-quan-card .table,
  .duu-quan-card .media,
  .duu-quan-card .message,
  .duu-quan-card .row.text-center,
  .duu-quan-card nav,
  .duu-quan-card hr,
  .duu-quan-card .p-2,
  .duu-quan-card .text-right {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .duu-quan-card .message .row[style*="padding:0 15px"]{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}