/* ============================================================
   TechTide — Careers (page-careers.php)
   Hero + Core team + eyebrow → dùng style từ about.css (đã enqueue kèm).
   Modal + ô form (.tt-field/.tt-consent/.tt-modal…) → từ home.css.
   File này: What you can expect · Jobs (tag + thẻ) · Apply modal extras.
   ============================================================ */

/* ===================== WHAT YOU CAN EXPECT ===================== */
.tt-cr-perks{ border-top: 1px solid var(--tt-line); background: var(--tt-bg-soft); padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.tt-cr-perks__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-cr-perks__head{ max-width: 760px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.tt-cr-perks__title{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; margin: 0 0 1rem; }
.tt-cr-perks__lead{ color: rgba(0, 0, 0, .55); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.tt-cr-perks__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 2.5vw, 2rem); }
.tt-cr-perk{ border-top: 2px solid var(--tt-ink); padding-top: 1.3rem; }
.tt-cr-perk__title{ font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0 0 .6rem; }
.tt-cr-perk__desc{ color: rgba(0, 0, 0, .55); font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; }
.tt-cr-perk__tag{ display: inline-block; font-family: var(--tt-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-ink-soft); }

/* ===================== JOBS ===================== */
.tt-jobs{ border-top: 1px solid var(--tt-line); padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.tt-jobs__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-jobs__head{ max-width: 720px; margin: 0 auto clamp(2rem, 3vw, 2.5rem); text-align: center; }
.tt-jobs__title{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; margin: 0 0 1rem; }
.tt-jobs__sub{ color: rgba(0, 0, 0, .55); font-size: 1.05rem; line-height: 1.55; margin: 0; }

.tt-jobs__filters{ display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 820px; margin: 0 auto clamp(2rem, 3vw, 2.75rem); }
.tt-jobtag{ font-family: var(--tt-font-body); font-size: .85rem; font-weight: 500; line-height: 1; color: var(--tt-ink); background: #fff; border: 1px solid var(--tt-line); border-radius: 999px; padding: .55rem 1rem; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.tt-jobtag:hover{ border-color: var(--tt-ink); }
.tt-jobtag.is-active{ background: var(--tt-ink); border-color: var(--tt-ink); color: #fff; }
.tt-jobtag:focus-visible{ outline: 2px solid var(--tt-accent); outline-offset: 2px; }

.tt-jobs__grid{ display: flex; flex-direction: column; gap: 1rem; max-width: 920px; margin-inline: auto; }
.tt-job{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; text-align: left; background: #fff; border: 1px solid #e2e2de; border-radius: 10px; padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tt-job:hover{ transform: translateY(-2px); border-color: #d4d4cf; box-shadow: rgba(0, 0, 0, .1) 0 8px 20px -6px, rgba(0, 0, 0, .06) 0 2px 4px -2px; }
.tt-job:focus-visible{ outline: 2px solid var(--tt-accent); outline-offset: 3px; }
.tt-job__main{ display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tt-job__title{ font-family: var(--tt-font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--tt-ink); }
.tt-job__meta{ font-size: .875rem; color: var(--tt-ink-soft); }
.tt-job__cta{ flex: 0 0 auto; font-size: .95rem; font-weight: 600; color: var(--tt-ink); white-space: nowrap; }

/* ===================== APPLY MODAL (mở rộng .tt-modal__panel của home.css) ===================== */
.tt-applym__panel{ max-width: 680px; max-height: 90vh; overflow-y: auto; }
.tt-applym__eyebrow{ font-family: var(--tt-font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-ink-soft); margin: 0 0 .6rem; }
.tt-applym__title{ font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.2; letter-spacing: normal; margin: 0 0 1.25rem; }
.tt-applym__jd{ color: #2c2c2c; }
.tt-applym__roleline{ font-family: var(--tt-font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--tt-ink-soft); margin: 0 0 1rem; }
.tt-applym__lead{ font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.25rem; }
.tt-applym__jd h4{ font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.tt-applym__jd ul{ margin: 0 0 .5rem; padding-left: 1.15rem; }
.tt-applym__jd li{ font-size: .95rem; line-height: 1.55; margin: 0 0 .4rem; color: #2c2c2c; }

.tt-applym__formh{ font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 1.75rem 0 1.1rem; padding-top: 1.5rem; border-top: 1px solid var(--tt-line); }
.tt-field__hint{ font-size: .8rem; color: var(--tt-ink-soft); margin: .4rem 0 0; }
/* Ô chọn file tự vẽ (ẩn input gốc → khỏi lệ thuộc ngôn ngữ trình duyệt; chữ tiếng Anh mình kiểm soát) */
.tt-file{ display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tt-file__input{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tt-file__btn{ display: inline-flex; align-items: center; font-family: var(--tt-font-body); font-weight: 600; font-size: .85rem; padding: .5rem 1.1rem; border: 1px solid var(--tt-ink); border-radius: 999px; background: #fff; color: var(--tt-ink); cursor: pointer; transition: background .15s ease, color .15s ease; }
.tt-file__btn:hover{ background: var(--tt-ink); color: #fff; }
.tt-file__input:focus-visible + .tt-file__btn{ outline: 2px solid var(--tt-accent); outline-offset: 2px; }
.tt-file__name{ font-size: .85rem; color: var(--tt-ink-soft); word-break: break-word; }
.tt-applym__status{ font-size: .9rem; margin: .9rem 0 0; }
.tt-applym__status.is-ok{ color: #1a7f4b; }
.tt-applym__status.is-err{ color: #c0392b; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
	.tt-cr-perks__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
	.tt-cr-perks__grid{ grid-template-columns: 1fr; }
	.tt-job{ flex-direction: column; align-items: flex-start; gap: .6rem; }
}