/* ==========================================================================
   ebaohiem-tools.css — UI công cụ tính toán (BHXH một lần / BHYT)
   Phụ thuộc: ebaohiem-ui.css (tokens)
   ========================================================================== */

.eb-tool-page{
  max-width:920px;margin:0 auto;padding:32px 20px 60px;
}
.eb-tool-header{
  text-align:center;margin-bottom:28px;
}
.eb-tool-header .eb-tool-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--eb-orange-soft);color:var(--eb-orange);
  font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:14px;
}
.eb-tool-header h1{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:28px;color:var(--eb-ink);margin:0 0 10px;
}
.eb-tool-header p{
  color:var(--eb-grey);font-size:14.5px;line-height:1.6;max-width:640px;margin:0 auto;
}

/* ---------- Stepper ---------- */
.eb-tool-steps{
  display:flex;justify-content:center;gap:0;margin:26px 0 30px;flex-wrap:wrap;
}
.eb-tool-step{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--eb-grey);
  padding:0 16px;position:relative;
}
.eb-tool-step:not(:last-child)::after{
  content:"";position:absolute;right:-2px;top:50%;width:32px;height:1px;background:var(--eb-border);
}
.eb-tool-step .eb-step-num{
  width:24px;height:24px;border-radius:50%;background:var(--eb-border);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.eb-tool-step.is-active{ color:var(--eb-ink); }
.eb-tool-step.is-active .eb-step-num{ background:var(--eb-orange); }

/* ---------- Card / Form ---------- */
.eb-tool-card-box{
  background:#fff;border:1px solid var(--eb-border);border-radius:18px;
  padding:28px;box-shadow:0 8px 24px rgba(14,47,74,.06);
}
.eb-tool-form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;
}
@media(max-width:640px){ .eb-tool-form-grid{ grid-template-columns:1fr; } }
.eb-tool-form-grid.eb-tool-form-grid--3{ grid-template-columns:1fr 1fr 1fr; }
@media(max-width:760px){ .eb-tool-form-grid.eb-tool-form-grid--3{ grid-template-columns:1fr 1fr; } }

.eb-field{ display:flex;flex-direction:column;gap:7px; }
.eb-field label{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;color:var(--eb-ink);
}
.eb-field .eb-field-hint{ font-size:12px;color:var(--eb-grey);font-weight:400; }
.eb-field input[type="number"],
.eb-field input[type="text"],
.eb-field select{
  border:1px solid var(--eb-border);border-radius:10px;padding:11px 14px;
  font-family:'Inter',sans-serif;font-size:14.5px;color:var(--eb-ink);
  background:var(--eb-bg);outline:none;transition:border-color .15s;
}
.eb-field input:focus,
.eb-field select:focus{ border-color:var(--eb-blue);background:#fff; }

.eb-field-toggle{
  display:flex;border:1px solid var(--eb-border);border-radius:10px;overflow:hidden;
}
.eb-field-toggle button{
  flex:1;border:none;background:var(--eb-bg);color:var(--eb-grey);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;
  padding:11px 8px;cursor:pointer;transition:background .15s,color .15s;
}
.eb-field-toggle button.is-active{ background:var(--eb-blue);color:#fff; }
.eb-field-toggle button + button{ border-left:1px solid var(--eb-border); }

.eb-tool-actions{ display:flex;justify-content:center;margin-top:26px; }
.eb-tool-actions button{
  background:var(--eb-orange);color:#fff;border:none;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;
  padding:13px 36px;border-radius:12px;cursor:pointer;transition:background .15s;
}
.eb-tool-actions button:hover{ background:#E07F0A; }

.eb-tool-error{
  color:#C0392B;background:#FDECEA;border:1px solid #F5C6C0;border-radius:10px;
  padding:10px 14px;font-size:13px;margin-top:16px;display:none;
}
.eb-tool-error.is-visible{ display:block; }

/* ---------- Kết quả ---------- */
.eb-tool-result{ margin-top:28px;display:none; }
.eb-tool-result.is-visible{ display:block; }

.eb-result-hero{
  background:linear-gradient(135deg,var(--eb-blue-deep),var(--eb-blue));
  border-radius:16px;padding:26px 24px;text-align:center;color:#fff;margin-bottom:20px;
}
.eb-result-hero .eb-result-label{ font-size:13px;opacity:.85;margin-bottom:6px; }
.eb-result-hero .eb-result-value{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:32px;
}
.eb-result-hero .eb-result-note{ font-size:12px;opacity:.75;margin-top:8px; }

.eb-result-breakdown{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px;
}
@media(max-width:560px){ .eb-result-breakdown{ grid-template-columns:1fr; } }
.eb-result-item{
  border:1px solid var(--eb-border);border-radius:12px;padding:14px 16px;background:var(--eb-bg);
}
.eb-result-item .eb-result-item-label{ font-size:12.5px;color:var(--eb-grey);margin-bottom:4px; }
.eb-result-item .eb-result-item-value{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;color:var(--eb-ink);
}

.eb-result-explain{
  border:1px solid var(--eb-border);border-radius:14px;padding:18px 20px;margin-bottom:16px;
}
.eb-result-explain h3{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:14.5px;color:var(--eb-ink);margin:0 0 10px;
}
.eb-result-explain ol,
.eb-result-explain ul{ margin:0;padding-left:20px;color:var(--eb-ink);font-size:13.5px;line-height:1.7; }
.eb-result-explain code{
  background:var(--eb-bg);padding:2px 6px;border-radius:6px;font-size:12.5px;color:var(--eb-blue-deep);
}

.eb-result-legal{
  font-size:12px;color:var(--eb-grey);border-top:1px dashed var(--eb-border);
  padding-top:14px;line-height:1.6;
}
.eb-result-disclaimer{
  background:var(--eb-orange-soft);color:#8A5A0F;border-radius:10px;
  padding:12px 14px;font-size:12.5px;margin-top:14px;line-height:1.6;
}

.eb-tool-cta{
  margin-top:26px;text-align:center;padding:20px;border-radius:14px;background:var(--eb-bg);
}
.eb-tool-cta p{ font-size:13.5px;color:var(--eb-ink);margin:0 0 12px;font-weight:600; }
.eb-tool-cta a{
  display:inline-block;background:var(--eb-blue);color:#fff;text-decoration:none;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;
  padding:10px 22px;border-radius:10px;
}

/* ---------- Cross-link giữa 2 tool ---------- */
.eb-tool-crosslink{
  display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;
}
.eb-tool-crosslink a{
  flex:1;min-width:240px;display:flex;align-items:center;gap:12px;
  border:1px solid var(--eb-border);border-radius:14px;padding:16px;text-decoration:none;
  transition:box-shadow .15s;
}
.eb-tool-crosslink a:hover{ box-shadow:0 8px 20px rgba(14,47,74,.08); }
.eb-tool-crosslink .eb-tool-icon{
  width:40px;height:40px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:18px;background:var(--eb-orange-soft);color:var(--eb-orange);
}
.eb-tool-crosslink .eb-tool-crosslink-title{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:13.5px;color:var(--eb-ink);margin:0 0 2px;
}
.eb-tool-crosslink .eb-tool-crosslink-desc{ font-size:12px;color:var(--eb-grey); }