/**
 * Stylesheet: Contact Page (Giao diện Liên hệ)
 *
 * Premium Vanilla CSS mapping Tailwind style structures from the original
 * homepower-theme page-contact template. Scope-locked to ensure zero conflicts.
 *
 * @package FlatsomeChild
 */

/* ----------------------------------------------------
 * Animations
 * ---------------------------------------------------- */
@keyframes hpValidationShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

.hp-validation-error {
	animation: hpValidationShake 0.4s ease-in-out;
	border-color: #ef4444 !important;
	background-color: rgba(239, 68, 68, 0.03) !important;
}

/* ----------------------------------------------------
 * Section Background and Outer Layout
 * ---------------------------------------------------- */
.hp-contact-main-section {
	background-color: #f8fafc;
	width: 100%;
}

.hp-contact-faq-section {
	background-color: #f8fafc;
	width: 100%;
}

/* ----------------------------------------------------
 * 1. Contact Form Container & Fields
 * ---------------------------------------------------- */
.hp-contact-form-col > .col-inner {
	background-color: #ffffff;
	border-radius: 1.5rem;
	border: 1px solid #f1f5f9;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
	padding: 2.5rem;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.hp-contact-form-col > .col-inner:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hp-contact-form-title {
	font-size: 1.5rem;
	font-weight: 900;
	color: #1e293b;
	margin-top: 0;
	margin-bottom: 0.5rem;
	letter-spacing: -0.025em;
}

.hp-contact-form-desc {
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	margin-top: 0;
	margin-bottom: 2rem;
}

/* Form inputs & structure */
#hp-contact-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	#hp-contact-form {
		grid-template-columns: repeat(2, 1fr);
	}
}

.hp-form-field-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	box-sizing: border-box;
}

.hp-form-field-wrap.hp-field-half {
	grid-column: span 1;
}

.hp-form-field-wrap.hp-field-full {
	grid-column: span 2;
}

@media (max-width: 639px) {
	.hp-form-field-wrap.hp-field-half {
		grid-column: span 2;
	}
}

.hp-form-submit-wrap {
	grid-column: span 2;
	width: 100%;
}

.group\/field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	position: relative;
	box-sizing: border-box;
}

.group\/field input,
.group\/field select {
	width: 100%;
	height: 2.5rem !important;
	padding: 0 1rem;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	color: #1e293b;
	font-size: 0.875rem;
	font-weight: 400;
	transition: all 0.2s ease-in-out;
	box-shadow: none;
	box-sizing: border-box;
}

.group\/field textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	color: #1e293b;
	font-size: 0.875rem;
	font-weight: 400;
	transition: all 0.2s ease-in-out;
	box-shadow: none;
	box-sizing: border-box;
}

.group\/field input::placeholder,
.group\/field textarea::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

.group\/field input:focus,
.group\/field select:focus,
.group\/field textarea:focus {
	outline: none;
	border-color: #009EE3;
	background-color: #ffffff;
	box-shadow: 0 0 0 1px #009EE3;
}

/* Custom Dropdown Arrow */
.group\/field .relative {
	width: 100%;
	position: relative;
}

.group\/field select {
	appearance: none;
	padding-right: 2.5rem;
	height: auto !important;
}

.group\/field .pointer-events-none {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #94a3b8;
	display: flex;
	align-items: center;
}

.group\/field .pointer-events-none svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Error messages styles */
.hp-field-error-msg {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #ef4444;
	margin-top: 0.375rem;
}

.hp-field-error-msg svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
}

.hp-field-error-msg.hidden {
	display: none;
}
/* Submit Button */
#hp-contact-submit-btn {
	width: 100%;
	height: 2.5rem !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0 1.5rem;
	background-color: #009EE3;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.875rem;
	border-radius: 0.5rem;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 4px 6px -1px rgba(0, 158, 227, 0.15);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: none;
	cursor: pointer;
}

#hp-contact-submit-btn:hover {
	background-color: #0a6cb7;
	box-shadow: 0 10px 15px -3px rgba(0, 158, 227, 0.25);
	transform: translateY(-1px);
}

#hp-contact-submit-btn:active {
	transform: scale(0.98);
}

#hp-contact-submit-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}
#hp-contact-submit-btn:hover svg {
	transform: translate(2px, -2px);
}

#hp-contact-submit-btn .hp-btn-spinner {
	animation: spin 1s linear infinite;
}

#hp-contact-submit-btn svg.hidden,
#hp-contact-submit-btn .hp-btn-spinner.hidden {
	display: none;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}


