/*
 * Lớp giao diện của wicustomer — nạp SAU style.css và đè lên nó.
 *
 * Vì sao là file riêng chứ không sửa thẳng style.css: style.css là bản copy
 * nguyên văn từ widashboard (xem CLAUDE.md), sửa nó thì hai project lệch nhau và
 * lần đồng bộ sau phải gỡ tay từng dòng. Toàn bộ thay đổi hình thức của
 * wicustomer gom vào đây, nên style.css vẫn chép qua chép lại được.
 *
 * Vì sao đổi hình thức: hai project khác người đọc. widashboard là bảng đo cho
 * người trực hệ thống — nền than chì, chữ monospace, đọc ở đuôi mắt trên màn
 * treo tường. wicustomer là công cụ làm việc của sale và chăm sóc khách hàng:
 * mở giữa ban ngày cạnh cửa sổ, đọc kỹ từng dòng, thường phải chụp màn hình gửi
 * cho nhau. Nền sáng, chữ sans-serif, chữ to hơn phục vụ đúng cảnh đó.
 *
 * Nền tối vẫn giữ được qua nút chuyển ở header (`html[data-theme='toi']`), vì
 * ai đã quen widashboard mở hai tab cạnh nhau thì chênh lệch sáng/tối rất mỏi mắt.
 *
 * Bảng màu chuỗi (--chuoi-1..8) không tự chọn: nó là bộ đã qua kiểm tra mù màu
 * (ΔE giữa hai màu cạnh nhau ≥ 8 trên cả ba dạng mù màu, và ≥ 15 với mắt thường).
 * Đừng thêm màu thứ 9 — quá 8 chuỗi thì gộp phần đuôi thành "Khác", đó là lý do
 * `bieudo-kh.js` có hàm `gopDuoi`.
 */

:root {
	color-scheme: light;

	/* ── nền và bề mặt ── */
	--nen: #f2f4f7;
	--nen-sau: #e9ecf1;
	--be-mat: #ffffff;
	--be-mat-cao: #f7f8fa;
	--vien: #e2e5ea;
	--vien-sang: #c9ced7;

	/* ── chữ ── */
	--chu: #10151d;
	--chu-mo: #545e6b;
	--chu-rat-mo: #838d9b;

	/* ── trạng thái ──
	   Đậm hơn bản nền tối: cùng một mã màu trên nền trắng tụt xuống dưới ngưỡng
	   tương phản 3:1 và chữ đỏ/vàng thành mờ nhoè. */
	--khoe: #0a8f57;
	--canh-bao: #a86a00;
	--loi: #cf3a3a;
	--tran: #6b4de0;
	--san: #2a78d6;

	/* Brand WiGroup, chỉ dùng cho mảng lớn (nút, thanh tab) — không dùng cho chữ. */
	--hieu: #00c176;
	--hieu-dam: #00875a;

	--chart: #2a78d6;
	--chart-loi: #cf3a3a;

	/* ── bảng màu chuỗi, dùng cho mọi biểu đồ nhiều chuỗi ── */
	--chuoi-1: #2a78d6;
	--chuoi-2: #eb6834;
	--chuoi-3: #1baf7a;
	--chuoi-4: #eda100;
	--chuoi-5: #e87ba4;
	--chuoi-6: #008300;
	--chuoi-7: #4a3aa7;
	--chuoi-8: #e34948;
	--chuoi-khac: #8b95a3;

	/* ── thang một màu, cho bảng nhiệt (đậm dần = nhiều hơn) ── */
	--thang-0: #f4f6f9;
	--thang-1: #cde2fb;
	--thang-2: #9ec5f4;
	--thang-3: #6da7ec;
	--thang-4: #3987e5;
	--thang-5: #256abf;
	--thang-6: #184f95;
	/* Chữ trên ô nhiệt: ba bậc đậm cuối cần chữ trắng mới đọc được. */
	--thang-chu-nhat: #10151d;
	--thang-chu-dam: #ffffff;

	--luoi-bd: #e7eaef;
	--truc-bd: #c9ced7;

	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--chu-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--r: 8px;
	--r-nho: 5px;
	--kc: 18px;
	--bong: 0 1px 2px rgba(16, 21, 29, 0.05), 0 1px 3px rgba(16, 21, 29, 0.04);
	--bong-noi: 0 8px 24px rgba(16, 21, 29, 0.12), 0 2px 6px rgba(16, 21, 29, 0.06);
}

