/*
 * Ngôn ngữ thị giác lấy từ bảng giá chứng khoán Việt Nam — đúng thế giới của
 * WiGroup: nền than chì ấm như bảng điện, và bộ màu trạng thái theo đúng nghĩa
 * sàn giao dịch (xanh khoẻ, vàng đứng, đỏ lỗi, tím "kịch trần" cho quá tải).
 *
 * Toàn bộ chữ dùng monospace, kể cả tiêu đề. Đây là bảng đo cho người vận hành:
 * số phải thẳng cột và đọc được ở đuôi mắt. Thứ bậc tạo bằng cỡ chữ, độ đậm và
 * letter-spacing thay vì đổi font.
 */

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

	--chu: #f0ebe3;
	--chu-mo: #9a9086;
	--chu-rat-mo: #6b625a;

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

	--chart: #00c176;
	--chart-loi: #ff4d4f;

	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--r: 3px;
	--kc: 16px;
}

* {
	box-sizing: border-box;
}

/*
 * `hidden` phải thắng mọi `display` khai báo trong file này.
 *
 * Thuộc tính hidden của HTML chỉ là `display: none` trong stylesheet mặc định
 * của trình duyệt, mà stylesheet tác giả luôn thắng stylesheet mặc định. Nên
 * `.cong { display: grid }` bên dưới làm màn đăng nhập không bao giờ ẩn được:
 * đăng nhập thành công, dashboard vẽ ra phía dưới, nhưng người dùng vẫn nhìn
 * thấy ô mật khẩu và tưởng là không vào được.
 */
[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	background: var(--nen);
	color: var(--chu);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

button,
input {
	font-family: inherit;
	font-size: inherit;
}

:focus-visible {
	outline: 2px solid var(--san);
	outline-offset: 2px;
}

/* ══════════════ đăng nhập ══════════════ */

.cong {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--kc);
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 193, 118, 0.06), transparent 70%),
		var(--nen);
}

.cong-hop {
	width: 100%;
	max-width: 340px;
}

.cong-nhan {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--chu-rat-mo);
	margin-bottom: 6px;
}

.cong-ten {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
}

.cong-phu {
	color: var(--chu-mo);
	margin: 0 0 26px;
	font-size: 12px;
}

.o-nhap {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 8px;
	background: var(--nen-sau);
	border: 1px solid var(--vien);
	border-radius: var(--r);
	color: var(--chu);
}

.o-nhap:focus {
	border-color: var(--vien-sang);
	outline: none;
}

.nut {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-top: 8px;
	background: var(--khoe);
	color: #06231a;
	border: 0;
	border-radius: var(--r);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.nut:hover {
	filter: brightness(1.1);
}

.nut:disabled {
	opacity: 0.5;
	cursor: default;
}

.loi-nhap {
	color: var(--loi);
	font-size: 12px;
	min-height: 18px;
	margin-top: 8px;
}

/* ══════════════ khung chính ══════════════ */

.dau {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--kc);
	padding: 10px var(--kc);
	background: rgba(20, 17, 15, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--vien);
}

.dau-ten {
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.dau-ten span {
	color: var(--chu-rat-mo);
	font-weight: 400;
}

.dau-phai {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--chu-mo);
	font-size: 12px;
}

.nut-nho {
	padding: 5px 9px;
	background: var(--be-mat);
	border: 1px solid var(--vien);
	border-radius: var(--r);
	color: var(--chu-mo);
	cursor: pointer;
}

.nut-nho:hover {
	color: var(--chu);
	border-color: var(--vien-sang);
}

.chon-khoang {
	display: flex;
	border: 1px solid var(--vien);
	border-radius: var(--r);
	overflow: hidden;
}

.chon-khoang button {
	padding: 5px 9px;
	background: transparent;
	border: 0;
	color: var(--chu-rat-mo);
	cursor: pointer;
}

.chon-khoang button[aria-pressed='true'] {
	background: var(--be-mat-cao);
	color: var(--chu);
}

.tab-hang {
	display: flex;
	gap: 2px;
	padding: 0 var(--kc);
	background: var(--nen);
	border-bottom: 1px solid var(--vien);
	overflow-x: auto;
	position: sticky;
	top: 45px;
	z-index: 19;
}

