/* =====================================================================
   tt-fixes.css — vá chỗ lệch giữa mockup và thực tế WordPress.

   VÌ SAO CẦN FILE NÀY
   Trong mockup, widget tính thuế là phần tử anh em của khối nội dung:
       .tt-layout > section.tt-tool  +  article.tt-content
   Nhưng trên WordPress, widget do shortcode [tinhthue tool] chèn vào giữa
   nội dung bài, nên nó nằm BÊN TRONG .tt-content:
       article.tt-content > ... > .tt-tool

   Hệ quả: các luật kiểu ".tt-content p" có độ ưu tiên (0,1,1) cao hơn luật
   widget như ".tt-result__label" (0,1,0), nên ghi đè nhầm màu chữ trong
   widget. Ví dụ nhãn trong khối kết quả nền navy bị đổi thành chữ đen.

   File này CHỈ nâng độ ưu tiên cho đúng những luật bị ghi đè. Không sửa
   tt-theme.css, để lần sau nhà thiết kế giao bản mới vẫn chép đè được.
   Nạp sau tt-theme.css.
   ===================================================================== */

/* Trả lại quyền thừa kế màu bên trong widget: chữ trong khối kết quả nền
   tối phải sáng theo khối cha, không lấy màu chữ của nội dung bài. */
.tt-content .tt-tool p,
.tt-content .tt-tool li,
.tt-content .tt-tool span,
.tt-content .tt-tool b,
.tt-content .tt-tool dt,
.tt-content .tt-tool dd {
	color: inherit;
}

/* Đặt lại đúng màu mà bộ thiết kế quy định cho từng thành phần widget. */
.tt-content .tt-tool .tt-result__label { color: var(--tt-result-muted); }
.tt-content .tt-tool .tt-result__value { color: var(--tt-result-number); }
.tt-content .tt-tool .tt-result__zero .tt-result__label,
.tt-content .tt-tool .tt-result__zero .tt-result__value { color: var(--tt-success); }
.tt-content .tt-tool .tt-label { color: var(--tt-text); }
.tt-content .tt-tool .tt-hint { color: var(--tt-text-3); }
.tt-content .tt-tool .tt-error-msg { color: var(--tt-error); }
.tt-content .tt-tool .tt-kv span:first-child { color: var(--tt-text-2); }
.tt-content .tt-tool .tt-kv b { color: var(--tt-text); }
.tt-content .tt-tool .tt-kv li.is-total { color: var(--tt-primary); }

/* Nút trong widget: .tt-content a / button có thể chạm tới. */
.tt-content .tt-tool .tt-btn--primary { color: #fff; }
.tt-content .tt-tool .tt-seg button[aria-pressed="true"] { color: #fff; }

/* .tt-content>* đặt margin-bottom cho mọi con trực tiếp. Widget tự có
   khoảng cách riêng nên bỏ margin kép ở phần tử ngay sau widget. */
.tt-content .tt-tool { margin-bottom: var(--tt-sp-6); }

/* Bảng trong khối kết quả dùng .tt-table, nhưng .tt-content table cũng
   trúng. Cho phần trong widget đi theo luật của widget. */
.tt-content .tt-tool .tt-tablewrap { margin: 0; }

/* Ô nhập: .tt-content không style input, nhưng theme cha có thể. */
.tt-content .tt-tool .tt-input input,
.tt-content .tt-tool .tt-input select,
.tt-content .tt-tool .tt-input textarea {
	border: 0;
	background: transparent;
	box-shadow: none;
}


/* ---------------------------------------------------------------------
   Nút công cụ kiểu lớn (tt-toolbtn--lg)

   Trong mockup, phần tên và mô tả trong nút lớn được đặt style thẳng bằng
   thuộc tính style="" của từng thẻ. Shortcode [tinhthue toolgrid] sinh ra
   markup sạch, không kèm inline style, nên chép các giá trị đó vào đây.
   Giá trị giữ nguyên như bộ thiết kế quy định.
   --------------------------------------------------------------------- */

.tt-toolbtn--lg > span {
	display: block;
}

.tt-toolbtn--lg b {
	display: block;
	font-weight: var(--tt-fw-semibold);
}

.tt-toolbtn--lg small {
	display: block;
	margin-top: var(--tt-sp-1);
	color: var(--tt-text-3);
	font-size: var(--tt-fs-xs);
	font-weight: 400;
	line-height: var(--tt-lh-snug);
}

/* Nút lớn cần ô rộng hơn nút thường mới đủ chỗ cho dòng mô tả. */
.tt-toolgrid:has(.tt-toolbtn--lg) {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Khi widget nằm trong nội dung bài, màu chữ của nút không bị .tt-content ghi đè. */
.tt-content .tt-toolbtn small {
	color: var(--tt-text-3);
}