/* Kiểu riêng trang chủ — 3 section không dùng lại ở trang khác.
   Các section dùng chung nằm ở sections.css. Chỉ nạp ở trang chủ (inc/enqueue.php). */

/* ---------- 2. Ưu thế ---------- */

.mv-adv { background: var(--surface); padding-block: 120px; }
.mv-adv__head { margin-bottom: 52px; }
.mv-adv__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: stretch;
}

.mv-adv__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.mv-adv__item {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 18px;
  flex: 1;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.mv-adv__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--slate-300);
  flex: 0 0 auto;
}
.mv-adv__label {
  font-weight: var(--weight-semibold);
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.mv-adv__item svg { margin-left: auto; flex: 0 0 auto; color: var(--slate-300); }

.mv-adv__item[aria-selected="true"] { border-left-color: var(--green-500); }
.mv-adv__item[aria-selected="true"] .mv-adv__num,
.mv-adv__item[aria-selected="true"] svg { color: var(--green-600); }
.mv-adv__item[aria-selected="true"] .mv-adv__label {
  color: var(--text-body);
  font-weight: var(--weight-bold);
}

.mv-adv__panel {
  background: var(--slate-900);
  border-radius: 28px;
  padding: 42px 48px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
}
.mv-adv__panel[hidden] { display: none; }
.mv-adv__ghost {
  position: absolute;
  top: 24px; right: 32px;
  font-family: var(--font-mono);
  font-size: 180px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,.05);
  user-select: none;
  pointer-events: none;
}
.mv-adv__icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--green-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.mv-adv__title {
  font-weight: var(--weight-bold);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.mv-adv__desc { font-size: 15px; color: #B6C2D4; line-height: 1.8; }

/* ---------- 7. Khu vực phục vụ ---------- */

.mv-areas { background: var(--surface); padding-block: 120px; }
.mv-areas__lead { margin: var(--space-4) 0 36px; }
.mv-areas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: hidden;
}
.mv-area {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  padding: 15px 20px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--slate-700);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mv-area__pin { color: var(--green-600); flex: 0 0 auto; }
.mv-area__go { margin-left: auto; color: var(--slate-400); flex: 0 0 auto; }
.mv-area strong { font-weight: var(--weight-bold); color: var(--text-body); }
.mv-area:hover { background: var(--green-50); color: var(--green-700); }
.mv-area:hover .mv-area__go { color: var(--green-600); }
.mv-areas__all {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--green-50);
  padding: 15px 20px;
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--green-700);
}

/* ---------- 8. Thẻ nhóm việc trong checklist HR ---------- */

.mv-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.mv-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-4) 22px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14.5px;
  font-weight: var(--weight-bold);
}
.mv-card__head::before {
  content: "";
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--slate-400);
}
.mv-card--hr .mv-card__head { background: var(--green-50); }
.mv-card--hr .mv-card__head::before { background: var(--green-500); }

.mv-card__list { padding-block: var(--space-2); }
.mv-card__item {
  display: flex;
  gap: 13px;
  padding: 14px 22px;
  font-size: 13.5px;
  line-height: 1.65;
}
.mv-card__item + .mv-card__item { border-top: 1px dashed var(--border-subtle); }
.mv-card__tick {
  width: 21px; height: 21px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--slate-100);
  color: var(--slate-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mv-card--hr .mv-card__tick { background: var(--green-50); color: var(--green-700); }
.mv-card__tick svg { width: 11px; height: 11px; }
.mv-card__item span { color: var(--text-muted); }
.mv-card__item strong { color: var(--text-body); }
.mv-card__sub {
  margin-top: var(--space-2);
  padding-left: 18px;
  list-style: disc;
  display: grid;
  gap: 6px;
  color: var(--text-muted);
}
.mv-card__sub strong { color: var(--slate-700); }

/* ---------- Màn hình vừa ---------- */

@media (max-width: 1099px) {
  .mv-adv, .mv-areas { padding-block: 80px; }
  .mv-adv__grid { gap: 32px; }
  .mv-areas__grid { grid-template-columns: repeat(3, 1fr); }
  .mv-adv__ghost { font-size: 130px; }
  .mv-adv__panel { padding: 32px 34px; }
}

/* ---------- Màn hình nhỏ ---------- */

@media (max-width: 849px) {
  .mv-adv__grid { grid-template-columns: 1fr; }
  .mv-adv__list { order: 2; }
  .mv-adv__panel { min-height: 0; }
  .mv-areas__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 549px) {
  .mv-adv__panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .mv-adv__title { font-size: 21px; }
  .mv-adv__ghost { font-size: 96px; top: 12px; right: 16px; }
  .mv-areas__grid { grid-template-columns: 1fr; }
}