/* ============================================================================
   Ecolux Lighting — Site Widgets (v1.43.0) — nạp SITEWIDE
   ----------------------------------------------------------------------------
   1a. Cụm 3 nút liên hệ nổi (.ecolux-floatbar). Desktop (≥768px): TOP-LEFT,
       xếp dọc, icon tròn, nhãn hiện khi hover (giữ nguyên như cũ). Mobile
       (<768px): gom lại thành 1 nút toggle tròn (icon bong bóng chat) — chạm
       vào mới bung `.ecolux-floatbar__list` (3 nút kênh). Từ v1.43.0, trên
       MOBILE cụm này dời xuống BOTTOM-LEFT, ngay TRÊN nút "Tính số đèn"
       (xem chi tiết ở khối `@media (max-width: 767.98px)` bên dưới) — desktop
       không đổi.
   1b. Nút "Tính số đèn" (.ecolux-floatcalc) — BOTTOM-LEFT, dạng pill, chữ
       LUÔN hiển thị trên desktop. Mobile (<768px, v1.38.0): chỉ còn icon
       tròn (bóng đèn + dấu hỏi), ẩn chữ.
   2. Logo ảnh (custom-logo) trong navbar & footer + xử lý dark mode.
   File MỚI, bổ sung — không đụng 6 file CSS Phase 1. Dùng semantic token.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   1a. CỤM 3 NÚT LIÊN HỆ NỔI — TOP-LEFT (desktop) / BOTTOM-LEFT (mobile, xem
   override ở khối `@media (max-width: 767.98px)` phía dưới, mục v1.43.0)
   ══════════════════════════════════════════════════════════════════════════
   v1.29.0: dời từ bottom-right sang TOP-LEFT theo yêu cầu, tách khỏi nút
   "Tính số đèn" (nay ở .ecolux-floatcalc, xem mục 1b bên dưới).
   `top` = chiều cao navbar sticky (--nav-height, 4rem = 64px, cố định mọi
   breakpoint — không có media query nào override) + khoảng đệm co giãn
   clamp(32px, 6vh, 76px) ⇒ tổng dao động 96–140px, LUÔN nằm dưới header/menu
   dù ở màn hình nào. (Rule gốc này CHỈ còn áp dụng cho desktop ≥768px — mobile
   có override `top`/`bottom` riêng, xem v1.43.0 bên dưới.)

   v1.38.0: markup bổ sung 1 `.ecolux-floatbar__toggle` (button, chỉ mobile)
   đứng trước `.ecolux-floatbar__list` (bọc 3 nút kênh, id
   "ecolux-floatbar-list"). Desktop: toggle ẩn, list luôn hiện — HÀNH VI
   Y HỆT bản cũ (3 nút xếp dọc). Mobile: list mặc định thu gọn (ẩn), chỉ
   bung khi `.ecolux-floatbar` có class `.is-open` (JS `initContactFab()`
   trong assets/js/main.js). */
.ecolux-floatbar {
	position: fixed;
	left: clamp(12px, 3vw, 24px);
	top: calc(var(--nav-height) + clamp(32px, 6vh, 76px));
	z-index: var(--z-sticky, 200);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Toggle mobile: ẨN trên desktop mặc định — desktop giữ nguyên hành vi cũ
   (3 nút luôn hiện qua .ecolux-floatbar__list, không cần toggle). */
.ecolux-floatbar__toggle {
	display: none;
}

/* Danh sách 3 nút kênh. Desktop: flex column y hệt .ecolux-floatbar trước
   đây (khi còn là children trực tiếp). Mobile override bên dưới. */
.ecolux-floatbar__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ecolux-floatbar__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 48px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-full);
	background: var(--ecolux-fb-bg, var(--color-gray-700));
	color: #fff;
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	line-height: 1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
	/* Mặc định thu gọn: chỉ hiện icon tròn, hover mới bung nhãn. */
	overflow: hidden;
	max-width: 48px;
}

.ecolux-floatbar__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-left: 1px;
}

