/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background: var(--color-footer);
	color: rgba(255, 255, 255, 0.85);
	margin-top: 60px;
}

.footer-main {
	display: flex;
	align-items: stretch;
	max-width: var(--container-width);
	margin: 0 auto;
}

.footer-columns {
	display: grid;
	grid-template-columns: 1.3fr 0.85fr 1fr 0.95fr;
	gap: 40px;
	padding: 50px 20px;
	flex: 1 1 auto;
	min-width: 0;
}
@media (max-width: 900px) {
	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}
}
@media (max-width: 900px) {
	.footer-columns {
		grid-template-columns: 1fr;
	}
}

.footer-columns .widget-title {
	position: relative;
	display: inline-block;
	margin: 0 0 20px;
	padding-bottom: 10px;
	color: #fff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Short accent bar under every column heading — an explicit ::after, not
   :first-of-type/:nth-of-type, which breaks if a column's DOM order ever
   changes. */
.footer-columns .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-primary-light);
}

.footer-widget-area p {
	font-size: 0.875rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.7);
}

.footer-widget-area a {
	color: rgba(255, 255, 255, 0.85);
}

.footer-widget-area a:hover {
	color: #fff;
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.footer-brand-name {
	font-size: 1.15rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.02em;
}

.footer-brand-tagline {
	position: relative;
	margin-top: 3px;
	padding-bottom: 7px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.footer-brand-tagline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22px;
	height: 2px;
	background: var(--color-primary-light);
}

.footer-contact-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-contact-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	flex-shrink: 0;
}

.footer-contact-icon .icon {
	width: 14px;
	height: 14px;
}

.footer-menu li {
	margin: 0;
}

.footer-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

.footer-menu a:hover {
	color: #fff;
}

/* Right-pointing caret via the border-triangle trick (design-system.md's
   convention for simple carets), not an SVG/icon class — lets the "Liên Kết
   Nhanh"/"Điều Khoản" lists get one without touching markup in 11 files. */
.footer-menu a::after {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--color-primary-light);
	opacity: 0.8;
}

/* "Kênh Thanh Toán" column. VISA/Mastercard use real brand-color marks
   (Simple Icons, CC0 — assets/img/payments/); MoMo/ZaloPay use provided
   logo files (assets/img/payments/, same supplied-artwork path as
   .partner-logo). Bank transfer stays an icon + text chip since it's not
   one specific brand. */
.footer-payment-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 24px;
}

.footer-payment-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 10px;
	background: #fff;
	padding: 6px 12px;
}

.footer-payment-badge img {
	max-width: 100%;
	max-height: 22px;
	object-fit: contain;
}

/* Spans both grid columns — deliberate, not an orphaned 5th item in a
   2-col grid. */
.footer-payment-badge--bank {
	grid-column: 1 / -1;
	gap: 8px;
	color: var(--color-text);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.footer-payment-badge--bank .icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.footer-trust-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.footer-trust-badge {
	display: flex;
	align-items: center;
	gap: 12px;
}

.footer-trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	flex-shrink: 0;
}

.footer-trust-icon .icon {
	width: 18px;
	height: 18px;
}

.footer-trust-title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: #fff;
}

.footer-trust-subtitle {
	margin-top: 2px;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 18px 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
}

.site-info .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
@media (max-width: 480px) {
	.site-info .container {
		flex-direction: column;
		align-items: flex-start;
	}
}

.site-info p {
	margin: 0;
}

.site-info-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.site-info-subtext {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45);
}

/* Developer credit link ("Developer by Tuấn Nguyên", tel: click-to-call) —
   matches the dark-footer link convention already used by
   .footer-widget-area a (inherits the surrounding 60%-white copy color
   instead of the site's own bright --color-primary, which would clash
   against this dark background) plus an underline so it still reads as
   clickable even though its color otherwise matches the plain text next
   to it. */
.site-info-copy a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
}

.site-info-copy a:hover {
	color: #fff;
}

.site-info-right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
@media (max-width: 480px) {
	.site-info-right {
		width: 100%;
		justify-content: space-between;
	}
}

.footer-info-divider {
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, 0.2);
}

.footer-connect-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

.footer-connect-link:hover {
	color: #fff;
}

.footer-connect-arrow {
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid currentColor;
}

/* Social row moved down into the bottom bar (was inside the first footer
   column) to match the reference layout — outline circles, not filled. */
.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

.footer-social-link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.5);
}

.footer-social-link .icon {
	width: 16px;
	height: 16px;
}

/* Floating "lên đầu trang" button — fixed to the viewport (not the footer),
   so it's `position: fixed` on <body>, not a footer child; toggled via
   .is-visible by main.js once the page has scrolled a bit. `env()` clears
   iOS Safari's own bottom toolbar/home-indicator area, which is included
   in the fixed-position viewport but can still visually sit on top of a
   plain `bottom: 24px` — same reasoning as .shop-sidebar's bottom-sheet
   padding elsewhere in this file (search env(safe-area-inset-bottom)),
   just applied to a small floating button instead of a full sheet. */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	box-shadow: var(--shadow-md);
	color: var(--color-text);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, border-color 0.15s ease, color 0.15s ease;
	z-index: 900;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Up-pointing caret via the CSS border-triangle trick — same technique as
   .menu-chevron, not an SVG/emoji, for a single simple shape. */
.back-to-top-arrow {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 8px solid currentColor;
}

/* =========================================================
   Floating "Liên hệ nhanh" chat widget (footer.php /
   knt_store_simple_footer(), inc/chat-widget.php) — bottom-left, mirroring
   .back-to-top's bottom-right spot. Toggle button expands a stack of
   contact-channel pills upward (flex-direction: column puts the menu,
   first in markup, above the toggle, which stays anchored to the fixed
   bottom edge as content is added above it).
   ========================================================= */
.knt-chat-fab {
	position: fixed;
	left: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.knt-chat-fab-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.knt-chat-fab.is-open .knt-chat-fab-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.knt-chat-fab-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 6px 18px 6px 6px;
	box-shadow: var(--shadow-md);
	color: var(--color-text);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.knt-chat-fab-item:hover {
	transform: translateX(3px);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.knt-chat-fab-item-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}

.knt-chat-fab-item-icon .icon {
	width: 18px;
	height: 18px;
}

.knt-chat-fab-toggle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--color-primary);
	color: #fff;
	box-shadow: var(--shadow-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.knt-chat-fab-toggle:hover {
	transform: scale(1.05);
}

.knt-chat-fab-icon-open,
.knt-chat-fab-icon-close {
	width: 24px;
	height: 24px;
	position: absolute;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.knt-chat-fab-icon-close {
	opacity: 0;
	transform: scale(0.6) rotate(-45deg);
}

.knt-chat-fab.is-open .knt-chat-fab-icon-open {
	opacity: 0;
	transform: scale(0.6) rotate(45deg);
}

.knt-chat-fab.is-open .knt-chat-fab-icon-close {
	opacity: 1;
	transform: scale(1) rotate(0);
}

/* WeChat's copy-to-clipboard confirmation (main.js — WeChat has no
   universal web deep link, see inc/chat-widget.php) — small, self-
   contained toast, bottom-centered, above every other fixed element. */
.knt-chat-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 8px);
	max-width: calc(100% - 32px);
	background: var(--color-text);
	color: #fff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 0.875rem;
	box-shadow: var(--shadow-md);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
	text-align: center;
}

.knt-chat-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}