/**
 * Glass skin — đồng bộ CTA, form, panel CTA và widget chat của các trang con
 * về Black Liquid Glass (spec docs/design/solo-ux-ui-spec.md §5, §19, §24).
 *
 * Chỉ đổi GIAO DIỆN: không đổi markup, class JS dùng, data-track/data-*-track,
 * tên field form. Nạp SAU mọi stylesheet của theme (functions.php, priority 30)
 * nên selector cùng specificity với rule cũ là thắng.
 *
 *   1. Nút chính: gold gradient pill (như .sgl-btn--primary)
 *   2. Nút phụ: glass ghost (spec §19: không outline vàng cho mọi nút phụ)
 *   3. Chip lọc đang chọn
 *   4. Form: panel kính khói (form dài không blur — spec §5.6), ô nhập kính,
 *      vòng focus vàng, select mũi tên vàng, autofill tối, textarea
 *   5. Panel CTA + thanh CTA dính mobile
 *   6. Widget chat (plugin Sticky Chat Widget) — màu do plugin chèn bằng
 *      selector #id sau theme → buộc dùng !important, CHỈ cho thuộc tính vẽ
 *      (không đụng vị trí/kích thước/transform mà JS plugin tính toán)
 *
 * Token: --sg-* (glass.css). Class prefix không dùng ad-/ads- (EasyList).
 */

/* =========================================================
   1. NÚT CHÍNH — gold gradient pill
   ========================================================= */

.sm-btn--primary,
.svc-sticky__cta,
.art-btn:not(.art-btn--outline),
.prj-btn:not(.prj-btn--outline),
.solo-form__submit,
.solo-blog-cta__btn,
.solo-about__cta-btn,
.wp-block-post-comments-form .form-submit input[type="submit"],
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	/* background-image (không dùng shorthand): nút core trong nội dung DB mang
	   .has-gold-background-color {background-color: … !important} — gradient
	   vẫn vẽ đè lên màu nền đó. */
	background-color: var(--sg-gold);
	background-image: var(--sg-gradient-gold);
	color: #090909;
	/* Chỉ đổi màu viền (không thêm viền): nút không viền giữ nguyên chiều cao —
	   thanh CTA dính tính body padding theo chiều cao thanh. */
	border-color: transparent;
	border-radius: var(--sg-radius-pill);
	box-shadow:
		0 6px 20px rgba(253, 184, 19, .14),
		inset 0 1px 0 rgba(255, 255, 255, .28);
	text-decoration: none;
	transition:
		transform var(--sg-motion-fast) var(--sg-ease),
		box-shadow var(--sg-motion-normal) var(--sg-ease),
		filter var(--sg-motion-fast) var(--sg-ease);
}

.sm-btn--primary:hover,
.sm-btn--primary:focus-visible,
.svc-sticky__cta:hover,
.art-btn:not(.art-btn--outline):hover,
.prj-btn:not(.prj-btn--outline):hover,
.solo-form__submit:hover,
.solo-blog-cta__btn:hover,
.solo-about__cta-btn:hover,
.wp-block-post-comments-form .form-submit input[type="submit"]:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--sg-gold);
	background-image: var(--sg-gradient-gold);
	color: #090909;
	transform: translateY(-1px);
	box-shadow:
		0 10px 28px rgba(253, 184, 19, .20),
		inset 0 1px 0 rgba(255, 255, 255, .30);
}

/* Nút có hiệu ứng trượt khi cuộn tới (.svc-reveal, style.css): giữ transform .7s. */
.sm-btn--primary.svc-reveal {
	transition:
		transform .7s var(--ease, var(--sg-ease)),
		box-shadow var(--sg-motion-normal) var(--sg-ease),
		filter var(--sg-motion-fast) var(--sg-ease);
}

/* Chạm target ≥ 48px cho nút cỡ vừa; nút --sm trong thanh dính giữ nguyên chiều cao
   (padding-bottom của body + offset widget chat tính theo chiều cao thanh). */
.sm-btn--md,
.solo-form__submit {
	min-height: 48px;
}

/* Nhãn dài (vd "Nhận tư vấn tăng trưởng miễn phí") trong card hẹp 320px: cho xuống dòng. */
.sm-btn--block {
	white-space: normal;
	line-height: 1.25;
	text-align: center;
}

