/* FPT360 — Chatbox tư vấn nổi (v2.8.3)
   Mọi rule đều gắn #fpt360-cb + !important ở các thuộc tính quan trọng để
   không bị CSS của theme (Flatsome) ghi đè. */

#fpt360-cb {
	--fptcb-mau: #12266b;
	--fptcb-day: 18px;   /* khoảng cách từ đáy  */
	--fptcb-canh: 16px;  /* khoảng cách từ cạnh */
	position: fixed !important;
	bottom: var(--fptcb-day) !important;
	z-index: 100000 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	transition: bottom .22s ease;
}
#fpt360-cb.fpt360-cb--phai { right: var(--fptcb-canh) !important; left: auto !important; }
#fpt360-cb.fpt360-cb--trai { left: var(--fptcb-canh) !important; right: auto !important; }

/* Khi mở khung: hạ về sát đáy để có đủ chiều cao hiển thị. */
#fpt360-cb.is-open { bottom: 18px !important; }

#fpt360-cb *,
#fpt360-cb *::before,
#fpt360-cb *::after { box-sizing: border-box !important; }

/* Tạm ẩn các nút nổi khác khi khung chat đang mở (tránh chồng lên nhau). */
.fptcb-nhuong {
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity .2s ease;
}

/* ---------- Bong bóng ---------- */
#fpt360-cb .fptcb-bubble {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 60px !important;
	height: 60px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--fptcb-mau) !important;
	background-image: none !important;
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28) !important;
	transition: transform .18s ease, box-shadow .18s ease;
}
#fpt360-cb.fpt360-cb--phai .fptcb-bubble { margin-left: auto !important; }
#fpt360-cb .fptcb-bubble:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0, 0, 0, .34) !important; }
#fpt360-cb .fptcb-bubble:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }

#fpt360-cb .fptcb-bubble-chat,
#fpt360-cb .fptcb-bubble-x {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: opacity .18s ease, transform .18s ease;
}
#fpt360-cb .fptcb-bubble-x { position: absolute !important; opacity: 0; transform: rotate(-90deg); }
#fpt360-cb.is-open .fptcb-bubble-chat { opacity: 0; transform: rotate(90deg); }
#fpt360-cb.is-open .fptcb-bubble-x { opacity: 1; transform: rotate(0); }
#fpt360-cb .fptcb-bubble svg { display: block !important; }

/* Vòng sóng nhẹ gây chú ý (tắt khi mở khung) */
#fpt360-cb .fptcb-bubble::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--fptcb-mau);
	animation: fptcb-song 2.4s ease-out infinite;
}
#fpt360-cb.is-open .fptcb-bubble::after { display: none; }
@keyframes fptcb-song {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	#fpt360-cb .fptcb-bubble::after { animation: none; }
	#fpt360-cb, #fpt360-cb .fptcb-panel { transition: none !important; }
}

/* ---------- Khung chat ---------- */
#fpt360-cb .fptcb-panel {
	width: 340px !important;
	max-width: calc(100vw - 32px) !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	background: var(--fptcb-mau) !important;
	border: 0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .3) !important;
	opacity: 0;
	transform: translateY(14px) scale(.97);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
#fpt360-cb .fptcb-panel[hidden] { display: none !important; }
#fpt360-cb.is-open .fptcb-panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Đầu khung */
#fpt360-cb .fptcb-head {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	color: #fff !important;
}
#fpt360-cb .fptcb-avatar {
	display: flex !important;
	width: 34px !important;
	height: 34px !important;
	flex: 0 0 34px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: #fff !important;
}
#fpt360-cb .fptcb-avatar img,
#fpt360-cb .fptcb-avatar svg {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	display: block !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
#fpt360-cb .fptcb-ten {
	flex: 1 1 auto !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	min-width: 0 !important;
	text-transform: none !important;
}
#fpt360-cb .fptcb-cham {
	width: 8px !important;
	height: 8px !important;
	flex: 0 0 8px !important;
	border-radius: 50% !important;
	background: #22c55e !important;
	box-shadow: 0 0 0 2px rgba(34, 197, 94, .3) !important;
	font-style: normal !important;
}
#fpt360-cb .fptcb-actions { display: flex !important; align-items: center !important; gap: 6px !important; }
#fpt360-cb .fptcb-ico {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .18) !important;
	background-image: none !important;
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s ease;
}
#fpt360-cb .fptcb-ico:hover { background: rgba(255, 255, 255, .32) !important; color: #fff !important; }
#fpt360-cb .fptcb-ico svg { display: block !important; }

/* Thân khung */
#fpt360-cb .fptcb-body {
	background: #fff !important;
	border-radius: 12px !important;
	margin: 0 8px 8px !important;
	padding: 16px 16px 14px !important;
	max-height: min(62vh, 430px) !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}