html[data-theme='toi'] {
	color-scheme: dark;

	--nen: #14110f;
	--nen-sau: #0d0b0a;
	--be-mat: #1c1815;
	--be-mat-cao: #241f1b;
	--vien: #302923;
	--vien-sang: #453b33;

	--chu: #f0ebe3;
	--chu-mo: #a79d92;
	--chu-rat-mo: #7d746b;

	--khoe: #00c176;
	--canh-bao: #ffb020;
	--loi: #ff6567;
	--tran: #c77dff;
	--san: #4da3ff;

	--hieu: #00c176;
	--hieu-dam: #00c176;

	--chart: #3987e5;
	--chart-loi: #e66767;

	/* Cùng tám sắc, đổi bậc cho nền tối — không phải đảo màu tự động. */
	--chuoi-1: #3987e5;
	--chuoi-2: #d95926;
	--chuoi-3: #199e70;
	--chuoi-4: #c98500;
	--chuoi-5: #d55181;
	--chuoi-6: #22a022;
	--chuoi-7: #9085e9;
	--chuoi-8: #e66767;
	--chuoi-khac: #7d746b;

	--thang-0: #1f1b18;
	--thang-1: #123252;
	--thang-2: #17436e;
	--thang-3: #1c5cab;
	--thang-4: #256abf;
	--thang-5: #3987e5;
	--thang-6: #6da7ec;
	--thang-chu-nhat: #c3c2b7;
	--thang-chu-dam: #08131f;

	--luoi-bd: #2b2521;
	--truc-bd: #453b33;

	--bong: none;
	--bong-noi: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* ══════════════ chữ ══════════════ */

body {
	font-family: var(--chu-font);
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: 0;
}

/* Những chỗ style.css ghi thẳng var(--mono); chữ thường phải là sans, còn số vẫn
   thẳng cột nhờ tabular-nums bên dưới. */
.chon-khach input[type='search'],
.khach-goi-y-dong {
	font-family: var(--chu-font);
}

/* Số phải thẳng cột ở mọi nơi có thể so sánh theo chiều dọc. */
table,
.kpi-so,
.pheu-so,
.boi-canh-so,
.hang-so b,
.boi-canh-dong b {
	font-variant-numeric: tabular-nums;
}

/* Số lớn đứng một mình thì tabular-nums làm chữ rời rạc — dùng chữ số tự nhiên. */
.kpi-so,
.so-lon {
	font-variant-numeric: normal;
	letter-spacing: -0.02em;
}

/* ══════════════ khung ══════════════ */

.cong {
	background:
		radial-gradient(ellipse 90% 60% at 50% -10%, rgba(0, 193, 118, 0.12), transparent 70%),
		var(--nen);
}

.cong-hop {
	max-width: 380px;
	background: var(--be-mat);
	border: 1px solid var(--vien);
	border-radius: 14px;
	padding: 28px;
	box-shadow: var(--bong-noi);
}

.cong-ten {
	font-size: 24px;
}

.o-nhap {
	padding: 11px 13px;
	border-radius: var(--r-nho);
}

.nut {
	background: var(--hieu-dam);
	color: #ffffff;
	border-radius: var(--r-nho);
	padding: 11px 13px;
	letter-spacing: 0.02em;
}

.dau {
	background: color-mix(in srgb, var(--be-mat) 88%, transparent);
	padding: 11px var(--kc);
	gap: 14px;
	box-shadow: var(--bong);
}

.dau-ten {
	font-size: 15px;
	letter-spacing: -0.01em;
}

.nut-nho {
	border-radius: var(--r-nho);
	padding: 6px 10px;
}

.chon-khoang {
	border-radius: var(--r-nho);
	background: var(--be-mat-cao);
}

.chon-khoang button {
	padding: 6px 11px;
	font-weight: 500;
}

.chon-khoang button[aria-pressed='true'] {
	background: var(--hieu-dam);
	color: #ffffff;
}

html[data-theme='toi'] .chon-khoang button[aria-pressed='true'] {
	background: var(--be-mat-cao);
	color: var(--chu);
	box-shadow: inset 0 -2px 0 var(--hieu);
}

/* Chọn sản phẩm nằm trong nội dung, to hơn bộ chọn khoảng ở header: nó đổi cả
   trang chứ không chỉ đổi trục thời gian, nên phải thấy trước khi đọc số. */
main .chon-khoang {
	border: 1px solid var(--vien);
	background: var(--be-mat);
	box-shadow: var(--bong);
	width: fit-content;
}

main .chon-khoang button {
	padding: 8px 16px;
	font-size: 14px;
}

/* `top` phải đúng bằng chiều cao THẬT của header, không phải một con số đoán:
   header cao lên khi chip dài ra hoặc khi cửa sổ hẹp làm nó bẻ dòng, và lúc đó
   hàng tab dính vào chỗ cũ rồi bị header phủ lên mất nửa trên. `--cao-dau` do
   app.js đo và cập nhật; 47px chỉ là giá trị dự phòng cho nhịp vẽ đầu tiên. */
.tab-hang {
	gap: 4px;
	padding: 6px var(--kc) 0;
	background: var(--nen);
	top: var(--cao-dau, 47px);
}

.tab {
	padding: 9px 15px;
	border-radius: var(--r-nho) var(--r-nho) 0 0;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--chu-mo);
}

