/* Group stylesheet for the button widgets. The button shape itself lives in alovesinh-base.css. */

.alovesinh-button-row {
	--alv-row-align: stretch;
	--alv-row-wrap: wrap;
}

.alovesinh-contact-actions {
	--alv-card-pad: var(--alv-sp-1a) var(--alv-sp-2c);
	--alv-card-bg: var(--alv-c-white);
	--alv-card-border: var(--alv-c-border);
	--alv-card-border-hover: var(--alv-c-border);
	--alv-card-shadow: var(--alv-sh-3);
	--alv-card-shadow-hover: var(--alv-sh-3);
	border-radius: var(--alv-r-3);
}

.alovesinh-contact-actions:hover {
	transform: none;
}

.alovesinh-contact-actions-grid {
	--alv-grid-cols-sm: 1;
	--alv-grid-cols-md: 1;
	--alv-grid-cols: 3;
	--alv-grid-gap-md: 0px;
	--alv-grid-gap: 0px;
	--alv-grid-width: 100%;
}

.alovesinh-contact-actions-action {
	display: flex;
	align-items: center;
	gap: var(--alv-sp-2);
	min-width: 0;
	min-height: calc(var(--alv-sp-4f) + 2 * var(--alv-sp-1a));
	padding: var(--alv-sp-1a) var(--alv-sp-2c);
	border-radius: var(--alv-r-pill);
	color: var(--alv-c-ink);
	text-decoration: none;
	transition: background var(--alv-dur-2) ease;
}

.alovesinh-contact-actions-action:hover {
	color: var(--alv-c-ink);
	background: var(--alv-c-brand-wash);
}

.alovesinh-contact-actions-action:not(:last-child) {
	border-bottom: var(--alv-bd-hairline) solid var(--alv-c-border);
}

.alovesinh-contact-actions-icon {
	--alv-icon-box: var(--alv-sp-4f);
	--alv-icon-size: var(--alv-sp-3a);
	--alv-icon-radius: var(--alv-r-circle);
	--alv-icon-color: var(--alv-c-white);
}

.alovesinh-contact-actions-action-hotline .alovesinh-contact-actions-icon {
	--alv-icon-bg: linear-gradient(135deg, var(--alv-c-accent), var(--alv-c-accent-strong));
}

.alovesinh-contact-actions-action-email .alovesinh-contact-actions-icon,
.alovesinh-contact-actions-action-booking .alovesinh-contact-actions-icon {
	--alv-icon-bg: linear-gradient(135deg, var(--alv-c-brand), var(--alv-c-brand-deep));
}

.alovesinh-contact-actions-action-zalo .alovesinh-contact-actions-icon {
	--alv-icon-bg: var(--alv-c-zalo);
}

.alovesinh-chan-trang .alovesinh-contact-actions-action-hotline .alovesinh-contact-actions-icon {
	--alv-icon-color: var(--alv-c-white);
}

.alovesinh-chan-trang .alovesinh-contact-actions-action-booking .alovesinh-contact-actions-icon {
	--alv-icon-bg: var(--alv-c-brand-deep);
	--alv-icon-color: var(--alv-c-white);
}

.alovesinh-chan-trang
	.alovesinh-contact-actions-action-zalo
	.alovesinh-contact-actions-icon
	svg
	path:last-child {
	fill: var(--alv-c-zalo);
}

.alovesinh-contact-actions-copy {
	min-width: 0;
}

.alovesinh-contact-actions-title,
.alovesinh-contact-actions-description {
	display: block;
}

.alovesinh-contact-actions-title {
	font-size: var(--alv-fs-3a);
	font-weight: var(--alv-fw-extrabold);
	line-height: var(--alv-lh-headline);
	color: var(--alv-c-ink);
}

