/* Trang Liên hệ — số đo lấy trực tiếp trên ảnh bản present Figma (node 4029:29110) chụp 1:1 ở khung 1920x2465. Các mốc dọc chính: 79 gạch dưới header 303 đỉnh thẻ giấy (mép xé) 488 đỉnh hình vò rượu 1561 đáy thẻ giấy 820 / 925 / 1030 / 1135 kẻ ngăn hàng biểu mẫu 1292 kẻ dưới ô lời nhắn 1755 mép trên chân trang 1353..1441 nút "GỬI LỜI NHẮN" Mốc ngang: thẻ 240…1679 (đúng --container 1440), vạch chia đôi ở 959–960, cột phải thụt 40 (nội dung 1001…1639), cột trái thụt 80. Đừng đổi những số này bằng cảm giác — chụp lại bản present rồi đo. */ .contact { position: relative; /* Nền KHÔNG sẫm sớm như bản dựng cũ: lấy điểm ảnh sáng nhất từng hàng ở hai dải ngoài thẻ cho thấy nền gần như phẳng #F0E8D7 → #EBDFCA suốt 85% chiều cao, chỉ 15% cuối mới đổ nhanh xuống #DECCAF ngay trước chân trang. */ background: linear-gradient(180deg, var(--brand-2) 0%, #EBDFCA 65%, #EADECA 85%, #DECCAF 100%); /* Thẻ bắt đầu ở y=303 và chân trang ở 1755, thẻ cao 1258 → đệm 303 / 194. */ padding-block: 303px 192px; } /* Line-art nhà gỗ tụt xuống 90 so với mép khối: trong bản present nét mái đầu tiên nằm ở y=260, còn file PNG có sẵn 170px trống phía trên. */ .contact__backdrop { position: absolute; inset-block-start: 90px; inline-size: 100%; opacity: .6; } .contact__card { position: relative; /* Vạch chia đôi thẻ trùng tâm khung nội dung chuẩn của trang, tức thẻ rộng bằng --container. */ width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; /* Cùng tờ giấy xé như phiếu giữ chỗ — dải xé cao 25 (trên) và 12 (dưới) là biên độ THẬT của vết xé, xem chú thích ở reservation.css. Màu giấy #FFFDF9 chứ không phải --surface-paper. */ background: url("/img/reservation/nen-giay-rach.svg") top center / 100% 25px no-repeat, url("/img/reservation/nen-giay-rach-duoi.svg") bottom center / 100% 12px no-repeat, linear-gradient(#FFFDF9, #FFFDF9) top 24px center / 100% calc(100% - 36px) no-repeat; } /* ---- Cột trái: câu trích ---- */ .contact__quote { display: grid; align-content: end; gap: 35px; padding: 0 var(--sp-40) 122px 80px; /* Vạch chia hai cột thuộc về cột PHẢI (xem .contact__form). */ } /* Câu trích cỡ 38 nét nghiêng, giãn dòng 60 (đo đáy ba dòng chữ: 1241 / 1301 / 1361 — đúng bước 60), màu vàng --brand-1 chứ không phải --brand-alt. (Một nhánh khác từng để 50/64: cỡ đó cho bước dòng 64, còn bản present đo được đúng 60, và dòng 1 rộng 464px chỉ khớp cỡ 38.) */ .contact__quote blockquote { font-family: var(--font-display); font-style: italic; font-weight: 700; color: var(--brand-1); font-size: 38px; line-height: 60px; } /* Logo dưới câu trích: vệt mực đo được 127x36. Bản vẽ 139x40 vẽ hết khung nên đặt 125 để vệt mực ra đúng cỡ đó — bản dựng cũ thu còn 88, nhỏ hơn thiết kế 30%. */ .contact__quote img { inline-size: 125px; } /* ---- Cột phải: biểu mẫu ---- */ .contact__form { /* Vạch chia hai cột DÀY 2px màu nâu 50% (#A0968C), không phải nét xám 1px. */ border-inline-start: 2px solid color-mix(in srgb, var(--brand-4) 50%, transparent); /* Đỉnh hình vò rượu ở y=488, tức 185 tính từ đỉnh thẻ. */ padding: 185px 40px 120px; display: grid; align-content: start; } /* Vò rượu đo được 221x197 và ẢNH đã vẽ kín khung, nên đặt đúng 221. Đừng phóng khung lên (260, 315…) để bù cho nét vẽ nhỏ: đó là cách chữa bản .svg dựng tay cũ, mà nét vẽ đó còn sai cả tỉ lệ (162x163 thay vì 221x197) nên phóng kiểu gì cũng chỉ khớp được một chiều. */ .contact__jar { inline-size: 221px; margin-inline: auto; } /* Không kéo hết bề rộng cột: hộp ôm theo bề rộng dòng tiêu đề rồi mới canh giữa vò rượu bên trong hộp đó. Khe 61 giữa đáy vò và dòng tiêu đề. */ .contact__intro { justify-self: start; display: grid; justify-items: center; gap: 65px; } .contact__heading { text-align: center; color: var(--brand-4); } .contact__sent { color: var(--status-success); text-align: center; } /* ---- Lưới trường nhập ---- Mỗi hàng cao đúng 105 như phiếu giữ chỗ: 2 kẻ ngăn + 19 đệm trên + 24 nhãn + 10 khe + 32 dòng nhập + 2 đệm + 2 gạch chân ô + 14 đệm dưới. */ .contact__grid { display: grid; grid-template-columns: 1fr 1fr; margin-block-start: 38px; } .contact__grid > .field { padding: 18px 0 15px; gap: 10px; border-block-start: 2px solid color-mix(in srgb, var(--brand-4) 50%, transparent); border-block-end: none; } /* Ô "HỌ VÀ TÊN" và "SỐ ĐIỆN THOẠI" chung một hàng, ngăn nhau bằng vạch dọc 2px NHẠT hơn kẻ ngang (nâu 25%, đo được #CFC9C2) — vạch nằm ở x=1319, tức giữa khe, nên khe phải bằng 0 rồi đẩy chữ ra bằng đệm hai bên. */ .contact__grid > .field:nth-child(1) { padding-inline-end: 40px; border-inline-end: 2px solid color-mix(in srgb, var(--brand-4) 25%, transparent); } .contact__grid > .field:nth-child(2) { padding-inline-start: 40px; } .contact__form .field__label { letter-spacing: normal; } .contact__form .field input, .contact__form .field textarea { font-size: 24px; line-height: 32px; font-weight: 300; border-block-end: 2px solid #D9D7D4; padding-block: 0 2px; } .contact__form .field input::placeholder, .contact__form .field textarea::placeholder { color: #A9A096; opacity: 1; } /* Ô lời nhắn rộng hơn hẳn: kẻ trên 4px (chỗ hai vạch 2px gặp nhau trong bản present), đệm trên 42 và đệm dưới 39, kết bằng một kẻ NHẠT 2px màu nâu 25%. */ .contact__grid > .field--message { grid-column: 1 / -1; padding: 44px 0 37px; border-block-start-width: 4px; border-block-end: 2px solid color-mix(in srgb, var(--brand-4) 25%, transparent); } /* resize: none vì ô chỉ cao một dòng theo thiết kế; để "vertical" thì trình duyệt vẽ thêm ba vạch chéo ở góc dưới phải, bản present không có. */ .contact__form textarea { resize: none; block-size: 38px; min-block-size: 38px; padding-block-end: 4px; } /* Nút gửi: hộp 640x89 kéo hết bề rộng cột nội dung, có VIỀN KEM MẢNH lùi vào 8px bên trong như nút "XÁC NHẬN ĐẶT BÀN" của phiếu giữ chỗ. */ .contact__submit { justify-self: stretch; justify-content: center; margin-block-start: 59px; padding: 0; block-size: 89px; font-size: 18px; line-height: 20px; letter-spacing: normal; border: 8px solid var(--brand-4); box-shadow: inset 0 0 0 1px var(--brand-2); }