#search-job-box .container .col-12,
#home-content .container .col-12,
#job-urgentQ .container .col-12,
#menu-footer .container .col-12 {
  padding-left: 0;
  padding-right: 0;
}

#search-job-box .container,
#home-content .container,
#job-urgentQ .container,
#menu-footer .container {
  padding-left: 0;
  padding-right: 0;
}

#search-job-box .row,
#home-content .row,
#job-urgentQ .row,
#menu-footer .row {
  margin-left: 0;
  margin-right: 0;
}

button.button-medium.more-all {
  font-family: "DB-HeaventRounded-Bold";
  text-decoration: none;
  border-radius: 0.8rem;
  position: relative;
  background-color: #fff;
  background-image: linear-gradient(to right, #fff, #fff);
  -webkit-backface-visibility: hidden;
  z-index: 1;
  min-height: 4rem;
}

button.button-medium.more-all:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #ff1111, #ff1111);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
  border-radius: 0.8rem;
  box-shadow: 2px 4px 6px rgba(154, 170, 207, 40%);
}

button.button-medium.more-all:hover:after {
  opacity: 1;
}

button.button-medium.more-all:hover span {
  color: #fff;
  transition: all 0.5s ease-out;
}

button.button-medium.more-all span {
  position: relative;
  z-index: 3;
  color: #ff1111;
}

.intro-search span:first-child::after {
  content: "";
  display: block;
  width: 59px;
  border-bottom: 3px solid #ff1111;
}

#home-content {
  background: #fafbfd;
}

#home-content .container {
  gap: 6rem;
}

#home-content h2 {
  font-size: 3.2rem;
}

#home-content .carousel-control-prev,
#home-content .carousel-control-next {
  width: 5vh;
  height: 100%;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

#home-content .card {
  border-radius: 1rem;
  border: 1px solid #dbdfec;
}

#intro-JOBBKK-Top h1 {
  font-size: 2.8rem;
}

#intro-JOBBKK-Top .col-md-8:first-child,
#intro-JOBBKK-Top .col-lg-8:first-child {
  padding-left: 0;
}

#intro-JOBBKK-Top .col-md-4:last-child,
#intro-JOBBKK-Top .col-lg-4:last-child {
  padding-right: 0;
}

.intro-JOBBKK-Top-Banner figure {
  object-fit: cover;
}

.intro-JOBBKK-Top-Banner #carouselHeroBanner picture img {
  height: 250px;
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.BannerModal .img-size-bnModal {
  height: auto;
  border-radius: 0;
}

.BannerModal .modal-body {
  padding: 0;
}

.BannerModal .close {
  background-color: #ff1111;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50px;
  width: 35px;
  height: 35px;
  opacity: 1;
  position: absolute;
  right: -18px;
  top: -18px;
}

.BannerModal .close i {
  font-size: 25px;
}

#urgent-jobs .cards-wrapper {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1.6rem;
}

#urgent-jobs a.card {
  height: 230px;
  border: 1px solid var(--clr-gray-3);
}

#urgent-jobs a.card:hover {
  box-shadow: 0px 4px 8px rgba(154, 170, 207, 80%);
  border-radius: 1.6rem;
  transition: 0.3s ease-in-out;
  margin-top: -5px;
}

#urgent-jobs a.card figure {
  width: 17rem;
  height: 17rem;
  border-radius: 1rem 1rem 0 0;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: auto;
}

#urgent-jobs .card img.card-img-top {
  object-fit: cover;
  position: relative;
}

#urgent-jobs .card .card-body {
  border-radius: 0 0 1rem 1rem;
  height: 60px;
  padding: 0.6rem 1rem;
  font-family: "DB-HeaventRounded-Med"
}

#urgent-jobs .card .card-body .card-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#urgent-jobs .carousel-indicators {
  bottom: -3rem;
}

.urgent-logo {
  position: absolute;
  width: 55px;
  z-index: 1;
  right: 1rem;
  bottom: 7.4rem;
  background-color: var(--clr-white);
  border-radius: 0.5rem;

}

.urgent-logo img {
  max-width: 100%;
  margin-block: auto;
  margin-inline: auto;
  border-radius: 0.5rem;
  object-fit: scale-down;
  height: 55px;
  border: 1px solid #dbdfec;
}

#urgent-jobs .carousel-inner {
  padding-block: 0.5rem;
  padding-inline: 0.25rem;
}

.premium-company-Banner ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.6rem;
}

.banner-deco {
  border-radius: 1rem;
  border: 1px solid #dbdfec;
  width: 100%;
}

