/* DevVN BGBH - giao diện bảng điều khiển (design tokens, khung, thành phần, trang Tổng quan). */

/* ---------- Tokens ---------- */
:root {
	--bgbh-accent: var(--bgbh-primary, #1b3a6b);
	--bgbh-accent-soft: #e8ecf2;
	--bgbh-accent-ink: #132a4e;
	--bgbh-hl: var(--bgbh-highlight, #e31e24);
	--bgbh-bg: #eef1f5;
	--bgbh-surface: #fff;
	--bgbh-sunken: #f4f6f9;
	--bgbh-ink: #0f172a;
	--bgbh-ink-2: #334155;
	--bgbh-muted: #64748b;
	--bgbh-faint: #94a3b8;
	--bgbh-line: #e2e8f0;
	--bgbh-line-strong: #cbd5e1;
	--bgbh-dark: #0f172a;
	--bgbh-danger: #b91c1c;
	--bgbh-danger-soft: #fdeeee;
	--bgbh-warn: #a14b06;
	--bgbh-warn-soft: #fff4e2;
	--bgbh-ok: #15803d;
	--bgbh-ok-soft: #e8f6ed;
	--bgbh-violet: #5b3fc4;
	--bgbh-violet-soft: #f0edfd;
	--bgbh-teal: #0f766e;
	--bgbh-teal-soft: #e3f5f2;
	--bgbh-series-accepted: #2a78d6;
	--bgbh-series-paid: #199e70;
	--bgbh-chart-grid: #e9eef4;
	--bgbh-chart-base: #cbd5e1;

	--bgbh-s1: 4px;
	--bgbh-s2: 8px;
	--bgbh-s3: 12px;
	--bgbh-s4: 16px;
	--bgbh-s5: 20px;
	--bgbh-s6: 24px;
	--bgbh-s8: 32px;
	--bgbh-gutter: 16px;

	--bgbh-radius: 16px;
	--bgbh-radius-sm: 12px;
	--bgbh-radius-xs: 8px;
	--bgbh-radius-pill: 999px;
	--bgbh-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	--bgbh-shadow-float: 0 16px 40px -12px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .08);
	--bgbh-ring: 0 0 0 3px rgba(37, 99, 235, .25);

	--bgbh-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bgbh-fs-xs: 12px;
	--bgbh-fs-sm: 13px;
	--bgbh-fs: 15px;
	--bgbh-fs-md: 17px;
	--bgbh-fs-lg: 22px;
	--bgbh-fs-xl: 30px;

	--bgbh-header-h: 56px;
	--bgbh-tabbar-h: 64px;
	--bgbh-sidebar-w: 252px;
	--bgbh-safe-b: env(safe-area-inset-bottom, 0px);
	--bgbh-ease: cubic-bezier(.2, .8, .2, 1);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--bgbh-accent-soft: color-mix(in srgb, var(--bgbh-accent) 10%, #fff);
		--bgbh-accent-ink: color-mix(in srgb, var(--bgbh-accent) 82%, #000);
		--bgbh-ring: 0 0 0 3px color-mix(in srgb, var(--bgbh-accent) 28%, transparent);
	}
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.bgbh {
	margin: 0;
	min-height: 100vh;
	background-color: var(--bgbh-bg);
	color: var(--bgbh-ink);
	font-family: var(--bgbh-font);
	font-size: var(--bgbh-fs);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

:where(.bgbh) a { color: var(--bgbh-accent); }
:where(.bgbh) img { max-width: 100%; height: auto; }
:where(.bgbh) :where(h1, h2, h3, p) { margin: 0; }
:where(.bgbh) button { font: inherit; color: inherit; }
:where(.bgbh) :focus { outline: none; }
:where(.bgbh) :focus-visible { outline: 2px solid var(--bgbh-accent); outline-offset: 2px; }

.bgbh-icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	line-height: 1;
}

.bgbh-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bgbh-skip {
	position: absolute;
	left: var(--bgbh-s3);
	top: -60px;
	z-index: 200;
	padding: var(--bgbh-s2) var(--bgbh-s4);
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-dark);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.bgbh .bgbh-skip { color: #fff; }
.bgbh-skip:focus { top: var(--bgbh-s3); }

.bgbh-money,
.bgbh-num { font-variant-numeric: tabular-nums; }
.bgbh-num { text-align: right; }

.bgbh-text--danger { color: var(--bgbh-danger); }
.bgbh-text--warn { color: var(--bgbh-warn); }
.bgbh-text--ok { color: var(--bgbh-ok); }

/* ---------- Shell ---------- */
.bgbh-shell { min-height: 100vh; }

.bgbh-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bgbh-s3);
	height: var(--bgbh-header-h);
	padding: 0 var(--bgbh-s2) 0 var(--bgbh-gutter);
	background-color: var(--bgbh-surface);
	border-bottom: 1px solid var(--bgbh-line);
}

.bgbh-brand {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 44px;
	color: var(--bgbh-ink);
	text-decoration: none;
}
.bgbh .bgbh-brand { color: var(--bgbh-ink); }
.bgbh-brand-name {
	overflow: hidden;
	font-size: var(--bgbh-fs-md);
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bgbh-logo { display: block; max-height: 36px; width: auto; }

.bgbh-main {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--bgbh-s4) var(--bgbh-gutter) var(--bgbh-s8);
}
.bgbh-main:focus { outline: none; }

.bgbh--nav .bgbh-main {
	padding-bottom: calc(var(--bgbh-tabbar-h) + var(--bgbh-safe-b) + var(--bgbh-s6));
}
.bgbh--nav .bgbh-main:has(.bgbh-bottom-bar) {
	padding-bottom: calc(var(--bgbh-safe-b) + 136px);
}
.bgbh--nav:has(.bgbh-bottom-bar) .bgbh-tabbar { display: none; }

.bgbh-sidebar { display: none; }

/* ---------- Icon button, bell, badges, counts ---------- */
.bgbh-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--bgbh-radius-sm);
	background-color: transparent;
	color: var(--bgbh-ink-2);
	cursor: pointer;
	text-decoration: none;
}
.bgbh .bgbh-icon-btn { color: var(--bgbh-ink-2); }
.bgbh-icon-btn:hover { background-color: var(--bgbh-sunken); }
.bgbh-icon-btn .bgbh-icon { width: 22px; height: 22px; }

.bgbh-bell-badge {
	position: absolute;
	top: 5px;
	left: 23px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border: 2px solid var(--bgbh-surface);
	border-radius: var(--bgbh-radius-pill);
	background-color: var(--bgbh-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-sizing: content-box;
}
.bgbh-bell-badge[hidden] { display: none; }

.bgbh-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: var(--bgbh-radius-pill);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink-2);
	font-size: var(--bgbh-fs-xs);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bgbh-count[hidden] { display: none; }
.bgbh-count--alert { background-color: var(--bgbh-danger); color: #fff; }
.bgbh-count--accent { background-color: var(--bgbh-accent); color: #fff; }

/* ---------- Tab bar (điện thoại) ---------- */
.bgbh-tabbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: stretch;
	height: calc(var(--bgbh-tabbar-h) + var(--bgbh-safe-b));
	padding: 0 var(--bgbh-s1) var(--bgbh-safe-b);
	background-color: var(--bgbh-surface);
	border-top: 1px solid var(--bgbh-line);
	box-shadow: 0 -4px 16px -8px rgba(15, 23, 42, .12);
}

.bgbh-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	min-height: 44px;
	padding: 6px 2px 4px;
	border: 0;
	background-color: transparent;
	color: var(--bgbh-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.bgbh .bgbh-tab { color: var(--bgbh-muted); }
.bgbh-tab .bgbh-icon { width: 22px; height: 22px; }
.bgbh-tab-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bgbh .bgbh-tab.is-active { color: var(--bgbh-accent); font-weight: 700; }
.bgbh-tab.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 28px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background-color: var(--bgbh-accent);
	transform: translateX(-50%);
}

.bgbh-tab--create { justify-content: flex-end; padding-bottom: 6px; }
.bgbh .bgbh-tab--create { color: var(--bgbh-ink); font-weight: 600; }
.bgbh-tab-fab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	margin-bottom: 1px;
	border: 4px solid var(--bgbh-surface);
	border-radius: 50%;
	background-color: var(--bgbh-accent);
	color: #fff;
	box-shadow: 0 6px 16px -4px rgba(37, 99, 235, .55);
	box-sizing: content-box;
}
.bgbh-tab-fab .bgbh-icon { width: 26px; height: 26px; stroke-width: 2.25; }
.bgbh-tab--create:active .bgbh-tab-fab { transform: scale(.96); }

.bgbh-tab-dot {
	position: absolute;
	top: 8px;
	left: calc(50% + 7px);
	width: 9px;
	height: 9px;
	border: 2px solid var(--bgbh-surface);
	border-radius: 50%;
	background-color: var(--bgbh-danger);
	box-sizing: content-box;
}

/* ---------- Sheet ---------- */
.bgbh-sheet {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.bgbh-sheet[hidden] { display: none; }

.bgbh-sheet-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 23, 42, .44);
	opacity: 0;
	transition: opacity .2s ease;
}

.bgbh-sheet-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	padding-bottom: var(--bgbh-safe-b);
	border-radius: 20px 20px 0 0;
	background-color: var(--bgbh-surface);
	box-shadow: var(--bgbh-shadow-float);
	transform: translateY(100%);
	transition: transform .24s var(--bgbh-ease);
}
.bgbh-sheet-panel:focus { outline: none; }

.bgbh-sheet.is-open .bgbh-sheet-backdrop { opacity: 1; }
.bgbh-sheet.is-open .bgbh-sheet-panel { transform: none; }

.bgbh-sheet-grip {
	align-self: center;
	flex: none;
	width: 40px;
	height: 4px;
	margin-top: var(--bgbh-s2);
	border-radius: var(--bgbh-radius-pill);
	background-color: var(--bgbh-line-strong);
}

.bgbh-sheet-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--bgbh-s3);
	padding: var(--bgbh-s2) var(--bgbh-s2) var(--bgbh-s2) var(--bgbh-s5);
}
.bgbh-sheet-title { font-size: var(--bgbh-fs-md); font-weight: 700; letter-spacing: -.01em; }

.bgbh-sheet-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--bgbh-s1) var(--bgbh-s5) var(--bgbh-s5);
}

.bgbh-sheet-foot {
	flex: none;
	padding: var(--bgbh-s3) var(--bgbh-s5) var(--bgbh-s4);
	border-top: 1px solid var(--bgbh-line);
}
.bgbh-sheet-foot--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bgbh-s3); }

html.bgbh-locked,
html.bgbh-locked body { overflow: hidden; }

.bgbh-sheet--pdf .bgbh-sheet-panel { height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: none; }
.bgbh-pdfv-body { padding: var(--bgbh-s3); background-color: var(--bgbh-sunken); }
.bgbh-pdfv-pages { display: grid; gap: var(--bgbh-s3); }
.bgbh-pdfv-page { display: block; width: 100%; height: auto; background-color: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .16); }
.bgbh-pdfv-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bgbh-s3); min-height: 100%; padding: var(--bgbh-s5); color: var(--bgbh-muted); text-align: center; }
.bgbh-pdfv-state[hidden] { display: none; }
.bgbh-pdfv-spin { width: 32px; height: 32px; border: 3px solid var(--bgbh-line-strong); border-top-color: var(--bgbh-accent); border-radius: 50%; animation: bgbh-pdfv-spin .8s linear infinite; }
@keyframes bgbh-pdfv-spin { to { transform: rotate(360deg); } }

.bgbh-confirm-message { font-size: var(--bgbh-fs); color: var(--bgbh-ink-2); white-space: pre-line; }

/* ---------- Toast ---------- */
.bgbh-toast {
	position: fixed;
	left: 50%;
	top: calc(var(--bgbh-header-h) + var(--bgbh-s3));
	z-index: 120;
	display: flex;
	align-items: center;
	gap: var(--bgbh-s2);
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: var(--bgbh-s3) var(--bgbh-s4);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--bgbh-shadow-float);
	transform: translate(-50%, -8px);
	opacity: 0;
	transition: opacity .18s ease, transform .18s var(--bgbh-ease);
}
.bgbh-toast[hidden] { display: none; }
.bgbh-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.bgbh-toast--error { background-color: var(--bgbh-danger); }

/* ---------- Khung xem ảnh (dashboard và trang khách) ---------- */
html.bgbh-lightbox-open,
html.bgbh-lightbox-open body { overflow: hidden; }

.bgbh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px var(--bgbh-gutter) calc(64px + var(--bgbh-safe-b));
	background-color: rgba(2, 6, 23, .95);
	opacity: 0;
	transition: opacity .2s ease;
	touch-action: pan-y;
}
.bgbh-lightbox[hidden] { display: none; }
.bgbh-lightbox.is-open { opacity: 1; }

.bgbh-lightbox-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bgbh-s3);
	width: 100%;
	height: 100%;
	margin: 0;
	pointer-events: none;
}
.bgbh .bgbh-lightbox-img {
	display: block;
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	min-height: 0;
	object-fit: contain;
	pointer-events: auto;
	user-select: none;
}
.bgbh-lightbox-caption {
	flex: none;
	max-width: 640px;
	color: #e2e8f0;
	font-size: var(--bgbh-fs-sm);
	text-align: center;
	overflow-wrap: anywhere;
	pointer-events: auto;
}
.bgbh-lightbox-caption[hidden] { display: none; }

.bgbh-lightbox-count {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: #e2e8f0;
	font-size: var(--bgbh-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.bgbh-lightbox-count[hidden] { display: none; }

.bgbh-lightbox-btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--bgbh-radius-pill);
	background-color: rgba(255, 255, 255, .14);
	color: #fff;
	line-height: 1;
	cursor: pointer;
}
.bgbh .bgbh-lightbox-btn { color: #fff; }
.bgbh-lightbox-btn:hover { background-color: rgba(255, 255, 255, .26); }
.bgbh-lightbox-btn[hidden] { display: none; }
.bgbh-lightbox-btn .bgbh-icon { width: 24px; height: 24px; }
.bgbh-lightbox-close { top: 10px; right: 10px; }
.bgbh-lightbox-prev,
.bgbh-lightbox-next { bottom: calc(10px + var(--bgbh-safe-b)); }
.bgbh-lightbox-prev { left: calc(50% - 54px); }
.bgbh-lightbox-next { right: calc(50% - 54px); }

@media (min-width: 768px) {
	.bgbh-lightbox { padding: 64px 88px; }
	.bgbh-lightbox-prev,
	.bgbh-lightbox-next { top: 50%; bottom: auto; transform: translateY(-50%); }
	.bgbh-lightbox-prev { left: var(--bgbh-s4); }
	.bgbh-lightbox-next { right: var(--bgbh-s4); }
}

/* ---------- Thẻ, tiêu đề ---------- */
.bgbh-card {
	padding: var(--bgbh-s5) var(--bgbh-s4);
	border-radius: var(--bgbh-radius);
	background-color: var(--bgbh-surface);
	box-shadow: var(--bgbh-shadow);
}

.bgbh-card-head,
.bgbh-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bgbh-s3);
	margin-bottom: var(--bgbh-s4);
}
.bgbh-section-head { margin-bottom: var(--bgbh-s3); }

