/* =========================================================
   1. ORDER STATS (BẢNG THỐNG KÊ)
   ========================================================= */
.account-user.circle {
    display: flex;
    align-items: flex-start;
}
.handdn-order-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 30px;
}

.handdn-stat-box {
	background: #f8f8f8;
	border: 1px solid #cbd5e1;
	padding: 20px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.handdn-stat-box:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	transform: translateY(-2px);
}

.handdn-stat-box.highlight {
	border-left: 4px solid #32b34a; /* Màu xanh lá chủ đạo */
}

.handdn-stat-title {
	font-size: 11px;
	text-transform: uppercase;
	color: #777;
	margin-bottom: 5px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.handdn-stat-value {
	font-size: 24px;
	font-weight: 800;
	color: #2c3e50;
}

/* =========================================================
   2. CUSTOMER ROLE BADGES
   ========================================================= */
.handdn-user-role-badge {
	display: table;
	margin: -30px auto 20px auto; /* Căn giữa dưới Avatar */
	padding: 4px 14px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 50px;
	color: #fff;
	background: #646970; /* Màu xám mặc định cho các role không xác định */
	box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* --- Hạng Golden (Vàng) --- */
.handdn-user-role-badge.role-golden,
.handdn-user-role-badge.role-gold {
	background: linear-gradient(135deg, #F3CE6C 0%, #D4AF37 50%, #AA771C 100%);
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
	border: 1px solid #C59B27;
}

/* --- Hạng Silver (Bạc) --- */
.handdn-user-role-badge.role-silver {
	background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 50%, #9E9E9E 100%);
	color: #333; /* Chữ tối màu trên nền bạc */
	text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
	box-shadow: 0 4px 12px rgba(158, 158, 158, 0.3);
	border: 1px solid #ADADAD;
}

/* --- Hạng Customer (Khách hàng thông thường) --- */
.handdn-user-role-badge.role-customer {
	background: linear-gradient(135deg, #32b34a 0%, #238b36 100%);
	box-shadow: 0 4px 12px rgba(50, 179, 74, 0.3);
	border: 1px solid #238b36;
}

/* --- Hạng Subscriber (Thành viên đăng ký mới) --- */
.handdn-user-role-badge.role-subscriber {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
	border: 1px solid #2980b9;
}