.ecolux-floatbar__label {
	white-space: nowrap;
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.ecolux-floatbar__btn:hover,
.ecolux-floatbar__btn:focus-visible {
	max-width: 220px;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}

.ecolux-floatbar__btn:hover .ecolux-floatbar__label,
.ecolux-floatbar__btn:focus-visible .ecolux-floatbar__label {
	opacity: 1;
}

.ecolux-floatbar__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Màu nhận diện từng kênh (v1.7.1 — dùng logo thương hiệu thật). Nút "Tính số
   đèn" đã tách sang .ecolux-floatcalc (mục 1b bên dưới) từ v1.29.0. */
.ecolux-floatbar__btn--zalo      { --ecolux-fb-bg: #0068FF; } /* xanh Zalo */
.ecolux-floatbar__btn--phone     { --ecolux-fb-bg: var(--color-green-600, #16A34A); } /* xanh lá hotline */
/* Messenger: gradient xanh→tím→hồng đặc trưng. Đặt thẳng background nên thắng
   quy tắc nền chung của .ecolux-floatbar__btn (cùng độ đặc hiệu, đứng SAU).
   Vẫn giữ --ecolux-fb-bg làm màu dự phòng nếu trình duyệt bỏ qua gradient. */
.ecolux-floatbar__btn--messenger {
	--ecolux-fb-bg: #0A7CFF;
	background: linear-gradient(150deg, #00B2FF 0%, #006AFF 42%, #A033FF 76%, #FF5280 100%);
}

/* Nhịp đập nhẹ gây chú ý (nút gọi) — tôn trọng reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.ecolux-floatbar__btn--phone {
		animation: ecolux-fb-pulse 2.4s ease-in-out infinite;
	}
	@keyframes ecolux-fb-pulse {
		0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
		50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 0 0 8px rgba(22, 163, 74, 0.14); }
	}
}

/* Mobile: nút cao 46px (như cũ). */
@media (max-width: 767.98px) {
	.ecolux-floatbar__btn {
		height: 46px;
	}
}

/* ─── Mobile (<768px, v1.38.0): gom 3 nút thành 1 toggle tròn ───
   Che hero ít hơn: mặc định CHỈ hiện nút toggle; .ecolux-floatbar__list
   ẩn cho tới khi .ecolux-floatbar nhận class .is-open (JS initContactFab()).
   Dùng visibility + opacity (không display:none) để có transition mượt mà
   vẫn đưa nút ra khỏi tab order khi đang ẩn. */
@media (max-width: 767.98px) {
	/* v1.43.0: dời cụm liên hệ xuống BOTTOM-LEFT, ngay TRÊN nút "Tính số đèn"
	   (.ecolux-floatcalc) — thay vì top-left như trước. `bottom` = đáy
	   floatcalc (clamp(12px,4vh,28px) + safe-area) + chiều cao nút bóng đèn
	   (48px) + khoảng đệm var(--space-3) (~12px) ⇒ 2 cụm cách đều ~12px,
	   KHÔNG chồng nhau, cùng canh trái `left` (kế thừa từ rule gốc, không đổi).
	   `flex-direction: column-reverse`: DOM vẫn [toggle, list] nhưng đảo trục
	   chính ⇒ toggle (con đầu) tụt xuống ĐÁY (sát bóng đèn), list (con sau)
	   nằm TRÊN toggle — mở ra 3 kênh BUNG LÊN, không đâm xuống bóng đèn. */
	.ecolux-floatbar {
		top: auto;
		bottom: calc(clamp(12px, 4vh, 28px) + 48px + var(--space-3) + env(safe-area-inset-bottom, 0px));
		flex-direction: column-reverse;
	}

	.ecolux-floatbar__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-full);
		/* Màu trung tính giống nền mặc định của .ecolux-floatbar__btn (không
		   gắn với 1 kênh cụ thể nào) — tương phản tốt với icon trắng, nhất
		   quán với cụm nút bên dưới khi bung ra. */
		background: var(--ecolux-fb-bg, var(--color-gray-700));
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
		cursor: pointer;
		transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	}

	.ecolux-floatbar__toggle:hover,
	.ecolux-floatbar__toggle:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
	}

	.ecolux-floatbar__toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	/* Đóng: lùi xuống translateY(8px) (thấp hơn vị trí cuối 8px, phía TRÊN
	   toggle) — khi mở trồi LÊN translateY(0), đúng hướng bung lên từ toggle
	   (trước là translateY(-8px)/từ trên đổ xuống, khớp bản top-left cũ). */
	.ecolux-floatbar__list {
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear var(--transition-fast);
	}

	.ecolux-floatbar.is-open .ecolux-floatbar__list {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 0s;
	}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	.ecolux-floatbar__toggle,
	.ecolux-floatbar__list {
		transition: none;
	}
}

/* Dark mode: viền mảnh giúp nút tách khỏi nền tối. */
:root[data-theme="dark"] .ecolux-floatbar__btn {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   1b. NÚT "TÍNH SỐ ĐÈN" — BOTTOM-LEFT, DẠNG PILL (v1.29.0)
   ══════════════════════════════════════════════════════════════════════════
   Tách hẳn khỏi cụm 3 nút liên hệ (.ecolux-floatbar, nay ở top-left). Luôn
   hiện chữ "Tính số đèn" — KHÔNG ẩn/hover như trước (yêu cầu anh Sang), vì
   đây là công cụ site chứ không phải kênh liên hệ. Nền vàng đậm
   var(--color-primary-active) — cùng token contrast đã qua QA ở v1.21.0
   (trắng/nền ~5.0:1 sáng, ~3.2:1 tối, đều ≥3:1 ngưỡng UI component). */
.ecolux-floatcalc {
	position: fixed;
	left: clamp(12px, 3vw, 24px);
	bottom: clamp(12px, 4vh, 28px);
	z-index: var(--z-sticky, 200);
	/* An toàn tai thỏ / thanh địa chỉ mobile. */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.ecolux-floatcalc__btn {
	/* Đọc lại bởi các fill="var(--ecolux-fc-bg, ...)" trong <svg> icon để phần
	   "màn hình + phím" luôn khớp đúng màu nền pill (kể cả dark mode). */
	--ecolux-fc-bg: var(--color-primary-active);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 48px;
	padding: 0 var(--space-4) 0 var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-primary-active);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	line-height: 1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.ecolux-floatcalc__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-left: 1px;
}

.ecolux-floatcalc__label {
	white-space: nowrap;
}

.ecolux-floatcalc__btn:hover,
.ecolux-floatcalc__btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}

.ecolux-floatcalc__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Mobile (<768px, v1.38.0): ẩn chữ "Tính số đèn", nút thành hình tròn chỉ
   còn icon (đỡ che nội dung hero). aria-label vẫn giữ nguyên trên thẻ <a>
   nên không mất ngữ nghĩa cho screen reader / SEO. */
@media (max-width: 767.98px) {
	.ecolux-floatcalc__label {
		display: none;
	}
	.ecolux-floatcalc__btn {
		width: 48px;
		padding: 0;
		justify-content: center;
	}
}

/* Mobile rất hẹp: thu nhỏ vòng tròn thêm chút (vẫn không hiện chữ). */
@media (max-width: 380px) {
	.ecolux-floatcalc__btn {
		height: 44px;
		width: 44px;
		padding: 0;
	}
	.ecolux-floatcalc__icon {
		width: 22px;
		height: 22px;
	}
}

/* Dark mode: viền mảnh giúp pill tách khỏi nền tối (đồng bộ .ecolux-floatbar__btn). */
:root[data-theme="dark"] .ecolux-floatcalc__btn {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. LOGO ẢNH (custom-logo) — navbar & footer
   ══════════════════════════════════════════════════════════════════════════
   Chỉ áp dụng khi chủ dự án ĐÃ set logo ảnh (thẻ <a> nhận class ...--img). Chưa
   set logo ⇒ không có class này ⇒ CSS bên dưới không chạm tới → logo chữ y hệt cũ.
   ------------------------------------------------------------------------- */

/* Kích thước logo trong thanh nav — không làm cao nav. */
.navbar__logo-img {
	display: block;
	height: auto;
	max-height: 40px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

.site-footer__logo-img {
	display: block;
	height: auto;
	max-height: 44px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

/* Bản tối mặc định ẩn; chỉ hiện khi có logo tối + đang ở dark mode. */
.navbar__logo-img--dark,
.site-footer__logo-img--dark {
	display: none;
}

/* --- CÓ logo bản tối riêng: đổi ảnh theo data-theme --- */
:root[data-theme="dark"] .navbar__logo--has-dark .navbar__logo-img--light,
:root[data-theme="dark"] .site-footer__logo--has-dark .site-footer__logo-img--light {
	display: none;
}
:root[data-theme="dark"] .navbar__logo--has-dark .navbar__logo-img--dark,
:root[data-theme="dark"] .site-footer__logo--has-dark .site-footer__logo-img--dark {
	display: block;
}

/* --- CHƯA có logo bản tối: đặt logo sáng trên nền trắng bo tròn để không mất
       tiêu ở dark mode (KHÔNG dùng filter invert — sẽ phá màu thương hiệu). --- */
:root[data-theme="dark"] .navbar__logo--img:not(.navbar__logo--has-dark),
:root[data-theme="dark"] .site-footer__logo--img:not(.site-footer__logo--has-dark) {
	background: #ffffff;
	border-radius: var(--radius-md);
	padding: 4px 8px;
}