.bgbh-title {
	font-size: var(--bgbh-fs-lg);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
}
.bgbh-h2 {
	font-size: var(--bgbh-fs-md);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}
.bgbh-meta { margin-top: 2px; color: var(--bgbh-muted); font-size: 14px; }

.bgbh .bgbh-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--bgbh-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.bgbh-link:hover { text-decoration: underline; }

.bgbh-pagehead {
	margin: calc(-1 * var(--bgbh-s4)) calc(-1 * var(--bgbh-gutter)) 0;
	padding: var(--bgbh-s5) var(--bgbh-gutter) var(--bgbh-s5);
	background-color: var(--bgbh-surface);
	border-bottom: 1px solid var(--bgbh-line);
}

/* ---------- Nút ---------- */
.bgbh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bgbh-s2);
	min-height: 44px;
	padding: 0 var(--bgbh-s5);
	border: 1px solid transparent;
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
	font-family: inherit;
	font-size: var(--bgbh-fs);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.bgbh-btn .bgbh-icon { width: 20px; height: 20px; }
.bgbh-btn:disabled,
.bgbh-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.bgbh .bgbh-btn--primary {
	min-height: 52px;
	background-color: var(--bgbh-accent);
	color: #fff;
}
.bgbh-btn--primary:hover:not(:disabled) { background-color: var(--bgbh-accent-ink); }

.bgbh .bgbh-btn--dark { background-color: var(--bgbh-dark); color: #fff; }

.bgbh .bgbh-btn--ghost {
	border-color: var(--bgbh-line-strong);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
}
.bgbh-btn--ghost:hover:not(:disabled) { background-color: var(--bgbh-sunken); }

.bgbh .bgbh-btn--danger { background-color: var(--bgbh-danger); color: #fff; }

.bgbh-btn--block { display: flex; width: 100%; }

/* ---------- Pill trạng thái ---------- */
.bgbh-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	max-width: 100%;
	padding: 4px 10px;
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink-2);
	font-size: var(--bgbh-fs-sm);
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}
.bgbh-pill--draft { background-color: #eef1f5; color: #475569; }
.bgbh-pill--sent { background-color: var(--bgbh-accent-soft); color: var(--bgbh-accent-ink); }
.bgbh-pill--accepted { background-color: var(--bgbh-violet-soft); color: var(--bgbh-violet); }
.bgbh-pill--progress,
.bgbh-pill--warn { background-color: var(--bgbh-warn-soft); color: var(--bgbh-warn); }
.bgbh-pill--handover { background-color: var(--bgbh-teal-soft); color: var(--bgbh-teal); }
.bgbh-pill--completed,
.bgbh-pill--ok { background-color: var(--bgbh-ok-soft); color: var(--bgbh-ok); }
.bgbh-pill--cancelled,
.bgbh-pill--danger { background-color: var(--bgbh-danger-soft); color: var(--bgbh-danger); }

/* Tông màu dùng cho chấm, ô icon. */
.bgbh-tone--accent,
.bgbh-tone--sent { --bgbh-tone: var(--bgbh-accent); --bgbh-tone-soft: var(--bgbh-accent-soft); }
.bgbh-tone--draft { --bgbh-tone: #64748b; --bgbh-tone-soft: #eef1f5; }
.bgbh-tone--accepted { --bgbh-tone: var(--bgbh-violet); --bgbh-tone-soft: var(--bgbh-violet-soft); }
.bgbh-tone--progress,
.bgbh-tone--warn { --bgbh-tone: var(--bgbh-warn); --bgbh-tone-soft: var(--bgbh-warn-soft); }
.bgbh-tone--handover { --bgbh-tone: var(--bgbh-teal); --bgbh-tone-soft: var(--bgbh-teal-soft); }
.bgbh-tone--completed,
.bgbh-tone--ok { --bgbh-tone: var(--bgbh-ok); --bgbh-tone-soft: var(--bgbh-ok-soft); }
.bgbh-tone--cancelled,
.bgbh-tone--danger { --bgbh-tone: var(--bgbh-danger); --bgbh-tone-soft: var(--bgbh-danger-soft); }

/* ---------- Bố cục: lưới 2 cột, ô số ---------- */
.bgbh-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bgbh-s3);
}

.bgbh-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: var(--bgbh-s3) var(--bgbh-s4);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink);
	text-decoration: none;
}
.bgbh a.bgbh-stat { color: var(--bgbh-ink); }
a.bgbh-stat:hover { background-color: #edf1f6; }
.bgbh-stat-label { color: var(--bgbh-muted); font-size: 14px; }
.bgbh-stat-value {
	font-size: clamp(17px, 4.6vw, 21px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}
.bgbh-stat--danger .bgbh-stat-value { color: var(--bgbh-danger); }
.bgbh-stat { container-type: inline-size; }
/* Số tiền luôn một dòng; cỡ chữ co theo bề rộng ô để số 14 ký tự (1.234.567.890đ) vẫn vừa. */
.bgbh .bgbh-stat .bgbh-stat-value.bgbh-money { font-size: min(21px, 11.5cqi); white-space: nowrap; overflow-wrap: normal; }
.bgbh .bgbh-stat--hero .bgbh-stat-value.bgbh-money { font-size: min(var(--bgbh-fs-xl), 11.5cqi); }
.bgbh-stat-go {
	position: absolute;
	top: 50%;
	right: var(--bgbh-s3);
	color: var(--bgbh-faint);
	transform: translateY(-50%);
}

/* ---------- Form ---------- */
.bgbh-form { display: grid; gap: var(--bgbh-s4); }
.bgbh-form > .bgbh-step-hint { margin-top: calc(6px - var(--bgbh-s4)); }

.bgbh-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.bgbh-field > label,
.bgbh-field-label { color: var(--bgbh-ink-2); font-size: 14px; font-weight: 600; }

.bgbh-field :where(input:not([type="checkbox"], [type="radio"]), select, textarea),
.bgbh-search-input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--bgbh-line-strong);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bgbh-field textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
.bgbh-field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}
.bgbh-field :where(input[type="date"], input[type="datetime-local"], input[type="time"]) {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	min-width: 0;
	max-width: 100%;
}
.bgbh-field :where(input[type="date"], input[type="datetime-local"], input[type="time"])::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
.bgbh-field :where(input, select, textarea):focus,
.bgbh-search-input:focus {
	border-color: var(--bgbh-accent);
	box-shadow: var(--bgbh-ring);
	outline: none;
}
.bgbh-field input::placeholder,
.bgbh-field textarea::placeholder,
.bgbh-search-input::placeholder { color: var(--bgbh-faint); }
.bgbh-field-help { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-field-error { color: var(--bgbh-danger); font-size: var(--bgbh-fs-sm); font-weight: 500; }
.bgbh-field-error[hidden] { display: none; }
.bgbh-field.is-invalid :where(input, select, textarea) { border-color: var(--bgbh-danger); background-color: #fffafa; }

.bgbh-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--bgbh-ink-2);
	font-size: var(--bgbh-fs);
	cursor: pointer;
}
.bgbh-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--bgbh-accent); }

.bgbh-alert {
	padding: var(--bgbh-s3) var(--bgbh-s4);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-danger-soft);
	color: var(--bgbh-danger);
	font-weight: 500;
}
.bgbh-alert--warn { background-color: var(--bgbh-warn-soft); color: var(--bgbh-warn); }
.bgbh-alert--ok { background-color: var(--bgbh-ok-soft); color: var(--bgbh-ok); }

/* ---------- Bảng (trên điện thoại thành thẻ) ---------- */
.bgbh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bgbh-table th,
.bgbh-table td { padding: 10px 12px; border-bottom: 1px solid var(--bgbh-line); text-align: left; vertical-align: top; }
.bgbh-table thead th { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-weight: 600; white-space: nowrap; }
.bgbh-table tbody th { font-weight: 600; }
.bgbh-table .bgbh-num { text-align: right; }
.bgbh-table tbody tr:last-child > * { border-bottom: 0; }

@media (max-width: 639.98px) {
	.bgbh-table:not(.bgbh-table--keep) thead { display: none; }
	.bgbh-table:not(.bgbh-table--keep),
	.bgbh-table:not(.bgbh-table--keep) tbody,
	.bgbh-table:not(.bgbh-table--keep) tr,
	.bgbh-table:not(.bgbh-table--keep) td,
	.bgbh-table:not(.bgbh-table--keep) tbody th { display: block; width: 100%; }
	.bgbh-table:not(.bgbh-table--keep) tr {
		margin-bottom: var(--bgbh-s3);
		padding: var(--bgbh-s2) var(--bgbh-s4);
		border-radius: var(--bgbh-radius-sm);
		background-color: var(--bgbh-surface);
		box-shadow: var(--bgbh-shadow);
	}
	.bgbh-table:not(.bgbh-table--keep) td,
	.bgbh-table:not(.bgbh-table--keep) tbody th {
		display: flex;
		justify-content: space-between;
		gap: var(--bgbh-s3);
		padding: 8px 0;
		text-align: right;
	}
	.bgbh-table:not(.bgbh-table--keep) td[data-label]::before {
		content: attr(data-label);
		color: var(--bgbh-muted);
		font-weight: 500;
		text-align: left;
	}
	.bgbh-table:not(.bgbh-table--keep) tr > *:last-child { border-bottom: 0; }
}

/* ---------- Thanh nút đáy ---------- */
.bgbh-bottom-bar {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 35;
	display: grid;
	gap: 6px;
	padding: var(--bgbh-s3) var(--bgbh-gutter) calc(var(--bgbh-s3) + var(--bgbh-safe-b));
	background-color: var(--bgbh-surface);
	border-top: 1px solid var(--bgbh-line);
	box-shadow: 0 -6px 18px -12px rgba(15, 23, 42, .25);
}
.bgbh-bottom-bar[hidden] { display: none; }
.bgbh-bottom-bar-hint {
	overflow: hidden;
	color: var(--bgbh-muted);
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------- Danh sách bước (vòng tròn / dấu tick) ---------- */
.bgbh-steps { display: grid; gap: var(--bgbh-s1); margin: 0; padding: 0; list-style: none; }
.bgbh-step {
	display: flex;
	align-items: flex-start;
	gap: var(--bgbh-s3);
	min-height: 44px;
	padding: 6px 0;
}
.bgbh-step-mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--bgbh-faint);
	border-radius: 50%;
	background-color: var(--bgbh-surface);
	color: #fff;
}
.bgbh-step-mark .bgbh-icon { width: 16px; height: 16px; stroke-width: 2.5; }
.bgbh-step-body { display: grid; padding-top: 4px; }
.bgbh-step-label { color: var(--bgbh-ink-2); font-size: 16px; font-weight: 500; }
.bgbh-step-meta { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-step.is-done .bgbh-step-mark { border-color: var(--bgbh-accent); background-color: var(--bgbh-accent); }
.bgbh-step.is-done .bgbh-step-label { color: var(--bgbh-ink); }
.bgbh-step.is-current .bgbh-step-mark { border-color: var(--bgbh-accent); box-shadow: var(--bgbh-ring); }
.bgbh-step.is-current .bgbh-step-label { color: var(--bgbh-ink); font-weight: 700; }

/* ---------- Trạng thái rỗng ---------- */
.bgbh-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bgbh-s2);
	padding: var(--bgbh-s6) var(--bgbh-s4);
	text-align: center;
}
.bgbh-empty[hidden] { display: none; }
.bgbh-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--bgbh-s1);
	border-radius: 50%;
	background-color: var(--bgbh-tone-soft, var(--bgbh-sunken));
	color: var(--bgbh-tone, var(--bgbh-muted));
}
.bgbh-empty-icon .bgbh-icon { width: 26px; height: 26px; }
.bgbh-empty-title { font-size: var(--bgbh-fs-md); font-weight: 700; }
.bgbh-empty-text { max-width: 34ch; color: var(--bgbh-muted); font-size: 14px; }
.bgbh-empty .bgbh-btn { margin-top: var(--bgbh-s2); }
.bgbh-empty--compact { padding: var(--bgbh-s5) var(--bgbh-s2); }

/* ---------- Phân trang ---------- */
.bgbh-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: var(--bgbh-s5);
}
.bgbh .bgbh-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink-2);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	box-shadow: var(--bgbh-shadow);
}
.bgbh a.bgbh-page:hover { color: var(--bgbh-accent); }
.bgbh .bgbh-page.is-current { background-color: var(--bgbh-dark); color: #fff; }
.bgbh .bgbh-page--gap { min-width: 24px; background-color: transparent; box-shadow: none; color: var(--bgbh-muted); }

@media (max-width: 639.98px) {
	.bgbh-pagination { gap: var(--bgbh-s1); }
	.bgbh .bgbh-page--gap { display: none; }
}

/* ---------- Bộ lọc ---------- */
.bgbh-filters { margin-bottom: var(--bgbh-s4); }
.bgbh-filters-bar { display: flex; gap: var(--bgbh-s2); }
.bgbh-search { position: relative; flex: 1 1 auto; min-width: 0; }
.bgbh-search > .bgbh-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	color: var(--bgbh-muted);
	transform: translateY(-50%);
	pointer-events: none;
}
.bgbh-search-input { padding-left: 44px; }
.bgbh-filters-toggle { flex: none; padding: 0 var(--bgbh-s4); }
.bgbh-filters-fields { display: grid; gap: var(--bgbh-s4); }

/* ---------- Thông báo ---------- */
.bgbh-notices { margin: 0 calc(-1 * var(--bgbh-s2)); padding: 0; list-style: none; }
.bgbh-notices-state { padding: var(--bgbh-s5) 0; color: var(--bgbh-muted); text-align: center; }
.bgbh-notices-state[hidden] { display: none; }
.bgbh-notices-state--error { color: var(--bgbh-danger); }
.bgbh-notice-link {
	display: flex;
	align-items: flex-start;
	gap: var(--bgbh-s3);
	padding: var(--bgbh-s3) var(--bgbh-s2);
	border-radius: var(--bgbh-radius-sm);
	color: var(--bgbh-ink);
	text-decoration: none;
}
.bgbh a.bgbh-notice-link { color: var(--bgbh-ink); }
a.bgbh-notice-link:hover { background-color: var(--bgbh-sunken); }
.bgbh-notice + .bgbh-notice .bgbh-notice-link { border-top: 1px solid var(--bgbh-line); border-radius: 0; }
.bgbh-notice-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--bgbh-tone-soft);
	color: var(--bgbh-tone);
}
.bgbh-notice-icon .bgbh-icon { width: 18px; height: 18px; }
.bgbh-notice-body { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.bgbh-notice-text { color: var(--bgbh-ink-2); font-size: 14px; overflow-wrap: anywhere; }
.bgbh-notice.is-unread .bgbh-notice-text { color: var(--bgbh-ink); font-weight: 600; }
.bgbh-notice-quote { color: var(--bgbh-ink-2); font-size: var(--bgbh-fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.bgbh-notice-time { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); font-variant-numeric: tabular-nums; }
.bgbh-notice-dot {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background-color: var(--bgbh-accent);
}

/* ---------- Sheet "Thêm" ---------- */
.bgbh-more-user {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s3);
	margin-bottom: var(--bgbh-s3);
	padding: var(--bgbh-s3);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
}
.bgbh-avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--bgbh-dark);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.bgbh .bgbh-user-link { display: flex; flex: 1 1 auto; align-items: center; gap: var(--bgbh-s3); min-width: 0; color: inherit; text-decoration: none; }
.bgbh-user-link:hover .bgbh-user-name { text-decoration: underline; }
.bgbh-user-link .bgbh-menu-chevron { flex: none; margin-left: auto; }
.bgbh-user-text { display: grid; min-width: 0; line-height: 1.3; }
.bgbh-stf-seal { display: grid; gap: var(--bgbh-s1); padding-top: var(--bgbh-s4); border-top: 1px solid var(--bgbh-line); }
.bgbh-user-name { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.bgbh-user-role { overflow: hidden; color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); white-space: nowrap; text-overflow: ellipsis; }