.premium-company-Banner a img:hover {
  box-shadow: 0 4px 8px rgba(154, 170, 207, 80%);
  margin-top: -5px;
  border-radius: 1rem;
  transition: 0.3s ease-in-out;
}

#coty .cards-wrapper {
  display: grid;
  grid-gap: 1.6rem;
  grid-template-columns: repeat(5, 1fr);
}

#coty a.card {
  height: 431px;
  border: none;
  width: 243px;
}

#coty a.card:hover {
  box-shadow: 0px 4px 8px rgba(154, 170, 207, 80%);
  border-radius: 1.6rem;
  transition: 0.3s ease-in-out;
  margin-top: -5px;
}

#coty .card img.card-img-top {
  border-radius: 1rem 1rem 0 0;
  max-width: 100%;
  object-fit: cover;
  position: relative;
  height: 400px;
  width: 300px;
}

#coty .card .card-body {
  border-radius: 0 0 1rem 1rem;
  max-height: 180px;
  padding: 0;
  position: absolute;
  bottom: 0;
}

#coty .card .card-body img {
  border-radius: 0 0 1rem 1rem;
  width: 100%;
}

#coty .card .card-body .card-text {
  position: absolute;
  bottom: 0;
  font-size: 2.4rem;
  min-height: 85px;
}

#coty .carousel-indicators {
  bottom: -3rem;
}

#coty .coty-badge {
  position: absolute;
  z-index: 1;
  right: 1rem;
  top: 1rem;
  background-color: var(--clr-white);
  border-radius: 3.2rem;
  min-height: 2.4rem;
  background: var(--clr-primary);
  padding: 0.5rem 1rem;
  font-family: "DB-HeaventRounded-Med";
}

#coty .coty-badge.font-detail {
  font-size: 16px;
}

#coty .coty-logo {
  position: absolute;
  width: 85px;
  z-index: 1;
  left: 1rem;
  bottom: 8rem;
  background-color: var(--clr-white);
  border-radius: 0.5rem;
}

.coty-logo img {
  max-width: 100%;
  margin-block: auto;
  margin-inline: auto;
  border-radius: 0.5rem;
  object-fit: scale-down;
  height: 85px;
  border: 1px solid #dbdfec;
}

#coty .carousel-inner {
  padding-block: 0.5rem;
  padding-inline: 0.25rem;
}

#hot-career .cards-wrapper {
  display: flex;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
}

#hot-career .cards-wrapper a {
  border-radius: var(--Spacing-spacing-2, 8px);
  border: 1px solid var(--Color-Border, #DBDFEC);
  background: #FFF;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  color: var(--clr-gray-5);
}

#hot-career .cards-wrapper a b {
  color: var(--clr-black-1)
}

#hot-career .card img.card-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

#hot-career .card .card-body {
  border-radius: 0 1rem 1rem 0;
  max-width: 100%;
  align-items: stretch;
  padding: 1rem;
}

#hot-career .card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  height: 100%;
  justify-content: space-between;
}

#hot-career .font-default {
  color: var(--clr-black-1);
}

#hot-career .card-text p:first-child {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-family: "DB-HeaventRounded-Med";
}

#hot-career .card-text p:last-child {
  margin-top: 10px;
}

#hot-career .carousel-indicators {
  bottom: -3rem;
}

.part-time-box ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1.6rem;
}

.part-time-box a {
  color: var(--clr-black-1);
  border-radius: 1rem;
  border: 1px solid #dbdfec;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.part-time-box a:hover {
  box-shadow: 0 4px 8px rgba(154, 170, 207, 80%);
  margin-top: -5px;
}

.part-time-box figure {
  height: 135px;
}

.part-time-box img {
  border-radius: 1rem 1rem 0 0;
  height: 135px;
  width: 100%;
}

.part-time-box .part-time-detail {
  height: 95px;
  border-radius: 0 0 1rem 1rem;
  width: 100%;
  font-family: "DB-HeaventRounded-Med";
}

.regional-job ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.6rem;
}

.regional-job a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
  color: var(--clr-black-1);
  font-size: var(--font-medium);
}

.regional-job a:hover {
  transform: scale(1.03)
}

.regional-job img {
  border-radius: 1rem 1rem 0 0;
  width: 100%;
  object-fit: fill;
}

.regional-name {
  width: 100%;
  border-radius: 0 0 1rem 1rem;
  font-family: "DB-HeaventRounded-Med";
}

.regional-name div {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-radius: 0.4rem;
  padding: 5px;
  transition: ease-in .5s;
  font-size: var(--font-detail);
  font-family: "DB-HeaventRounded-Bold";
}

