.carou-corporate{padding-inline: 15px;}
.carou-corporate .carousel-inner{border-radius: 2rem;}
.carou-corporate .carousel-item{border-radius: 2rem;}
.carou-corporate .carousel-control-prev, .carou-corporate .carousel-control-next
 {
    /* background-color: #e1e1e1; */
    width: 5vh;
    height: 100%;
    /* height: 5vh; */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.carou-corporate .carousel-indicators{bottom: 1.6rem; margin-bottom: 0;}

.carou-corporate .carousel-indicators li {
    width: 28px;
    height: 4px;
    border-radius: 2rem;
    border: none;
}

.carou-corporate .carousel-indicators .active
 {
    background: var(--clr-primary);
}

.carou-corporate .carousel-control-prev{ left: 15px;}
.carou-corporate .carousel-control-next{right: 15px;}

.carou-corporate picture img {
    object-fit: cover;
    border-radius: 2rem;
    aspect-ratio: 4 / 1;
    width: 100vw;
}
.coporate-container{max-width: 140rem;  width: 100%; display: flex; justify-content: center; flex-direction: column; margin-inline: auto; font-family: "DB-HeaventRounded"}

.coporate-logo img{
    max-width: 100%;
    border: 1px solid #DBDFEC;
    background-color: #fff;
    border-radius: 8px;
    padding: 4px;
    height: 152px;
    width: 152px;
    object-fit: contain;
    object-position: center;
}
.coporate-logo-n-name{gap: 32px; margin-bottom: 48px;}
.coporate-name h1{font-size: 36px; color: #333;}
.coporate-name .verify-name{color: #2C96FF; font-size: 20px; margin-left: 5px;}
.coporate-name span{font-size: 24px;}
.following-status{padding: 8px 18px; width: 121px; height: 36px; white-space: nowrap; border-radius: 3rem; color: #22C57E; border: 1px solid #22C57E !important; transition:   0.3s ease-in-out; background-color: #fff}
.following-status-active{padding: 8px 18px; width: 121px; height: 36px; white-space: nowrap; border-radius: 3rem; color: #636262; border: 1px solid #636262 !important; transition:   0.3s ease-in-out; background-color: #fff;}
.following-status i{font-size: 16px; color: #22C57E; background-color: #fff}
.following-status-active i{font-size: 16px; color: #636262; background-color: #fff}
.following-status:hover{box-shadow: 0 4px 6px rgba(154, 170, 207, 40%);}

.round-button{border-radius: 50%; width: 36px; height:36px; border: 1px solid #333; background-color: #fff; outline: #333;transition:   0.3s ease-in-out;}
.round-button:active, .round-button:focus {border: 1px solid #333 !important; outline: #333; }
.round-button:hover{box-shadow: 0 4px 6px rgba(154, 170, 207, 40%); transition:   ease-in 0.3s, visibility 0s linear 0.3s; }
.round-button figure{display: flex; align-items: center; justify-content: center;}
.share-qr-mobile.d-flex{display: none !important;}

.corporate-modal .modal-content{border-radius: 16px; padding: 28px 20px;}
.corporate-modal .modal-header {border-bottom: none; height: 32px;}
.corporate-modal .modal-footer {border-top: none;}
.corporate-modal .modal-header, .corporate-modal .modal-body, .corporate-modal .modal-footer {padding: 0;}
.corporate-modal .modal-title{font-size: 32px;}
.corporate-modal .close{ font-weight: normal; font-size: unset; opacity: 1;}
.corporate-modal .modal-body button{transition:   0.3s ease-in-out; }
.corporate-modal .modal-body button:hover{box-shadow: 2px 4px 8px rgba(154, 170, 207, 40%);  }

.bt-dl-qr{background-color: #ff1111; padding-inline: 16px; height: 40px; white-space: nowrap; border-radius: 40px; color: #fff; width: 198px;}

.corporate-modal .btn-copy-link {
    background-color: #ff1111; /* Bright red background */
    color: white; /* White text color */
    border-color: #ff1111; /* Red border color */
    /* Ensuring the button fits seamlessly within the input group */
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    font-size: 22px;
    height: 40px;
    padding: 2px 12px;
    white-space: nowrap;
  }

 .corporate-modal .form-control[readonly] {
    background-color: #fff;
    opacity: 1;
    font-size: 18px;
    height: 40px;
    padding: 8px 15px;
 }  
 

  /* Adjust the input field's border radius to match the design */
  .corporate-modal .input-group > .form-control {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .corporate-social-share .social{display: grid; gap: 20px; grid-template-columns: repeat(3, 35px);}
  .corporate-social-share a{width: 35px !important; height: 35px !important;}

.corporate-tab .nav{justify-content: center; gap: 12px;}  

.corporate-tab  .nav-pills .nav-link.active, .corporate-tab .nav-pills .show>.nav-link {
    color: #fff;
    background-color: transparent;
   /*border: 2px solid rgba(255, 17, 17, 0.5); */

}
.corporate-tab  .nav-pills .nav-link.active img, .corporate-tab .nav-pills .show>.nav-link img {
    border: 2px solid rgba(255, 17, 17, 0.5);/**/
}

.corporate-tab  .nav-pills .nav-link img {
   transition:   0.3s ease-in-out;
}

.corporate-tab  .nav-pills .nav-link:hover img{
    border: 2px solid rgba(255, 17, 17, 0.5);/**/
    
}
.corporate-tab .nav-pills .nav-link {
    border-radius: 1.2rem;
    max-width: 36rem;
    height: 12rem;
    padding: 0;
    background-color: transparent;
    
}
.corporate-tab .nav-pills .nav-link img {
    border-radius: 1.2rem;
    object-fit: cover;
    border: 2px solid transparent;
    
}

#cpr-position{display: flex; gap: 4rem; flex-direction: column; padding-top: 4rem;}
#cpr-position .sect-gray{background-color: #f9f9f9; padding-top: 2rem; padding-bottom: 4rem;}
.sect-gray{background-color: #f9f9f9;}

.coporate-cnt-header h2{font-size: 28px;}
.coporate-cnt-header img{width: 32px; height: 32px;}

.hot-hire ul{display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; padding-top: 2rem;}
.hot-hire ul li{padding: 16px 16px 20px 16px; background-color: #fff; border-radius: 20px; cursor: pointer;border: 1px solid #fff; transition:   0.3s ease-in-out;}
.hot-hire ul li:hover{border: 1px solid #FF4141;box-shadow: 0 4px 20px rgba(242, 35, 25, 25%);  }
.hot-hire-top{min-height: 62px; padding-bottom: 15px; font-size: 24px;} 
.hot-hire-body{border-top: 1px solid #DBDFEC; gap: 15px; padding-top: 15px;} 
.hot-hire-body .justify-content-between{align-items: center;} 

.btn-bookmark-cpr {
    background-color: transparent;
    border: 0 solid transparent;
    height: 20px;
    /* margin-top: -10px; */
    padding-inline: 0;

}
.icon-bookmark-gray
 {
    background: url(../../images/corperate/icon-bookmark-cpr.svg) top center no-repeat;
    /* background-size: cover; */
    width: 15px;
    height: 20px;
    display: block;
}

.icon-bookmark-gray-fill {
    background: url(../../images/corperate/icon-bookmark-cpr-focus.svg) top center no-repeat;
    /* background-size: cover; */
    width: 15px;
    height: 20px;
    display: block;
}
.hot-hire-body .update-time{font-size: 18px;}
.hot-hire-body .update-time i{font-size: 12px;}
.hot-hire-body .fa-arrow-right, .hot-hire-body a.fa-arrow-right {font-size: 24px; color: #333;transition:   0.3s ease-in-out;}



.hot-hire ul li:hover .fa-arrow-right, .hot-hire ul li:hover a.fa-arrow-right {color:#ff1111; }

.job-field-group ul{display: grid; grid-template-columns: repeat(5,1fr); gap: 2rem; padding-top: 2rem;}
.job-field-group ul li {border-radius: 16px; transition:   0.3s ease-in-out;}
.job-field-group ul li button{width: 100%; height: 128px; padding: 12px; background-color: #fff; border-radius: 16px; cursor: pointer;border: 1px solid #DBDFEC; text-align: left;}
.job-field-group ul li:hover{box-shadow: 0px 4px 6px rgba(154, 170, 207, 20%);}
.job-field-group ul li .all-job{border: 1px solid #FF9292;}

.job-field-group-cnt div:first-child{min-height:54px;max-width: 200px;}
.job-field-group-cnt div:last-child{background-color: #F1F4F8; border-radius: 8px; padding: 4px 8px; font-size: 18px; width: fit-content; white-space: nowrap;}
.all-job .job-field-group-cnt div:last-child{background-color: #FFE7E7; color: #B50C0C;}
.btn-look-more{height: 36px; padding-inline: 20px; background-color: #fff; border-radius: 8px; border: 1px solid #C0C2C9;  white-space: nowrap; margin-left: 20px; transition:   0.3s ease-in-out;}
.btn-look-more:hover{box-shadow: 2px 4px 8px rgba(154, 170, 207, 40%);}

.btn-add-chance, .btn-add-chance:focus {
    background-color: white;
    border-radius: 8px; /* ปรับให้มนสวยขึ้นตามภาพ */
    border: 1px solid transparent; /* เพิ่มความหนาเล็กน้อยเพื่อให้เห็นสีชัด */
    
    /* ใช้พื้นหลัง 2 ชั้น: ชั้นบนเป็นสีขาวทับไว้ ชั้นล่างเป็น Gradient */
    background-image: linear-gradient(white, white), 
                      linear-gradient(90deg, #FFD3D3, #FD0000, #FFD3D3); 
    
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    /* ขยายขนาด background-size ของ gradient ให้กว้างกว่าปุ่มเพื่อทำ animation */
    background-size: 100% 100%, 200% 100%; 
    
    cursor: pointer;
    height: 40px;
    padding-inline: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    
    /* เรียกใช้ Animation */
    animation: border-fading 1s infinite alternate ease-in-out;
}

/* สร้าง Animation ให้ Gradient ขยับไปมา */
@keyframes border-fading {
    0% {
        background-position: 0% 0%, 0% 0%;
    }
    60% { 
        background-position: 0% 0%, 100% 0%;
    } 
    100% { 
        background-position: 0% 0%, 0% 0%; 
    }
}

.btn-add-chance:hover {
   /* transform: scale(1.02);  
    opacity: 0.9;*/
}

.coporate-intro button{background-color: #333; color: #fff; font-size: 26px; padding-inline: 12px; border-radius: 40px; height: 48px; width: 188px; white-space: nowrap; transition:   0.3s ease-in-out;
}
.coporate-intro button:hover{box-shadow: 2px 4px 8px rgba(154, 170, 207, 40%); }
.coporate-intro img{
    border-radius: 20px;
    object-fit: contain;
    object-position: center;
}
.coporate-intro-secL{max-width: 570px;}
.coporate-intro-secL .detail-text{ 
  text-indent: 50px;
  font-size: 24px;
  -webkit-line-clamp: unset; /* แสดงข้อความเต็มเสมอ */
    display: block;
}

.at-footer .coporate-intro-secL .detail-text{ 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* Number of lines to show */
  overflow: hidden;
  text-overflow: ellipsis; /* Fallback for single-line behavior if necessary, but handled by line-clamp */
}
.filter-row ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; padding-top: 2rem;}

.job-group-content .filter-everywhere .red100-bor .ddForm, .job-group-content .filter-everywhere .red100-bor .padFront .form-control, 
.job-group-content .filter-everywhere .via-ai-search .ddForm, .job-group-content .filter-everywhere .via-ai-search .padFront .form-control{border-radius: 40px !important; height: 52px !important;}


.job-group-content-card ul{display: grid; grid-template-columns: repeat(3,1fr);  row-gap: 2.4rem; column-gap: 2rem;}
.job-group-content-card ul li{background-color: #fff; border-radius: 20px; padding: 16px 16px 20px 16px; cursor: pointer;transition:   0.3s ease-in-out;}
.job-group-content-card ul li:hover{box-shadow: 0 4px 20px rgba(154, 170, 207, 50%); }
.job-group-content-card-top{gap: 10px;padding-bottom: 15px;} 
.job-group-content-card-top .font-DB-med-not-rounded{font-size: 24px; } 
.job-group-content-card-body{ gap: 15px; font-size: 22px; } 
.job-group-content-card-body .table-row{border-top: 1px solid #DBDFEC;padding-top: 15px; align-items: center;}
.job-group-content-card-body .update-time{font-size: 18px;}
.job-group-content-card-body .update-time i{font-size: 12px;}
.job-group-content-card-badge{display: flex; flex-direction: column; min-height: 66px;justify-content: end;}
.job-group-content-card-badge ul{display: flex; flex-wrap: wrap; gap: 10px;}
.job-group-content-card-badge ul li{background-color: #F1F4F8; border-radius: 30px; padding: 2px 12px; font-size: 17px; width: fit-content; transition:   0.3s ease-in-out;}
.job-group-content-card-badge ul li:hover{box-shadow: none; }
.job-group-content-card-badge ul li.urgently{background-color: #FFE7E7; color: #B50C0C;}
.btn-job-detail{background-color: #ff1111; color: #fff; padding: 3px 20px; border-radius: 30px;  white-space: nowrap; transition:   0.3s ease-in-out;}
.btn-job-detail:hover{box-shadow: 2px 4px 8px rgba(154, 170, 207, 40%);}
.job-group-content-page .page-item .page-link,.job-group-content-page .page-item:first-child .page-link, .job-group-content-page .page-item:last-child .page-link{
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:   0.3s ease-in-out;
}
.job-group-content-page .page-item.active .page-link, .job-group-content-page .page-item:hover.active .page-link{

    background-color: #ff1111;
    border-color: #ff1111;
    color: #fff;   

}

.job-group-content-page .page-item .page-link{
    border-color: #DBDFEC;
    color: #333;
    font-family: "DB-HeaventRounded";
    transition:   0.3s ease-in-out;
}

.job-group-content-page .page-item:hover .page-link{

    background-color: #FFE7E7;
    
}
.job-group-content-page select.form-control{
width: auto; background-color: #f0f4f8; border: none; border-radius: 8px; font-size: 22px;}

.corporate-modal#corp-alljob .modal-dialog {
        max-width: 1100px;

}
.corporate-modal#corp-alljob .modal-title{font-size:unset;}
.corporate-modal#corp-alljob .modal-header{height: auto;}
.corporate-modal#corp-alljob .modal-content{ height: 678px; overflow-y: auto;}
.corporate-modal#corp-alljob .job-field-group ul{grid-template-columns: repeat(4,1fr);}

.carou-hot-hire .carousel-indicators{bottom: -30px;} 
.carou-hot-hire .carousel-indicators li {
  background-color: #d9d9d9;
  border: none;
}
.carou-hot-hire .carousel-indicators .active {
  border: 0.1rem solid #ff1111;
  background-color: #ff1111;
  border-radius: 2rem;
  width: 2.8rem;
}




@media (max-width: 1400px) {
    .coporate-container{max-width: 115rem;}
    .coporate-container .search-job-box-row ul.main-grid-row{
    grid-template-columns:  0.45fr 0.275fr 0.275fr !important;
    }
    
}

@media (max-width: 1240px) {
    .coporate-intro-secL{max-width: 500px; padding-right: 15px;}
}

@media (max-width: 1160px) {
    .coporate-container{max-width: 100rem;}
    .coporate-container .search-job-box-row ul.main-grid-row{
    grid-template-columns:  1.5fr 1fr 1fr !important;}
    .corporate-modal#corp-alljob .modal-dialog {
        max-width: unset;
        padding-inline: 15px;
    
    }
    
    /*.corporate-modal#corp-alljob .job-field-group ul{grid-template-columns: repeat(4,240px); overflow-x: auto;}*/
    .corporate-modal#corp-alljob .modal-content{ width: 100%; max-width: unset;}
    
}

@media (min-width: 992px) and (max-width: 1160px) {
    .corporate-tab .nav-pills .nav-link {
    max-width: 30rem;
    height: 10rem;
    }   
}

@media (max-width: 991px) {
    /*.coporate-container{max-width: 72rem; padding-inline: 15px;}*/
    .coporate-container{max-width: unset; padding-inline: 15px;/**/}
    .hot-hire ul{grid-template-columns: repeat(2,1fr);}
    .coporate-intro{flex-direction: column; gap: 20px;}
    .coporate-intro.at-footer{flex-direction: column-reverse; gap: 20px;}
    .coporate-intro-secL{max-width: unset;}
    .at-footer .coporate-intro-secL{text-align: center;}
    .job-group-content-card ul{grid-template-columns: repeat(2,1fr);}
    .job-field-group ul{
        overflow-x: auto;
        /*grid-template-columns: repeat(5, 240px);*/
        grid-template-columns: repeat(4, 240px);
    }    
}

@media (max-width: 767px) {
    .share-qr-wider.d-flex{display: none !important;}
    .share-qr-mobile.d-flex{display: flex !important;} 
    /*.coporate-container{max-width: 54rem; padding-inline: 15px;}*/
    .corporate-tab .nav{flex-direction: column; align-items: center;}  

    .job-group-content-page{flex-direction: column; gap: 12px;}
    .job-group-content-card-top .text-gray-5{ 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Number of lines to show */
    overflow: hidden;
    text-overflow: ellipsis; 
    }
    .carou-corporate .carousel-indicators{bottom: 1.2rem;}
    .corporate-modal#corp-alljob .job-field-group ul{grid-template-columns: repeat(2,1fr);}
    
}
@media (max-width: 576px) {
    .coporate-name h1{font-size: 28px;}
    .coporate-name, .coporate-name span{font-size: 20px;}
    .coporate-logo-n-name{gap: 20px; margin-bottom: 12px;}
    .coporate-logo img{border-radius: 6px;width: 80px; height: 80px;}
    /*.carou-corporate picture img { aspect-ratio: 4 / 3;}*/
    /*.coporate-container{max-width: unset; padding-inline: 15px;}*/
    .hot-hire ul{grid-template-columns: repeat(1,1fr);}
    .corporate-tab .nav-pills .nav-link {
    max-width: 30rem;
    height: 10rem;
    }
    .corporate-tab .nav{padding-top: 2rem;} 
    .coporate-cnt-header h2{font-size: 26px;} 
 /*   
.hot-hire ul li:nth-last-child(-n+4) {
    display: none; 
}*/
.coporate-intro-secL .detail-text{ text-indent: 0;}
.num-pos-header{flex-direction: column;}
.num-pos-header.align-items-center{align-items: normal !important;}
.btn-add-chance{margin-top: 20px;}
.job-group-content-card ul{grid-template-columns: repeat(1,1fr);}

}

@media (min-width: 576px) {
    .corporate-modal#corp-qr .modal-dialog {
        max-width: 440px;
    }

}

@media (min-width: 992px){
    /* กำหนดความกว้างของ Scrollbar */
.corporate-modal#corp-alljob .modal-content::-webkit-scrollbar {
  width: 9px;
}

/* กำหนดพื้นหลังของ Scrollbar (Track) */
.corporate-modal#corp-alljob .modal-content::-webkit-scrollbar-track {
  background: transparent; 
}

/* กำหนดตัวเลื่อน (Thumb) */
.corporate-modal#corp-alljob .modal-content::-webkit-scrollbar-thumb {
  background-color: #C0C2C9; /* สีเทาอ่อนๆ */
  border-radius: 20px;       /* ทำให้โค้งมน */
}

/* เปลี่ยนสีเมื่อเอาเมาส์ไปวาง (Hover) */
/*.corporate-modal#corp-alljob .modal-content::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8; 
}*/
}

.job-group-content-card a:hover{color:#fff;}

#detail-text
 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
	min-height: 44px;
    max-height: 44px;
	
}

.job-group-content-card-top .d-flex.gap-2 .font-DB-med-not-rounded{

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}