/**
 * TrustWeb Builder - Button Widget CSS
 * Trọng lượng: < 3KB. GPU-Accelerated.
 */

/* WRAPPER ALIGNMENT */
.elementor-align-left .twb-btn-wrapper { text-align: left; }
.elementor-align-center .twb-btn-wrapper { text-align: center; }
.elementor-align-right .twb-btn-wrapper { text-align: right; }
.elementor-align-justify .twb-btn-wrapper { display: flex; }
.elementor-align-justify .twb-btn { width: 100%; justify-content: center; }

/* BASE BUTTON */
.twb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	z-index: 1;
	cursor: pointer;
	border-radius: 4px; /* Default */
}

.twb-btn-text {
	position: relative;
	z-index: 2;
}

.twb-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: transform 0.3s ease;
}

.twb-align-icon-left { margin-right: 8px; }
.twb-align-icon-right { margin-left: 8px; }

.twb-btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* =========================================
   LAYOUT STYLES
   ========================================= */

/* Outline */
.twb-btn-layout-outline .twb-btn {
	background-color: transparent !important;
	border: 2px solid var(--twb-btn-bg, #2563EB);
	color: var(--twb-btn-color, #2563EB);
}
.twb-btn-layout-outline .twb-btn:hover {
	background-color: var(--twb-btn-bg, #2563EB) !important;
	color: var(--twb-btn-hover-color, #fff) !important;
}

/* Soft */
.twb-btn-layout-soft .twb-btn {
	background-color: rgba(37, 99, 235, 0.1) !important; /* Lấy opacity từ màu nếu cần, fallback màu soft */
	color: var(--twb-btn-bg, #2563EB);
}
.twb-btn-layout-soft .twb-btn:hover {
	background-color: var(--twb-btn-bg, #2563EB) !important;
	color: var(--twb-btn-hover-color, #fff) !important;
}

/* Ghost */
.twb-btn-layout-ghost .twb-btn {
	background-color: transparent !important;
	color: var(--twb-btn-color, #2563EB);
	padding-left: 0;
	padding-right: 0;
}
.twb-btn-layout-ghost .twb-btn:hover {
	color: var(--twb-btn-bg-hover, #1d4ed8) !important;
	background-color: transparent !important;
}

/* =========================================
   HOVER EFFECTS
   ========================================= */

/* 1. Lift (Nâng lên) */
.twb-btn-hover-lift .twb-btn:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 2. Shine (Lướt sáng) */
.twb-btn-hover-shine .twb-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-25deg);
	z-index: 1;
	transition: none;
}
.twb-btn-hover-shine .twb-btn:hover::after {
	animation: twb-shine 0.75s ease forwards;
}

@keyframes twb-shine {
	100% { left: 200%; }
}

/* 3. Pulse (Nhịp đập) */
.twb-btn-hover-pulse .twb-btn:hover {
	animation: twb-pulse 1s infinite;
}

@keyframes twb-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* 4. Icon Slide */
.twb-btn-hover-icon-slide .twb-btn .twb-btn-icon {
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.twb-btn-hover-icon-slide .twb-btn:hover .twb-align-icon-right {
	transform: translateX(4px);
}
.twb-btn-hover-icon-slide .twb-btn:hover .twb-align-icon-left {
	transform: translateX(-4px);
}