/* =============================================================================
   DN Studio — Trang Liên hệ
   Dựng theo bản thiết kế trang liên hệ: banner sáng hai cột (chữ trái + thẻ
   form trắng phải), "Tại sao chọn DNWEB?", "Quy trình làm việc đơn giản" và
   dải "Liên hệ ngay".

   Nền tảng dùng chung home2.css (nav trắng dính đầu trang, footer navy, biến
   --h2-*). Mọi selector dưới đây đều nằm trong .lh nên không đụng trang khác.

   Ghi chú về chữ viết tay: bản thiết kế có hai dòng kiểu chữ viết tay
   ("Cùng bạn kiến tạo giá trị số!" và ghi chú trên ảnh mục "Tại sao chọn").
   Theme đã bỏ Dancing Script vì font này vỡ dấu tiếng Việt (xem inc/assets.php),
   nên hai dòng đó dùng bản nghiêng thật của Be Vietnam Pro — vẫn giữ được
   sắc thái viết tay mà dấu tiếng Việt không bị hỏng.
   ========================================================================== */

.lh {
  font-family: var(--dn-font);

  --lh-ink:      #10254f;   /* tiêu đề */
  --lh-ink-soft: #1c3563;   /* chữ trong thẻ trích dẫn */
  --lh-body:     #6b7a95;   /* chữ thường */
  --lh-blue:     #1a6ff5;   /* nhấn, nút */
  --lh-blue-dk:  #0f57cc;
  --lh-tint:     #eaf2fe;   /* nền vòng tròn icon, dải liên hệ */
  --lh-tint-2:   #f3f8ff;   /* nền thẻ trích dẫn */
  --lh-line:     #e2eaf6;   /* viền, vạch ngăn */
  --lh-field:    #dbe4f2;   /* viền ô nhập */
  --lh-star:     #e5484d;   /* dấu * bắt buộc */

  --lh-sec:      96px;      /* khoảng cách giữa các mục */

  overflow-x: clip;
  background: #fff;
}

.lh h1, .lh h2, .lh h3, .lh h4 { margin: 0; letter-spacing: -.01em; color: var(--lh-ink); }
.lh p  { margin: 0; }
.lh ul, .lh ol, .lh dl { margin: 0; padding: 0; list-style: none; }
.lh .h2-svg { width: 1em; height: 1em; display: block; }

.lh-svg {
  width: 1em; height: 1em; display: block; flex: 0 0 auto;
}

/* Vòng tròn icon xanh nhạt — mô-típ lặp lại ở cả 4 mục của trang. */
.lh-ring {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--lh-tint); color: var(--lh-blue);
}
.lh-ring .lh-svg { width: 25px; height: 25px; }

/* =============================================================== BANNER === */
/* Nền tranh sáng nằm ở nửa dưới banner, nhoè dần lên trắng để chữ và thẻ form
   luôn đọc rõ. Ảnh thật (bàn làm việc + thành phố) sẽ thay vào .lh-hero__bg. */
.lh-hero {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 40%, #e4eefc 100%);
}
.lh-hero__bg {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 58%;
  background-repeat: no-repeat; background-position: center 64%; background-size: cover;
  opacity: .72;
}
/* Hai lớp sương: dọc kéo mép trên về trắng, ngang làm nhạt nửa trái để cột chữ
   và thẻ form luôn nổi rõ trên ảnh. */
.lh-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #fbfdff 0%, rgba(251, 253, 255, .95) 26%,
                    rgba(249, 252, 255, .7) 48%, rgba(249, 252, 255, .34) 70%,
                    rgba(249, 252, 255, .12) 100%),
    linear-gradient(94deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .5) 34%,
                    rgba(255, 255, 255, .12) 56%, rgba(255, 255, 255, 0) 74%);
}

.lh-hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 52px; align-items: start;
  padding-top: 76px; padding-bottom: 82px;
}

/* ------------------------------------------------------------ cột chữ ---- */
.lh-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800; line-height: 1;
  letter-spacing: .17em; text-transform: uppercase; color: var(--lh-blue);
}
.lh-hero__eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; flex: 0 0 auto;
}

