/* Nút chi tiết */
.job-open-detail-btn {
  position: relative;
  max-width: 440px;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 5px;
  color: #111;
  border: 2px solid #006c4b;
  background: #fff;
  cursor: pointer;
  transition: 0.3s;
  margin-top: auto; /* Đẩy nút xuống đáy cột */
  align-self: flex-end; /* Canh phải */
}

.job-open-detail-btn:hover {
  transform: scale(1.05);
  background-color: #fff2f2;
  color: #a00000;
  border: 2px solid #a00000;
}
.job-open-detail-btn:hover::before {
  background-image: url('../image/長方形 579.png');
}
.job-open-detail-btn::before {
  position: absolute;
  content: '';
  background-image: url('../image/長方形 572.png');
  background-size: 50% auto;
  background-repeat: no-repeat;
  z-index: 3;
  width: 30px;
  height: 30px;
  bottom: -12px;
  right: -12px;
}

.job-open-heading {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  background: #f9f9f9;
}

.job-open-tab-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 cột */
  gap: 20px 30px; /* khoảng cách giữa nút */
  justify-items: center;
  margin-top: 20px;
}

/* Hàng đầu tiên có thể active nút đầu */
.job-open-detail-btn.active {
  color: #a00000;
  border-color: #a00000;
}

.job-open-detail-btn.active::before {
  background-image: url('../image/長方形 579.png');
}

.job-block-wrapper {
  background-color: #fff;
  padding: 14px 14px;
  position: relative;
  border-radius: 8px;
}

.job-image-wrapper{
  position: relative;
  width: 100%;
  height: 100%; /* chiều cao tùy chỉnh */
  min-height: 240px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}