.bgbh-menu { margin: 0 calc(-1 * var(--bgbh-s2)); padding: 0; list-style: none; }
.bgbh .bgbh-menu-link {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s3);
	min-height: 52px;
	padding: 4px var(--bgbh-s2);
	border-radius: var(--bgbh-radius-sm);
	color: var(--bgbh-ink);
	font-weight: 600;
	text-decoration: none;
}
.bgbh-menu-link:hover { background-color: var(--bgbh-sunken); }
.bgbh-menu-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink-2);
}
.bgbh-menu-label { flex: 1 1 auto; }
.bgbh-menu-chevron { color: var(--bgbh-faint); }
.bgbh .bgbh-menu-link.is-active .bgbh-menu-icon { background-color: var(--bgbh-accent-soft); color: var(--bgbh-accent); }
.bgbh .bgbh-menu-link--danger { color: var(--bgbh-danger); }
.bgbh-menu-link--danger .bgbh-menu-icon { background-color: var(--bgbh-danger-soft); color: var(--bgbh-danger); }
.bgbh-menu-sep { margin-top: var(--bgbh-s2); padding-top: var(--bgbh-s2); border-top: 1px solid var(--bgbh-line); }

/* ---------- Đăng nhập ---------- */
.bgbh-login { max-width: 420px; margin: var(--bgbh-s6) auto; padding: var(--bgbh-s6) var(--bgbh-s5); }
.bgbh-login .bgbh-meta { margin: var(--bgbh-s1) 0 var(--bgbh-s5); }
.bgbh-login .bgbh-alert { margin-bottom: var(--bgbh-s4); }
.bgbh-login-lost { margin: var(--bgbh-s4) 0 0; text-align: center; font-size: var(--bgbh-fs-sm); }

/* ---------- Trang Tổng quan ---------- */
.bgbh-home { display: grid; gap: var(--bgbh-s4); }
.bgbh-home > * { min-width: 0; }

.bgbh-home-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bgbh-s3);
	margin-top: var(--bgbh-s4);
}
.bgbh-stat--hero { grid-column: 1 / -1; padding-right: 44px; }
.bgbh-stat--hero .bgbh-stat-value { font-size: var(--bgbh-fs-xl); line-height: 1.2; letter-spacing: -.02em; }

.bgbh-pipeline {
	display: grid;
	grid-auto-columns: minmax(124px, 1fr);
	grid-auto-flow: column;
	gap: var(--bgbh-s2);
	margin: 0 calc(-1 * var(--bgbh-gutter));
	padding: 2px var(--bgbh-gutter) var(--bgbh-s2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding: 0 var(--bgbh-gutter);
	scrollbar-width: none;
}
.bgbh-pipeline::-webkit-scrollbar { display: none; }
.bgbh-pipeline-item { scroll-snap-align: start; min-width: 0; }
.bgbh-pipeline-item.is-aside { margin-left: var(--bgbh-s2); }

.bgbh .bgbh-pipe {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--bgbh-s2);
	height: 100%;
	min-height: 84px;
	padding: var(--bgbh-s3) var(--bgbh-s4) var(--bgbh-s3);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
	text-decoration: none;
	box-shadow: var(--bgbh-shadow);
	transition: box-shadow .15s ease;
}
.bgbh-pipe:hover { box-shadow: 0 0 0 1px var(--bgbh-line-strong), var(--bgbh-shadow); }
.bgbh-pipe-label {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--bgbh-ink-2);
	font-size: var(--bgbh-fs-sm);
	font-weight: 600;
	line-height: 1.3;
}
.bgbh-pipe-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background-color: var(--bgbh-tone); }
.bgbh-pipe-count { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.bgbh-pipe.is-zero .bgbh-pipe-count { color: var(--bgbh-faint); font-weight: 600; }

.bgbh-home-today { padding-bottom: var(--bgbh-s2); }
.bgbh-home-today .bgbh-card-head { margin-bottom: var(--bgbh-s2); }
.bgbh-group + .bgbh-group { margin-top: var(--bgbh-s2); padding-top: var(--bgbh-s3); border-top: 1px solid var(--bgbh-line); }
.bgbh-group-title {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--bgbh-s1) 0;
	font-size: 14px;
	font-weight: 700;
}
.bgbh-group-name { flex: 1 1 auto; min-width: 0; }
.bgbh-group-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-tone-soft);
	color: var(--bgbh-tone);
}
.bgbh-group-icon .bgbh-icon { width: 17px; height: 17px; }

.bgbh-rows { margin: 0 calc(-1 * var(--bgbh-s2)); padding: 0; list-style: none; }
.bgbh .bgbh-row {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s3);
	min-height: 56px;
	padding: var(--bgbh-s2);
	border-radius: var(--bgbh-radius-sm);
	color: var(--bgbh-ink);
	text-decoration: none;
}
.bgbh-row:hover { background-color: var(--bgbh-sunken); }
.bgbh-row-main { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.bgbh-row-title { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bgbh-row-sub {
	overflow: hidden;
	color: var(--bgbh-muted);
	font-size: var(--bgbh-fs-sm);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bgbh-row-side { display: grid; flex: none; justify-items: end; line-height: 1.3; text-align: right; }
.bgbh-row-when { font-weight: 700; font-variant-numeric: tabular-nums; }
.bgbh-row-day { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); }
.bgbh-row-chevron { width: 18px; height: 18px; color: var(--bgbh-faint); }

/* ---------- Biểu đồ ---------- */
.bgbh-chart { margin: 0; }
.bgbh-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgbh-s2) var(--bgbh-s5);
	margin: 0 0 var(--bgbh-s4);
	padding: 0;
	list-style: none;
}
.bgbh-legend-item { display: flex; align-items: center; gap: var(--bgbh-s2); font-size: 14px; }
.bgbh-legend-label { color: var(--bgbh-ink-2); font-weight: 600; }
.bgbh-legend-value { color: var(--bgbh-muted); font-variant-numeric: tabular-nums; }
.bgbh-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.bgbh-swatch--accepted { background-color: var(--bgbh-series-accepted); }
.bgbh-swatch--paid { background-color: var(--bgbh-series-paid); }

.bgbh-chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bgbh-s2); }
.bgbh-chart-axis { position: relative; min-width: 34px; }
.bgbh-chart-tick {
	position: absolute;
	right: 0;
	color: var(--bgbh-muted);
	font-size: 11px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transform: translateY(-50%);
}
.bgbh-chart-svg { display: block; overflow: visible; font-family: var(--bgbh-font); }
.bgbh-chart-grid { stroke: var(--bgbh-chart-grid); stroke-width: 1; }
.bgbh-chart-baseline { stroke: var(--bgbh-chart-base); stroke-width: 1; }
.bgbh-chart-mask { fill: var(--bgbh-surface); }
.bgbh-chart-hit { fill: transparent; cursor: default; }
.bgbh-chart-fill { pointer-events: none; transition: opacity .12s ease; }
.bgbh-chart-bar--accepted .bgbh-chart-fill { fill: var(--bgbh-series-accepted); }
.bgbh-chart-bar--paid .bgbh-chart-fill { fill: var(--bgbh-series-paid); }
.bgbh-chart-bar:hover .bgbh-chart-hit { fill: rgba(15, 23, 42, .04); }
.bgbh-chart-bar:hover .bgbh-chart-fill { opacity: .82; }
.bgbh-chart-label { fill: var(--bgbh-muted); font-size: 11px; }

.bgbh-chart-table { margin-top: var(--bgbh-s3); border-top: 1px solid var(--bgbh-line); }
.bgbh-chart-table summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--bgbh-accent);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.bgbh-chart-table summary::-webkit-details-marker { display: none; }
.bgbh-chart-table summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.bgbh-chart-table[open] summary::after { transform: translateY(2px) rotate(-135deg); }

/* ---------- Danh sách báo giá ---------- */
.bgbh-qpage { display: grid; gap: var(--bgbh-s4); }
.bgbh-qpage > * { min-width: 0; }
.bgbh-qpage .bgbh-filters { margin-bottom: 0; }
.bgbh-qpage > .bgbh-pagination { margin-top: 0; }

.bgbh-qtop { display: grid; gap: var(--bgbh-s4); }
.bgbh-qactions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bgbh-s2); }
.bgbh .bgbh-qactions .bgbh-btn--primary { min-height: 44px; }

.bgbh-chips {
	display: flex;
	gap: var(--bgbh-s2);
	margin: var(--bgbh-s4) calc(-1 * var(--bgbh-gutter)) calc(-1 * var(--bgbh-s2));
	padding: 2px var(--bgbh-gutter) var(--bgbh-s2);
	overflow-x: auto;
	scroll-padding: 0 var(--bgbh-gutter);
	scrollbar-width: none;
}
.bgbh-chips::-webkit-scrollbar { display: none; }
.bgbh .bgbh-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 var(--bgbh-s3) 0 var(--bgbh-s4);
	border-radius: var(--bgbh-radius-pill);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink-2);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.bgbh a.bgbh-chip:hover { background-color: var(--bgbh-line); }
