/* Giữ nguyên bảng màu sáng gốc của website.
   File này chỉ phụ trách bố cục thẻ module và hiệu ứng cảnh báo phản vệ. */

/* Hai cột trên desktop, một cột trên mobile. */
#view-home .feature-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:16px!important;
}

/* Cấu trúc: icon trái · nội dung giữa · badge/mũi tên phải. */
#view-home .feature-card{
  position:relative;
  display:grid!important;
  grid-template-columns:60px minmax(0,1fr) auto 18px;
  grid-template-rows:auto auto;
  grid-template-areas:"icon title badge arrow" "icon description description arrow";
  column-gap:14px;
  row-gap:6px;
  align-items:center;
  min-height:112px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  background:#fff!important;
  color:var(--ink)!important;
  text-decoration:none;
  overflow:hidden;
}

#view-home .feature-card::after{
  content:"›";
  grid-area:arrow;
  align-self:center;
  color:#6f9fbd;
  font-size:28px;
  font-style:normal;
  font-weight:500;
  transition:transform .2s,color .2s;
}

#view-home .feature-card:hover::after{
  transform:translateX(3px);
  color:var(--blue);
}

#view-home .feature-icon{
  grid-area:icon;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:1px solid #cce2f1;
  border-radius:16px;
  background:#e8f4fc;
  color:var(--blue);
  font-size:28px!important;
  box-shadow:0 7px 18px rgba(31,74,108,.10);
}

#view-home .feature-card b{
  grid-area:title;
  color:#075d98!important;
  font-size:15px!important;
  line-height:1.3;
}

#view-home .feature-card small{
  grid-area:description;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
}

#view-home .feature-card em{
  grid-area:badge;
  align-self:center!important;
  white-space:nowrap;
  padding:4px 8px!important;
}

/* Hiệu ứng nằm hoàn toàn bên trong card để không bị khuất ở mép lưới. */
@keyframes vpmed-anaphylaxis-pulse{
  0%,100%{
    opacity:.32;
    box-shadow:inset 0 0 0 1px rgba(211,28,49,.30);
  }
  50%{
    opacity:1;
    box-shadow:inset 0 0 0 3px rgba(211,28,49,.86),inset 0 0 20px rgba(211,28,49,.18);
  }
}

#view-home .feature-card.emergency-feature{
  border-color:#e9aeb5!important;
}

#view-home .feature-card.emergency-feature::before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:0;
  border-radius:14px;
  pointer-events:none;
  animation:vpmed-anaphylaxis-pulse 1.35s ease-in-out infinite;
}

#view-home .feature-card.emergency-feature>*{position:relative;z-index:1}

#view-home .feature-card.emergency-feature .feature-icon{
  border-color:#efb8bf;
  background:#fff0f2;
  color:#b51224;
}

#view-home .feature-card.emergency-feature b{color:#b51224!important}
#view-home .feature-card.emergency-feature em{
  border-color:#efb8bf!important;
  background:#fff0f2!important;
  color:#b51224!important;
}

@media(max-width:720px){
  #view-home .feature-grid{grid-template-columns:1fr!important}
  #view-home .feature-card{
    grid-template-columns:54px minmax(0,1fr) auto 14px;
    min-height:104px!important;
    padding:14px!important;
    column-gap:11px;
  }
  #view-home .feature-icon{width:52px;height:52px;border-radius:14px;font-size:25px!important}
  #view-home .feature-card b{font-size:14px!important}
  #view-home .feature-card small{font-size:11.5px!important}
  #view-home .feature-card em{font-size:10px!important;padding:3px 7px!important}
}

@media(prefers-reduced-motion:reduce){
  #view-home .feature-card.emergency-feature::before{animation:none;opacity:1}
}