/* HP Quote Popup - thiết kế theo bản design, ép !important để không bị theme đè */
.hpqp-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 32px 14px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(20, 12, 10, .72);
	z-index: 999999;
	opacity: 0;
	transition: opacity .3s ease;
	/* Cô lập thành layer riêng: trình duyệt không phải vẽ lại trang nền nặng phía sau. */
	contain: layout style paint;
	will-change: opacity;
}
.hpqp-overlay.hpqp-open { display: flex; opacity: 1; }

/* Khoá cuộn + đóng băng vẽ trang nền khi popup mở (chống giật trên trang nặng). */
html.hpqp-lock,
html.hpqp-lock body {
	overflow: hidden !important;
	touch-action: none;
}

/* Reset chống theme */
.hpqp-modal,
.hpqp-modal * {
	box-sizing: border-box !important;
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	float: none;
	max-width: 100%;
}

/*
 * Dùng FONT HỆ THỐNG cho toàn popup (không kế thừa webfont Roboto của theme).
 * Lý do: popup là chỗ ĐẦU TIÊN dùng vài weight Roboto chưa nạp -> khi mở popup
 * trình duyệt tải Roboto rồi "swap", gây REFLOW lại CẢ TRANG (đo được ~270ms, 3 lần)
 * => giật nặng. Font hệ thống có sẵn nên không tải gì, không reflow (đo còn ~80ms, 1 lần).
 * KHÔNG ghi "Roboto" trong stack vì theme đã đăng ký "Roboto" là @font-face (sẽ tải lại);
 * Android vẫn ra Roboto hệ thống qua từ khoá sans-serif.
 */
.hpqp-overlay,
.hpqp-overlay *,
.hpqp-overlay *::before,
.hpqp-overlay *::after,
.hpqp-overlay input::placeholder,
.hpqp-overlay textarea::placeholder {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
.hpqp-modal {
	position: relative;
	width: 100%;
	max-width: 452px;
	margin: auto;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 80px -20px rgba(120, 15, 8, .55), 0 8px 24px rgba(0, 0, 0, .25);
	line-height: 1.5;
	text-align: left;
	transform: translateY(16px) scale(.97);
	opacity: .6;
	transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.hpqp-open .hpqp-modal { transform: none; opacity: 1; }

/* Nút đóng */
.hpqp-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .2) !important;
	color: #fff !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 34px !important;
	text-align: center !important;
	cursor: pointer;
	z-index: 4;
	box-shadow: none !important;
	transition: background .18s;
}
.hpqp-close:hover { background: rgba(255, 255, 255, .36) !important; }
.hpqp-close-success { background: #f0ecea !important; color: #8a807b !important; }
.hpqp-close-success:hover { background: #e6e0dd !important; }

/* Header */
.hpqp-header {
	position: relative;
	padding: 28px 30px 26px;
	background: linear-gradient(152deg, #E83A2D 0%, #C61D14 58%, #A4140D 100%);
	color: #fff;
	overflow: hidden;
}
.hpqp-header::before,
.hpqp-header::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	pointer-events: none;
}
.hpqp-header::before { top: -60px; right: -50px; width: 180px; height: 180px; }
.hpqp-header::after { bottom: -70px; left: -40px; width: 150px; height: 150px; background: rgba(255, 255, 255, .05); }
.hpqp-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .16);
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .6px !important;
	color: #fff !important;
}
.hpqp-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: hpqp-pulse 1.4s ease-in-out infinite;
}
@keyframes hpqp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
.hpqp-title {
	position: relative;
	margin: 15px 0 0 !important;
	font-size: 25px !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	letter-spacing: -.3px !important;
	color: #fff !important;
}
.hpqp-message {
	position: relative;
	margin: 9px 0 0 !important;
	font-size: 14.5px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, .9) !important;
}
.hpqp-rating {
	position: relative;
	margin-top: 15px;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}