.bgbh-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background-color: var(--bgbh-tone); }
.bgbh-chip-count { color: var(--bgbh-muted); font-variant-numeric: tabular-nums; }
.bgbh .bgbh-chip.is-active { background-color: var(--bgbh-dark); color: #fff; }
.bgbh-chip.is-active .bgbh-chip-count { color: rgba(255, 255, 255, .7); }
.bgbh-chip:not(:has(.bgbh-chip-dot)) { padding-left: var(--bgbh-s4); }

.bgbh-qcols { display: none; }
.bgbh-qrows { display: grid; gap: var(--bgbh-s3); margin: 0; padding: 0; list-style: none; }
.bgbh .bgbh-qcard {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"id state"
		"who who"
		"total due"
		"owner owner";
	gap: var(--bgbh-s2) 0;
	padding: var(--bgbh-s4);
	border-radius: var(--bgbh-radius);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
	text-decoration: none;
	box-shadow: var(--bgbh-shadow);
	transition: box-shadow .15s ease;
}
.bgbh-qcard:hover { box-shadow: 0 0 0 1px var(--bgbh-line-strong), var(--bgbh-shadow); }
.bgbh-q-id { grid-area: id; display: grid; align-content: start; min-width: 0; line-height: 1.35; }
.bgbh-q-code { font-size: var(--bgbh-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.bgbh-q-date { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); font-variant-numeric: tabular-nums; }
.bgbh-q-state { grid-area: state; padding-left: var(--bgbh-s3); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bgbh-q-who { grid-area: who; display: grid; min-width: 0; line-height: 1.35; }
.bgbh-q-name { overflow: hidden; font-size: var(--bgbh-fs-md); font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.bgbh-q-phone { color: var(--bgbh-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.bgbh-q-total,
.bgbh-q-due,
.bgbh-q-owner { display: grid; align-content: start; gap: 2px; min-width: 0; }
.bgbh-q-total { grid-area: total; padding-top: var(--bgbh-s3); border-top: 1px solid var(--bgbh-line); }
.bgbh-q-due { grid-area: due; padding-top: var(--bgbh-s3); border-top: 1px solid var(--bgbh-line); text-align: right; }
.bgbh-q-owner { grid-area: owner; grid-auto-flow: column; justify-content: space-between; align-items: baseline; padding-top: var(--bgbh-s2); border-top: 1px solid var(--bgbh-line); }
.bgbh-q-label { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); }
.bgbh-q-value { font-size: var(--bgbh-fs); font-weight: 700; font-variant-numeric: tabular-nums; }
.bgbh-q-owner .bgbh-q-value { font-weight: 600; }
.bgbh-q-muted { color: var(--bgbh-muted); font-weight: 500; }
.bgbh-q-go { display: none; }

/* ---------- Máy tính bảng ---------- */
@media (min-width: 640px) {
	:root { --bgbh-gutter: 24px; }
	.bgbh-card { padding: var(--bgbh-s6); }
	.bgbh-home-stats { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
	.bgbh-stat--hero { grid-column: auto; }
	.bgbh-sheet--sm .bgbh-sheet-panel,
	.bgbh-sheet-panel { max-width: 560px; margin: 0 auto; }
	.bgbh-sheet--pdf .bgbh-sheet-panel { max-width: 760px; }
}

/* ---------- Máy tính (≥ 1024px): sidebar trái ---------- */
@media (min-width: 1024px) {
	:root { --bgbh-gutter: 32px; }

	.bgbh--nav .bgbh-shell { padding-left: var(--bgbh-sidebar-w); }
	.bgbh--nav .bgbh-header,
	.bgbh--nav .bgbh-tabbar { display: none; }
	.bgbh--nav .bgbh-main { padding: var(--bgbh-s6) var(--bgbh-gutter) var(--bgbh-s8); }
	.bgbh--nav .bgbh-main:has(.bgbh-bottom-bar) { padding-bottom: 120px; }

	.bgbh-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 30;
		display: flex;
		flex-direction: column;
		width: var(--bgbh-sidebar-w);
		padding: var(--bgbh-s4) var(--bgbh-s3);
		background-color: var(--bgbh-surface);
		border-right: 1px solid var(--bgbh-line);
		overflow-y: auto;
	}
	.bgbh-sidebar-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--bgbh-s2);
		padding: 0 0 0 var(--bgbh-s2);
	}
	.bgbh-sidebar-create { margin: var(--bgbh-s4) 0 var(--bgbh-s3); }

	.bgbh-sidenav-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
	.bgbh-sidenav-item.is-admin:not(.is-admin ~ .is-admin) {
		margin-top: var(--bgbh-s2);
		padding-top: var(--bgbh-s2);
		border-top: 1px solid var(--bgbh-line);
	}
	.bgbh .bgbh-sidenav-link {
		display: flex;
		align-items: center;
		gap: var(--bgbh-s3);
		min-height: 44px;
		padding: 0 var(--bgbh-s3);
		border-radius: var(--bgbh-radius-sm);
		color: var(--bgbh-ink-2);
		font-weight: 500;
		text-decoration: none;
	}
	.bgbh-sidenav-link:hover { background-color: var(--bgbh-sunken); }
	.bgbh .bgbh-sidenav-link.is-active {
		background-color: var(--bgbh-accent-soft);
		color: var(--bgbh-accent-ink);
		font-weight: 700;
	}
	.bgbh-sidenav-link.is-active .bgbh-icon { color: var(--bgbh-accent); }
	.bgbh-sidenav-label { flex: 1 1 auto; }

	.bgbh-sidebar-user {
		display: flex;
		align-items: center;
		gap: var(--bgbh-s3);
		margin-top: auto;
		padding: var(--bgbh-s3) 0 0 var(--bgbh-s2);
		border-top: 1px solid var(--bgbh-line);
	}
	.bgbh-sidebar-user .bgbh-user-text { flex: 1 1 auto; }
	.bgbh-sidebar-user .bgbh-avatar { width: 36px; height: 36px; font-size: 15px; }
	.bgbh-sidebar-user .bgbh-user-name { font-size: 14px; }

	.bgbh-pagehead {
		margin: 0;
		padding: var(--bgbh-s6);
		border: 0;
		border-radius: var(--bgbh-radius);
		box-shadow: var(--bgbh-shadow);
	}
	.bgbh-title { font-size: 26px; }

	.bgbh-sheet { justify-content: center; align-items: center; padding: var(--bgbh-s6); }
	.bgbh-sheet-panel,
	.bgbh-sheet--sm .bgbh-sheet-panel {
		max-height: calc(100vh - 96px);
		padding-bottom: 0;
		border-radius: var(--bgbh-radius);
		transform: translateY(8px) scale(.98);
		opacity: 0;
		transition: transform .2s var(--bgbh-ease), opacity .2s ease;
	}
	.bgbh-sheet-panel { max-width: 560px; }
	.bgbh-sheet--sm .bgbh-sheet-panel { max-width: 440px; }
	.bgbh-sheet--pdf .bgbh-sheet-panel { max-width: 900px; height: calc(100vh - 48px); }
	.bgbh-sheet.is-open .bgbh-sheet-panel { opacity: 1; transform: none; }
	.bgbh-sheet-grip { display: none; }
	.bgbh-sheet-head { padding-top: var(--bgbh-s3); }

	.bgbh-toast { top: auto; bottom: var(--bgbh-s6); transform: translate(-50%, 8px); }
	.bgbh--nav .bgbh-toast { left: calc(50% + var(--bgbh-sidebar-w) / 2); }

	.bgbh-bottom-bar {
		left: var(--bgbh-sidebar-w);
		bottom: 0;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: var(--bgbh-s3) var(--bgbh-gutter);
	}
	.bgbh--bare .bgbh-bottom-bar { left: 0; }
	.bgbh-bottom-bar .bgbh-btn--block { width: auto; min-width: 280px; }

	.bgbh .bgbh-sheet--filters,
	.bgbh .bgbh-sheet--filters[hidden] { position: static; display: block; padding: 0; }
	.bgbh-sheet--filters .bgbh-sheet-backdrop,
	.bgbh-sheet--filters .bgbh-sheet-head { display: none; }
	.bgbh .bgbh-sheet--filters .bgbh-sheet-panel {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--bgbh-s3);
		max-width: none;
		max-height: none;
		margin-top: var(--bgbh-s3);
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		transform: none;
		opacity: 1;
	}
	.bgbh-sheet--filters .bgbh-sheet-body {
		display: flex;
		flex-wrap: wrap;
		gap: var(--bgbh-s3);
		padding: 0;
		overflow: visible;
	}
	.bgbh-sheet--filters .bgbh-field { min-width: 180px; }
	.bgbh-sheet--filters .bgbh-sheet-foot { display: flex; gap: var(--bgbh-s2); padding: 0; border: 0; }
	.bgbh-sheet--filters .bgbh-btn--primary { min-height: 48px; }
	.bgbh-sheet--filters .bgbh-btn { min-height: 48px; }
	.bgbh-filters-toggle { display: none; }

	.bgbh-home {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
		gap: var(--bgbh-s5);
	}
	.bgbh-home-head,
	.bgbh-home-steps { grid-column: 1 / -1; }
	.bgbh-home-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
		align-items: center;
		gap: var(--bgbh-s6);
	}
	.bgbh-home-head .bgbh-home-stats { margin-top: 0; }
	.bgbh-pipeline {
		grid-auto-columns: minmax(0, 1fr);
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1440px) {
	.bgbh-home-head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

@media (min-width: 1024px) {
	.bgbh-qtop { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--bgbh-s6); }
	.bgbh-qactions { grid-template-columns: auto auto; }
	.bgbh-chips { flex-wrap: wrap; margin: var(--bgbh-s5) 0 0; padding: 0; overflow: visible; }

	.bgbh-qlist {
		overflow: hidden;
		border-radius: var(--bgbh-radius);
		background-color: var(--bgbh-surface);
		box-shadow: var(--bgbh-shadow);
		--bgbh-q-cols: 150px minmax(0, 1.5fr) minmax(150px, 1fr) 140px 140px 20px;
	}
	.bgbh-qlist--owner { --bgbh-q-cols: 150px minmax(0, 1.5fr) minmax(150px, 1fr) 140px 140px minmax(0, 1fr) 20px; }
	.bgbh-qcols,
	.bgbh .bgbh-qcard {
		display: grid;
		grid-template-columns: var(--bgbh-q-cols);
		align-items: center;
		gap: var(--bgbh-s4);
		padding-left: var(--bgbh-s6);
		padding-right: var(--bgbh-s6);
	}
	.bgbh-qcols {
		padding-top: var(--bgbh-s3);
		padding-bottom: var(--bgbh-s3);
		border-bottom: 1px solid var(--bgbh-line);
		background-color: var(--bgbh-sunken);
		color: var(--bgbh-muted);
		font-size: var(--bgbh-fs-sm);
		font-weight: 600;
	}
	.bgbh-qcols > span:last-child:not(.bgbh-qcols-num) { grid-column: auto; }
	.bgbh-qcols-num { text-align: right; }
	.bgbh-qrows { gap: 0; }
	.bgbh-qrows > li + li { border-top: 1px solid var(--bgbh-line); }
	.bgbh .bgbh-qcard {
		grid-template-areas: none;
		padding-top: var(--bgbh-s4);
		padding-bottom: var(--bgbh-s4);
		border-radius: 0;
		box-shadow: none;
	}
	.bgbh-qcard:hover { background-color: var(--bgbh-sunken); box-shadow: none; }
	.bgbh-qcard > * { grid-area: auto; }
	.bgbh-q-state { flex-direction: row; flex-wrap: wrap; align-items: center; padding-left: 0; }
	.bgbh-q-total,
	.bgbh-q-due,
	.bgbh-q-owner { padding-top: 0; border-top: 0; }
	.bgbh-q-total,
	.bgbh-q-due { justify-items: end; text-align: right; }
	.bgbh-q-owner { grid-auto-flow: row; justify-content: stretch; }
	.bgbh-q-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bgbh-q-go { display: block; width: 18px; height: 18px; color: var(--bgbh-faint); }
}

@media (prefers-reduced-motion: reduce) {
	.bgbh *,
	.bgbh *::before,
	.bgbh *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ---------- Form tạo / sửa báo giá ---------- */
.bgbh-qf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); }
.bgbh-qf > *,
.bgbh-qf-body > * { min-width: 0; }

.bgbh-qf-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.bgbh .bgbh-qf-back {
	gap: 2px;
	justify-self: start;
	min-height: 36px;
	margin: calc(-1 * var(--bgbh-s2)) 0 0 -6px;
	color: var(--bgbh-muted);
}
.bgbh-qf-back .bgbh-icon { width: 18px; height: 18px; }
.bgbh-qf-code { color: var(--bgbh-muted); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }

.bgbh-qf-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); }
.bgbh-qf-section-title { display: flex; align-items: center; gap: var(--bgbh-s2); margin-bottom: var(--bgbh-s4); }
.bgbh-qf-section-help { margin: calc(-1 * var(--bgbh-s3)) 0 var(--bgbh-s3); font-size: var(--bgbh-fs-sm); }
.bgbh-qf-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); }
.bgbh-req { color: var(--bgbh-danger); }

.bgbh-field :where(input[data-bgbh-money], input[data-bgbh-decimal], input[data-bgbh-percent], input[data-bgbh-months]) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.bgbh-field :where(input, select, textarea):disabled { background-color: var(--bgbh-sunken); color: var(--bgbh-faint); }

.bgbh-affix { position: relative; display: block; min-width: 0; }
.bgbh-field .bgbh-affix input { padding-right: 30px; }
.bgbh-affix-unit {
	position: absolute;
	top: 50%;
	right: 12px;
	color: var(--bgbh-muted);
	font-size: 15px;
	line-height: 1;
	pointer-events: none;
	transform: translateY(-50%);
}

.bgbh-qf-pair { display: flex; gap: 6px; min-width: 0; }
.bgbh-qf-pair > select { flex: 1 1 0; min-width: 0; }
.bgbh-qf-pair > .bgbh-affix { flex: 1.25 1 0; }

.bgbh-qf-owner { display: flex; align-items: flex-start; gap: var(--bgbh-s2); font-size: 14px; }
.bgbh-qf-owner .bgbh-icon { width: 18px; height: 18px; margin-top: 1px; }
.bgbh-qf-install { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s2); }

/* Gợi ý (khách cũ, sản phẩm) */
.bgbh-combo { position: relative; }
.bgbh-suggest {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 26;
	max-height: min(360px, 60vh);
	margin: 0;
	padding: var(--bgbh-s1);
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border: 1px solid var(--bgbh-line);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-surface);
	box-shadow: var(--bgbh-shadow-float);
}
.bgbh-suggest-list { margin: 0; padding: 0; list-style: none; }
.bgbh-suggest-state { padding: var(--bgbh-s3); color: var(--bgbh-muted); font-size: 14px; text-align: center; }
.bgbh .bgbh-suggest-item {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s3);
	width: 100%;
	min-height: 56px;
	padding: var(--bgbh-s2) 10px;
	border: 0;
	border-radius: var(--bgbh-radius-xs);
	background-color: transparent;
	color: var(--bgbh-ink);
	text-align: left;
	cursor: pointer;
}
.bgbh-suggest-item:hover,
.bgbh-suggest-item:focus-visible { background-color: var(--bgbh-sunken); }
.bgbh .bgbh-suggest-item:focus-visible { outline-offset: -2px; }
.bgbh-suggest-thumb {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-faint);
}
.bgbh-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bgbh-suggest-main { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.bgbh-suggest-title {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 600;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.bgbh-suggest-sub { overflow: hidden; color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); white-space: nowrap; text-overflow: ellipsis; }
.bgbh-suggest-side { display: grid; flex: none; justify-items: end; line-height: 1.35; text-align: right; }
.bgbh-suggest-price { font-size: 14px; font-weight: 700; }
.bgbh-suggest-note { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); }

/* Khối tìm sản phẩm trong sheet "Thêm sản phẩm có sẵn": kết quả nằm ngay dưới ô tìm */
.bgbh-search--inline > .bgbh-icon { top: 24px; }
.bgbh-search--inline .bgbh-suggest {
	position: static;
	max-height: none;
	margin-top: var(--bgbh-s2);
	padding: 0;
	overflow: visible;
	border: 0;
	box-shadow: none;
}
.bgbh-sheet--product .bgbh-sheet-body { min-height: min(360px, 50vh); }
.bgbh-qf-sheet-help { margin-bottom: var(--bgbh-s3); }

/* Dòng sản phẩm */
.bgbh-qf-products { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s3); }
.bgbh-qf-products-head .bgbh-qf-section-title { margin-bottom: var(--bgbh-s3); }
.bgbh-qf-products-head .bgbh-qf-section-title:only-child { margin-bottom: 0; }
.bgbh-qf-empty {
	padding: var(--bgbh-s5) var(--bgbh-s4);
	border-radius: var(--bgbh-radius);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-muted);
	font-size: 14px;
	text-align: center;
}

.bgbh-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s3); margin: 0; padding: 0; list-style: none; }
.bgbh-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bgbh-s3);
	padding: var(--bgbh-s2) var(--bgbh-s4) var(--bgbh-s4);
	border-radius: var(--bgbh-radius);
	background-color: var(--bgbh-surface);
	box-shadow: var(--bgbh-shadow);
}
.bgbh-item.is-dragging { opacity: .6; box-shadow: 0 0 0 2px var(--bgbh-accent); }

.bgbh-item-head { display: flex; align-items: center; gap: var(--bgbh-s2); min-height: 44px; margin-right: -10px; }
.bgbh-item-grip {
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 36px;
	margin-left: -8px;
	border-radius: var(--bgbh-radius-xs);
	color: var(--bgbh-faint);
	cursor: grab;
}
.bgbh-item-grip:hover { background-color: var(--bgbh-sunken); color: var(--bgbh-ink-2); }
.bgbh-item-grip .bgbh-icon { width: 18px; height: 18px; }
.bgbh-item-no { color: var(--bgbh-ink-2); font-size: var(--bgbh-fs-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bgbh-item-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 3px 8px;
	border-radius: 6px;
	background-color: var(--bgbh-accent-soft);
	color: var(--bgbh-accent-ink);
	font-size: var(--bgbh-fs-xs);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}
.bgbh-item-tag .bgbh-icon { width: 14px; height: 14px; }
.bgbh-item-tools { display: flex; flex: none; margin-left: auto; }
.bgbh .bgbh-icon-btn:disabled { opacity: .3; cursor: default; background-color: transparent; }
.bgbh .bgbh-icon-btn--danger { color: var(--bgbh-muted); }
.bgbh .bgbh-icon-btn--danger:hover { background-color: var(--bgbh-danger-soft); color: var(--bgbh-danger); }

.bgbh-item-main { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: end; gap: 0 var(--bgbh-s3); }
.bgbh-item-image-error { grid-column: 1 / -1; margin-top: 6px; }
.bgbh-item-media { position: relative; }
.bgbh-item-image {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border: 1.5px dashed var(--bgbh-line-strong);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-muted);
	font-size: var(--bgbh-fs-xs);
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.bgbh-item-image:hover { border-color: var(--bgbh-accent); color: var(--bgbh-accent); }
.bgbh-item-image:has(:focus-visible) { outline: 2px solid var(--bgbh-accent); outline-offset: 2px; }
.bgbh-item-image-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bgbh-item-image-empty .bgbh-icon { width: 22px; height: 22px; }
.bgbh-item-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-color: var(--bgbh-surface); }
.bgbh .bgbh-item-thumb { max-width: none; height: 100%; }
.bgbh-item.has-image .bgbh-item-image { border-style: solid; border-color: var(--bgbh-line); }
.bgbh-item-image-busy {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background-color: rgba(255, 255, 255, .78);
	color: var(--bgbh-ink-2);
	font-size: 11px;
	text-align: center;
}
.bgbh-item.is-uploading .bgbh-item-image-busy { display: flex; }
.bgbh-item.is-uploading .bgbh-item-image { cursor: progress; }
.bgbh .bgbh-item-image-remove {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 2px solid var(--bgbh-surface);
	border-radius: 50%;
	background-color: var(--bgbh-dark);
	color: #fff;
	cursor: pointer;
}
.bgbh-item-image-remove::before { content: ""; position: absolute; inset: -8px; }
.bgbh-item-image-remove .bgbh-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.bgbh-item-main.is-invalid .bgbh-item-image { border-color: var(--bgbh-danger); color: var(--bgbh-danger); }

