/* lien-he-mht.css — phần RIÊNG của MH Travel cho trang liên hệ.
   Nạp SAU css/lien-he.css (bản trích nguyên văn — sinh lại mỗi lần chạy bộ
   trích, sửa tay vào đó là mất). */

/* Bản gốc dùng navy #1e3a5f + vàng đồng #b8933d của Ái Vân. Bên này kéo về
   bảng màu MH Travel: xanh biển + đỏ thương hiệu. Đổi ở BIẾN chứ không sửa
   từng luật — bộ trích sinh lại là mọi sửa tay biến mất. */
.lx, .lx-hero {
    --lx-dam: var(--bien-sau, #0b2545);
    --lx-nhan: var(--do, #e84038);
    --lx-nhan-toi: var(--do-dam, #c9302c);
    --lx-vien: #dbe6ee;
    --lx-kem: #f6fafc;
}

/* Bìa: dùng chuyển sắc biển thay nền phẳng, cho khớp các trang khác */
.lx-hero {
    background: linear-gradient(160deg, var(--bien-sau, #0b2545) 0%, var(--bien-vua, #14416e) 100%);
}

/* Nút chính về màu đỏ thương hiệu */
.lx-nut.chinh {
    background: var(--do, #e84038);
    border-color: var(--do, #e84038);
    color: #fff;
}
.lx-nut.chinh:hover { background: var(--do-dam, #c9302c); border-color: var(--do-dam, #c9302c); }

/* Nhãn "ai phụ trách" trên thẻ dịch vụ: hai màu để phân biệt việc mình làm
   trực tiếp và việc chuyển sang Ái Vân — khách cần biết trước, không phải sau. */
.lx-vaitro {
    display: inline-block; font-size: 11.5px; font-weight: 800;
    letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.lx-vaitro.tu  { background: #e7f6f8; color: #0d6e7a; border: 1px solid #b8e3e9; }
.lx-vaitro.hop { background: #fdf3e7; color: #8a6a17; border: 1px solid #ecd9b0; }

/* ── Biểu mẫu ──────────────────────────────────────────────────────────── */
.lx-lien { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.lx-form-o, .lx-tt-o {
    background: #fff; border: 1px solid var(--lx-vien); border-radius: 16px; padding: 26px 24px;
}
.lx-o { margin-bottom: 16px; }
.lx-o label { display: block; font-size: 13.5px; font-weight: 700; color: var(--muc, #132a47); margin-bottom: 6px; }
.lx-o label span { color: var(--do, #e84038); }
.lx-o input, .lx-o textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--lx-vien); border-radius: 9px;
    font: inherit; font-size: 15px; color: var(--muc, #132a47); background: #fff;
}
.lx-o input:focus, .lx-o textarea:focus {
    outline: none; border-color: var(--ngoc, #24b6c9);
    box-shadow: 0 0 0 3px rgba(36, 182, 201, .16);
}
.lx-o textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.lx-gui { width: 100%; justify-content: center; margin-top: 4px; }
.lx-ghi { font-size: 13px; line-height: 1.65; color: var(--xam, #5c7180); margin: 12px 0 0; }

/* Ô mồi chống bot: ẩn khỏi mắt người NHƯNG vẫn nằm trong luồng để bot điền vào.
   Không dùng display:none — bot biết bỏ qua ô đó. */
.lx-moi {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.lx-bao { padding: 12px 15px; border-radius: 10px; font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.lx-bao.ok  { background: #e8f6ec; border: 1px solid #b6e0c2; color: #1c7c46; }
.lx-bao.loi { background: #fdecea; border: 1px solid #f5c2bd; color: #b3261e; }

.lx-xong { text-align: center; padding: 22px 0 8px; }
.lx-xong-ic {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
    background: #e8f6ec; color: #1c7c46; font-size: 30px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.lx-xong p { font-size: 15.5px; line-height: 1.7; color: var(--xam, #5c7180); margin: 0 0 18px; }

/* ── Cột thông tin ─────────────────────────────────────────────────────── */
.lx-tt { list-style: none; padding: 0; margin: 0 0 20px; }
.lx-tt li { padding: 13px 0; border-bottom: 1px solid #eef3f7; }
.lx-tt li:last-child { border-bottom: 0; }
.lx-tt b {
    display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--xam, #5c7180); margin-bottom: 3px;
}
.lx-tt a, .lx-tt span { font-size: 15.5px; color: var(--muc, #132a47); font-weight: 600; text-decoration: none; }
.lx-tt a:hover { color: var(--do-chu, #c9302c); }

.lx-nhac {
    background: var(--lx-kem); border-left: 3px solid var(--ngoc, #24b6c9);
    border-radius: 0 10px 10px 0; padding: 14px 16px;
}
.lx-nhac b { display: block; font-size: 14.5px; color: var(--muc, #132a47); margin-bottom: 5px; }
.lx-nhac p { font-size: 13.5px; line-height: 1.7; color: var(--xam, #5c7180); margin: 0; }

@media (max-width: 860px) {
    /* Hai cột 1.15fr/1fr ở khổ này còn ~330px mỗi cột — ô nhập chật, nhãn
       xuống dòng lẻ. Xuống một cột sớm, form đặt trên vì đó là việc chính. */
    .lx-lien { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 700px) {
    .lx-form-o, .lx-tt-o { padding: 20px 16px; }
    /* Vùng chạm cho ngón tay */
    .lx-nut { min-height: 44px; }
    .lx-o input, .lx-o textarea { font-size: 16px; }   /* dưới 16px là iOS tự phóng to trang */
}

/* ── Khối "Hai đơn vị, một đầu mối" ──────────────────────────────────────
   Dùng lại nguyên bộ .lx-dv của bản trích (viền, gạch vàng khi rê chuột,
   nhãn vai trò) và chỉ đổi số cột: bản trích chia ba, ở đây có hai đơn vị.
   Không đặt tên lớp mới cho từng thứ — thẻ vẫn là .lx-dv > article. */
.lx-dv-2 { grid-template-columns: repeat(2, 1fr); }

/* Mã số 01/02 của bản trích là chữ số nhỏ; ở đây thay bằng TÊN đơn vị nên
   phải nới cỡ chữ, nếu không tên công ty nhìn như số thứ tự. */
.lx-dv-2 .lx-dv-so { font-size: 12.5px; letter-spacing: .22em; }

/* Dòng nói rõ vai trò các bên còn lại. Nhỏ hơn thân bài một nhịp vì đây là
   phần đọc để nắm, không phải phần mời gọi. */
.lx-ghi-nhom {
    max-width: 900px; margin: 34px auto 0; text-align: center;
    font-size: 13.5px; line-height: 1.85;
    /* KHÔNG dùng var(--mute) #6f7a85 ở đây: đo trên nền trắng ra 4,38 — dưới
       chuẩn 4,5 cho chữ cỡ nhỏ. Đậm thêm một nấc thành 5,26. Chỗ khác dùng
       --mute cho chữ lớn hơn nên vẫn đạt. */
    color: #5c6670;
}
.lx-ghi-nhom b { color: var(--navy2); font-weight: 600; }
.lx-ghi-nhom a { color: var(--navy2); text-decoration: none; border-bottom: 1px solid rgba(30,58,95,.28); }
.lx-ghi-nhom a:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 760px) {
    /* Hai cột ở khổ này còn ~330px, danh sách gạch đầu dòng bắt đầu ngắt chữ
       xấu. Xuống một cột — thà dài hơn là chật. */
    .lx-dv-2 { grid-template-columns: minmax(0, 1fr); }
}