.hpqp-stars { color: #FFCF4D !important; font-size: 15px !important; letter-spacing: 1px; }
.hpqp-rating b { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; }
.hpqp-rating-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.hpqp-reviews { font-size: 13px !important; font-weight: 500 !important; color: rgba(255, 255, 255, .85) !important; }

/* Benefits */
.hpqp-trust {
	list-style: none !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
	row-gap: 12px;
	padding: 16px 30px !important;
	margin: 0 !important;
	background: #FCF4F2;
}
.hpqp-trust li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	list-style: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #241b19 !important;
	line-height: 1.3 !important;
}
.hpqp-bcheck {
	flex: none;
	margin-top: 1px;
	width: 19px; height: 19px;
	border-radius: 50%;
	background: #E4F5EA;
	color: #16A34A !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Form */
.hpqp-form { padding: 20px 30px 6px; }
.hpqp-fields { display: flex; flex-direction: column; gap: 11px; }
.hpqp-fields input,
.hpqp-fields textarea {
	width: 100% !important;
	padding: 13px 15px !important;
	border: 1.5px solid #E7E2DF !important;
	border-radius: 12px !important;
	background: #fff !important;
	font-size: 15px !important;
	color: #241b19 !important;
	line-height: 1.4 !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .18s, box-shadow .18s;
}
.hpqp-fields textarea { resize: vertical; min-height: 52px; line-height: 1.5 !important; }
.hpqp-fields input::placeholder,
.hpqp-fields textarea::placeholder { color: #a89f99 !important; opacity: 1; }
.hpqp-fields input:focus,
.hpqp-fields textarea:focus {
	border-color: #E83A2D !important;
	box-shadow: 0 0 0 4px rgba(232, 58, 45, .12) !important;
}
.hpqp-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100% !important;
	margin-top: 15px;
	padding: 15px !important;
	border: 0 !important;
	border-radius: 13px !important;
	background: linear-gradient(150deg, #EF4136, #C61D14) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .2px !important;
	cursor: pointer;
	box-shadow: 0 12px 26px -8px rgba(198, 29, 20, .65);
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.hpqp-submit .hpqp-submit-label,
.hpqp-submit .hpqp-arrow { color: #fff !important; }
.hpqp-submit:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 32px -8px rgba(198, 29, 20, .7); color: #fff !important; }
.hpqp-submit:active { transform: translateY(0); }
.hpqp-submit:disabled { opacity: .65; cursor: default; box-shadow: none; transform: none; filter: none; }
.hpqp-privacy {
	margin: 11px 0 0 !important;
	text-align: center;
	font-size: 12px !important;
	color: #9c948f !important;
}
.hpqp-result {
	margin: 8px 0 0 !important;
	text-align: center;
	font-size: 13.5px !important;
	min-height: 16px;
}
.hpqp-result.hpqp-ok { color: #16A34A !important; }
.hpqp-result.hpqp-err { color: #d13b36 !important; }

/* Honeypot */
.hpqp-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden; }

/* Hotline */
.hpqp-hotline-wrap { padding: 12px 30px 24px; }
.hpqp-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 13px;
}
.hpqp-or span { font-size: 12px !important; font-weight: 600 !important; color: #a89f99 !important; }
.hpqp-or::before,
.hpqp-or::after { content: ""; flex: 1; height: 1px; background: #EEE8E5; }
.hpqp-hotline {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 13px !important;
	border: 1.5px solid #E83A2D !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: #C61D14 !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background .18s;
}
.hpqp-hotline:hover { background: #FDF1EF !important; color: #C61D14 !important; }
.hpqp-hot-ico { font-size: 16px; line-height: 1; }

/* Trust footer: ảnh cửa hàng + logo đối tác */
.hpqp-footer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
	padding: 15px 30px 22px;
	border-top: 1px solid #F2ECE9;
}
.hpqp-store-photo {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	object-fit: cover;
	display: block;
}
.hpqp-footer-main { flex: 1; min-width: 0; }
.hpqp-partners-label {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #6b6360 !important;
	margin-bottom: 8px !important;
}
.hpqp-logos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hpqp-logos img {
	height: 24px;
	width: auto;
	max-width: 90px;
	object-fit: contain;
	border-radius: 4px;
	display: block;
}

/* Success */
.hpqp-view-success { position: relative; padding: 38px 30px 30px; text-align: center; }
.hpqp-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	margin-bottom: 16px !important;
	border-radius: 50%;
	background: #E4F5EA;
	color: #16A34A;
	animation: hpqp-pop .4s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes hpqp-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.hpqp-success-title {
	margin: 0 0 18px !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #241b19 !important;
	text-align: center;
}
.hpqp-addr-card {
	text-align: left;
	background: #FCF4F2;
	border: 1px solid #f3d9d6;
	border-radius: 14px;
	padding: 16px !important;
	margin-bottom: 16px !important;
}
.hpqp-addr-note { margin: 0 0 10px !important; font-size: 14px !important; color: #6b6360 !important; }
.hpqp-addr {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #C61D14 !important;
}
.hpqp-addr svg { flex: 0 0 auto; margin-top: 2px; }
.hpqp-directions {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px !important;
	border-radius: 12px !important;
	background: #1a73e8 !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 8px 18px -6px rgba(26, 115, 232, .55);
	transition: background .2s, transform .15s;
}
.hpqp-directions:hover { background: #1666cf !important; transform: translateY(-1px); color: #fff !important; }
.hpqp-success-close {
	border: 0 !important;
	background: none !important;
	color: #9c948f !important;
	font-size: 14px !important;
	cursor: pointer;
	text-decoration: underline !important;
	padding: 4px 8px !important;
}
.hpqp-success-close:hover { color: #6b6360 !important; }

/* === Tối ưu màn hình nhỏ / điện thoại === */
@media (max-width: 480px) {
	.hpqp-overlay { padding: 14px 10px; align-items: flex-start; }
	.hpqp-modal { border-radius: 18px; }
	.hpqp-header { padding: 22px 20px 18px; }
	.hpqp-title { font-size: 21px !important; margin-top: 12px !important; }
	.hpqp-message { font-size: 13.5px !important; }
	.hpqp-rating { margin-top: 12px; }
	.hpqp-trust { padding: 13px 20px !important; column-gap: 10px; row-gap: 9px; }
	.hpqp-trust li { font-size: 12.5px !important; }
	.hpqp-form { padding: 16px 20px 4px; }
	.hpqp-submit { padding: 14px !important; }
	.hpqp-hotline-wrap { padding: 10px 20px 18px; }
	.hpqp-footer { padding: 13px 20px 18px; gap: 11px; }
	.hpqp-view-success { padding: 30px 20px 24px; }
}
/* Màn rất hẹp: benefits 1 cột cho dễ đọc */
@media (max-width: 360px) {
	.hpqp-trust { grid-template-columns: 1fr; }
}
/* Màn thấp (điện thoại nằm ngang): giảm padding dọc để vừa khung */
@media (max-height: 680px) {
	.hpqp-overlay { padding-top: 12px; padding-bottom: 12px; }
	.hpqp-header { padding-top: 20px; padding-bottom: 16px; }
}

/* === Form inline (shortcode [hp_quote_form] / trang đặt lịch gắn Google Maps) === */
.hpqp-inline,
.hpqp-inline *,
.hpqp-inline *::before,
.hpqp-inline *::after,
.hpqp-inline input::placeholder,
.hpqp-inline textarea::placeholder {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
.hpqp-modal.hpqp-inline {
	/* Nằm trong luồng trang: bỏ hiệu ứng trượt/mờ của popup. */
	transform: none;
	opacity: 1;
	max-width: 520px;
	margin: 0 auto 24px;
	box-shadow: 0 18px 50px -20px rgba(120, 15, 8, .35), 0 4px 14px rgba(0, 0, 0, .08);
}
.hpqp-inline .hpqp-view-success { padding-top: 34px; }

/* =====================================================================
   Landing đặt lịch (shortcode layout="landing" / trang đặt lịch)
   ===================================================================== */
.hpqp-landing,
.hpqp-landing *,
.hpqp-landing *::before,
.hpqp-landing *::after {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.hpqp-landing {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 8px 16px 40px;
	color: #241b19;
	line-height: 1.55;
	scroll-behavior: smooth;
}
.hpqp-landing ul, .hpqp-landing ol { list-style: none; margin: 0; padding: 0; }
.hpqp-landing a { text-decoration: none; }

/* Tiêu đề chung */
.hpqp-h1 {
	margin: 14px 0 0;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.6px;
	color: #241b19;
}
.hpqp-h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.3px;
	color: #241b19;
}
.hpqp-sub { margin: 8px 0 0; font-size: 15.5px; color: #6b6360; }
.hpqp-section { padding: 52px 0 0; }

/* Nút */
.hpqp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 13px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	border: 1.5px solid transparent;
	transition: transform .15s, box-shadow .15s, background .15s, filter .15s;
}
.hpqp-btn:hover { transform: translateY(-1px); }
.hpqp-btn-primary {
	background: linear-gradient(150deg, #EF4136, #C61D14);
	color: #fff !important;
	box-shadow: 0 12px 26px -8px rgba(198, 29, 20, .6);
}
.hpqp-btn-primary:hover { filter: brightness(1.05); }
.hpqp-btn-outline { background: #fff; border-color: #E83A2D; color: #C61D14 !important; }
.hpqp-btn-outline:hover { background: #FDF1EF; }
.hpqp-btn-map { background: #1a73e8; color: #fff !important; box-shadow: 0 8px 18px -6px rgba(26, 115, 232, .55); }
.hpqp-btn-map:hover { background: #1666cf; }
.hpqp-btn-light { background: #fff; color: #C61D14 !important; }
.hpqp-btn-ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.hpqp-btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.hpqp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Hero: text trái + form phải */
.hpqp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 460px);
	gap: 44px;
	align-items: start;
	padding-top: 24px;
}
.hpqp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: #FCE8E5;
	color: #C61D14;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.hpqp-eyebrow .hpqp-dot { background: #E83A2D; }
.hpqp-lead { margin: 16px 0 0; font-size: 17px; color: #4d4440; max-width: 560px; }
.hpqp-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 24px !important;
	padding-top: 22px !important;
	border-top: 1px solid #EEE8E5;
}
.hpqp-stats li { display: flex; flex-direction: column; gap: 2px; }
.hpqp-stats b { font-size: 20px; font-weight: 800; color: #241b19; line-height: 1.1; }
.hpqp-stats span { font-size: 13px; color: #8a807b; }
.hpqp-star { color: #F5B301; margin-left: 3px; font-size: 18px; }
.hpqp-hero-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	margin-top: 24px !important;
}
.hpqp-hero-trust li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #241b19; }
.hpqp-hero-form { scroll-margin-top: 90px; }
.hpqp-hero-form .hpqp-modal.hpqp-inline { margin: 0; max-width: none; }

/* Quy trình */
.hpqp-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px !important;
	counter-reset: hpqp-step;
}
.hpqp-steps-grid li {
	position: relative;
	padding: 24px 22px 22px;
	border: 1px solid #F0E9E6;
	border-radius: 18px;
	background: #FFF9F8;
}
.hpqp-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 12px;
	background: linear-gradient(150deg, #EF4136, #C61D14);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	box-shadow: 0 8px 16px -6px rgba(198, 29, 20, .6);
}
.hpqp-steps-grid h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 800; color: #241b19; }
.hpqp-steps-grid p { margin: 0; font-size: 14px; color: #6b6360; }

/* Danh mục thu mua */
.hpqp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px !important; }
.hpqp-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #F0E3E0;
	font-size: 14.5px;
	font-weight: 600;
	color: #241b19;
}
.hpqp-chips li::before { content: "✓"; color: #16A34A; font-weight: 800; }
.hpqp-note { margin: 18px 0 0; font-size: 14.5px; color: #6b6360; }
.hpqp-note a { color: #C61D14; font-weight: 700; }

/* Cửa hàng + bản đồ */
.hpqp-store {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px;
	align-items: center;
}
.hpqp-store-list { margin-top: 20px !important; display: flex; flex-direction: column; gap: 12px; }
.hpqp-store-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; font-weight: 600; color: #241b19; }
.hpqp-store-list a { color: #C61D14; }
.hpqp-ico { flex: none; width: 24px; text-align: center; }
.hpqp-store .hpqp-btn-map { margin-top: 22px; }
.hpqp-store-map {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid #F0E9E6;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .35);
	aspect-ratio: 16 / 10;
	max-width: 100%;
}
.hpqp-store-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* FAQ */
.hpqp-faq-list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.hpqp-faq-list details {
	border: 1px solid #F0E9E6;
	border-radius: 14px;
	background: #fff;
	padding: 0 20px;
}
.hpqp-faq-list details[open] { background: #FFF9F8; }
.hpqp-faq-list summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 28px 16px 0;
	position: relative;
	font-size: 16px;
	font-weight: 700;
	color: #241b19;
}
.hpqp-faq-list summary::-webkit-details-marker { display: none; }
.hpqp-faq-list summary::after {
	content: "+";
	position: absolute;
	right: 0; top: 50%;
	transform: translateY(-50%);
	width: 26px; height: 26px;
	border-radius: 50%;
	background: #FCE8E5;
	color: #C61D14;
	font-weight: 800;
	line-height: 26px;
	text-align: center;
}
.hpqp-faq-list details[open] summary::after { content: "–"; }
.hpqp-faq-list p { margin: 0 0 18px; font-size: 15px; color: #4d4440; }

/* CTA cuối */
.hpqp-cta {
	margin-top: 52px;
	padding: 40px 32px;
	border-radius: 24px;
	background: linear-gradient(152deg, #E83A2D 0%, #C61D14 58%, #A4140D 100%);
	color: #fff;
	text-align: center;
	box-shadow: 0 30px 60px -28px rgba(120, 15, 8, .6);
}
.hpqp-cta .hpqp-h2 { color: #fff; }
.hpqp-cta p { margin: 10px 0 0; font-size: 16px; color: rgba(255, 255, 255, .9); }
.hpqp-cta .hpqp-actions { justify-content: center; }

/* Responsive */
@media (max-width: 960px) {
	.hpqp-hero { grid-template-columns: 1fr; gap: 28px; }
	.hpqp-hero-form .hpqp-modal.hpqp-inline { max-width: 520px; margin: 0 auto; }
	.hpqp-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hpqp-store { grid-template-columns: 1fr; }
	.hpqp-h1 { font-size: 32px; }
}
@media (max-width: 560px) {
	.hpqp-landing { padding: 0 14px 32px; }
	.hpqp-h1 { font-size: 27px; }
	.hpqp-h2 { font-size: 23px; }
	.hpqp-section { padding-top: 40px; }
	.hpqp-steps-grid { grid-template-columns: 1fr; }
	.hpqp-hero-trust { grid-template-columns: 1fr; }
	.hpqp-actions .hpqp-btn { flex: 1 1 100%; }
	.hpqp-cta { padding: 30px 20px; border-radius: 18px; }
}

/* =====================================================================
   Nút liên hệ nổi (Facebook / Zalo / Hotline) — thẻ trắng xếp dọc góc màn hình
   ===================================================================== */
.hpqp-fc {
	position: fixed;
	z-index: 99998;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.hpqp-fc-left { align-items: flex-start; }
.hpqp-fc-item {
	display: flex !important;
	align-items: center;
	gap: 12px;
	min-width: 240px;
	padding: 8px 18px 8px 10px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
	text-decoration: none !important;
	line-height: 1.15;
	transition: transform .15s, box-shadow .15s;
}
.hpqp-fc-item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.hpqp-fc-ico { flex: none; width: 44px; height: 44px; display: block; }
.hpqp-fc-ico svg { display: block; width: 44px; height: 44px; }
.hpqp-fc-text { display: flex; flex-direction: column; gap: 3px; }
.hpqp-fc-text b { font-size: 17px; font-weight: 700; color: #111 !important; letter-spacing: -.1px; }
.hpqp-fc-phone .hpqp-fc-text b { letter-spacing: .3px; }
.hpqp-fc-text small { font-size: 13.5px; font-weight: 600; color: #D92D20 !important; }
/* Nhịp "rung" nhẹ cho icon điện thoại để thu hút */
@keyframes hpqp-fc-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(0); } }
.hpqp-fc-phone .hpqp-fc-ico { animation: hpqp-fc-ring 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .hpqp-fc-phone .hpqp-fc-ico { animation: none; } }
@media (max-width: 480px) {
	.hpqp-fc { gap: 8px; }
	.hpqp-fc-item { min-width: 200px; padding: 6px 14px 6px 8px; gap: 10px; }
	.hpqp-fc-ico, .hpqp-fc-ico svg { width: 38px; height: 38px; }
	.hpqp-fc-text b { font-size: 15px; }
	.hpqp-fc-text small { font-size: 12px; }
}