.lh-hero__title {
  margin: 20px 0 0;
  font-size: clamp(34px, 3.7vw, 53px); line-height: 1.17; font-weight: 800;
  letter-spacing: -.022em; color: var(--lh-ink);
}
.lh-hero__title span { color: var(--lh-blue); }

.lh-hero__lead {
  max-width: 505px; margin-top: 24px;
  color: var(--lh-body); font-size: 15.5px; line-height: 1.95;
}

/* -- ba giá trị: Tận tâm / Uy tín / Trách nhiệm, ngăn bằng vạch dọc mảnh -- */
.lh-values {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 38px;
}
.lh-values li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 2px 14px 2px 0;
}
.lh-values li + li { padding-left: 18px; border-left: 1px solid var(--lh-line); }
.lh-values .lh-ring { width: 40px; height: 40px; }
.lh-values .lh-ring .lh-svg { width: 19px; height: 19px; }
.lh-values__tx { display: block; min-width: 0; }
.lh-values b {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--lh-ink);
}
.lh-values__sub {
  display: block; margin-top: 7px;
  font-size: 12px; line-height: 1.6; color: var(--lh-body);
}

/* ------------------------------------------------------ thẻ trích dẫn ---- */
.lh-quote {
  position: relative; margin-top: 40px;
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 28px 24px;
  border-radius: 14px; background: var(--lh-tint-2);
  border: 1px solid #dfeafc;
}
.lh-quote__mark { color: #9cc2fb; }
.lh-quote__mark .lh-svg { width: 27px; height: 27px; }
.lh-quote p {
  font-size: 14.5px; line-height: 1.95; color: var(--lh-ink-soft);
}
.lh-quote__sign {
  display: block; margin-top: 12px;
  font-size: 16.5px; font-style: italic; font-weight: 600;
  letter-spacing: .01em; color: var(--lh-blue);
}

/* ============================================================= THẺ FORM === */
/* Thẻ form phải gọn trong một màn hình: mọi khoảng cách bên trong đều lấy từ
   biến bên dưới, nên màn hình thấp chỉ cần đổi bộ biến này là cả thẻ co lại
   cân đối (xem khối @media max-height ở cuối file). */
.lh-card {
  position: relative;
  --lhc-pad-y:   30px;   /* đệm trên thẻ */
  --lhc-pad-x:   34px;
  --lhc-gap:     15px;   /* giữa hai hàng trường */
  --lhc-input:   44px;   /* cao ô nhập */
  --lhc-area:    92px;   /* cao ô mô tả nhu cầu */
  --lhc-label:   12.5px;

  background: #fff; border-radius: 18px;
  padding: var(--lhc-pad-y) var(--lhc-pad-x) calc(var(--lhc-pad-y) - 4px);
  box-shadow: 0 34px 70px -38px rgba(11, 33, 82, .42), 0 2px 8px -4px rgba(11, 33, 82, .12);
}

.lh-card__head { display: flex; align-items: flex-start; gap: 14px; }
.lh-card__head .lh-svg { width: 38px; height: 38px; color: var(--lh-blue); margin-top: 1px; }
.lh-card__head h2 {
  font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--lh-ink);
}
.lh-card__sub {
  max-width: 410px; margin-top: 8px;
  font-size: 13px; line-height: 1.6; color: var(--lh-body);
}

.lh-form { margin-top: 22px; }

/* Hàng trường: một cột hoặc hai cột bằng nhau. */
.lh-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lh-field { display: block; margin-top: var(--lhc-gap); }
.lh-row .lh-field { margin-top: 0; }
.lh-form > .lh-field:first-child { margin-top: 0; }
.lh-row + .lh-field,
.lh-field + .lh-row,
.lh-row + .lh-row { margin-top: var(--lhc-gap); }

.lh-field > label,
.lh-field > .lh-label {
  display: block; margin-bottom: 7px;
  font-size: var(--lhc-label); font-weight: 700; line-height: 1.3; color: var(--lh-ink);
}
.lh-req { color: var(--lh-star); font-weight: 700; }