.bgbh-item-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--bgbh-s3) var(--bgbh-s2);
}
.bgbh-item-qty { grid-column: span 3; }
.bgbh-item-unit { grid-column: span 4; }
.bgbh-item-price { grid-column: span 5; }
.bgbh-item-discount { grid-column: span 8; }
.bgbh-item-warranty { grid-column: span 4; }
.bgbh-item-vat { grid-column: span 6; }
.bgbh-qf.is-vat .bgbh-item-discount { grid-column: span 12; }
.bgbh-qf.is-vat .bgbh-item-warranty { grid-column: span 6; }
.bgbh-qf:not(.is-vat) :where(.bgbh-item-vat, .bgbh-fee-vat, .bgbh-qf-vat .bgbh-field-help) { display: none; }
.bgbh-item-grid .bgbh-field :where(input, select) { padding-right: 10px; padding-left: 10px; }
.bgbh-item-grid .bgbh-field select { padding-right: 32px; background-position: right 8px center; }
.bgbh-item-grid .bgbh-field .bgbh-affix input { padding-right: 26px; }
.bgbh-item-grid .bgbh-affix-unit { right: 10px; }

.bgbh-item-more { border-top: 1px solid var(--bgbh-line); }
.bgbh-item-more summary,
.bgbh-set-colors > summary {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s2);
	min-height: 44px;
	color: var(--bgbh-accent-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.bgbh-item-more summary::-webkit-details-marker,
.bgbh-set-colors > summary::-webkit-details-marker { display: none; }
.bgbh-item-more summary::before,
.bgbh-set-colors > summary::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0 4px 3px 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}
.bgbh-item-more[open] summary::before,
.bgbh-set-colors[open] > summary::before { margin-bottom: 4px; transform: rotate(45deg); }
.bgbh-item-more-label { flex: none; }
.bgbh-item-more-sum {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	color: var(--bgbh-muted);
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bgbh-item-more[open] .bgbh-item-more-sum { display: none; }
.bgbh-item-more-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s3); padding: var(--bgbh-s1) 0 var(--bgbh-s2); }
.bgbh-item-more-body textarea { min-height: 72px; }

.bgbh-item-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bgbh-s3);
	padding-top: var(--bgbh-s3);
	border-top: 1px solid var(--bgbh-line);
	color: var(--bgbh-muted);
	font-size: 14px;
}
.bgbh-item-total .bgbh-money { color: var(--bgbh-ink); font-size: var(--bgbh-fs-md); font-weight: 700; }

.bgbh .bgbh-btn--dashed {
	border: 1.5px dashed var(--bgbh-line-strong);
	background-color: transparent;
	color: var(--bgbh-accent-ink);
}
.bgbh .bgbh-btn--dashed:hover { border-color: var(--bgbh-accent); background-color: var(--bgbh-accent-soft); }
.bgbh-qf-add.is-invalid .bgbh-btn--dashed { border-color: var(--bgbh-danger); color: var(--bgbh-danger); }
.bgbh-qf-add-row { display: flex; flex-wrap: wrap; gap: var(--bgbh-s2); }
.bgbh-qf-add-row > .bgbh-btn { flex: 1 1 220px; min-width: 0; }

/* Phụ phí */
.bgbh-fees { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s2); margin: 0 0 var(--bgbh-s3); padding: 0; list-style: none; }
.bgbh-fees:empty { display: none; }
.bgbh-fee {
	display: grid;
	grid-template-columns: 64px 76px minmax(0, 1fr) 44px;
	grid-template-areas: "name name name remove" "qty unit price price" "total total total total";
	align-items: start;
	gap: var(--bgbh-s2);
}
.bgbh-fee + .bgbh-fee { padding-top: var(--bgbh-s3); border-top: 1px solid var(--bgbh-line); }
.bgbh-fee-name { grid-area: name; }
.bgbh-fee-price { grid-area: price; }
.bgbh-fee-qty { grid-area: qty; }
.bgbh-fee-unit { grid-area: unit; }
.bgbh-fee-qty input, .bgbh-fee-unit input { padding-right: 6px; padding-left: 6px; text-align: center; }
.bgbh-fee-total { grid-area: total; display: flex; justify-content: flex-end; gap: var(--bgbh-s2); margin: 0; color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-fee-total[hidden] { display: none; }
.bgbh-fee-total .bgbh-money { color: var(--bgbh-ink); font-weight: 700; }
.bgbh-fee .bgbh-icon-btn { grid-area: remove; margin: 2px -6px 0 -2px; }
.bgbh-qf.is-vat .bgbh-fee { grid-template-areas: "name name name remove" "qty unit price price" "vat vat total total"; }
.bgbh-qf.is-vat .bgbh-fee-total { align-self: center; }
.bgbh-fee-vat { grid-area: vat; }
.bgbh-fee-vat .bgbh-affix { max-width: 132px; }
.bgbh-field.bgbh-fee-vat .bgbh-affix input { padding-right: 58px; }

/* Tổng tiền */
.bgbh-qf-totals { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); }
.bgbh-qf-totals .bgbh-qf-section-title { margin-bottom: 0; }
.bgbh-qf-sum-base { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-qf-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s2); margin: 0; padding-top: var(--bgbh-s4); border-top: 1px solid var(--bgbh-line); }
.bgbh-qf-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bgbh-s3); color: var(--bgbh-ink-2); }
.bgbh-qf-sum-row dt,
.bgbh-qf-sum-row dd { margin: 0; }
.bgbh-qf-sum-row dd { color: var(--bgbh-ink); font-weight: 600; }
.bgbh-qf-sum-total { margin-top: var(--bgbh-s1); padding-top: var(--bgbh-s3); border-top: 1px dashed var(--bgbh-line-strong); }
.bgbh-qf-sum-total dt { color: var(--bgbh-ink); font-weight: 700; }
.bgbh .bgbh-qf-sum-total dd { color: var(--bgbh-hl); font-size: var(--bgbh-fs-lg); font-weight: 700; letter-spacing: -.02em; }

/* Thanh lưu ở đáy */
.bgbh-qf-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--bgbh-s3); }
.bgbh-qf-bar-total { display: grid; min-width: 0; margin: 0; line-height: 1.2; }
.bgbh-qf-bar-label { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-qf-bar-value { overflow: hidden; font-size: 21px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.bgbh .bgbh-qf-save { min-width: 150px; }

@media (hover: hover) and (pointer: fine) {
	.bgbh-item-grip { display: flex; }
}

@media (min-width: 640px) {
	.bgbh-qf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bgbh-qf-wide { grid-column: 1 / -1; }
	.bgbh-qf-other .bgbh-qf-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
	.bgbh-item-more-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bgbh-item-desc { grid-column: 1 / -1; }
	.bgbh-fee { grid-template-columns: 88px 104px minmax(0, 1fr) 44px; }
	.bgbh-qf.is-vat .bgbh-item-discount { grid-column: span 6; }
	.bgbh-qf.is-vat .bgbh-item-warranty,
	.bgbh-item-vat { grid-column: span 3; }
}

@media (min-width: 1024px) {
	.bgbh-qf-body {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
		grid-template-areas:
			"customer totals"
			"products totals"
			"fees totals"
			"other totals";
		align-items: start;
		gap: var(--bgbh-s5) var(--bgbh-s6);
	}
	.bgbh-qf-customer { grid-area: customer; }
	.bgbh-qf-products { grid-area: products; }
	.bgbh-qf-fees { grid-area: fees; }
	.bgbh-qf-other { grid-area: other; }
	.bgbh-qf-totals { grid-area: totals; position: sticky; top: var(--bgbh-s6); }
	.bgbh-qf-totals .bgbh-qf-sum-total dd { font-size: 26px; }
	.bgbh-qf-head { padding-top: var(--bgbh-s4); padding-bottom: var(--bgbh-s5); }
}

/* ---------- Trang chi tiết báo giá ---------- */
.bgbh--has-bottom-bar .bgbh-tabbar { display: none; }
.bgbh--has-bottom-bar.bgbh--nav .bgbh-main { padding-bottom: calc(var(--bgbh-safe-b) + 136px); }

.bgbh-btn--sm { min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.bgbh-btn--sm .bgbh-icon { width: 18px; height: 18px; }

.bgbh-qd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); }
.bgbh-qd > * { min-width: 0; }

.bgbh-qd-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s3); padding-top: var(--bgbh-s4); }
.bgbh-qd-tools {
	display: flex;
	gap: var(--bgbh-s2);
	margin: 0 calc(-1 * var(--bgbh-gutter));
	padding: 2px var(--bgbh-gutter) 4px;
	overflow-x: auto;
	scroll-padding: 0 var(--bgbh-gutter);
	scrollbar-width: none;
}
.bgbh-qd-tools::-webkit-scrollbar { display: none; }
.bgbh .bgbh-tool {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--bgbh-line-strong);
	border-radius: 10px;
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.bgbh-tool:hover { background-color: var(--bgbh-sunken); }
.bgbh-tool .bgbh-icon { width: 18px; height: 18px; }
.bgbh .bgbh-tool--accent { border-color: var(--bgbh-accent); background-color: var(--bgbh-accent-soft); color: var(--bgbh-accent-ink); }
.bgbh .bgbh-tool--icon { justify-content: center; width: 40px; padding: 0; }
.bgbh-tool[aria-busy="true"] { opacity: .6; cursor: progress; }

.bgbh-qd-title {
	font-size: clamp(26px, 7.2vw, 30px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.bgbh-qd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bgbh-qd-pills .bgbh-pill { padding: 6px 12px; font-size: 14px; }
.bgbh-qd-heading .bgbh-meta { margin-top: var(--bgbh-s2); }
.bgbh-qd-stats { margin-top: var(--bgbh-s1); }
.bgbh-qd-stats .bgbh-stat { padding: var(--bgbh-s3) var(--bgbh-s4) 14px; }
.bgbh-qd-stats .bgbh-stat-value { font-size: clamp(17px, 4.9vw, 21px); }
.bgbh-qd-stats .bgbh-stat-value.bgbh-qd-schedule { font-size: 16px; line-height: 1.35; }
.bgbh .bgbh-qd-muted { color: var(--bgbh-muted); font-weight: 500; }

.bgbh-qd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); }
.bgbh-qd-body > * { min-width: 0; }

.bgbh-qd-h2 { display: flex; align-items: center; gap: var(--bgbh-s2); }
.bgbh-qd-progress > .bgbh-qd-h2 { margin-bottom: var(--bgbh-s3); }
.bgbh-qd-label { margin-bottom: 2px; color: var(--bgbh-ink-2); font-size: var(--bgbh-fs-md); font-weight: 600; }

