div.item-element-action {
    width: 100%;
    height: 25%;
    background: rgba(0,0,0,0.2);
}

.item-favorite-download {
    width: 100%;
    height: 25%;
    background: rgba(0,0,0,0.2);
}

@media only screen and (max-width: 768px) {
    select.sort-profile {
        margin-left: 0 !important;
        margin-top: 10px;
        margin-right: 10px;
    }
    select.sort-job {
        margin-left: 0 !important;
        margin-top: 10px;
        margin-right: 10px;
    }
    div#post {
        padding: 10px 0 0 !important;
    }
    div#post > a {
        width: 100%;
    }
    /* .list-system-items {
        flex-wrap: nowrap;
        overflow-y: auto;
    } */
    .item-element {
        padding: 10px !important;
    }
    .view-download-group {
        flex-flow: column;
    }
    .price-drawing {
        margin-top: 5px;
    }
    .list-button-nav {
        display: grid !important;
    }
    .footer-menu {
        width: 100% !important;
    }
    .recharge-vdt-button {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    table.recharge-table {
        width: 350px !important;
    }
    select.download-filter {
        /* margin-top: 10px !important; */
        margin-left: 0px !important;
    }
    .date-job-group, .rating-profile-group {
        flex-flow: column;
    }
    .date-job-group > p {
        text-align: unset !important;
    }
}

.modal-recharge, .modal-notify-from-admin {
    display: none;
    position: fixed;
    z-index: 2;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, .4);
  }

  .modal-recharge-content, .modal-notify-from-admin-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  .close-modal-recharge, .close-modal-notify-from-admin {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    line-height: 28px;
    font-weight: bold;
  }

  .close-modal-recharge:hover,
  .close-modal-recharge:focus,
  .close-modal-notify-from-admin:hover,
  .close-modal-notify-from-admin:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

ul.bankList {
    clear: both;
    height: 202px;
    width: 636px;
}
ul.bankList li {
    list-style-position: outside;
    list-style-type: none;
    cursor: pointer;
    float: left;
    margin-right: 0;
    padding: 5px 2px;
    text-align: center;
    width: 90px;
}
.list-content li {
    list-style: none outside none;
    margin: 0 0 10px;
}

.list-content li .boxContent {
    display: none;
    width: 636px;
    border:1px solid #cccccc;
    padding:10px;
}
.list-content li.active .boxContent {
    display: block;
}
.list-content li .boxContent ul {
    height:280px;
}

i.VISA, i.MASTE, i.AMREX, i.JCB, i.VCB, i.TCB, i.MB, i.VIB, i.ICB, i.EXB, i.ACB, i.HDB, i.MSB, i.NVB, i.DAB, i.SHB, i.OJB, i.SEA, i.TPB, i.PGB, i.BIDV, i.AGB, i.SCB, i.VPB, i.VAB, i.GPB, i.SGB,i.NAB,i.BAB
{ width:80px; height:30px; display:block; background:url(https://www.nganluong.vn/webskins/skins/nganluong/checkout/version3/images/bank_logo.png) no-repeat;}
i.MASTE { background-position:0px -31px}
i.AMREX { background-position:0px -62px}
i.JCB { background-position:0px -93px;}
i.VCB { background-position:0px -124px;}
i.TCB { background-position:0px -155px;}
i.MB { background-position:0px -186px;}
i.VIB { background-position:0px -217px;}
i.ICB { background-position:0px -248px;}
i.EXB { background-position:0px -279px;}
i.ACB { background-position:0px -310px;}
i.HDB { background-position:0px -341px;}
i.MSB { background-position:0px -372px;}
i.NVB { background-position:0px -403px;}
i.DAB { background-position:0px -434px;}
i.SHB { background-position:0px -465px;}
i.OJB { background-position:0px -496px;}
i.SEA { background-position:0px -527px;}
i.TPB { background-position:0px -558px;}
i.PGB { background-position:0px -589px;}
i.BIDV { background-position:0px -620px;}
i.AGB { background-position:0px -651px;}
i.SCB { background-position:0px -682px;}
i.VPB { background-position:0px -713px;}
i.VAB { background-position:0px -744px;}
i.GPB { background-position:0px -775px;}
i.SGB { background-position:0px -806px;}
i.NAB { background-position:0px -837px;}
i.BAB { background-position:0px -868px;}

ul.cardList li {
    cursor: pointer;
    float: left;
    margin-right: 0;
    padding: 5px 4px;
    text-align: center;
    width: 90px;
}

.con-tooltip {

    position: relative;
    display: inline-block;

    transition: all 0.3s ease-in-out;
    cursor: default;

  }

  /*tooltip */
  .tooltip {
    visibility: hidden;
    z-index: 1;
    opacity: .40;

    width: 100px;
    text-align: center;

    background: #333;
    color: #fff;

    position: absolute;
    top:-140%;
    left: -25%;
    font: 16px;

    transform: translateY(9px);
    transition: all 0.3s ease-in-out;

    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
  }


  /* tooltip  after*/
  .tooltip::after {
    content: " ";
    width: 0;
    height: 0;
    top: 30px;

    border-style: solid;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #333 transparent transparent transparent;

    position: absolute;
    left: 40%;

  }

  .con-tooltip:hover .tooltip{
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
    transition: .3s linear;
    animation: odsoky 1s ease-in-out infinite  alternate;

  }
  @keyframes odsoky {
    0%{
      transform: translateY(6px);
    }

    100%{
      transform: translateY(1px);
    }

  }

  /*hover ToolTip*/
  .left:hover {transform: translateX(-6px); }
  .top:hover {transform: translateY(-6px);  }
  .bottom:hover {transform: translateY(6px);}
  .right:hover {transform: translateX(6px); }

  .profile {
    position: absolute !important;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate3d(0px, 91.5px, 0px);
  }

  .truncate-line-clamp{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 58px;
  }
  .wrapper {
    position: relative;
    height: 300px;
    width: 300px;
  }

  .wrapper .circle {
    position: absolute;
    height: 290px;
    width: 290px;
    border: 10px solid #fff;
    border-radius: 50%;
  }

  .wrapper .gap {
    position: absolute;
    width: 90px;
    height: 300px;
    left: 100px;
    background-image: -webkit-linear-gradient(270deg,#0cceb0 0%,#2ad38b 100%);
    -ms-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }

  .wrapper:hover .gap {
    display: block;
    -webkit-animation: rotateCircle 20s linear infinite;
    -moz-animation: rotateCircle 20s linear infinite;
    -ms-animation: rotateCircle 20s linear infinite;
    -o-animation: rotateCircle 20s linear infinite;
    animation: rotateCircle 20s linear infinite;
  }

  .wrapper .image {
    position: absolute;
    background-size: cover;
    background-position: right;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    justify-items: center;
    display: grid;
    top: 10%;
    left: 10%;
    height: 80%;
    width: 80%;
  }

  @keyframes rotateCircle {
    from {
      -ms-transform: rotate(-30deg);
      -moz-transform: rotate(-30deg);
      -webkit-transform: rotate(-30deg);
      -o-transform: rotate(-30deg);
      transform: rotate(-30deg);
    }

    to {
      -ms-transform: rotate(330deg);
      -moz-transform: rotate(330deg);
      -webkit-transform: rotate(330deg);
      -o-transform: rotate(330deg);
      transform: rotate(330deg);
    }
  }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    div.list-button-nav {
        flex-wrap: wrap;
    }
    div.recharge-vdt-button {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}