/* VNPT-IKNOW-PLUS-COMMERCE-V1 — region commerce block styles (additive, generic-scoped under .ik).
 * Mobile-first; verified 360/390/412 + desktop 1440. No horizontal overflow; tap targets >=44px. */
.ik { --ik-blue:#0a5bd3; --ik-blue-d:#0842a0; --ik-ink:#12233b; --ik-mut:#5b6b80; --ik-line:#e3e9f2;
  --ik-bg:#f6f9ff; --ik-ok:#0a7d47; --ik-warn:#b25b00; --ik-radius:14px;
  display:block; color:var(--ik-ink); }
.ik * { box-sizing:border-box; }
.ik .ik-region { margin:26px 0; padding:20px; background:#fff; border:1px solid var(--ik-line);
  border-radius:var(--ik-radius); box-shadow:0 2px 10px rgba(16,35,59,.04); }
.ik .ik-r-head { display:flex; align-items:center; gap:12px; margin:0 0 6px; }
.ik .ik-r-num { flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--ik-blue);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:16px; }
.ik .ik-r-head h2 { margin:0; font-size:1.28rem; line-height:1.25; color:var(--ik-ink); }
.ik .ik-r-sub, .ik .ik-r-lead { color:var(--ik-mut); margin:6px 0 14px; line-height:1.55; }
.ik .ik-r-lead { font-size:1.03rem; color:#33465e; }
.ik .ik-note { font-size:.9rem; line-height:1.5; margin:10px 0 0; }
.ik .ik-note-muted { color:var(--ik-mut); }

/* buttons */
.ik .ik-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px;
  padding:10px 18px; border-radius:10px; font-weight:700; font-size:.98rem; cursor:pointer;
  border:1.5px solid transparent; text-decoration:none; transition:.15s; line-height:1.2; }
