/* รวม media queries สำหรับ desktop ขนาดใหญ่ */
@media (min-width: 601px) {
	.review-withdraw-row {
		justify-content: flex-start !important;
	}
	
	#withdraw-table {
		order: 1;
		margin: 0 40px 0 32px !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
		align-self: flex-start !important;
	}
	
	#chat-review {
		order: 2;
		align-self: flex-start !important;
	}
	
	/* ขยับกล่องถอนเงินไปทางซ้ายบน desktop */
	.withdraw-list-box {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}
/* ไอคอนหน้าคำว่า 'รายการถอนเงินล่าสุด' เด้งเบาๆ แบบเดียวกับด้านหลัง */
.withdraw-title-icon {
	animation: bounce-after 1.2s infinite cubic-bezier(.68,-0.55,.27,1.55);
	will-change: transform;
	display: inline-block;
}

/* ไอคอนหลังคำว่า 'รายการถอนเงินล่าสุด' เด้งน่ารัก (ใช้เฉพาะ bounce) */
.withdraw-title-icon-after {
	animation: bounce-after 1.2s infinite cubic-bezier(.68,-0.55,.27,1.55);
	will-change: transform;
	display: inline-block;
}

@keyframes bounce-after {
	0% { transform: scale(1) translateY(0); }
	40% { transform: scale(1.06,0.96) translateY(-2.5px); }
	60% { transform: scale(0.97,1.03) translateY(1px); }
	100% { transform: scale(1) translateY(0); }
}
@media (max-width: 600px) {
	.withdraw-list-box .withdraw-info {
		font-size: 1.22rem;
		font-weight: bold;
	}
	/* ขยายชื่อ-สกุลเฉพาะ 4 รายการแรกในกล่องถอนเงินบนมือถือ */
	.withdraw-list-box .withdraw-info:nth-child(-n+4) {
		font-size: 1.38rem !important;
		font-weight: bold;
	}
	/* ขยาย 4 รายการถอนเงินแรกในกล่องถอนเงินบนมือถือ */
	.withdraw-list-box .withdraw-card:nth-child(-n+4) {
		font-size: 1.28rem !important;
	}
	/* ขยายจำนวนเงินในกล่องถอนเงินบนมือถือ */
	.withdraw-list-box .withdraw-amount {
		font-size: 1.18rem !important;
		font-weight: bold;
	}
}
@media (max-width: 600px) {
	.withdraw-list-box {
		max-width: 94vw !important;
		min-width: 90vw !important;
		padding: 15px 2vw 15px 2vw !important;
		font-size: 1.08rem;
	}
}
/* Animation สำหรับคำว่าสำเร็จในสถานะถอนเงิน */
/* ปรับขนาดกล่องรายการถอนเงินให้ใหญ่ขึ้น */
.withdraw-list-box {
	max-width: 320px !important;
	min-width: 180px;
	padding: 10px 4px 10px 4px !important;
	font-size: 0.92rem;
	box-sizing: border-box;
}
.withdraw-list-box .withdraw-card {
	font-size: 0.92rem;
	padding: 4px 0;
}
.withdraw-list-box .withdraw-info {
	font-size: 0.88rem;
}
.withdraw-list-box .withdraw-amount {
	font-size: 0.98rem;
	font-weight: bold;
}
.withdraw-list-box .withdraw-status {
	font-size: 0.88rem;
}
/* เด้งและ pulse สำหรับสำเร็จ */
/* เด้งแบบ delay ไล่จากบนลงล่าง */
.withdraw-success-animate {
	animation: bounce-success 0.9s cubic-bezier(.68,-0.55,.27,1.55) 1, pulse-success 1.2s infinite alternate cubic-bezier(.4,0,.2,1);
	display: inline-block;
	animation-delay: 0s, 0.9s; /* bounce ก่อน pulse */
}
.withdraw-success-animate.delay-1 {
	animation-delay: 0.12s, 1.02s;
}
.withdraw-success-animate.delay-2 {
	animation-delay: 0.24s, 1.14s;
}
.withdraw-success-animate.delay-3 {
	animation-delay: 0.36s, 1.26s;
}
.withdraw-success-animate.delay-4 {
	animation-delay: 0.48s, 1.38s;
}
.withdraw-success-animate.delay-5 {
	animation-delay: 0.6s, 1.5s;
}
@keyframes bounce-success {
	0% { transform: scale(0.7) translateY(18px); opacity: 0.2; }
	60% { transform: scale(1.12) translateY(-6px); opacity: 1; }
	100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes pulse-success {
	0% { color: #fff; text-shadow: 0 0 8px #ffd700, 0 0 2px #fffbe6; transform: scale(1); }
	60% { color: #ffe082; text-shadow: 0 0 18px #ffd700, 0 0 8px #fffbe6; transform: scale(1.08); }
	100% { color: #fff; text-shadow: 0 0 8px #ffd700, 0 0 2px #fffbe6; transform: scale(1); }
}
/* ดาวรีวิวหมุนได้ */
.review-star-spin {
	animation: reviewStarSpin 2.8s linear infinite;
	transform-origin: 50% 50%;
}
@keyframes reviewStarSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
body {
background: linear-gradient(180deg, #100cff 0%, #003d99 50%, #000000 100%);
	overflow-x: hidden;
}

/* Performance optimizations */
.lazy-load {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
	opacity: 1;
}

/* Reduce motion สำหรับผู้ใช้ที่ไม่ต้องการ animation */
@media (prefers-reduced-motion: reduce) {
	* {
		/*animation-duration: 0.01ms !important;*/
		/*animation-iteration-count: 1 !important;*/
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.menu {
	width: 100%;
	background: rgba(0, 0, 0, 0.7);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	padding: 0.5rem 0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.menu-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0 1.5rem;
}

.menu-left .brand {
	height: 40px;
	vertical-align: middle;
}

.menu-right {
	display: flex;
	gap: 1rem;
}

/*รีวิวจากลูกค้า*/

/* กรอบรีวิวลูกค้าแบบสวยเวอร์ */
#chat-review {
	box-shadow: 0 4px 20px 0 #00eaff99, 0 0 0 4px #fffbe6;
	border-radius: 14px;
	background: rgba(47,0,255,0.85);
	backdrop-filter: blur(4px);
	border: 2px solid #0fc7eb;
	padding: 14px 8px 14px 8px;
	margin: 28px auto 18px auto;
	max-width: 360px;
	position: relative;
	overflow: visible;
}
#chat-review h2 {
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 1px;
	color: #0bfe54;
	text-shadow: 0 1px 8px #2f00ff, 0 0 4px #fff, 0 0 12px #0fc7eb;
	margin-bottom: 12px;
}
.review-bubble-left, .review-bubble-right {
	display: flex;
	align-items: flex-start;
	gap: 1px;
	margin-bottom: 7px;
	border-radius: 10px 10px 10px 8px;
	box-shadow: 0 2px 8px 0 #0fc7eb33, 0 0 0 2px #fffbe6;
	padding: 5px 0px;
	position: relative;
	background: linear-gradient(120deg, #2f00ff 0%, #6ec6ff 100%);
	color: #fff;
	font-size: 0.82rem;
	font-family: 'Prompt', 'Kanit', 'Segoe UI', sans-serif;
	transition: transform 0.2s, box-shadow 0.2s;
	width: fit-content;
	padding-left: 12px;
	padding-right: 12px;
	word-break: break-word;
}
.review-bubble-left:hover, .review-bubble-right:hover {
	transform: scale(1.03) translateY(-1px) rotate(-0.5deg);
	box-shadow: 0 4px 16px 0 #0fc7eb99, 0 0 0 4px #fffbe6;
}
.review-bubble-right {
	background: linear-gradient(120deg, #ffb300 0%, #ffe082 100%);
	color: #2f00ff;
	border-radius: 8px 8px 2px 8px;
	box-shadow: 0 2px 8px 0 #ffd70066, 0 0 0 2px #fffbe6;
	width: fit-content;
	padding-left: 12px;
	padding-right: 12px;
	word-break: break-word;
	align-self: flex-end;
}
.review-name {
	font-size: 0.78rem;
	font-weight: bold;
	color: #fefe0b;
	text-shadow: 0 1px 4px #2f00ff, 0 0 1px #fff;
	margin-bottom: 2px;
}
.review-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid #fffbe6;
	box-shadow: 0 1px 4px #0fc7eb66;
	background: #fff;
}
.review-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-right: 8px;
}
.review-stars {
	color: #ffe082;
	font-size: 0.8rem;
	margin-bottom: 1px;
	text-shadow: 0 1px 2px #2f00ff;
}
.review-date {
	font-size: 0.7rem;
	color: #b3e5fc;
	margin-top: 1px;
	text-align: right;
	margin-left: 16px;
}

@media (max-width: 600px) {
	.review-date {
	font-size: 0.48rem !important;
	}
}