/* =========================================================
   AN THỊNH SOLUTIONS – STYLE
   Font: Montserrat (tiêu đề) + Inter (nội dung) – hỗ trợ tiếng Việt
   ========================================================= */

/* ─── 1. MÀU SẮC & KÍCH THƯỚC (sửa ở đây để đổi toàn web) ── */
:root {
  --navy:      #1C5FB8;   /* xanh navy chủ đạo */
  --navy-2:    #2E6FC4;
  --blue:      #1C5FB8;   /* xanh dương của logo */
  --orange:    #E8841A;   /* cam nhấn của logo */
  --orange-2:  #CC6F0C;
  --ink:       #0F1B2D;   /* màu tiêu đề */
  --text:      #475467;   /* màu chữ thường */
  --muted:     #6B7A90;   /* chữ phụ */
  --line:      #E4E8EF;   /* đường viền */
  --bg-soft:   #FFFFFF;   /* nền xám nhạt */
  --white:     #FFFFFF;

  --font-head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --radius:    6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(15,27,45,.06), 0 1px 2px rgba(15,27,45,.04);
  --shadow-md: 0 12px 32px -12px rgba(15,27,45,.18);
  --ease:      .25s cubic-bezier(.4,0,.2,1);
  --container: 1200px;
}

/* ─── 2. NỀN TẢNG ────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.7;
  color: var(--text); background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
strong { color: var(--ink); font-weight: 600; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.2; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.35; }
p  { color: var(--text); }
em { font-style: normal; color: var(--orange); }

/* ─── 3. BỐ CỤC ─────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-alt { background: var(--bg-soft); }
.section-dark { background: var(--navy); }
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 14.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px;
}
.section-label::before { content: ''; width: 28px; height: 2px; background: var(--orange); }
.text-center .section-label::after { content: ''; width: 28px; height: 2px; background: var(--orange); }
.section-title { margin-bottom: 18px; }
.section-body { max-width: 640px; margin-bottom: 16px; font-size: 18px; }
.text-center { text-align: center; }
.text-center .section-body { margin-left: auto; margin-right: auto; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
.section-head .section-title { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ─── 4. NÚT BẤM ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 17px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; border: 2px solid transparent; transition: var(--ease); white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-2); transform: translateY(-1px); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-outline:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--blue); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-sm { padding: 9px 18px; font-size: 15.5px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--blue);
  transition: gap var(--ease);
}
.link-arrow:hover { gap: 12px; color: var(--orange); }

/* ─── 5. THANH THÔNG TIN TRÊN CÙNG ──────────────────────── */
.topbar { background: var(--navy); color: #B8C7DB; font-size: 15.5px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 42px; gap: 20px; }
.topbar-group { display: flex; gap: 28px; }
.topbar-item { display: inline-flex; align-items: center; gap: 8px; }
.topbar-item svg { width: 15px; height: 15px; stroke: var(--orange); fill: none; stroke-width: 2; }
a.topbar-item:hover { color: #fff; }

/* ─── 6. MENU ────────────────────────────────────────────── */
#navbar {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); transition: box-shadow var(--ease);
}
#navbar.scrolled { box-shadow: 0 6px 24px -10px rgba(15,27,45,.2); }
.nav-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 80px; max-width: var(--container); margin: 0 auto; padding: 0 24px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { height: 46px; width: auto; }
.logo-text { display: block; font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.15; letter-spacing: -.01em; }
.logo-sub  { display: block; font-size: 10.5px; font-weight: 600; color: var(--orange); letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; font-family: var(--font-head); font-size: 17px; font-weight: 600;
  color: var(--ink); padding: 10px 14px; transition: color var(--ease);
}
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--orange); transform: scaleX(0); transition: transform var(--ease);
}
.nav-links a:hover { color: var(--orange); }
.nav-links a.active { color: var(--orange); }
.nav-links a.active::after, .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links .nav-cta {
  margin-left: 12px; background: var(--orange); color: #fff; padding: 11px 22px; border-radius: var(--radius);
}
.nav-links .nav-cta:hover, .nav-links .nav-cta.active { background: var(--orange-2); color: #fff; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── 7. HERO TRANG CHỦ ─────────────────────────────────── */
/* Muốn có ảnh nền: đặt ảnh công trình vào images/hero.jpg */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    linear-gradient(100deg, rgba(20,54,95,.96) 0%, rgba(20,54,95,.88) 45%, rgba(20,54,95,.55) 100%),
    url('../images/hero.jpg') center/cover no-repeat,
    linear-gradient(135deg, #14365F 0%, #1B4A80 60%, #1C5FB8 100%);
  padding: 120px 0 150px;
}
.hero::after { /* hoa văn lưới kỹ thuật */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.hero-content { position: relative; z-index: 1; max-width: 720px; }
.hero-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 14.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 22px;
}
.hero-label::before { content: ''; width: 28px; height: 2px; background: var(--orange); }
.hero h1 { color: #fff; margin-bottom: 24px; }
.hero-desc { font-size: 18.5px; color: #C8D5E6; line-height: 1.75; margin-bottom: 38px; max-width: 580px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-points { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; }
.hero-point { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: #DCE5F0; }
.hero-point svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; stroke-width: 2.5; }

/* Dải số liệu nổi bật đè lên hero */
.stats-band { position: relative; z-index: 5; margin-top: -76px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  border-bottom: 4px solid var(--orange); overflow: hidden;
}
.stat { padding: 32px 28px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat-num { font-family: var(--font-head); font-size: 42px; font-weight: 800; color: var(--navy); line-height: 1; }
.stat-label { font-size: 16.5px; color: var(--muted); margin-top: 10px; }

/* ─── 8. ĐỐI TÁC ────────────────────────────────────────── */
.partners { padding: 64px 0 20px; }
.partners-label { font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; text-align: center; margin-bottom: 28px; }
.partners-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.partner-item {
  display: flex; align-items: center; justify-content: center; height: 72px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-head); font-size: 17.5px; font-weight: 700; color: #98A2B3;
  transition: var(--ease); text-align: center; padding: 0 10px;
}
.partner-item:hover { color: var(--navy); border-color: var(--navy); }
.partner-item img { max-height: 40px; filter: grayscale(1); opacity: .7; transition: var(--ease); }
.partner-item:hover img { filter: none; opacity: 1; }

/* ─── 9. GIỚI THIỆU ─────────────────────────────────────── */
.about-grid { align-items: center; }
.about-visual { display: flex; flex-direction: column; gap: 16px; }
.av-main {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: var(--radius-lg); padding: 44px 40px; color: #fff;
}
.av-main::after { content: ''; position: absolute; right: 0; top: 0; width: 6px; height: 100%; background: var(--orange); }
.av-year { font-family: var(--font-head); font-size: 88px; font-weight: 800; line-height: .9; color: rgba(255,255,255,.08); margin-bottom: 8px; }
.av-headline { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin-bottom: 14px; line-height: 1.35; }
.av-text { font-size: 17.5px; color: #B8C7DB; line-height: 1.75; }
.av-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  border: 1px solid rgba(232,132,26,.5); color: var(--orange);
  font-size: 14.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 100px;
}
.av-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.av-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.av-card-num { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.av-card-label { font-size: 16.5px; color: var(--muted); margin-top: 6px; }

.commit-list { display: flex; flex-direction: column; gap: 26px; }
.commit-item { display: flex; gap: 18px; align-items: flex-start; }
.commit-icon {
  width: 52px; height: 52px; background: #FFF3E6; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.commit-icon svg { width: 24px; height: 24px; }
.commit-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.commit-desc { font-size: 17.5px; color: var(--text); line-height: 1.7; }

/* ─── 10. DỊCH VỤ ───────────────────────────────────────── */
.svc-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px 32px 32px;
  transition: var(--ease); display: flex; flex-direction: column;
}
.svc-card::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--orange); transition: width .4s ease; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; }
.svc-card:hover::before { width: 100%; }
.svc-num { position: absolute; top: 28px; right: 30px; font-family: var(--font-head); font-size: 34px; font-weight: 800; color: #EEF1F5; line-height: 1; }
.svc-icon {
  width: 60px; height: 60px; background: var(--navy); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: var(--ease);
}
.svc-icon svg { width: 28px; height: 28px; stroke: #fff; }
.svc-card:hover .svc-icon { background: var(--orange); }
.svc-title { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.svc-desc { font-size: 17.5px; color: var(--text); line-height: 1.7; flex: 1; }
.svc-tag {
  align-self: flex-start; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); width: 100%;
  font-size: 14.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
}

/* ─── 11. QUY TRÌNH ─────────────────────────────────────── */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; position: relative; }
.process-grid::before {
  content: ''; position: absolute; top: 32px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px);
}
.process-step { position: relative; text-align: center; }
.process-num {
  width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 20px; font-weight: 800; position: relative; z-index: 1;
}
.process-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.process-desc { font-size: 17px; color: #B8C7DB; line-height: 1.7; }
.section-dark .section-title { color: #fff; }
.section-dark .section-body { color: #B8C7DB; }

/* ─── 12. NGÀNH NGHỀ ────────────────────────────────────── */
.ind-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 18px; text-align: center; transition: var(--ease);
}
.ind-item:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.ind-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: #EAF1FB; display: flex; align-items: center; justify-content: center;
}
.ind-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.8; }
.ind-name { font-family: var(--font-head); font-size: 17.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }

/* ─── 13. LỊCH SỬ ───────────────────────────────────────── */
.timeline { position: relative; padding-left: 36px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; margin-bottom: 40px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  position: absolute; left: -32px; top: 5px; width: 18px; height: 18px;
  background: #fff; border: 4px solid var(--orange); border-radius: 50%;
}
.tl-year { font-family: var(--font-head); font-size: 16.5px; font-weight: 800; color: var(--orange); letter-spacing: .06em; margin-bottom: 4px; }
.tl-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.tl-text { font-size: 17.5px; color: var(--text); line-height: 1.7; }

/* ─── 14. GIÁ TRỊ CỐT LÕI ───────────────────────────────── */
.val-card {
  padding: 26px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: #fff; transition: var(--ease);
}
.val-card:hover { border-color: var(--navy); }
.val-num { font-family: var(--font-head); font-size: 17.5px !important; font-weight: 800; color: var(--orange) !important; margin-bottom: 10px; letter-spacing: .06em; }
.val-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.val-desc { font-size: 17px; color: var(--text); line-height: 1.7; }

/* ─── 15. TUYỂN DỤNG ────────────────────────────────────── */
.job-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; transition: var(--ease); display: flex; flex-direction: column; gap: 16px;
}
.job-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); }
.job-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.job-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.job-badge {
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.badge-hot    { background: #FFF1E3; color: #B45309; }
.badge-open   { background: #E8F6EE; color: #1F7A4A; }
.badge-urgent { background: #FDECEC; color: #B42318; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.job-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 16.5px; color: var(--muted); }
.job-meta svg { width: 16px; height: 16px; flex-shrink: 0; }
.job-salary { font-family: var(--font-head); font-size: 18.5px; font-weight: 800; color: var(--navy); }
.job-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); margin-top: auto; }
.job-deadline { font-size: 16px; color: var(--muted); }

/* ─── 16. TIN TỨC ───────────────────────────────────────── */
.news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: var(--ease); }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-thumb { height: 200px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); position: relative; overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-category { position: absolute; top: 14px; left: 14px; background: var(--orange); color: #fff; font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 4px; }
.news-body { padding: 24px; }
.news-date { font-size: 15.5px; color: var(--muted); margin-bottom: 8px; }
.news-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.45; margin-bottom: 10px; }
.news-title a:hover { color: var(--orange); }
.news-excerpt { font-size: 17px; color: var(--text); }

/* ─── 17. TRANG CON: TIÊU ĐỀ ─────────────────────────────── */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, rgba(20,54,95,.97), rgba(27,74,128,.92)), url('../images/hero.jpg') center/cover;
  padding: 80px 0 72px;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--orange); z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 16.5px; color: #9FB2CB; margin-bottom: 18px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: #5E7898; }
