/* NB Tool – trang danh sách & khung công cụ. Màu sắc lấy từ biến --nbt-* (cài đặt theo từng site). */

.nbt-scope {
	--nbt-primary: #1d4ed8;
	--nbt-text: #0f172a;
	--nbt-card: #fff;
	--nbt-border: #e2e8f0;
	--nbt-success: #16a34a;
	--nbt-warning: #d97706;
	--nbt-danger: #dc2626;
	--nbt-radius: 12px;
	--nbt-cols: 3;
	--nbt-cols-m: 1;
	--nbt-muted: color-mix(in srgb, var(--nbt-text) 55%, transparent);
	--nbt-soft: color-mix(in srgb, var(--nbt-primary) 8%, var(--nbt-card));
	color: var(--nbt-text);
	box-sizing: border-box;
}
.nbt-scope *,
.nbt-scope *::before,
.nbt-scope *::after { box-sizing: border-box; }

/* ----- Khối giới thiệu ----- */
.nbt-intro {
	background: var(--nbt-card);
	border: 1px solid var(--nbt-border);
	border-radius: var(--nbt-radius);
	padding: 20px 24px;
	margin-bottom: 16px;
}
.nbt-intro-title { margin: 0 0 8px; font-size: 1.5em; line-height: 1.25; }
.nbt-intro-text p { margin: 0 0 .5em; }
.nbt-intro-text p:last-child { margin-bottom: 0; }

/* ----- Panel chính ----- */
.nbt-panel {
	background: var(--nbt-card);
	border: 1px solid var(--nbt-border);
	border-radius: var(--nbt-radius);
	padding: 20px 24px 24px;
}