.ik .ik-btn-primary { background:var(--ik-blue); color:#fff; }
.ik .ik-btn-primary:hover { background:var(--ik-blue-d); }
.ik .ik-btn-ghost { background:#fff; color:var(--ik-blue); border-color:var(--ik-blue); }
.ik .ik-btn-ghost:hover { background:var(--ik-bg); }
.ik .ik-btn-link { background:transparent; color:var(--ik-blue); border:none; text-decoration:underline; }
.ik .ik-btn-sm { min-height:38px; padding:8px 14px; font-size:.9rem; }
.ik .ik-btn[disabled] { opacity:.5; cursor:not-allowed; }
.ik .ik-btn.ik-added { background:var(--ik-ok); border-color:var(--ik-ok); color:#fff; }

/* ② plan + one-time */
.ik .ik-planwrap { display:grid; grid-template-columns:1fr; gap:16px; }
.ik .ik-plan-card { position:relative; border:2px solid var(--ik-blue); border-radius:16px; padding:20px;
  background:linear-gradient(180deg,#f4f8ff,#fff); }
.ik .ik-plan-badge { position:absolute; top:-12px; left:20px; background:var(--ik-blue); color:#fff;
  font-size:.78rem; font-weight:800; padding:4px 12px; border-radius:20px; letter-spacing:.3px; }
.ik .ik-plan-name { font-size:1.35rem; font-weight:800; margin:6px 0 12px; }
.ik .ik-plan-inc { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.ik .ik-plan-inc li { color:#33465e; font-size:.98rem; }
.ik .ik-plan-inc b { color:var(--ik-ink); }
.ik .ik-price-main { font-size:2rem; font-weight:800; color:var(--ik-blue-d); }
.ik .ik-price-per { color:var(--ik-mut); font-size:.95rem; margin-left:6px; }
.ik .ik-plan-vat { color:var(--ik-mut); font-size:.95rem; margin:6px 0 14px; }
.ik .ik-plan-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.ik .ik-initopt { display:flex; align-items:center; gap:8px; font-size:.92rem; color:#33465e; cursor:pointer; }
.ik .ik-initopt input { width:18px; height:18px; }
.ik .ik-onetime-card { border:1px dashed var(--ik-line); border-radius:14px; padding:16px; background:#fbfdff; }
.ik .ik-onetime-h { font-weight:800; font-size:1.05rem; display:flex; align-items:center; gap:8px; }
.ik .ik-tag-once { background:#eef3fb; color:var(--ik-blue-d); font-size:.74rem; font-weight:800;
  padding:2px 8px; border-radius:12px; text-transform:none; }
.ik .ik-onetime-desc { color:var(--ik-mut); font-size:.92rem; margin:6px 0 10px; line-height:1.5; }
.ik .ik-onetime-price .ik-price-main { font-size:1.4rem; }

/* ③ credit + configurator */
.ik .ik-credit-explain { background:var(--ik-bg); border-radius:12px; padding:16px; margin-bottom:16px; }
.ik .ik-credit-rules { list-style:none; margin:8px 0; padding:0; display:grid; gap:8px; }
.ik .ik-credit-rules li { display:flex; align-items:flex-start; gap:10px; color:#33465e; line-height:1.5; }
.ik .ik-dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:6px; }
.ik .ik-dot-p { background:var(--ik-blue); } .ik .ik-dot-u { background:#7a3ff2; } .ik .ik-dot-n { background:#b25b00; }
.ik .ik-credit-warn { color:var(--ik-warn); font-size:.92rem; margin:8px 0 0; font-weight:600; }
.ik .ik-cfg-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.ik .ik-cfg-f { display:flex; flex-direction:column; gap:5px; font-size:.9rem; color:var(--ik-mut); }
.ik .ik-cfg-f input, .ik .ik-cfg-f select { min-height:44px; padding:8px 12px; border:1.5px solid var(--ik-line);
  border-radius:10px; font-size:1rem; color:var(--ik-ink); background:#fff; }
.ik .ik-cfg-f input:focus, .ik .ik-cfg-f select:focus { outline:none; border-color:var(--ik-blue); }
.ik .ik-cfg-result { margin:16px 0; }
.ik .ik-cfg-hint { color:var(--ik-mut); }
.ik .ik-cfg-warn { color:var(--ik-warn); }
.ik .ik-cfg-block { border:1px solid var(--ik-line); border-radius:12px; padding:14px; margin-bottom:12px; background:#fff; }
.ik .ik-cfg-block h4 { margin:0 0 8px; font-size:1rem; color:var(--ik-blue-d); }
.ik .ik-cfg-lines { list-style:none; margin:0 0 10px; padding:0; }
.ik .ik-cfg-lines li { display:flex; justify-content:space-between; gap:12px; padding:5px 0;
  border-bottom:1px dashed var(--ik-line); font-size:.95rem; }
.ik .ik-cfg-tot { display:grid; gap:4px; }
.ik .ik-cfg-row { display:flex; justify-content:space-between; gap:12px; color:var(--ik-mut); font-size:.95rem; }
.ik .ik-cfg-grand { border-top:2px solid var(--ik-line); padding-top:8px; margin-top:4px; color:var(--ik-ink); font-size:1.05rem; }
.ik .ik-cfg-grand b { color:var(--ik-blue-d); }
.ik .ik-cfg-advice { border-radius:10px; padding:10px 12px; font-size:.92rem; margin:6px 0; }
.ik .ik-cfg-advice.ok { background:#e9f7ef; color:var(--ik-ok); }
.ik .ik-cfg-advice.warn { background:#fdf1e3; color:var(--ik-warn); }
.ik .ik-cfg-pubnote { font-size:.88rem; color:var(--ik-mut); margin:4px 0; }
.ik .ik-cfg-prov { font-size:.85rem; color:var(--ik-mut); margin:8px 0 0; font-style:italic; }
.ik .ik-cfg-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ik .ik-cfg-foot { font-size:.85rem; color:var(--ik-mut); margin:12px 0 0; line-height:1.5; }

/* ④ private AI caps */
.ik .ik-caps { display:grid; grid-template-columns:1fr; gap:10px; margin:6px 0 16px; }
.ik .ik-cap { display:flex; align-items:flex-start; gap:10px; background:var(--ik-bg); border-radius:10px;
  padding:10px 12px; font-size:.96rem; color:#2a3c54; line-height:1.45; }
.ik .ik-cap-ic { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--ik-blue);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; }
.ik .ik-sources { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.ik .ik-sources-l { font-weight:700; color:var(--ik-mut); font-size:.9rem; }
.ik .ik-src-chip { background:#eef3fb; color:var(--ik-blue-d); border-radius:20px; padding:5px 12px; font-size:.85rem; font-weight:600; }
.ik .ik-sources-msg { color:var(--ik-mut); font-style:italic; margin:12px 0 0; }

/* ⑤ public AI */
.ik .ik-uses { display:grid; grid-template-columns:1fr; gap:10px; }
.ik .ik-use { background:#faf7ff; border:1px solid #ece3ff; border-left:4px solid #7a3ff2; border-radius:10px;
  padding:12px 14px; font-size:.98rem; color:#2a3c54; }

/* ⑦ trust */
.ik .ik-trust-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.ik .ik-trust-card { border:1px solid var(--ik-line); border-radius:12px; padding:14px; background:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ik .ik-trust-finalist { border-left:4px solid #d99b00; background:#fffdf5; }
.ik .ik-trust-corporate_ai_capability { border-left:4px solid var(--ik-blue); }
.ik .ik-trust-claim { font-weight:700; color:var(--ik-ink); line-height:1.4; }
.ik .ik-trust-src { flex:0 0 auto; color:var(--ik-blue); font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.ik .ik-trust-src:hover { text-decoration:underline; }

/* ⑧ add-ons + project */
.ik .ik-addon-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.ik .ik-addon-card { border:1px solid var(--ik-line); border-radius:12px; padding:16px; background:#fff;
  display:flex; flex-direction:column; gap:6px; }
.ik .ik-addon-h { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ik .ik-addon-t { font-weight:800; font-size:1.02rem; }
.ik .ik-addon-qty { color:var(--ik-mut); font-size:.9rem; }
.ik .ik-addon-price b { font-size:1.25rem; color:var(--ik-blue-d); }
.ik .ik-addon-price small { color:var(--ik-mut); font-weight:600; }
.ik .ik-addon-vat { color:var(--ik-mut); font-size:.88rem; }
.ik .ik-addon-note { color:var(--ik-mut); font-size:.86rem; line-height:1.45; flex:1; }
.ik .ik-addon-card .ik-btn { align-self:flex-start; margin-top:4px; }
.ik .ik-project { margin-top:18px; border:1px dashed var(--ik-line); border-radius:12px; padding:16px; background:#fbfdff; }
.ik .ik-project h4 { margin:0 0 6px; font-size:1.05rem; }
.ik .ik-project p { color:var(--ik-mut); margin:0 0 10px; line-height:1.5; }
.ik .ik-project-list { color:#33465e; margin:0 0 12px; padding-left:20px; line-height:1.6; }
.ik .ik-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* modal */
.ik-modal[hidden] { display:none; }
.ik-modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:16px; }
.ik-modal-back { position:absolute; inset:0; background:rgba(16,35,59,.55); }
.ik-modal-box { position:relative; z-index:1; width:100%; max-width:460px; max-height:92vh; overflow:auto;
  background:#fff; border-radius:16px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ik-modal-x { position:absolute; top:10px; right:12px; border:none; background:transparent; font-size:1.8rem;
  line-height:1; color:#9aa7b8; cursor:pointer; }
.ik-modal-box h3 { margin:0 0 6px; font-size:1.25rem; color:#12233b; }
.ik-modal-sub { color:#5b6b80; font-size:.92rem; margin:0 0 14px; line-height:1.5; }
.ik-modal-form { display:grid; gap:10px; }
.ik-field { display:flex; flex-direction:column; gap:4px; font-size:.9rem; color:#5b6b80; }
.ik-field input, .ik-field textarea { min-height:44px; padding:9px 12px; border:1.5px solid #e3e9f2;
  border-radius:10px; font-size:1rem; color:#12233b; }
.ik-field textarea { min-height:auto; }
.ik-field input:focus, .ik-field textarea:focus { outline:none; border-color:#0a5bd3; }
.ik-modal-msg { font-size:.9rem; min-height:1.2em; }
.ik-modal-msg.ik-err { color:#c02626; }
.ik-modal-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.ik .ik-btn, .ik-modal .ik-btn { }
.ik-modal .ik-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 18px; border-radius:10px; font-weight:700; cursor:pointer; border:1.5px solid transparent; text-decoration:none; }
.ik-modal .ik-btn-primary { background:#0a5bd3; color:#fff; }
.ik-modal .ik-btn-ghost { background:#fff; color:#0a5bd3; border-color:#0a5bd3; }
body.ik-modal-open { overflow:hidden; }
.ik-lead-result { margin:14px 0; }
.ik-lead-result.ik-ok { background:#e9f7ef; color:#0a7d47; border-radius:10px; padding:12px 14px; font-weight:600;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ---- responsive up ---- */
@media (min-width:640px){
  .ik .ik-cfg-grid { grid-template-columns:1fr 1fr; }
  .ik .ik-caps { grid-template-columns:1fr 1fr; }
  .ik .ik-uses { grid-template-columns:1fr 1fr; }
  .ik .ik-addon-grid { grid-template-columns:1fr 1fr; }
  .ik .ik-trust-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:980px){
  .ik .ik-planwrap { grid-template-columns:1.4fr 1fr; align-items:start; }
  .ik .ik-caps { grid-template-columns:1fr 1fr; }
  .ik .ik-addon-grid { grid-template-columns:repeat(2,1fr); }
}