/**
 * Contact — CSS riêng (template-contact.php). Nguồn: docs/design-previews/contact.html (.ct-*).
 * Nạp khi is_page_template('template-contact.php'). Token dùng chung lấy từ sjourney.css.
 */
.sj-page--contact { background: var(--sj-cream); }

/* ---- Hero banner ---- */
.ct-hero {
	height: clamp(420px, 32.5vw, 624px); display: flex; align-items: center; justify-content: center;
	text-align: center; color: #fff; position: relative;
	background: linear-gradient(180deg, rgba(20, 8, 8, .45), rgba(20, 8, 8, .65)), var(--sj-dark);
	background-size: cover; background-position: center;
}
/* Chặn trên: nội dung tối đa --sj-boxed (1824px @1920) — đồng bộ .sj-container toàn site. */
.ct-hero__inner { display: flex; flex-direction: column; gap: var(--sp-24); align-items: center; padding: 0 var(--sp-48); max-width: calc(var(--sj-boxed) + var(--sp-48) * 2); margin-inline: auto; }
.ct-hero__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.1; margin: 0; }
.ct-hero__sub { font-size: var(--fs-24); font-weight: 400; margin: 0; max-width: 788px; }

/* ---- Thân trang: 2 cột ---- */
.ct-body { background: var(--sj-cream); display: flex; gap: var(--sp-80); align-items: flex-start; padding: var(--sp-48); max-width: calc(var(--sj-boxed) + var(--sp-48) * 2); margin-inline: auto; }
.ct-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-48); padding-left: var(--sp-48); }
.ct-intro { display: flex; flex-direction: column; gap: var(--sp-24); align-items: flex-start; }
.ct-intro__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.1; margin: 0; color: var(--sj-dark); }
.ct-intro__title .accent { color: var(--sj-red); }
.ct-intro__desc { font-size: var(--fs-24); font-weight: 300; line-height: 1.25; color: var(--sj-gray); max-width: 867px; margin: 0; }

.ct-left .sj-heritage { color: var(--sj-n4-nw); display: block; }
.ct-left .sj-heritage svg { display: block; width: 100%; max-width: 399px; height: auto; }
.ct-rule { height: 1px; background: var(--sj-n4-nw); width: 100%; }