.solo-form__submit {
	padding-inline: 2rem;
}

/* Mobile: .sm-btn đặt nowrap → nhãn dài ("Trao đổi về hệ thống creative cho
   doanh nghiệp", 441px) tràn ngang cả trang ở 375px. Cho xuống dòng, không vượt khung. */
@media (max-width: 600px) {
	.sm-btn {
		max-width: 100%;
		white-space: normal;
		line-height: 1.25;
		text-align: center;
	}
}

/* =========================================================
   2. NÚT PHỤ — glass ghost
   ========================================================= */

.sm-btn--outline,
.sm-btn--ghost,
.svc-page .sm-btn--ghost,
.svc-sticky__call,
.art-btn--outline,
.art-prose .art-btn--outline,
.prj-btn--outline,
.wp-block-button.is-style-outline > .wp-block-button__link,
.solo-about__hero-actions .is-style-outline .wp-block-button__link {
	background-color: rgba(255, 255, 255, .04);
	background-image: none;
	/* .has-gold-color {color: … !important} trên nút outline trong nội dung DB. */
	color: var(--sg-white) !important;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--sg-radius-pill);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	text-decoration: none;
	transition:
		background-color var(--sg-motion-fast) var(--sg-ease),
		border-color var(--sg-motion-fast) var(--sg-ease),
		transform var(--sg-motion-fast) var(--sg-ease);
}

.sm-btn--outline:hover,
.sm-btn--outline:focus-visible,
.sm-btn--ghost:hover,
.svc-page .sm-btn--ghost:hover,
.svc-sticky__call:hover,
.art-btn--outline:hover,
.art-prose .art-btn--outline:hover,
.prj-btn--outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.solo-about__hero-actions .is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, .07);
	background-image: none;
	border-color: rgba(255, 255, 255, .18);
	color: var(--sg-white) !important;
}

/* Icon trong nút phụ (điện thoại, Zalo…) giữ điểm nhấn vàng. */
.sm-btn--outline .ti,
.sm-btn--ghost .ti,
.svc-sticky__call .ti,
.art-btn--outline .ti,
.prj-btn--outline .ti {
	color: var(--sg-yellow);
}

/* Icon mạng xã hội trang Liên hệ: vòng kính, hover vàng gradient; 44px chạm (§16.5).
   Scope main: footer dùng cùng class nhưng giữ thiết kế footer riêng (glass.css). */
