.workUrgent {
    border: 1px solid var(--clGray);
    border-radius: 10px;
    padding: 15px;
    background: var(--clWhite);
  }
  .gridUrgentRec {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
  .flexPic {
    display: flex;
    justify-content: space-between;
    grid-gap: 15px;
  }
  .flexPic figure {
    border: 1px solid var(--clGray);
    border-radius: 50%;
    max-width: 80px;
    height: 80px;
    width: 100%;
    overflow: hidden;
  }
  .flexPic figure a {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .flexPic img {
    max-width: 80px;
    height: 80px;
    padding: 0; 
    object-fit: contain;
  }
  
  @media (max-width: 991px) {
    .gridUrgentRec {
      display: flex;
      gap: 15px;
      overflow-x: auto;
    }
    .gridUrgentRec > * {
      min-width: 250px;
    }
    .workUrgent:hover {
      margin-top: 0;
    }
  }
  
  .workUrgent {
    transition: 0.5s ease-in-out;
  }
  .workUrgent a {
    width: 100%;
    word-break: break-word;
  }
  /* .workUrgent:hover {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
  } */
  .workUrgent p {
    color: var(--clBlackGray);
  }
  .workUrgent .position_company {
    color: var(--clRed);
  }
  
  .linkLink a:hover {
    text-decoration: underline !important;
    color: var(--clRedHover);
  }
  .flexProcessList {
    display: flex;
    align-items: center;
  }
  .formControlList {
    border-radius: 10px;
  }
  .flexIn {
    display: flex;
    justify-content: space-between;
    grid-gap: 15px;
    width: 100%;
  }
  
  @media (max-width: 768px) {
    .flexProcessList {
      flex-direction: column;
      align-items: baseline;
    }
    .flexProcessList .form-group {
      width: 100%;
      margin-top: 10px;
    }
    .formControlList {
      margin-left: 0 !important;
    }
  }
  
  .gridUnder {
    display: grid;
    grid-template-columns: 1fr 0.4fr;
    grid-gap: 15px;
  }
  .gridUnder p {
    font-size: var(--fontSubText);
  }
  .gridUnder a {
    background: var(--clRed);
    color: var(--clWhite);
    text-align: center;
    border-radius: 50px;
    padding: 5px 10px;
    display: inline-block;
  }
  .gridUnder a:hover {
    background: var(--clRedHover);
  }
  
  .gridListWork {
    display: grid;
    grid-template-columns: 1fr 0.4fr;
    grid-gap: 15px;
  }
  .flexTimeWork {
    flex: 1 0 30%;
    max-width: 30%;
    text-align: right;
  }
  .saveWork button {
    background: transparent;
    border: 0;
  }
  .saveWork button:hover,
  .saveWork button.active {
    color: var(--clRed);
  }
  
  @media (max-width: 991px) {
    .gridListWork {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 768px) {
    .flexTimeWork {
      flex: 1 0 100%;
      max-width: 100%;
      text-align: left;
    }
    .flexIn {
      justify-content: start;
      flex-direction: column;
    }
    .gridUnder {
      grid-template-columns: 1fr;
    }
    .gridUnder div + div {
      text-align: center;
    }
    .gridUnder a {
      max-width: 50%;
    }
  }
  
  @media (max-width: 576px) {
    .gridUnder a {
      max-width: 100%;
    }
  }
  
  .workAll {
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .workAll a {
    display: block;
    padding: 5px;
  }
  .workAll a:hover {
    background: var(--clGray);
    margin-left: 5px;
    color: var(--clBlackGray);
  }
  
  .workHit {
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .workHit a {
    display: block;
    padding: 5px;
  }
  .workHit a:hover {
    background: var(--clGray);
    margin-left: 5px;
    color: var(--clBlackGray);
  }
  
  .careerHit {
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .careerHit a {
    display: block;
    padding: 5px;
  }
  .careerHit a:hover {
    background: var(--clGray);
    margin-left: 5px;
    color: var(--clBlackGray);
  }
  
  .tagHit {
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .tagHit ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
  }
  .tagHit a {
    display: inline-block;
    padding: 2px 8px;
    background: var(--clWhite);
    border: 1px solid var(--clBlackGray);
    border-radius: 50px;
  }
  .tagHit a:hover {
    background: var(--clRed);
    color: var(--clWhite);
    border: 1px solid var(--clRed);
  }
  
  .popUpUrgent {
    background: var(--clWhite);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--clBlackGray);
    text-align: center;
    position: sticky;
    top: 15px;
    z-index: 10;
    max-width: 312px;
    height: auto;
  }
  .popUpUrgent button {
    padding: 5px 20px;
    border: 1px solid var(--clGreen);
    border-radius: 50px;
    color: var(--clWhite);
  }
  .popUpUrgent button:hover {
    background: var(--clGreenHover);
  }
  
  @media (max-width: 991px) {
    .bannerUrgent {
      display: none;
    }
    .workAll,
    .workHit,
    .careerHit,
    .tagHit {
      display: none;
    }
    .popUpUrgent {
      max-width: 100%;
    }
  }
  
  .jobSearch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
  }
  
  @media (max-width: 768px) {
    .jobSearch {
      grid-template-columns: 1fr;
    }
  }
  
  .flexCheck {
    display: flex !important;
    justify-content: center;
    align-items: baseline;
    flex-direction: column;
    grid-gap: 15px;
    max-width: 200px;
    margin: 0 auto;
    padding: 15px;
  }
  .form-check {
    padding: 0;
  }
  .formCheckInput {
    margin-top: 0;
    position: relative;
  }
  
  .urgentWarp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .urgentWarp .urgent {
    flex-shrink: 0;
  }
  .urgentWarp .urgent span {
    background: var(--clRed);
    color: var(--clWhite);
    border-radius: 5px;
    padding: 2px 5px;
    display: inline-block;
    text-align: center;
  }
  
  @media (max-width: 380px) {
    .urgentWarp {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  .swal2-popup {
    width: 48rem !important;
  }