@font-face {
  font-family: "title-en";
  src: url(/fonts/LEMONMILK-Bold.woff2?685a9e90a68b6de6ac62816460deaf15) format("woff2"), url(/fonts/LEMONMILK-Bold.woff?f5d6482f0ead752f1315bb8ddf446328) format("woff"), url(/fonts/LEMONMILK-Bold.ttf?ac186d24ff4b86869fa151e9a6e4587b) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "text-bold-en";
  src: url(/fonts/LEMONMILK-RegularItalic.woff2?c2b4fe47bf26ae945dd06ffbfb20081f) format("woff2"), url(/fonts/LEMONMILK-RegularItalic.woff?3b7997d9d31f260740852dbdd8719553) format("woff"), url(/fonts/LEMONMILK-RegularItalic.ttf?6e1568f9b7c8490966f3642bbc6b8d0b) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "text-en";
  src: url(/fonts/Gotham-Book.woff2?2f2a87cad72b4cb948bda3bf3b3540f7) format("woff2"), url(/fonts/Gotham-Book.woff?7aad6194b2403429db61bcec46f74c2a) format("woff"), url(/fonts/Gotham-Book.ttf?dbd2f8521113a03c57aa79bac00f5d93) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "title-kh";
  src: url(/fonts/Dangrek.woff2?898a90821bdf10a7e6d2198f70073a88) format("woff2"), url(/fonts/Dangrek.woff?e1cd2be94be98ca6eaba82ffce1e8588) format("woff"), url(/fonts/Dangrek.ttf?f89c626ce9bacea8918b4dedce0931e1) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "text-bold-kh";
  src: url(/fonts/Kantumruy-Bold.woff2?0e3d6ea583862c3e387f0fec9097ced5) format("woff2"), url(/fonts/Kantumruy-Bold.woff?197f75ef79190708eb5e0c062ec3b5a6) format("woff"), url(/fonts/Kantumruy-Bold.ttf?5fa637e43f769d9d3ce1e505db6c3127) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "text-light-kh";
  src: url(/fonts/Kantumruy-Light.woff2?8849abec4a4e05e18cadeb432acb80a3) format("woff2"), url(/fonts/KantumruyLight.woff?af5b4903821b28ab62bea71bccd5860c) format("woff"), url(/fonts/KantumruyLight.ttf?b0312f0828970d39ef5dde7982a1bba6) format("truetype");
  font-weight: normal;
  font-style: normal;
}
.job-page {
  padding: 50px 0;
  min-height: 60vh;
}
.job-page .head {
  text-align: center;
  margin-bottom: 50px;
}
.job-page .head h1 {
  color: #354E76;
  margin-bottom: 20px;
  font-family: "title-en";
}
.job-page .head p {
  width: 80%;
  margin: 0 auto;
  font-family: "text-en";
  color: #333;
}
.job-page .job-table-container {
  width: 90%;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
}
.job-page .job-table {
  display: flex;
  flex-direction: column;
}
.job-page .job-table .header-row {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 3fr;
  gap: 20px;
  border-bottom: 2px solid #00a651;
  padding-bottom: 15px;
  margin-bottom: 10px;
}
.job-page .job-table .header-row .header-cell {
  color: #354E76;
  font-weight: bold;
  font-family: "title-en";
  text-align: left;
  text-transform: uppercase;
}
.job-page .job-table .header-row .header-cell:last-child {
  text-align: right;
}
.job-page .job-table .job-row {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 3fr;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.job-page .job-table .job-row:hover {
  background-color: #f9f9f9;
}
.job-page .job-table .job-row .cell {
  font-family: "text-en";
  color: #333;
  text-align: left;
}
.job-page .job-table .job-row .cell.title {
  font-weight: bold;
  color: #000;
}
.job-page .job-table .job-row .cell.actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.job-page .btn-job {
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  font-family: "title-en";
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
}
.job-page .btn-job.btn-jd {
  background-color: #fff;
  border: 1px solid #354E76;
  color: #354E76;
}
.job-page .btn-job.btn-jd:hover {
  background-color: #354E76;
  color: #fff;
}
.job-page .btn-job.btn-cv {
  background-color: #354E76;
  color: #fff;
  border: 1px solid #354E76;
}
.job-page .btn-job.btn-cv:hover {
  background-color: #235EBB;
  border-color: #235EBB;
}

@media (max-width: 992px) {
  .job-page .job-table .header-row {
    display: none;
  }
  .job-page .job-table .job-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    padding: 20px;
  }
  .job-page .job-table .job-row .cell {
    border: none;
    padding: 5px 0;
    width: 100%;
    text-align: left;
  }
  .job-page .job-table .job-row .cell.position::before {
    content: "Positions: ";
    font-weight: bold;
    color: #354E76;
  }
  .job-page .job-table .job-row .cell.deadline::before {
    content: "Deadline: ";
    font-weight: bold;
    color: #354E76;
  }
  .job-page .job-table .job-row .cell.actions {
    justify-content: flex-start;
    margin-top: 10px;
  }
}