.lh-field input,
.lh-field select,
.lh-field textarea {
  width: 100%; display: block; box-sizing: border-box;
  font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--lh-ink);
  background: #fff; border: 1px solid var(--lh-field); border-radius: 9px;
  padding: 0 14px; height: var(--lhc-input);
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none; appearance: none;
}
/* Đặt height chứ không chỉ min-height: thuộc tính rows="4" của thẻ textarea
   cho chiều cao nội tại ~108px, lớn hơn min-height nên sẽ thắng và làm thẻ
   form cao vượt một màn hình. rows="4" vẫn giữ để còn hợp lý khi không có CSS.
   resize:vertical nên người dùng vẫn kéo rộng ra được khi cần. */
.lh-field textarea {
  padding: 11px 14px;
  height: var(--lhc-area); min-height: var(--lhc-area);
  resize: vertical;
}
.lh-field input::placeholder,
.lh-field textarea::placeholder { color: #9aa8bf; }
.lh-field input:focus,
.lh-field select:focus,
.lh-field textarea:focus {
  outline: 0; border-color: var(--lh-blue);
  box-shadow: 0 0 0 3px rgba(26, 111, 245, .14);
}

/* Mũi tên xổ xuống vẽ bằng CSS — giữ nguyên nét mảnh trên mọi trình duyệt. */
.lh-field select {
  padding-right: 40px; color: var(--lh-ink); cursor: pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px 17px;
}
.lh-field select:invalid,
.lh-field select.is-empty { color: #9aa8bf; }

.lh-submit {
  width: 100%; margin-top: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 50px; padding: 0 24px; border: 0; border-radius: 9px;
  background: var(--lh-blue); color: #fff; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .005em;
  box-shadow: 0 18px 32px -18px rgba(26, 111, 245, .95);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.lh-submit .lh-svg { width: 19px; height: 19px; }
.lh-submit:hover { background: var(--lh-blue-dk); transform: translateY(-1px); }

.lh-card__note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--lh-body);
}
.lh-card__note .lh-svg { width: 14px; height: 14px; color: #9aa8bf; }

/* Bẫy bot — ẩn hoàn toàn nhưng không dùng display:none (bot bỏ qua ô ẩn kiểu đó). */
.lh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Thông báo sau khi gửi */
.lh-ok,
.lh-err { border-radius: 11px; padding: 16px 18px; font-size: 14px; line-height: 1.75; }
.lh-ok  { background: #e8f7ee; border: 1px solid #bfe6cf; color: #14663a; }
.lh-err { background: #fdecec; border: 1px solid #f6c9ca; color: #9d2226; margin-bottom: 20px; }
.lh-err p + p { margin-top: 5px; }
.lh-ok strong { font-weight: 700; }
.lh-note-mau {
  margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--lh-body);
}
.lh-note-mau code {
  font-family: inherit; font-weight: 700; color: var(--lh-blue);
}

/* ============================================ TẠI SAO CHỌN DNWEB ========= */
.lh-why {
  display: grid; grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr);
  gap: 48px; align-items: start;
  padding-top: var(--lh-sec);
}
.lh-h2 { font-size: 30px; line-height: 1.28; font-weight: 800; letter-spacing: -.02em; }
.lh-h2 span { color: var(--lh-blue); }
.lh-why__lead {
  max-width: 462px; margin-top: 16px;
  font-size: 15px; line-height: 1.85; color: var(--lh-body);
}

.lh-why__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 46px;
}
.lh-why__list li { padding: 0 18px 0 0; }
.lh-why__list li + li { padding-left: 20px; border-left: 1px solid var(--lh-line); }
.lh-why__list li:last-child { padding-right: 0; }
.lh-why__list b {
  display: block; margin-top: 20px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--lh-ink);
}
.lh-why__sub {
  display: block; margin-top: 9px;
  font-size: 12px; line-height: 1.65; color: var(--lh-body);
}

/* Ảnh tư vấn. */
.lh-why__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 50% 50%;
  border-radius: 14px; background: var(--lh-tint);
}

