/* ==========================================================
   charter.css - Style cho trang Project Charter (project-charter-1/2/3.html)
   Laptop: lưới 3 cột (Goals | Team | Timeline và Scopes | Primary | Timeline).
   Tablet và mobile: 1 cột theo thứ tự Goals, Scopes, Team, Primary, Timeline.
   ========================================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 0 30px;
  font-family: "open_sansregular", Arial, sans-serif;
  font-size: 13px;
  color: #222;
  background-color: #fff;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

/* ===== Đầu trang ===== */
.charter-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 16px;
}

.back-link {
  color: #1a1acd;
}

.back-link:hover {
  text-decoration: underline;
}

.charter-title {
  margin-top: 14px;
  font-size: 24px;
  font-weight: normal;
  color: #1a1acd;
}

.charter-sub {
  margin-top: 6px;
  color: #666;
}

/* ===== Khung xanh và lưới các khối ===== */
.charter {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-areas:
    "goals team timeline"
    "scopes primary timeline";
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px;
  background-color: #0000ee;
}

.box {
  padding: 18px 20px 24px;
  background-color: #eef6ff;
}

.box-goals {
  grid-area: goals;
}

.box-scopes {
  grid-area: scopes;
}

.box-team {
  grid-area: team;
}

.box-primary {
  grid-area: primary;
}

.box-timeline {
  grid-area: timeline;
}

.box h2 {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #c8d4e3;
  font-size: 18px;
  color: #1a1acd;
}

.box p {
  line-height: 1.5;
}

/* In đậm bằng font semibold có sẵn trong font.css */
.box b {
  font-family: "open_sanssemibold", Arial, sans-serif;
  font-weight: normal;
}

/* ===== Goals, Team, Primary: icon bên trái, chữ bên phải ===== */
.goal,
.member,
.primary-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #dde6f0;
}

.goal-icon,
.member-icon,
.primary-icon {
  flex: 0 0 36px;
  text-align: center;
  font-size: 18px;
  color: #222;
}

.goal-icon i,
.member-icon i,
.primary-icon i {
  margin: 0;
}

/* ===== Scopes: 2 cột IN và OUT ===== */
.scope-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.scope-cols h3 {
  margin-bottom: 10px;
  font-size: 15px;
}

.scope-cols p {
  margin-bottom: 10px;
}

/* ===== Timeline: vòng tròn số tím ===== */
.step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

.step-no {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #9b8be0;
  color: #fff;
  line-height: 34px;
  text-align: center;
}

.step div {
  flex: 1;
  padding-bottom: 6px;
  border-bottom: 1px dotted #5bb5c4;
}

/* ===== Tablet (tối đa 991.98px): 1 cột, icon nằm trên, căn giữa ===== */
@media (max-width: 991.98px) {
  .charter {
    grid-template-columns: 1fr;
    grid-template-areas:
      "goals"
      "scopes"
      "team"
      "primary"
      "timeline";
  }

  .goal,
  .member,
  .primary-item {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: left;
  }

  .goal > div,
  .member > div {
    width: 100%;
  }
}

/* ===== Mobile (tối đa 767.98px): thu hẹp lề và cỡ chữ ===== */
@media (max-width: 767.98px) {
  .charter-head {
    padding: 16px 14px 12px;
  }

  .charter-title {
    font-size: 20px;
  }

  .charter {
    gap: 8px;
    padding: 8px;
  }

  .box {
    padding: 14px 14px 18px;
  }

  .scope-cols {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}