main .solo-contact-social a {
	width: 44px;
	height: 44px;
	background-color: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

main .solo-contact-social a:hover,
main .solo-contact-social a:focus-visible {
	background-color: var(--sg-gold);
	background-image: var(--sg-gradient-gold);
	border-color: transparent;
	color: #090909;
}

main .solo-contact-social a:focus-visible {
	outline: 2px solid var(--sg-yellow);
	outline-offset: 3px;
}

/* Core outline: WP đặt border 2px + padding .667em — đưa về 1px, padding pill. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: .85rem 1.75rem;
}

/* Vòng focus rõ cho mọi nút (trước đây sm-btn / submit form chỉ có outline UA). */
.sm-btn:focus-visible,
.svc-sticky__cta:focus-visible,
.svc-sticky__call:focus-visible,
.solo-form__submit:focus-visible,
.solo-blog-cta__btn:focus-visible,
.solo-about__cta-btn:focus-visible,
.wp-block-button__link:focus-visible,
.solo-filter__btn:focus-visible {
	outline: 2px solid var(--sg-yellow);
	outline-offset: 3px;
}

/* =========================================================
   3. CHIP LỌC ĐANG CHỌN (dự án theo ngành, phân trang, tab)
   ========================================================= */

/* Trạng thái thường (kính ghost) nằm ở rule gốc style.css (.solo-filter__btn,
   .solo-pagination li > .page-numbers, .cm-gtabs__btn). */
.solo-filter__btn.is-active,
.solo-pagination .page-numbers.current,
.cm-gtabs__btn.is-active {
	background-color: var(--sg-gold);
	background-image: var(--sg-gradient-gold);
	border-color: transparent;
	color: #090909;
	box-shadow: 0 6px 18px rgba(253, 184, 19, .14), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* =========================================================
   4. FORM — panel kính khói + ô nhập kính
   ========================================================= */

/* Panel: form liên hệ (trước nằm trơ trên nền), lead form (card đục). */
.solo-form-wrap,
.svc-form-card {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(circle at 12% -10%, rgba(253, 184, 19, .12), transparent 40%),
		linear-gradient(145deg, rgba(30, 30, 30, .72), rgba(8, 8, 8, .5));
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--sg-radius-lg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		inset 0 -1px 0 rgba(253, 184, 19, .04),
		0 24px 70px rgba(0, 0, 0, .45);
}

.solo-form-wrap {
	padding: clamp(22px, 3vw, 36px);
}

/* Lead form trên ảnh nền (trang giải pháp premium): chỗ duy nhất có nội dung
   phía sau → kính thật với blur. */
.sol-lead--bg .svc-form-card {
	background:
		radial-gradient(circle at 12% -10%, rgba(253, 184, 19, .14), transparent 40%),
		linear-gradient(145deg, rgba(30, 30, 30, .6), rgba(8, 8, 8, .4));
	-webkit-backdrop-filter: blur(22px) saturate(120%);
	backdrop-filter: blur(22px) saturate(120%);
}

.svc-form__title {
	font-weight: 700;
	letter-spacing: -.01em;
}

.solo-form__field,
.svc-field {
	gap: .45rem;
	font-size: .86rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .72);
}

/* Native control tối (popup select, checkbox, autofill picker). */
.solo-form,
.svc-form,
.art-comments__panel {
	color-scheme: dark;
}

.solo-form input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])),
.solo-form select,
.solo-form textarea,
.svc-field input,
.svc-field select,
.svc-field textarea,
.art-comments__panel input[type="text"],
.art-comments__panel input[type="email"],
.art-comments__panel input[type="url"],
.art-comments__panel textarea {
	width: 100%;
	min-height: 48px;
	padding: .8rem 1rem;
	font-family: var(--sg-font);
	/* ≥ 16px: iOS Safari không tự zoom khi focus. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--sg-white);
	background-color: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
	transition:
		border-color var(--sg-motion-fast) var(--sg-ease),
		box-shadow var(--sg-motion-fast) var(--sg-ease),
		background-color var(--sg-motion-fast) var(--sg-ease);
}

/* Trước đây .svc-field textarea không có rule → ô "Ghi chú" (Content Marketing)
   hiện nền trắng, chữ monospace mặc định trình duyệt. */
.solo-form textarea,
.svc-field textarea,
.art-comments__panel textarea {
	min-height: 120px;
	resize: vertical;
}

.solo-form input::placeholder,
.solo-form textarea::placeholder,
.svc-field input::placeholder,
.svc-field textarea::placeholder,
.art-comments__panel input::placeholder,
.art-comments__panel textarea::placeholder {
	/* .55 ≈ 6:1 trên nền ô nhập (≥ 4.5:1 AA) — placeholder có gợi ý định dạng. */
	color: rgba(255, 255, 255, .55);
}

.solo-form input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])):hover,
.solo-form select:hover,
.solo-form textarea:hover,
.svc-field input:hover,
.svc-field select:hover,
.svc-field textarea:hover,
.art-comments__panel input[type="text"]:hover,
.art-comments__panel input[type="email"]:hover,
.art-comments__panel input[type="url"]:hover,
.art-comments__panel textarea:hover {
	border-color: rgba(255, 255, 255, .24);
}

/* Sai định dạng — chỉ sau khi người dùng đã tương tác (không đỏ lúc mới tải). */
.solo-form input:user-invalid,
.solo-form textarea:user-invalid,
.svc-field input:user-invalid,
.svc-field select:user-invalid,
.svc-field textarea:user-invalid,
.art-comments__panel input:user-invalid,
.art-comments__panel textarea:user-invalid {
	border-color: rgba(255, 120, 120, .7);
}