.section-job-heading {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  background: #f9f9f9;
}
.section-job-heading {
  display: none;
}
.section-job-heading.active {
  display: block;
}
.job-block-wrapper .job-bg-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.job-block-wrapper .job-bg-dark {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 100%;
}
.job-block-wrapper .job-bg-table {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.job-block-wrapper .avatar-job-001{
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

.job-block-wrapper .avatar-job-002 {
  width: 50%;
  height: 50%;
  object-fit: cover;
 
}
.job-block-wrapper .avatar-job-003 {
  width: 100%;
  height: 100%;
  object-fit: cover;

}
/* Lớp ảnh */
.job-bg-light {
  z-index: 0;
  
}
.job-bg-dark {
  z-index: 3;
  opacity: 0.85; /* mờ để nhìn thấy nền */
}
.job-bg-table {
  z-index: 2;
}

/* Tiêu đề */
.job-title {
  z-index: 3;
  color: #ffffff;
  font-size: 50px;
  font-weight: bold;
  line-height: 1.3;
  font-family: monospace;
  padding: 16px;
  margin-top: 80px;
  letter-spacing: 2px;
  text-shadow: 6px 3px 2px rgba(0.1, 0.3, 0.2, 0.35);
  /* position: absolute;
  top:80px; */
}

/* --- Khối mô tả công việc --- */
.job-box p {
  margin: 14px 16px;
  line-height: 1.6;
}

.job-head {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.job-sub {
  font-weight: bold;
  font-size: 16px;
  margin-top: 15px;
}

.job-item {
  position: relative;
  padding-left: 1.2em;
}

.job-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000;
}

.job-table-wrapper {
  background: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow-x: auto;
}

.job-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.job-table th {
  width: 25%;
  background: #96c7b4; /* xanh lá như hình */
  color: #2d312f;
  padding: 14px 18px;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  border-right: 1px solid #f1f0f0;
}

.job-table td {
  padding: 14px 18px;
  background: #fff;
  vertical-align: top;
  line-height: 1.6;
  border-top: 1px solid #1e1e1e;
  border-bottom: 1px solid #1e1e1e;
}

.job-table tr {
  border-bottom: 1px solid #f1f0f0;
}

.job-header {
  position: relative;
  height: 200px;
  background-color: #fff; /* Màu nền giống phần chính */
  overflow: hidden;      /* Quan trọng: cho phép khung tràn */
}
.job-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 4%;
  left: -38%;
  z-index: 1;
}
/* Khung phụ đề */
.subtitle-frame-wrapper-job {
  position: absolute;
  top: 79%;
  left: -2%;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
}

.subtitle-frame-job {
  width: 100%;
  height: auto;
}

.subtitle-text-job {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: #222;
  white-space: nowrap;
}


.job-process-flow {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  margin-top: 60px;
  flex-wrap: nowrap;
}

.process-step {
  width: 150px;
  min-height: 190px;
  background: #fff;
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-header {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  left: 20%;
  bottom: 5%;
}

.step-bg {
  width: 100%;
  height: auto;
}

.step-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: white;
}

.step-main {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 8px;
  text-align: left;
  /* display: flex; */
}

.step-sub {
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.triangle-play {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #1a1a1a; /* màu tam giác */
  align-self: center;
}
.triangle-play-01 {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #1a1a1a; /* màu tam giác */
  align-self: center;
  display: none;
}
/* Responsive */
@media (max-width: 1024px) {
  .job-open-tab-menu {
    grid-template-columns: repeat(3, 1fr);
  }
  
}

@media (max-width: 768px) {
  .job-open-tab-menu {
    grid-template-columns: repeat(2, 1fr);
  }
  .job-title {
    font-size: 30px;
  }

  .job-process-flow {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-direction: column;
  }

  .process-step {
    width: 100%;
    align-items: flex-start;
  }

  .step-header{
    position: relative;
    width: 20%;
    margin-bottom: 10px;
    height: 20%;
    left: 84%;
  }
  .subtitle-frame-wrapper-job {
  top: 62%;
  left: -2%;
  width: 250px;
}
  .subtitle-text-job {

  font-size: 18px;

}
.triangle-play-01 {
  display: block;
}
.triangle-play{
  display: none;
}
}

@media (max-width: 700px) {
  .subtitle-frame-wrapper-job {
  top: 62%;
  left: -2%;
  width: 250px;
}
  .subtitle-text-job {

  font-size: 18px;

}
}

@media (max-width: 658px) {
  .subtitle-frame-wrapper-job {
  top: 64%;
  left: -2%;
  width: 222px;
}
  .subtitle-text-job {

  font-size: 18px;

}
}
@media (max-width: 600px) {
  .job-open-tab-menu {
    grid-template-columns: 1fr;
  }

  .subtitle-frame-wrapper-job {
  top: 64%;
  left: -2%;
  width: 250px;
}
.subtitle-text-job {

  font-size: 18px;

}

.step-header{
  position: relative;
  width: 22%;
  margin-bottom: 10px;
  height: 22%;
  left: 84%;
}

.step-title {
  font-size: 10px;
}
}

@media (max-width: 577px) {
  .subtitle-frame-wrapper-job {
      top: 65%;
      left: -2%;
      width: 222px;
  }
  .subtitle-text-job {

  font-size: 16px;

}
}


@media (max-width: 480px) {
  .job-open-tab-menu {
    grid-template-columns: 1fr;
  }
  .subtitle-frame-wrapper-job {
    top: 66%;
    left: -6%;
    width: 200px;
}
.subtitle-text-job {

  font-size: 16px;

}
}

@media (max-width: 444px) {

  .subtitle-frame-wrapper-job {
    top: 68%;
    left: -6%;
    width: 180px;
}
.subtitle-text-job {

  font-size: 15px;

}
}

@media (max-width: 430px) {

.step-header{
  position: relative;
  width: 25%;
  margin-bottom: 10px;
  height: 25%;
  left: 82%;
}

.step-title {
  font-size: 10px;
}

}

@media (max-width: 418px) {

  .subtitle-frame-wrapper-job {
    top: 69%;
    left: -6%;
    width: 180px;
}
.subtitle-text-job {
  font-size: 15px;
}
}

@media (max-width: 400px) {

  .subtitle-frame-wrapper-job {
    top: 70%;
    left: -6%;
    width: 180px;
}
.subtitle-text-job {
  font-size: 15px;
}
}

@media (max-width: 392px) {

.step-header{
  position: relative;
  width: 29%;
  margin-bottom: 10px;
  height: 29%;
  left: 80%;
}

.step-title {
  font-size: 10px;
}
}

@media (max-width: 375px) {

  .subtitle-frame-wrapper-job {
    top: 71%;
    left: -6%;
    width: 180px;
}
.subtitle-text-job {
  font-size: 15px;
}
}

@media (max-width: 360px) {

  .job-open-tab-menu {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 354px) {

  .subtitle-frame-wrapper-job {
      top: 73%;
      left: -6%;
      width: 150px;
  }
  .subtitle-text-job {

    font-size: 13px;

  }
}

@media (max-width: 352px) {

.step-header{
  position: relative;
  width: 30%;
  margin-bottom: 10px;
  height: 30%;
  left: 80%;
}

.step-title {
  font-size: 9px;
}
}


@media (max-width: 338px) {
    .subtitle-frame-wrapper-job {
        top: 73.7%;
        left: -6%;
        width: 140px;
    }
    .subtitle-text-job {

    font-size: 13px;

    }

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

.step-header{
  position: relative;
  width: 31%;
  margin-bottom: 10px;
  height: 31%;
  left: 80%;
}

.step-title {
  font-size: 8px;
}

.subtitle-frame-wrapper-job {
        top: 74%;
        left: -6%;
        width: 140px;
    }
.subtitle-text-job {

    font-size: 13px;

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

.step-header{
  position: relative;
  width: 31%;
  margin-bottom: 10px;
  height: 31%;
  left: 80%;
}

.step-title {
  font-size: 8px;
}
}
@media (max-width: 320px) {
    .subtitle-frame-wrapper-job {
        top: 75.6%;
        left: -6%;
        width: 140px;
    }
    .subtitle-text-job {
    font-size: 13px;
  }
}

@media (max-width: 305px) {
    .subtitle-frame-wrapper-job {
        top: 76%;
        left: -6%;
        width: 120px;
    }
    .subtitle-text-job {
    font-size: 9px;
  }
}

@media (max-width: 303px) {
    .subtitle-frame-wrapper-job {
        top: 77.3%;
        left: -6%;
        width: 120px;
    }
    .subtitle-text-job {
    font-size: 9px;
  }
}

@media (max-width: 299px) {

.step-header{
  position: relative;
  width: 32%;
  margin-bottom: 10px;
  height: 32%;
  left: 80%;
}

.step-title {
  font-size: 7px;
}
}

@media (max-width: 291px) {
    .subtitle-frame-wrapper-job {
        top: 78.2%;
        left: -6%;
        width: 120px;
    }
    .subtitle-text-job {
    font-size: 9px;
  }
}
@media (max-width: 276px) {

.step-header{
  position: relative;
  width: 34%;
  margin-bottom: 10px;
  height: 34%;
  left: 80%;
}

.step-title {
  font-size: 6px;
}
}

@media (max-width: 249px) {

.step-header{
  position: relative;
  width: 39%;
  margin-bottom: 10px;
  height: 39%;
  left: 77%;
}

.step-title {
  font-size: 6px;
}
}


@media (max-width: 236px) {

    .subtitle-frame-wrapper-job {
        top: 77.4%;
        left: -6%;
        width: 85px;
  }
    .subtitle-text-job {
    font-size: 7px;
  }
}

@media (max-width: 231px) {

.step-header{
  position: relative;
  width: 39%;
  margin-bottom: 10px;
  height: 39%;
  left: 77%;
}

.step-title {
  font-size: 5px;
}
}
@media (max-width: 220px) {
    .subtitle-frame-wrapper-job {
        top: 77.4%;
        left: -6%;
        width: 85px;
  }
    .subtitle-text-job {

    font-size: 8px;

  }
}

@media (max-width: 216px) {

.step-header{
  position: relative;
  width: 40%;
  margin-bottom: 10px;
  height: 40%;
  left: 79%;
}

.step-title {
  font-size: 4px;
}
}
@media (max-width: 213px) {
    .subtitle-frame-wrapper-job {
        top: 77%;
        left: -6%;
        width: 85px;
  }
    .subtitle-text-job {

    font-size: 8px;

  }
}

@media (max-width: 204px) {
    .subtitle-frame-wrapper-job {
        top: 76.4%;
        left: -6%;
        width: 85px;
  }
    .subtitle-text-job {

    font-size: 8px;

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

.step-header {
    position: relative;
    width: 60%;
    margin-bottom: 10px;
    height: 60%;
    left: 63%;
}

.step-title {
  font-size: 5px;
}

}

@media (max-width: 188px) {
    .subtitle-frame-wrapper-job {
        top: 75%;
        left: -6%;
        width: 76px;
  }
    .subtitle-text-job {

    font-size: 7px;

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

.step-header {
    position: relative;
    width: 60%;
    margin-bottom: 10px;
    height: 60%;
    left: 73%;
}

.step-title {
  font-size: 3px;
}
}


@media (max-width: 174px) {
      .subtitle-frame-wrapper-job {
        top: 75.6%;
        left: -6%;
        width: 70px;
  }
    .subtitle-text-job {

    font-size: 6px;

  }

}

@media (max-width: 172px) {
      .subtitle-frame-wrapper-job {
        top: 74.2%;
        left: -6%;
        width: 65px;
  }
    .subtitle-text-job {

    font-size: 6px;

  }
}

@media (max-width: 160px) {

.step-header {
    position: relative;
    width: 60%;
    margin-bottom: 10px;
    height: 60%;
    left: 85%;
}

.step-title {
  font-size: 2px;
}
}
@media (max-width: 158px) {
  .subtitle-frame-wrapper-job {
      top:75.5%;
      left: -6%;
      width: 55px;
  }
  .subtitle-text-job {
      font-size: 4px;
  }
}

@media (max-width: 156px) {
  .subtitle-frame-wrapper-job {
      top:72.3%;
      left: -6%;
      width: 55px;
  }
  .subtitle-text-job {
      font-size: 4px;
  }
}


@media (max-width: 150px) {

.step-header {
    position: relative;
    width: 70%;
    margin-bottom: 10px;
    height: 70%;
    left: 110%;
}

.step-title {
  font-size: 1px;
}
.subtitle-frame-wrapper-job {
      top:70.8%;
      left: -6%;
      width: 55px;
  }
  .subtitle-text-job {
      font-size: 4px;
  }
}

@media (max-width: 141px) {

.subtitle-frame-wrapper-job {
      top:71.1%;
      left: -6%;
      width: 45px;
  }
  .subtitle-text-job {
      font-size: 4px;
  }
}
@media (max-width: 140px) {
  .subtitle-frame-wrapper-job {
       top:73.3%;
      left: -6%;
      width: 45px;
  }
  .subtitle-text-job {
      font-size: 4px;
  }
}

@media (max-width: 139px) {
  .subtitle-frame-wrapper-job {
       top:73.6%;
      left: -6%;
      width: 45px;
  }
  .subtitle-text-job {
      font-size: 4px;
  }
}
@media (max-width: 129px) {

.step-header {
    position: relative;
    width: 70%;
    margin-bottom: 10px;
    height: 70%;
    left: 120%;
}

.step-title {
  font-size: 1px;
}


}