.alovesinh-contact-actions-description {
	margin-top: var(--alv-sp-0b);
	font-size: var(--alv-fs-2);
	line-height: var(--alv-lh-base);
	color: var(--alv-c-text-muted);
	overflow-wrap: anywhere;
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions {
	--alv-card-pad: var(--alv-sp-1a) var(--alv-sp-2c);
	--alv-card-bg-hover: var(--alv-card-bg);
	box-sizing: border-box;
	width: 100%;
	block-size: var(--alv-footer-quickbar-block-size);
	padding: var(--alv-card-pad);
	border: var(--alv-bd-hairline) solid var(--alv-card-border);
	border-radius: var(--alv-footer-quickbar-radius);
	background: var(--alv-card-bg);
	box-shadow: var(--alv-card-shadow);
	overflow: visible;
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions:is(:hover, :focus-within) {
	border-color: var(--alv-card-border);
	background: var(--alv-card-bg);
	box-shadow: var(--alv-card-shadow);
	transform: none;
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions-grid {
	display: grid;
	grid-template-columns: repeat(var(--alv-footer-quickbar-columns), minmax(0, 1fr));
	grid-template-rows: repeat(
		var(--alv-footer-quickbar-rows),
		var(--alv-footer-quickbar-row-size)
	);
	gap: 0;
	width: 100%;
	height: 100%;
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions-action {
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	height: 100%;
	padding: var(--alv-sp-1a) var(--alv-sp-2c);
	background: var(--alv-card-bg);
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions-title {
	font-size: var(--alv-fs-3a);
	line-height: var(--alv-lh-copy);
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions-description {
	margin-top: 0;
	font-size: var(--alv-fs-2);
	line-height: var(--alv-lh-copy);
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions-action:is(:hover, :focus-visible) {
	color: var(--alv-c-ink);
	background: var(--alv-c-brand-wash);
}

.alovesinh-chan-trang-thanh-nhanh .alovesinh-contact-actions-action:focus-visible {
	outline: var(--alv-bd-heavy) solid var(--alv-c-brand-deep);
	outline-offset: var(--alv-sp-0c);
}

.alovesinh-chan-trang :is(a, button):focus-visible {
	outline: var(--alv-bd-heavy) solid var(--alv-c-warning);
	outline-offset: var(--alv-sp-0c);
}

@media (min-width: 981px) {
	.alovesinh-contact-actions {
		border-radius: var(--alv-r-pill);
	}

	.alovesinh-contact-actions-action:not(:last-child) {
		border-right: var(--alv-bd-hairline) solid var(--alv-c-border);
		border-bottom: 0;
	}
}

.alovesinh-social-row {
	--alv-row-align: stretch;
}

.alovesinh-chan-trang .alovesinh-social-row {
	--alv-row-wrap: wrap;
	gap: var(--alv-sp-1a);
}

/* The touch floor holds even where the icon inside is small. */
.alovesinh-social-row-button {
	width: var(--alv-touch);
	height: var(--alv-touch);
	border: var(--alv-social-border, 0);
	border-radius: var(--alv-social-radius, var(--alv-r-1));
	color: var(--alv-social-color, var(--alv-c-on-dark));
	background: var(--alv-social-bg, var(--alv-c-glass-tint));
	transition:
		background var(--alv-dur-1) ease,
		color var(--alv-dur-1) ease,
		border-color var(--alv-dur-1) ease;
}

/* 18px is what the source design draws inside the 44px tile; a builder icon carries no size of
	its own and would otherwise fill the whole tile. */
.alovesinh-social-row-button svg,
.alovesinh-social-row-button i {
	width: var(--alv-sp-2d);
	height: var(--alv-sp-2d);
	font-size: var(--alv-sp-2d);
	line-height: 1;
}

.alovesinh-social-row-button:hover {
	color: var(--alv-c-white);
	background: var(--alv-c-brand-strong);
}

.alovesinh-chan-trang .alovesinh-social-row-button {
	flex-shrink: 0;
}

.alovesinh-chan-trang .alovesinh-social-row-button:is(:hover, :focus-visible) {
	color: var(--alv-c-white);
	background: var(--alv-c-brand-deep);
}

.alovesinh-chan-trang .alovesinh-social-row-button[href*='zalo.me'] {
	color: var(--alv-c-white);
}

.alovesinh-chan-trang .alovesinh-social-row-button[href*='zalo.me'] svg path:last-child {
	fill: var(--alv-c-zalo);
}

/* The share row of an article sits on white, not on the footer's deep ground, so the tile turns
	itself inside out: an outline instead of a wash, and the brand arriving on the edge and the
	mark rather than behind them. */
.alovesinh-social-row-outline :is(.alovesinh-social-row-button, .elementor-social-icon) {
	width: var(--alv-touch);
	height: var(--alv-touch);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-2);
	color: var(--alv-c-text-2);
	background: var(--alv-c-white);
	transition:
		background-color var(--alv-dur-1) ease,
		color var(--alv-dur-1) ease,
		border-color var(--alv-dur-1) ease;
}

.alovesinh-social-row-outline
	:is(.alovesinh-social-row-button, .elementor-social-icon):is(:hover, :focus) {
	border-color: var(--alv-c-brand);
	color: var(--alv-c-brand-deep);
	background: var(--alv-c-white);
	opacity: 1;
}

.alovesinh-social-row-outline
	:is(.alovesinh-social-row-button, .elementor-social-icon)
	:is(svg, i) {
	width: var(--alv-sp-2d);
	height: var(--alv-sp-2d);
	font-size: var(--alv-sp-2d);
	line-height: 1;
	color: inherit;
	fill: currentColor;
}

.alovesinh-social-row-outline
	:is(.alovesinh-social-row-button, .elementor-social-icon):is(:hover, :focus)
	:is(svg, i) {
	color: var(--alv-c-brand-deep);
	fill: currentColor;
}

.e-con:has(> .alovesinh-social-row-outline) {
	align-items: center;
}

.e-con:has(> .alovesinh-social-row-outline) .elementor-widget-text-editor {
	display: flex;
	align-items: center;
}

.e-con:has(> .alovesinh-social-row-outline) .elementor-widget-text-editor p {
	margin: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.alovesinh-call-block {
	display: flex;
	align-items: center;
	gap: var(--alv-sp-2);
	padding: var(--alv-sp-2) var(--alv-sp-3);
	border: var(--alv-bd-hairline) solid var(--alv-c-glass-edge);
	border-radius: var(--alv-r-3);
	background: var(--alv-call-bg, var(--alv-c-glass-edge-soft));
	transition:
		background var(--alv-dur-3),
		border-color var(--alv-dur-3),
		transform var(--alv-dur-3);
}

.alovesinh-call-block:hover {
	border-color: var(--alv-c-glass-ring);
	background: var(--alv-c-glass-fill);
	transform: translateY(calc(-1 * var(--alv-sp-0b)));
}

.alovesinh-call-block svg {
	flex-shrink: 0;
	width: var(--alv-sp-4d);
	height: var(--alv-sp-4d);
	padding: var(--alv-sp-1d);
	border-radius: var(--alv-r-circle);
	color: var(--alv-c-white);
	background: var(--alv-c-accent-strong);
}

.alovesinh-call-block-text {
	min-width: 0;
}

.alovesinh-call-block-number {
	display: block;
	font-size: var(--alv-fs-5);
	font-weight: var(--alv-fw-extrabold);
	letter-spacing: var(--alv-tr-tight-1);
	color: var(--alv-c-white);
}

.alovesinh-call-block-label {
	font-size: var(--alv-fs-2);
	color: var(--alv-c-on-dark);
}

.alovesinh-khuyen-mai-dem-nguoc-noi-dung > .elementor-widget-alovesinh-button-row {
	margin-top: var(--alv-sp-3);
}

@media (prefers-reduced-motion: reduce) {
	.alovesinh-call-block,
	.alovesinh-social-row-button {
		transition: none;
	}

	.alovesinh-call-block:hover {
		transform: none;
	}
}