/* Khách hàng */
.bgbh-qd-customer { display: grid; gap: 6px; }
.bgbh-qd-name { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bgbh .bgbh-qd-phone {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--bgbh-accent-ink);
	font-size: 18px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bgbh-qd-line { color: var(--bgbh-ink-2); overflow-wrap: anywhere; }
.bgbh-qd-line-label { color: var(--bgbh-muted); }
.bgbh-qd-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgbh-s3); margin-top: var(--bgbh-s3); }
.bgbh-qd-contact .bgbh-btn { min-height: 48px; padding: 0 var(--bgbh-s3); }
.bgbh-qd-contact .bgbh-btn:only-child { grid-column: 1 / -1; }
.bgbh-qd-revision,
.bgbh-qd-expired { display: grid; gap: var(--bgbh-s2); margin: 2px 0 var(--bgbh-s2); border: 1px solid #f2d3a2; }
.bgbh-qd-expired { border-color: #f3c4c4; }
.bgbh-qd-expired-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bgbh-qd-revision-title { display: flex; align-items: center; gap: var(--bgbh-s2); font-weight: 700; }
.bgbh-qd-revision-title .bgbh-icon { width: 18px; height: 18px; }
.bgbh-qd-revision-note {
	margin: 0;
	padding: var(--bgbh-s2) var(--bgbh-s3);
	border-left: 3px solid currentColor;
	border-radius: 0 var(--bgbh-radius-xs) var(--bgbh-radius-xs) 0;
	background-color: rgba(255, 255, 255, .7);
	color: var(--bgbh-ink);
	font-weight: 500;
	overflow-wrap: anywhere;
}
.bgbh-qd-revision-help { font-size: var(--bgbh-fs-sm); }

/* Bảng sản phẩm (dùng chung); khung hẹp thì mỗi dòng thành thẻ */
.bgbh-qtable-box { container-type: inline-size; }
.bgbh-qtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.bgbh-qtable .bgbh-qtable-product { width: 100%; }
.bgbh-qtable th,
.bgbh-qtable td { padding: 12px 10px; text-align: left; vertical-align: top; }
.bgbh-qtable thead th { padding-top: 0; border-bottom: 1px solid var(--bgbh-line); color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-weight: 600; white-space: nowrap; }
.bgbh-qtable th:first-child,
.bgbh-qtable td:first-child { padding-left: 0; }
.bgbh-qtable th:last-child,
.bgbh-qtable td:last-child { padding-right: 0; }
.bgbh-qtable .bgbh-qtable-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bgbh-qtable tbody td { border-bottom: 1px solid var(--bgbh-line); }
.bgbh-qtable-item { display: flex; align-items: flex-start; gap: var(--bgbh-s3); min-width: 0; }
.bgbh-qtable-thumb {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 1px solid var(--bgbh-line);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-faint);
}
.bgbh-qtable-thumb > a { display: block; width: 100%; height: 100%; }
.bgbh .bgbh-qtable-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background-color: #fff; }
.bgbh-qtable-thumb .bgbh-icon { width: 26px; height: 26px; }
.bgbh-qtable-info { display: grid; gap: 2px; min-width: 0; }
.bgbh-qtable-sku { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bgbh-qtable-title { color: var(--bgbh-ink); font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.bgbh-qtable-meta { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-qtable-desc { margin-top: 2px; color: var(--bgbh-ink-2); font-size: var(--bgbh-fs-sm); overflow-wrap: anywhere; }
.bgbh-qtable-discount { color: var(--bgbh-danger); }
.bgbh-qtable-discount.is-empty { color: var(--bgbh-faint); }
.bgbh-qtable-total { color: var(--bgbh-ink); font-weight: 700; }
.bgbh-qtable tfoot th,
.bgbh-qtable tfoot td { padding-top: 5px; padding-bottom: 5px; color: var(--bgbh-ink-2); font-weight: 500; }
.bgbh-qtable tfoot th { text-align: right; }
.bgbh-qtable tfoot tr:first-child > * { padding-top: 14px; }
.bgbh-qtable tfoot td { color: var(--bgbh-ink); font-weight: 600; }
.bgbh-qtable-rate { color: var(--bgbh-muted); font-weight: 500; }
.bgbh-qtable .bgbh-qtable-grand > * { padding-top: 12px; border-top: 1px dashed var(--bgbh-line-strong); color: var(--bgbh-ink); font-size: 16px; font-weight: 700; }
.bgbh-qtable .bgbh-qtable-grand td { color: var(--bgbh-hl); font-size: var(--bgbh-fs-lg); letter-spacing: -.02em; }

@container (max-width: 720px) {
	.bgbh-qtable thead { display: none; }
	.bgbh-qtable,
	.bgbh-qtable tbody,
	.bgbh-qtable tfoot { display: block; width: 100%; }
	.bgbh-qtable-row {
		--bgbh-qtable-indent: 76px;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px var(--bgbh-s2);
		padding: 14px 0 14px var(--bgbh-qtable-indent);
		border-bottom: 1px solid var(--bgbh-line);
	}
	.bgbh-qtable tbody tr:first-child { padding-top: 0; }
	.bgbh-qtable tbody td { padding: 0; border-bottom: 0; }
	.bgbh-qtable .bgbh-qtable-product { flex: 0 0 calc(100% + var(--bgbh-qtable-indent)); margin-left: calc(-1 * var(--bgbh-qtable-indent)); padding-bottom: 8px; }
	.bgbh-qtable .bgbh-qtable-qty,
	.bgbh-qtable .bgbh-qtable-price { color: var(--bgbh-ink-2); text-align: left; }
	.bgbh-qtable .bgbh-qtable-discount { color: var(--bgbh-danger); text-align: left; }
	.bgbh-qtable-price::before { content: "× "; color: var(--bgbh-muted); }
	.bgbh-qtable .bgbh-qtable-discount.is-empty { display: none; }
	.bgbh-qtable .bgbh-qtable-total { margin-left: auto; font-size: 16px; text-align: right; }
	.bgbh-qtable tfoot tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bgbh-s3); }
	.bgbh-qtable tfoot th,
	.bgbh-qtable tfoot td { padding-right: 0; padding-left: 0; }
	.bgbh-qtable tfoot th { text-align: left; }
	.bgbh-qtable .bgbh-qtable-grand { margin-top: 6px; border-top: 1px dashed var(--bgbh-line-strong); }
	.bgbh-qtable .bgbh-qtable-grand > * { border-top: 0; }
}

/* Tiến độ (dùng chung) */
.bgbh-progress .bgbh-step { position: relative; }
.bgbh-progress .bgbh-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 38px;
	bottom: -8px;
	left: 14px;
	width: 2px;
	border-radius: 1px;
	background-color: var(--bgbh-line);
}
.bgbh-progress .bgbh-step.is-done:not(.is-current)::before { background-color: var(--bgbh-accent); }
.bgbh-progress.is-cancelled .bgbh-step.is-done::before { background-color: var(--bgbh-line); }
.bgbh-progress.is-cancelled .bgbh-step.is-done .bgbh-step-mark { border-color: var(--bgbh-faint); background-color: var(--bgbh-faint); }
.bgbh-step.is-next .bgbh-step-mark { border-color: var(--bgbh-accent); background-color: var(--bgbh-accent-soft); }
.bgbh-step.is-next .bgbh-step-label { color: var(--bgbh-accent-ink); font-weight: 600; }

/* Tiến độ gọn: bước đã qua làm mờ; dưới 1024px, khi toggle.js đã chạy, chỉ còn bước trước, bước hiện tại và bước kế tiếp */
.bgbh-step.is-past .bgbh-step-mark,
.bgbh-progress .bgbh-step.is-past::before { opacity: .45; }
.bgbh-step.is-past .bgbh-step-label,
.bgbh-step.is-past .bgbh-step-note { color: var(--bgbh-muted); }
.bgbh-step.is-past .bgbh-thumbs { opacity: .7; }
.bgbh .bgbh-steps-toggle {
	gap: 6px;
	margin-top: var(--bgbh-s1);
	padding: 0;
	border: 0;
	background-color: transparent;
	font-family: inherit;
	cursor: pointer;
	scroll-margin-top: calc(var(--bgbh-header-h) + var(--bgbh-s4));
}
.bgbh .bgbh-steps-toggle[hidden] { display: none; }
.bgbh-steps-toggle .bgbh-icon { width: 18px; height: 18px; transition: transform .2s ease; }
.bgbh-steps-toggle[aria-expanded="true"] .bgbh-icon { transform: rotate(180deg); }
.bgbh-steps-toggle[aria-expanded="true"] .bgbh-steps-toggle-more,
.bgbh-steps-toggle[aria-expanded="false"] .bgbh-steps-toggle-less { display: none; }
@media (max-width: 1023.98px) {
	.bgbh-progress.is-collapsed .bgbh-step.is-outside-window { display: none; }
	.bgbh-progress.is-collapsed .bgbh-step.is-window-last::before { display: none; }
}
@media (min-width: 1024px) {
	.bgbh .bgbh-steps-toggle { display: none; }
}
.bgbh-step-body { min-width: 0; gap: 2px; }
.bgbh-step-meta { font-variant-numeric: tabular-nums; }
.bgbh-step-meta.is-skipped { font-style: italic; }

/* Chuyển thẳng tới bước: tên bước là nút (cả hàng dấu tick bấm được), sheet xác nhận */
.bgbh .bgbh-step-jump {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 4px;
	max-width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--bgbh-radius-xs);
	background-color: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.bgbh-step-jump::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 44px; }
.bgbh-step-jump:hover .bgbh-step-label { text-decoration: underline; text-decoration-color: var(--bgbh-line-strong); text-underline-offset: 3px; }
.bgbh .bgbh-step-jump-icon { flex: none; width: 16px; height: 16px; line-height: 1; color: var(--bgbh-faint); opacity: 0; transition: opacity .15s ease; }
.bgbh-step-jump:hover .bgbh-step-jump-icon,
.bgbh-step-jump:focus-visible .bgbh-step-jump-icon { opacity: 1; }
@media (hover: none) {
	.bgbh .bgbh-step-jump-icon { opacity: .7; }
}
.bgbh-jump-group { display: grid; gap: var(--bgbh-s4); }
.bgbh-jump-group[hidden],
.bgbh-need[hidden] { display: none; }
.bgbh-jump-warn { display: grid; justify-items: start; gap: var(--bgbh-s2); }
.bgbh-jump-warn[hidden] { display: none; }
.bgbh-jump-undo { display: grid; gap: 4px; margin: 0; padding-left: var(--bgbh-s5); color: var(--bgbh-ink-2); }
.bgbh-jump-undo[hidden],
.bgbh-jump-undo li[hidden] { display: none; }
.bgbh-jump-keep { color: var(--bgbh-ok); font-weight: 500; }
.bgbh-skipped { display: grid; gap: var(--bgbh-s2); }
.bgbh-skipped[hidden] { display: none; }
.bgbh-skipped-title { color: var(--bgbh-ink-2); font-weight: 600; }
.bgbh-skipped-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bgbh-skipped-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bgbh-s2);
	padding: 8px 12px;
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink-2);
}
.bgbh-skipped-item[hidden] { display: none; }
.bgbh-skipped-name { min-width: 0; overflow-wrap: anywhere; }
.bgbh-step-note {
	margin-top: 4px;
	padding: 6px 10px;
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink-2);
	font-size: 14px;
	overflow-wrap: anywhere;
}
.bgbh-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.bgbh-thumbs a { display: block; border-radius: var(--bgbh-radius-xs); }
.bgbh .bgbh-thumbs img {
	display: block;
	width: 56px;
	height: 56px;
	border: 1px solid var(--bgbh-line);
	border-radius: var(--bgbh-radius-xs);
	background-color: var(--bgbh-sunken);
	object-fit: cover;
}

.bgbh-qd-boxes { display: grid; gap: 10px; margin-top: var(--bgbh-s4); }
.bgbh-qd-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bgbh-s3);
	min-height: 68px;
	padding: 10px 12px 10px var(--bgbh-s4);
	border: 1px solid var(--bgbh-line);
	border-radius: 14px;
}
.bgbh-qd-box-text { display: grid; gap: 1px; min-width: 0; line-height: 1.35; }
.bgbh-qd-box-label { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-qd-box-value { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.bgbh .bgbh-qd-box-sub { color: var(--bgbh-accent-ink); font-size: var(--bgbh-fs-sm); font-variant-numeric: tabular-nums; text-decoration: none; }
.bgbh-qd-box .bgbh-btn { flex: none; }

.bgbh-qd-next {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: var(--bgbh-s3);
	padding: 14px var(--bgbh-s4);
	border: 1px solid #cddcf8;
	border-radius: 14px;
	background-color: var(--bgbh-accent-soft);
}
.bgbh-qd-next-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: var(--bgbh-accent);
	color: #fff;
}
.bgbh-qd-next-icon .bgbh-icon { width: 22px; height: 22px; stroke-width: 2.5; }
.bgbh-qd-next-text { display: grid; gap: 2px; min-width: 0; }
.bgbh-qd-next-title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.bgbh-qd-next-guide { color: var(--bgbh-ink-2); font-size: 14px; }
.bgbh-qd-next-need { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-qd-next .bgbh-btn { justify-self: start; margin-top: var(--bgbh-s2); }
.bgbh-qd-next--cancelled { border-color: #f3caca; background-color: var(--bgbh-danger-soft); }
.bgbh-qd-next--cancelled .bgbh-qd-next-icon { background-color: var(--bgbh-danger); }
.bgbh-qd-next--done { border-color: #c4e6cf; background-color: var(--bgbh-ok-soft); }
.bgbh-qd-next--done .bgbh-qd-next-icon { background-color: var(--bgbh-ok); }

/* Ghi chú của báo giá trên trang chi tiết */
.bgbh-qd-notes { display: grid; gap: var(--bgbh-s2); margin-top: var(--bgbh-s4); padding-top: var(--bgbh-s4); border-top: 1px solid var(--bgbh-line); }
.bgbh-qd-note { padding: var(--bgbh-s3) 14px; border-radius: var(--bgbh-radius-sm); background-color: var(--bgbh-sunken); }
.bgbh-qd-note--internal { background-color: var(--bgbh-warn-soft); }
.bgbh-qd-note-label { margin-bottom: 2px; color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-weight: 600; }
.bgbh-qd-note--internal .bgbh-qd-note-label { color: var(--bgbh-warn); }
.bgbh-qd-note-text { color: var(--bgbh-ink); overflow-wrap: anywhere; }

/* Thanh toán (khối dùng chung + danh sách đợt thu) */
.bgbh-paybox { display: grid; gap: var(--bgbh-s3); }
.bgbh-paybox-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgbh-s3); margin: 0; }
.bgbh-paybox-cell { display: grid; gap: 2px; padding: var(--bgbh-s3) 14px; border-radius: var(--bgbh-radius-sm); background-color: var(--bgbh-sunken); }
.bgbh-paybox-cell dt { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-paybox-cell dd { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bgbh-paybox-cell--due dd { color: var(--bgbh-danger); }
.bgbh-paybox.is-paid .bgbh-paybox-cell--due dd { color: var(--bgbh-ok); }
.bgbh-paybox-done {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s2);
	padding: var(--bgbh-s3) 14px;
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-ok-soft);
	color: var(--bgbh-ok);
	font-weight: 600;
}
.bgbh-paybox-over {
	padding: var(--bgbh-s3) 14px;
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-warn-soft);
	color: var(--bgbh-warn);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.bgbh-paybox-account {
	padding: var(--bgbh-s3) 14px;
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-ink-2);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.bgbh-paybox-qr {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin: 0;
	padding: var(--bgbh-s4);
	border-radius: var(--bgbh-radius);
	background-color: var(--bgbh-sunken);
	text-align: center;
}
.bgbh .bgbh-paybox-qr img {
	display: block;
	width: min(100%, 240px);
	height: auto;
	border-radius: var(--bgbh-radius-sm);
	background-color: #fff;
	box-shadow: 0 0 0 1px var(--bgbh-line);
}
.bgbh-paybox-qr figcaption { display: grid; gap: 2px; }
.bgbh-paybox-caption { color: var(--bgbh-ink-2); font-weight: 600; }
.bgbh-paybox-amount { color: var(--bgbh-danger); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }

.bgbh-qd-pays { margin-top: var(--bgbh-s4); padding-top: var(--bgbh-s4); border-top: 1px solid var(--bgbh-line); }
.bgbh-qd-sub { margin-bottom: var(--bgbh-s1); font-size: 15px; font-weight: 700; }
.bgbh-qd-paylist { margin: 0; padding: 0; list-style: none; }
.bgbh-qd-pay { display: flex; align-items: center; gap: var(--bgbh-s2); padding: 10px 0; }
.bgbh-qd-pay + .bgbh-qd-pay { border-top: 1px solid var(--bgbh-line); }
.bgbh-qd-pay-main { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.bgbh-qd-pay-amount { color: var(--bgbh-ok); font-size: 16px; font-weight: 700; }
.bgbh-qd-pay-meta { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-qd-pay-note { color: var(--bgbh-ink-2); font-size: 14px; overflow-wrap: anywhere; }
.bgbh-qd-pay .bgbh-icon-btn { margin-right: -10px; }
.bgbh-qd-empty { color: var(--bgbh-muted); font-size: 14px; }

/* Bảo hành */
.bgbh-qd-warranty .bgbh-card-head { margin-bottom: var(--bgbh-s2); }
.bgbh .bgbh-link-icon { width: 16px; height: 16px; margin-left: 4px; }
.bgbh-qd-handover-date { margin: 0 0 var(--bgbh-s3); }
.bgbh-qd-wlist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bgbh-qd-w { display: grid; gap: 4px; padding: var(--bgbh-s3) 14px; border: 1px solid var(--bgbh-line); border-radius: 14px; }
.bgbh-qd-w-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 10px; }
.bgbh-qd-w-name { flex: 1 1 14rem; min-width: 0; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.bgbh-qd-w-meta,
.bgbh-qd-w-serials { color: var(--bgbh-ink-2); font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bgbh-qd-ho-photos { margin-top: var(--bgbh-s3); }
.bgbh .bgbh-qd-ho-photos img { width: 64px; height: 64px; }
.bgbh-qd-actions { display: flex; flex-wrap: wrap; gap: var(--bgbh-s2); margin-top: var(--bgbh-s4); }

/* Nhật ký */
.bgbh-qd-logs summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	margin: -10px 0;
	cursor: pointer;
	list-style: none;
}
.bgbh-qd-logs summary::-webkit-details-marker { display: none; }
.bgbh-qd-logs summary::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-right: 2px solid var(--bgbh-muted);
	border-bottom: 2px solid var(--bgbh-muted);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.bgbh-qd-logs[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.bgbh-qd-loglist { margin: var(--bgbh-s4) 0 0; padding: 0; list-style: none; }
.bgbh-qd-log { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--bgbh-line); }
.bgbh-qd-log-msg { color: var(--bgbh-ink); font-size: 14px; overflow-wrap: anywhere; }
.bgbh-qd-log-meta { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); font-variant-numeric: tabular-nums; }
.bgbh .bgbh-qd-log img { width: 48px; height: 48px; }

/* Thanh nút đáy */
.bgbh .bgbh-qd-bar .bgbh-btn--primary { min-height: 56px; padding: 0 var(--bgbh-s3); font-size: 16px; font-weight: 700; }
.bgbh-bottom-bar-hint.bgbh-qd-hint { display: flex; min-width: 0; white-space: pre; }
.bgbh-qd-hint-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Form trong sheet */
.bgbh-sheet-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.bgbh-sheet-lead { color: var(--bgbh-ink-2); }
.bgbh-sheet-lead strong { font-weight: 700; }

.bgbh-photo-field { gap: var(--bgbh-s2); }
.bgbh-photos { display: flex; flex-wrap: wrap; gap: var(--bgbh-s2); margin: 0; padding: 0; list-style: none; }
.bgbh-photos:empty { display: none; }
.bgbh-photo {
	position: relative;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border: 1px solid var(--bgbh-line);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
}
.bgbh .bgbh-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bgbh-photo-busy {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, .78);
	color: var(--bgbh-ink-2);
	font-size: 11px;
	font-weight: 600;
}
.bgbh-photo.is-uploading .bgbh-photo-busy { display: flex; }
.bgbh .bgbh-photo-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(15, 23, 42, .72);
	color: #fff;
	cursor: pointer;
}
.bgbh-photo-remove::before { content: ""; position: absolute; inset: -9px; }
.bgbh-photo-remove .bgbh-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.bgbh-photo-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	gap: var(--bgbh-s2);
	min-height: 48px;
	padding: 0 var(--bgbh-s4);
	border: 1.5px dashed var(--bgbh-line-strong);
	border-radius: var(--bgbh-radius-sm);
	color: var(--bgbh-accent-ink);
	font-weight: 600;
	cursor: pointer;
}
.bgbh-photo-add[hidden] { display: none; }
.bgbh-photo-add:hover { border-color: var(--bgbh-accent); background-color: var(--bgbh-accent-soft); }
.bgbh-photo-add:has(:focus-visible) { outline: 2px solid var(--bgbh-accent); outline-offset: 2px; }
.bgbh-photo-field.is-invalid .bgbh-photo-add { border-color: var(--bgbh-danger); color: var(--bgbh-danger); }

