/* Khu tài khoản hoạ sĩ — bảng điều khiển, thông tin tài khoản, đăng xuất.
   Tự khai biến riêng vì app.css chỉ nạp trên màn hình đăng tranh, không có mặt
   ở trang tài khoản. Màu giữ đúng bộ đã dùng bên app.css để hai khu nhìn ra
   cùng một nhà. */

.wms-tk {
	--tk-nen: #ffffff;
	--tk-nen-mo: #faf8f5;
	--tk-vien: #e0dcd5;
	--tk-vien-dam: #b8b0a4;
	--tk-chu: #2b2723;
	--tk-chu-mo: #6d675f;
	--tk-nhan: #c67f22;
	--tk-nhan-mo: #fdf6ea;
	--tk-tot: #007017;
	--tk-tot-mo: #edf7ee;
	--tk-cho: #996800;
	--tk-cho-mo: #fcf7e6;
	--tk-loi: #b32d2e;
	--tk-loi-mo: #fcf0f1;
	--tk-bo: 6px;

	color: var(--tk-chu);
}

.wms-tk * {
	box-sizing: border-box;
}

.wms-tk-chao {
	font-size: 15px;
	margin: 0 0 18px;
}

/* ── Dải nhắc tranh cần sửa ───────────────────────────────────────────────── */

.wms-tk-nhac {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin: 0 0 20px;
	border: 1px solid var(--tk-loi);
	border-radius: var(--tk-bo);
	background: var(--tk-loi-mo);
	color: var(--tk-chu);
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
}

.wms-tk-nhac:hover,
.wms-tk-nhac:focus {
	background: #f9e2e3;
	color: var(--tk-chu);
}

.wms-tk-nhac-cham {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tk-loi);
	color: #fff;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}

/* ── Bốn thẻ số ───────────────────────────────────────────────────────────── */

.wms-tk-luoi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 0 24px;
}

.wms-tk-the {
	padding: 16px 14px;
	border: 1px solid var(--tk-vien);
	border-radius: var(--tk-bo);
	background: var(--tk-nen-mo);
	text-align: center;
}

.wms-tk-so {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.wms-tk-nhan {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tk-chu-mo);
}

/* Mỗi con số một tông: liếc qua là biết cột nào đang nói chuyện gì, khỏi phải
   đọc nhãn bên dưới. */
.wms-tk-the-ban {
	border-color: var(--tk-tot);
	background: var(--tk-tot-mo);
}

.wms-tk-the-ban .wms-tk-so {
	color: var(--tk-tot);
}

.wms-tk-the-cho {
	border-color: var(--tk-cho);
	background: var(--tk-cho-mo);
}

.wms-tk-the-cho .wms-tk-so {
	color: var(--tk-cho);
}

.wms-tk-the-tien {
	border-color: var(--tk-nhan);
	background: var(--tk-nhan-mo);
}

.wms-tk-the-tien .wms-tk-so {
	color: var(--tk-nhan);
	font-size: 24px;
}

/* ── Ba lối tắt ───────────────────────────────────────────────────────────── */