.tab {
	padding: 9px 13px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--chu-rat-mo);
	cursor: pointer;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.tab:hover {
	color: var(--chu-mo);
}

.tab[aria-selected='true'] {
	color: var(--chu);
	border-bottom-color: var(--khoe);
}

main {
	padding: var(--kc);
	max-width: 1500px;
	margin: 0 auto;
}

/* ══════════════ đường ống (signature) ══════════════ */

.ong {
	background: linear-gradient(180deg, var(--be-mat), var(--nen-sau));
	border: 1px solid var(--vien);
	border-radius: var(--r);
	padding: 14px;
	margin-bottom: var(--kc);
}

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

.ong-tieu-de {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chu-mo);
}

.ong-giai-thich {
	font-size: 11px;
	color: var(--chu-rat-mo);
}

.ong-hang {
	display: grid;
	grid-template-columns: 92px repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: 0;
	padding: 5px 0;
	border-top: 1px solid var(--vien);
}

.ong-hang:first-of-type {
	border-top: 0;
}

.ong-ten {
	font-weight: 700;
	font-size: 12px;
}

.ong-chang {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.ong-o {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 4px 7px;
	background: var(--be-mat-cao);
	border: 1px solid var(--vien);
	border-radius: var(--r);
	min-width: 0;
	flex: 0 0 auto;
}

.ong-o b {
	font-size: 12px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ong-o i {
	font-size: 9px;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--chu-rat-mo);
}

.ong-noi {
	flex: 1 1 auto;
	height: 1px;
	min-width: 12px;
	background: var(--vien-sang);
	position: relative;
	overflow: hidden;
}

/* Hạt sáng chạy dọc đường nối: chỉ khi chặng đó đang khoẻ, nên nhìn là biết
   dòng chảy còn sống mà không cần đọc số. */
.ong-noi[data-chay='1']::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--khoe), transparent);
	animation: chay 2.2s linear infinite;
}

@keyframes chay {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ong-noi[data-chay='1']::after {
		animation: none;
		opacity: 0.35;
	}
}

.muc-khoe b {
	color: var(--khoe);
}
.muc-canh-bao b {
	color: var(--canh-bao);
}
.muc-nghiem-trong b {
	color: var(--tran);
}
.muc-khong-ro b {
	color: var(--chu-rat-mo);
}

.muc-canh-bao,
.muc-nghiem-trong {
	border-color: currentColor;
}

/* ══════════════ thẻ và lưới ══════════════ */

.luoi {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin-bottom: var(--kc);
}

.luoi-2 {
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

.the {
	background: var(--be-mat);
	border: 1px solid var(--vien);
	border-radius: var(--r);
	padding: 12px;
	min-width: 0;
}

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

.the-ten {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--chu-mo);
}

.the-ghi-chu {
	margin-left: auto;
	font-size: 11px;
	color: var(--chu-rat-mo);
}

.so-lon {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.so-phu {
	color: var(--chu-mo);
	font-size: 11px;
	margin-top: 2px;
}

.the-sp {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--be-mat);
	border: 1px solid var(--vien);
	border-radius: var(--r);
	padding: 12px;
	cursor: pointer;
	color: inherit;
}

.the-sp:hover {
	border-color: var(--vien-sang);
	background: var(--be-mat-cao);
}

.the-sp-dau {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.the-sp-ten {
	font-weight: 700;
	font-size: 14px;
}

.hang-so {
	display: flex;
	gap: 14px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.hang-so div {
	min-width: 0;
}

.hang-so span {
	display: block;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--chu-rat-mo);
}

.hang-so b {
	font-variant-numeric: tabular-nums;
	font-size: 14px;
}

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

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th {
	text-align: left;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chu-rat-mo);
	font-weight: 400;
	padding: 4px 6px 4px 0;
	border-bottom: 1px solid var(--vien);
}

td {
	padding: 4px 6px 4px 0;
	border-bottom: 1px solid rgba(48, 41, 35, 0.5);
	vertical-align: top;
}

