@charset "UTF-8";
/* ==========================================================================
   Người Đồng Hành — trang công cụ tính riêng, thẻ tín dụng theo nhu cầu, so sánh thẻ (ndh_auto)
   ==========================================================================

   Phần bổ sung của ndh_auto, không có trong theme WordPress gốc. Trang dựng trên
   khung DataPage (.parc__hero, .lender__body, .cmp__table, .faq__list) và máy tính
   .ncalc của theme (ndh.css); tệp này chỉ bù phần riêng: nút tính khi tắt JS, hộp
   công thức, ví dụ, bảng lịch trả nợ, bộ lọc & bảng thẻ, so sánh thẻ cạnh nhau,
   khối "Công cụ tính chi tiết" trên /cong-cu/. Màu lấy từ tokens.css. Nạp sau gold.css.
   -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- Máy tính */
.tool-calc { margin-bottom: 8px; }
.tool-calc .ncalc__out .ncalc__stats .ncalc__stat:last-child:nth-child(even) { grid-column: 1 / -1; }
.tool-submit {
	justify-self: start;
	height: 44px; padding: 0 22px;
	border: 0; border-radius: 999px;
	background: var(--c-brand-700); color: #fff;
	font: inherit; font-size: 15px; font-weight: 700;
	cursor: pointer;
}
.tool-submit:hover { background: var(--c-brand-800); }
/* Có JS: kết quả tự tính lại khi đổi ô — nút chỉ còn là phương án dự phòng. */
.js-tools .tool-submit { display: none; }
.ncalc__field output[data-o] { font-weight: 600; color: var(--c-muted); font-size: 12.5px; }
.tool-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-seg label { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-soft); font-size: 14px; font-weight: 600; cursor: pointer; }
.tool-seg label:has(input:checked) { border-color: var(--c-brand-600); background: var(--c-brand-50); color: var(--c-brand-800); }
.tool-seg input { accent-color: var(--c-brand-600); }

/* Hai phương thức đặt cạnh nhau (trả góp) */
.tool-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-duo__card { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.tool-duo__card.is-active { background: rgba(243, 176, 70, .14); border-color: rgba(243, 176, 70, .35); }
.tool-duo__card h3 { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .8); margin-bottom: 8px; }
.tool-duo__card dl { display: grid; gap: 6px; }
.tool-duo__card dl div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.tool-duo__card dt { color: rgba(255, 255, 255, .66); }
.tool-duo__card dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.tool-duo__card .tool-duo__big dd { font-size: 18px; color: var(--c-warm-400); }

/* ---------------------------------------------------------------- Nội dung giải thích */
.tool-prose p { margin: 0 0 12px; line-height: 1.7; color: var(--c-text); }
.tool-prose p a, .tool-list a, .tool-examples a { color: var(--c-brand-700); text-decoration: underline; text-underline-offset: 2px; }
.tool-formula {
	margin: 4px 0 16px; padding: 16px 18px;
	border: 1px solid var(--c-line); border-left: 4px solid var(--c-brand-600);
	border-radius: 12px; background: var(--c-soft);
}
.tool-formula p { margin: 0 0 6px; }
.tool-formula p:last-child { margin-bottom: 0; }
.tool-formula__eq { font-size: 17px; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.tool-list { display: grid; gap: 10px; margin: 0 0 14px; padding-left: 20px; line-height: 1.65; color: var(--c-text); }
.tool-examples { display: grid; gap: 12px; margin: 0; padding-left: 22px; color: var(--c-text); }
.tool-examples p { margin: 0 0 4px; }
.tool-examples__calc { font-variant-numeric: tabular-nums; color: var(--c-muted); }
.tool-examples__calc strong { color: var(--c-ink); }

/* Bảng số (lịch trả nợ, so sánh) */
.tool-table td, .tool-table th { font-variant-numeric: tabular-nums; }
.tool-table tfoot td, .tool-table tfoot th { font-weight: 800; background: var(--c-soft); }
.tool-sched { margin-top: 10px; }
.tool-sched summary { cursor: pointer; font-weight: 700; color: var(--c-brand-700); padding: 8px 0; }
.tool-sched[open] summary { margin-bottom: 8px; }
.tool-gap { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--c-up-50); color: var(--c-up); }
.tool-gap.is-down { background: var(--c-down-50); color: var(--c-down); }

/* ---------------------------------------------------------------- /cong-cu/: khối công cụ có trang riêng */
.tools-hub { margin-top: 28px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--c-line); border-radius: var(--r-xl, 20px); background: #fff; }
.tools-hub__title { font-size: 20px; font-weight: 800; color: var(--c-ink); }
.tools-hub__lead { margin: 4px 0 16px; font-size: 14px; color: var(--c-muted); }
.tools-hub__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tools-hub__item { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-soft); color: var(--c-ink); transition: border-color .2s, background-color .2s; }
.tools-hub__item:hover { border-color: var(--c-brand-500); background: #fff; }
.tools-hub__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(145deg, var(--c-brand-600), var(--c-brand-800)); color: #fff; }
.tools-hub__icon .ico { width: 20px; height: 20px; }
.tools-hub__text { display: grid; gap: 2px; min-width: 0; }
.tools-hub__text strong { font-size: 15px; }
.tools-hub__text span { font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.tools-hub__go { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--c-brand-600); }

/* ---------------------------------------------------------------- Thẻ theo nhu cầu */
.cneed-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-soft); }
.cneed-filter label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
.cneed-filter select { height: 40px; min-width: 160px; max-width: 100%; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.cneed-filter__check { display: flex !important; align-items: center; gap: 8px; height: 40px; font-size: 14px !important; color: var(--c-ink) !important; }
.cneed-filter__check input { width: 18px; height: 18px; accent-color: var(--c-brand-600); }
.cneed-filter button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--c-brand-700); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cneed-filter__reset { align-self: center; font-size: 13.5px; color: var(--c-brand-700); text-decoration: underline; }
.cneed-count { margin: 0 0 10px; font-size: 14px; color: var(--c-muted); }
.cneed-count strong { color: var(--c-ink); }

