/* =============================================================================
   40-page-lien-he.css — STYLE MOBILE TRANG "LIÊN HỆ"
   Dựng 20/08/2026 theo brief "tối ưu mobile trang Liên hệ".

   🔒 Tệp chỉ nạp khi slug = lien-he, và mọi bộ chọn còn bọc `tl-lien-he`
      (lớp child theme gắn lên <body>). Brief xin `.tl-contact-page` — không tạo
      thêm, dự án đã có sẵn wrapper tương đương và TỰ ĐỘNG.

   ♻️ PHẦN LỚN BRIEF ĐÃ ĐẠT SẴN — đo 20/08 trước khi sửa, KHÔNG đụng lại:
      · §11 Họ tên | SĐT đã tách dòng ở ≤549 (30-components dòng 124)
      · §13/§31 ô nhập cao 54px (>48) và chữ **16px** ⇒ iOS Safari KHÔNG tự
        phóng khi chạm vào ô — điểm 5 của bộ kiểm iPhone đã chứng minh
      · §18 nút GỬI đã full-width 48px (QĐ-M8)
      · §14 placeholder #8b93a5 · §15 focus có viền + quầng nhẹ
      · §37 không cuộn ngang ở cả 8 khổ
      · §30 autofill và autocomplete để nguyên, không đụng
      ⇒ Tệp này CHỈ chữa 7 chỗ còn lệch. Không viết lại thứ đã đúng.

   ⛔ KHÔNG đụng một dòng nào của Contact Form 7: logic gửi, validation, email
      nhận, hidden field, bẫy nhện `.tl-hp` giữ nguyên (brief §1 · §40).

   ⛔ Mốc breakpoint: chỉ 549/849/850 (luật III.4.3-3). Brief §3 xin 991/767/480
      và §32 xin 360 — 4T đã chốt giữ hệ Flatsome, đáp bằng clamp.
============================================================================= */

/* =============================================================================
   TỪ 849px TRỞ XUỐNG
============================================================================= */
@media (max-width: 849px) {

/* -----------------------------------------------------------------------------
   1. KHỐI TIÊU ĐỀ — thu lại để form lên sớm
   [phục vụ]  phần tử: Text + Divider | khối: .tl-lienhe-tieude
   [trang]    lien-he
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Cỡ H1 phải là công thức theo bề ngang màn (clamp); panel
              chỉ có MỘT số rem cho cả dải ≤849 và đó chính là bẫy 9. Divider
              thì panel có `width`/`height` nhưng KHÔNG tách theo thiết bị.

   ĐO TRƯỚC KHI SỬA (375px): khối tiêu đề cao **380,5px** — nhãn 16px, H1 26px,
   gạch 64×3, mô tả 16px. Brief §6–§9 xin 11 · clamp(27,7.4vw,31) · 34×2 · 14px.
   Đây là trang chuyển đổi: mỗi px của khối này là một px đẩy ô nhập xuống.
   -------------------------------------------------------------------------- */
.tl-lien-he .tl-nhan-section p {
	margin: 0 0 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tl-cam-chu);
}

.tl-lien-he .tl-lienhe-h1 h1 {
	font-size: clamp(27px, 7.4vw, 31px);
	line-height: 1.14;
	font-weight: 800;
	color: var(--tl-navy);
	margin-bottom: 0;
}

.tl-lien-he .tl-lienhe-h1 { margin-bottom: 0; }

/* Gạch cam: panel đang 64×3 cho desktop; ở khổ hẹp nó thành một vệt dài.
   ⚠ Flatsome in bề rộng divider bằng `style=` nội tuyến ⇒ cần !important.
      Đây là 1 trong 2 chỗ duy nhất của tệp dùng !important. */
.tl-lien-he .tl-lienhe-tieude .divider,
.tl-lien-he .tl-lienhe-tieude .is-divider {
	width: 34px !important;
	height: 2px !important;
	margin: 8px auto 13px;
}

.tl-lien-he .tl-lienhe-mota p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tl-text);
	margin: 0 auto 18px;
	max-width: 430px;
}