/* Vòng focus vàng rõ (trước chỉ đổi màu viền 1px, outline bị tắt). */
.solo-form input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])):focus,
.solo-form select:focus,
.solo-form textarea:focus,
.svc-field input:focus,
.svc-field select:focus,
.svc-field textarea:focus,
.art-comments__panel input[type="text"]:focus,
.art-comments__panel input[type="email"]:focus,
.art-comments__panel input[type="url"]:focus,
.art-comments__panel textarea:focus {
	outline: none;
	background-color: rgba(255, 255, 255, .06);
	border-color: rgba(253, 184, 19, .6);
	box-shadow: 0 0 0 4px rgba(253, 184, 19, .14);
}

/* Select: bỏ mũi tên hệ thống, dùng chevron vàng. */
.solo-form select,
.svc-field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDB813' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 16px;
	cursor: pointer;
}

.solo-form select option,
.svc-field select option {
	background-color: #111;
	color: var(--sg-white);
}

/* Autofill Chrome: không để ô sáng xanh giữa form tối. */
.solo-form input:-webkit-autofill,
.svc-field input:-webkit-autofill,
.art-comments__panel input:-webkit-autofill {
	-webkit-text-fill-color: var(--sg-white);
	caret-color: var(--sg-white);
	-webkit-box-shadow: 0 0 0 1000px #151515 inset;
	box-shadow: 0 0 0 1000px #151515 inset;
	transition: background-color 9999s ease-out 0s;
}

.solo-form input:-webkit-autofill:focus,
.svc-field input:-webkit-autofill:focus,
.art-comments__panel input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #151515 inset, 0 0 0 4px rgba(253, 184, 19, .14);
	box-shadow: 0 0 0 1000px #151515 inset, 0 0 0 4px rgba(253, 184, 19, .14);
}

.art-comments__panel input[type="checkbox"] {
	accent-color: var(--sg-yellow);
}

/* Thông báo gửi thành công / lỗi (dùng chung form liên hệ + lead form + lỗi do JS chèn). */
.solo-form__notice {
	border-radius: var(--sg-radius-sm);
	padding: .9rem 1.1rem;
	line-height: 1.55;
}

.solo-form__notice--ok {
	background: rgba(253, 184, 19, .1);
	border: 1px solid rgba(253, 184, 19, .45);
}

.solo-form__notice--err {
	background: rgba(255, 90, 90, .08);
	border: 1px solid rgba(255, 120, 120, .45);
}

/* Trạng thái gửi thành công của lead form. */
.svc-form-ok__icon {
	background-image: var(--sg-gradient-gold);
	color: #090909;
	box-shadow: 0 10px 30px rgba(253, 184, 19, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* =========================================================
   5. PANEL CTA + THANH CTA DÍNH MOBILE
   ========================================================= */

.solo-blog-cta,
.art-cta,
.prj-ctapanel,
.prj-side__cta,
.svc-upsell,
.solo-about__cta {
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(253, 184, 19, .16), transparent 60%),
		linear-gradient(145deg, rgba(30, 30, 30, .78), rgba(8, 8, 8, .55));
	border: 1px solid rgba(253, 184, 19, .24);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .1),
		0 24px 60px rgba(0, 0, 0, .4);
}

.solo-blog-cta,
.art-cta {
	border-radius: var(--sg-radius-md);
}

.prj-ctapanel,
.solo-about__cta {
	border-radius: var(--sg-radius-lg);
}

/* Trang giới thiệu: panel vàng đặc chữ đen → panel kính, chữ trắng + nút vàng. */
.solo-about__cta,
.solo-about__cta h2 {
	color: var(--sg-white);
}

.solo-about__cta-eyebrow {
	color: var(--sg-yellow);
}

.solo-about__cta-sub {
	color: var(--sg-muted);
}

.solo-about__cta-sub a {
	color: var(--sg-white);
}

.solo-about__cta-btn {
	padding: .9rem 1.75rem;
}

/* Thanh CTA dính cuối màn hình mobile (dịch vụ / bài viết / dự án): kính khói.
   Giữ nguyên padding → chiều cao thanh không đổi (body padding-bottom + offset
   widget chat đang tính theo 74px / 68px). */
