/* ============================================================
   BTN-FORGE - Nut submit "lo ren": khoi vuong bo goc nhe, nen
   lua chay 2 lop gradient chong nhau, tan lua bay quanh nut.

   Dung: <button class="btn-forge fire size-md">...</button>
   - 1 class mau  : fire / ice / arcane / toxic / iron / divine / void
   - 1 class co   : size-lg / size-md / size-sm / size-xs
   Them mau moi sau nay: chi khai them 1 khoi bien CSS ben duoi,
   KHONG can viet lai hieu ung.
   ============================================================ */
.btn-forge {
	--f1: #7d1917; --f2: #ff5b2e; --f3: #ffcf6a; --f4: #ff5b2e; --f5: #7d1917;
	--ember: #ffcf8c; --ember-glow: #ff8a3d;
	--ring: rgba(255,180,80,.55); --ring-hover: rgba(255,205,120,.9);
	--glow: rgba(255,110,50,.55);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 17px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-family: 'Be Vietnam Pro', Tahoma, Arial, sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: #fff2e0 !important;
	background-image:
		radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.35), transparent 45%),
		linear-gradient(120deg, var(--f1), var(--f2), var(--f3), var(--f4), var(--f5));
	background-size: 140% 140%, 320% 320%;
	background-position: 0% 0%, 0% 50%;
	animation: btnForgeFlow 4.5s ease infinite, btnForgeShine 3.2s ease infinite;
	box-shadow: 0 0 0 1px var(--ring), 0 10px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
	transition: box-shadow .25s ease, transform .15s ease, animation-duration .25s ease;
}
@keyframes btnForgeFlow {
	0%   { background-position: 0% 0%, 0% 50%; }
	50%  { background-position: 0% 0%, 100% 50%; }
	100% { background-position: 0% 0%, 0% 50%; }
}
@keyframes btnForgeShine {
	0%, 100% { background-position: 0% 0%, 0% 50%; }
	50%      { background-position: 60% 40%, 0% 50%; }
}
.btn-forge:hover {
	box-shadow: 0 0 0 1px var(--ring-hover), 0 0 24px 4px var(--glow), 0 8px 22px -7px var(--glow), inset 0 1px 0 rgba(255,255,255,.45);
	animation-duration: 2.2s, 1.6s;
}
.btn-forge:active {
	transform: scale(.97);
}
.btn-forge .ic {
	filter: drop-shadow(0 0 5px var(--ember-glow));
	font-size: 13px;
	font-style: normal;
}

.btn-forge .ember {
	position: absolute;
	bottom: 6px;
	left: var(--x);
	width: 2.5px;
	height: 2.5px;
	border-radius: 50%;
	background: var(--ember);
	box-shadow: 0 0 6px var(--ember-glow);
	opacity: 0;
	pointer-events: none;
	animation: btnForgeEmber 2.4s ease-in infinite;
	animation-delay: var(--d);
}
@keyframes btnForgeEmber {
	0%   { transform: translateY(0) scale(1); opacity: 0; }
	16%  { opacity: .95; }
	100% { transform: translateY(-40px) scale(.2); opacity: 0; }
}
.btn-forge:hover .ember {
	animation-duration: 1.1s;
}