/* -----------------------------------------------------------------------------
   2. BIỂU MẪU — bớt lề để form ngắn lại, không đụng gì khác
   [phục vụ]  phần tử: Contact Form 7 | khối: .tl-form-lienhe
   [trang]    lien-he
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Ô nhập do PLUGIN sinh ra, nằm ngoài mọi panel Flatsome.

   ⛔ KHÔNG đổi `font-size` của ô nhập. 16px là thứ giữ cho iOS Safari không tự
      phóng to cả trang mỗi lần chạm vào ô (bẫy đã ghi ở 13.12 của vault, và
      brief §13 · §40 cũng nói thẳng). Hạ xuống 14px là mất điểm 5 của bộ kiểm
      iPhone đã ĐẠT.
   ⚠ Chỉ bớt LỀ và chiều cao textarea — hai thứ kéo dài form mà không giúp gì
     cho việc điền.
   -------------------------------------------------------------------------- */
.tl-lien-he .tl-form-lienhe input[type="text"],
.tl-lien-he .tl-form-lienhe input[type="tel"],
.tl-lien-he .tl-form-lienhe input[type="email"],
.tl-lien-he .tl-form-lienhe select,
.tl-lien-he .tl-form-lienhe textarea {
	margin-bottom: 10px;           /* 16 → 10 (brief §16) */
	min-height: 48px;
	padding: 12px 14px;
}

.tl-lien-he .tl-form-lienhe textarea {
	min-height: 105px;             /* 132 → 105 (brief §17) */
	padding: 13px 14px;
}

/* Hàng Họ tên | SĐT: ở ≤549 đã `display:block` (30-components). Dải 550–849 thì
   chưa — giữ hai cột ở đó là ĐÚNG brief §35 (tablet quay lại 2 cột), chỉ cần
   khe hở gọn hơn. */
.tl-lien-he .tl-form-lienhe .tl-form-hang { gap: 12px; }

/* Nút GỬI đã full-width từ QĐ-M8; ở đây chỉ kéo nó sát ô cuối một nhịp */
/* ⚠ QĐ-M8 cho nút full-width 48px nhưng CHỈ ở ≤549. Đo ở 768: nút còn
   166×39,3px — dưới ngưỡng chạm 44px. Lại đúng "vùng chết 550–849" đã ghi ở
   CLAUDE.md 25.4. Giữ nút tự co ở tablet (brief §35) nhưng ép đủ cao. */
.tl-lien-he .tl-form-lienhe .tl-form-nut { margin-top: 4px; }

.tl-lien-he .tl-form-lienhe .tl-form-nut input[type="submit"] { min-height: 46px; }

.tl-lien-he .tl-form-lienhe .tl-form-bao-mat {
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--tl-xam);
}

/* -----------------------------------------------------------------------------
   3. KHOẢNG TRẮNG CUỐI TRANG — 110px chết trước footer
   [phục vụ]  phần tử: Section | khối: section biểu mẫu
   [trang]    lien-he
   [mockup]   ⚠ brief 20/08 KHÔNG kèm ảnh tham chiếu
   [lý do vượt panel]  Panel Section của khối biểu mẫu đã để `padding="0px"`;
              khoảng trắng còn lại KHÔNG đến từ nó mà từ `padding-bottom` mặc
              định của `.col` bọc ngoài và của `#content` — cùng hai nguồn đã
              gặp ở trang Về tôi (CLAUDE.md 26.2), và `#content` đặt bằng bộ
              chọn ID nên phải nêu đích danh ID mới đè được.
   ⚠ Brief §24 xin 26–32px. Chừa 28px bằng margin của chính khối biểu mẫu.
   -------------------------------------------------------------------------- */
/* ⚠ BA nguồn, không phải hai — đo lại sau mỗi lần gỡ mới lộ hết:
     · `#content.page-wrapper`        30px  (Flatsome đặt bằng bộ chọn ID)
     · `.row-main > .col`             30px  (padding mặc định của mọi .col)
     · `.col` bọc CHÍNH khối biểu mẫu 30px  ← cái này sót lại, còn 58px
   Gỡ một cái thì cái kia trám vào nên con số cứ đứng yên — đúng bẫy đã ghi ở
   CLAUDE.md 26.2, lần này thêm một tầng. */
.tl-lien-he #content.page-wrapper { padding-bottom: 0; }
.tl-lien-he .page-wrapper > .row-main > .col { padding-bottom: 0; }
.tl-lien-he .page-wrapper section > .section-content > .row > .col { padding-bottom: 0; }
.tl-lien-he .tl-form-lienhe { margin-bottom: 28px; }

}   /* ==== HẾT @media (max-width: 849px) ==== */