.knowledge-section ul {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-gap: 1.6rem;
  position: relative;
}

.knowledge-section a {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #dbdfec;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--clr-gray-5);
  height: 100%;
  position: relative;
  background: var(--clr-white);
}

.knowledge-section a img {
  object-fit: scale-down;
  padding: 5px;
}

.knowledge-detail {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  position: relative;
}

.knowledge-detail span,
.knowledge-section .knowledge-secondary span {
  color: var(--clr-black-1);
  font-size: 2.4rem;
  font-family: "DB-HeaventRounded-Med";
}

.pin-knowledge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--clr-primary);
  width: 50px;
  height: 50px;
  color: var(--clr-white);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 1rem 0;
  opacity: 0.9;
}

.pin-knowledge .fa-thumb-tack {
  transform: rotate(45deg);
  font-size: 2.4rem;
}

.knowledge-published-date {
  padding: 10px;
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  font-size: 2rem;
}

.knowledge-section .knowledge-secondary ul {
  display: flex;
  flex-direction: column;
}

.knowledge-section .knowledge-secondary ul li a {
  display: flex;
  gap: 1.6rem;
  border-radius: 0.5rem;
  flex-direction: row;
  align-items: start;
}

.knowledge-section .knowledge-secondary ul li a img {
  object-fit: cover;
  padding: 0;
  max-width: 207px;
  border-radius: 0.5rem;
  height: 116px;
}

.knowledge-secondary .knowledge-detail {
  align-items: stretch;
  padding: 1rem;
  margin-bottom: 0;
}

.knowledge-secondary .knowledge-detail .knowledge-detail-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.knowledge-secondary .knowledge-detail .knowledge-published-date {
  padding: 1.6rem 0 0;
  position: relative;
}

.best-company-logo ul li img {
  border: 1px solid #e5e3e3;
  border-radius: 6px;
}

.best-company-logo ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1.6rem;
}

.best-company-logo a {
  overflow: hidden;
}

.best-company-logo a:hover {
  box-shadow: 0 4px 8px rgba(154, 170, 207, 80%);
  margin-top: -5px;
  border-radius: 1rem;
  transition: 0.3s ease-in-out;
}

.best-company-logo img {
  width: 100%;
}

.partner-logo ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1.6rem;
}

.partner-logo a {
  overflow: hidden;
}

.partner-logo a:hover {
  box-shadow: 0 4px 8px rgba(154, 170, 207, 80%);
  margin-top: -5px;
  border-radius: 1rem;
  transition: 0.3s ease-in-out;
}

.partner-logo img {
  width: 100%;
  height: 168px;
  object-fit: scale-down;
}

.partner-logo-business ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1.6rem;
}

.partner-logo-business a {
  overflow: hidden;
}

.partner-logo-business ul li img {
  border: 1px solid #e5e3e3;
  border-radius: 6px;
}

.partner-logo-business a:hover {
  box-shadow: 0 4px 8px rgba(154, 170, 207, 80%);
  margin-top: -5px;
  border-radius: 1rem;
  transition: 0.3s ease-in-out;
}

.partner-logo-business img {
  width: 100%;
  height: 168px;
  object-fit: scale-down;
}

#search-job-with-JOBBKK .hilightSec {
  color: #ff1111;
  line-height: 1;
}

#search-job-with-JOBBKK .hilightSec .textup {
  font-size: 3.6rem;
}

#search-job-with-JOBBKK .hilightSec .textdown {
  font-size: 6.4rem;
}

#search-job-with-JOBBKK h2,
#search-job-with-JOBBKK h1 {
  font-size: 3.2rem;
}

#search-job-with-JOBBKK .intro-1 .col-md-3,
#search-job-with-JOBBKK .intro-2 .col-md-3:first-child {
  padding-left: 0;
}

#search-job-with-JOBBKK .intro-1 .col-md-9,
#search-job-with-JOBBKK .intro-2 .col-md-3:last-child {
  padding-right: 0;
}

#search-job-with-JOBBKK a {
  display: inline;
  color: #777;
  text-decoration: underline !important;
}

#search-job-with-JOBBKK .intro-2 {
  margin-top: 3rem;
}

#job-urgentQ {
  background-image: linear-gradient(to right, #ff1111, #d40101);
}

#job-urgentQ .container {
  padding-block: 0.5rem;
}

#job-urgentQ a.JUQ-button {
  background: var(--clr-white);
  border-radius: 3.2rem;
  min-height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 3.2rem;
}

