/* =========================================================
   BrandKeyPro — Homepage Strengths (updated to 2 equal columns)
   Thứ tự: Wrapper → Grid → List → Icon/Text → Media → Responsive
   ========================================================= */

/* 0) WRAPPER */
.strengths{
  position: relative;
  overflow: hidden; /* an toàn nếu ảnh lớn */
}

/* 1) GRID: 2 cột bằng nhau + gap 1.875rem; căn giữa theo chiều cao */
.strengths-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.875rem;              /* 30px */
  align-items: center;        /* hai cột căn giữa dọc */
}

/* 2) LIST BÊN TRÁI */
.strengths-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.strengths-list li{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.5625rem 0;
  border-bottom: 1px dashed #cccccc;
}
.strengths-list li:first-child{ padding-top: 0; }
.strengths-list li:last-child{
  padding-bottom: 0;
  border-bottom: none;
}
.strengths-list i{
  min-width: 20px;
  margin: 0;
  color: var(--primary, #008cec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.strengths-list span{
  color: var(--text, #222);
  font-size: 1.25rem;
  line-height: 1.7;
}

/* 3) MEDIA BÊN PHẢI */
.strengths-media{
  width: 100%;
  text-align: center;         /* căn giữa ảnh theo ngang */
}
/* Ảnh hiển thị như thành phần thông thường, KHÔNG đặt làm nền */
.strengths-media .strengths-img,
.strengths-img{
  position: static;
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 8px);
  box-shadow: none;
  pointer-events: auto;
  object-fit: contain;
}

/* 4) RESPONSIVE
   ============================ */
/* ≤64rem (tablet & mobile): 1 cột, ảnh đặt dưới list */
@media (max-width: 64rem){
  .strengths-grid{
    grid-template-columns: 1fr;
  }
  .strengths-media{
    margin-top: 1rem;
  }
  .strengths-list {
    display: grid;
    gap: 16px;                 /* giãn cách mỗi dòng */
  }
  .strengths-list li{
    display: flex;
    align-items: center;
    gap: 12px;                 /* khoảng cách icon - text */
  }
  .strengths-list i{
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;           /* tránh co lại */
    border-radius: 50%;
    background: var(--primary, #008cec);
    color: #fff !important;    /* ghi đè màu của Font Awesome */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;           /* size icon bên trong */
    line-height: 1;            /* canh icon gọn */
  }
  .strengths-list span{
    flex: 1;                   /* nội dung chiếm phần còn lại */
  }
}

/* ≤40rem (mobile nhỏ) */
@media (max-width: 40rem){
  .section-title{ margin: 28px 0 6px; }
  .hp-strengths{ padding: 40px 0; }
}