/* An toan tran ngang tren dien thoai that (lop bao ve chung, them dong loat 2026-08-19) --
   xem bai hoc day du o wp_plugin_dlb_lessons ve "layout viewport bi noi rong vinh vien". */
.dlb-footer-info {
	background: var(--dlb-fi-bg, #0b1f16);
	color: var(--dlb-fi-text-color, rgba(255, 255, 255, 0.8));
	padding: 56px 24px 32px;
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: hidden;
}
.dlb-footer-info.dlb-width-limited > .dlb-footer-info__grid,
.dlb-footer-info.dlb-width-limited > .dlb-footer-info__copyright {
	max-width: var(--dlb-max-width, 1400px);
	margin-left: auto;
	margin-right: auto;
}

.dlb-footer-info__grid {
	display: grid;
	/* repeat(4,...) thay vì repeat(3,...) — thêm 2026-08-30 cho cột "Danh mục" mới; 3 cột
	   còn lại (Liên hệ/Giờ làm việc/Mạng xã hội) đều TẮT ĐƯỢC riêng, track trống nếu tắt
	   thì bỏ trống theo đúng hành vi cũ, không tự co lại (giữ nguyên như trước khi thêm). */
	grid-template-columns: minmax(220px, 280px) repeat(4, 1fr);
	gap: 40px;
	align-items: start;
}

/* --- Thẻ logo/thương hiệu --- */
.dlb-footer-info__card {
	position: relative;
	background: var(--dlb-fi-card-bg, #0f3d2e);
	color: var(--dlb-fi-card-text, #ffffff);
	border-radius: 8px 40px 40px 8px;
	padding: 32px 20px 24px;
	text-align: center;
	overflow: hidden;
	box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.45);
}
.dlb-footer-info__card-accent {
	position: absolute;
	left: -30%;
	bottom: -60%;
	width: 160%;
	height: 140%;
	border-radius: 48%;
	background: var(--dlb-fi-card-accent, #fcb900);
	opacity: 0.16;
	pointer-events: none;
}
.dlb-footer-info__card-logo {
	position: relative;
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto 16px;
	border: 3px solid var(--dlb-fi-card-accent, #fcb900);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	transition: transform 0.3s ease;
}
.dlb-footer-info__card:hover .dlb-footer-info__card-logo {
	transform: scale(1.06) rotate(-3deg);
}
.dlb-footer-info__card-name {
	position: relative;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.dlb-footer-info__card-tagline {
	position: relative;
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.75;
}

/* --- Cột nội dung --- */
.dlb-footer-info__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dlb-footer-info__heading {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 12px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--dlb-fi-heading-color, #ffffff);
}
.dlb-footer-info__heading-underline {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--dlb-fi-accent-color, #fcb900);
}
.dlb-footer-info__legal {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--dlb-fi-heading-color, #ffffff);
}
.dlb-footer-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dlb-footer-info__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
}
.dlb-footer-info__list a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
/* Thêm 2026-09-02 theo yêu cầu người dùng "các mục có link khi rơ chuột vào không hiện
   thị gạch dưới" -- rule gốc chỉ tắt hẳn gạch dưới rồi CHỈ đổi màu lúc hover, không bật
   lại gạch dưới, nên các link thật trong footer (điện thoại/email/mạng xã hội/danh mục)
   không có phản hồi hover ngoài đổi màu. Bật lại đúng lúc hover, giữ nguyên tắt lúc bình
   thường (không đổi nhìn tổng thể khi chưa hover). */
.dlb-footer-info__list a:hover {
	color: var(--dlb-fi-accent-color, #fcb900);
	text-decoration: underline;
}
.dlb-footer-info__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dlb-fi-icon-size, 18px);
	height: var(--dlb-fi-icon-size, 18px);
	margin-top: 2px;
	/* Màu icon: ưu tiên --dlb-fi-icon-color riêng (Inspector Controls "Màu icon") — chỉ
	   PHP/JS thêm biến này khi người dùng thật sự đã chọn khác rỗng — để trống thì tự kế
	   thừa ĐÚNG Màu nhấn hiện tại (kể cả đổi Màu nhấn SAU), không hardcode giá trị tĩnh. */
	color: var(--dlb-fi-icon-color, var(--dlb-fi-accent-color, #fcb900));
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.dlb-footer-info__icon svg {
	width: 100%;
	height: 100%;
}
/* 2 kiểu khung tuỳ chọn — "plain" (mặc định, không khung) không cần class riêng. */
.dlb-footer-info__icon--circle,
.dlb-footer-info__icon--square {
	width: calc(var(--dlb-fi-icon-size, 18px) * 1.8);
	height: calc(var(--dlb-fi-icon-size, 18px) * 1.8);
	padding: calc(var(--dlb-fi-icon-size, 18px) * 0.3);
	box-sizing: border-box;
	background: var(--dlb-fi-icon-bg, rgba(255, 255, 255, 0.12));
}
.dlb-footer-info__icon--circle {
	border-radius: 50%;
}
.dlb-footer-info__icon--square {
	border-radius: 6px;
}
.dlb-footer-info__list li:hover .dlb-footer-info__icon--circle,
.dlb-footer-info__list li:hover .dlb-footer-info__icon--square {
	transform: scale(1.1);
}
.dlb-footer-info__note {
	margin: 14px 0 0;
	font-size: 12px;
	font-style: italic;
	opacity: 0.65;
}
.dlb-footer-info__placeholder {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	font-size: 13px;
	opacity: 0.75;
}

/* --- Copyright --- */
.dlb-footer-info__copyright {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
	font-size: 13px;
	opacity: 0.6;
}

/* --- Hiệu ứng xuất hiện khi cuộn tới (JS gắn class "is-visible" qua
   IntersectionObserver, xem dlb-footer-info-sg48-frontend.js) --- */
.dlb-footer-info--animate .dlb-footer-info__card,
.dlb-footer-info--animate .dlb-footer-info__col {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.dlb-footer-info--animate.is-visible .dlb-footer-info__card { transition-delay: 0s; }
.dlb-footer-info--animate.is-visible .dlb-footer-info__col:nth-child(2) { transition-delay: 0.1s; }
.dlb-footer-info--animate.is-visible .dlb-footer-info__col:nth-child(3) { transition-delay: 0.2s; }
.dlb-footer-info--animate.is-visible .dlb-footer-info__col:nth-child(4) { transition-delay: 0.3s; }
.dlb-footer-info--animate.is-visible .dlb-footer-info__card,
.dlb-footer-info--animate.is-visible .dlb-footer-info__col {
	opacity: 1;
	transform: translateY(0);
}
/* Trong trình soạn thảo (canvas), luôn hiện sẵn — hiệu ứng chỉ chạy trên trang thật. */
.block-editor-page .dlb-footer-info--animate .dlb-footer-info__card,
.block-editor-page .dlb-footer-info--animate .dlb-footer-info__col {
	opacity: 1 !important;
	transform: none !important;
}

/* --- Nút nổi --- */
.dlb-footer-info__float-stack {
	position: fixed;
	bottom: 20px;
	z-index: 500;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* LỖI THẬT phát hiện 2026-09-01 (người dùng báo qua ảnh: "nút giỏ hàng cột
	   hàng bên phải không click được"): panel này position:fixed, hộp bao ngoài
	   (kể cả phần TRONG SUỐT không có gì vẽ ra) vẫn nhận click bình thường trừ
	   khi tắt hẳn "pointer-events" — CÙNG BÀI HỌC đã ghi cho chính khối này lúc
	   thu gọn trên di động ("hộp trong suốt vẫn CHẶN CLICK nội dung bên dưới",
	   xem @media 480px bên dưới), giờ tái diễn ở TẦM RỘNG HƠN: từ vòng 31/33
	   panel LUÔN có ít nhất 2 nút hiện sẵn (chấm + giỏ hàng) xếp CHUNG cột với
	   4-5 nút liên hệ khác (dù đang ẩn opacity:0 vẫn CHIẾM CHỖ trong layout vì
	   không dùng display:none) — hộp bao ngoài vì vậy cao gần 400px, đè lên
	   đúng cột phải của lưới sản phẩm, chặn click các nút giỏ hàng thẻ sản phẩm
	   nằm trong vùng đó dù mắt thường không thấy gì che ở đó. Sửa gốc: tắt hẳn
	   "pointer-events" trên CHÍNH hộp bao ngoài, chỉ bật lại trên từng NÚT THẬT
	   bên trong (".dlb-footer-info__float" ngay dưới) — hộp rỗng không còn chặn
	   click gì cả, chỉ đúng phần nút tròn thật mới nhận click. */
	pointer-events: none;
}
.dlb-footer-info__float-stack .dlb-footer-info__float {
	pointer-events: auto;
}
/* Vi tri trai/phai chon duoc qua floatingPosition (them 2026-08-19, yeu cau "them nhieu
   tuy chinh") -- mac dinh la phai (".. --right"), giu dung vi tri cu neu chua tung chon
   gi khac. */
.dlb-footer-info__float-stack--right {
	right: 20px;
}
.dlb-footer-info__float-stack--left {
	left: 20px;
}
.dlb-footer-info__float {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
	font: inherit;
	border-radius: 50%;
	background: var(--dlb-fi-float-bg, #0f3d2e);
	color: var(--dlb-fi-float-text, #ffffff);
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Nut bam-de-mo/dong tren man hinh hep -- an mac dinh (desktop giu nguyen hanh vi cu,
   moi nut hien het, khong can bam gi). Xem chi tiet ly do o @media(max-width:480px). */
.dlb-footer-info__float-toggle {
	display: none;
	/* --dlb-fi-toggle-bg chi duoc dat inline khi nguoi dung THAT SU chon mau rieng qua
	   floatingToggleColor (xem PHP) -- de trong thi tu roi ve --dlb-fi-float-bg nhu cu. */
	background: var(--dlb-fi-toggle-bg, var(--dlb-fi-float-bg, #0f3d2e));
}
/* Vong pulse LIEN TUC de nguoi dung de nhan ra day la nut co the bam de mo cac lien
   he nhanh (phan anh dung "chua thay lien lac nhanh hien thi" 2026-08-19 -- ban than
   nut van hoat dong dung, chi la 1 icon chat don le khong ro rang bang mat 4 nut mau
   sac rieng tung kenh nhu truoc khi thu gon). Dung LAI dung keyframe pulse da co san
   (dlb-fi-float-pulse) thay vi tu viet moi. Doc CUNG bien --dlb-fi-toggle-bg voi nut o
   tren de vong pulse luon khop mau, ke ca khi doi mau nut qua floatingToggleColor. */
.dlb-footer-info__float-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--dlb-fi-toggle-bg, var(--dlb-fi-float-bg, #0f3d2e));
	opacity: 0.55;
	animation: dlb-fi-float-pulse 2.2s ease-out infinite;
	pointer-events: none;
	z-index: -1;
}
.dlb-footer-info__float-stack.is-open .dlb-footer-info__float-toggle::after {
	display: none;
}
/* Hieu ung khi NHAN vao nut de mo rong (theo yeu cau nguoi dung 2026-08-19) -- tach rieng
   khoi vong pulse LIEN TUC o tren (::after, luon chay san de goi y "co the bam"): (1) an
   xuong nhe khi nhan giu (:active, phan hoi tuc thi truoc ca khi JS kip doi class); (2)
   1 vong "no ra" 1 lan duy nhat dung luc bam mo (::before, chi chay khi ".is-open" vua
   xuat hien -- CSS animation tu chay lai moi lan selector bat dau khop). */
.dlb-footer-info__float-toggle:active {
	transform: scale(0.85);
}
.dlb-footer-info__float-toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--dlb-fi-toggle-bg, var(--dlb-fi-float-bg, #0f3d2e));
	opacity: 0;
	pointer-events: none;
}
.dlb-footer-info__float-stack.is-open .dlb-footer-info__float-toggle::before {
	animation: dlb-fi-toggle-burst 0.5s ease-out;
}
@keyframes dlb-fi-toggle-burst {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.9); opacity: 0; }
}
.dlb-footer-info__float svg {
	/* --dlb-fi-float-icon-size chỉ được đặt inline trên nút LIÊN HỆ NHANH (xem PHP) — nút
	   giỏ hàng/vị trí không có biến này nên tự rơi về 22px như cũ, không đổi gì. */
	width: var(--dlb-fi-float-icon-size, 22px);
	height: var(--dlb-fi-float-icon-size, 22px);
}
/* Sửa 2026-09-01 theo yêu cầu người dùng "click lần đầu vào cảm giác ko có tác
   dụng phải 2-3 lần mới hiện ra": PHÁT HIỆN nguyên nhân THẬT — đây là lỗi kinh
   điển của Safari/Chrome trên iOS: khi 1 phần tử có sẵn CSS ":hover" KHÔNG giới
   hạn thiết bị, lần CHẠM ĐẦU TIÊN trên màn cảm ứng chỉ để trình duyệt "giải
   quyết" trạng thái hover (không có chuột thật nên phải mô phỏng), KHÔNG bắn sự
   kiện click — phải chạm THÊM 1 lần nữa mới thực sự click được. Nút "liên hệ
   nhanh" (.dlb-footer-info__float, gồm cả nút chấm bấm-để-mở) đang dính đúng
   lỗi này vì rule ":hover" bên dưới áp dụng vô điều kiện. Sửa: bọc TOÀN BỘ rule
   ":hover" của cụm nút này trong "@media (hover: hover)" — chỉ thiết bị có
   chuột/con trỏ thật (media feature "hover" báo "hover") mới thấy rule này,
   thiết bị cảm ứng (điện thoại, "hover:none") không còn khớp @media nữa nên
   trình duyệt không còn lý do "chờ hover" ở lần chạm đầu — click bắn ngay lần
   chạm đầu tiên. Không đổi hành vi trên máy tính (chuột) chút nào. */
@media (hover: hover) {
	.dlb-footer-info__float:hover {
		transform: scale(1.1) translateY(-2px);
		box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.6);
	}
}

/* --- Tooltip nhãn (VD "Gọi điện", "Chat Zalo") — chỉ nút liên hệ nhanh mới có --- */
.dlb-footer-info__float-label {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	white-space: nowrap;
	background: #111111;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.dlb-footer-info__float-label::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: #111111;
}
@media (hover: hover) {
	.dlb-footer-info__float--contact:hover .dlb-footer-info__float-label {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}
/* Cum nut o CANH TRAI man hinh (floatingPosition:"left") -- tooltip bat sang PHAI thay
   vi TRAI nhu mac dinh, tranh bi cat mat ngoai man hinh (2026-08-19). */
.dlb-footer-info__float-stack--left .dlb-footer-info__float-label {
	right: auto;
	left: calc(100% + 12px);
	transform: translateY(-50%) translateX(-6px);
}
.dlb-footer-info__float-stack--left .dlb-footer-info__float-label::after {
	left: auto;
	right: 100%;
	border-left-color: transparent;
	border-right-color: #111111;
}
@media (hover: hover) {
	.dlb-footer-info__float-stack--left .dlb-footer-info__float--contact:hover .dlb-footer-info__float-label {
		transform: translateY(-50%) translateX(0);
	}
}

/* Nhan LUON HIEN (floatingLabelDisplay:"always", them 2026-08-19, yeu cau "cho chon tuy
   chon nhan hien thi") -- khac han tooltip o tren (noi len khi hover, van hinh tron): nut
   doi han sang dang vien thuoc (pill) rong ra vua du chua icon + chu, chu hien SAN, khong
   can re chuot. width/height KHONG dung nua (auto theo noi dung) -- ghi de gia tri px co
   dinh tu style="" inline (contactStyle) bang !important. */
.dlb-footer-info__float--label-always {
	width: auto !important;
	height: auto !important;
	border-radius: 999px;
	padding: 0 18px 0 14px;
	gap: 8px;
}
.dlb-footer-info__float-text {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* --- Hiệu ứng khi rê chuột (chỉ nút liên hệ nhanh) — độc lập với animation liên tục bên
   dưới, cả 2 chạy cùng lúc được (animation lo chuyển động nền/vòng lặp, hover lo phản hồi
   tức thời khi tương tác). --- */
@media (hover: hover) {
	.dlb-footer-info__float--chover-scale:hover {
		transform: scale(1.15);
	}
	.dlb-footer-info__float--chover-rotate:hover {
		transform: rotate(12deg) scale(1.08);
	}
	.dlb-footer-info__float--chover-lift:hover {
		transform: translateY(-6px);
	}
	.dlb-footer-info__float--chover-none:hover {
		transform: none;
	}
}

/* --- Hiệu ứng liên tục (animation) cho nút liên hệ nhanh — 6 kiểu, chạy LIÊN TỤC (không
   chỉ lúc hover) vì bản chất nút "liên hệ nhanh" cần tự thu hút chú ý. "animation-delay"
   đặt inline theo thứ tự nút (PHP) tạo hiệu ứng so le đẹp mắt thay vì tất cả nhảy cùng lúc. --- */
.dlb-footer-info__float--canim-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--dlb-fi-ring-color, #0f3d2e);
	opacity: 0.55;
	animation: dlb-fi-float-pulse 2.2s ease-out infinite;
	animation-delay: inherit;
	pointer-events: none;
	z-index: -1;
}
.dlb-footer-info__float--canim-bounce {
	animation: dlb-fi-contact-bounce 1.6s ease-in-out infinite;
}
@keyframes dlb-fi-contact-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
.dlb-footer-info__float--canim-shake {
	animation: dlb-fi-contact-shake 3.2s ease-in-out infinite;
}
@keyframes dlb-fi-contact-shake {
	0%, 90%, 100% { transform: translateX(0); }
	92% { transform: translateX(-4px); }
	94% { transform: translateX(4px); }
	96% { transform: translateX(-3px); }
	98% { transform: translateX(3px); }
}
.dlb-footer-info__float--canim-wiggle {
	animation: dlb-fi-contact-wiggle 2.4s ease-in-out infinite;
}
@keyframes dlb-fi-contact-wiggle {
	0%, 85%, 100% { transform: rotate(0); }
	88% { transform: rotate(-10deg); }
	91% { transform: rotate(10deg); }
	94% { transform: rotate(-6deg); }
	97% { transform: rotate(0); }
}
.dlb-footer-info__float--canim-tada {
	animation: dlb-fi-contact-tada 2.8s ease-in-out infinite;
}
@keyframes dlb-fi-contact-tada {
	0%, 80%, 100% { transform: scale(1) rotate(0); }
	83% { transform: scale(0.94) rotate(-3deg); }
	86%, 92%, 98% { transform: scale(1.08) rotate(3deg); }
	89%, 95% { transform: scale(1.08) rotate(-3deg); }
}
.dlb-footer-info__float--canim-glow {
	animation: dlb-fi-contact-glow 1.8s ease-in-out infinite;
}
@keyframes dlb-fi-contact-glow {
	0%, 100% { box-shadow: 0 0 6px 0 var(--dlb-fi-ring-color, rgba(0,0,0,0.4)); }
	50% { box-shadow: 0 0 18px 4px var(--dlb-fi-ring-color, rgba(0,0,0,0.6)); }
}
.dlb-footer-info__float-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #ef4444;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--dlb-fi-bg, #0b1f16);
}
.dlb-footer-info__float-badge.dlb-fi-badge-bump {
	animation: dlb-fi-badge-bump 0.4s ease;
}
@keyframes dlb-fi-badge-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.4); }
	100% { transform: scale(1); }
}
.dlb-footer-info__float--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--dlb-fi-float-bg, #0f3d2e);
	opacity: 0.55;
	animation: dlb-fi-float-pulse 2.2s ease-out infinite;
	pointer-events: none;
	z-index: -1;
}
@keyframes dlb-fi-float-pulse {
	0% { transform: scale(1); opacity: 0.45; }
	100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 900px) {
	.dlb-footer-info__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.dlb-footer-info__card {
		max-width: 320px;
		margin: 0 auto;
	}
	.dlb-footer-info__heading,
	.dlb-footer-info__list li {
		justify-content: flex-start;
	}
}
@media (max-width: 480px) {
	.dlb-footer-info {
		padding: 40px 16px 24px;
	}
	/* Man hinh hep (vd iPhone SE cao 568px): xep DOC 4-6 nut noi (~258px cao) LUON HIEN SAN
	   de tran len ngay noi dung ben duoi khi vua tai trang, khong can cuon (do duoc qua
	   Playwright devices['iPhone SE'] tren trang that + nguoi dung tu bao lai bang anh chup,
	   2026-08-19 -- xem wp_plugin_dlb_lessons). Thu xep NGANG (1 dai ~50px) van con cham nhe
	   vao ranh giua 2 hang cua luoi noi dung sat ben duoi (luoi do khong co khoang cach giua
	   cac hang) -- vi voi man hinh QUA THAP, bat ky cum nut LUON HIEN nao cung co the cham
	   noi dung o dau do. Giai phap dut diem: THU GON thanh 1 nut tron duy nhat theo mac dinh
	   (dung kieu UX chuan cua widget lien he nhieu kenh -- Zalo OA/WhatsApp Business...),
	   bam vao moi bung ra day du cac nut, bam lai/bam ra ngoai thu gon lai -- JS trong
	   dlb-footer-info-sg48-frontend.js xu ly (initFloatingToggle). */
	.dlb-footer-info__float-stack {
		flex-direction: row;
		flex-wrap: wrap-reverse;
		bottom: 14px;
		/* 10px -> 16px (2026-09-01, người dùng báo "xa nhau xíu nữa là ổn" qua ảnh chụp
		   nút chấm + nút giỏ hàng nổi đứng sát nhau gần như chạm viền). */
		gap: 16px;
	}
	/* KHÔNG đặt cạnh ngang ĐỐI DIỆN ở trạng thái thu gọn — container fixed chỉ set 1 cạnh
	   ngang (đúng phía đã neo) sẽ tự co width vừa đúng nội dung (chỉ 1 nút toggle 46px).
	   Nếu set cả left+right cùng lúc, hộp container rộng gần hết màn hình dù KHÔNG có gì
	   hiển thị ở phần trống (các nút thật display:none) — hộp trong suốt đó vẫn CHẶN CLICK
	   của bất kỳ nội dung nào bên dưới nó (xác nhận qua document.elementFromPoint() trên
	   trang thật, 2026-08-19). Chỉ mở rộng sang cạnh đối diện khi thật sự BUNG RA
	   (.is-open, xem dưới) — hoặc khi bật "Luôn hiện đủ" (--always-expanded), xem cuối. */
	.dlb-footer-info__float-stack--right {
		right: 14px;
		justify-content: flex-end;
	}
	.dlb-footer-info__float-stack--left {
		left: 14px;
		justify-content: flex-start;
	}
	.dlb-footer-info__float-stack--right.is-open {
		left: 14px;
	}
	.dlb-footer-info__float-stack--left.is-open {
		right: 14px;
	}
	.dlb-footer-info__float {
		width: 46px;
		height: 46px;
	}
	.dlb-footer-info__float svg {
		width: 20px;
		height: 20px;
	}
	.dlb-footer-info__float-toggle {
		display: inline-flex;
		color: var(--dlb-fi-float-text, #ffffff);
		transition: transform 0.25s ease;
	}
	.dlb-footer-info__float-stack.is-open .dlb-footer-info__float-toggle {
		transform: scale(0.92);
		box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
	}
	/* Sửa 2026-09-01 theo yêu cầu người dùng "khi bấm lần đầu bị chậm... cho hiệu
	   ứng các icon này hiện từ từ từ dưới lên trên": trước đó dùng "display:none"
	   để ẩn — display KHÔNG animate/transition được, nên lúc bấm mở, toàn bộ icon
	   BẬT RA TỨC THÌ trong 1 khung hình (không có phản hồi mượt nào trước đó), dễ
	   cảm giác như "khựng"/chậm 1 nhịp trên máy yếu. Đổi sang ẩn bằng
	   opacity+transform (animate được) + "visibility" (vẫn ẩn hẳn khỏi luồng
	   tương tác/đọc màn hình lúc đóng, không chỉ mờ đi) — mở ra thì fade + trượt
	   từ dưới lên, có "transition-delay" RIÊNG từng icon (biến
	   "--dlb-fi-reveal-delay", PHP tính sẵn theo đúng thứ tự kênh, xem PHP) tạo
	   hiệu ứng nối tiếp nhau từ icon gần nút bấm (dưới) lên icon xa nhất (trên) —
	   khớp đúng thứ tự DOM/xếp chồng "column-reverse" đã có sẵn, không cần đổi gì
	   khác ở cấu trúc. */
	/* Nút giỏ hàng ("--cart-persistent", thêm 2026-09-01 theo yêu cầu người dùng "ko bị
	   ẩn đi" sau khi bật lại showFloatingCart) CHỦ Ý loại khỏi rule ẩn-mặc-định này bằng
	   ":not(...)" thứ 2 — đứng tách biệt, LUÔN hiện kể cả khi cụm nút liên hệ đang thu
	   gọn, không phụ thuộc bấm nút "chấm" mới thấy như các nút liên hệ khác. */
	.dlb-footer-info__float-stack > .dlb-footer-info__float:not(.dlb-footer-info__float-toggle):not(.dlb-footer-info__float--cart-persistent) {
		opacity: 0;
		transform: translateY(18px);
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
	}
	.dlb-footer-info__float-stack.is-open > .dlb-footer-info__float:not(.dlb-footer-info__float-toggle) {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.3s ease, transform 0.3s ease;
		transition-delay: var(--dlb-fi-reveal-delay, 0s);
	}
	/* "Luôn hiện đủ trên di động" (floatingAlwaysExpanded, thêm 2026-08-19) — bỏ hẳn cơ
	   chế thu gọn: hiện toàn bộ nút LUÔN, ẩn hẳn nút chấm (không cần bấm gì nữa). Đặt cả 2
	   cạnh ngang giống hệt trạng thái ".is-open" ở trên. Đánh đổi: người dùng chọn cách
	   này chấp nhận rủi ro che nội dung trên màn hình quá thấp (đã ghi rõ trong Inspector
	   Controls) đổi lấy luôn hiện sẵn không cần bấm. */
	.dlb-footer-info__float-stack--always-expanded {
		left: 14px;
		right: 14px;
	}
	.dlb-footer-info__float-stack--always-expanded .dlb-footer-info__float-toggle {
		display: none;
	}
	.dlb-footer-info__float-stack--always-expanded > .dlb-footer-info__float:not(.dlb-footer-info__float-toggle) {
		display: inline-flex;
		/* Sửa 2026-09-01: rule ẩn mặc định ở trên giờ dùng opacity/visibility (animate
		   được) thay vì "display:none" — "always-expanded" (không cần bấm, luôn hiện
		   sẵn) phải tự mở khoá LUÔN cả 2 thuộc tính này, không chỉ display, nếu không
		   icon vẫn nằm trong layout (display đúng) nhưng vô hình (opacity/visibility
		   vẫn kế thừa trạng thái ẩn mặc định). */
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
	}
	/* Xep DOC (floatingMobileLayout:"vertical", them 2026-08-19, yeu cau "sap xep theo
	   chieu doc, xuat hien tu duoi len tren") -- "column-reverse" lam phan tu DAU TIEN
	   trong DOM (nut cham) nam o DUOI CUNG (dung vi tri da neo qua "bottom"), cac nut sau
	   do xep CHONG LEN TREN no -- dung y "tu duoi len". Mac dinh van la "horizontal" (an
	   toan hon cho man hinh thap, xem bai hoc wp_plugin_dlb_lessons ve luoi 0-gap). */
	.dlb-footer-info__float-stack--mobile-vertical {
		flex-direction: column-reverse;
		flex-wrap: nowrap;
	}
	.dlb-footer-info__float-stack--mobile-vertical.dlb-footer-info__float-stack--right {
		align-items: flex-end;
	}
	.dlb-footer-info__float-stack--mobile-vertical.dlb-footer-info__float-stack--left {
		align-items: flex-start;
	}
	/* Tooltip von bat sang TRAI nut (dung cho cot doc tren DESKTOP) -- trong hang NGANG
	   tren di dong de bi che boi nut ke ben; chi hien khi hover (khong ton tai tren cham
	   thuc) nen chuyen xuong DUOI nut cho an toan. CHI ap dung cho layout "horizontal" --
	   layout "vertical" giu nguyen kieu bat sang canh nhu desktop (khong bi che vi cac nut
	   xep DOC, khong co nut nao ben canh). */
	.dlb-footer-info__float-stack--mobile-horizontal .dlb-footer-info__float-label {
		right: auto;
		left: 50%;
		top: calc(100% + 10px);
		transform: translateX(-50%) translateY(-6px);
	}
	.dlb-footer-info__float-stack--mobile-horizontal .dlb-footer-info__float-label::after {
		left: 50%;
		top: auto;
		bottom: 100%;
		transform: translateX(-50%);
		border-left-color: transparent;
		border-bottom-color: #111111;
	}
	.dlb-footer-info__float-stack--mobile-horizontal .dlb-footer-info__float--contact:hover .dlb-footer-info__float-label {
		transform: translateX(-50%) translateY(0);
	}
	/* Thu nho 20% toan bo chu/icon noi dung footer tren man hinh hep, theo yeu cau nguoi
	   dung "thong tin duoi footer nho hon 20%" (2026-08-19) -- KHONG dung clamp() nhu cac
	   block khac vi day la font-size CO DINH trong CSS (khong doc qua bien nguoi dung
	   cau hinh), don gian ghi thang gia tri da giam 20% cho tung dong. */
	.dlb-footer-info__card-name {
		font-size: 14px;
	}
	.dlb-footer-info__card-tagline {
		font-size: 10px;
	}
	.dlb-footer-info__heading {
		font-size: 14px;
	}
	.dlb-footer-info__list li {
		font-size: 13px;
	}
	.dlb-footer-info__note {
		font-size: 10px;
	}
	.dlb-footer-info__placeholder {
		font-size: 11px;
	}
	.dlb-footer-info__copyright {
		font-size: 11px;
	}
	.dlb-footer-info__icon {
		width: calc(var(--dlb-fi-icon-size, 18px) * 0.8);
		height: calc(var(--dlb-fi-icon-size, 18px) * 0.8);
	}
}