fieldset.bgbh-field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.bgbh-field > legend { padding: 0; }
.bgbh-segment-field > legend { margin-bottom: 6px; }
.bgbh-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--bgbh-radius-sm); background-color: var(--bgbh-sunken); }
.bgbh-segment-item { position: relative; display: block; cursor: pointer; }
.bgbh-segment-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bgbh-segment-item span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: 9px;
	color: var(--bgbh-ink-2);
	font-size: 15px;
	font-weight: 600;
}
.bgbh-segment-item input:checked + span { background-color: var(--bgbh-surface); color: var(--bgbh-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
.bgbh-segment-item input:focus-visible + span { outline: 2px solid var(--bgbh-accent); outline-offset: 1px; }
.bgbh-segment-item input:disabled + span { opacity: .45; }

.bgbh-choices { display: grid; gap: var(--bgbh-s2); }
.bgbh-choice {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s3);
	min-height: 56px;
	padding: 10px 14px;
	border: 1px solid var(--bgbh-line-strong);
	border-radius: var(--bgbh-radius-sm);
	cursor: pointer;
}
.bgbh-choice input,
.bgbh-set-tpl input {
	display: grid;
	flex: none;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--bgbh-line-strong);
	border-radius: 50%;
	background-color: var(--bgbh-surface);
	-webkit-appearance: none;
	appearance: none;
}
.bgbh-choice input::before,
.bgbh-set-tpl input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: var(--bgbh-accent); transform: scale(0); transition: transform .12s ease; }
.bgbh-choice input:checked,
.bgbh-set-tpl input:checked { border-color: var(--bgbh-accent); }
.bgbh-choice input:checked::before,
.bgbh-set-tpl input:checked::before { transform: scale(1); }
.bgbh .bgbh-choice input:focus-visible,
.bgbh .bgbh-set-tpl input:focus-visible { outline: none; }
.bgbh-choice:has(input:checked) { border-color: var(--bgbh-accent); background-color: var(--bgbh-accent-soft); }
.bgbh-choice:has(input:focus-visible) { outline: 2px solid var(--bgbh-accent); outline-offset: 2px; }
.bgbh-choice-text { display: grid; min-width: 0; line-height: 1.35; }
.bgbh-choice-title { font-weight: 600; }
.bgbh-choice-sub { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-variant-numeric: tabular-nums; }

.bgbh-copy { display: flex; gap: var(--bgbh-s2); }
.bgbh-field .bgbh-copy input { flex: 1 1 auto; min-width: 0; background-color: var(--bgbh-sunken); color: var(--bgbh-ink-2); font-size: 14px; }
.bgbh-copy .bgbh-btn { flex: none; min-height: 48px; padding: 0 var(--bgbh-s4); }
.bgbh-share-list { margin: var(--bgbh-s4) calc(-1 * var(--bgbh-s2)) 0; padding: 0; list-style: none; }
.bgbh .bgbh-share-item {
	display: flex;
	align-items: center;
	gap: var(--bgbh-s3);
	min-height: 60px;
	padding: 6px var(--bgbh-s2);
	border-radius: var(--bgbh-radius-sm);
	color: var(--bgbh-ink);
	text-decoration: none;
}
.bgbh-share-item:hover { background-color: var(--bgbh-sunken); }
.bgbh-share-text { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.bgbh-share-title { font-weight: 600; }
.bgbh-share-sub { overflow: hidden; color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); white-space: nowrap; text-overflow: ellipsis; }
.bgbh-menu-icon.bgbh-tone--accent { background-color: var(--bgbh-accent-soft); color: var(--bgbh-accent); }

.bgbh button.bgbh-menu-link { width: 100%; border: 0; background-color: transparent; font: inherit; text-align: left; cursor: pointer; }
.bgbh button.bgbh-menu-link:hover { background-color: var(--bgbh-sunken); }
.bgbh-menu-sub { display: block; color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-weight: 500; }

.bgbh-ho-items { display: grid; gap: 10px; }
.bgbh-ho-title { font-size: 15px; font-weight: 700; }
.bgbh-ho-item { display: grid; gap: 10px; padding: var(--bgbh-s3) 14px; border: 1px solid var(--bgbh-line); border-radius: 14px; }
.bgbh-ho-name { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.bgbh-ho-meta { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-ho-months { grid-template-columns: minmax(0, 1fr) 124px; align-items: center; column-gap: var(--bgbh-s3); }
.bgbh-ho-months .bgbh-field-error { grid-column: 1 / -1; }
.bgbh-ho-months .bgbh-affix input { padding-right: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.bgbh-serials { display: grid; gap: var(--bgbh-s2); }
.bgbh-serial { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; }
.bgbh-serial-no { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-weight: 600; }
.bgbh-serial input {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--bgbh-line-strong);
	border-radius: 10px;
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
	font-family: inherit;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}
.bgbh-serial input:focus { border-color: var(--bgbh-accent); box-shadow: var(--bgbh-ring); outline: none; }
.bgbh-serial input::placeholder { color: var(--bgbh-faint); }
.bgbh-ho-pay { display: grid; gap: var(--bgbh-s2); padding: var(--bgbh-s2) 14px 14px; border-radius: 14px; background-color: var(--bgbh-sunken); }
.bgbh-ho-pay-fields { display: grid; gap: var(--bgbh-s4); }

@media (min-width: 640px) {
	.bgbh-qd-stats .bgbh-stat-value { font-size: 21px; }
}

@media (min-width: 1024px) {
	.bgbh--has-bottom-bar.bgbh--nav .bgbh-main { padding-bottom: 120px; }
	.bgbh-qd-head {
		grid-template-columns: minmax(0, 1fr) minmax(400px, auto);
		grid-template-areas:
			"back tools"
			"heading stats";
		align-items: center;
		column-gap: var(--bgbh-s6);
		padding-top: var(--bgbh-s5);
	}
	.bgbh-qd-head > .bgbh-qf-back { grid-area: back; }
	.bgbh-qd-tools { grid-area: tools; justify-content: flex-end; margin: 0; padding: 0; overflow: visible; }
	.bgbh-qd-heading { grid-area: heading; }
	.bgbh-qd-stats { grid-area: stats; margin-top: 0; }
	.bgbh-qd-title { font-size: 32px; }
	.bgbh-qd-body {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
		grid-template-rows: repeat(6, auto) 1fr;
		align-items: start;
		gap: var(--bgbh-s5) var(--bgbh-s6);
	}
	.bgbh-qd-body > * { grid-column: 1; }
	.bgbh-qd-body > .bgbh-qd-progress { grid-column: 2; grid-row: 1 / -1; }
	.bgbh-qd-contact { grid-template-columns: repeat(2, max-content); }
	.bgbh-qd-contact .bgbh-btn { min-width: 160px; }
	.bgbh-qd-bar .bgbh-btn--block { min-width: 360px; }
}

/* ---------- Khách hàng, Bảo hành, Yêu cầu, Thu tiền ---------- */
.bgbh-qactions--single { grid-template-columns: minmax(0, 1fr); }
.bgbh .bgbh-qactions--single .bgbh-btn { min-height: 44px; }

.bgbh-xstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgbh-s3); margin-top: var(--bgbh-s4); }
.bgbh-xstats .bgbh-stat--hero { grid-column: 1 / -1; }
.bgbh-xstats .bgbh-stat--ok .bgbh-stat-value { color: var(--bgbh-ok); }
.bgbh-xstats .bgbh-stat--hero .bgbh-stat-value { font-size: clamp(22px, 7vw, 28px); }

.bgbh-xrows { display: grid; gap: var(--bgbh-s3); margin: 0; padding: 0; list-style: none; }
.bgbh-xcols { display: none; }
.bgbh .bgbh-xrow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bgbh-s3) var(--bgbh-s4);
	min-width: 0;
	padding: var(--bgbh-s4);
	border-radius: var(--bgbh-radius);
	background-color: var(--bgbh-surface);
	color: var(--bgbh-ink);
	text-decoration: none;
	box-shadow: var(--bgbh-shadow);
	transition: box-shadow .15s ease;
}
.bgbh a.bgbh-xrow:hover { box-shadow: 0 0 0 1px var(--bgbh-line-strong), var(--bgbh-shadow); }
.bgbh-xrow > .bgbh-x-main,
.bgbh-xrow > .bgbh-x-links { grid-column: 1 / -1; }
.bgbh-x-cell { display: grid; align-content: start; gap: 2px; min-width: 0; line-height: 1.4; }
.bgbh-x-cell--num,
.bgbh-x-cell--end { text-align: right; justify-items: end; }
.bgbh-x-title,
.bgbh-x-name,
.bgbh-x-code { font-weight: 700; overflow-wrap: anywhere; }
.bgbh-x-title { font-size: var(--bgbh-fs-md); letter-spacing: -.01em; }
.bgbh .bgbh-x-code { color: var(--bgbh-accent-ink); font-size: var(--bgbh-fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
.bgbh .bgbh-x-code:hover { text-decoration: underline; }
.bgbh-x-sub,
.bgbh-x-serials { color: var(--bgbh-muted); font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bgbh-x-serials { color: var(--bgbh-ink-2); }
.bgbh-x-serials .bgbh-x-label { margin-right: 6px; }
.bgbh-x-label { color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); }
.bgbh-x-value { font-size: var(--bgbh-fs); font-weight: 700; font-variant-numeric: tabular-nums; }
.bgbh-x-text { overflow-wrap: anywhere; }
.bgbh .bgbh-x-phone { color: var(--bgbh-accent-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.bgbh .bgbh-x-pill { white-space: normal; justify-self: start; margin-top: 2px; }
.bgbh-x-links { display: flex; flex-wrap: wrap; gap: 0 var(--bgbh-s5); padding-top: var(--bgbh-s2); border-top: 1px solid var(--bgbh-line); }
.bgbh .bgbh-x-links .bgbh-link { min-height: 36px; }
.bgbh-x-go { display: none; }

.bgbh-rcards { display: grid; gap: var(--bgbh-s3); margin: 0; padding: 0; list-style: none; }
.bgbh-rcard { display: grid; gap: var(--bgbh-s3); align-content: start; min-width: 0; }
.bgbh-rcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bgbh-s3); }
.bgbh-rcard-type { display: grid; min-width: 0; }
.bgbh-rcard-time { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-variant-numeric: tabular-nums; }
.bgbh-rcard-product { display: flex; align-items: flex-start; gap: var(--bgbh-s2); font-weight: 600; overflow-wrap: anywhere; }
.bgbh-rcard-product .bgbh-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--bgbh-muted); }
.bgbh-rcard-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--bgbh-s3); }
.bgbh-rcard-name { font-weight: 700; overflow-wrap: anywhere; }
.bgbh-rcard-desc { padding: var(--bgbh-s3); border-radius: var(--bgbh-radius-xs); background-color: var(--bgbh-sunken); color: var(--bgbh-ink-2); overflow-wrap: anywhere; }
.bgbh-rcard-photos { display: flex; flex-wrap: wrap; gap: var(--bgbh-s2); margin: 0; padding: 0; list-style: none; }
.bgbh-rcard-photos a { display: block; overflow: hidden; border-radius: var(--bgbh-radius-xs); }
.bgbh .bgbh-rcard-photos img { display: block; width: 72px; height: 72px; object-fit: cover; }
.bgbh-rcard-note { padding: var(--bgbh-s2) var(--bgbh-s3); border-left: 3px solid var(--bgbh-line-strong); color: var(--bgbh-ink-2); font-size: 14px; overflow-wrap: anywhere; }
.bgbh-rcard-note-label { display: block; color: var(--bgbh-muted); font-size: var(--bgbh-fs-xs); font-weight: 600; }
.bgbh-rcard-owner { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-rcard-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgbh-s2); padding-top: var(--bgbh-s3); border-top: 1px solid var(--bgbh-line); }
.bgbh-rcard-actions--delete { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.bgbh-rcard-actions .bgbh-btn { min-width: 0; }
.bgbh-rcard-gallery { display: grid; gap: 6px; }
.bgbh-rcard-facts { display: grid; gap: 6px; margin: 0; padding: var(--bgbh-s3); border-radius: var(--bgbh-radius-xs); background-color: var(--bgbh-sunken); font-size: 14px; }
.bgbh-rcard-facts > div { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: var(--bgbh-s3); }
.bgbh-rcard-facts dt { color: var(--bgbh-muted); }
.bgbh-rcard-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bgbh-qd-requests { min-width: 0; scroll-margin-top: var(--bgbh-s4); }
.bgbh .bgbh-qd-requests .bgbh-rcards { grid-template-columns: minmax(0, 1fr); }
.bgbh-qd-requests .bgbh-rcard { padding: var(--bgbh-s4); border: 1px solid var(--bgbh-line); box-shadow: none; }
.bgbh-req-group { display: grid; gap: var(--bgbh-s4); }
.bgbh-req-group[hidden] { display: none; }
.bgbh .bgbh-x-requests { justify-self: start; align-self: center; text-decoration: none; }

.bgbh-cd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); }
.bgbh-cd > * { min-width: 0; }
.bgbh-cd-head { display: grid; gap: var(--bgbh-s2); padding-top: var(--bgbh-s4); }
.bgbh-cd-title { overflow-wrap: anywhere; }
.bgbh-cd-body,
.bgbh-cd-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bgbh-s4); align-content: start; }
.bgbh-cd-body > *,
.bgbh-cd-lists > * { min-width: 0; }
.bgbh-cd-lists { gap: var(--bgbh-s6); }
.bgbh-cd-info .bgbh-card-head .bgbh-link { gap: 6px; }
.bgbh-cd-info .bgbh-link-icon { margin-left: 0; }