.tab:hover {
	color: var(--chu);
	background: var(--be-mat-cao);
}

.tab[aria-selected='true'] {
	background: var(--be-mat);
	border-bottom-color: var(--hieu-dam);
	color: var(--chu);
}

main {
	padding: var(--kc) var(--kc) 56px;
	max-width: 1560px;
}

.tieu-de-muc {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--chu-mo);
	font-weight: 600;
	margin: 26px 0 12px;
	border-bottom: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Vạch kéo dài hết dòng thay cho gạch chân: mắt bám được mép mục mà chữ vẫn nổi. */
.tieu-de-muc::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--vien);
}

.the {
	border-radius: var(--r);
	padding: 14px 15px;
	box-shadow: var(--bong);
}

.the-ten {
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--chu-mo);
}

.the-ghi-chu {
	font-size: 12px;
}

.luoi {
	gap: 14px;
}

/* Một cột hẹp cho hình tròn, phần còn lại cho bảng chữ.
   `luoi-2` chia đôi đều nhau, mà bánh vòng không cần nửa màn hình còn bảng "nên
   làm gì" thì bị cắt mất cột cuối — đúng cột chứa việc phải làm. */
.luoi-tach {
	display: grid;
	grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
	gap: 14px;
	margin-bottom: var(--kc);
}

