:root {
        --orange-500: #DD530F;
        --gray-900: #121212;
        --gray-500: #333;
        --gray-100: #D9D9D9;
      }
      body { font-family: Roboto, Arial, sans-serif; margin: 0; background: #fff; color: #121212; }
      .wrapper { max-width: 1440px; margin: 0 auto; padding: 24px 0; }

      /* Banner */
      .banner { width: 1440px; height: 400px; margin: 0 auto 80px; position: relative; display: flex; align-items: center; justify-content: center; background-image: url('https://phenika-storage.s3.ap-southeast-2.amazonaws.com/uploads/f80ff13c-feda-4279-9bc1-f486dc79e674.png'); background-size: cover; background-position: center; }
      .banner::after { content: ""; position: absolute; inset: 0; background: #171717; opacity: .65; }
      .banner-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
      .breadcrumb { color: #EDEDED; font-size: 14px; line-height: 20px; }
      .banner-title { color: #FFF; font-size: 40px; font-weight: 700; line-height: 48px; }

      /* Header + tabs */
      .header { text-align: center; font-size: 40px; font-weight: 700 }
      .tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; }
      .tab { border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 16px; border: 2px solid #ffc9ae; color: #121212; background: #F9F9F9; }
      .tab.active { color: var(--orange-500); background: #FFF4EC; }

      /* Card list */
      .list { display: flex; flex-direction: column; gap: 12px; }
      .card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: #FFFFFF; border: 2px solid #e6a37f; border-radius: 12px; padding: 32px 24px; color: #3d3d3d; transition: background .2s ease; }
      .card:hover { background: #FFF4EC; }
      .card-top { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
      .status { width: max-content; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
      .status.done { background: #ECFDF3; color: #027A48; }
      .status.open { background: #FFF4EC; color: var(--orange-500); }
      .cta-link { display: flex; align-items: center; gap: 8px; border: 2px solid #c7602f; border-radius: 10px; padding: 10px 14px; text-decoration: none; background: #fff6ee; font-weight: 700; color: var(--orange-500); }
      .cta-link:hover {background: #dd530f;color: #fff}
      .title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
      .title-row h3 { margin: 0; font-size: 22px; font-weight: 700;max-width: fit-content; }
      .tag { background: #fde5d8; color: #dd530f; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 10px; }
      .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
      .meta p { display: flex; align-items: center; gap: 8px; margin: 0; color: #5b5b5b; }
      .divider { width: 1px; height: 20px; background: #e6a37f; opacity: .6; }

      /* Pagination */
      .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
      .page-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; border: 1px solid #F0F0F0; background: #fff; color: #333; font-weight: 800; font-size: 12px; }
      .page-btn.active { background: var(--orange-500); color: #fff; border: none; }
      .dots { padding: 0 6px; color: #8c8c8c; display: flex; align-items: center; }

      /* Bottom CTA wrapper */
      .cta-wrap { width: 1440px; height: 368px; padding: 80px 120px; box-sizing: border-box; margin: 40px auto 0; background-image: url('https://phenika-storage.s3.ap-southeast-2.amazonaws.com/uploads/111d0eea-38f8-44f2-aaee-92965209dacd.png'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: flex-start; border-radius: 12px; }
      .cta-card { display: flex; width: 690px; padding: 24px 32px; flex-direction: column; align-items: flex-start; gap: 18px; border-radius: 16px; border: 1px solid var(--gray-100); background: #FFF; box-sizing: border-box; }
      .cta-title { color: var(--gray-900); font-size: 40px; font-weight: 700; line-height: 48px; }
      .cta-desc { color: var(--gray-500); text-align: justify; font-size: 16px; line-height: 24px; }
      .cta-button { display: flex; padding: 12px 24px; justify-content: center; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid var(--orange-500); background: #FFF; box-shadow: 0 1px 2px 0 rgba(16,24,40,0.05); color: var(--orange-500); font-size: 16px; font-weight: 700; line-height: 24px; text-decoration: none; }

body {
    margin: 0px;
}

p {
    margin: 0;
}

.gap-20px{
    gap: 20px;
}

.mb-24px {
    margin-bottom: 24px;
}

.sec-1-jobdetail {
    padding: 48px 0px;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.mb-16px {
    margin-bottom: 16px;
}

.column-t-t {
    flex-direction: column;
} 

.gap-32px {
    gap: 32px;
}

.gap-12px {
    gap: 12px;
}

.gap-8px {
    gap: 8px;
}

.text-bread-scrumbs-t a{
    color: var(--Gray-300, #A6A6A6) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
}

.text-bread-scrumbs-t {
    color: var(--Gray-300, #A6A6A6) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.row-t-css {
    max-width: 1260px;
    margin: auto;
}

.gap-16px {
    gap: 16px;
}

.gap-24px {
    gap: 24px;
}

.prl-15 {
    padding: 0px 15px;
}

.gap-4px {
    gap: 4px;
}

.name-job-t {
    color: var(--Gray-800, #1A1A1A);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px;
}

.job-map-name {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.icon-text-job span {
    color: var(--Gray-700, #383535);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
}

.devider-t {
    color: #EDEDED;
}

.justify-beetween {
    justify-content: space-between;
}

.btn-applyJob-t button{
    padding: 12px 24px;
    border-radius: 8px;
border: 1px solid var(--Orange-500, #DD530F);
background: transparent;
}

.btn-applyJob-t button span{
   color: var(--Orange-500, #DD530F);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; 
}

.pb-24px {
    padding-bottom: 24px;
}

.bor-b-first {
border-bottom: 1px solid var(--Gray-50, #F0F0F0);
}

.Information-ttc {
    border-left: 3px solid var(--Orange-500, #DD530F);
padding-left: 12px;
}

.Information-ttc span {
color: var(--Orange-500, #DD530F);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px;
}

.icon-information-t {
border-radius: 24px;
background: var(--Orange-25, #FFF4EC);   
padding: 12px;
}

.information-icon-t span:first-child {
    color: var(--Gray-500, #333);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.information-icon-t span:last-child {
 color: var(--Gray-500, #333);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; 
}

.ul-information-t {
    margin: 0;
    padding-left: 32px;
}

.ul-information-t li{
color: var(--Gray-500, #333);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

/*  */

.sec-2-jobdetail {
    padding-bottom: 80px;
}

.status-tt {
padding: 2px 8px;
border-radius: 16px;
border: 1px solid var(--Orange-100, #FFD1AE);
background: var(--Orange-25, #FFF4EC);
color: var(--Orange-500, #DD530F);
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px; 
}

.list-job-t-t {
    border-radius: 8px;
border: 1px solid var(--Orange-100, #FFD1AE);
background: var(--White, #FFF);
padding: 32px 24px;
}

.list-job-t-t:hover {
    background: var(--Orange-25, #FFF4EC);
}

.btn-applyJob-t:hover button {
    cursor: pointer;
}

.hover-btn-applyJob-t:hover button {
border: 1px solid var(--Orange-500, #DD530F);
    background: var(--Orange-500, #DD530F);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.hover-btn-applyJob-t:hover button span {
    color: white;
}

.hover-btn-applyJob-t:hover button  svg path {
    stroke: white;
}

@media screen and (max-width: 1024px) {
        .banner {
          background: url('https://firebasestorage.googleapis.com/v0/b/housefly-d7265.appspot.com/o/recruitment%2020124.png?alt=media&token=217cf355-f558-470c-b93a-48551f5e9ee1');
          background-repeat: no-repeat;
          background-size: cover;
          width: 100%;
          height: 400px;
          display: flex;
          flex-direction: column;
          justify-content: end;
          padding-bottom: 48px;
        }

        .breadcrumb {
          color: #ededed;
          text-align: center;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px;
        }

        .banner-title {
          color: #ffffff;
          font-family: Roboto;
          font-size: 32px;
          font-style: normal;
          font-weight: 700;
          line-height: 40px;
        }

        .header {
          color: #121212;
          font-size: 32px;
          font-style: normal;
          font-weight: 700;
          line-height: 40px;
        }

        .tabs {
          flex-wrap: wrap;
        }

        .tab {
          color: #121212;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 24px;
          width: fit-content;
        }

        .tab.active {
          color: #dd530f;
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 24px;
        }

        .list {
          padding: 0 16px;
        }

        .card {
          padding: 20px;
        }

        .status {
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: 18px;
          padding: 2px 8px;
          border-radius: 16px;
        }

        .cta-link {
          display: none;
        }

        .title-row {
          display: flex;
          align-items: start;
          flex-direction: column;
          gap: 8px;
        }

        .title-row h3 {
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px;
        }

        .meta svg {
          width: 20px;
          height: 20px;
        }

        .meta span {
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 20px;
        }

        .page-btn {
          width: 40px;
          height: 40px;
          padding: 12px;
          border-radius: 24px;
          border: 1px solid #f0f0f0;
          background: #fff;
        }

        .page-btn.active {
          width: 40px;
          padding: 10px 0;
          border-radius: 24px;
          background: #dd530f;
        }
      }