.ct-blocks { display: flex; flex-direction: column; gap: var(--sp-24); }
.ct-block { display: flex; flex-direction: column; gap: var(--sp-16); align-items: flex-start; }
.ct-block__head { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.ct-block__icon { width: var(--ico-48); height: var(--ico-48); color: var(--sj-red); display: inline-flex; }
.ct-block__icon svg { width: 100%; height: 100%; }
.ct-block__title { font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); margin: 0; }
.ct-block__text { font-size: var(--fs-20); font-weight: 300; color: var(--sj-dark); line-height: 1.2; margin: 0; }
.ct-block__text--lead { font-size: var(--fs-24); font-weight: 500; }
.ct-cols { display: flex; gap: var(--sp-80); align-items: flex-start; flex-wrap: wrap; }
.ct-col { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.ct-col__label { font-size: var(--fs-20); text-transform: uppercase; color: var(--sj-muted-nw); letter-spacing: -.1px; }
.ct-col__value { font-size: var(--fs-20); font-weight: 300; color: var(--sj-dark); }
.ct-col__value a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Ghi chú "(Mobile / Whatsapp / Zalo)" cạnh nhãn HOTLINE — chữ thường, nhỏ hơn nhãn (17/10/2026). */
.ct-col__note { text-transform: none; font-size: var(--fs-16); letter-spacing: 0; }
/* 2 mục liên hệ: cột EMAIL rộng tối thiểu bằng nhau → cột HOTLINE của 2 mục thẳng hàng. */
.ct-block--contact .ct-col:first-child { min-width: calc(var(--fs-20) * 14); }
.ct-socials { display: flex; gap: var(--sp-80); align-items: center; flex-wrap: wrap; }
.ct-social { display: flex; gap: 8px; align-items: center; min-width: 144px; font-size: var(--fs-16); text-transform: uppercase; color: var(--sj-dark); letter-spacing: .08px; text-decoration: none; }
.ct-social__icon { width: var(--ico-24); height: var(--ico-24); color: var(--sj-dark); display: inline-flex; } /* #430C0E */
.ct-social__icon svg { width: 100%; height: 100%; }
/* SVG mạng xã hội tô cứng #FEF2F2 (bản cho footer nền đỏ) → ở Contact ép theo currentColor.
   Chỉ trong .ct-social__icon nên footer vẫn giữ màu kem. clipPath/`fill="none"` không bị ảnh hưởng. */
.ct-social__icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.ct-social__icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* ---- Form 720px ---- */
/* Chặn dưới @1024: basis cố định 720px làm cột chữ bên trái chỉ còn ~185px ở 1024 (ngay
   trên breakpoint 1023). Đổi sang basis theo tỉ lệ thiết kế 720:1024 @1920 → giữ nguyên
   bề rộng ở 1920 và co đều xuống 1024 (form ~384 · trái ~546). */
.ct-form { flex: 0 1 calc((100% - var(--sp-80)) * 720 / 1744); max-width: 100%; background: #fff; padding: var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-24); }
/* Chỉ còn một cột (khối kia đang ẩn — page-blocks.php): form căn giữa, rộng vừa phải. */
.ct-body--solo { justify-content: center; }
.ct-body--solo .ct-form { flex: 0 1 720px; }
.ct-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form__title { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; letter-spacing: -.16px; color: var(--sj-dark); margin: 0; }
.ct-form__fields { display: flex; flex-direction: column; gap: var(--sp-24); }
.ct-f { display: flex; flex-direction: column; gap: var(--sp-16); border-bottom: 1px solid var(--sj-n4-nw); padding-bottom: var(--sp-8); }
.ct-f__label { display: flex; gap: 8px; align-items: center; font-size: var(--fs-20); text-transform: uppercase; color: var(--sj-muted-nw); letter-spacing: -.1px; }
.ct-f__label .req { font-size: var(--fs-24); color: var(--sj-rose-nw); }
.ct-f input, .ct-f textarea { font-family: inherit; font-size: var(--fs-20); color: var(--sj-dark); border: 0; background: none; padding: 0; width: 100%; }
.ct-f input::placeholder, .ct-f textarea::placeholder { color: var(--sj-n5-nw, #BDBDBD); }
.ct-f input:focus, .ct-f textarea:focus { outline: none; }
.ct-f:focus-within { border-bottom-color: var(--sj-red); }
/* Trường máy chủ báo sai: tô viền đỏ để người dùng biết phải sửa ô nào. */
.ct-f.is-invalid { border-bottom-color: var(--sj-rose-nw); }
.ct-f.is-invalid .ct-f__label { color: var(--sj-rose-nw); }
.ct-msg.is-invalid .ct-msg__box { border-color: var(--sj-rose-nw); }
.ct-f--phone .ct-f__row { display: flex; gap: var(--sp-16); align-items: center; }
.ct-f__cc { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; position: relative; }
/* Ô cờ: kích thước và ảnh do assets/css/phone-cc.css lo (sprite 244 nước, tỉ lệ 4:3).
   Ở đây chỉ nói cờ cao bao nhiêu. */
.ct-f__cc .flag { --sj-cc-h: var(--ico-24); }
.ct-f__cc .code { font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); text-align: right; }
.ct-f__caret { flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.ct-f__caret img { display: block; width: calc(var(--ico-24) * 16 / 24); height: auto; }
.ct-f__caret[aria-expanded="true"] img { transform: rotate(180deg); }

/* Danh sách mã vùng */
.ct-cc-list {
	position: absolute; top: calc(100% + var(--sp-8)); left: 0; z-index: 5;
	min-width: 280px; max-height: 280px; overflow-y: auto; margin: 0; padding: var(--sp-8) 0;
	list-style: none; background: #fff; border: 1px solid var(--sj-n4-nw); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ct-cc-list[hidden] { display: none; }
.ct-cc-list button { display: flex; gap: var(--sp-16); align-items: center; width: 100%; padding: var(--sp-8) var(--sp-16); border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--fs-20); color: var(--sj-dark); text-align: left; }
.ct-cc-list button:hover, .ct-cc-list button:focus-visible { background: var(--sj-cream); outline: none; }
.ct-cc-list .name { flex: 1 1 auto; min-width: 0; }
.ct-cc-list .dial { flex: 0 0 auto; font-weight: 500; color: var(--sj-muted-nw); }

/* Ô message: khung viền đỏ, nền hồng nhạt, chip "I need" */
.ct-msg { display: flex; flex-direction: column; gap: var(--sp-16); }
/* Đã bỏ chip "I need" (yêu cầu 2026-09-21) — hộp chỉ còn textarea nên cho stretch. */
.ct-msg__box { background: rgba(254, 242, 242, .6); border: 1px solid var(--sj-rose-nw); min-height: 144px; padding: var(--sp-16); display: flex; flex-direction: column; align-items: stretch; }
.ct-msg__box textarea { border: 0; background: none; width: 100%; font-family: inherit; font-size: var(--fs-20); color: var(--sj-dark); resize: vertical; outline: none; }
.ct-submit { align-self: flex-start; gap: var(--sp-16); } /* chữ ↔ mũi tên 16px @1920 */
/* Bộ *-arrow-style-1 là 25×24 — bề rộng phải nhân 25/24, giống .sj-circle-nav ở the-train/tour. */
.ct-submit svg { width: calc(var(--ico-24) * 25 / 24); height: var(--ico-24); vertical-align: middle; }
.ct-form__error { color: var(--sj-red); font-size: var(--fs-20); margin: 0; }
.ct-form__success { color: #2e7d4f; font-size: var(--fs-20); margin: 0; }
.js-sj-contact-form.is-loading .ct-submit { opacity: .7; pointer-events: none; }

/* ---- Bản đồ ---- */
.ct-map { padding: 0 var(--sp-48) var(--sp-80); background: var(--sj-cream); }
.ct-map__frame { border: 1px solid var(--sj-n4-nw); height: clamp(280px, 22.4vw, 430px); width: 100%; display: block; }

@media (max-width: 1023px) {
	.ct-body { flex-direction: column; align-items: stretch; padding: var(--sp-24); }
	.ct-left { width: 100%; padding-left: 0; }
	.ct-form { flex: 1 1 auto; width: 100%; }
	.ct-cols, .ct-socials { gap: var(--sp-24); }
	.ct-map { padding: 0 20px var(--sp-48); }
}
/* Địa chỉ Head Office dùng thẻ <address> (SEO #25): bỏ nghiêng mặc định của trình duyệt. */
address.ct-block__text { font-style: normal; }