/* ================================================ QUY TRÌNH LÀM VIỆC ===== */
.lh-flow { padding-top: var(--lh-sec); }
.lh-flow__list {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start; margin-top: 44px;
}
.lh-step { position: relative; padding-right: 30px; }
.lh-step__top { display: flex; align-items: center; gap: 16px; }
.lh-step__num {
  font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: #c2d5f0;
}
.lh-step b {
  display: block; margin-top: 21px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--lh-ink);
}
.lh-step__sub {
  display: block; margin-top: 9px;
  font-size: 12.5px; line-height: 1.6; color: var(--lh-body);
}
/* Mũi tên nối giữa hai bước — nằm ngang tâm vòng tròn icon. */
.lh-step__arrow {
  position: absolute; top: 28px; right: 6px; transform: translateY(-50%);
  color: #b9cbe6;
}
.lh-step__arrow .lh-svg { width: 17px; height: 17px; }
.lh-step:last-child { padding-right: 0; }

/* ==================================================== DẢI LIÊN HỆ NGAY === */
.lh-strip-sec { padding-top: var(--lh-sec); padding-bottom: var(--lh-sec); }
.lh-strip {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.56fr);
  gap: 30px; align-items: center;
  padding: 26px 36px; border-radius: 16px; background: var(--lh-tint);
}
.lh-strip__lead { display: flex; align-items: center; gap: 18px; }
.lh-strip__tile {
  width: 54px; height: 54px; border-radius: 15px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #3b87ff 0%, var(--lh-blue) 55%, #1259d6 100%);
  color: #fff; box-shadow: 0 14px 26px -14px rgba(26, 111, 245, .95);
}
.lh-strip__tile .lh-svg { width: 24px; height: 24px; }
.lh-strip__lead h2 { font-size: 19px; font-weight: 800; line-height: 1.3; }
.lh-strip__lead p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--lh-body); }

/* Ba cột không bằng nhau: cột email dài nhất nên được chia rộng hơn, nhờ vậy
   cả ba giá trị đều nằm gọn một dòng như bản thiết kế. */
.lh-strip__ways {
  display: grid; grid-template-columns: 1.02fr .88fr 1.24fr; gap: 16px;
}
.lh-way {
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; min-width: 0;
}
.lh-way__ic {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--lh-blue);
  box-shadow: 0 8px 18px -12px rgba(11, 33, 82, .55);
}
.lh-way__ic .lh-svg { width: 20px; height: 20px; }
.lh-way small {
  display: block; font-size: 12px; line-height: 1.3; color: var(--lh-body);
}
.lh-way strong {
  display: block; margin-top: 5px;
  font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--lh-ink);
  overflow-wrap: anywhere;
}
.lh-way:hover strong { color: var(--lh-blue); }

