:root{
  --ai-navy:#00264d; --ai-cyan:#00c6ff;
  --ai-muted:#6b7a90; --ai-radius:20px;
  --ai-sep:#e9eff6; --ai-feature:#eef6ff;
}

/* Wrapper */
.aihub-card-compare{
  border-radius: var(--ai-radius);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,38,77,.12),0 3px 10px rgba(0,38,77,.08);
  background:#fff;
}

/* Header */
.aihub-cc-head{
    display: grid;
    grid-template-columns: 2.3fr 1.3fr 1.1fr 1.1fr 3.1fr .6fr .9fr;
    gap: 18px;
    padding: 12px 28px;
    background: var(--ai-navy);
    color: #fff;
    font-weight: 500;
    font-size: .97em;
    align-items: center;
}
.aihub-cc-head .th{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.aihub-cc-head .ico{ width:18px; height:18px; color:#fff; opacity:.92; flex:0 0 18px; }

/* Rows */
.aihub-cc-row{
    display: grid;
    grid-template-columns: 2.3fr 1.3fr 1.1fr 1.1fr 3.1fr .6fr .9fr;
    gap: 18px;
    padding: 10px 28px;
    border-top: 1px solid var(--ai-sep);
    background: #fff;
    align-items: center;
    font-size: .9em;
    line-height: normal;
    font-weight: 300;
}
.aihub-cc-row.is-featured{ background: var(--ai-feature); }

/* Bank cell */
.aihub-cc-row .bank{ display:flex; align-items:flex-start; gap:5px; }
.aihub-cc-row .bank .dot{
  width:10px; height:10px; border-radius:50%; background:var(--ai-cyan);
  margin-top:.5rem; flex:0 0 10px;
}
.aihub-cc-row .bank strong{ font-size:16px; font-weight: 500; }
.aihub-cc-row .product{ color:var(--ai-muted); margin-top:4px; font-size:13px; }

/* Pill badge (AI Pick) */
.aihub-cc-row .pill{
  background: var(--ai-cyan); color:#fff; border-radius:999px;
  padding:4px 10px; line-height:1; font-size:12px; font-weight:500;
}

/* Incentives list */
.aihub-cc-row .inc-list{ margin:0; padding:0; list-style:none; }
.aihub-cc-row .inc-list li{ position:relative; padding-left:22px; margin:6px 0; }
.aihub-cc-row .inc-list li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:14px;
  background:var(--ai-cyan);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.2 14.3L3.1 10.2l1.4-1.4 2.7 2.7 8.3-8.3 1.4 1.4z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.2 14.3L3.1 10.2l1.4-1.4 2.7 2.7 8.3-8.3 1.4 1.4z"/></svg>') center/contain no-repeat;
}

/* Rating */
.aihub-cc-row .rating{ display:flex; align-items:center; gap:8px; color:var(--ai-cyan); font-weight:500; }
.aihub-cc-row .ico-trend{ width:18px; height:18px; flex:0 0 18px; }

/* Action (leverage Flatsome button classes) */
.aihub-cc-row .action{ display:flex; justify-content:flex-start; }
.aihub-cc-row .action .button.is-small{ padding: 0 18px; height: 34px; border-radius: 9px; font-size: .9em; }

/* AIHub Cards — chỉ hiện dot ở hàng featured */
.aihub-card-compare .aihub-cc-row .td.bank .dot{
  display:none;               /* ẩn mặc định */
}

.aihub-card-compare .aihub-cc-row.is-featured .td.bank .dot{
  display:inline-block;       /* chỉ hiện khi hàng có .is-featured */
  width:10px; height:10px; border-radius:50%;
  background:#00c6ff;
  margin-top:15px; margin-right:8px;
}

/* Responsive */
@media (max-width:1100px){
  .aihub-card-compare{ overflow:auto; }
  .aihub-cc-head, .aihub-cc-row{ min-width: 980px; }

  /* Cho ô bank được wrap & không bị cắt badge */
  .aihub-card-compare .aihub-cc-row .td.bank{
    overflow: visible;
    white-space: normal;
  }
  .aihub-card-compare .bank-line{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;   /* tên + badge xuống dòng khi hẹp */
  }
  .aihub-card-compare .bank-line .pill{
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.1;
  }
  .aihub-cc-row {
      font-size: .85em;
  }

}

@media (max-width:640px){
  .aihub-cc-row .bank strong{ font-size:15px; }
}