/* MekongJob.com — visual system aligned to จดทะเบียนบริษัท.online */
:root{
  --mj-blue:#2a5298;
  --mj-blue-dark:#1e3c72;
  --mj-bg:#f4f6f9;
  --mj-text:#333333;
  --mj-muted:#667085;
  --mj-line:#e6e9ee;
  --mj-white:#ffffff;
  --mj-soft:#f8fafc;
}
html{background:var(--mj-bg)}
body{
  background:var(--mj-bg)!important;
  color:var(--mj-text)!important;
  font-family:'TH Sarabun New','Sarabun','Noto Sans Thai',Tahoma,sans-serif!important;
  font-size:20px!important;
  line-height:1.6!important;
}
body[data-lang="th"] *, body:not([data-lang]) *{
  font-family:'TH Sarabun New','Sarabun','Noto Sans Thai',Tahoma,sans-serif;
}
body[data-lang="lo"]{font-family:'Noto Sans Lao','Noto Sans',sans-serif!important;font-size:18px!important}
body[data-lang="my"]{font-family:'Noto Sans Myanmar','Noto Sans',sans-serif!important;font-size:18px!important}
body[data-lang="vi"]{font-family:'Be Vietnam Pro','Noto Sans',sans-serif!important;font-size:17px!important}
body[data-lang="en"]{font-family:'Noto Sans',sans-serif!important;font-size:17px!important}
body[data-lang="zh"]{font-family:'Noto Sans SC','Noto Sans',sans-serif!important;font-size:17px!important}
body[data-lang="ja"]{font-family:'Noto Sans JP','Noto Sans',sans-serif!important;font-size:17px!important}
body[data-lang="ko"]{font-family:'Noto Sans KR','Noto Sans',sans-serif!important;font-size:17px!important}
.display{font-family:inherit!important;font-weight:700!important}
#app{max-width:1100px!important;padding-bottom:72px!important}