/* ----------------------------------------------------
 * 2. Contact Info & Callout Cards
 * ---------------------------------------------------- */
.hp-contact-info-col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	box-sizing: border-box;
}

.hp-contact-info-card {
	background-color: #ffffff;
	border-radius: 1.5rem;
	border: 1px solid #f1f5f9;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
	padding: 2rem;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.hp-contact-info-card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hp-contact-info-title {
	font-size: 1.25rem;
	font-weight: 900;
	color: #1e293b;
	margin-top: 0;
	margin-bottom: 2rem;
	letter-spacing: -0.025em;
}

.hp-contact-info-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hp-contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.hp-contact-icon-wrap {
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	background-color: #E6F4FF;
	border: 1px solid rgba(224, 242, 254, 0.5);
	color: #009EE3;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.hp-contact-info-item:hover .hp-contact-icon-wrap {
	background-color: #009EE3;
	color: #ffffff;
}

.hp-contact-icon-wrap svg,
.hp-contact-icon-wrap svg path {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hp-contact-info-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 900;
	color: #1e293b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
}

.hp-contact-info-val {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #64748b;
	margin-top: 0.125rem;
	margin-bottom: 0 !important;
	text-decoration: none;
	transition: color 0.2s ease;
	text-align: left;
}

a.hp-contact-info-val:hover {
	color: #009EE3;
}

.hp-contact-info-sub {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #94a3b8;
	margin-top: 0.125rem;
	text-align: left;
}

/* Callout Card */
.hp-contact-callout-card {
	background: linear-gradient(135deg, #009EE3, #0082ba);
	border-radius: 1.5rem;
	padding: 2rem;
	color: #ffffff;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 130, 186, 0.15);
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.hp-contact-callout-card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 130, 186, 0.3);
}

.hp-contact-callout-bg {
	position: absolute;
	right: -2.5rem;
	bottom: -2.5rem;
	width: 12.5rem;
	height: 12.5rem;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 9999px;
	pointer-events: none;
	transition: transform 0.5s ease;
}

.hp-contact-callout-card:hover .hp-contact-callout-bg {
	transform: scale(1.15);
}

.hp-contact-callout-title {
	font-size: 1.125rem;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0.5rem;
	color: #ffffff;
	text-align: left;
}

.hp-contact-callout-desc {
	font-size: 0.875rem;
	font-weight: 600;
	color: #e0f2fe;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 1.5rem;
	text-align: left;
}

.hp-contact-callout-btn {
	display: block;
	width: 100%;
	padding: 0.875rem;
	background-color: #ffffff;
	color: #009EE3 !important;
	font-weight: 900;
	text-align: center;
	font-size: 0.9375rem;
	border-radius: 1rem;
	text-decoration: none !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
}

.hp-contact-callout-btn:hover {
	background-color: #f0f9ff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.hp-contact-callout-btn:active {
	transform: scale(0.98);
}


/* ----------------------------------------------------
 * 3. FAQ Section Layout & Accordion
 * ---------------------------------------------------- */
.hp-contact-faq-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 3rem;
	user-select: none;
	pointer-events: none;
}

.hp-contact-faq-line {
	height: 1px;
	background-color: #e2e8f0;
	width: 3rem;
}

@media (min-width: 640px) {
	.hp-contact-faq-line {
		width: 5rem;
	}
}

.hp-contact-faq-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: #38bdf8;
}

.hp-contact-faq-title {
	font-size: 1.25rem;
	font-weight: 900;
	color: #1e293b;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: -0.025em;
}

@media (min-width: 640px) {
	.hp-contact-faq-title {
		font-size: 1.5rem;
	}
}

/* Accordion Item */
.hp-faq-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.hp-faq-item {
	background-color: #ffffff;
	border: 1px solid #f1f5f9;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	width: 100%;
	box-sizing: border-box;
}

.hp-faq-item.border-sky-200 {
	border-color: #bae6fd !important;
}

.hp-faq-item.shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05) !important;
}

.hp-faq-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	outline: none;
	box-sizing: border-box;
}

.hp-faq-trigger-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hp-faq-icon-bg {
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background-color: #f0f9ff;
	color: #0284c7;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.hp-faq-trigger:hover .hp-faq-icon-bg {
	background-color: #e0f2fe;
}