@media (max-width: 720px) {
	.svc-sticky,
	.art-mcta,
	.prj-mcta {
		background: linear-gradient(180deg, rgba(22, 22, 22, .78), rgba(8, 8, 8, .9));
		-webkit-backdrop-filter: blur(18px) saturate(120%);
		backdrop-filter: blur(18px) saturate(120%);
		border-top: 1px solid rgba(255, 255, 255, .1);
		box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
	}

	/* Nhãn dài nhất "Nhận tư vấn Content Marketing" cần 237px ở 15.2px, nút chỉ còn
	   ~228px ở màn 375 → co chữ theo viewport để giữ 1 dòng (360px vẫn vừa).
	   line-height gọn: nếu màn rất hẹp phải xuống 2 dòng thì thanh chỉ cao thêm ít. */
	.svc-sticky__cta {
		font-size: min(.95rem, 3.8vw);
		line-height: 1.2;
		padding-inline: .7rem;
		text-align: center;
	}
}

/* =========================================================
   6. WIDGET CHAT (Sticky Chat Widget)
   ========================================================= */

/* Thu nhỏ cả widget 12.5% (refinement §15: 10–15%) bằng thuộc tính `scale` riêng —
   KHÔNG đổi transform/kích thước mà JS plugin dùng để tính vị trí trượt (64px):
   offset trượt nằm bên trong nên co theo. Nút 56 → 49px, vẫn ≥ 44px chạm. */
div.gsb-buttons {
	scale: .875;
	transform-origin: 100% 100%;
}

/* Mobile: sát góc hơn để ít che nội dung, chừa thanh trình duyệt (safe area).
   (0,2,1) thua các offset trên thanh CTA dính body.*-has-sticky-cta (0,2,2). */