/* Nut phu (Huy/Quay lai) di kem, khong canh tranh thi giac voi Forge */
.btn-forge-ghost {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 19px;
	border-radius: 8px;
	border: 1px solid #33323a;
	background: rgba(255,255,255,.04);
	color: #97a1b5;
	font-family: 'Be Vietnam Pro', Tahoma, Arial, sans-serif;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none !important;
	cursor: pointer;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.btn-forge-ghost:hover {
	color: #fff;
	background: rgba(255,255,255,.09);
	border-color: #4a4a56;
}

/* ---- kich thuoc - chu to, padding sat chu de de doc ---- */
.btn-forge.size-lg { padding: 10px 17px; font-size: 15px; line-height: 1.1; border-radius: 8px; gap: 7px; }
.btn-forge.size-lg .ic { font-size: 16px; }
.btn-forge.size-lg .ember { width: 2.5px; height: 2.5px; }

.btn-forge.size-md { padding: 8px 14px; font-size: 13.5px; line-height: 1.1; border-radius: 8px; gap: 6px; }
.btn-forge.size-md .ic { font-size: 14px; }
.btn-forge.size-md .ember { width: 2px; height: 2px; }

.btn-forge.size-sm { padding: 6px 11px; font-size: 12px; line-height: 1.1; border-radius: 6px; gap: 5px; }
.btn-forge.size-sm .ic { font-size: 12.5px; }
.btn-forge.size-sm .ember { width: 1.7px; height: 1.7px; bottom: 3px; }
.btn-forge.size-sm .ember:nth-child(n+6) { display: none; }

.btn-forge.size-xs { padding: 4px 8px; font-size: 10.5px; line-height: 1.1; border-radius: 4px; gap: 3px; letter-spacing: .02em; }
.btn-forge.size-xs .ic { font-size: 11px; }
.btn-forge.size-xs .ember { display: none; }

/* ---- bang mau ----
   Mau chu dat !important: site co san quy tac chung "a:hover{color:...}"
   voi do dac hieu cao hon 1 class don (.btn-forge), neu khong khoa cung
   thi chu se bi doi mau sai (thanh vang/cam) khi hover, de lan vao nen. */
.btn-forge.fire   { --f1:#7d1917; --f2:#ff5b2e; --f3:#ffcf6a; --f4:#ff5b2e; --f5:#7d1917; --ember:#ffcf8c; --ember-glow:#ff8a3d; --ring:rgba(255,180,80,.55); --ring-hover:rgba(255,205,120,.9); --glow:rgba(255,110,50,.55); color:#fff2e0 !important; }
.btn-forge.ice    { --f1:#0d2b4a; --f2:#1f7fc7; --f3:#a9ecff; --f4:#1f7fc7; --f5:#0d2b4a; --ember:#c9f3ff; --ember-glow:#4fc7ff; --ring:rgba(120,210,255,.55); --ring-hover:rgba(180,235,255,.9); --glow:rgba(60,170,255,.55); color:#eafcff !important; }
.btn-forge.arcane { --f1:#3a1258; --f2:#a340d9; --f3:#ff9bf0; --f4:#a340d9; --f5:#3a1258; --ember:#ffc9fb; --ember-glow:#e05ce0; --ring:rgba(224,120,240,.55); --ring-hover:rgba(255,180,250,.9); --glow:rgba(190,80,220,.55); color:#fff2e0 !important; }
.btn-forge.toxic  { --f1:#0f3d1c; --f2:#3fae4f; --f3:#d4f76a; --f4:#3fae4f; --f5:#0f3d1c; --ember:#e9ffb0; --ember-glow:#9be23d; --ring:rgba(160,230,90,.55); --ring-hover:rgba(210,250,140,.9); --glow:rgba(120,210,60,.55); color:#fff2e0 !important; }
.btn-forge.iron   { --f1:#33383f; --f2:#7c8794; --f3:#d3dae2; --f4:#7c8794; --f5:#33383f; --ember:#e6ebf1; --ember-glow:#9aa8b8; --ring:rgba(180,192,207,.5); --ring-hover:rgba(215,224,235,.85); --glow:rgba(140,155,175,.5); color:#eef1f6 !important; }
.btn-forge.divine { --f1:#8a6420; --f2:#ffd76a; --f3:#fffaf0; --f4:#ffd76a; --f5:#8a6420; --ember:#fff6d8; --ember-glow:#ffe08a; --ring:rgba(255,225,150,.6); --ring-hover:rgba(255,240,200,.9); --glow:rgba(255,210,120,.55); color:#3a2607 !important; }
.btn-forge.void   { --f1:#0a0612; --f2:#2b1240; --f3:#6d28d9; --f4:#2b1240; --f5:#0a0612; --ember:#c9a6ff; --ember-glow:#6d28d9; --ring:rgba(109,40,217,.55); --ring-hover:rgba(150,90,255,.85); --glow:rgba(80,30,180,.55); color:#e9e0ff !important; }

@media (prefers-reduced-motion: reduce) {
	.btn-forge, .btn-forge .ember { animation: none !important; }
}