#fpt360-cb .fptcb-tieude {
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #111827 !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
#fpt360-cb .fptcb-label {
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #374151 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
#fpt360-cb .fptcb-label b { color: #dc2626 !important; font-weight: 400 !important; margin-right: 3px !important; }
#fpt360-cb .fptcb-label--nhom { margin-top: 14px !important; }

#fpt360-cb .fptcb-input {
	display: block !important;
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 0 10px !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	color: #111827 !important;
	background: #fff !important;
	background-image: none !important;
	border: 1px solid #d1d5db !important;
	border-width: 1px !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#fpt360-cb .fptcb-input::placeholder { color: #9ca3af !important; opacity: 1 !important; }
#fpt360-cb .fptcb-input:focus {
	outline: 0 !important;
	border-color: var(--fptcb-mau) !important;
	box-shadow: 0 0 0 3px rgba(18, 38, 107, .12) !important;
}
#fpt360-cb .fptcb-input.is-loi { border-color: #dc2626 !important; }

#fpt360-cb .fptcb-checks { display: block !important; margin: 0 0 4px !important; padding: 0 !important; }
#fpt360-cb .fptcb-check {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	font-size: 14.5px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #374151 !important;
	text-transform: none !important;
	cursor: pointer !important;
}
#fpt360-cb .fptcb-check input[type="radio"],
#fpt360-cb .fptcb-check input[type="checkbox"] {
	width: 17px !important;
	height: 17px !important;
	flex: 0 0 17px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	position: static !important;
	accent-color: var(--fptcb-mau);
	cursor: pointer !important;
}
#fpt360-cb .fptcb-check input[type="radio"] {
	appearance: auto !important;
	-webkit-appearance: radio !important;
	border-radius: 50% !important;
}
#fpt360-cb .fptcb-check input[type="checkbox"] {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
}
#fpt360-cb .fptcb-check span { font-weight: 400 !important; }

#fpt360-cb .fptcb-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

#fpt360-cb .fptcb-loi {
	margin: 8px 0 0 !important;
	padding: 8px 10px !important;
	font-size: 13.5px !important;
	line-height: 1.45 !important;
	color: #b91c1c !important;
	background: #fef2f2 !important;
	border-radius: 6px !important;
}
#fpt360-cb .fptcb-loi[hidden] { display: none !important; }

#fpt360-cb .fptcb-gui {
	/* sticky: nút gửi luôn nhìn thấy dù danh sách dịch vụ dài phải cuộn */
	position: sticky !important;
	bottom: 0 !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 14px 0 0 !important;
	padding: 13px 18px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	color: #fff !important;
	background: var(--fptcb-mau) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 -12px 14px 8px #fff !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	transition: filter .15s ease, transform .12s ease;
}
#fpt360-cb .fptcb-gui:hover { filter: brightness(1.12); background: var(--fptcb-mau) !important; color: #fff !important; }
#fpt360-cb .fptcb-gui:active { transform: translateY(1px); }
#fpt360-cb .fptcb-gui:disabled { opacity: .65 !important; cursor: default !important; }

/* Màn hình cảm ơn */
#fpt360-cb .fptcb-xong { text-align: center !important; padding: 8px 0 4px !important; margin: 0 !important; }
#fpt360-cb .fptcb-xong[hidden] { display: none !important; }
#fpt360-cb .fptcb-form[hidden] { display: none !important; }
#fpt360-cb .fptcb-tick {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	margin: 6px auto 14px !important;
	border-radius: 50% !important;
	background: #dcfce7 !important;
	color: #16a34a !important;
}
#fpt360-cb .fptcb-camon { margin: 0 0 16px !important; padding: 0 !important; font-size: 14.5px !important; line-height: 1.5 !important; color: #4b5563 !important; }
#fpt360-cb .fptcb-lienhe { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#fpt360-cb .fptcb-lienhe a {
	display: block !important;
	margin: 0 !important;
	padding: 11px 16px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	background: var(--fptcb-mau) !important;
	background-image: none !important;
	box-shadow: none !important;
}
#fpt360-cb .fptcb-lienhe a.fptcb-zalo { background: #0068ff !important; }
#fpt360-cb .fptcb-lienhe a:hover { filter: brightness(1.12); color: #fff !important; }

/* ---------- Điện thoại ---------- */
@media (max-width: 480px) {
	#fpt360-cb.fpt360-cb--phai { right: 12px !important; }
	#fpt360-cb.fpt360-cb--trai { left: 12px !important; }
	#fpt360-cb.is-open { bottom: 12px !important; }
	#fpt360-cb .fptcb-panel { width: calc(100vw - 24px) !important; }
	#fpt360-cb .fptcb-body { max-height: 58vh !important; }
	#fpt360-cb .fptcb-bubble { width: 54px !important; height: 54px !important; }
}