p { word-break: break-word; }
li{ font-size: clamp(2rem, 2.5vw, 2.2rem); word-break: break-word; }
.gridList {
    display: grid;
    grid-template-columns: 1fr 28rem;
    grid-gap: 15px;
  }
  .gridOver {
    display: grid;
    grid-template-columns: 1fr 28rem;
    grid-gap: 15px;
  }
.flexcompanyView{ display: flex; flex-direction: column; gap: 15px;}
.gridCompanyProfile{ display: flex; gap: 15px;}

@media (max-width:991px){
    .gridList, .gridOver{ grid-template-columns: 1fr;}
}

.qr{ border: 1px solid var(--clGray); display: inline-block;}
.qr img{ max-width: 120px;}
.picCompany img {
    max-width: 20rem;
    width: 100%;
    border: 1px solid var(--clGray);
    border-radius: 10px;
    padding: 10px;
    height: 20rem;
    object-fit: contain;
  }
.flexNow{ display: flex; gap: 15px; justify-content: space-between;}
.flexNow ul{ flex: 1 1 100%; max-width: 100%;}
/* .flexNow div{ flex: 1 1 40%; max-width: 40%;} */
.flexNow div{ flex-shrink: 0;}

.button4{ display: flex; gap: 15px; flex-wrap: wrap;}
.button4 button{ background: var(--clWhite); border: 1px solid var(--clBlackGray); border-radius: 50px; padding: 5px 20px;}
.button4 button:hover{ background: var(--clRed); color: var(--clWhite); border: 1px solid var(--clRed);}
.applyNow{ background: var(--clRed); color: var(--clWhite); border: 1px solid var(--clRed); padding: 5px 20px; border-radius: 50px;}
.applyNow:hover{ background: var(--clRedHover); border: 1px solid var(--clRedHover);}

.flexLong{ display: flex; gap: 15px; flex-wrap: wrap;}
.gridNon{ display: grid; grid-template-columns: 10px 1fr; grid-gap: 15px; align-items: center;}
.mark{ font-size: 0.5rem;}

.positionAll a{ background: var(--clRed); color: var(--clWhite); padding: 10px 20px; border-radius: 50px; text-align: center;}
.positionAll a:hover{ background: var(--clRedHover);}

.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){
    .popUpUrgent{ max-width: 100%; position: relative;  top: 0;}
}

.similarJob{ display: flex; flex-direction: column;}
.similarJob a{ color: var(--clBlackGray);}
.similarJob li{ transition: 0.5s ease-in-out;}
.similarJob li:hover{ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); margin-top: -5px;}
.detailSimilarJob li:hover{ box-shadow: none;}

@media (max-width:991px){
    .similarJobNone{ display: none;}
}

.gridUrgentRec{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 15px;}
.workUrgent{ border: 1px solid var(--clGray); border-radius: 10px; padding: 15px; background: var(--clWhite);}
.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%;}
.flexPic img{ max-width: 80px; height: 80px; object-fit: scale-down; border-radius: 50%; padding: 5px;}

.workUrgent{ transition: 0.5s ease-in-out;}
.workUrgent a{ width: 100%;}
.workUrgent:hover{ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); margin-top: -5px;}
.workUrgent p{ color: var(--clBlackGray);}

@media (max-width:991px){
    .workUrgent{ margin-top: 0;}
}

.tagHit{ display: flex; align-items: center; flex-wrap: wrap; grid-gap: 15px;}
.tagHit a{ display: inline-block; padding: 5px 20px; background: var(--clWhite); border: 1px solid var(--clBlackGray); 
    border-radius: 50px; color: var(--clBlackGray);}
.tagHit a:hover{ background: var(--clRed); color: var(--clWhite); border: 1px solid var(--clRed);}

.headOverView{ background: var(--clBlackGray); color: var(--clWhite); border-radius: 50px; width: auto; text-align: center; padding: 10px 30px;}

/* New Type Resume */
ul.new-type-resume{ margin: 0; padding: 0; list-style: none; margin-top: 3.2rem; }
ul.new-type-resume li{ display: flex; gap: 16px; margin-bottom: 32px; }
ul.new-type-resume li button{ background: var(--clRed); color: var(--clWhite); height: 40px; max-width: 250px; width: 100%; padding-inline: 16px; border: none; border-radius: 10px; }
ul.new-type-resume li button:hover{ background: var(--clRedHover); }
ul.new-type-resume li div p{ margin-top: 1rem;}
@media (max-width: 576px) { ul.new-type-resume li{ flex-direction: column; } ul.new-type-resume li button{ max-width: 100%; height: auto; padding-block: 10px; } }
@media (min-width: 577px) and (max-width: 767px) { ul.new-type-resume li div p{ margin-top: unset;} }