/* ============================================================
   contacts.css — Thiết kế lại trang Liên hệ
   Đồng bộ với hệ thống thiết kế "hm-" ở trang chủ (home.css).
   ============================================================ */

:root{
	/* Thỏ Ngọc / Pearl Pets brand refresh 2026 — same tokens as home.css */
	--hm-primary:#038BF3;
	--hm-primary-dark:#0A4A85;
	--hm-accent:#0A4A85;
	--hm-accent-dark:#072F57;
	--hm-ink:#152438;
	--hm-muted:#51677D;
	--hm-bg-soft:#E7F1FC;
	--hm-border:#DCE6F0;
	--hm-radius:14px;
	--hm-radius-sm:8px;
	--hm-shadow:0 1px 2px rgba(21,36,56,.07), 0 8px 24px -12px rgba(21,36,56,.20);
	--hm-shadow-hover:0 10px 30px -8px rgba(21,36,56,.32);
	--hm-container:1160px;
}

.hm-pagehead__title,.hm-section-title{font-family:"Be Vietnam Pro",Roboto,Helvetica,Arial,sans-serif; font-weight:600;}

.hm-pagehead,.hm-contact{box-sizing:border-box;}
.hm-pagehead *,.hm-contact *{box-sizing:border-box;}

/* ---------- Page header / breadcrumb (giống products.css) ---------- */
.hm-pagehead{
	background:linear-gradient(120deg,var(--hm-primary-dark),var(--hm-primary));
	padding:38px 20px 32px;color:#fff;
}
.hm-pagehead__inner{max-width:var(--hm-container);margin:0 auto;}
.hm-pagehead__title{font-size:clamp(22px,3.4vw,32px);font-weight:800;margin:0 0 10px;}
.hm-pagehead__crumb{font-size:13.5px;color:rgba(255,255,255,.85);}
.hm-pagehead__crumb a{color:#fff;text-decoration:none;font-weight:600;}
.hm-pagehead__crumb a:hover{text-decoration:underline;}

/* ---------- Section heading ---------- */
.hm-section-title{font-size:20px;font-weight:800;color:var(--hm-ink);margin:0 0 20px;}

/* ============================================================
   FORM LIÊN HỆ
   ============================================================ */
.hm-contact{max-width:var(--hm-container);margin:44px auto 0;padding:0 20px;}
.hm-contact__card{
	background:#fff;border:1px solid var(--hm-border);border-radius:var(--hm-radius);
	padding:30px;box-shadow:var(--hm-shadow);max-width:760px;margin:0 auto 56px;
}
.hm-contact__row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
@media (min-width:600px){ .hm-contact__row{grid-template-columns:1fr 1fr;} }

.hm-contact__card input[type="text"],
.hm-contact__card textarea{
	width:100%;border:1px solid var(--hm-border);border-radius:var(--hm-radius-sm);
	padding:12px 14px;font-size:14.5px;color:var(--hm-ink);font-family:inherit;background:var(--hm-bg-soft);
	transition:border-color .15s ease,background .15s ease;
}
.hm-contact__card input[type="text"]:focus,
.hm-contact__card textarea:focus{
	outline:none;border-color:var(--hm-primary);background:#fff;
}
.hm-contact__card textarea{resize:vertical;min-height:140px;margin-bottom:18px;display:block;}

.hm-contact__submit{text-align:center;}
.hm-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	padding:13px 30px;border-radius:999px;font-weight:600;font-size:15px;
	text-decoration:none;border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
	cursor:pointer;line-height:1.2;
}
.hm-btn--primary{background:var(--hm-accent);color:#fff;}
.hm-btn--primary:hover{background:var(--hm-accent-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,74,133,.35);}

/* ============================================================
   THÔNG TIN LIÊN HỆ (địa chỉ / điện thoại / email)
   ============================================================ */
.hm-contact__info{
	background:linear-gradient(120deg,var(--hm-primary-dark),var(--hm-primary));
	padding:44px 20px;margin:0 0 0;
}
.hm-contact__info-grid{
	max-width:var(--hm-container);margin:0 auto;display:grid;grid-template-columns:1fr;gap:20px;
}
@media (min-width:700px){ .hm-contact__info-grid{grid-template-columns:repeat(3,1fr);} }

.hm-contact__info-item{
	background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:var(--hm-radius);
	padding:22px;color:#fff;text-align:center;
}
.hm-contact__info-item h3{margin:0 0 8px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.hm-contact__info-item div{font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.6;}

/* ============================================================
   BẢN ĐỒ
   ============================================================ */
.hm-contact__map{max-width:var(--hm-container);margin:0 auto;padding:0 20px;}
.hm-contact__map #map-canvas{
	width:100%;height:360px;border-radius:var(--hm-radius);margin:40px 0 60px;
	border:1px solid var(--hm-border);
}

/* ============================================================
   TRANG CẢM ƠN (thankyou)
   ============================================================ */
.hm-contact__thanks{
	max-width:640px;margin:60px auto 90px;padding:0 20px;text-align:center;
}
.hm-contact__thanks p{
	font-weight:700;font-size:18px;color:var(--hm-ink);background:var(--hm-bg-soft);
	border-radius:var(--hm-radius);padding:28px;
}