.cneed-table td { vertical-align: top; }
.cneed-table .cneed-rank { width: 36px; font-weight: 800; color: var(--c-muted); }
.cneed-card { display: flex; gap: 10px; align-items: flex-start; min-width: 220px; }
.cneed-card__chip { width: 34px; height: 22px; flex: none; margin-top: 2px; border-radius: 5px; background: var(--chip, #595959); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cneed-card__body { display: grid; gap: 2px; min-width: 0; }
.cneed-card__name { font-weight: 700; color: var(--c-brand-800); }
.cneed-card__name:hover { text-decoration: underline; }
.cneed-card__meta { font-size: 12.5px; color: var(--c-muted); }
.cneed-val { font-weight: 800; color: var(--c-ink); white-space: nowrap; }
.cneed-val--big { font-size: 17px; color: var(--c-brand-700); }
.cneed-ev { display: block; max-width: 340px; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--c-muted); }
.cneed-src { display: block; min-width: 130px; font-size: 12px; line-height: 1.45; color: var(--c-muted); }
.cneed-src time { font-weight: 700; color: var(--c-text); }
.cneed-table .cneed-cmp { white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--c-brand-700); }
.cneed-table .cneed-cmp:hover { text-decoration: underline; }

.cneed-method { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; }
.cneed-method h3 { font-size: 16px; font-weight: 800; color: var(--c-ink); margin: 0 0 8px; }
.cneed-method h3 + p, .cneed-method ol, .cneed-method p { margin: 0 0 10px; line-height: 1.65; color: var(--c-text); }
.cneed-method ol { padding-left: 20px; display: grid; gap: 4px; }
.cneed-method p:last-child { margin-bottom: 0; }
.cneed-method a { color: var(--c-brand-700); text-decoration: underline; }

.cneed-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }

/* ---------------------------------------------------------------- So sánh thẻ */
.ccmp-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; padding: 16px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-soft); margin-bottom: 18px; }
.ccmp-pick label { display: grid; gap: 4px; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
.ccmp-pick select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.ccmp-pick button { height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--c-brand-700); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ccmp-table { table-layout: fixed; min-width: 640px; }
.ccmp-table th[scope="row"] { width: 170px; font-size: 13px; color: var(--c-muted); font-weight: 700; }
.ccmp-table thead th { vertical-align: top; }
.ccmp-table td { vertical-align: top; font-size: 14px; line-height: 1.5; }
.ccmp-table .is-win { background: var(--c-up-50); }
.ccmp-table .is-win .cneed-val { color: var(--c-up); }
.ccmp-head { display: grid; gap: 6px; }
.ccmp-head .cneed-card__chip { width: 56px; height: 36px; border-radius: 7px; }
.ccmp-head a { font-weight: 800; color: var(--c-brand-800); }
.ccmp-head span { font-size: 12.5px; color: var(--c-muted); font-weight: 600; }
.ccmp-empty { padding: 22px; border: 1px dashed var(--c-line); border-radius: 14px; text-align: center; color: var(--c-muted); }

@media (max-width: 760px) {
	.tool-duo { grid-template-columns: minmax(0, 1fr); }
	.ccmp-pick { grid-template-columns: minmax(0, 1fr); }
	.ccmp-pick button { justify-self: start; }
	.cneed-filter select { min-width: 0; width: 100%; }
	.cneed-filter label { flex: 1 1 140px; }
	.tool-formula__eq { font-size: 15px; }
}
/* Trong cột kết quả hẹp của .ncalc__grid: hai thẻ xếp chồng, nhãn – số trên một dòng. */
.ncalc__out .tool-duo { grid-template-columns: minmax(0, 1fr); }
.tool-duo__card dd { white-space: nowrap; }
.tool-be { display: flex; align-items: center; gap: 6px; }
.tool-be .ico { width: 16px; height: 16px; flex: none; }
/* Bảng thẻ: chữ xuống dòng (cmp__table của theme để nowrap), cột thẻ rộng vừa đủ. */
.cmp__table.cneed-table tbody th, .cmp__table.cneed-table tbody td, .cneed-table .cneed-card__name { white-space: normal; }
.cneed-table thead th { white-space: nowrap; }
.cneed-table .cneed-card { min-width: 230px; max-width: 320px; }
.cneed-table td { min-width: 120px; max-width: 280px; }
.cneed-table td.cneed-rank { min-width: 0; }
.cneed-table .cneed-src { margin-top: 4px; min-width: 0; }
.cneed-table td:last-child { min-width: 0; }
.cmp__table.cneed-table tbody td:nth-child(3) { min-width: 210px; }
.cneed-table .cneed-src, .cneed-table .cneed-card__meta { font-weight: 500; }
.cneed-table .cneed-src time { font-weight: 700; }
@media (max-width: 760px) {
	.cneed-table .cneed-card { min-width: 190px; }
	.cmp__table.cneed-table tbody td:nth-child(3) { min-width: 180px; }
}
.cmp__table.ccmp-table th, .cmp__table.ccmp-table td, .ccmp-table .ccmp-head a { white-space: normal; overflow-wrap: anywhere; }
.ccmp-table .cneed-val { font-weight: 700; }