tr:last-child td {
	border-bottom: 0;
}

.phai {
	text-align: right;
}

.cat {
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mo {
	color: var(--chu-mo);
}

.rat-mo {
	color: var(--chu-rat-mo);
}

.do {
	color: var(--loi);
}
.xanh {
	color: var(--khoe);
}
.vang {
	color: var(--canh-bao);
}
.tim {
	color: var(--tran);
}

/* ══════════════ thanh tỉ lệ trong bảng ══════════════ */

.thanh {
	position: relative;
	height: 14px;
	background: var(--nen-sau);
	border-radius: 2px;
	overflow: hidden;
	min-width: 40px;
}

.thanh i {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--chart);
	opacity: 0.55;
}

.thanh i.la-loi {
	background: var(--chart-loi);
	opacity: 0.8;
}

/* ══════════════ trạng thái ══════════════ */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 7px;
	border: 1px solid var(--vien);
	border-radius: 999px;
	font-size: 11px;
	color: var(--chu-mo);
}

.den {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--chu-rat-mo);
	flex: 0 0 auto;
}

.den-khoe {
	background: var(--khoe);
	box-shadow: 0 0 6px rgba(0, 193, 118, 0.6);
}
.den-canh-bao {
	background: var(--canh-bao);
}
.den-loi {
	background: var(--loi);
	box-shadow: 0 0 6px rgba(255, 77, 79, 0.5);
}

.trong {
	color: var(--chu-rat-mo);
	padding: 10px 0;
	font-size: 12px;
}

.canh-bao-hop {
	border: 1px solid var(--canh-bao);
	border-radius: var(--r);
	background: rgba(255, 176, 32, 0.07);
	padding: 9px 11px;
	margin-bottom: var(--kc);
	font-size: 12px;
}

.canh-bao-hop b {
	color: var(--canh-bao);
}

.dang-tai {
	color: var(--chu-rat-mo);
	padding: 40px 0;
	text-align: center;
	letter-spacing: 0.1em;
	font-size: 11px;
	text-transform: uppercase;
}

.stack {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 11px;
	color: var(--chu-mo);
	background: var(--nen-sau);
	border-radius: 2px;
	padding: 7px 8px;
	margin: 5px 0 0;
	max-height: 120px;
	overflow: auto;
}

.tieu-de-muc {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chu-mo);
	margin: 22px 0 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--vien);
}

.tieu-de-muc:first-child {
	margin-top: 0;
}

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

