.intro1 {
    animation-name: OpaFadeIn;
    animation-duration: 1s;
    animation-delay: 1s;
  }
  .anima0 {
    animation-name: PopText;
    animation-duration: 0.5s;
  }
  #Spleeter_HL {
    color: #696868;
  }
  #stem_tip,
  #stem_tip li {
    display: inline-block;
  }
 
  .spleeterOptionBox {
    /* background: #c3c39f; */
    flex-basis: 350px;
  }
  #SpleeterBox_OK {
    margin: 5px auto;
    width: 50%;
  }
  #CounterUpdating {
    display: flex;
    font-size: 14px;
    justify-content: space-around;
    padding: 4px;
    flex-wrap: wrap;
  }
  td {
    max-width: 380px;
    overflow-x: hidden;
    white-space: nowrap;
  }
  .itemlist,
  th {
    cursor: pointer;
    color: #e7dbdb;
  }
  .codeHL {
    color: #45ec0f
  }
  st {
    color: aqua
  }
  thead.sticky th {
    position: sticky;
    top: 0px;
    z-index: 1;
    background-color: #4c5d89;
    color: #1c1b1b;
  }

  @media screen and (min-width: 1522px) {
    #SplittedTable{
      max-height: 650px !important;
    }
    .table-container.limitHeight {
      max-height: 700px !important;
    }
  }
  #SpleeterBox {
    transition: 0.2s;
    width: 100%;
    max-width: 750px;
    background-color: #01040a;
    max-height: fit-content;
    overflow-y: clip;
  }
  .Spleeter_HL {
    background-color: #e8dfc3;
  }
  #SpleeterBox #UploadInput {
    height: 30vh;
    max-height: 260px;
  }
  #SplitedBox {
    width: 100%;
    max-width: 750px;
    background-color: #01040a;
  }
  #SplittedTable {
    text-align: left;
    height: auto;
    max-height: 350px;
    overflow: auto;
  }
  #SplittedTable td:nth-child(6){
    max-width: 2em;
  }
  #SplittedSeachContainer {
    background: transparent;
    white-space: nowrap;
    height: 1.3rem;
    flex-basis: 100%;
  }
  input#splittedFilter {
    background: transparent;
    border-radius: unset;
    outline: none;
    color: white;
    width: 80%;
    float: left;
    padding: 5px 1px 3px 5px;
    border-bottom: 1px solid #7a7a7a;
    font-size: 16px;
    margin: 0;
    height: 24px;
  }
  input#splittedFilter::placeholder {
    color: #777;
  }
  #SearchFx {
    display: block;
    border-bottom: 2px solid #c56440;
    position: relative;
    top: 1.5rem;
    left: 16px;
    width: 0%;
    max-width: 87%;
    transform-origin: right;
  }
  .SearchFX {
    animation-name: ScaleFX_Search;
    animation-duration: 1.2s;
    animation-timing-function: linear;
  }
  #SplittedSeachContainer .search_icon {
    color: #c56440;
    width: 10%;
    float: left;
    transition: 1s;
    line-height: 1.4rem;
  }
  #SplittedSeachContainer input {
    border: none;
    border-bottom: 1px solid #999;
  }
  #SplittedSeachContainer #SearchCount {
    float: left;
    color: #999;
    font-size: 0.8rem;
    width: 8%;
    line-height: 21px;
  }
  @keyframes ScaleFX_Search {
    0% {
      width: 0%;
      transform: scaleX(1);
    }
    80% {
      width: 90%;
      transform: scaleX(1);
    }
    100% {
      width: 100%;
      transform: scaleX(0);
    }
  }
  @media screen and (max-width:600px) {
    .itemlist {
      font-size: 0.9em;
    }
  }
  @media screen and (max-width:850px) {
    #SpleeterBox,
    #SplittedTable {
      max-width: 100%;
      width: 100%;
    }
    .headboxChild.title {
      font-size: 1rem;
    }
  }
  .uploadArea {
    border-style: dashed;
    border-radius: 19px;
    border-width: 5px;
    cursor: pointer;
    width: 100%;
    max-width: 900px;
    padding: 60px 5px;
    margin: 10px auto;
    transition: 0.7s;
    display: flex;
    border-color: #485fc7;
    background-color: #afafaf;
    color: #888888;
  }
  .uploadArea:hover {
    background-color: #cdc1a0;
  }
  .uploadArea::before {
    margin-bottom: 1rem;
    font-family: "Font Awesome 6 Free";
    content: "\f093";
    font-weight: 900;
    font-size: 3rem;
    text-align: center;
    color: #fff;
  }
  .uploadArea::after {
    content: "Kéo thả file vào đây hoặc bấm để chọn file";
    color: #fff;
    text-align: center;
    margin-top: 1rem;
  }
  #spleeter-intro {
    display: inline-table;
    width: 100%;
    max-width: 1280px;
  }
  #idlLog table {
    background-color: #000;
    color: #c2c2c2;
  }
  #idlLog table td {
    max-width: 230px;
    text-align: left;
  }
  #idlLog table tr:hover {
    background-color: #111b2f;
  }
/* Wide screens: every large block of /tachnhac shares one 2-column frame (same width, same edges, same corners) */
@media screen and (min-width: 1100px) {
  #main_content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: var(--v2-page-w); margin: 0 auto; padding: 0 1rem; box-sizing: border-box; align-items: stretch; }
  #main_content > * { max-width: none !important; width: auto; margin: 0 !important; }
  #main_content > .v2-blocks { grid-column: 1 / -1; padding: 0; }
  #main_content > section.section { display: flex; padding: 0; }
  #main_content > section.section > .v2-card { width: 100%; display: flex; flex-direction: column; }
  #main_content > section.section > .v2-card > .v2-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  #main_content > #AkiPlayer { grid-column: 1 / -1; }
}
#SpleeterBox, #SplitedBox, #idlLog, #adblockNoti { border-radius: var(--v2-radius-lg); border: 1px solid var(--v2-border); overflow-x: auto; overflow-y: hidden; }