@media (max-width: 720px) {
	div.gsb-buttons.right-side {
		right: 14px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	/* Dòng © cuối footer không nằm dưới nút chat (trang có thanh CTA dính đã có
	   padding-bottom riêng trên body và nút chat nằm trên thanh → không cộng thêm). */
	body:not(:has(.svc-sticky, .art-mcta, .prj-mcta)) .sgl-footer {
		padding-bottom: 96px;
	}
}

/* Nút mở/đóng chính: gold gradient tròn, icon tối. */
.gsb-buttons .gsb-trigger .gsb-trigger-top .chat-button-link,
.gsb-buttons .gsb-trigger .gsb-trigger-top .chat-button-link:hover,
.gsb-buttons .gsb-trigger .gsb-trigger-bottom .chat-button-link,
.gsb-buttons .gsb-trigger .gsb-trigger-bottom .chat-button-link:hover {
	background: var(--sg-gradient-gold) !important;
	color: #090909 !important;
	/* Quầng −33% (§15, §26: chat là ưu tiên thấp nhất, không tranh CTA/lõi vàng hero). */
	box-shadow:
		0 6px 20px rgba(253, 184, 19, .2),
		inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

.gsb-buttons .gsb-trigger .gsb-trigger-top .chat-button-link:hover,
.gsb-buttons .gsb-trigger .gsb-trigger-bottom .chat-button-link:hover {
	filter: brightness(1.04);
}

.gsb-buttons .gsb-trigger .chat-button-link svg {
	fill: #090909 !important;
	color: #090909 !important;
}

/* Hiệu ứng "shockwave" (nảy liên tục kiểu gaming) → quầng vàng chậm, êm (§15). */
.gsb-buttons .ginger-btn-shockwave {
	animation: none !important;
}

/* Quầng nhạt hơn, 2 nhịp rồi dừng — tổng ≈ 5s (WCAG 2.2.2: chuyển động tự chạy
   không quá 5s nếu không có nút dừng). */
.gsb-buttons .ginger-btn-shockwave::before,
.gsb-buttons .ginger-btn-shockwave::after {
	animation: sgl-gsb-halo 2.2s var(--sg-ease) 2 !important;
}

.gsb-buttons .ginger-btn-shockwave::after {
	animation-delay: .6s !important;
}

@keyframes sgl-gsb-halo {
	0% {
		box-shadow: 0 0 0 2px rgba(253, 184, 19, .35), 0 0 14px rgba(253, 184, 19, .18);
		transform: scale(1);
		opacity: 1;
	}
	80%,
	100% {
		box-shadow: 0 0 0 1px rgba(253, 184, 19, 0), 0 0 20px rgba(253, 184, 19, 0);
		transform: scale(1.5);
		opacity: 0;
	}
}

/* Nhãn "Liên hệ tư vấn": pill kính tối. */
.gsb-buttons .cta-tooltip {
	background: linear-gradient(145deg, rgba(30, 30, 30, .9), rgba(8, 8, 8, .78)) !important;
	color: var(--sg-white) !important;
	border-radius: var(--sg-radius-pill) !important;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .14),
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 12px 32px rgba(0, 0, 0, .45) !important;
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	backdrop-filter: blur(18px) saturate(120%);
	/* Cỡ chữ bù cho scale .875 của widget → hiển thị ≈ 14px. */
	padding: 9px 18px !important;
	font-family: var(--sg-font) !important;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 22px !important;
}

/* Nhãn "Liên hệ tư vấn": mặc định trong suốt (chỉ thấy icon). chat-cta.js bật
   html.smx-chat-cta sau 2.5s hoặc khi cuộn > 20% trang, tự thu sau 5s (§15). Rê
   chuột / focus bàn phím vẫn hiện; Esc ẩn (html.smx-chat-cta-off). Chỉ dùng
   opacity — KHÔNG visibility:hidden để trình đọc màn hình vẫn đọc được nhãn
   (plugin đã đặt pointer-events:none nên nhãn ẩn không chặn bấm). Plugin luôn
   gắn .cooltipz--visible (show_cta=all_time) với selector (0,2,0)–(0,3,0) không
   !important → (0,4,0) ở đây thắng. */
.gsb-buttons .gsb-trigger .gsb-trigger-top .cta-tooltip {
	opacity: 0;
	transform: translate(0, 50%);
	transition:
		opacity var(--sg-motion-normal) var(--sg-ease),
		transform var(--sg-motion-normal) var(--sg-ease);
}

html.smx-chat-cta .gsb-buttons:not(.open-buttons) .gsb-trigger .gsb-trigger-top .cta-tooltip,
.gsb-buttons .gsb-trigger .gsb-trigger-top .chat-button-link:focus-visible ~ .cta-tooltip {
	opacity: 1;
	transform: translate(-10px, 50%);
}

@media (hover: hover) and (pointer: fine) {
	/* WCAG 1.4.13: nhãn hiện khi rê phải rê vào được → nhận con trỏ + cầu nối
	   phủ khoảng trống giữa nhãn và nút. */
	.gsb-buttons:not(.open-buttons) .gsb-trigger .gsb-trigger-top:hover .cta-tooltip {
		opacity: 1;
		transform: translate(-10px, 50%);
		pointer-events: auto;
	}

	.gsb-buttons .gsb-trigger .gsb-trigger-top:hover .cta-tooltip::before {
		content: "";
		position: absolute;
		inset: 0 -22px 0 0;
	}
}

/* Esc (chat-cta.js): ẩn nhãn đang hiện cho tới khi rời widget. */
html.smx-chat-cta-off .gsb-buttons .gsb-trigger .gsb-trigger-top .cta-tooltip {
	opacity: 0 !important;
	pointer-events: none !important;
}

.gsb-buttons .cta-tooltip p {
	background: transparent !important;
	color: inherit !important;
	font: inherit !important;
}

.gsb-buttons .cta-tooltip::after {
	display: none;
}

/* Các kênh (gọi, Messenger, Zalo, LinkedIn): vòng kính tối, icon trắng → vàng khi hover. */
.gsb-buttons .gsb-button-list .chat-button .chat-button-link {
	background: linear-gradient(145deg, rgba(34, 34, 34, .86), rgba(8, 8, 8, .7)) !important;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .16),
		inset 0 1px 0 rgba(255, 255, 255, .14),
		0 10px 30px rgba(0, 0, 0, .45) !important;
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	backdrop-filter: blur(18px) saturate(120%);
}

.gsb-buttons .gsb-button-list .chat-button .chat-button-link:hover {
	background: linear-gradient(145deg, rgba(48, 40, 18, .9), rgba(12, 10, 4, .78)) !important;
	box-shadow:
		inset 0 0 0 1px rgba(253, 184, 19, .55),
		0 10px 30px rgba(0, 0, 0, .45) !important;
}

.gsb-buttons .gsb-button-list .chat-button-link .chat-button-icon {
	background: transparent !important;
}

.gsb-buttons .gsb-button-list .chat-button-link svg {
	fill: var(--sg-white) !important;
	color: var(--sg-white) !important;
}