.bieu-do {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.spark {
	display: block;
	width: 100%;
	height: 30px;
}

@media (max-width: 720px) {
	.ong-hang {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.ong-noi {
		display: none;
	}

	.ong-chang {
		flex-wrap: wrap;
	}

	.tab-hang {
		top: 43px;
	}
}

/* ─── tab Tài khoản ─── */

.thanh-tim {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--kc);
}

.thanh-tim input[type='search'] {
	flex: 1 1 320px;
	min-width: 0;
	padding: 8px 10px;
	background: var(--nen-sau);
	border: 1px solid var(--vien);
	border-radius: var(--r);
	color: var(--chu);
	font-family: var(--mono);
	font-size: 13px;
}

.thanh-tim input[type='search']:focus {
	border-color: var(--vien-sang);
	outline: none;
}

.thanh-tim button {
	padding: 8px 14px;
	background: var(--be-mat-cao);
	border: 1px solid var(--vien-sang);
	border-radius: var(--r);
	color: var(--chu);
	font-family: var(--mono);
	font-size: 12px;
	cursor: pointer;
}

.thanh-tim button:hover {
	border-color: var(--san);
}

.thanh-tim button.nhat {
	background: transparent;
	border-color: var(--vien);
	color: var(--chu-mo);
}

/* Dòng/ô mở được chi tiết. Gạch chân nét đứt vì chuột không phải cách duy nhất
   người ta phát hiện ra thứ bấm được — con trỏ pointer chỉ thấy khi đã trỏ tới. */
.bam-duoc {
	cursor: pointer;
	text-decoration: underline dotted var(--chu-rat-mo);
	text-underline-offset: 3px;
}

tr.bam-duoc:hover {
	background: var(--be-mat-cao);
}

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

/* ─── wicustomer: phễu ─── */

.pheu {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pheu-bac {
	border-left: 2px solid var(--vien-sang);
	padding-left: 10px;
}

.pheu-so {
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.pheu-nhan {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--chu-mo);
	margin-top: 2px;
}

.pheu-mo {
	font-size: 11px;
	color: var(--chu-rat-mo);
	margin-bottom: 4px;
}

.luoi-3 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Ghi chú cấp mục: sự thật thiết kế cố định, không phải sự cố.
   Cố tình KHÔNG dùng màu cảnh báo — hộp cam để dành cho thứ đang sai và sửa được;
   trộn hai loại vào nhau thì người xem thôi đọc cả hai. */
.ghi-chu-muc {
	border-left: 2px solid var(--vien-sang);
	background: rgba(69, 59, 51, 0.18);
	padding: 8px 11px;
	margin-bottom: var(--kc);
	font-size: 12px;
	line-height: 1.5;
	color: var(--chu-mo);
	border-radius: 0 var(--r) var(--r) 0;
}

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

/* ─── Chọn khách hàng ở header ─── */

.chon-khach {
	position: relative;
}

.chon-khach input[type='search'] {
	width: 200px;
	padding: 5px 9px;
	background: var(--nen-sau);
	border: 1px solid var(--vien);
	border-radius: var(--r);
	color: var(--chu);
	font-family: var(--mono);
	font-size: 12px;
}

.chon-khach input[type='search']:focus {
	border-color: var(--san);
	outline: none;
	width: 280px;
}

.khach-goi-y {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 20;
	min-width: 340px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--be-mat-cao);
	border: 1px solid var(--vien-sang);
	border-radius: var(--r);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.khach-goi-y-dong {
	display: block;
	width: 100%;
	text-align: left;
	padding: 7px 10px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--vien);
	color: var(--chu);
	font-family: var(--mono);
	font-size: 12px;
	cursor: pointer;
}

.khach-goi-y-dong:last-child {
	border-bottom: 0;
}

.khach-goi-y-dong:hover {
	background: var(--vien);
}

.khach-goi-y-dong b {
	display: block;
	font-weight: 400;
}

.khach-goi-y-dong span {
	display: block;
	color: var(--chu-rat-mo);
	font-size: 11px;
	margin-top: 2px;
}

.khach-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px 4px 10px;
	background: rgba(77, 163, 255, 0.12);
	border: 1px solid var(--san);
	border-radius: var(--r);
	font-size: 12px;
	max-width: 340px;
}

.khach-chip b {
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.khach-chip-nhan {
	color: var(--chu-rat-mo);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.khach-chip button {
	background: transparent;
	border: 0;
	color: var(--chu-mo);
	cursor: pointer;
	font-size: 13px;
	padding: 0 3px;
}

.khach-chip button:hover {
	color: var(--loi);
}

/* ─── Khối bối cảnh khách, hiện ở đầu mọi tab ─── */

.boi-canh {
	border: 1px solid var(--san);
	border-radius: var(--r);
	background: linear-gradient(180deg, rgba(77, 163, 255, 0.07), transparent);
	padding: 12px 14px;
	margin-bottom: var(--kc);
}

.boi-canh-dau {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--vien);
}

.boi-canh-ten {
	font-size: 16px;
}

.boi-canh-phu {
	flex: 1 1 320px;
	color: var(--chu-mo);
	font-size: 12px;
}

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

.boi-canh-luoi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-top: 10px;
}

.boi-canh-o {
	border-left: 2px solid var(--vien-sang);
	padding-left: 10px;
}

.boi-canh-sp {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--chu-rat-mo);
	margin-bottom: 3px;
}

.boi-canh-so {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.boi-canh-nhan {
	font-size: 11px;
	color: var(--chu-rat-mo);
	margin-bottom: 5px;
}

.boi-canh-dong {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	padding: 1px 0;
}

.boi-canh-dong span {
	color: var(--chu-rat-mo);
}

.boi-canh-dong b {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}