/* Máy tính thuế — dùng token của theme, tự hoạt động ở cả sáng và tối. */

.ctax {
	--ctax-bg:     var(--surface, #f5f7fa);
	--ctax-card:   var(--bg, #fff);
	--ctax-border: var(--border, #e1e7ee);
	--ctax-text:   var(--text, #111820);
	--ctax-muted:  var(--text-muted, #57626f);
	--ctax-brand:  var(--brand, #0f3d6e);
	--ctax-ok:     var(--ok, #12734a);
	--ctax-warn:   var(--warn, #8a5d06);
	--ctax-danger: var(--danger, #a52222);

	background: var(--ctax-bg);
	border: 1px solid var(--ctax-border);
	border-radius: 12px;
	padding: 24px;
	margin: 30px 0;
	color: var(--ctax-text);
}

.ctax__head { margin-bottom: 20px; }

.ctax__title {
	margin: 0 0 8px;
	font-size: 1.3rem;
	line-height: 1.3;
}

.ctax__sub {
	margin: 0;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--ctax-muted);
}

/* Form */

.ctax__form {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin-bottom: 22px;
}

.ctax__field {
	display: flex;
	flex-direction: column;
}

.ctax__field label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 7px;
	/*
	 * Nhãn một dòng và nhãn hai dòng phải cao bằng nhau, nếu không các ô
	 * nhập nằm lệch cao độ so với nhau.
	 */
	min-height: 2.7em;
}

/* Đẩy ghi chú xuống đáy để chân các cột cũng thẳng hàng. */
.ctax__field .ctax__hint { margin-top: auto; }

.ctax__field input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--ctax-border);
	border-radius: 8px;
	background: var(--ctax-card);
	color: var(--ctax-text);
	font-family: inherit;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.ctax__field input:focus {
	outline: 2px solid var(--ctax-brand);
	outline-offset: 1px;
	border-color: var(--ctax-brand);
}

.ctax__hint {
	margin: 5px 0 0;
	font-size: .78rem;
	color: var(--ctax-muted);
	line-height: 1.45;
}

/* Kết quả */

.ctax__grid {
	display: grid;
	gap: 12px;
	/* Đủ rộng cho số kiểu 10.000.000.000 ₫ mà không phải cắt dòng. */
	grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
	margin-bottom: 16px;
}

.ctax__stat {
	background: var(--ctax-card);
	border: 1px solid var(--ctax-border);
	border-radius: 9px;
	padding: 14px 16px;
	min-width: 0;
}

.ctax__stat--main {
	border-color: var(--ctax-brand);
	border-width: 2px;
}

.ctax__stat-label {
	display: block;
	font-size: .76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ctax-muted);
	margin-bottom: 5px;
}

.ctax__stat-value {
	display: block;
	/* Co lai tren man hinh hep de so dai van vua mot dong. */
	font-size: clamp(1rem, .82rem + .75vw, 1.22rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	/*
	 * KHÔNG dùng word-break: break-word ở đây. Nó cắt số ngay giữa chừng,
	 * biến 1.000.000.000 ₫ thành "1.000.000.00" xuống dòng "0 ₫" — đọc ra
	 * con số hoàn toàn khác. Thà cho tràn còn hơn hiển thị sai.
	 */
	overflow-wrap: normal;
	word-break: keep-all;
}

.ctax__stat-value.is-warn   { color: var(--ctax-warn); }
.ctax__stat-value.is-danger { color: var(--ctax-danger); }

.ctax__callout {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: 9px;
	border: 1px solid var(--ctax-border);
	background: var(--ctax-card);
	font-size: .9rem;
	line-height: 1.55;
}

.ctax__callout.is-warn {
	border-color: var(--ctax-warn);
	color: var(--ctax-warn);
}

.ctax__callout.is-danger {
	border-color: var(--ctax-danger);
	color: var(--ctax-danger);
	font-weight: 500;
}

/* So sánh cá nhân / pháp nhân */

.ctax__compare {
	background: var(--ctax-card);
	border: 1px solid var(--ctax-border);
	border-radius: 9px;
	padding: 16px 18px;
	margin-bottom: 18px;
}

.ctax__compare-title {
	margin: 0 0 11px;
	font-size: .95rem;
	font-weight: 700;
}

.ctax__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.ctax__table th,
.ctax__table td {
	padding: 9px 0;
	border-bottom: 1px solid var(--ctax-border);
	text-align: left;
	vertical-align: top;
}

.ctax__table th {
	font-weight: 500;
	color: var(--ctax-muted);
	padding-right: 14px;
}

.ctax__table td {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ctax__table tr:last-child th,
.ctax__table tr:last-child td { border-bottom: 0; }

.ctax__note {
	margin: 11px 0 0;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--ctax-muted);
}

/* Căn cứ pháp lý */

.ctax__legal {
	border-top: 1px solid var(--ctax-border);
	padding-top: 16px;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--ctax-muted);
}

.ctax__legal p { margin: 0 0 .7em; }
.ctax__legal p:last-child { margin-bottom: 0; }

.ctax__disclaimer {
	padding: 11px 14px;
	border-radius: 8px;
	background: var(--ctax-bg);
	border: 1px solid var(--ctax-border);
}

/* FAQ */

.ctax-faq { margin: 30px 0; }

.ctax-faq h2 { font-size: 1.2rem; margin-bottom: 14px; }

.ctax-faq__item {
	border: 1px solid var(--border, #e1e7ee);
	border-radius: 9px;
	padding: 13px 16px;
	margin-bottom: 9px;
	background: var(--bg, #fff);
}

.ctax-faq__item summary {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}

.ctax-faq__item summary::-webkit-details-marker { display: none; }

.ctax-faq__item summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--text-muted, #57626f);
	flex: 0 0 auto;
	line-height: 1;
}

.ctax-faq__item[open] summary::after { content: "−"; }

.ctax-faq__item p {
	margin: 11px 0 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--text-muted, #57626f);
}

@media (max-width: 600px) {
	.ctax { padding: 18px 16px; }
	.ctax__grid { grid-template-columns: 1fr 1fr; }
	.ctax__table th { padding-right: 10px; }

	/* Một cột thì nhãn không cần cao bằng nhau nữa, bỏ đi cho đỡ trống. */
	.ctax__field label { min-height: 0; }
	.ctax__field .ctax__hint { margin-top: 5px; }
}