.wms-tk-loi-tat {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.wms-tk-o {
	display: block;
	padding: 16px;
	border: 1px solid var(--tk-vien);
	border-radius: var(--tk-bo);
	background: var(--tk-nen);
	color: var(--tk-chu);
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.wms-tk-o:hover,
.wms-tk-o:focus {
	border-color: var(--tk-vien-dam);
	background: var(--tk-nen-mo);
	color: var(--tk-chu);
}

.wms-tk-o-ten {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 3px;
}

.wms-tk-o-phu {
	display: block;
	font-size: 12px;
	line-height: 1.45;
	color: var(--tk-chu-mo);
}

/* Đăng tranh là việc chính của khu này nên cho nó nổi hẳn lên. */
.wms-tk-o-chinh {
	border-color: var(--tk-nhan);
	background: var(--tk-nhan-mo);
}

.wms-tk-o-chinh:hover,
.wms-tk-o-chinh:focus {
	border-color: var(--tk-nhan);
	background: #fbeed6;
}

.wms-tk-o-chinh .wms-tk-o-ten {
	color: var(--tk-nhan);
}

/* ── Màn hình hẹp ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
	.wms-tk-luoi {
		grid-template-columns: repeat(2, 1fr);
	}

	.wms-tk-loi-tat {
		grid-template-columns: 1fr;
	}
}

/* ══ Trang Thông tin tài khoản ══════════════════════════════════════════════
   Hai khối có tiêu đề thay cho một dãy trường chạy dài. Phần đổi mật khẩu thu
   gọn lại vì phần lớn lượt vào đây là để sửa số điện thoại hay tên hiển thị. */

.wms-tk-form .wms-tk-khoi {
	padding: 18px 18px 6px;
	margin: 0 0 16px;
	border: 1px solid #e0dcd5;
	border-radius: 6px;
	background: #ffffff;
}

.wms-tk-form .wms-tk-khoi-ten {
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e0dcd5;
	color: #2b2723;
}

.wms-tk-form label {
	font-size: 13px;
	margin-bottom: 4px;
}

.wms-tk-form input[type="text"],
.wms-tk-form input[type="email"],
.wms-tk-form input[type="tel"],
.wms-tk-form input[type="password"] {
	height: 42px;
	margin-bottom: 0;
}

.wms-tk-form .form-row {
	margin-bottom: 14px;
}

.wms-tk-form em {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.45;
	color: #6d675f;
	font-style: normal;
}

/* ── Hộp đổi mật khẩu ─────────────────────────────────────────────────────── */

.wms-tk-form .wms-tk-mk {
	border: 1px solid #e0dcd5;
	border-radius: 6px;
	background: #faf8f5;
	margin: 0 0 18px;
}

.wms-tk-form .wms-tk-mk-dau {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 600;
	color: #2b2723;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

.wms-tk-form .wms-tk-mk-dau::-webkit-details-marker {
	display: none;
}

.wms-tk-form .wms-tk-mk-phu {
	font-size: 12px;
	font-weight: 400;
	color: #6d675f;
}

.wms-tk-form .wms-tk-mui {
	margin-left: auto;
	flex: 0 0 auto;
	transition: transform 0.15s;
}

.wms-tk-form .wms-tk-mk[open] .wms-tk-mui {
	transform: rotate(180deg);
}

.wms-tk-form .wms-tk-mk-than {
	padding: 0 18px 6px;
}

/* ── Ô mật khẩu kèm nút hiện chữ ──────────────────────────────────────────── */

.wms-tk-form .wms-tk-boc {
	position: relative;
	display: block;
}

.wms-tk-form .wms-tk-boc input {
	padding-right: 44px;
}

.wms-tk-form .wms-tk-mat {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
}

.wms-tk-form .wms-tk-mat:hover,
.wms-tk-form .wms-tk-mat:focus {
	background: none;
	opacity: 1;
}

.wms-tk-form .wms-tk-mat svg {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	pointer-events: none;
}

.wms-tk-form .wms-tk-hang-luu {
	margin: 0;
}

.wms-tk-form .wms-tk-hang-luu button {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}

/* ══ Màn xác nhận đăng xuất ═════════════════════════════════════════════════
   Bản gốc là một dòng chữ nhỏ lọt thỏm trên đầu trang: vừa dễ bấm nhầm, vừa dễ
   bỏ sót. */

.wms-tk-thoat-dai {
	padding: 0 !important;
	margin: 0 0 20px !important;
	border: 0 !important;
	background: none !important;
}

.wms-tk-thoat-dai::before {
	display: none !important;
}

.wms-tk-thoat {
	max-width: 460px;
	padding: 22px 24px;
	border: 1px solid #e0dcd5;
	border-radius: 6px;
	background: #ffffff;
}

.wms-tk-thoat-hoi {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 6px;
	color: #2b2723;
}

.wms-tk-thoat-phu {
	font-size: 13px;
	line-height: 1.55;
	color: #6d675f;
	margin: 0 0 18px;
}

.wms-tk-thoat-nut {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.wms-tk-nut-thoat,
.wms-tk-nut-olai {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
}

.wms-tk-nut-thoat {
	border: 1px solid #b32d2e;
	background: #b32d2e;
	color: #fff;
}

.wms-tk-nut-thoat:hover,
.wms-tk-nut-thoat:focus {
	background: #94191a;
	border-color: #94191a;
	color: #fff;
}

.wms-tk-nut-olai {
	border: 1px solid #b8b0a4;
	background: #fff;
	color: #2b2723;
}

.wms-tk-nut-olai:hover,
.wms-tk-nut-olai:focus {
	background: #faf8f5;
	color: #2b2723;
}