.breadcrumb .current { color: var(--orange); font-weight: 600; }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4vw, 46px); margin-bottom: 14px; }
.page-hero p { color: #C8D5E6; font-size: 18px; max-width: 600px; }

/* ─── 18. LIÊN HỆ ───────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; }
.contact-info-card { background: var(--navy); border-radius: var(--radius-lg); padding: 40px; color: #fff; border-top: 4px solid var(--orange); }
.contact-info-card h3 { font-family: var(--font-head); }
.ci-item { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ci-icon {
  width: 46px; height: 46px; background: rgba(232,132,26,.12); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ci-icon svg { width: 21px; height: 21px; }
.ci-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #8FA5C2; margin-bottom: 4px; }
.ci-value { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; }
.ci-sub { font-size: 16.5px; color: #9FB2CB; margin-top: 2px; }
.contact-form {
  display: flex; flex-direction: column; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  padding: 13px 15px; border: 1px solid #D0D5DD; border-radius: var(--radius);
  font-family: inherit; font-size: 17.5px; color: var(--ink); background: #fff;
  transition: border-color var(--ease), box-shadow var(--ease); outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,95,184,.12);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-required { color: var(--orange); }
.map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.map-wrap iframe { display: block; width: 100%; height: 300px; border: none; }

/* ─── 19. KÊU GỌI LIÊN HỆ ───────────────────────────────── */
.cta-banner { background: var(--orange); padding: 72px 0; position: relative; overflow: hidden; }
.cta-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px);
}
.cta-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta-banner h2 { color: #fff; margin-bottom: 10px; }
.cta-banner p { color: #FFF1E0; font-size: 18px; max-width: 600px; }
.cta-banner .container > h2, .cta-banner .container > p { text-align: center; margin-left: auto; margin-right: auto; }
.cta-banner .container > p { margin-bottom: 28px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; }
.cta-banner .btn-primary { background: var(--navy); }
.cta-banner .btn-primary:hover { background: var(--ink); }
.cta-banner .btn-outline { border-color: rgba(255,255,255,.7); }
.cta-banner .btn-outline:hover { color: var(--orange); }

/* ─── 20. CHÂN TRANG ────────────────────────────────────── */
footer { background: #0F2A4A; padding: 80px 0 0; color: #9FB2CB; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 56px; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer-logo .logo-mark { height: 44px; filter: brightness(0) invert(1); }
.footer-logo .logo-text { color: #fff; }
.footer-desc { font-size: 17.5px; color: #9FB2CB; line-height: 1.75; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.social-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; transition: var(--ease);
}
.social-btn:hover { background: var(--orange); border-color: var(--orange); }
.social-btn svg { width: 16px; height: 16px; fill: #fff; }
.footer-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 22px;
  padding-bottom: 12px; position: relative;
}
.footer-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--orange); }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 17.5px; color: #9FB2CB; transition: var(--ease); }
.footer-links a:hover { color: var(--orange); padding-left: 4px; }
.footer-contact-item { display: flex; gap: 12px; margin-bottom: 18px; font-size: 17.5px; color: #9FB2CB; }
.footer-contact-item svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 2; flex-shrink: 0; margin-top: 3px; }
.footer-contact-item strong { color: #fff; display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 16px; color: #6F86A3;
}
.footer-bottom a:hover { color: #fff; }
.footer-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 600; }

/* ─── 21. HIỆU ỨNG ──────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

/* ─── 22. MÁY TÍNH BẢNG & ĐIỆN THOẠI ────────────────────── */
@media (max-width: 1080px) {
  /* Menu điện thoại */
  .hamburger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 8px 24px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav-links .nav-cta { margin: 16px 0 0; text-align: center; border-bottom: none; }

  .partners-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .grid-2, .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4, .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid::before { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-direction: column; text-align: center; }
  .topbar-group.hide-md { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 17.5px; }
  .topbar { display: none; }
  .nav-inner { height: 70px; }
  .logo-mark { height: 40px; }
  .logo-text { font-size: 18px; }
  .hero { padding: 80px 0 130px; }
  .hero-desc { font-size: 18px; }
  .hero-actions .btn { width: 100%; }
  .stat { padding: 24px 18px; }
  .stat-num { font-size: 32px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .partners-row { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form, .contact-info-card { padding: 28px 22px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .av-main { padding: 32px 26px; }
}

/* =========================================================
   BỐ CỤC KIỂU XL MANPOWER (bổ sung)
   Ảnh: đặt đúng tên file vào folder images/ – chưa có ảnh thì web tự hiện nền xanh
   ========================================================= */

/* ─── Menu chữ in hoa + menu con ───────────────────────── */
.nav-links a { text-transform: uppercase; font-size: 16px; letter-spacing: .03em; }
.has-dd { position: relative; }
.dd-caret { display: inline-block; width: 10px; height: 10px; margin-left: 4px; vertical-align: 1px; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 260px; z-index: 300;
  background: #fff; border-top: 3px solid var(--orange); box-shadow: var(--shadow-md);
  padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--ease);
}
.has-dd:hover .dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-links .dropdown a { display: block; padding: 11px 22px; text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 500; }
.nav-links .dropdown a::after { display: none; }
.nav-links .dropdown a:hover { background: var(--bg-soft); color: var(--orange); }
.nav-links .nav-cta svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* ─── Slider đầu trang ─────────────────────────────────── */
.hero-slider { position: relative; height: min(88vh, 720px); min-height: 520px; overflow: hidden; background: var(--navy); }
.slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease; z-index: 0;
}
.slide.active { opacity: 1; z-index: 1; }
.slide .container { width: 100%; }
.slide-content { position: relative; max-width: 760px; color: #fff; }
.slide .hero-label { transform: translateY(20px); opacity: 0; transition: .7s .2s ease; }
.slide h1 { color: #fff; font-size: clamp(32px, 5vw, 60px); margin-bottom: 22px; transform: translateY(24px); opacity: 0; transition: .7s .35s ease; }
.slide .hero-desc { transform: translateY(24px); opacity: 0; transition: .7s .5s ease; }
.slide .hero-actions { transform: translateY(24px); opacity: 0; transition: .7s .65s ease; }
.slide.active .hero-label, .slide.active h1, .slide.active .hero-desc, .slide.active .hero-actions { transform: none; opacity: 1; }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 5; display: flex; gap: 10px; justify-content: center; }
.slider-dot { width: 12px; height: 12px; border-radius: 12px; background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: var(--ease); }
.slider-dot.active { width: 36px; background: var(--orange); }
.slider-arrow {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: var(--ease);
}
.slider-arrow:hover { background: var(--orange); border-color: var(--orange); }
.slider-arrow svg { width: 22px; height: 22px; }
.slider-arrow.prev { left: 28px; } .slider-arrow.next { right: 28px; }

/* ─── Ô ảnh (tự hiện nền xanh nếu chưa có ảnh) ─────────── */
.ph { background-color: var(--navy-2); background-size: cover; background-position: center; border-radius: var(--radius-lg); position: relative; overflow: hidden; }

/* ─── Giới thiệu: cụm ảnh ghép ─────────────────────────── */
.intro-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.collage { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 190px 190px; gap: 14px; position: relative; }
.collage .ph:nth-child(1) { grid-row: span 2; }
.collage-badge {
  position: absolute; left: -18px; bottom: -22px; z-index: 2;
  background: var(--orange); color: #fff; border-radius: var(--radius-lg); padding: 20px 26px; box-shadow: var(--shadow-md);
}
.collage-badge b { display: block; font-family: var(--font-head); font-size: 40px; font-weight: 800; line-height: 1; }
.collage-badge span { font-size: 16.5px; font-weight: 600; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 26px 0 32px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 17.5px; color: var(--ink); font-weight: 500; }
.check-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; stroke: var(--orange); fill: none; stroke-width: 2.5; }

/* ─── Dịch vụ: thẻ có ảnh + số lớn ─────────────────────── */
.svc-card { padding: 0; overflow: hidden; }
.svc-card::before { display: none; }
.svc-img { height: 210px; border-radius: 0; display: flex; align-items: center; justify-content: center; transition: filter .4s ease; }
.svc-img svg { width: 56px; height: 56px; stroke: rgba(255,255,255,.35); fill: none; stroke-width: 1.4; }
.svc-card:hover .svc-img { filter: brightness(1.12); }
.svc-media { position: relative; }
.svc-media .svc-num {
  position: absolute; top: auto; right: 22px; bottom: -22px; z-index: 2;
  width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; border: 4px solid #fff;
}
.svc-body { padding: 34px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.svc-more { margin-top: 20px; }

/* ─── Dải số liệu chạy số ─────────────────────────────── */
.counter-band {
  position: relative; padding: 80px 0; color: #fff;
  background: linear-gradient(rgba(20,54,95,.92), rgba(20,54,95,.92)), url('../images/so-lieu.jpg') center/cover fixed, var(--navy);
}
.counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.counter-item { padding: 10px; border-right: 1px solid rgba(255,255,255,.12); }
.counter-item:last-child { border-right: none; }
.counter-num { font-family: var(--font-head); font-size: clamp(40px, 5vw, 56px); font-weight: 800; line-height: 1; color: #fff; }
.counter-num em { color: var(--orange); }
.counter-label { margin-top: 12px; font-family: var(--font-head); font-size: 16.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #C8D5E6; }

/* ─── Khách hàng tiêu biểu ────────────────────────────── */
.clients .partners-row { margin-top: 44px; }
.clients .partner-item { height: 96px; background: #fff; }

/* ─── Vì sao chọn chúng tôi ───────────────────────────── */
.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.why-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: var(--ease); }
.why-item:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.why-icon { width: 50px; height: 50px; border-radius: var(--radius); background: #FFF3E6; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.why-icon svg { width: 24px; height: 24px; stroke: var(--orange); fill: none; stroke-width: 2; }
.why-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.why-desc { font-size: 17px; line-height: 1.7; }
.why-visual { position: relative; }
.why-visual .ph { height: 520px; }
.why-visual .ph.small { position: absolute; width: 55%; height: 220px; left: -40px; bottom: -30px; border: 6px solid #fff; box-shadow: var(--shadow-md); }

/* ─── Responsive cho phần bổ sung ─────────────────────── */
@media (max-width: 900px) {
  .intro-grid, .why-grid { grid-template-columns: 1fr; gap: 56px; }
  .counter-grid { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .counter-item:nth-child(2) { border-right: none; }
  .why-visual .ph { height: 380px; }
  .why-visual .ph.small { left: 16px; }
  .slider-arrow { display: none; }
}
@media (max-width: 640px) {
  .hero-slider { height: 600px; }
  .collage { grid-template-rows: 130px 130px; gap: 10px; }
  .collage-badge { left: 10px; padding: 14px 18px; }
  .collage-badge b { font-size: 30px; }
  .check-list, .why-list { grid-template-columns: 1fr; }
  .why-visual .ph { height: 300px; }
  .why-visual .ph.small { display: none; }
}
.slide .h1 { color: #fff; font-size: clamp(32px, 5vw, 60px); font-weight: 800; line-height: 1.12; margin-bottom: 22px; transform: translateY(24px); opacity: 0; transition: .7s .35s ease; }
.slide.active .h1 { transform: none; opacity: 1; }

/* Menu điện thoại: ẩn menu con cho gọn */
@media (max-width: 1080px) {
  .has-dd > a { display: block; }
  .dropdown, .dd-caret { display: none; }
}

/* =========================================================
   GIAO DIỆN NỀN TRẮNG + CHỮ LỚN (ghi đè các phần phía trên)
   ========================================================= */
body { font-size: 18px; line-height: 1.75; }
p { font-size: 18px; }

/* Tiêu đề chỉ lớn hơn nội dung một chút */
h1, .slide h1, .slide .h1 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.25; }
h2, .section-title { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.3; }
h3, .svc-title, .job-title, .news-title { font-size: 20px; }
.page-hero h1 { font-size: clamp(28px, 3.2vw, 36px); }
.cta-banner h2 { font-size: clamp(22px, 2.4vw, 28px); }
.av-headline { font-size: 20px; }
.logo-text { font-size: 20px; }
.counter-num { font-size: clamp(36px, 4vw, 44px); }
.stat-num { font-size: 36px; }
.collage-badge b { font-size: 34px; }

/* Ngăn cách các khối nền trắng bằng đường kẻ mảnh */
.section + .section, .section + .counter-band, .counter-band + .section, .section + .cta-banner { border-top: 1px solid var(--line); }

/* Thanh trên cùng */
.topbar { background: #fff; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 15px; }
a.topbar-item:hover { color: var(--orange); }

/* Slider nền trắng (khi thêm ảnh, ảnh hiện rõ ở bên phải) */
.hero-slider { background: #fff; }
.slide h1, .slide .h1 { color: var(--ink); }
.slide .hero-desc { color: var(--text); font-size: 19px; }
.slider-arrow { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.slider-dot { background: #CBD2DC; }

/* Nút viền trên nền trắng */
.btn-outline { color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Ô ảnh chưa có ảnh: nền xám xanh rất nhạt */
.ph { background-color: #EEF3FA; }
.svc-img svg { stroke: #9DB6D8; }

/* Dải số liệu nền trắng */
.counter-band { background: #fff; color: var(--ink); padding: 72px 0; }
.counter-num { color: var(--ink); }
.counter-label { color: var(--muted); }
.counter-item { border-right-color: var(--line); }

/* Khối giới thiệu (trang Giới thiệu) */
.av-main { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.av-year { color: #EEF1F5; }
.av-text { color: var(--text); }

/* Tiêu đề các trang con */
.page-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 64px 0 56px; }
.page-hero::after { display: none; }
.page-hero::before { height: 3px; }
.page-hero h1 { color: var(--ink); }
.page-hero p { color: var(--text); }
.breadcrumb { color: var(--muted); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { color: #B0B8C4; }

/* Liên hệ */
.contact-info-card { background: #fff; color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--orange); }
.contact-info-card h3 { color: var(--ink) !important; font-size: 20px !important; }
.ci-item { border-top-color: var(--line); }
.ci-icon { background: #FFF3E6; }
.ci-label { color: var(--muted); }
.ci-value { color: var(--ink); }
.ci-sub { color: var(--muted); }

/* Khối kêu gọi liên hệ */
.cta-banner { background: #fff; padding: 64px 0; }
.cta-banner::after { display: none; }
.cta-inner { border: 1px solid var(--line); border-left: 5px solid var(--orange); border-radius: var(--radius-lg); padding: 40px 44px; }
.cta-banner h2 { color: var(--ink); }
.cta-banner p { color: var(--text); }
.cta-banner .btn-primary { background: var(--orange); }
.cta-banner .btn-primary:hover { background: var(--orange-2); }
.cta-banner .btn-outline { color: var(--navy); border-color: var(--navy); }
.cta-banner .btn-outline:hover { color: #fff; }

/* Khối tối còn sót -> trắng */
.section-dark { background: #fff; }
.section-dark .section-title, .process-title { color: var(--ink); }
.section-dark .section-body, .process-desc { color: var(--text); }
.process-num { background: #fff; color: var(--ink); }

/* Chân trang nền trắng */
footer { background: #fff; color: var(--text); border-top: 1px solid var(--line); }
.footer-logo .logo-mark { filter: none; }
.footer-logo .logo-text, .footer-title { color: var(--ink); }
.footer-desc, .footer-links a, .footer-contact-item { color: var(--text); }
.footer-contact-item strong { color: var(--ink); }
.social-btn { border-color: var(--line); }
.social-btn svg { fill: var(--ink); }
.social-btn:hover svg { fill: #fff; }
.footer-bottom { border-top-color: var(--line); color: var(--muted); }

@media (max-width: 640px) {
  body, p { font-size: 17px; }
  .cta-inner { padding: 28px 22px; }
}

/* Menu gọn trên một hàng */
.logo-text, .logo-sub { white-space: nowrap; }
.nav-links > a, .has-dd > a { font-size: 15px; padding: 10px 11px; white-space: nowrap; }
.nav-links .nav-cta { margin-left: 8px; padding: 11px 18px; }
.nav-links a:not(.nav-cta)::after { left: 11px; right: 11px; }
.nav-links .dropdown a { font-size: 16px; }
@media (max-width: 1080px) {
  .nav-links > a, .has-dd > a { padding: 14px 0; font-size: 16px; }
  .nav-links .nav-cta { margin: 16px 0 0; padding: 13px 18px; }
}

/* =========================================================
   ẢNH MINH HOẠ (Unsplash – miễn phí dùng thương mại)
   Muốn thay bằng ảnh thật: chép ảnh vào images/ đúng tên file, ảnh thật tự hiện đè lên
   ========================================================= */
.svc-img svg { display: none; }
.svc-img { background-color: #EEF3FA; }

/* Dải số liệu: ảnh giàn khoan mờ dưới lớp phủ trắng */
.counter-band {
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
    url('../images/so-lieu.jpg') center/cover,
    url('https://images.unsplash.com/photo-1722183704200-e96339975ba4?auto=format&fit=crop&w=1920&q=60') center/cover,
    #fff;
}

/* Tiêu đề trang con: ảnh ở bên phải, chữ trên nền trắng bên trái */
.page-hero {
  background:
    linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255,255,255,.75) 62%, rgba(255,255,255,.15) 100%),
    url('../images/hero.jpg') right center/cover no-repeat,
    url('https://images.unsplash.com/photo-1648555394313-494797ad48fc?auto=format&fit=crop&w=1920&q=70') right center/cover no-repeat,
    #fff;
  padding: 88px 0 80px;
}
@media (max-width: 640px) {
  .page-hero { background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)), url('https://images.unsplash.com/photo-1648555394313-494797ad48fc?auto=format&fit=crop&w=900&q=60') center/cover, #fff; }
}

/* =========================================================
   TRANG DỊCH VỤ
   ========================================================= */
[id^="dv-"] { scroll-margin-top: 110px; }
.svc-hero { padding: 72px 0 40px; }
.svc-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.svc-hero h1 { margin-bottom: 18px; }
.hero-sub { font-size: 19px; margin-bottom: 30px; max-width: 540px; }
.svc-hero-img { height: 420px; }

.svc-intro { padding-top: 40px; padding-bottom: 56px; }
.svc-intro-text { max-width: 900px; margin: 0 auto; text-align: center; font-size: 19px; line-height: 1.8; }
.svc-jumps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.svc-jump {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); transition: var(--ease);
}
.svc-jump span { color: var(--orange); font-size: 15px; }
.svc-jump:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }

.svc-list { padding-top: 24px; }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 48px 0; }
.svc-row + .svc-row { border-top: 1px solid var(--line); }
.svc-row.reverse .svc-row-media { order: 2; }
.svc-row-media { position: relative; }
.svc-row-media .ph { height: 400px; }
.svc-row-num {
  position: absolute; left: -14px; top: -14px; width: 64px; height: 64px; border-radius: 50%;
  background: var(--orange); color: #fff; border: 4px solid #fff; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 20px;
}
.svc-row .section-body { max-width: none; }
.check-list.one-col { grid-template-columns: 1fr; margin: 20px 0 26px; }
.check-list.one-col li { font-weight: 500; }

.feature-box {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; overflow: hidden;
  border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius-lg);
}
.feature-body { padding: 48px; }
.feature-body .section-body { max-width: none; }
.feature-img { height: 100%; min-height: 420px; border-radius: 0; }
.project-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; }
.project-label { font-weight: 600; color: var(--ink); }
.project-tags .todo { padding: 4px 12px; border-radius: 100px; }

.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 40px auto 0; }
.scope-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; text-align: center; transition: var(--ease); }
.scope-card:hover { border-color: var(--orange); }
.scope-card .why-icon { margin: 0 auto 16px; }
.scope-card .why-icon svg { stroke: var(--orange); }
.scope-card h3 { margin-bottom: 8px; }

.why5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 40px; }
.why5-item { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 20px; text-align: center; transition: var(--ease); }
.why5-item:hover { border-color: var(--orange); transform: translateY(-3px); }
.why5-item .why-icon { margin: 0 auto 14px; }
.why5-item p { font-size: 17px; color: var(--ink); font-weight: 500; line-height: 1.55; }

/* Chỗ cần điền thông tin thật – nổi màu vàng để dễ thấy */
.todo { background: #FFF3CD; color: #8A5A00; border: 1px dashed #E0B040; padding: 1px 8px; border-radius: 4px; font-weight: 600; }

@media (max-width: 1024px) {
  .why5 { grid-template-columns: repeat(3, 1fr); }
  .svc-jumps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .svc-hero-grid, .svc-row, .feature-box, .scope-grid { grid-template-columns: 1fr; gap: 32px; }
  .svc-row.reverse .svc-row-media { order: 0; }
  .svc-hero-img, .svc-row-media .ph { height: 300px; }
  .svc-row-num { left: 12px; top: 12px; }
  .feature-body { padding: 32px 24px; }
  .feature-img { min-height: 260px; }
}
@media (max-width: 640px) {
  .why5, .svc-jumps { grid-template-columns: 1fr; }
}

/* ─── Khách hàng: logo ─────────────────────────────────── */
.client-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.client-logo {
  display: flex; align-items: center; justify-content: center;
  width: 280px; height: 150px; padding: 20px 28px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; transition: var(--ease);
}
.client-logo:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ─── Bản đồ phạm vi cung ứng ──────────────────────────── */
.scope-grid { max-width: 1120px; }
.scope-card { padding: 0; overflow: hidden; text-align: left; }
.map-box { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.map-vn { background: #fff; padding: 18px 0; }
.map-world { background: #01030A; }
.map-inner { position: relative; height: 100%; max-width: 100%; }
.map-world .map-inner { height: auto; width: 100%; }
.map-inner img { width: 100%; height: 100%; display: block; }
.arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc-base { fill: none; stroke: #F5B041; stroke-opacity: .35; stroke-width: 2.5; }
.arc-flow {
  fill: none; stroke: #FFC24B; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 10 14; filter: drop-shadow(0 0 4px rgba(255,194,75,.9));
  animation: arcFlow 1.6s linear infinite;
}
.map-world .arc-base { stroke-width: 3.5; } .map-world .arc-flow { stroke-width: 4; }
@keyframes arcFlow { to { stroke-dashoffset: -48; } }
.arc-end { fill: #fff; stroke: #E8841A; stroke-width: 3; }
.arc-origin { fill: #E8841A; stroke: #fff; stroke-width: 4; }
.arc-ping { fill: #FFC24B; opacity: .6; transform-box: fill-box; transform-origin: center; animation: arcPing 2s ease-out infinite; }
@keyframes arcPing { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }
.arc-label { font-family: var(--font-head); font-weight: 800; fill: #0F1B2D; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.map-world .arc-label { fill: #fff; stroke: #01030A; }
.scope-text { padding: 26px 30px 30px; border-top: 1px solid var(--line); }
.scope-text h3 { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .arc-flow, .arc-ping { animation: none; } }
/* Bản đồ Việt Nam: đường nối trắng – vàng, viền tối để nổi trên nền đỏ */
.map-vn { padding: 10px 0; }
.map-vn .arc-base { stroke: #fff; stroke-opacity: .85; stroke-width: 5; filter: drop-shadow(0 0 2px rgba(0,0,0,.45)); }
.map-vn .arc-flow { stroke: #FFD34D; stroke-width: 5; stroke-dasharray: 12 12; filter: drop-shadow(0 0 3px rgba(0,0,0,.55)); }
.map-vn .arc-end { r: 8; fill: #FFD34D; stroke: #fff; stroke-width: 3; }
.map-vn .arc-origin { stroke-width: 5; }

/* ─── Hiệu ứng bay vào ─────────────────────────────────── */
.fly-left  { opacity: 0; transform: translateX(-70px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.fly-right { opacity: 0; transform: translateX(70px);  transition: opacity .8s .15s ease, transform .8s .15s cubic-bezier(.2,.7,.2,1); }
.fly-down  { opacity: 0; transform: translateY(-40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.fly-left.visible, .fly-right.visible, .fly-down.visible { opacity: 1; transform: none; }
.global-card.card-vn { transition-delay: .35s; }
.global-card.card-world { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .fly-left, .fly-right, .fly-down { opacity: 1; transform: none; transition: none; } }

/* ─── Khách hàng tiêu biểu: chữ lớn bên trái, logo 1/3 bên phải ── */
.clients-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: center; }
.big-title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.2; font-weight: 800; margin-bottom: 22px; }
.big-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.75; max-width: 720px; }
.client-logo-big {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  box-shadow: var(--shadow-md); position: relative;
}
.client-logo-big::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--orange); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.client-logo-big img { width: 100%; height: 100%; object-fit: contain; }

/* ─── Ảnh toàn cầu full chiều ngang + khối chữ nổi ─────── */
.global-scope { background: #06163A; }
.global-media { position: relative; }
.global-media > img { width: 100%; height: auto; display: block; }
.global-overlay { position: absolute; inset: 0; }
.global-head { position: absolute; left: 3.5%; top: 5%; max-width: 40%; }
.global-head h2 { color: #fff; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.2; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.global-head em { color: #FFB547; }
.global-card {
  position: absolute; bottom: 6%; max-width: 360px; display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px; border-radius: 14px; color: #fff;
  background: rgba(6, 22, 58, .6); border: 1px solid rgba(160, 200, 255, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.global-card.card-vn { left: 3.5%; }
.global-card.card-world { right: 3.5%; }
.global-card h3 { color: #fff; font-size: 21px; margin-bottom: 6px; }
.global-card p { color: #CFE0FF; font-size: 17px; line-height: 1.6; }
.global-card-icon {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid #FFB547; color: #FFB547; display: flex; align-items: center; justify-content: center;
}
.global-card-icon svg { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  .global-card { max-width: 300px; padding: 16px 18px; }
  .global-card p { font-size: 15.5px; }
}
@media (max-width: 900px) {
  .clients-grid { grid-template-columns: 1fr; gap: 36px; }
  .client-logo-big { max-width: 420px; }
  /* Điện thoại: tiêu đề và 2 khối chữ xếp xuống dưới ảnh */
  .global-overlay { position: static; padding: 28px 22px 34px; display: flex; flex-direction: column; gap: 16px; }
  .global-head, .global-card { position: static; max-width: none; }
  .global-media { display: flex; flex-direction: column; }
  .global-media > img { order: 2; }
  .global-overlay { order: 1; }
}

/* ─── Logo khách hàng: đen trắng, rê chuột hiện màu gốc ─── */
.partner-item { height: 120px; padding: 18px 22px; background: #fff; }
.clients .partner-item { height: 120px; }
.partner-item img { max-height: 76px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: var(--ease); }
.partner-item:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.partner-item:hover img { filter: none; opacity: 1; }
@media (max-width: 640px) { .partner-item { height: 100px; } .partner-item img { max-height: 60px; } }
/* Logo khách hàng: luôn hiện màu gốc */
.partner-item img { filter: none; opacity: 1; }
.partner-item:hover img { transform: scale(1.05); }

/* ─── Banner đầu trang Dịch vụ: tên công ty cỡ lớn ─────── */
.global-hero .global-media::before {   /* làm tối góc trên trái để chữ nổi */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 0% 0%, rgba(2,8,26,.85) 0%, rgba(2,8,26,.45) 45%, transparent 75%);
}
.global-hero .global-overlay { z-index: 2; }
.global-hero .global-head { top: 6%; max-width: 52%; }
.brand-mega {
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.01em;
  color: #fff; margin: 6px 0 16px; text-shadow: 0 6px 30px rgba(0,0,0,.55);
}
.brand-mega span {
  display: block; font-size: .62em; letter-spacing: .14em; margin-top: 6px;
  background: linear-gradient(90deg, #FFB547, #E8841A); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.global-tagline { color: #EAF1FF; font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2vw, 30px); line-height: 1.3; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.global-tagline em { color: #FFB547; }
.global-btn { margin-top: 22px; }
.global-head .fly-left:nth-of-type(1) { transition-delay: .1s; }
.global-tagline.fly-left { transition-delay: .25s; }
.global-btn.fly-left { transition-delay: .4s; }
.global-hero .global-card.card-vn { transition-delay: .6s; }
.global-hero .global-card.card-world { transition-delay: .8s; }

.svc-intro { padding-top: 72px; }
.svc-intro-lead { max-width: 760px; margin: 0 auto 26px; font-size: 20px; color: var(--ink); font-weight: 500; }

@media (max-width: 1100px) { .global-hero .global-head { max-width: 60%; } .global-btn { display: none; } }
@media (max-width: 900px) {
  .global-hero .global-media::before { display: none; }
  .global-hero .global-head { max-width: none; }
  .global-btn { display: inline-flex; align-self: flex-start; }
  .brand-mega { font-size: clamp(40px, 12vw, 64px); }
}
.brand-mega { font-size: clamp(40px, 5.6vw, 92px); line-height: 1.1; }
.brand-mega span { margin-top: 12px; line-height: 1.1; }

/* =========================================================
   TUYỂN DỤNG – VIỆC LÀM
   ========================================================= */
/* ─── Hero tìm kiếm ─────────────────────────────────── */
.job-hero {
  position: relative; overflow: hidden; padding: 96px 0 104px; text-align: center;
  background:
    radial-gradient(ellipse 50% 60% at 12% 20%, rgba(28,95,184,.10), transparent 70%),
    radial-gradient(ellipse 45% 55% at 90% 85%, rgba(232,132,26,.12), transparent 70%),
    #fff;
  border-bottom: 1px solid var(--line);
}
.job-hero::before { /* lưới chấm nhẹ */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(#D5DEEA 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 35%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 35%, #000 100%);
}
.job-hero-inner { position: relative; max-width: 980px; }
.job-hero .section-label { justify-content: center; }
.job-hero .section-label::after { content: ''; width: 28px; height: 2px; background: var(--orange); }
.job-hero-title { font-size: clamp(34px, 5vw, 64px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 22px; }
.job-hero-title em { color: var(--orange); }
.job-hero-sub { font-size: clamp(18px, 1.6vw, 21px); max-width: 700px; margin: 0 auto 40px; }

.job-search {
  display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px;
  box-shadow: 0 24px 60px -24px rgba(15,27,45,.28); text-align: left;
}
.js-field { display: flex; align-items: center; gap: 14px; padding: 12px 20px; cursor: text; }
.js-field + .js-field { border-left: 1px solid var(--line); }
.js-field > svg { width: 24px; height: 24px; color: var(--orange); flex-shrink: 0; }
.js-field span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.js-field b { font-family: var(--font-head); font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.js-field input, .js-field select {
  border: none; outline: none; background: transparent; font-family: inherit; font-size: 17px; color: var(--ink);
  padding: 2px 0; width: 100%; cursor: pointer;
}
.js-field input { cursor: text; }
.js-field input::placeholder { color: #98A2B3; }
.js-btn { border-radius: 12px; padding: 0 34px; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; }
.js-btn svg { width: 20px; height: 20px; }

/* ─── Thẻ việc làm ─────────────────────────────────── */
.jcard {
  display: flex; flex-direction: column; gap: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 26px; transition: var(--ease);
}
.jcard:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.jcard-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.jtag { display: inline-block; background: #EAF1FB; color: var(--blue); font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 100px; }
.jtype { font-size: 14px; color: var(--muted); }
.jcard-title { font-size: 21px; text-transform: uppercase; letter-spacing: .01em; line-height: 1.3; }
.jcard-title a:hover { color: var(--orange); }
.jmeta { display: flex; flex-direction: column; gap: 8px; }
.jmeta li { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--text); }
.jmeta svg { width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; }
.jmeta .jsalary { color: var(--orange); font-weight: 700; }
.jmeta .jsalary svg { color: var(--orange); }
.jcard-btn { margin-top: auto; width: 100%; }
.jcard-btn:hover { border-color: var(--orange); color: var(--orange); }
.jempty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px; }

/* ─── An Thịnh: 3 điểm ─────────────────────────────── */
.jabout-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.jpillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jpillar { border: 1px solid var(--line); border-radius: 14px; padding: 28px 22px; transition: var(--ease); }
.jpillar:hover { border-color: var(--orange); }
.jpillar span { display: block; font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--orange); line-height: 1; margin-bottom: 14px; }
.jpillar b { font-family: var(--font-head); font-size: 18px; color: var(--ink); line-height: 1.4; }

/* ─── Gửi CV ───────────────────────────────────────── */
.cv-box {
  display: flex; align-items: center; gap: 28px; padding: 40px 44px;
  border-radius: 18px; border: 1px solid #F6D2AC;
  background: linear-gradient(120deg, #FFF7EE 0%, #FFFFFF 70%);
}
.cv-icon { flex-shrink: 0; width: 76px; height: 76px; border-radius: 18px; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; }
.cv-icon svg { width: 38px; height: 38px; }
.cv-text { flex: 1; }
.cv-text h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 8px; }
.cv-btn { padding: 16px 30px; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }

/* ─── Trang danh sách việc làm ─────────────────────── */
.jlist-page { padding-top: 48px; }
.jcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.jcrumb a:hover { color: var(--orange); }
.jlist-title { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 26px; }
.jfilter { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.jf-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; height: 54px; }
.jf-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,95,184,.1); }
.jf-field svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.jf-field input, .jf-field select { border: none; outline: none; background: transparent; font-family: inherit; font-size: 17px; color: var(--ink); width: 100%; height: 100%; cursor: pointer; }
.jf-field input { cursor: text; }
.jcount { margin: 22px 0 14px; color: var(--muted); }
.jcount b { color: var(--orange); font-family: var(--font-head); }
.jtable-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.jtable { width: 100%; border-collapse: collapse; }
.jtable th { text-align: left; font-family: var(--font-head); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: #F7F9FC; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.jtable td { padding: 20px; border-bottom: 1px solid var(--line); font-size: 17px; vertical-align: middle; }
.jtable tr:last-child td { border-bottom: none; }
.jtable tbody tr { transition: background .2s; }
.jtable tbody tr:hover { background: #FFFAF4; }
.jt-title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); }
.jt-title:hover { color: var(--orange); }
.jt-salary { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--orange); font-weight: 600; margin-top: 4px; }
.jt-salary svg { width: 16px; height: 16px; }
.jt-act { text-align: right; white-space: nowrap; }
.jt-act .link-arrow svg { width: 18px; height: 18px; }

/* ─── Trang chi tiết ───────────────────────────────── */
.jdetail-page { padding-top: 48px; }
.jd-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.jd-title { font-size: clamp(30px, 3.6vw, 44px); text-transform: uppercase; margin: 14px 0 24px; }
.jd-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 36px; }
.jd-facts > div { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.jd-facts svg { width: 24px; height: 24px; color: var(--orange); flex-shrink: 0; }
.jd-facts span { display: flex; flex-direction: column; font-weight: 600; color: var(--ink); }
.jd-facts small { font-size: 14px; font-weight: 500; color: var(--muted); }
.jd-sec { padding: 26px 0; border-top: 1px solid var(--line); }
.jd-sec h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.jlist { display: flex; flex-direction: column; gap: 10px; }
.jlist li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; }
.jlist svg { width: 20px; height: 20px; color: var(--orange); flex-shrink: 0; margin-top: 4px; }
.jd-apply-big { margin-top: 12px; padding: 16px 32px; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.jd-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
.jd-card { border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: 14px; padding: 26px; box-shadow: var(--shadow-sm); }
.jd-card-title { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--ink); }
.jd-card-salary { color: var(--orange); font-weight: 700; font-size: 19px; margin: 6px 0 18px; }
.jd-card .btn { width: 100%; }
.jd-card-note { font-size: 15px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.jd-others { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.jd-others-title { font-family: var(--font-head); font-weight: 700; padding: 16px 20px; background: #F7F9FC; border-bottom: 1px solid var(--line); color: var(--ink); }
.jd-others a { display: block; padding: 14px 20px; border-bottom: 1px solid var(--line); transition: background .2s; }
.jd-others a:last-child { border-bottom: none; }
.jd-others a:hover { background: #FFFAF4; }
.jd-others b { display: block; color: var(--ink); font-size: 16px; }
.jd-others span { font-size: 14px; color: var(--muted); }
.jempty-box { text-align: center; padding: 60px 0; }
.jempty-box h1 { margin-bottom: 10px; } .jempty-box p { margin-bottom: 24px; }

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .job-hero { padding: 64px 0 72px; }
  .job-search { grid-template-columns: 1fr; gap: 4px; }
  .js-field + .js-field { border-left: none; border-top: 1px solid var(--line); }
  .js-btn { padding: 16px; margin-top: 6px; }
  .jabout-grid, .jd-grid { grid-template-columns: 1fr; gap: 32px; }
  .jd-side { position: static; }
  .jfilter { grid-template-columns: 1fr 1fr; }
  .jf-q { grid-column: 1 / -1; }
  .cv-box { flex-direction: column; text-align: center; padding: 32px 24px; }
  /* Bảng → thẻ trên điện thoại */
  .jtable thead { display: none; }
  .jtable, .jtable tbody, .jtable tr, .jtable td { display: block; width: 100%; }
  .jtable tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .jtable td { border: none; padding: 4px 0; font-size: 16px; }
  .jtable td[data-label]:not(:first-child)::before { content: attr(data-label) ': '; color: var(--muted); font-size: 14px; }
  .jt-act { text-align: left; padding-top: 10px !important; }
}
@media (max-width: 640px) {
  .jpillars, .jd-facts { grid-template-columns: 1fr; }
  .jfilter { grid-template-columns: 1fr; }
}