/* ----- Tìm kiếm ----- */
.nbt-search { margin-bottom: 8px; }
.nbt-search-label { display: block; font-weight: 600; font-size: .9em; margin-bottom: 8px; }
.nbt-search-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nbt-search-input { position: relative; flex: 1 1 260px; }
.nbt-search-input svg {
	position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
	fill: none; stroke: var(--nbt-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.nbt-scope .nbt-q,
.nbt-scope .nbt-filter {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 12px;
	font: inherit;
	font-size: .92em;
	color: var(--nbt-text);
	background: var(--nbt-card);
	border: 1px solid var(--nbt-border);
	border-radius: calc(var(--nbt-radius) * .66);
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.nbt-scope .nbt-q { padding-left: 38px; }
.nbt-scope .nbt-filter { flex: 0 1 220px; width: auto; min-width: 180px; cursor: pointer; }
.nbt-scope .nbt-q:focus,
.nbt-scope .nbt-filter:focus {
	border-color: var(--nbt-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbt-primary) 18%, transparent);
}
.nbt-meta { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font-size: .78em; color: var(--nbt-muted); }
.nbt-hint { color: color-mix(in srgb, #e11d48 70%, var(--nbt-text)); }

/* ----- Nhóm ----- */
.nbt-section { margin-top: 24px; }
.nbt-section[hidden] { display: none; }
.nbt-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nbt-scope .nbt-section-title { margin: 0; font-size: 1.1em; line-height: 1.3; }
.nbt-section-count { font-size: .75em; color: var(--nbt-muted); white-space: nowrap; }

/* ----- Lưới thẻ -----
 * Số cột tự co theo bề rộng thực của khối (cột nội dung hẹp, sidebar, điện thoại):
 * mỗi thẻ rộng tối thiểu --nbt-min, và không quá --nbt-cols cột. */
.nbt-grid {
	--nbt-gap: 12px;
	--nbt-min: 200px;
	display: grid;
	gap: var(--nbt-gap);
	grid-template-columns: repeat(auto-fill, minmax(max(var(--nbt-min), calc((100% - (var(--nbt-cols) - 1) * var(--nbt-gap)) / var(--nbt-cols))), 1fr));
}
.nbt-layout-large .nbt-grid { --nbt-min: 260px; --nbt-gap: 16px; }
.nbt-layout-icons .nbt-grid { --nbt-min: 92px; --nbt-gap: 10px; }
.nbt-layout-list .nbt-grid { --nbt-min: 300px; --nbt-gap: 24px; row-gap: 0; }

.nbt-card {
	--nbt-ic: var(--nbt-primary);
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px 40px 12px 14px;
	background: var(--nbt-card);
	border: 1px solid var(--nbt-border);
	border-radius: var(--nbt-radius);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nbt-card[hidden] { display: none; }
.nbt-card:hover {
	border-color: color-mix(in srgb, var(--nbt-primary) 45%, var(--nbt-border));
	box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--nbt-primary) 35%, transparent);
	transform: translateY(-1px);
}
.nbt-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(var(--nbt-radius) * .66);
	background: color-mix(in srgb, var(--nbt-ic) 12%, var(--nbt-card));
	color: var(--nbt-ic);
	overflow: hidden;
}
.nbt-icon svg { width: 20px; height: 20px; }
.nbt-icon img { width: 100%; height: 100%; object-fit: cover; }
.nbt-icon .dashicons { font-size: 20px; width: 20px; height: 20px; }
.nbt-card-body { display: flex; flex-direction: column; min-width: 0; }
.nbt-scope .nbt-card-link {
	color: var(--nbt-text);
	font-weight: 600;
	font-size: .9em;
	line-height: 1.35;
	text-decoration: none;
	box-shadow: none;
}
/* Cả thẻ bấm được. */
.nbt-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nbt-scope .nbt-card-link:hover,
.nbt-scope .nbt-card-link:focus { color: var(--nbt-primary); text-decoration: none; }
.nbt-card-link:focus-visible { outline: none; }
.nbt-card:focus-within { border-color: var(--nbt-primary); }
.nbt-card-desc {
	margin-top: 2px;
	font-size: .76em;
	line-height: 1.4;
	color: var(--nbt-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nbt-badge {
	position: absolute;
	top: -8px;
	left: 12px;
	padding: 1px 8px;
	font-size: .66em;
	font-weight: 700;
	line-height: 1.6;
	text-transform: uppercase;
	color: #fff;
	background: var(--nbt-primary);
	border-radius: 999px;
}

/* ----- Nút yêu thích ----- */
.nbt-scope .nbt-fav {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: none;
	color: var(--nbt-muted);
	transition: color .15s, background .15s, transform .15s;
}
.nbt-scope .nbt-fav:hover { background: #fff1f2; color: #e11d48; }
.nbt-scope .nbt-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nbt-scope .nbt-fav[aria-pressed="true"] { color: #e11d48; }
.nbt-scope .nbt-fav[aria-pressed="true"] svg { fill: currentColor; }
.nbt-fav.is-pop { animation: nbt-pop .3s ease; }
@keyframes nbt-pop { 50% { transform: scale(1.3); } }

.nbt-empty { margin: 24px 0 0; text-align: center; color: var(--nbt-muted); }

/* ----- Công cụ liên quan ----- */
.nbt-related { margin-top: 40px; }
.nbt-related .nbt-section-title { margin-bottom: 12px; }

/* ----- Khung công cụ ----- */
.nbt-tool { margin: 0 0 24px; }
.nbt-tool--sandbox { line-height: 0; }
.nbt-scope .nbt-frame { display: block; width: 100%; min-height: 0 !important; max-height: none !important; border: 0; background: transparent; }
.nbt-maintenance {
	margin: 0;
	padding: 20px 24px;
	text-align: center;
	color: var(--nbt-muted);
	background: var(--nbt-soft);
	border: 1px dashed var(--nbt-border);
	border-radius: var(--nbt-radius);
}

@media (max-width: 599px) {
	.nbt-intro, .nbt-panel { padding: 16px; }
	.nbt-scope .nbt-filter { flex: 1 1 100%; }
}

/* Thẻ chưa có trang chứa công cụ: không bấm được */
.nbt-card--nolink { opacity: .6; }
.nbt-card--nolink:hover { transform: none; box-shadow: none; border-color: var(--nbt-border); }
.nbt-card--nolink .nbt-card-link::after { content: none; }

/* ===== Nhãn theo nghĩa ===== */
.nbt-badge--danger { background: var(--nbt-danger); }
.nbt-badge--warning { background: var(--nbt-warning); }
.nbt-badge--success { background: var(--nbt-success); }

/* ===== Kiểu: Thẻ lớn ===== */
.nbt-card--large {
	align-items: flex-start;
	gap: 18px;
	min-height: 168px;
	padding: 24px 24px 56px;
	border-radius: calc(var(--nbt-radius) * 1.4);
}
.nbt-card--large .nbt-icon {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--nbt-ic) 16%, var(--nbt-card));
	position: relative;
}
.nbt-card--large .nbt-icon::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: var(--nbt-ic);
}
.nbt-card--large .nbt-icon > * { position: relative; color: #fff; }
.nbt-card--large .nbt-icon svg { width: 24px; height: 24px; }
.nbt-card--large .nbt-icon img { width: 48px; height: 48px; border-radius: 50%; }
.nbt-scope .nbt-card--large .nbt-card-link { font-size: 1.08em; font-weight: 700; line-height: 1.3; }
.nbt-card--large .nbt-card-desc { margin-top: 8px; font-size: .9em; -webkit-line-clamp: 3; }
.nbt-card--large .nbt-badge,
.nbt-card--list .nbt-badge {
	position: static;
	align-self: flex-start;
	margin: 0 0 8px;
	padding: 2px 10px;
	font-size: .72em;
	text-transform: none;
	border-radius: 6px;
}
.nbt-card-arrow {
	position: absolute;
	right: 18px;
	bottom: 16px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--nbt-text) 6%, var(--nbt-card));
	color: var(--nbt-text);
	transition: background .15s, color .15s, transform .15s;
}
.nbt-card-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nbt-card:hover .nbt-card-arrow { background: var(--nbt-primary); color: #fff; transform: translateX(2px); }
.nbt-card--large .nbt-fav { top: 12px; right: 12px; }

/* ===== Kiểu: Lưới icon ===== */
.nbt-card--icons {
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
	min-height: 0;
	padding: 18px 8px 14px;
	text-align: center;
}
.nbt-card--icons .nbt-icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: calc(var(--nbt-radius) * 1.1);
}
.nbt-card--icons .nbt-icon svg { width: 26px; height: 26px; }
.nbt-card--icons .nbt-card-body { align-items: center; }
.nbt-scope .nbt-card--icons .nbt-card-link { font-size: .84em; font-weight: 600; }
.nbt-card--icons .nbt-badge { top: -9px; left: 50%; max-width: calc(100% - 8px); transform: translateX(-50%); padding: 1px 7px; font-size: .62em; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-card--icons .nbt-fav { top: 4px; right: 4px; width: 24px; height: 24px; }
.nbt-card--icons .nbt-fav svg { width: 13px; height: 13px; }

/* ===== Kiểu: Danh sách dọc ===== */
.nbt-card--list {
	gap: 14px;
	padding: 14px 92px 14px 4px;
	border: 0;
	border-bottom: 1px solid var(--nbt-border);
	border-radius: 0;
	background: transparent;
}
.nbt-card--list:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--nbt-primary) 4%, transparent); }
.nbt-card--list .nbt-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.nbt-card--list .nbt-card-desc { -webkit-line-clamp: 1; }
.nbt-card--list .nbt-card-arrow { top: 50%; bottom: auto; right: 8px; width: 30px; height: 30px; transform: translateY(-50%); }
.nbt-card--list:hover .nbt-card-arrow { transform: translate(2px, -50%); }
.nbt-card--list .nbt-fav { top: 50%; right: 46px; transform: translateY(-50%); }

@media (max-width: 599px) {
	.nbt-card--large { min-height: 0; padding: 18px 18px 54px; }
	.nbt-card--large .nbt-icon { flex-basis: 52px; width: 52px; height: 52px; }
}

/* ===== Khối yêu thích ===== */
.nbt-section--fav {
	padding: 18px 20px 14px;
	background: color-mix(in srgb, var(--nbt-primary) 4%, var(--nbt-card));
	border: 1px solid color-mix(in srgb, var(--nbt-primary) 14%, var(--nbt-border));
	border-radius: calc(var(--nbt-radius) * 1.2);
}
.nbt-section--fav .nbt-section-title { display: flex; align-items: center; gap: 8px; }
.nbt-fav-heart { width: 22px; height: 22px; flex: 0 0 22px; fill: var(--nbt-danger, #e11d48); }
.nbt-fav-note { margin: 12px 0 0; font-size: .76em; color: var(--nbt-muted); }
.nbt-layout-list .nbt-section--fav .nbt-card--list { background: transparent; }