#job-urgentQ a.JUQ-button span {
  background-image: linear-gradient(to right, #ff1111, #d40101);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#menu-footer .container {
  color: var(--clr-gray-5);
}

#menu-footer .container b {
  color: var(--clr-black-2);
  font-family: "DB-HeaventRounded-Bold";
}

#menu-footer .container li a {
  color: var(--clr-gray-5) !important;
}

#menu-footer .col-md-3:first-child {
  padding-left: 0;
}

#menu-footer .col-md-3:last-child {
  padding-right: 0;
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 8rem;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, .8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  z-index: 99999
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s
}

.cd-top.cd-is-visible {
  visibility: visible;
  opacity: 1
}

.cd-top.cd-fade-out {
  opacity: 1
}

.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1
}

.chat_staff {
  color-scheme: light;
  width: 48px;
  height: 50px;
  padding: 0px;
  margin: 10px 0px;
  position: fixed;
  bottom: 0px;
  overflow: visible;
  opacity: 1;
  border: 0px;
  z-index: 15;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-property: opacity, top, bottom;
  right: 10px;
}

.button-chat {
  background-color: #ff1111;
  color: #FFFFFF;
  fill: #FFFFFF;
  border-radius: 999rem;
  bottom: 0;
  letter-spacing: 0.6;
  padding: 0.92857rem 1.57143rem;
  box-shadow: 0 0 8px rgba(51, 51, 51, 80%);
}

.button-chat svg {
  color: #FFFFFF;
  fill: #FFFFFF;
  min-width: 2.8rem;
  min-height: 2.8rem;
  height: 2.8rem;
  width: 2.8rem;
}

@media (max-width: 1280px) {

  #search-job-box .container,
  #home-content .container,
  #job-urgentQ .container,
  #menu-footer .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .banner1280 .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #urgent-jobs a.card figure {
    width: 100%;
  }

  #intro-JOBBKK-Top .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
  }
}

@media (min-width: 1280px) {
  .d-hero {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  #urgent-jobs a.card figure {
    max-height: 15rem;
  }

  .d-1280-block {
    display: block !important;
  }

  .d-1280-none {
    display: none !important;
  }
}

@media (max-width: 1266px) {
  .premium-company-Banner figure {
    width: 100%;
  }

  .regional-job img {
    height: auto;
  }

  .partner-logo img {
    height: auto;
  }

  .partner-logo-business img {
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  #coty .card img.card-img-top {
    height: 420px;
  }
}

@media (max-width: 991px) {

  .ham-logo .navbar-toggler {
    padding: 0.25rem 0;
  }

  #intro-JOBBKK-Top .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
  }

  #intro-JOBBKK-Top .col-lg-4:last-child {
    padding-left: 0;
  }


  #urgent-jobs .caroutablet .cards-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  .premium-company-Banner ul {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  }

  #hot-career .caroutablet .cards-wrapper {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.6rem;
  }

  #urgent-jobs a.card {
    height: auto;
    max-height: 200px;
  }

  #coty .caroutablet .cards-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  #coty .caroutablet a.card {
    width: 100%;
  }

  .part-time-box ul {
    grid-template-columns: repeat(7, 165px);
    overflow-x: auto;
  }

  .regional-job ul {
    overflow-x: auto;
    grid-template-columns: repeat(4, 33.3333333%);
  }

  .knowledge-section ul {
    grid-template-columns: 1fr;
  }

  .best-company-logo ul {
    overflow-x: auto;
    grid-template-columns: repeat(7, 110px);
  }

  .partner-logo ul {
    overflow-x: auto;
    grid-template-columns: repeat(7, 110px);
  }

  .partner-logo-business ul {
    overflow-x: auto;
    grid-template-columns: repeat(7, 110px);
  }

  #search-job-with-JOBBKK .hilightSec .textup {
    font-size: 2.8rem;
  }

  #search-job-with-JOBBKK .hilightSec .textdown {
    font-size: 4.8rem;
  }
}

