/* =========================================================
   COMPONENT: Button
   Phong cach Pinterest: bo goc 16px (khong pill), gon, phang.
   Su dung o: moi trang (global)
   Dependencies: tokens.css
   ========================================================= */

.am__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-2);
	min-height: 44px;
	padding: var(--am-space-2) var(--am-space-6);
	font-family: var(--am-font-body);
	font-size: var(--am-fs-sm);
	font-weight: 800;
	line-height: 1;
	border: none;
	border-radius: var(--am-radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--am-duration-fast) var(--am-ease);
}

.am__btn:hover,
.am__btn:focus {
	text-decoration: none;
}

/* Hieu ung nhan kieu iOS */
.am__btn:active {
	transform: scale(0.97);
}

/* --- Primary: do Pinterest (chi dung cho CTA chinh) --- */
.am__btn--primary {
	background: var(--am-color-primary);
	color: var(--am-color-text-invert);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.am__btn--primary:hover,
.am__btn--primary:focus {
	background: var(--am-color-primary-hover);
	color: var(--am-color-text-invert);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* --- Secondary: nen sand am --- */
.am__btn--secondary {
	background: var(--am-color-bg-muted);
	color: var(--am-color-text);
}

.am__btn--secondary:hover,
.am__btn--secondary:focus {
	background: var(--am-color-bg-muted-hover);
	color: var(--am-color-text);
}

/* --- Ghost: trong suot --- */
.am__btn--ghost {
	background: transparent;
	color: var(--am-color-text);
	border-color: var(--am-color-border-strong);
}

.am__btn--ghost:hover,
.am__btn--ghost:focus {
	background: var(--am-color-bg-soft);
}

/* --- Nut yeu thich — trai tim do, khi da thich thi nen do --- */
.am__btn--fav .am__btn__heart {
	color: var(--am-color-danger);
}

.am__btn--fav.is-fav {
	background: var(--am-color-danger);
	border-color: var(--am-color-danger);
	color: var(--am-color-text-invert);
}

.am__btn--fav.is-fav .am__btn__heart {
	color: var(--am-color-text-invert);
}