/* ============================================================
   RUONG DO MENU - Thanh chon nhanh chuc nang, hien tren dau
   trang Ruong do (Nang Cap Do, Ep Dong Tim/Vang, Socket,
   Doi Op Canh, Sua Do Ben, Khoa Giao Dich Do).

   Dung chung cho moi action cua Page/Mod_RuongDo.asp, render
   boi Sub RuongDoMenu() trong Common/RuongDoRender.asp.
   Them chuc nang moi sau nay: chi them 1 dong trong Sub do,
   KHONG can sua file CSS nay.
   ============================================================ */
.RuongDoMenu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px;
	margin-bottom: 14px;
	background: #14161f;
	border: 1px solid #2a2e36;
	border-radius: 8px;
}

.RuongDoMenuItem {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px 11px;
	border-radius: 6px;
	border: 1px solid #2a2e36;
	background: #1d202b;
	color: #b7bdca !important;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none !important;
	cursor: pointer;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.RuongDoMenuItem .ic {
	font-size: 13px;
	opacity: .75;
}
.RuongDoMenuItem:hover {
	color: #fff !important;
	background: #242838;
	border-color: #3a3f52;
}

/* Hieu ung anh sang luot qua khi di chuot */
.RuongDoMenuItem::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.16) 45%, transparent 65%);
	transform: translateX(-130%);
	transition: transform .55s ease;
	pointer-events: none;
}
.RuongDoMenuItem:hover::before {
	transform: translateX(130%);
}

/* Gach duoi phat sang, om sat vao nut dang chon (khong chay het hang) */
.RuongDoMenuItem::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: #ff3b30;
	box-shadow: 0 0 8px rgba(255,59,48,.7);
	transform: translateX(-50%);
	transition: width .25s ease;
}
.RuongDoMenuItem.active {
	color: #fff !important;
	background: linear-gradient(180deg, rgba(147,20,28,.35), rgba(147,20,28,.12));
	border-color: #93141c;
}
.RuongDoMenuItem.active::after {
	width: 55%;
}

@media (max-width: 480px) {
	.RuongDoMenuItem {
		padding: 8px 12px 10px;
		font-size: 12.5px;
	}
}

/* ------------------------------------------------------------
   Hàng nút con của "Tính Năng Socket" (Tháo Socket, Đổi Socket,
   Tháo Đổi Socket, Up Socket...). Chỉ hiện khi action đang chọn
   thuộc nhóm socket - xem RuongDoSocketSubMenu() trong
   Common/RuongDoRender.asp.

   Cố tình dùng màu XANH (khác đỏ của hàng nút cha) + kích thước
   nhỏ hơn, để một lần nhìn là phân biệt được đây là nhóm con,
   không phải ngang hàng với Nâng Cấp Đồ / Ép Dòng Vàng...
   ------------------------------------------------------------ */
.RuongDoSubMenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px 12px 8px 20px;
	margin: -14px 0 14px;
	background: #12151d;
	border: 1px dashed #2a3444;
	border-top: none;
	border-radius: 0 0 8px 8px;
}

.RuongDoSubMenuHead {
	font-size: 20px;
	line-height: 1;
	font-weight: bold;
	color: #a78bfa;
	text-shadow: 0 0 6px rgba(167,139,250,.55);
	margin-right: 2px;
}

.RuongDoSubMenuItem {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px 8px;
	border-radius: 5px;
	border: 1px solid #23384a;
	background: #182430;
	color: #8fa3b8 !important;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none !important;
	cursor: pointer;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.RuongDoSubMenuItem .ic {
	font-size: 12px;
	opacity: .75;
}
.RuongDoSubMenuItem:hover {
	color: #fff !important;
	background: #241e3a;
	border-color: #a78bfa;
}

/* Hiệu ứng ánh sáng lướt qua, giữ chung phong cách với hàng nút cha */
.RuongDoSubMenuItem::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.14) 45%, transparent 65%);
	transform: translateX(-130%);
	transition: transform .55s ease;
	pointer-events: none;
}
.RuongDoSubMenuItem:hover::before {
	transform: translateX(130%);
}

/* Gạch dưới phát sáng hồng tím (đồng bộ màu chữ "Tính năng Socket" trong game),
   ôm sát nút con đang chọn - viền vẫn giữ tông tím nhạt như hover */
.RuongDoSubMenuItem::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 3px;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: #e05ce0;
	box-shadow: 0 0 7px rgba(224,92,224,.75);
	transform: translateX(-50%);
	transition: width .25s ease;
}
.RuongDoSubMenuItem.active {
	color: #fff !important;
	background: linear-gradient(180deg, rgba(224,92,224,.3), rgba(224,92,224,.1));
	border-color: #a78bfa;
}
.RuongDoSubMenuItem.active::after {
	width: 55%;
}

/* Chức năng con chưa xây xong: mờ đi, không bấm được, có nhãn "Sắp có" */
.RuongDoSubMenuItem.disabled {
	color: #55606e !important;
	background: #161c24;
	border-color: #232a34;
	cursor: not-allowed;
}
.RuongDoSubMenuItem.disabled:hover {
	color: #55606e !important;
	background: #161c24;
	border-color: #232a34;
}
.RuongDoSubMenuItem.disabled::before {
	display: none;
}
.RuongDoSubMenuItem .soon {
	font-size: 9.5px;
	font-weight: bold;
	color: #7a8a9c;
	background: #232c38;
	border-radius: 3px;
	padding: 1px 5px;
	letter-spacing: .02em;
}

@media (max-width: 480px) {
	.RuongDoSubMenu {
		padding-left: 12px;
	}
	.RuongDoSubMenuItem {
		font-size: 11.5px;
		padding: 5px 9px 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.RuongDoMenuItem,
	.RuongDoMenuItem::before,
	.RuongDoSubMenuItem,
	.RuongDoSubMenuItem::before {
		transition: none;
	}
}