.tncn-wrapper{--accent:#3b82f6; --bg:#f6f9ff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.tncn-title{margin:0 0 16px;font-size:26px;font-weight:700}
.tncn-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 16px;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.tncn-card h3{margin:0 0 12px;font-size:20px}
.sec-badge{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:2px 10px;margin-right:8px;font-size:12px}
.tncn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:640px){.tncn-grid{grid-template-columns:1fr}}
.tncn-field{display:flex;flex-direction:column;gap:6px;background:var(--bg);padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb}
.tncn-ico{width:22px}
.tncn-field input,
.tncn-field input:focus,.tncn-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.tncn-result output{font-weight:700}
.req{color:#ef4444;margin-left:2px}
.hint{color:#6b7280;margin-left:4px}
.muted{color:#6b7280}
.tncn-detail{margin-top:10px;border-top:1px dashed #d1d5db;padding-top:10px}
.tncn-detail table{width:100%;border-collapse:collapse;margin:8px 0}
.tncn-detail th,.tncn-detail td{border:1px solid #e5e7eb;padding:8px;text-align:left}
.tncn-note{font-size:13px;color:#374151}
.tncn-footer{font-size:13px;color:#374151}
.tn-right{float:right}
.small{font-size:12px;color:#6b7280}

/* VNĐ suffix next to currency inputs */
.tncn-field{position:relative}
.suffix-vnd{margin-left:4px;font-weight:600;color:#111827;position:static}
.tncn-field input.vnd-input{padding-right:12px}

/* Select fix: avoid clipping descenders */


/* Hide other cards when a card is active */
.tncn-wrapper .tncn-card{display:block}
.tncn-wrapper .tncn-card.active{display:block}
.tncn-wrapper .tncn-card:not(.active).collapsed{display:none}

.tncn-card{display:none}
.tncn-card.active{display:block}

/* Better inline VNĐ symbol */
.suffix-vnd{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-weight:600;
  color:#111827;
  pointer-events:none;
}
.tncn-field input.vnd-input{padding-right:48px}

/* Accordion */
.tncn-card.collapsed{display:none}
.tncn-card h3{cursor:pointer}

/* Fix select vertical alignment */


/* Improve number readability */
.tncn-field input,
.tncn-field select,
.tncn-result output{
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.tncn-field input.vnd-input{
  line-height: 1.6;
  height: 44px;
  box-sizing: border-box;
}

/* VNĐ suffix tighter and centered */
.suffix-vnd{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-weight:600;
  color:#111827;
  pointer-events:none;
}

/* Select clipping fix */


/* Output styling for currency */
.tncn-result output{font-weight:700; display:block}

/* Stronger select fix */


/* Inputs spacing */
.tncn-field input.vnd-input{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Stronger positioning and sizing to avoid theme overrides */
.tncn-field{position:relative !important}
.tncn-field input{display:block; width:100%}
.tncn-card .tncn-field .suffix-vnd{
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-weight:600;
  color:#111827;
  pointer-events:none;
}

/* Robust select fix (descenders/clipping) */


/* Final fix for select height */


/* v1.4.2: Select sizing with em units for perfect fit */


/* v1.4.5: Select height per user spec */
.tncn-field select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display:block !important;
  width:100% !important;
  padding: 0.6em 2em 0.6em 0.75em !important;
  height: 2.807em !important;
  min-height: 2.807em !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  border-radius: 0.625em !important;
  font-size: 1em !important;
  overflow: visible !important;
  background-clip: padding-box !important;
}

/* v1.4.7: Calculate buttons */
.tncn-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:10px; padding:10px 14px;
  background:#2563eb; color:#fff; border:none; border-radius:10px;
  font-weight:600; cursor:pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.tncn-btn:hover{ background:#1d4ed8 }
.tncn-result output + .tncn-btn{ vertical-align:middle }