/* ============================================================
   TechTide — Contact (page-contact.php) — kiểu Appen, đen–trắng
   Hero · (Office info | Form card) · Map full-width
   (Style các ô input/select/textarea dùng từ home.css — đã enqueue kèm.)
   ============================================================ */

/* eyebrow giống Appen (DM Sans 600, .72rem) */
.tt-cp-eyebrow{
	font-family: var(--tt-font-body);
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; line-height: 1.6;
	text-transform: uppercase; color: var(--tt-ink); -webkit-font-smoothing: antialiased;
	margin: 0 0 1rem;
}

/* ===================== HERO (trắng, chữ đen) ===================== */
.tt-cp-hero{ padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.tt-cp-hero__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-cp-hero__title{
	font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 300;
	line-height: 1.08; letter-spacing: -.03em; color: var(--tt-ink);
	max-width: 20ch; margin: 0;
}
.tt-cp-hero__sub{
	color: rgba(0, 0, 0, .55); font-size: 1.0625rem; line-height: 1.65;
	max-width: 62ch; margin: 1.25rem 0 0;
}

/* ===================== CONTACT (office | form) ===================== */
.tt-cp{ border-top: 1px solid var(--tt-line); padding-block: clamp(3rem, 6vw, 5rem); }
.tt-cp__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-cp__grid{
	display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(1.5rem, 3vw, 2rem) clamp(2.5rem, 5vw, 5rem); align-items: start;
}

/* office info (label + value, gạch ngang giữa các mục) */
.tt-cp-info{ list-style: none; margin: 1.25rem 0 0; padding: 0; }
.tt-cp-info__item{ padding: 1.2rem 0; border-top: 1px solid var(--tt-line); }
.tt-cp-info__item:last-child{ border-bottom: 1px solid var(--tt-line); }
.tt-cp-info__label{ display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-ink-soft); margin: 0 0 .4rem; }
.tt-cp-info__val{ font-size: 1.0625rem; line-height: 1.5; color: var(--tt-ink); margin: 0; }
.tt-cp-info__val a{ color: var(--tt-ink); text-decoration: none; transition: color .15s ease; }
.tt-cp-info__val a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* form card (xám nhạt — giống ảnh mẫu) */
.tt-cp__formwrap{ background: var(--tt-bg-soft); border: 1px solid var(--tt-line); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.tt-cp__formtitle{ font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2; margin: 0 0 1.5rem; }
/* input nền trắng nổi trên thẻ xám */
.tt-cp__formwrap input, .tt-cp__formwrap select, .tt-cp__formwrap textarea{ background: #fff; }

/* ===================== MAP (trong cột trái, dưới office info) ===================== */
.tt-cp-map{ border: 1px solid var(--tt-line); border-radius: 14px; overflow: hidden; line-height: 0; }
.tt-cp-map__frame{ display: block; width: 100%; height: clamp(300px, 42vh, 440px); border: 0; }

/* desktop: map xuống cột TRÁI (ngay dưới office info); form bên phải cao bằng cả 2 hàng */
@media (min-width: 861px){
	.tt-cp__info{ grid-column: 1; grid-row: 1; }
	.tt-cp__formwrap{ grid-column: 2; grid-row: 1 / span 2; }
	.tt-cp-map{ grid-column: 1; grid-row: 2; align-self: stretch; }
	.tt-cp-map__frame{ height: 100%; min-height: 300px; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px){
	.tt-cp__grid{ grid-template-columns: 1fr; gap: 2.5rem; }
}