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

/* buttons */
.co .co-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; }
.co .co-btn-primary { background:var(--co-blue); color:#fff; }
.co .co-btn-primary:hover { background:var(--co-blue-d); }
.co .co-btn-ghost { background:#fff; color:var(--co-blue); border-color:var(--co-blue); }
.co .co-btn-ghost:hover { background:var(--co-bg); }
.co .co-btn-link { background:transparent; color:var(--co-blue); border:none; text-decoration:underline; }
.co .co-btn-sm { min-height:38px; padding:8px 14px; font-size:.9rem; }
.co .co-btn[disabled] { opacity:.5; cursor:not-allowed; }
.co .co-btn.co-added { background:var(--co-ok); border-color:var(--co-ok); color:#fff; }
.co .co-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

/* ① tabs + price grid */
.co .co-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; border-bottom:2px solid var(--co-line); }
.co .co-tab { min-height:44px; padding:10px 18px; border:none; background:transparent; color:var(--co-mut);
  font-weight:700; font-size:1rem; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
.co .co-tab.is-active { color:var(--co-blue-d); border-bottom-color:var(--co-blue); }
.co .co-tabpane { animation:coFade .2s ease; }
@keyframes coFade { from{opacity:.4} to{opacity:1} }
.co .co-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.co .co-card { position:relative; border:1px solid var(--co-line); border-radius:14px; padding:16px;
  background:linear-gradient(180deg,#fbfdff,#fff); display:flex; flex-direction:column; }
.co .co-card-badge { position:absolute; top:-11px; left:16px; background:var(--co-blue); color:#fff;
  font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:20px; }
.co .co-card-name { font-size:1.12rem; font-weight:800; margin:4px 0 10px; color:var(--co-ink); }
.co .co-card-specs { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:5px; }
.co .co-card-specs li { color:#33465e; font-size:.9rem; line-height:1.45; }
.co .co-price-main { font-size:1.5rem; font-weight:800; color:var(--co-blue-d); }
.co .co-price-per { color:var(--co-mut); font-size:.86rem; margin-left:4px; }
.co .co-card-vat { color:var(--co-mut); font-size:.86rem; margin:6px 0 12px; }
.co .co-card > .co-btn { margin-top:auto; }

.co .co-onetime { margin:16px 0 6px; padding:12px 14px; border:1px dashed var(--co-line); border-radius:12px;
  background:#fbfdff; font-size:.95rem; color:#33465e; }
.co .co-onetime b { color:var(--co-blue-d); }
.co .co-onetime small { color:var(--co-mut); }
.co .co-onetime-note { color:var(--co-mut); }
.co .co-tag-once, .co .co-tag-consult { background:#eef3fb; color:var(--co-blue-d); font-size:.72rem;
  font-weight:800; padding:2px 8px; border-radius:12px; }
.co .co-tag-consult { background:#fff3e6; color:var(--co-warn); }
.co .co-subfam { margin-top:22px; padding-top:16px; border-top:1px solid var(--co-line); }
.co .co-subfam-h { font-size:1.08rem; margin:0 0 4px; color:var(--co-ink); }

.co .co-reserve { margin-top:18px; border:1px solid #ffd9ad; background:#fffaf3; border-radius:14px; padding:16px; }
.co .co-reserve-h { font-weight:800; font-size:1.05rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.co .co-reserve-desc { color:var(--co-mut); font-size:.92rem; margin:8px 0; line-height:1.5; }
.co .co-reserve-price { font-size:.98rem; margin-bottom:10px; } .co .co-reserve-price b { color:var(--co-blue-d); }
.co .co-reserve-price small { color:var(--co-mut); }

/* ② configurator */
.co .co-cfg { background:var(--co-bg); border-radius:12px; padding:16px; }
.co .co-cfg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.co .co-cfg-f { display:flex; flex-direction:column; gap:5px; font-size:.9rem; color:#33465e; font-weight:600; }
.co .co-cfg-f select, .co .co-cfg-f input { min-height:44px; padding:9px 11px; border:1px solid var(--co-line);
  border-radius:10px; font-size:1rem; background:#fff; color:var(--co-ink); width:100%; }
.co .co-cfg-check { display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:.92rem; color:#33465e; cursor:pointer; }
.co .co-cfg-check input { width:18px; height:18px; }
.co .co-cfg-result { margin:16px 0 0; }
.co .co-cfg-hint { color:var(--co-mut); }
.co .co-cfg-warn { color:var(--co-warn); font-weight:600; }
.co .co-cfg-block { background:#fff; border:1px solid var(--co-line); border-radius:12px; padding:14px; margin-bottom:12px; }
.co .co-cfg-block h4 { margin:0 0 8px; font-size:1rem; color:var(--co-blue-d); }
.co .co-cfg-lines { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px; }
.co .co-cfg-lines li { display:flex; justify-content:space-between; gap:12px; font-size:.92rem; color:#33465e; }
.co .co-cfg-tot { border-top:1px dashed var(--co-line); padding-top:8px; display:grid; gap:4px; }
.co .co-cfg-row { display:flex; justify-content:space-between; gap:12px; font-size:.92rem; color:var(--co-mut); }
.co .co-cfg-grand { color:var(--co-ink); font-size:1.02rem; } .co .co-cfg-grand b { color:var(--co-blue-d); }
.co .co-cfg-advice { border-radius:10px; padding:10px 12px; font-size:.9rem; margin:6px 0; }
.co .co-cfg-advice.warn { background:#fff3e6; color:var(--co-warn); }
.co .co-cfg-prov { color:var(--co-mut); font-size:.85rem; margin:8px 0 0; line-height:1.5; }
.co .co-cfg-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.co .co-cfg-foot { color:var(--co-mut); font-size:.85rem; margin:12px 0 0; line-height:1.5; }

/* ③ add-ons */
.co .co-addon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.co .co-addon-card { border:1px solid var(--co-line); border-radius:12px; padding:14px; background:#fff; display:flex; flex-direction:column; }
.co .co-addon-t { font-weight:700; font-size:.98rem; margin-bottom:6px; }
.co .co-addon-qty { color:var(--co-mut); font-size:.85rem; margin-bottom:4px; }
.co .co-addon-price b { font-size:1.15rem; color:var(--co-blue-d); } .co .co-addon-price small { color:var(--co-mut); }
.co .co-addon-vat { color:var(--co-mut); font-size:.84rem; margin:4px 0 10px; }
.co .co-addon-card > .co-btn { margin-top:auto; }
.co .co-survey-note { margin-top:14px; padding:12px 14px; border:1px dashed var(--co-line); border-radius:12px;
  background:#fbfdff; font-size:.92rem; color:#33465e; line-height:1.55; }
.co .co-survey-note .co-btn { margin-top:8px; }

/* ④ infra + SLA */
.co .co-idc-chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 6px; }
.co .co-idc-chip { background:#eef3fb; color:var(--co-blue-d); font-weight:700; font-size:.88rem; padding:6px 12px; border-radius:20px; }
.co .co-sla-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.co .co-sla-card { border:1px solid var(--co-line); border-radius:12px; padding:14px; background:#fbfdff; }
.co .co-sla-t { font-weight:800; color:var(--co-blue-d); margin-bottom:8px; }
.co .co-sla-card ul { margin:0; padding-left:18px; display:grid; gap:5px; } .co .co-sla-card li { color:#33465e; font-size:.9rem; line-height:1.45; }

/* ⑤ advanced */
.co .co-adv-list { margin:6px 0 4px; padding-left:20px; display:grid; gap:6px; }
.co .co-adv-list li { color:#33465e; line-height:1.5; }

/* modal */
.co-modal[hidden] { display:none; }
.co-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
.co-modal-back { position:absolute; inset:0; background:rgba(9,20,40,.55); }
.co-modal-box { position:relative; background:#fff; border-radius:16px; padding:22px; width:100%; max-width:460px;
  max-height:92vh; overflow:auto; box-shadow:0 20px 60px rgba(9,20,40,.3); color:#12233b; }
.co-modal-x { position:absolute; top:10px; right:12px; border:none; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:#5b6b80; }
.co-modal-box h3 { margin:0 6px 6px 0; font-size:1.2rem; }
.co-modal-sub { color:#5b6b80; font-size:.92rem; margin:0 0 14px; line-height:1.5; }
.co-modal-form { display:grid; gap:10px; }
.co-field { display:flex; flex-direction:column; gap:4px; font-size:.9rem; color:#33465e; font-weight:600; }
.co-field input, .co-field textarea { min-height:44px; padding:10px 12px; border:1px solid #e3e9f2; border-radius:10px; font-size:1rem; font-family:inherit; }
.co-field textarea { min-height:60px; }
.co-modal-msg { font-size:.9rem; min-height:1em; } .co-modal-msg.co-err { color:#c0271a; }
.co-modal-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.co .co-btn, .co-modal .co-btn { }
.co-modal .co-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; }
.co-modal .co-btn-primary { background:#0a5bd3; color:#fff; }
.co-modal .co-btn-ghost { background:#fff; color:#0a5bd3; border-color:#0a5bd3; }
body.co-modal-open { overflow:hidden; }
.co-lead-result { margin:14px 0 0; }
.co-lead-result.co-ok { background:#e7f6ee; border:1px solid #b7e2c8; color:#0a7d47; border-radius:12px; padding:12px 14px; }

/* small screens */
@media (max-width:412px) {
  .co .co-r-head h2 { font-size:1.14rem; }
  .co .co-grid, .co .co-addon-grid, .co .co-sla-grid { grid-template-columns:1fr; }
  .co .co-cfg-grid { grid-template-columns:1fr; }
  .co .co-price-main { font-size:1.35rem; }
}

/* ===== Region ⑥ — Related services (FIX-FORWARD-02 §4/§5) ===== */
.co .co-r-related .co-r-sub { color:var(--co-mut); font-size:.92rem; line-height:1.5; margin:2px 0 14px; }
.co .co-rel-grouph { font-size:1.02rem; font-weight:800; color:var(--co-ink); margin:20px 0 10px; }
.co .co-rel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.co .co-rel-card { display:flex; flex-direction:column; border:1px solid var(--co-line); border-radius:14px;
  padding:16px; background:#fbfdff; }
.co .co-rel-card.co-rel-adv { background:#fffaf3; border-color:#ffd9ad; }
.co .co-rel-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.co .co-rel-name { margin:0; font-size:1.04rem; font-weight:800; color:var(--co-ink); line-height:1.3; }
.co .co-rel-badge { flex:none; font-size:.7rem; font-weight:700; color:#8a5a00; background:#fff3e6;
  border:1px solid #ffd9ad; border-radius:999px; padding:3px 8px; white-space:nowrap; }
.co .co-rel-what { font-size:.9rem; color:#33465e; margin:8px 0 6px; line-height:1.45; }
.co .co-rel-when { font-size:.86rem; color:var(--co-mut); margin:0 0 12px; line-height:1.45; }
.co .co-rel-when b { color:#33465e; font-weight:700; }
.co .co-rel-cta { margin-top:auto; align-self:flex-start; }
@media (max-width:412px) {
  .co .co-rel-grid { grid-template-columns:1fr; }
  .co .co-rel-cta { align-self:stretch; text-align:center; justify-content:center; }
}