/* VNPT-INTERNET-B2B-COMMERCE-V1 — commerce block styles (ic-*). Self-contained, additive.
 * Mobile-first, no horizontal overflow, tap targets >= 44px, modal above chat bubble. */
.ic { --ic-brand:#0a58ca; --ic-brand-d:#084298; --ic-ink:#1f2733; --ic-mut:#5b6675; --ic-line:#e3e8ef; --ic-bg:#f7f9fc; --ic-ok:#0f7b3f; --ic-err:#c0392b;
  display:block; margin:8px 0 4px; color:var(--ic-ink); }
.ic *{ box-sizing:border-box; }
.ic .ic-region{ padding:18px 0; border-top:1px solid var(--ic-line); }
.ic .ic-region:first-child{ border-top:0; }
.ic .ic-r-head{ display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.ic .ic-r-num{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ic-brand); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; }
.ic .ic-r-head h2{ font-size:19px; margin:0; line-height:1.25; }
.ic .ic-r-sub{ color:var(--ic-mut); margin:0 0 12px; font-size:14.5px; line-height:1.5; }

/* buttons */
.ic .ic-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 16px; border-radius:9px; font-weight:600; font-size:14.5px; text-decoration:none; cursor:pointer; border:1px solid transparent; line-height:1.2; }
.ic .ic-btn-primary{ background:var(--ic-brand); color:#fff; }
.ic .ic-btn-primary:hover{ background:var(--ic-brand-d); }
.ic .ic-btn-ghost{ background:#fff; color:var(--ic-brand); border-color:var(--ic-brand); }
.ic .ic-btn-link{ background:transparent; color:var(--ic-brand); border:0; text-decoration:underline; min-height:40px; padding:8px 4px; }
.ic .ic-btn-sm{ min-height:38px; padding:7px 12px; font-size:13.5px; }
.ic .ic-btn.ic-added{ background:var(--ic-ok); }

/* renewal region */
.ic .ic-renew-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.ic .ic-renew-notes{ margin:14px 0 0; padding-left:0; list-style:none; display:grid; gap:8px; }
.ic .ic-renew-notes li{ background:var(--ic-bg); border:1px solid var(--ic-line); border-radius:9px; padding:10px 12px; font-size:13.5px; color:var(--ic-mut); line-height:1.5; }
.ic .ic-renew-result{ margin-top:12px; }
.ic .ic-renew-result.ic-ok{ background:#eaf7ef; border:1px solid #bfe6cd; border-radius:9px; padding:12px 14px; color:var(--ic-ok); font-size:14px; }

/* price families + cards */
.ic .ic-fam{ margin:14px 0 6px; }
.ic .ic-fam-title{ font-size:16px; margin:14px 0 2px; }
.ic .ic-fam-tag{ color:var(--ic-mut); font-size:13.5px; margin:0 0 10px; line-height:1.5; }
.ic .ic-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.ic .ic-card{ border:1px solid var(--ic-line); border-radius:12px; padding:14px; background:#fff; display:flex; flex-direction:column; gap:8px; min-width:0; }
.ic .ic-card-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.ic .ic-name{ font-weight:700; font-size:15.5px; }
.ic .ic-chip-survey{ font-size:11.5px; font-weight:600; color:#8a5a00; background:#fff4e0; border:1px solid #ffe0a8; border-radius:20px; padding:3px 9px; }
.ic .ic-chip-soon{ font-size:11.5px; font-weight:600; color:var(--ic-mut); background:var(--ic-bg); border:1px solid var(--ic-line); border-radius:20px; padding:3px 9px; }
.ic .ic-spec{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.ic .ic-spec li{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ic-mut); }
.ic .ic-spec li b{ color:var(--ic-ink); font-weight:600; text-align:right; }

/* cycles */
.ic .ic-cycles{ display:grid; gap:6px; margin-top:4px; }
.ic .ic-cyc{ display:flex; align-items:center; gap:8px; border:1px solid var(--ic-line); border-radius:8px; padding:8px 10px; cursor:pointer; font-size:13.5px; min-height:44px; }
.ic .ic-cyc input{ margin:0; flex:0 0 auto; width:16px; height:16px; }
.ic .ic-cyc-l{ flex:1 1 auto; color:var(--ic-mut); }
.ic .ic-cyc-p{ font-weight:700; color:var(--ic-ink); }
.ic .ic-cyc:has(input:checked){ border-color:var(--ic-brand); background:#f2f7ff; }
.ic .ic-vat{ font-size:12px; color:var(--ic-mut); }
.ic .ic-prepay-note{ font-size:12px; color:var(--ic-mut); background:var(--ic-bg); border-radius:8px; padding:8px 10px; line-height:1.5; }
.ic .ic-survey-note{ font-size:12.5px; color:#8a5a00; background:#fff9ef; border:1px solid #ffe6bd; border-radius:8px; padding:8px 10px; line-height:1.5; }
.ic .ic-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.ic .ic-actions .ic-btn{ flex:1 1 auto; }

/* conn cards */
.ic .ic-conn-card .ic-conn-desc{ font-size:13px; color:var(--ic-mut); line-height:1.5; }
.ic .ic-conn-foot{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }

/* need/segment picks */
.ic .ic-picks{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ic .ic-pick{ border:1px solid var(--ic-line); background:#fff; border-radius:22px; padding:9px 15px; font-size:13.5px; font-weight:600; cursor:pointer; min-height:44px; color:var(--ic-ink); }
.ic .ic-pick.on{ background:var(--ic-brand); color:#fff; border-color:var(--ic-brand); }
.ic .ic-pick-unsure{ color:var(--ic-mut); }
.ic .ic-panel{ margin:6px 0 0; }
.ic .ic-panel-why{ font-size:14px; margin-bottom:10px; color:var(--ic-ink); }

/* modal (above chat bubble & floating controls) */
.ic-modal{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:16px; }
.ic-modal[hidden]{ display:none; }
.ic-modal .ic-modal-back{ position:absolute; inset:0; background:rgba(15,22,33,.55); }
.ic-modal .ic-modal-box{ position:relative; z-index:1; width:100%; max-width:440px; max-height:90vh; overflow:auto; background:#fff; border-radius:14px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.28); }
.ic-modal .ic-modal-x{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:var(--ic-mut); width:40px; height:40px; }
.ic-modal h3{ margin:0 6px 6px 0; font-size:18px; color:#1f2733; }
.ic-modal .ic-modal-sub{ color:#5b6675; font-size:13.5px; margin:0 0 14px; line-height:1.5; }
.ic-modal .ic-field{ display:block; margin-bottom:10px; }
.ic-modal .ic-field span{ display:block; font-size:13px; font-weight:600; margin-bottom:4px; color:#1f2733; }
.ic-modal .ic-field input, .ic-modal .ic-field textarea{ width:100%; border:1px solid #cfd6e0; border-radius:9px; padding:10px 12px; font-size:15px; font-family:inherit; min-height:44px; }
.ic-modal .ic-field textarea{ min-height:64px; resize:vertical; }
.ic-modal .ic-modal-msg{ font-size:13px; margin:4px 0 8px; min-height:16px; }
.ic-modal .ic-modal-msg.ic-err{ color:var(--ic-err); }
.ic-modal .ic-modal-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.ic-modal .ic-modal-actions .ic-btn{ flex:1 1 auto; }
body.ic-modal-open{ overflow:hidden; }

/* mobile */
@media (max-width:640px){
  .ic .ic-grid{ grid-template-columns:1fr; }
  .ic .ic-r-head h2{ font-size:17px; }
  .ic .ic-actions .ic-btn{ width:100%; }
  .ic .ic-renew-actions .ic-btn{ flex:1 1 100%; }
}