/* css/tncn.css — TNCN calculator overrides & new components */
@media screen and (min-width: 768px) {
  .cc-salary-calculator-head {
    align-items: center;
  }
}


/* ── Pill-style regulation selector ── */
.tncn-law-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 100px;
}

.tncn-law-selector .item {
  display: flex;
  align-items: center;
  cursor: pointer;
}


.tncn-law-selector .item-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* border: 1.5px solid #9ca3af;
  border-radius: 999px; */
  padding: 5px 3px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all .2s ease;
}

.tncn-law-selector .item-input:checked+.item-title {
  border-color: #0059ff;
  color: #0059ff;
  font-weight: 600;
}


/* ── Info boxes ── */
.tncn-info-boxes {
  /*border: 1px solid #0059ff;
  border-radius: 8px;
  background-color: #0059ff10;
  padding: 10px 14px;*/
  margin: 12px 0 0;
}

.tncn-info-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: #111827;
  padding: 4px 0;
}

.tncn-info-icon {
  display: inline-block;
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23A1A8B5'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ── Law note (red text for 2026) ── */
.tncn-law-note {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background-color: #fff5f5;
  font-size: 13px;
  line-height: 1.6;
  color: #c71d02;
}

/* ── Summary cards ── */
.tncn-summary-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 0;
}

.tncn-summary-card {
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  DISPLAY: FLEX;
  FLEX-DIRECTION: COLUMN;
  JUSTIFY-CONTENT: SPACE-BETWEEN;
}

.tncn-summary-card-label {
  font-size: 15px;
  color: #374151;
  margin-bottom: 4px;
}

.tncn-summary-card-value {
  font-size: 18px;
  font-weight: 700;
  color: #0019CB;
}

/* ── BH mode radio ── */
.tncn-bh-radios {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tncn-bh-radios .item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

/* ── Region radio (I II III IV) ── */
.tncn-vung-radios {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.tncn-vung-radios .item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  flex-basis: 22%;
}

@media screen and (max-width: 468px) {
  .tncn-vung-radios {
    justify-content: space-between;
  }

  .tncn-vung-radios .item {
    flex-basis: 20%;

  }
}
.tncn-vung-radios .item-input,
.tncn-bh-radios .item-input,.tncn-law-selector .item-input {
  flex-shrink: 0;
  border: 1px solid #4b5563;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
}

.tncn-vung-radios .item-input:checked,
.tncn-bh-radios .item-input:checked,.tncn-law-selector .item-input:checked {
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23fff' stroke='%230059ff'/%3E%3Ccircle cx='8' cy='8' r='4.5' fill='%230059ff' stroke='%230059ff'/%3E%3C/svg%3E") no-repeat left top;
}

.item-group:has(input[style*="display:none"]) span {
  display: none;
}

/* ── Calculate button ── */
.tncn-btn-tinh {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s ease;
  border: none;
  border-radius: 8px;
  width: 100%;
  max-width: 260px;
  height: 44px;
  margin: 22px auto 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background-color: #6b7280;
  cursor: pointer;
  font-family: inherit;
}

.tncn-btn-tinh:hover {
  background-color: #4b5563;
}

.tncn-btn-tinh.active {
  background-color: #0059ff;
}

.tncn-btn-tinh.active:hover {
  background-color: #15803d;
}

/* ── Result section ── */
#tncn-result {
  display: none;
  margin-top: 28px;
}

.tncn-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color:#111827
}

.tncn-summary-table td {
  padding: 11px 15px;
  border-bottom: 1px dashed #e5e7eb
}

.tncn-summary-table td:first-child {
  color: #374151;
  width: 65%;
}

.tncn-summary-table td:last-child {
  text-align: right;
  font-weight: 500;
  color: #111827;
}

.tncn-summary-table tr.tncn-highlight td {
  background-color: #FFEEF2;
}

.tncn-summary-table tr.tncn-highlight td:last-child {
  color: #c71d02;
  font-weight: 700;
  font-size: 15px;
}

/* ── Bracket detail table ── */
.tncn-bracket-note {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.tncn-bracket-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.tncn-bracket-table th {
  background-color: #f3f4f6;
  padding: 9px 12px;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid #d1d5db;
}
.tncn-bracket-table th:first-child{text-align:left}
.tncn-bracket-table td {
  padding: 9px 12px;
  border-bottom: 1px dashed #e5e7eb;
  text-align: center;
  color: #111827;
}

.tncn-bracket-table td:first-child {
  text-align: left;
  font-size:16px;
  font-weight:600
}
.tncn-bracket-table td:last-child{
	font-weight:600
}
.tncn-note-wrapper{
	border:1px solid #CDDEFF;
	padding:10px;
	background:#fff;
	border-radius:10px;
	margin-top:15px
}
.tncn-note-wrapper a.item-toggler {
	font-size:16px;color:#111827;font-weight:600;
    display: flex;
    justify-content: start;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

/* Mũi tên */
/* Mặc định: đang mở → icon "-" */
.tncn-note-wrapper .item-toggler::after {
    content: "";
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
	margin-left:7px;
    background-image: url("data:image/svg+xml;utf8,\
<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>\
<path d='M8.75 16.75C13.1683 16.75 16.75 13.1683 16.75 8.75C16.75 4.33172 13.1683 0.75 8.75 0.75C4.33172 0.75 0.75 4.33172 0.75 8.75C0.75 13.1683 4.33172 16.75 8.75 16.75Z' stroke='%234B5563' stroke-width='1.5'/>\
<path d='M5.55078 8.75H11.9508' stroke='%234B5563' stroke-width='1.5'/>\
</svg>");
}

/* Khi đóng → icon "+" */
.tncn-note-wrapper .item-toggler[aria-expanded="false"]::after {
    background-image: url("data:image/svg+xml;utf8,\
<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>\
<path d='M8.75 16.75C13.1683 16.75 16.75 13.1683 16.75 8.75C16.75 4.33172 13.1683 0.75 8.75 0.75C4.33172 0.75 0.75 4.33172 0.75 8.75C0.75 13.1683 4.33172 16.75 8.75 16.75Z' stroke='%234B5563' stroke-width='1.5'/>\
<path d='M8.75 5.5498V11.9498' stroke='%234B5563' stroke-width='1.5'/>\
<path d='M5.55078 8.75H11.9508' stroke='%234B5563' stroke-width='1.5'/>\
</svg>");
}
.tncn-law-selector .color-red{color:#C71D02}
@media screen and (max-width: 576px) {

  .tncn-bracket-table th,
  .tncn-bracket-table td {
    padding: 7px 8px;
    font-size: 12px;
  }
}

.cc-salary .c-red{color:#0059FF}
.cc-salary-calculator-form .item-content{
	background: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#tncn-gross,#tncn-phu-thuoc{
    transition: all .3s ease;
    border: 1px solid transparent;
    border-radius: 6px;
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #fff;
    font-size: 14px;
    font-family: inherit;
    color: #4b5563;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
	position: relative;
    height: 24px;
}
.title-summary{font-weight:600;font-size:18px}
.item-group-gross {
    position: relative;
    height: 24px;
}

/* Input phủ full container */
.item-group .item-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 50px 0 12px; /* chừa chỗ cho VND */
    font-size: 14px;
    background: transparent;
}

/* Text VND */
.item-group .unit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #6b7280;
    pointer-events: none;
}
.fz-17{font-size:17px}