/* Header */
.headband{
  background:linear-gradient(135deg,var(--mj-blue-dark) 0%,var(--mj-blue) 100%)!important;
  color:#fff!important;
  padding:28px 22px!important;
  border-bottom:0!important;
  box-shadow:0 4px 10px rgba(30,60,114,.18)!important;
}
.headband-inner{max-width:1100px!important}
.seal{border:2px solid rgba(255,255,255,.8)!important;background:rgba(255,255,255,.08)!important}
.brand-text h1{font-size:36px!important;line-height:1.1!important;font-weight:700!important;color:#fff!important}
.brand-text p{font-size:20px!important;color:rgba(255,255,255,.9)!important;line-height:1.25!important;margin-top:6px!important}
.lang-btn{border:1px solid rgba(255,255,255,.55)!important;color:#fff!important;font-size:17px!important;background:rgba(255,255,255,.06)!important}
.lang-btn:hover,.lang-btn.active{background:#fff!important;border-color:#fff!important;color:var(--mj-blue-dark)!important}

/* Navigation */
.navbar{background:#fff!important;border-bottom:1px solid #dfe5ee!important;box-shadow:0 2px 8px rgba(0,0,0,.045)!important}
.navbar-inner{max-width:1100px!important;min-height:54px!important}
.navbar a{color:var(--mj-blue-dark)!important;font-size:20px!important;padding:12px 0!important;border-bottom:3px solid transparent!important}
.navbar a:hover{color:var(--mj-blue)!important;border-bottom-color:var(--mj-blue)!important}

/* Progress */
.steps{max-width:1100px!important;margin-top:28px!important}
.step-pill{background:#fff!important;border:1px solid #dfe5ee!important;border-radius:8px!important;color:#64748b!important;font-size:18px!important;padding:10px!important;box-shadow:0 1px 2px rgba(0,0,0,.02)!important}
.step-pill .num{background:#e9eef6!important;color:var(--mj-blue-dark)!important;font-size:15px!important}
.step-pill.current{color:var(--mj-blue-dark)!important;border-color:var(--mj-blue)!important;box-shadow:0 0 0 3px rgba(42,82,152,.10)!important}
.step-pill.current .num,.step-pill.done .num{background:var(--mj-blue)!important;color:#fff!important}
.step-pill.done{color:var(--mj-blue)!important;border-color:#9cb1d2!important}

/* Main/cards */
main{max-width:1100px!important;padding-top:30px!important}
.card{
  background:#fff!important;
  border:1px solid var(--mj-line)!important;
  border-left:5px solid var(--mj-blue)!important;
  border-radius:8px!important;
  padding:30px!important;
  box-shadow:0 2px 10px rgba(0,0,0,.05)!important;
}
h2.section-title,.featured-header h2{font-size:30px!important;color:var(--mj-blue-dark)!important;font-weight:700!important}
p.section-sub,.featured-header p{font-size:20px!important;color:#667085!important}
.featured-section{border-bottom:1px solid #e8ebef!important}

/* Profession grid */
.prof-grid{gap:16px!important}
.prof-card{
  background:#fff!important;
  border:1px solid #dfe4eb!important;
  border-radius:8px!important;
  padding:20px 14px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.035)!important;
}
.prof-card:hover{border-color:var(--mj-blue)!important;box-shadow:0 6px 16px rgba(42,82,152,.10)!important}
.prof-card.selected{background:#f2f6fc!important;border:2px solid var(--mj-blue)!important;box-shadow:0 0 0 3px rgba(42,82,152,.08)!important}
.prof-icon{background:#f5f8fc!important;border:1px solid #d6dfec!important;border-radius:8px!important;box-shadow:none!important;color:var(--mj-blue-dark)!important}
.prof-icon .gold{stroke:var(--mj-blue)!important}
.prof-card .name{font-size:22px!important;color:#26364f!important;font-weight:700!important}

/* Applicants */
.applicant-card{background:#fff!important;border:1px solid #dfe4eb!important;border-radius:8px!important;box-shadow:0 2px 8px rgba(0,0,0,.04)!important}
.avatar-circle{background:linear-gradient(135deg,var(--mj-blue-dark),var(--mj-blue))!important}
.applicant-name{font-size:22px!important;color:var(--mj-blue-dark)!important}
.applicant-role{font-size:18px!important;color:var(--mj-blue)!important}
.applicant-location{font-size:17px!important;color:#64748b!important}
.applicant-skills span{background:#eef3f9!important;color:#41536f!important;font-size:16px!important}
.applicant-contact-btn{background:var(--mj-blue)!important;border-radius:5px!important;font-size:18px!important;padding:10px 16px!important}
.applicant-contact-btn:hover{background:var(--mj-blue-dark)!important;filter:none!important}
.list-me-card{background:#f8fafc!important;border:1px solid #dfe5ee!important;border-left:5px solid var(--mj-blue)!important;border-radius:8px!important}
.list-me-card h3{color:var(--mj-blue-dark)!important;font-size:25px!important}
.list-me-card p{font-size:19px!important;color:#667085!important}

/* Forms/buttons */
input,select,textarea{
  font-family:inherit!important;
  font-size:20px!important;
  border:1px solid #cfd6df!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#333!important;
}
input:focus,select:focus,textarea:focus{border-color:var(--mj-blue)!important;box-shadow:0 0 0 3px rgba(42,82,152,.12)!important;outline:0!important}
button,.btn,.primary-btn,.next-btn,.back-btn{
  font-family:inherit!important;
  border-radius:5px!important;
}
.primary-btn,.next-btn,.btn-primary{background:var(--mj-blue)!important;color:#fff!important;border-color:var(--mj-blue)!important}
.primary-btn:hover,.next-btn:hover,.btn-primary:hover{background:var(--mj-blue-dark)!important}

/* Tags and secondary UI */
.chip,.tag,.skill-tag{border-radius:5px!important}
.resume-preview,.preview-card{border-radius:8px!important}

/* Floating chat remains branded but visually quieter */
.fab-chat{background:var(--mj-blue)!important;color:#fff!important;border-radius:6px!important}

/* Footer */
footer{background:#fff!important;border-top:1px solid #dde3eb!important;color:#5e6c7c!important}

@media(max-width:640px){
  body{font-size:19px!important}
  .headband{padding:22px 16px!important}
  .brand-text h1{font-size:31px!important}
  .brand-text p{font-size:18px!important}
  .navbar-inner,.steps,main{padding-left:14px!important;padding-right:14px!important}
  .navbar-inner{gap:14px!important;overflow-x:auto!important}
  .navbar a{font-size:18px!important;white-space:nowrap!important}
  .steps{gap:6px!important}
  .step-pill{font-size:16px!important;padding:8px 5px!important}
  .card{padding:20px 16px!important;border-left-width:4px!important}
  h2.section-title,.featured-header h2{font-size:27px!important}
  p.section-sub,.featured-header p{font-size:18px!important}
  .prof-card .name{font-size:20px!important}
}