/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://theleaderadvantage.com
 Template:     generatepress
 Version:      0.1
*/

/* Icon Box */
/* Container chính - dạng div để tái sử dụng */
.contact-box {
	background: transparent;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: all 0.3s ease;
	color: white;
}

/* Chỉ có hover effect khi box có class clickable */
.contact-box.clickable {
	cursor: pointer;
}

.contact-box.clickable:hover .contact-icon {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(1.05);
}

.contact-box.clickable:hover .contact-value {
	opacity: 0.9;
}

/* Icon container - hình vuông bo góc */
.contact-icon {
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

/* Icon SVG */
.contact-icon svg {
	width: 24px;
	height: 24px;
	fill: white;
}

/* Text container */
.contact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact-label {
	font-size: 14px;
	font-weight: 400;
	opacity: 0.95;
	letter-spacing: 0.3px;
	color: #d0fae5;
}

.contact-value {
	font-size: 16px;
	font-weight: 600;
/* 	letter-spacing: 0.5px; */
}

/* Link trong value - nếu cần */
.contact-value a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.contact-value a:hover {
	opacity: 0.85;
	text-decoration: underline;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
	.contact-wrapper {
		grid-template-columns: 1fr;
		padding: 20px;
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.contact-wrapper {
		padding: 16px;
	}

	.contact-box {
		gap: 12px;
	}

	.contact-icon {
		width: 44px;
		height: 44px;
	}

	.contact-icon svg {
		width: 20px;
		height: 20px;
	}

	.contact-label {
		font-size: 13px;
	}

	.contact-value {
		font-size: 16px;
	}
}

/* grib-gap-24 */
.grib-gap-24 {
	gap: 24px;
}

/* Box Title & Description */
.box-title-desc {
	padding: 24px;
	border-radius: 12px;
}
.box-title-desc > div {
	padding: 0px !important;
}

.box-title-desc h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.box-title-desc p {
  font-size: 14px;
	margin-bottom: 0px;
}

.box-title-desc.green {
  background-color: #ecfdf5; /* emerald-50 */
  color: #006045;
}

.box-title-desc.green p {
  color: #007a55;
}

.box-title-desc.blue {
  background-color: #eff6ff; /* blue-50 */
  color: #193cb8;
}

.box-title-desc.blue p {
  color: #1447e6;
}

.box-title-desc.purple {
  background-color: #faf5ff; /* blue-50 */
  color: #6e11b0;
}

.box-title-desc.purple p {
  color: #8200db;
}

.box-title-desc.orange {
  background-color: #fff7ed; /* blue-50 */
  color: #9f2d00;
}

.box-title-desc.orange p {
  color: #ca3500;
}

.p-32 {
	padding: 32px;
}

.r-15 {
	border-radius: 15px;
}

/* Width */
.w-868 {
	max-width: 868px;
	margin-left: auto;
    margin-right: auto;
}

/* Form */
input, select, textarea {
	width: 100%;
	border: solid 1px #d1d5dc !important;
	border-radius: 4px !important;
	padding: 8px 15px !important;
	font-size: 14px;
}

input[type="submit"] {
	background: #009966;
}

input:focus,
input:focus-visible {
  outline: none; 
  border-color: #a1a1a1 !important;
  box-shadow:
    0 0 0 0px #fff, 0 0 0 4px rgb(151 151 151 / 40%)
}

select {
    /* BƯỚC 1: Reset appearance - Loại bỏ style mặc định */
    -webkit-appearance: none;  /* Safari */
    -moz-appearance: none;     /* Firefox */
    appearance: none;          /* Standard */
    
    /* BƯỚC 2: Thêm custom arrow bằng SVG inline */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
    
    /* BƯỚC 3: Style cho select giống input text */
    padding-right: 45px !important;  /* Chừa chỗ cho arrow */
    cursor: pointer;
}

.wpcf7-form label {
	font-size: 14px;
}

.wpcf7-form p {
	margin-bottom: 1.2em;
}

/* column */
.border-column {
	border: solid 1px #ccc;
    padding: 24px 24px 0 24px;
    border-radius: 4px;
}

.border-column h2 {
	margin-bottom: 6px;
}

.col-gap-48 {
	gap: 48px;
}

.list-p-24 {
	padding-left: 24px;
}