@media (min-width: 1024px) {
	.bgbh-xlist {
		overflow: hidden;
		border-radius: var(--bgbh-radius);
		background-color: var(--bgbh-surface);
		box-shadow: var(--bgbh-shadow);
	}
	.bgbh-xlist--customers { --bgbh-x-cols: minmax(0, 2fr) 120px 180px 20px; }
	.bgbh-xlist--warranties { --bgbh-x-cols: minmax(0, 2fr) minmax(0, 1.3fr) minmax(170px, 1fr) minmax(0, 1fr); }
	.bgbh-xlist--payments { --bgbh-x-cols: 160px minmax(0, 1.4fr) 150px minmax(0, 1.2fr) minmax(0, 1fr); }
	.bgbh-xcols,
	.bgbh .bgbh-xrow {
		display: grid;
		grid-template-columns: var(--bgbh-x-cols);
		align-items: center;
		gap: var(--bgbh-s4);
		padding-left: var(--bgbh-s6);
		padding-right: var(--bgbh-s6);
	}
	.bgbh-xcols {
		padding-top: var(--bgbh-s3);
		padding-bottom: var(--bgbh-s3);
		border-bottom: 1px solid var(--bgbh-line);
		background-color: var(--bgbh-sunken);
		color: var(--bgbh-muted);
		font-size: var(--bgbh-fs-sm);
		font-weight: 600;
	}
	.bgbh-xcols-num { text-align: right; }
	.bgbh-x-cell--end { text-align: left; justify-items: start; }
	.bgbh-xrows { gap: 0; }
	.bgbh-xrows > li + li { border-top: 1px solid var(--bgbh-line); }
	.bgbh .bgbh-xrow { padding-top: var(--bgbh-s4); padding-bottom: var(--bgbh-s4); border-radius: 0; box-shadow: none; }
	.bgbh a.bgbh-xrow:hover { background-color: var(--bgbh-sunken); box-shadow: none; }
	.bgbh-xrow > .bgbh-x-main,
	.bgbh-xrow > .bgbh-x-links { grid-column: auto; }
	.bgbh-x-links { display: grid; gap: 0; padding-top: 0; border-top: 0; }
	.bgbh-x-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bgbh-x-serials .bgbh-x-label { position: static; width: auto; height: auto; margin: 0 6px 0 0; overflow: visible; clip: auto; }
	.bgbh-x-go { display: block; width: 18px; height: 18px; color: var(--bgbh-faint); }
	.bgbh-xstats { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); max-width: 640px; }
	.bgbh-xstats .bgbh-stat--hero { grid-column: auto; }

	.bgbh-rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--bgbh-s4); }
	.bgbh-cd-body { gap: var(--bgbh-s6); }
	.bgbh-cd-info .bgbh-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgbh-s4) var(--bgbh-s6); }
	.bgbh-cd-info .bgbh-field:has(textarea),
	.bgbh-cd-info .bgbh-form > .bgbh-btn { grid-column: 1 / -1; }
	.bgbh-cd-info .bgbh-form > .bgbh-btn { justify-self: end; width: auto; min-width: 220px; }
}

/* ---------- Cài đặt ---------- */
.bgbh-set { display: grid; gap: var(--bgbh-s4); }
.bgbh-set > * { min-width: 0; }
.bgbh-set .bgbh-set-tabs { margin: 0 calc(-1 * var(--bgbh-gutter)) calc(-1 * var(--bgbh-s2)); }

.bgbh-set-form { display: grid; gap: var(--bgbh-s5); align-content: start; }
.bgbh-set-lead { color: var(--bgbh-muted); font-size: 14px; }
.bgbh-set-grid { grid-template-columns: minmax(0, 1fr); }
.bgbh-set-block { display: grid; gap: var(--bgbh-s2); }
.bgbh-set-block > .bgbh-h2 { margin-top: var(--bgbh-s2); }
.bgbh-set-add { justify-self: start; }
.bgbh-set-foot { display: flex; justify-content: flex-end; padding-top: var(--bgbh-s4); border-top: 1px solid var(--bgbh-line); }
.bgbh .bgbh-set-foot .bgbh-btn--primary { width: 100%; }
.bgbh-set-result {
	display: grid;
	gap: 2px;
	padding: var(--bgbh-s3) var(--bgbh-s4);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-ok-soft);
	color: var(--bgbh-ok);
	font-weight: 500;
	overflow-wrap: anywhere;
}
.bgbh-set-result .bgbh-link { color: var(--bgbh-ok); }

.bgbh-slist { display: grid; gap: var(--bgbh-s3); margin: 0; padding: 0; list-style: none; }
.bgbh-slist:empty { display: none; }
.bgbh-slist-empty {
	padding: var(--bgbh-s4);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
	color: var(--bgbh-muted);
	text-align: center;
}

.bgbh-srow {
	display: grid;
	gap: var(--bgbh-s3);
	padding: var(--bgbh-s3) var(--bgbh-s4) var(--bgbh-s4);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
}
.bgbh-srow.is-dragging { opacity: .6; box-shadow: 0 0 0 2px var(--bgbh-accent); }
.bgbh-srow-head { display: flex; align-items: center; gap: var(--bgbh-s2); min-height: 44px; margin-right: -10px; }
.bgbh-srow-tools { display: flex; flex: none; margin-left: auto; }
.bgbh-srow-default { min-height: 44px; font-weight: 600; }
.bgbh-srow-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--bgbh-s3) var(--bgbh-s4); align-items: start; }
.bgbh-srow-fields > .bgbh-check { align-self: end; }
.bgbh-srow-wide { grid-column: 1 / -1; }
.bgbh-srow-checks { display: flex; flex-wrap: wrap; gap: 0 var(--bgbh-s5); grid-column: 1 / -1; }
.bgbh-srow--system { background-color: var(--bgbh-surface); box-shadow: inset 0 0 0 1px var(--bgbh-line); }
.bgbh-srow-fixed { display: inline-flex; align-items: center; gap: 6px; color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-weight: 600; }
.bgbh-srow-fixed .bgbh-icon { width: 16px; height: 16px; }

.bgbh-grip {
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 36px;
	margin-left: -8px;
	border-radius: var(--bgbh-radius-xs);
	color: var(--bgbh-faint);
	cursor: grab;
}
.bgbh-grip:hover { background-color: var(--bgbh-line); color: var(--bgbh-ink-2); }
.bgbh-grip .bgbh-icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
	.bgbh-grip { display: flex; }
}

.bgbh-sflow { display: grid; gap: var(--bgbh-s3); margin: 0; padding: 0; list-style: none; }
.bgbh-sflow-custom {
	display: grid;
	gap: var(--bgbh-s3);
	padding: var(--bgbh-s4);
	border: 1px dashed var(--bgbh-line-strong);
	border-radius: var(--bgbh-radius-sm);
}
.bgbh-sflow-title { display: grid; gap: 2px; }
.bgbh-inuse-title { font-weight: 700; }
.bgbh-inuse-list { margin: var(--bgbh-s2) 0 0; padding-left: 20px; }

.bgbh-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bgbh-s4); }
.bgbh-logo-box {
	display: grid;
	place-items: center;
	width: 168px;
	height: 84px;
	padding: var(--bgbh-s2);
	border: 1px dashed var(--bgbh-line-strong);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-sunken);
	overflow: hidden;
}
.bgbh-logo-box--square { width: 112px; height: 112px; }
.bgbh-logo-preview { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.bgbh-logo-preview[hidden] { display: none; }
.bgbh-logo-empty { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); }
.bgbh-logo-actions { display: flex; flex-wrap: wrap; gap: var(--bgbh-s2); }
.bgbh-logo-actions label.bgbh-btn { position: relative; }

.bgbh-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bgbh-s3); }
.bgbh-color-field .bgbh-color-picker {
	width: 48px;
	min-height: 48px;
	height: 48px;
	padding: 4px;
	border: 1px solid var(--bgbh-line-strong);
	border-radius: var(--bgbh-radius-sm);
	background-color: var(--bgbh-surface);
	cursor: pointer;
}
.bgbh-color-field .bgbh-color-row input[type="text"] { width: 132px; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.bgbh-color-field .bgbh-color-row input[type="text"]::placeholder { text-transform: none; }
.bgbh-color-preview { display: inline-flex; }
.bgbh .bgbh-color-preview .bgbh-btn { min-height: 40px; pointer-events: none; }
.bgbh-set-colors { display: grid; gap: var(--bgbh-s3); }
.bgbh-set-area { display: grid; gap: var(--bgbh-s3); min-width: 0; margin: 0; padding: var(--bgbh-s3) var(--bgbh-s4) var(--bgbh-s4); border: 0; border-radius: var(--bgbh-radius-sm); background-color: var(--bgbh-sunken); }
.bgbh-set-area + .bgbh-set-area { margin-top: var(--bgbh-s3); }
.bgbh-set-area > legend { float: left; width: 100%; padding: 0; color: var(--bgbh-ink); font-weight: 600; }
.bgbh-set-area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--bgbh-s3) var(--bgbh-s4); clear: both; }
.bgbh-set-area-grid--stack { grid-template-columns: minmax(0, 1fr); }
.bgbh-set-block[hidden] { display: none; }
/* Tạm ẩn mục Mẫu PDF báo giá và khối nội dung mẫu Băng màu. */
.bgbh-set-block:has(> .bgbh-set-tpls),
.bgbh-set-block[data-bgbh-when] { display: none; }
.bgbh-set-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); gap: var(--bgbh-s3); }
.bgbh-set-tpl { display: grid; gap: var(--bgbh-s2); align-content: start; padding: var(--bgbh-s2); border: 1px solid var(--bgbh-line-strong); border-radius: var(--bgbh-radius-sm); cursor: pointer; }
.bgbh-set-tpl img { display: block; width: 100%; height: auto; border: 1px solid var(--bgbh-line); border-radius: 4px; background-color: #fff; }
.bgbh-set-tpl-head { display: flex; align-items: center; gap: var(--bgbh-s2); }
.bgbh-set-tpl-name { font-weight: 600; }
.bgbh-set-tpl-desc { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); line-height: 1.4; }
.bgbh-set-tpl:has(input:checked) { border-color: var(--bgbh-accent); background-color: var(--bgbh-accent-soft); }
.bgbh-set-tpl:has(input:focus-visible) { outline: 2px solid var(--bgbh-accent); outline-offset: 2px; }

.bgbh-policy { display: grid; gap: 6px; min-width: 0; }
.bgbh-policy .wp-editor-wrap { min-width: 0; }
.bgbh-policy .wp-editor-container { border-color: var(--bgbh-line-strong); }
.bgbh-policy textarea.wp-editor-area { display: block; width: 100%; min-height: 260px; padding: 12px 14px; border: 0; background-color: var(--bgbh-surface); color: var(--bgbh-ink); font-size: 16px; line-height: 1.55; tab-size: 4; resize: vertical; }
.bgbh-policy > textarea.wp-editor-area { border: 1px solid var(--bgbh-line-strong); border-radius: var(--bgbh-radius-sm); }

@media (min-width: 640px) {
	.bgbh-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgbh-s4) var(--bgbh-s6); }
	.bgbh-set-grid > .bgbh-set-wide { grid-column: 1 / -1; }
	.bgbh-srow-fields:has(> .bgbh-srow-wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
	.bgbh-srow-fields > .bgbh-srow-wide { grid-column: auto; }
	.bgbh .bgbh-set-foot .bgbh-btn--primary { width: auto; min-width: 200px; }
	.bgbh-policy textarea.wp-editor-area { font-size: 14px; }
}

@media (min-width: 1024px) {
	.bgbh-set { grid-template-columns: 208px minmax(0, 1fr); align-items: start; column-gap: var(--bgbh-s6); }
	.bgbh-set > .bgbh-set-head { grid-column: 1 / -1; }
	.bgbh-set.bgbh-prof { grid-template-columns: minmax(0, 1fr); }
	.bgbh-set .bgbh-set-tabs {
		position: sticky;
		top: var(--bgbh-s6);
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 2px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
	.bgbh .bgbh-set-tabs .bgbh-chip { min-height: 44px; border-radius: var(--bgbh-radius-sm); background-color: transparent; }
	.bgbh a.bgbh-set-tabs .bgbh-chip:hover,
	.bgbh .bgbh-set-tabs .bgbh-chip:hover { background-color: var(--bgbh-line); }
	.bgbh .bgbh-set-tabs .bgbh-chip.is-active { background-color: var(--bgbh-dark); }
	.bgbh-set-form { max-width: 800px; }
}

/* ---------- Nhân viên ---------- */
.bgbh-stf-list { display: grid; gap: var(--bgbh-s3); margin: 0; padding: 0; list-style: none; }
.bgbh-stf {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"avatar main"
		"contact contact"
		"pills pills"
		"actions actions";
	gap: var(--bgbh-s3);
	padding: var(--bgbh-s4);
}
.bgbh-stf .bgbh-avatar { grid-area: avatar; }
.bgbh-stf-main { grid-area: main; display: grid; align-content: center; min-width: 0; line-height: 1.35; }
.bgbh-stf-name { font-size: var(--bgbh-fs-md); font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bgbh-stf-self { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); font-weight: 500; }
.bgbh-stf-user { color: var(--bgbh-muted); font-size: var(--bgbh-fs-sm); overflow-wrap: anywhere; }
.bgbh-stf-contact { grid-area: contact; display: grid; gap: 4px; min-width: 0; }
.bgbh-stf-line { display: flex; align-items: center; gap: 8px; color: var(--bgbh-ink-2); font-size: 14px; }
.bgbh-stf-line .bgbh-icon { width: 16px; height: 16px; color: var(--bgbh-faint); }
.bgbh-stf-line span { min-width: 0; overflow-wrap: anywhere; }
.bgbh-stf-pills { grid-area: pills; display: flex; flex-wrap: wrap; gap: var(--bgbh-s2); }
.bgbh-stf-actions { grid-area: actions; display: flex; gap: var(--bgbh-s2); padding-top: var(--bgbh-s3); border-top: 1px solid var(--bgbh-line); }
.bgbh .bgbh-btn--warn { color: var(--bgbh-danger); }
.bgbh-stf.is-locked .bgbh-avatar { background-color: var(--bgbh-faint); }
.bgbh-stf.is-locked .bgbh-stf-name { color: var(--bgbh-muted); }

@media (min-width: 1024px) {
	.bgbh-stf {
		grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.5fr) auto auto;
		grid-template-areas: "avatar main contact pills actions";
		align-items: center;
		gap: var(--bgbh-s5);
		padding: var(--bgbh-s4) var(--bgbh-s6);
	}
	.bgbh-stf-actions { padding-top: 0; border-top: 0; }
}

/* Thuộc tính hidden luôn ẩn, kể cả khi thành phần đặt display riêng. */
.bgbh [hidden] { display: none; }