/**
 * Footer tuỳ biến - thay cho footer mặc định của Blocksy.
 *
 * Font kế thừa từ theme (không đặt font-family) nên đồng bộ với Customizer.
 * Màu nền lấy từ 2 biến --bchf-bg / --bchf-bottom-bg do PHP in ra theo
 * field SCF, nên đổi màu trong admin là đổi ngay.
 */

.bch-footer {
	--bchf-bg:          #cbd5e1;
	--bchf-bottom-bg:   #fff;
	--bchf-link:        #2563eb;
	--bchf-accent:      var(--theme-palette-color-1, #e8363c);
	--bchf-max:         var(--theme-normal-container-max-width, 1290px);
	--bchf-gutter:      clamp(1.25rem, 4vw, 2.5rem);
	--bchf-ease:        cubic-bezier(.16, 1, .3, 1);

	background: var(--bchf-bg);
	color: var(--bchf-text);
	font-size: 1rem;
	line-height: 1.7;
}

/* Hai bảng màu chữ. PHP gắn class theo ô "Kiểu màu chữ" trong admin, nên đổi
   nền sáng/tối chỉ cần chọn lại một ô, không phải sửa từng màu. */
.bch-footer--light {
	--bchf-text:        rgb(15 23 42 / 72%);
	--bchf-heading:     #0f172a;
	--bchf-line:        rgb(15 23 42 / 12%);
	--bchf-bottom-text: rgb(15 23 42 / 78%);
}

.bch-footer--dark {
	--bchf-text:        rgb(255 255 255 / 78%);
	--bchf-heading:     #fff;
	--bchf-line:        rgb(255 255 255 / 14%);
	--bchf-bottom-text: rgb(255 255 255 / 78%);
}

.bch-footer__container {
	inline-size: 100%;
	max-inline-size: var(--bchf-max);
	margin-inline: auto;
	padding-inline: var(--bchf-gutter);
}

/* --------------------------------------------------------------------------
   PHẦN CHÍNH - 4 CỘT
   -------------------------------------------------------------------------- */
.bch-footer__main { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.bch-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 40rem) {
	.bch-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
	/* Hai cột chữ hai đầu rộng hơn hai cột link ở giữa. */
	.bch-footer__grid {
		grid-template-columns:
			minmax(0, 1.35fr)
			minmax(0, 1fr)
			minmax(0, 1fr)
			minmax(0, 1.35fr);
		gap: clamp(2rem, 3vw, 3rem);
	}
}

/* --- Tiêu đề cột --- */
.bch-footer__title {
	margin: 0 0 1.25rem;
	color: var(--bchf-heading);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
}

/* --- Nội dung WYSIWYG (cột 1 và cột 4) --- */
.bch-footer__text > :first-child { margin-block-start: 0; }
.bch-footer__text > :last-child  { margin-block-end: 0; }
.bch-footer__text p { margin-block: 0 1.125rem; }
.bch-footer__text strong { color: var(--bchf-heading); font-weight: 600; }

.bch-footer__text a {
	color: var(--bchf-link);
	text-decoration: none;
}

.bch-footer__text a:hover { text-decoration: underline; }

/* --- Cột 1: logo --- */
.bch-footer__logo { margin-block-end: 1.75rem; }

.bch-footer__logo img {
	display: block;
	inline-size: auto;
	max-inline-size: min(15rem, 100%);
	block-size: auto;
	margin-inline: auto;
}

/* --- Cột 2, 3: danh sách liên kết --- */
.bch-footer__links {
	display: grid;
	gap: .875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bch-footer__links a {
	display: inline-block;
	color: var(--bchf-link);
	text-decoration: none;
	transition: translate .2s var(--bchf-ease), opacity .2s var(--bchf-ease);
}

.bch-footer__links a:hover,
.bch-footer__links a:focus-visible {
	text-decoration: underline;
	translate: .25rem 0;
}

/* --- Cột 4: hàng icon mạng xã hội --- */
.bch-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.bch-footer__social {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	/* Màu nền lấy từ biến --bchf-social do PHP in ra theo mạng đã chọn. */
	background: var(--bchf-social, #333);
	color: #fff;
	transition: transform .2s var(--bchf-ease), box-shadow .2s var(--bchf-ease);
}

.bch-footer__social svg {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

.bch-footer__social:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px -6px var(--bchf-social, rgb(0 0 0 / 40%));
}

/* --------------------------------------------------------------------------
   THANH DƯỚI
   -------------------------------------------------------------------------- */
.bch-footer__bottom {
	background: var(--bchf-bottom-bg);
	color: var(--bchf-bottom-text);
	padding-block: 1.25rem;
}

.bch-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	text-align: center;
}

/* Có thêm icon thanh toán thì tách hai bên cho đỡ chật. */
.bch-footer__bottom-inner:has(.bch-footer__payments) {
	justify-content: space-between;
	text-align: start;
}

@media (max-width: 47.9375rem) {
	.bch-footer__bottom-inner:has(.bch-footer__payments) {
		justify-content: center;
		text-align: center;
	}
}

.bch-footer__copyright { font-size: .9375rem; }
.bch-footer__copyright > :first-child { margin-block-start: 0; }
.bch-footer__copyright > :last-child  { margin-block-end: 0; }
.bch-footer__copyright strong { color: var(--bchf-heading); font-weight: 700; }

.bch-footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bch-footer__payments li {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 2.125rem;
	padding-inline: .625rem;
	/* Nền sáng để icon nào cũng đọc được trên nền tối, kể cả file PNG
	   nền trong suốt có hình màu đậm. Viền mảnh để trên nền sáng vẫn thấy
	   ranh giới từng ô. */
	background: rgb(255 255 255 / 92%);
	border: 1px solid var(--bchf-line);
	border-radius: 6px;
}

.bch-footer__payments img {
	display: block;
	inline-size: auto;
	block-size: 1.25rem;
	max-inline-size: 4rem;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   TIẾP CẬN
   -------------------------------------------------------------------------- */
.bch-footer :where(a):focus-visible {
	outline: 2px solid var(--bchf-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bch-footer__links a { transition: none; }
	.bch-footer__links a:hover { padding-inline-start: 0; }
}

/* ==========================================================================
   NÚT CUỘN LÊN ĐẦU TRANG
   Vòng tròn ngoài chạy theo tiến độ cuộn của trang.
   ========================================================================== */
.bch-top {
	--bcht-size:   2.875rem;
	--bcht-accent: var(--theme-palette-color-1, #e8363c);
	--bcht-ease:   cubic-bezier(.16, 1, .3, 1);

	position: fixed;
	inset-block-end: clamp(1rem, 2.5vw, 1.75rem);
	inset-inline-end: clamp(1rem, 2.5vw, 1.75rem);
	z-index: 998; /* dưới popup Quick View, trên nội dung thường */

	display: grid;
	place-items: center;
	inline-size: var(--bcht-size);
	block-size: var(--bcht-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bcht-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 16px rgb(16 24 40 / 24%);

	/* Trạng thái ẩn: không nhận chuột, không nhận tab. */
	opacity: 0;
	visibility: hidden;
	translate: 0 .75rem;
	transition:
		opacity .25s var(--bcht-ease),
		translate .25s var(--bcht-ease),
		visibility .25s var(--bcht-ease),
		background-color .2s var(--bcht-ease);
}

.bch-top.is-visible {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}

.bch-top:hover { background: var(--theme-palette-color-2, #d81c22); }

.bch-top:focus-visible {
	outline: 3px solid var(--bcht-accent);
	outline-offset: 3px;
}

/* Icon và vòng tròn chồng lên nhau cùng 1 ô grid. */
.bch-top__icon,
.bch-top__ring {
	grid-area: 1 / 1;
}

.bch-top__icon {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	transition: translate .2s var(--bcht-ease);
}

.bch-top:hover .bch-top__icon { translate: 0 -2px; }

.bch-top__ring {
	inline-size: 100%;
	block-size: 100%;
	/* Xoay để vạch tiến độ bắt đầu từ đỉnh vòng tròn. */
	rotate: -90deg;
	overflow: visible;
}

.bch-top__ring circle {
	fill: none;
	stroke-width: 2.5;
}

.bch-top__ring-bg { stroke: rgb(255 255 255 / 28%); }

.bch-top__ring-bar {
	stroke: #fff;
	stroke-linecap: round;
	transition: stroke-dashoffset .1s linear;
}

@media (prefers-reduced-motion: reduce) {
	.bch-top,
	.bch-top__icon,
	.bch-top__ring-bar { transition: none; }

	.bch-top:hover .bch-top__icon { translate: 0; }
}