@media (max-width: 860px) {
	.luoi-tach {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ══════════════ hàng chỉ số ══════════════ */

.kpi-hang {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: var(--kc);
}

.kpi {
	background: var(--be-mat);
	border: 1px solid var(--vien);
	border-left: 3px solid var(--kpi-mau, var(--chuoi-1));
	border-radius: var(--r);
	padding: 12px 14px;
	box-shadow: var(--bong);
	min-width: 0;
}

.kpi-nhan {
	font-size: 12px;
	color: var(--chu-mo);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.kpi-so {
	font-size: 27px;
	font-weight: 650;
	line-height: 1.15;
}

.kpi-so-chu {
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.kpi-phu {
	font-size: 12px;
	color: var(--chu-rat-mo);
	margin-top: 3px;
}

.kpi .spark {
	margin-top: 8px;
	height: 26px;
}

/* ══════════════ biểu đồ ══════════════ */

.bd-khung {
	position: relative;
}

.bd-dau {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.bieu-do {
	overflow: visible;
	touch-action: pan-y;
}

/* Cho biểu đồ giữ tỉ lệ thật: preserveAspectRatio của bieudo.js là `none` nên
   nét bị kéo méo khi thẻ rộng. Biểu đồ trong file bieudo-kh.js không kéo méo. */
.bd-giu-ti-le {
	display: block;
	width: 100%;
	height: auto;
}

.bd-luoi {
	stroke: var(--luoi-bd);
	stroke-width: 1;
}

.bd-truc {
	stroke: var(--truc-bd);
	stroke-width: 1;
}

.bd-nhan {
	fill: var(--chu-rat-mo);
	font-size: 11px;
	font-family: var(--chu-font);
}

.bd-nhan-dam {
	fill: var(--chu-mo);
	font-size: 11px;
	font-weight: 600;
	font-family: var(--chu-font);
}

.bd-vung-cham {
	fill: transparent;
	cursor: crosshair;
}

.bd-moc {
	stroke: var(--chu-rat-mo);
	stroke-width: 1;
	pointer-events: none;
}

/* Chú giải: bắt buộc có khi từ 2 chuỗi trở lên, vì màu một mình không được phép
   là kênh duy nhất phân biệt chuỗi. */
.chu-giai {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--chu-mo);
}

.chu-giai-muc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.chu-giai-o {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	flex: 0 0 auto;
	background: var(--o-mau, var(--chuoi-1));
}

.chu-giai-muc.la-duong .chu-giai-o {
	height: 3px;
	border-radius: 2px;
	width: 14px;
}

.chu-giai-muc b {
	font-weight: 600;
	color: var(--chu);
	font-variant-numeric: tabular-nums;
}

/* Hộp chú thích nổi theo con trỏ. Nó chỉ bổ sung, không phải cách duy nhất đọc
   số: mọi biểu đồ ở đây đều có bảng số liệu kèm theo. */
.bd-goi-y {
	position: fixed;
	z-index: 60;
	pointer-events: none;
	background: var(--be-mat);
	border: 1px solid var(--vien-sang);
	border-radius: var(--r-nho);
	box-shadow: var(--bong-noi);
	padding: 8px 10px;
	font-size: 12px;
	color: var(--chu);
	max-width: 280px;
	line-height: 1.45;
}

.bd-goi-y-dau {
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--chu);
}

.bd-goi-y-dong {
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.bd-goi-y-dong i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	flex: 0 0 auto;
	background: var(--o-mau, var(--chuoi-1));
}

.bd-goi-y-dong span {
	color: var(--chu-mo);
	flex: 1;
}

.bd-goi-y-dong b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ══════════════ thanh ngang xếp hạng ══════════════ */

.the-thanh-ngang {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.tn-dong {
	min-width: 0;
}

.tn-dau {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.tn-ten {
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.tn-so {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex: 0 0 auto;
}

.tn-phu {
	font-size: 12px;
	color: var(--chu-rat-mo);
	margin-top: 3px;
}

/* ══════════════ bảng nhiệt ══════════════ */

.nhiet {
	border-collapse: separate;
	border-spacing: 2px;
}

.nhiet th {
	border-bottom: 0;
	padding: 3px 6px;
	font-size: 11px;
	text-align: center;
}

.nhiet th.dau-dong {
	text-align: right;
}

.nhiet td {
	border-bottom: 0;
	padding: 7px 6px;
	text-align: center;
	border-radius: var(--r-nho);
	background: var(--o-nen, var(--thang-0));
	color: var(--o-chu, var(--thang-chu-nhat));
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

.nhiet td.dau-dong {
	background: transparent;
	color: var(--chu-mo);
	text-align: right;
	font-size: 12px;
	white-space: nowrap;
}

.nhiet td.o-trong {
	color: var(--chu-rat-mo);
}

/* Đường chéo của ma trận chuyển = khách giữ nguyên nhóm. Viền chứ không đổi màu:
   màu đã dùng để chở số lượng rồi. */
.nhiet td.duong-cheo {
	box-shadow: inset 0 0 0 2px var(--vien-sang);
}

.nhiet-thang {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--chu-rat-mo);
}

.nhiet-thang i {
	display: block;
	width: 22px;
	height: 12px;
	border-radius: 2px;
}

/* ══════════════ nhãn nhóm khách ══════════════ */

.nhan-nhom {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 1px 8px 1px 6px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	background: color-mix(in srgb, var(--nhom-mau) 14%, transparent);
	color: var(--nhom-chu, var(--chu));
	border: 1px solid color-mix(in srgb, var(--nhom-mau) 40%, transparent);
}

.nhan-nhom::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nhom-mau);
	flex: 0 0 auto;
}

/* ══════════════ phễu ══════════════ */

.pheu {
	gap: 14px;
}

.pheu-bac {
	border-left: 0;
	padding-left: 0;
}

.pheu-so {
	font-size: 25px;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.pheu-nhan {
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 600;
	color: var(--chu);
}

.pheu-mo {
	font-size: 12px;
}

.pheu-dinh {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

/* Tỉ lệ giữ lại từ bậc trên — con số sale hỏi ngay sau khi nhìn phễu. */
.pheu-ti-le {
	font-size: 12px;
	color: var(--chu-mo);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.thanh {
	height: 9px;
	border-radius: 999px;
	background: var(--nen-sau);
	margin-top: 5px;
}

.thanh i {
	background: var(--thanh-mau, var(--chart));
	opacity: 1;
	border-radius: 999px;
}

table .thanh {
	height: 8px;
	margin-top: 0;
}

/* ══════════════ bảng ══════════════ */

th {
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 600;
	color: var(--chu-rat-mo);
	padding: 7px 10px 7px 0;
	position: sticky;
	top: 0;
	background: var(--be-mat);
	z-index: 1;
}

td {
	padding: 7px 10px 7px 0;
	border-bottom: 1px solid var(--vien);
	vertical-align: middle;
}

tbody tr:hover td {
	background: var(--be-mat-cao);
}

/* Bảng dài phải cuộn trong thẻ của nó, không đẩy cả trang trượt ngang. */
.bang-cuon {
	max-height: 520px;
	overflow: auto;
	margin: 0 -3px;
	padding: 0 3px;
}

.bam-duoc {
	text-decoration-color: var(--vien-sang);
}

td.bam-duoc:hover {
	color: var(--san);
	text-decoration-color: var(--san);
}

/* ══════════════ hộp chú thích và cảnh báo ══════════════ */

.canh-bao-hop {
	border-radius: var(--r);
	background: color-mix(in srgb, var(--canh-bao) 8%, var(--be-mat));
	border-color: color-mix(in srgb, var(--canh-bao) 45%, transparent);
	padding: 11px 13px;
	font-size: 13px;
	display: flex;
	gap: 9px;
}

.canh-bao-hop::before {
	content: '!';
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--canh-bao);
	color: var(--be-mat);
	font-size: 12px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.ghi-chu-muc {
	border-left: 3px solid var(--vien-sang);
	background: var(--be-mat-cao);
	border-radius: 0 var(--r) var(--r) 0;
	padding: 10px 13px;
	font-size: 13px;
	color: var(--chu-mo);
}

.ghi-chu-muc b {
	color: var(--chu);
	font-weight: 600;
}

/* Câu chặn cách đọc sai, in ngay dưới panel. Cỡ nhỏ nhưng KHÔNG mờ tới mức bỏ
   qua được — cả điểm của nó là có người đọc. */
.rat-mo {
	color: var(--chu-mo);
}

.the > .rat-mo {
	font-size: 12px;
	line-height: 1.5;
}

.trong {
	font-size: 13px;
	padding: 16px 0;
	text-align: center;
	color: var(--chu-rat-mo);
	background: var(--be-mat-cao);
	border-radius: var(--r-nho);
}

.dang-tai {
	font-size: 12px;
	color: var(--chu-mo);
}

.chip {
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	background: var(--be-mat-cao);
	/* Không cho chip tự bẻ dòng: header hẹp lại thì nó co thành một cột chữ cao
	   bốn dòng và đẩy mọi thứ khác xuống. */
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ══════════════ chọn khách ở header ══════════════ */

.chon-khach input[type='search'] {
	padding: 6px 11px;
	border-radius: var(--r-nho);
	font-size: 13px;
}

.khach-goi-y {
	border-radius: var(--r-nho);
	box-shadow: var(--bong-noi);
	background: var(--be-mat);
}

.khach-goi-y-dong {
	padding: 9px 12px;
	font-size: 13px;
}

.khach-goi-y-dong:hover {
	background: var(--be-mat-cao);
}

.khach-goi-y-dong b {
	font-weight: 600;
}

.khach-chip {
	border-radius: 999px;
	background: color-mix(in srgb, var(--san) 12%, var(--be-mat));
	padding: 4px 6px 4px 12px;
	font-size: 13px;
}

.khach-chip b {
	font-weight: 600;
}

/* ══════════════ bối cảnh khách ══════════════ */

.boi-canh {
	border-radius: var(--r);
	border-color: color-mix(in srgb, var(--san) 40%, transparent);
	background: linear-gradient(180deg, color-mix(in srgb, var(--san) 7%, var(--be-mat)), var(--be-mat));
	padding: 14px 16px;
	box-shadow: var(--bong);
}

.boi-canh-ten {
	font-size: 18px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.boi-canh-phu {
	font-size: 13px;
}

.boi-canh-goi {
	font-size: 13px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--be-mat-cao);
}

.boi-canh-goi.xanh {
	background: color-mix(in srgb, var(--khoe) 14%, transparent);
	color: var(--khoe);
}

.boi-canh-o {
	border-left: 0;
	padding: 11px 13px;
	background: var(--be-mat);
	border: 1px solid var(--vien);
	border-radius: var(--r-nho);
}

.boi-canh-sp {
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 600;
	color: var(--chu-mo);
}

.boi-canh-so {
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.boi-canh-nhan {
	font-size: 12px;
}

.boi-canh-dong {
	font-size: 12px;
	padding: 2px 0;
	border-top: 1px solid var(--vien);
}

.boi-canh-dong:nth-of-type(1) {
	border-top: 0;
}

.boi-canh-dong b {
	font-weight: 600;
}

/* ══════════════ chọn khoảng ngày tuỳ chỉnh ══════════════ */

/* Bộ chọn khoảng ở header phải cho hộp ngày tràn ra ngoài. `overflow: hidden`
   (kế thừa từ style.css) là để bo góc cả cụm nút — thay bằng bo góc từng nút đầu
   và cuối, giữ nguyên hình dáng mà không cắt mất popover. */
#chon-khoang {
	position: relative;
	overflow: visible;
}

#chon-khoang > button:first-child {
	border-radius: var(--r-nho) 0 0 var(--r-nho);
}

#chon-khoang > button:last-of-type {
	border-radius: 0 var(--r-nho) var(--r-nho) 0;
}

.nut-tuy-chinh {
	border-right: 1px solid var(--vien) !important;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hop-ngay {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	width: max-content;
	max-width: min(360px, calc(100vw - 24px));
	background: var(--be-mat);
	border: 1px solid var(--vien-sang);
	border-radius: var(--r);
	box-shadow: var(--bong-noi);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	text-align: left;
}

.hop-ngay-hang {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.hop-ngay-hang label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 12px;
	color: var(--chu-mo);
	flex: 1 1 140px;
	min-width: 0;
}

.hop-ngay-hang input {
	padding: 7px 9px;
	background: var(--be-mat-cao);
	border: 1px solid var(--vien);
	border-radius: var(--r-nho);
	color: var(--chu);
	font-family: var(--chu-font);
	font-size: 13px;
	min-width: 0;
}

.hop-ngay-hang input:focus {
	border-color: var(--san);
	outline: none;
}

.hop-ngay-nhanh {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.hop-ngay-nhanh button {
	padding: 4px 9px;
	background: var(--be-mat-cao);
	border: 1px solid var(--vien);
	border-radius: 999px;
	color: var(--chu-mo);
	font-family: var(--chu-font);
	font-size: 12px;
	cursor: pointer;
}

.hop-ngay-nhanh button:hover {
	color: var(--chu);
	border-color: var(--vien-sang);
}

.hop-ngay-loi {
	color: var(--loi);
	font-size: 12px;
	min-height: 0;
}

.hop-ngay-loi:empty {
	display: none;
}

.hop-ngay-cuoi {
	display: flex;
	gap: 8px;
}

.hop-ngay-cuoi button {
	flex: 1 1 auto;
	padding: 8px 12px;
	border-radius: var(--r-nho);
	font-family: var(--chu-font);
	font-size: 13px;
	cursor: pointer;
	border: 1px solid transparent;
}

.hop-ngay-cuoi .chinh {
	background: var(--hieu-dam);
	color: #ffffff;
	font-weight: 600;
}

.hop-ngay-cuoi .chinh:hover {
	filter: brightness(1.08);
}

.hop-ngay-cuoi .nhat {
	background: transparent;
	border-color: var(--vien-sang);
	color: var(--chu-mo);
	flex: 0 0 auto;
}

.hop-ngay-mo {
	font-size: 11px;
	line-height: 1.45;
	color: var(--chu-rat-mo);
}

/* ══════════════ nút chuyển sáng/tối ══════════════ */

.nut-nen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 28px;
	padding: 0;
	font-size: 14px;
	line-height: 1;
}

/* ══════════════ màn hẹp ══════════════ */

/* Chip phạm vi là thứ đầu tiên bị hy sinh khi header chật: bỏ nó đi thì ô chọn
   khách và bộ chọn khoảng vẫn nằm một dòng, mà thông tin trong chip đã được lặp
   lại ở hộp cảnh báo ngay đầu tab Tổng quan. */
@media (max-width: 1120px) {
	#chip-pham-vi {
		display: none;
	}
}

@media (max-width: 900px) {
	.dau {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.dau-phai {
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
	}

	.tab-hang {
		top: 0;
		position: static;
	}

	.dau {
		position: static;
	}

	.chon-khach input[type='search'],
	.chon-khach input[type='search']:focus {
		width: 100%;
	}

	.khach-goi-y {
		left: 0;
		right: auto;
		min-width: min(340px, 90vw);
	}
}

@media print {
	.dau-phai,
	.tab-hang {
		display: none;
	}

	.the,
	.kpi {
		break-inside: avoid;
	}
}