/* =============================================================================
   BỔ SUNG 20/08/2026 — 5 mục brief còn thiếu sau lượt rà.
   Nối thêm chứ KHÔNG sửa khối trên: khối trên do một phiên khác viết cùng ngày
   và đã chạy đúng trên trang thật (đo lúc 09:05: lề ô 10px · textarea 105px ·
   chữ bảo mật 11,5px). Không viết lại thứ đã đúng.
============================================================================= */
@media (max-width: 849px) {

/* -----------------------------------------------------------------------------
   1. BỀ NGANG VÙNG NHẬP — mục nặng nhất của brief (§5)
   [phục vụ]  phần tử: Section | khối: toàn trang
   [trang]    lien-he
   [lý do vượt panel]  Ô padding của panel Section chỉ đặt chiều DỌC; 30px lề
              NGANG là mặc định của `.section` trong Flatsome, không có ô nào.
   Đo trước khi sửa ở 375px: form chỉ rộng 285px, thừa 45px MỖI BÊN —
   15px của dải nội dung (`--tl-be-ngang`) cộng 30px lề `.section`.
   Bỏ 30px đó thì vùng nhập rộng thêm **60px** (285 → 345).
   ⛔ Bọc `.tl-lien-he .page-wrapper` — KHÔNG đè `.section` trần (brief §1).
   ⚠ Còn lại 15px mỗi bên, brief §5 xin 16px và §39 xin 18px ở 390–430. Lệch
     1–3px và đến từ `--tl-be-ngang` dùng chung cả site; kéo riêng trang này ra
     khỏi công thức chung thì mép trái của form sẽ không thẳng với header và
     footer nữa — cái giá lớn hơn 3px rất nhiều.
   -------------------------------------------------------------------------- */
.tl-lien-he .page-wrapper .section {
	padding-left: 0;
	padding-right: 0;
}

/* -----------------------------------------------------------------------------
   2. BÁO LỖI VALIDATION (brief §22)
   [phục vụ]  phần tử: Contact Form 7 | khối: `.wpcf7-not-valid-tip`
   [trang]    lien-he
   [lý do vượt panel]  Do PLUGIN sinh khi gửi hỏng, nằm ngoài mọi panel.
   ⛔ CHỈ đổi kiểu hiển thị — không đụng validation, tên trường hay logic gửi.
   ⚠ Lề âm nhỏ để dòng lỗi ăn vào đúng khe 10px sẵn có giữa các ô, thay vì
     cộng thêm chiều cao đẩy cả form xuống (brief §22 dặn rõ).
   -------------------------------------------------------------------------- */
.tl-lien-he .tl-form-lienhe .wpcf7-not-valid-tip {
	display: block;
	margin: -6px 0 8px;
	font-size: 12px;
	line-height: 1.4;
	color: #b42318;
}

/* Viền đỏ cho chính ô sai — brief §22: không được chỉ đổi màu chữ gợi ý */
.tl-lien-he .tl-form-lienhe input.wpcf7-not-valid,
.tl-lien-he .tl-form-lienhe select.wpcf7-not-valid,
.tl-lien-he .tl-form-lienhe textarea.wpcf7-not-valid { border-color: #d92d20; }

.tl-lien-he .tl-form-lienhe input.wpcf7-not-valid:focus,
.tl-lien-he .tl-form-lienhe select.wpcf7-not-valid:focus,
.tl-lien-he .tl-form-lienhe textarea.wpcf7-not-valid:focus {
	border-color: #d92d20;
	box-shadow: 0 0 0 3px rgba(217, 45, 32, .14);
}

/* -----------------------------------------------------------------------------
   3. THÔNG BÁO SAU KHI GỬI (brief §23)
   [phục vụ]  phần tử: Contact Form 7 | khối: `.wpcf7-response-output`
   [trang]    lien-he
   [lý do vượt panel]  Do plugin sinh; CF7 mặc định vẽ viền 2px vuông góc, lệch
              hẳn hệ hình khối của site.
   ⚠ CF7 gắn trạng thái lên thẻ <form> (`form.sent` · `form.invalid` ·
     `form.failed`), KHÔNG gắn lên chính khối thông báo — nên phải bắt từ form.
   -------------------------------------------------------------------------- */
.tl-lien-he .tl-form-lienhe .wpcf7-response-output {
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--tl-border, #e6e9ef);
	border-radius: 5px;
	font-size: 13px;
	line-height: 1.55;
}

.tl-lien-he .tl-form-lienhe form.sent .wpcf7-response-output {
	border-color: #b7e2c8;
	background: #f2fbf5;
	color: #0f5132;
}

.tl-lien-he .tl-form-lienhe form.invalid .wpcf7-response-output,
.tl-lien-he .tl-form-lienhe form.unaccepted .wpcf7-response-output,
.tl-lien-he .tl-form-lienhe form.spam .wpcf7-response-output,
.tl-lien-he .tl-form-lienhe form.failed .wpcf7-response-output {
	border-color: #f3c2bd;
	background: #fdf3f2;
	color: #b42318;
}

/* -----------------------------------------------------------------------------
   4. DÒNG BẢO MẬT — icon khoá 14px, chữ căn trái (brief §24)
   [phục vụ]  phần tử: Text | khối: `.tl-form-bao-mat`
   [trang]    lien-he
   [lý do vượt panel]  Icon là **emoji do WordPress đổi thành `<img class="emoji">`**,
              không phải phần tử của panel nào.
   ⛔ Brief xin `display:flex`. KHÔNG dùng được ở đây: trong thẻ <p> này, câu chữ
      là text node trần nằm cạnh `<span>` icon và `<a>` chính sách. Bật flex thì
      mỗi mảnh thành MỘT ô riêng, mà `flex-wrap` mặc định là `nowrap` ⇒ cả dòng
      tràn ngang. Thụt treo bằng `padding-left` + icon định vị tuyệt đối cho ra
      đúng hình ảnh brief mô tả (icon góc trên-trái, chữ căn trái) mà không có
      rủi ro đó.
   -------------------------------------------------------------------------- */
.tl-lien-he .tl-form-lienhe .tl-form-bao-mat {
	position: relative;
	padding-left: 20px;
	text-align: left;
}

/* ⛔ Kích thước icon đặt bằng FONT-SIZE của thẻ bọc, KHÔNG đặt thẳng lên ảnh.
   WordPress lõi in `img.wp-smiley, img.emoji { width: 1em !important;
   height: 1em !important }` — đã soi bằng CSS.getMatchedStylesForNode, có cờ
   !important thật. Luật của trang thua bất kể độ đặc hiệu, mà thêm `!important`
   mới thì phạm luật dự án. Đặt `font-size: 14px` cho thẻ bọc thì `1em` của
   WordPress TỰ thành 14px — đúng số brief §24 xin, không cần chọi. */
.tl-lien-he .tl-form-lienhe .tl-form-bao-mat > span:first-child {
	position: absolute;
	left: 0;
	top: 1px;
	font-size: 14px;
	line-height: 1;
}

.tl-lien-he .tl-form-lienhe .tl-form-bao-mat img.emoji { margin: 0; }

/* -----------------------------------------------------------------------------
   5. TRẠNG THÁI ĐANG GỬI (brief §21)
   [phục vụ]  phần tử: Contact Form 7 | khối: `.wpcf7-spinner`, nút submit
   [trang]    lien-he
   [lý do vượt panel]  Vòng quay do plugin chèn; nó là phần tử NỐI TIẾP nút.
   ⚠ Nút đã full-width nên vòng quay inline bị đẩy XUỐNG DÒNG MỚI, cộng thêm
     ~24px chiều cao đúng lúc bấm gửi — nút "nhảy" đúng như brief §21 cấm.
     Thả nổi nó vào trong nút thì chiều cao không đổi một pixel nào.
   ⛔ Không đụng logic gửi: CF7 vẫn tự bật/tắt vòng quay và tự `disabled` nút.
   -------------------------------------------------------------------------- */
.tl-lien-he .tl-form-lienhe input[type="submit"]:disabled {
	opacity: .65;
	cursor: not-allowed;
}

}   /* ==== HẾT phần bổ sung ==== */

/* =============================================================================
   CĂN GIỮA NỘI DUNG — áp MỌI KHỔ (20/08/2026, theo yêu cầu 4T)
   ⛔ NGUYÊN NHÂN: `[col ... offset="1"]` và `offset="2"` trong shortcode
      **KHÔNG có tác dụng** — Flatsome không dựng class offset nào. Kiểm HTML
      sống: cột chỉ mang `col medium-10 small-12 large-10`, không có
      `large-offset-1`. Vì vậy cột nằm SÁT MÉP TRÁI của hàng và toàn bộ khoảng
      trống dồn sang phải.
      Đo ở 1440: khối tiêu đề cách trái 106px nhưng cách phải 310px (lệch 205px);
      biểu mẫu cách trái 155px, cách phải 565px (lệch 410px).
   [phục vụ]  phần tử: Column | khối: toàn trang
   [trang]    lien-he
   [lý do vượt panel]  Ô `offset` của panel Column không sinh ra CSS nào ⇒ không
              có bậc panel nào dùng được. Lề tự động là cách chuẩn để căn giữa
              một ô flex, và không phụ thuộc vào hệ lưới 12 phần.
   ⚠ Ở ≤549 cột đã là `small-12` (kín bề ngang) nên luật này không đổi gì —
     đúng như đo được: mobile vốn đã cân (lệch 0).
============================================================================= */
.tl-lien-he .page-wrapper .section > .section-content > .row > .col {
	margin-left: auto;
	margin-right: auto;
}

/* ⚠ Nút GỬI vẫn lệch 44px sau khi căn cột, vì vòng quay `.wpcf7-spinner` của
   CF7 là `inline-block` rộng 24px kèm lề `0 24px` — tổng **72px chiếm chỗ ngay
   trong dòng đang căn giữa**, đẩy nút sang trái nửa khoảng đó. Nó `visibility:
   hidden` nên mắt không thấy thủ phạm, chỉ thấy nút "hơi lệch".
   Thả nổi nó ra khỏi dòng chảy thì nút căn giữa đúng, và chiều cao hàng nút
   cũng không nhảy lúc bấm gửi (brief §21).
   ⚠ Luật này TRƯỚC nằm trong khối ≤849 nên desktop không được hưởng. */
.tl-lien-he .tl-form-lienhe .tl-form-nut p {
	position: relative;
	margin-bottom: 0;
}

.tl-lien-he .tl-form-lienhe .wpcf7-spinner {
	position: absolute;
	right: 14px;
	top: 50%;
	margin: -12px 0 0;
}

/* ⚠ Và 16px cuối cùng: chính nút mang `margin-right: 15.52px` của Flatsome (để
   hai nút liền nhau có khe). Trong một dòng CĂN GIỮA, lề phải đó đẩy nút sang
   trái đúng nửa khoảng — 8px, tức chênh lệch hai bên 16px.
   ⛔ Đây là lề của `.button` toàn cục; chỉ gỡ trong biểu mẫu của trang này. */
.tl-lien-he .tl-form-lienhe .tl-form-nut input[type="submit"] { margin-right: 0; }

/* =============================================================================
   NHIỆM VỤ MOBILE CHUNG (27/08/2026) — 4 mục brief còn lệch sau khi đo lại
   [phục vụ]  phần tử: Section + Divider + nút GỬI + khối biểu mẫu | khối: đầu
              trang, gạch giữa tiêu đề/mô tả, nút submit, khoảng cách cuối form
   [trang]    lien-he, CHỈ điện thoại
   [mockup]   Đo sống 390px trước khi sửa: đỉnh header→nhãn "LIÊN HỆ" = 50px
              (brief xin 32) · gạch cam→mô tả = 23px tổng (brief "intro cách
              heading 16px") · nút GỬI cao 46px (brief xin 52) · form→footer
              28px (brief xin 32). Các mục khác của brief (ô nhập 50px, khe
              giữa ô 10px, textarea 124px, gutter 15px bám --tl-be-ngang) đã
              nằm trong khoảng brief cho phép — không đụng, xem đầu tệp §9.
   [lý do vượt panel]  Panel Section chỉ có MỘT số `padding__sm` áp cả 4 cạnh —
              không tách được để chỉ hạ riêng cạnh trên. Divider panel không có
              ô margin theo khổ máy.
   ⛔ Brief gốc xin `@media (max-width:767px)`. Cả 5 khổ brief đòi (360–430) đều
      dưới 549 nên dùng mốc 549 (luật III.4.3-3, chỉ 549/849/850) — phủ đủ yêu
      cầu chức năng, không phá luật panel. Đã có tiền lệ ngay trong tệp này ở
      khối "⛔ Mốc breakpoint" đầu trang.
   ⚠ Chỉ override PADDING-TOP của page-wrapper/section, không đụng
     padding-bottom (khoảng cách mô tả→biểu mẫu không nằm trong phạm vi brief
     này, để nguyên như phần "KHOẢNG TRẮNG CUỐI TRANG" đã tính ở trên).
   ⚠ `padding-top: 32px` trên section CẦN !important — soi bằng
     `CSS.getMatchedStylesForNode`: panel in giá trị `padding__sm` ra thẳng
     `#section_xxxxxxx{padding-top:20px}` (ID, đặc hiệu 1-0-0), luôn thắng bộ
     chọn lớp `.tl-lien-he .tl-lienhe-tieude` (0-2-0) bất kể thứ tự tệp. Cùng
     lý do đúng hệt divider ở khối 1 phía trên — đây là 1 trong 2 chỗ (+1)
     của tệp dùng !important, cùng một nguyên nhân gốc: Flatsome in giá trị
     panel bằng bộ chọn có độ đặc hiệu KHÔNG chọi được bằng lớp thường. */
@media (max-width: 549px) {
	.tl-lien-he #content.page-wrapper { padding-top: 0; }
	.tl-lien-he .tl-lienhe-tieude { padding-top: 32px !important; }

	/* Gạch cam: 8+2+13=23px hiện tại → 5+2+9=16px (brief "intro cách heading
	   16px"), vẫn giữ gạch làm mốc phân tách trực quan giữa H1 và mô tả. */
	.tl-lien-he .tl-lienhe-tieude .divider,
	.tl-lien-he .tl-lienhe-tieude .is-divider {
		margin: 5px auto 9px;
	}

	.tl-lien-he .tl-form-lienhe .tl-form-nut input[type="submit"] { min-height: 52px; }

	.tl-lien-he .tl-form-lienhe { margin-bottom: 32px; }
}


/* =============================================================================
   MOCKUP v2 — VÒNG 2 (27/08/2026 tối) — 4T chụp LIVE @390 đối chiếu lại
   mobile-mockup-lien-he-v2.png, thấy khối "MOCKUP v2" (vòng 1) chưa đạt.
   THAY THẾ HOÀN TOÀN khối "MOCKUP v2" vòng 1 (không phải một lớp đè thêm) —
   vòng 1 là việc CHÍNH PHIÊN NÀY viết và 4T đã từ chối nghiệm thu ngay trong
   phiên, nên sửa thẳng tại chỗ thay vì chồng thêm một lớp !important nữa lên
   trên chính mình (khác với việc sửa đè lên phiên KHÁC — chỗ đó vẫn phải nối
   thêm, xem khối "NHIỆM VỤ MOBILE CHUNG" phía trên, giữ nguyên không đụng).

   ⛔ CHỈ THÂN TRANG: không mở/sửa 20-header.css hay 21-footer.css. Mọi rule
   nằm trong @media(max-width:549px) — desktop ≥850px không đụng dòng nào
   (luật III.4.3-3, chỉ 549/849/850; 4T không nêu breakpoint cụ thể, giữ 549
   đã chốt cho cả trang này từ khối đầu tiên).
   ⛔ Số điện thoại KHÔNG đổi — vẫn 2 số thật đã publish ở footer (Zalo
   0979 313 189 · WhatsApp +65 9180 6830), chỉ đổi LAYOUT theo yêu cầu 4T.
============================================================================= */
@media (max-width: 549px) {

/* -----------------------------------------------------------------------------
   1. TIÊU ĐỀ 32–36px CĂN GIỮA · MÔ TẢ 17px CĂN GIỮA · GUTTER 16px
   [phục vụ]  phần tử: Text + Column | khối: .tl-lienhe-h1, .tl-lienhe-mota,
              cột chứa toàn thân trang
   [trang]    lien-he
   [mockup]   H1 hai dòng lớn rõ, mô tả 17px, lề trong đều 16px hai bên.
   ⚠ Gutter 16px ĐÈ LÊN quyết định "giữ 15px bám --tl-be-ngang để thẳng mép
     header/footer" ghi ở khối trước (§ "BỀ NGANG VÙNG NHẬP") — 4T nay xin
     đích danh 16px cho thân trang trong lúc header/footer đứng yên, nên lệch
     1px với mép header không còn là lý do giữ 15px nữa.
   -------------------------------------------------------------------------- */
	.tl-lien-he .tl-lienhe-h1 h1 { font-size: clamp(32px, 8.2vw, 36px); text-align: center; }
	.tl-lien-he .tl-lienhe-mota p { font-size: 17px; text-align: center; }

	.tl-lien-he .page-wrapper .section > .section-content > .row > .col {
		padding-left: 16px;
		padding-right: 16px;
	}

/* -----------------------------------------------------------------------------
   2. Ô NHẬP CAO 64px · TEXTAREA 128px · VIỀN #dfe3ea
   [phục vụ]  phần tử: Contact Form 7 | khối: input/select/textarea .tl-form-lienhe
   [trang]    lien-he
   [mockup]   Ô nhập cao hẳn, icon xám rõ, viền nhạt hơn bản trước.
   -------------------------------------------------------------------------- */
	.tl-lien-he .tl-form-lienhe input[type="text"],
	.tl-lien-he .tl-form-lienhe input[type="tel"],
	.tl-lien-he .tl-form-lienhe input[type="email"],
	.tl-lien-he .tl-form-lienhe select,
	.tl-lien-he .tl-form-lienhe textarea {
		min-height: 64px;
		border-color: #dfe3ea;
		padding: 18px 18px 18px 50px;
		margin-bottom: 16px;
		font-size: 16px;
		background-repeat: no-repeat;
		background-position: 18px center;
		background-size: 20px;
	}

	.tl-lien-he .tl-form-lienhe textarea {
		min-height: 128px;
		padding-top: 20px;
		background-position: 18px 20px;   /* icon neo TRÊN, không giữa ô nhiều dòng */
	}

	.tl-lien-he .tl-form-lienhe .tl-form-hang { gap: 16px; }

	.tl-lien-he .tl-form-lienhe input[name="ho-ten"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
	}

	.tl-lien-he .tl-form-lienhe input[name="sdt-zalo"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l1.5 4.5L8 9.5a12 12 0 0 0 6.5 6.5l2-2.5L21 15v3a2 2 0 0 1-2 2C11 20 4 13 4 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	}

	.tl-lien-he .tl-form-lienhe input[name="email"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
	}

	.tl-lien-he .tl-form-lienhe select[name="noi-o"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-7.2 7-12a7 7 0 1 0-14 0c0 4.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E");
	}

	.tl-lien-he .tl-form-lienhe input[name="tinh-trang"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9.5-9.2C1.1 7.6 3 4.5 6.3 4.5c2 0 3.4 1 5.7 3.5 2.3-2.5 3.7-3.5 5.7-3.5 3.3 0 5.2 3.1 3.8 6.3C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
	}

	.tl-lien-he .tl-form-lienhe textarea[name="nhu-cau"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Crect x='9' y='2.5' width='6' height='3' rx='1'/%3E%3Cpath d='M8 10h8M8 14h8M8 18h5'/%3E%3C/svg%3E");
	}

/* -----------------------------------------------------------------------------
   3. NÚT GỬI — GRADIENT CAM, CAO 60px, BO 12px
   [phục vụ]  phần tử: Contact Form 7 | khối: nút submit .tl-form-nut
   [trang]    lien-he
   [mockup]   Gradient #ff5a1f → #ff3c13 (chéo), không còn nâu phẳng (`--tl-cam-
              chu` mặc định của .button toàn site), icon máy bay giấy + chữ.
   ⚠ Xếp `background-image` HAI LỚP: icon SVG lớp TRÊN (vẽ trước = trên cùng
     trong CSS), gradient lớp DƯỚI phủ hết nút — thứ tự lớp là quy tắc CSS
     chuẩn, không cần !important để icon nổi trên gradient.
   -------------------------------------------------------------------------- */
	.tl-lien-he .tl-form-lienhe .tl-form-nut input[type="submit"] {
		min-height: 60px;
		border: none;
		border-radius: var(--tl-bo);
		padding-left: 46px;
		font-size: 15px;
		background-color: transparent;
		background-repeat: no-repeat, no-repeat;
		background-position: 26px center, center;
		background-size: 19px, 100% 100%;
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-8-8 18-2-8-8-2z'/%3E%3C/svg%3E"),
			linear-gradient(135deg, #ff5a1f, #ff3c13);
	}

/* -----------------------------------------------------------------------------
   4. THẺ "LIÊN HỆ TRỰC TIẾP VỚI TOÀN LỘC" — BO GÓC + ĐỔ BÓNG THẬT
   [phục vụ]  phần tử: Column (col_inner) + Text + Icon Box | khối:
              .tl-lienhe-card (bọc `[row_inner][col_inner]`, đẩy lên
              uxb/pages/lien-he.txt 27/08/2026 tối) · .tl-lienhe-card-tieude ·
              .tl-lienhe-card-hang
   [trang]    lien-he
   [mockup]   Thẻ bo góc rõ + đổ bóng nhẹ, icon tròn LỚN, mỗi dòng liên hệ cao
              ~76px, mũi tên `>` bên phải.
   [lý do vượt panel]  Vòng 1 ghép viền trái/phải lên 3 phần tử rời rạc vì
              không có `<div>` bọc hợp lệ — nay bọc bằng `[row_inner][col_inner]`
              (phần tử GỐC Flatsome, đúng bảng III.1.1 "Chia hàng/cột"), nên
              border/radius/shadow đặt được MỘT LẦN trên chính `.tl-lienhe-card`
              (chính là `.col`, không phải div tự chế) — không còn ghép viền
              thủ công, không còn rủi ro lệch bo góc giữa 3 mảnh.
   ⚠ `.col_inner` mặc định mang `padding:0 15px 30px` (gutter Flatsome cho mọi
     `.col`) — về 0 hết để card khít viền, mọi khoảng cách trong thẻ do CSS bên
     dưới tự đặt trên từng khối con.
   ⚠ Số điện thoại là số THẬT đã publish sẵn ở footer (Zalo 0979 313 189 ·
     WhatsApp +65 9180 6830) — không bịa số theo ảnh mockup (đã hỏi 4T 27/08).
   -------------------------------------------------------------------------- */
	.tl-lien-he .tl-lienhe-card {
		border: 1px solid #dfe3ea;
		border-radius: var(--tl-bo);
		box-shadow: 0 6px 20px rgba(6, 29, 76, .08);
		overflow: hidden;
		padding: 0;
	}

	.tl-lien-he .tl-lienhe-card .col-inner { padding: 0; }

	.tl-lien-he .tl-lienhe-card-tieude {
		position: relative;
		padding: 18px 18px 14px 54px;
		margin-bottom: 0;
	}

	.tl-lien-he .tl-lienhe-card-tieude::before {
		content: "";
		position: absolute;
		left: 18px;
		top: 16px;
		width: 24px;
		height: 24px;
		background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061D4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M20 19v1a3 3 0 0 1-3 3h-3'/%3E%3C/svg%3E");
	}

	.tl-lien-he .tl-lienhe-card-tieude p {
		font-size: 15px;
		color: var(--tl-navy);
		margin: 0;
	}

	.tl-lien-he .tl-lienhe-card-hang {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 76px;
		padding: 8px 40px 8px 18px;   /* phải chừa chỗ mũi tên `>` */
	}

	.tl-lien-he .tl-lienhe-card-whatsapp { border-top: 1px solid #eef0f4; }

	.tl-lien-he .tl-lienhe-card-hang::after {
		content: "";
		position: absolute;
		right: 18px;
		top: 50%;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687083' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	}

	/* Icon tròn LỚN 44px (vòng 1 là 34px): Icon Box render `.icon-box-img >
	   .icon > .icon-inner` chứa SVG trắng của chính `img=153` — đặt nền tròn
	   màu ngay trên `.icon` là đủ, không cần đổi lại SVG. */
	.tl-lien-he .tl-lienhe-card-hang .icon-box-img { width: 44px !important; }

	.tl-lien-he .tl-lienhe-card-hang .icon-box-img .icon {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tl-lien-he .tl-lienhe-card-hang .icon-box-img .icon svg { width: 20px; height: 20px; }

	.tl-lien-he .tl-lienhe-card-goi .icon-box-img .icon { background: var(--tl-cam); }
	.tl-lien-he .tl-lienhe-card-whatsapp .icon-box-img .icon { background: #25D366; }

	.tl-lien-he .tl-lienhe-card-hang .icon-box-text {
		padding-left: 14px;
	}

	.tl-lien-he .tl-lienhe-card-hang .icon-box-text p {
		margin: 0;
		font-size: 14px;
		color: var(--tl-navy);
		font-weight: 700;
	}

	.tl-lien-he .tl-lienhe-card-hang .icon-box-text p a {
		display: inline-block;
		margin-top: 2px;
		color: var(--tl-cam-chu);
		font-weight: 800;
		font-size: 17px;
	}
}