@media (max-width: 767px) {
  .intro-JOBBKK-Top-Banner {
    margin-top: 2rem;
    justify-content: center;
  }

  #intro-JOBBKK-Top .col-md-6:first-child {
    padding-right: 0;
  }

  #intro-JOBBKK-Top .col-md-6:last-child {
    padding-left: 0;
  }

  .premium-company-Banner {
    justify-content: center;
    gap: 2rem;
  }

  #coty .caroutablet a.card {
    height: 400px;
    border: none;
  }

  *#coty .caroutablet .card img.card-img-top {
    height: 390px;
  }

  #coty .card .card-body {
    bottom: 0;
  }

  #hot-career .cards-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .regional-job ul {
    grid-template-columns: repeat(4, 40%);
  }

  .knowledge-section a {
    border: none;
    border-radius: 0;
  }

  .knowledge-main {
    border-bottom: 1px solid #dbdfec;
    padding-bottom: 2rem;
  }

  .knowledge-detail-desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .knowledge-secondary.knowledge-mobile li {
    border-bottom: 1px solid #c0c2c9;
  }

  .knowledge-secondary.knowledge-mobile li a img {
    border-radius: 0.5rem;
    max-height: 70px;
    height: auto;
    border: 1px solid #c0c2c9;
  }

  .knowledge-mobile .knowledge-published-date {
    padding: 10px 0;
    position: relative;
    bottom: 0;
    display: flex;
    width: 100%;
    font-size: 2rem;
  }

  .knowledge-mobile .knowledge-detail-header b {
    font-size: 2.2rem;
  }

  #search-job-with-JOBBKK h2,
  #search-job-with-JOBBKK h1 {
    font-size: var(--font-medium) !important;
  }

  #search-job-with-JOBBKK .hilightSec .textup {
    font-size: 2.4rem;
  }

  #search-job-with-JOBBKK .hilightSec .textdown {
    font-size: 3.2rem;
  }

  .sm-convert-column {
    flex-direction: column;
  }

  #search-job-with-JOBBKK .sm-convert-column.intro-2 .col-md-3,
  #search-job-with-JOBBKK .intro-2 .col-md-3 {
    border-top: 1px solid var(--clr-gray-4);
    padding-block: 2rem;
  }

  #search-job-with-JOBBKK .gap-7 {
    gap: 1rem;
  }

  #search-job-with-JOBBKK .intro-1 .col-md-9,
  #search-job-with-JOBBKK .intro-2 .col-md-3 {
    padding-inline: 0;
  }

  a#more-sjdf-detail {
    font-size: var(--font-default);
    text-decoration: none !important;
  }

  #more-sjdf-detail.btn {
    padding: 0;
    line-height: 1.1;
    border: 0 solid transparent;
  }

  .toVanished {
    transition: opacity 0.5s ease-out;
    opacity: 0;
  }

  .before-collapsed {
    position: absolute;
    bottom: 0.25px;
    left: 50px;
  }

  .after-collapsed {
    position: relative;
    bottom: 0;
    left: 0;
  }
}

@media (max-width: 679px) {
  #coty .caroutablet a.card {
    height: 350px;
    border: none;
  }

  #coty .caroutablet .card img.card-img-top {
    height: 340px;
  }

  #coty .coty-logo {
    width: 88px;
  }

  .coty-logo img {
    height: auto;
    max-height: 88px;
  }

  #coty .card .card-text {
    line-height: 1;
  }

  #coty .card .card-text.pa-4 {
    padding: 1rem !important;
  }
}


@media (max-width: 576px) {
  button.button-medium.more-all {
    white-space: nowrap;
  }

  #home-content h2 {
    font-size: 2.6rem;
  }

  #urgent-jobs .caroumobile .cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  #urgent-jobs .caroumobile a.card {
    width: 100%;
    height: auto;
    max-height: 230px;
  }

  .urgent-logo {
    width: 45px;
  }

  .urgent-logo img {
    height: 45px;
  }

  .premium-company-Banner ul {
    grid-template-columns: 1fr;
  }

  #coty .caroumobile .cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  #coty .caroumobile a.card {
    height: 450px;
    border: none;
  }

  #coty .caroumobile .card img.card-img-top {
    height: 440px;
  }

  #coty .card .card-body {
    bottom: 0rem;
  }

  .regional-job ul {
    grid-template-columns: repeat(4, 45%);
  }

  .regional-name {
    flex-direction: column;
  }

  .regional-name div {
    margin-top: 1rem;
  }

  #job-urgentQ .d-flex.gap-7 {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  #job-urgentQ a.JUQ-button {
    width: 160px;
    margin-inline: auto;
  }

  #search-job-with-JOBBKK .d-flex.d-none {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #coty .caroumobile a.card {
    border: none;
    width: 243px;
  }

  #coty .card img.card-img-top {
    width: 243px;
  }
}

@media (max-width: 400px) {}

.border-hero-banner,
.border-ads-banner {
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 451px) {
  .name-topic-eng-text {
    display: block;
  }
}

@media (max-width: 388px) {
  .name-topic-eng-text-2 {
    display: block;
  }
}