.hp-faq-icon-bg svg,
.hp-faq-icon-bg svg path {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hp-faq-trigger h3 {
	font-weight: 800;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.4;
	margin: 0;
	transition: color 0.2s ease;
}

@media (min-width: 640px) {
	.hp-faq-trigger h3 {
		font-size: 1rem;
	}
}

.hp-faq-trigger:hover h3 {
	color: #009EE3;
}

.hp-faq-chevron {
	color: #94a3b8;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
}

.hp-faq-chevron svg,
.hp-faq-chevron svg path {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hp-faq-chevron.rotate-180 {
	transform: rotate(180deg);
}

.hp-faq-chevron.text-sky-500 {
	color: #009EE3;
}

/* Accordion Content */
.hp-faq-content {
	display: none;
	border-top: 1px solid #f8fafc;
	background-color: #fbfcfe;
}

.hp-faq-content-inner {
	padding: 1.5rem;
	color: #475569;
	font-size: 0.875rem;
	line-height: 1.625;
	font-weight: 500;
	text-align: left;
}

@media (min-width: 640px) {
	.hp-faq-content-inner {
		font-size: 0.9375rem;
	}
}

.hp-faq-content-inner strong {
	font-weight: 800;
	color: #0f172a;
}


/* ----------------------------------------------------
 * 4. Toast Notifications System
 * ---------------------------------------------------- */
.hp-toast-container {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	z-index: 99999;
	max-width: 25rem;
	width: calc(100% - 3rem);
	box-sizing: border-box;
}

.hp-toast {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background-color: #ffffff;
	border-radius: 1rem;
	padding: 1rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
	border: 1px solid #f1f5f9;
	transform: translateY(1.5rem);
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box;
}

.hp-toast.active {
	transform: translateY(0);
	opacity: 1;
}

.hp-toast.toast-success {
	border-left: 4px solid #10b981;
}

.hp-toast.toast-error {
	border-left: 4px solid #ef4444;
}

.hp-toast-icon-wrap-success {
	background-color: rgba(16, 185, 129, 0.1);
	color: #10b981;
}

.hp-toast-icon-wrap-error {
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.hp-toast svg,
.hp-toast svg path {
	width: 1rem;
	height: 1rem;
}

.hp-toast-heading {
	font-size: 0.625rem;
	font-weight: 900;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	margin: 0;
}

.hp-toast-text {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #1e293b;
	line-height: 1.4;
	margin-top: 0.125rem;
	margin-bottom: 0;
	text-align: left;
}

.hp-toast-close {
	background: none;
	border: none;
	color: #94a3b8;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0.125rem 0.25rem;
	margin-left: auto;
	transition: color 0.2s ease;
}

.hp-toast-close:hover {
	color: #475569;
}

/* ----------------------------------------------------
 * 5. Custom Select Dropdown Styling
 * ---------------------------------------------------- */
.hp-hide-native-select {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.hp-custom-select-container {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.hp-custom-select {
	width: 100%;
	height: 2.5rem !important;
	padding: 0 2.5rem 0 1rem;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	color: #1e293b;
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;
}

.hp-custom-select:hover {
	border-color: #cbd5e1;
}

.hp-custom-select.active {
	border-color: #009EE3;
	box-shadow: 0 0 0 1px #009EE3;
}

.hp-custom-select.hp-validation-error {
	border-color: #ef4444 !important;
	background-color: rgba(239, 68, 68, 0.03) !important;
}

.hp-custom-select-placeholder {
	color: #94a3b8;
}

.hp-custom-select-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	display: flex;
	align-items: center;
	pointer-events: none;
	transition: transform 0.2s ease-in-out;
}

.hp-custom-select.active .hp-custom-select-arrow {
	transform: translateY(-50%) rotate(180deg);
	color: #009EE3;
}

.hp-custom-select-arrow svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hp-custom-select-options {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	z-index: 999;
	display: none;
	padding: 0.25rem !important;
	margin: 0 !important;
	list-style: none !important;
	box-sizing: border-box;
}

.hp-custom-select-option {
	padding: 0.5rem 0.75rem !important;
	margin: 0 0 2px 0 !important;
	font-size: 0.875rem;
	color: #334155;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	box-sizing: border-box;
	text-align: left;
}

.hp-custom-select-option:last-child {
	margin-bottom: 0 !important;
}

.hp-custom-select-option:hover {
	background-color: #f1f5f9;
	color: #0f172a;
}

.hp-custom-select-option.selected {
	background-color: #e6f4ff;
	color: #009EE3;
	font-weight: 600;
}

.hp-custom-select-option.disabled {
	color: #94a3b8;
	background-color: #f8fafc;
	cursor: not-allowed;
	pointer-events: none;
}