/**
 * Sản phẩm đã lưu — chốt ngày 10/09/2026.
 *
 * Hai phần: nút đánh dấu ở thẻ hàng, và trang xem lại danh sách. Con số trên
 * đầu trang nằm ở `dau-trang.css` cùng với ba nút còn lại của đầu trang, vì đó
 * là chuyện bố cục của đầu trang chứ không phải của chức năng này.
 *
 * File nạp ở mọi trang, nên mọi quy tắc dưới đây phải nằm trong tiền tố
 * `ak-luu-` để không chạm vào thứ gì khác.
 *
 * Màu của hình đặc lấy `--ak-mau-do` chứ không phải `--ak-mau-do-dam`. Đây là
 * hình 18px không có chữ nào nằm trên, đúng phần việc của bậc đỏ tươi trong
 * thang bốn bậc. Xem ghi chú thang màu ở `tokens.css`.
 */

/* Nút đánh dấu ở thẻ hàng
   ------------------------------------------------------------------------- */

/*
 * Ghi cả `button.ak-luu-nut` vì Flatsome đặt chiều cao tối thiểu, lề và nền cho
 * mọi thẻ button với độ đặc hiệu cao hơn lớp trần. Đây là cùng một bài đã gặp ở
 * `.ak-dt-nav` và `.ak-dt-nut` của đầu trang.
 */
.ak-luu-nut,
button.ak-luu-nut {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	min-width: 0;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--ak-mau-mo);
	line-height: var(--ak-dong-khong);
	cursor: pointer;
	transition: color var(--ak-chuyen-nhanh), transform var(--ak-chuyen-nhanh);
}

/*
 * Vùng bấm nới rộng ra ngoài mà không chiếm chỗ trong dòng. Hình chỉ 18px, để
 * nguyên thì trên điện thoại phải bấm rất chính xác mới trúng.
 *
 * Nới đúng 8px, bằng khoảng hở giữa nút và tên hàng. Nới rộng hơn thì mép trái
 * của vùng bấm đè lên đuôi tên hàng, bấm vào chữ lại thành lưu hàng.
 */
.ak-luu-nut::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.ak-luu-nut:hover {
	color: var(--ak-mau-muc);
}

.ak-luu-nut:focus-visible {
	outline: 2px solid var(--ak-mau-do);
	outline-offset: 4px;
}

.ak-luu-nut[aria-pressed="true"] {
	color: var(--ak-mau-do);
}

.ak-luu-hinh {
	display: block;
	width: 18px;
	height: 18px;
}

/* Hai hình chồng cùng một chỗ, `aria-pressed` chọn hình nào được thấy. */
.ak-luu-hinh-dac,
.ak-luu-nut[aria-pressed="true"] .ak-luu-hinh-rong {
	display: none;
}

.ak-luu-nut[aria-pressed="true"] .ak-luu-hinh-dac {
	display: block;
}

/* Nảy một nhịp khi vừa lưu. Chỉ lúc lưu, bỏ ra thì không nảy. */
@keyframes ak-luu-nhay {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.28);
	}

	100% {
		transform: scale(1);
	}
}

.ak-luu-nhay {
	animation: ak-luu-nhay var(--ak-chuyen) var(--ak-cong);
}

@media (prefers-reduced-motion: reduce) {

	.ak-luu-nhay {
		animation: none;
	}
}

/* Trang xem lại
   ------------------------------------------------------------------------- */

/*
 * Trang này mượn nguyên khung của trang danh mục: thẻ `section` mang cả lớp
 * `ak-tb` nên nó thừa kế bộ biến `--tb-*`, băng đầu và lưới hàng giống hệt.
 * Chỉ ba thứ dưới đây là của riêng nó.
 */

.ak-luu-thanh {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--ak-cach-3);
	width: 100%;
}

.ak-luu-thanh[hidden] {
	display: none;
}

.ak-luu-dem {
	margin: 0;
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-luu-xoa,
button.ak-luu-xoa {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-khong);
	letter-spacing: var(--ak-gian-nhe);
	/* Flatsome in hoa mọi chữ trong thẻ button. Dòng đếm ngay bên trái là chữ
	   thường, để nút in hoa thì hai đầu một hàng đọc như hai cỡ chữ khác nhau. */
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--ak-chuyen-nhanh);
}

.ak-luu-xoa:hover {
	color: var(--ak-mau-do-dam);
}

.ak-luu-than {
	width: 100%;
}