/* ============================================================ CO GIÃN ==== */
@media (max-width: 1240px) {
  .lh { --lh-sec: 76px; }
  .lh-hero__in { gap: 38px; }
  .lh-card { --lhc-pad-x: 28px; }
  .lh-why { gap: 38px; }
  .lh-strip { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 1040px) {
  .lh-hero__in { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 64px; }
  .lh-hero__lead,
  .lh-values,
  .lh-quote { max-width: none; }
  .lh-hero__bg { height: 46%; opacity: .6; }
  .lh-card { margin-top: 8px; }

  .lh-why { grid-template-columns: 1fr; }
  .lh-why__media { order: -1; }
  .lh-why__list { margin-top: 34px; }

  .lh-flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .lh-step:nth-child(3) .lh-step__arrow { display: none; }
}

@media (max-width: 760px) {
  .lh { --lh-sec: 56px; }

  .lh-hero__title { font-size: 33px; }
  .lh-values { grid-template-columns: 1fr; row-gap: 18px; }
  .lh-values li + li { padding-left: 0; border-left: 0; }
  .lh-quote { flex-direction: column; gap: 12px; padding: 22px 20px; }

  .lh-card { --lhc-pad-y: 26px; --lhc-pad-x: 20px; border-radius: 14px; }
  .lh-card__head h2 { font-size: 20px; }
  .lh-row { grid-template-columns: 1fr; gap: 0; }
  .lh-row .lh-field + .lh-field { margin-top: var(--lhc-gap); }

  .lh-h2 { font-size: 24px; }
  .lh-why__list { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .lh-why__list li:nth-child(odd) { padding-left: 0; border-left: 0; }

  .lh-flow__list { grid-template-columns: 1fr 1fr; }
  .lh-step__arrow { display: none; }
  .lh-step { padding-right: 14px; }

  .lh-strip { padding: 22px 20px; border-radius: 14px; }
  .lh-strip__ways { grid-template-columns: 1fr; gap: 16px; }
}

/* ------------------------------------------- MÀN HÌNH THẤP (laptop nhỏ) --- */
/* Yêu cầu: thẻ "Liên hệ tư vấn miễn phí" phải thấy trọn trong một màn hình,
   không phải cuộn.

   Chiều cao khung nhìn thật rất khác nhau (thanh công cụ trình duyệt, thanh
   dấu trang, thanh tác vụ… ăn mất 90–150px), nên thay vì chia vài nấc cứng,
   mọi khoảng cách dọc của thẻ đều là clamp() theo vh: màn càng thấp thẻ càng
   co lại từ từ, không bao giờ nhảy bậc. Giá trị nhỏ nhất trong clamp là ngưỡng
   vẫn còn bấm/đọc thoải mái, giá trị lớn nhất là nhịp gốc của bản thiết kế.

   Chỉ áp dụng cho bố cục hai cột; dưới 1041px trang đã xếp dọc nên không còn
   khái niệm "một màn hình". */
@media (min-width: 1041px) {
  .lh-hero__in {
    padding-top:    clamp(14px, 3.9vh, 76px);
    padding-bottom: clamp(36px, 7.6vh, 82px);
  }

  .lh-card {
    --lhc-pad-y: clamp(11px,   2.4vh,  30px);
    --lhc-gap:   clamp(7px,    1.5vh,  15px);
    --lhc-input: clamp(34px,   4.6vh,  44px);
    --lhc-area:  clamp(40px,   8.2vh,  92px);
    --lhc-label: clamp(11.5px, 1.35vh, 12.5px);
  }
  .lh-card__head { gap: clamp(10px, 1.6vh, 14px); }
  .lh-card__head .lh-svg {
    width:  clamp(28px, 3.9vh, 38px);
    height: clamp(28px, 3.9vh, 38px);
  }
  .lh-card__head h2 { font-size: clamp(17.5px, 2.3vh, 22px); }
  .lh-card__sub {
    margin-top: clamp(4px, .9vh, 8px);
    font-size:  clamp(11.5px, 1.4vh, 13px); line-height: 1.45;
  }
  .lh-form { margin-top: clamp(10px, 2.3vh, 22px); }
  .lh-row { gap: clamp(13px, 2vh, 18px); }
  .lh-field > label { margin-bottom: clamp(4px, .8vh, 7px); }
  .lh-submit {
    margin-top: clamp(10px, 2.1vh, 20px);
    min-height: clamp(40px, 5.2vh, 50px);
    font-size:  clamp(13.5px, 1.6vh, 15px);
  }
  .lh-card__note {
    margin-top: clamp(6px, 1.5vh, 14px);
    font-size:  clamp(10.5px, 1.3vh, 12px);
  }
}

/* Khung nhìn cực thấp (màn 768px thật sau khi trừ thanh trình duyệt, hoặc cửa
   sổ bị kéo bẹp). Ở đây phần vh của clamp vẫn còn lớn hơn mức cần, nên đặt
   thẳng số cố định — siết nốt để thẻ form vẫn trọn trong màn hình. */
@media (min-width: 1041px) and (max-height: 639px) {
  .lh-hero__in { padding-top: 16px; padding-bottom: 32px; }

  .lh-card { --lhc-pad-y: 12px; --lhc-gap: 7px; --lhc-area: 40px; }
  .lh-form   { margin-top: 10px; }
  .lh-submit { margin-top: 10px; }
}