.gsb-buttons .gsb-button-list .chat-button-link:hover svg {
	fill: var(--sg-yellow) !important;
	color: var(--sg-yellow) !important;
}

/* Nhãn tên kênh khi hover. */
.gsb-buttons .gsb-button-list [data-scb][data-tooltip-dir]::after {
	background: rgba(14, 14, 14, .9) !important;
	color: var(--sg-white) !important;
	border-radius: var(--sg-radius-pill) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 32px rgba(0, 0, 0, .45) !important;
	font-family: var(--sg-font) !important;
	/* Bù scale .875 → hiển thị ≈ 14px. */
	font-size: 16px !important;
}

.gsb-buttons .gsb-button-list [data-scb][data-tooltip-dir="left"]::before {
	border-left-color: rgba(14, 14, 14, .9) !important;
}

.gsb-buttons .chat-button-link:focus-visible {
	outline: 2px solid var(--sg-yellow);
	outline-offset: 3px;
}

/* =========================================================
   7. DANH SÁCH BÀI VIẾT (/blog/ — page-blog.html, danh mục — category.html)
   Khung ảnh kính như mục Insights trang chủ (home.css .sgl-posts); bài chưa có
   ảnh đại diện → khung kính tối + logo tia chớp Solo thay vì để trống (card lệch hàng).
   ========================================================= */

.solo-postgrid .wp-block-post-featured-image {
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: var(--sg-radius-md);
	border: 1px solid rgba(255, 255, 255, .08);
	background: var(--sg-charcoal);
}

.solo-postgrid .wp-block-post-featured-image img {
	display: block;
	transition: transform 900ms var(--sg-ease);
}

.solo-postgrid .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.solo-postgrid .wp-block-post:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 16px;
	border-radius: var(--sg-radius-md);
	border: 1px solid rgba(255, 255, 255, .08);
	background:
		url("../images/logo-mark.webp") center / auto 34% no-repeat,
		radial-gradient(circle at 50% 45%, rgba(253, 184, 19, .16), transparent 55%),
		linear-gradient(145deg, #1a1a1a, #0b0b0b);
}

/* Eyebrow "Blog / Insights" trên trang danh mục là link về /blog/. */
.solo-signature a {
	color: inherit;
	text-decoration: none;
}

.solo-signature a:hover {
	color: var(--sg-white);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	/* Cùng selector (cùng specificity) với mục 1–2 để thắng cascade. */
	.sm-btn--primary,
	.sm-btn--primary.svc-reveal,
	.svc-sticky__cta,
	.art-btn:not(.art-btn--outline),
	.prj-btn:not(.prj-btn--outline),
	.solo-form__submit,
	.solo-blog-cta__btn,
	.solo-about__cta-btn,
	.wp-block-post-comments-form .form-submit input[type="submit"],
	.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
	.sm-btn--outline,
	.sm-btn--ghost,
	.svc-page .sm-btn--ghost,
	.svc-sticky__call,
	.art-btn--outline,
	.art-prose .art-btn--outline,
	.prj-btn--outline,
	.wp-block-button.is-style-outline > .wp-block-button__link,
	.solo-about__hero-actions .is-style-outline .wp-block-button__link {
		transition: none;
	}

	.sm-btn--primary:hover,
	.sm-btn--primary:focus-visible,
	.svc-sticky__cta:hover,
	.art-btn:not(.art-btn--outline):hover,
	.prj-btn:not(.prj-btn--outline):hover,
	.solo-form__submit:hover,
	.solo-blog-cta__btn:hover,
	.solo-about__cta-btn:hover,
	.wp-block-post-comments-form .form-submit input[type="submit"]:hover,
	.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
		transform: none;
	}

	.gsb-buttons .ginger-btn-shockwave,
	.gsb-buttons .ginger-btn-shockwave::before,
	.gsb-buttons .ginger-btn-shockwave::after {
		animation: none !important;
	}

	.gsb-buttons .cta-tooltip {
		transition: none !important;
	}

	.solo-postgrid .wp-block-post-featured-image img {
		transition: none;
	}

	.solo-postgrid .wp-block-post:hover .wp-block-post-featured-image img {
		transform: none;
	}
}