/* TKT Theme · /lien-he/ T4 (templates/pages/lien-he.php). Chỉ nạp khi cờ "lien-he" bật. DS 2.1: chỉ token var(--*).
   Khối dùng chung (contact-tile, btn-copy, live-status, intent-tile, spec-tag, progress-meter, num-block, loc-panel,
   seg-tabs--slide, info-tip--up, aside-sticky, faq-block) nằm trong components.css/catalog.css; file này chỉ giữ bố cục
   riêng trang theo bản chủ trang (frontend/design-handoff/lien-he/design/lien-he-v2.html). */

.lien-he-page { background: linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-pure) 60%, var(--bg-canvas) 100%); color: var(--fg-1); overflow-x: clip; }
.lien-he-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 600px) { .lien-he-wrap { padding: 0 var(--s-6); } }
@media (min-width: 905px) { .lien-he-wrap { padding: 0 var(--s-7); } }
@media (min-width: 1240px) { .lien-he-wrap { padding: 0 var(--s-6); } }
.lien-he-section { padding: var(--s-6) 0; }
@media (min-width: 905px) { .lien-he-section { padding: var(--s-7) 0; } }

/* Hero: cột thông tin (dính ≥1024 qua .aside-sticky) + form */
.lien-he-hero { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.lien-he-hero__grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .lien-he-hero { padding-top: var(--s-10); }
  .lien-he-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); }
}
.lien-he-hero__info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); container-type: inline-size; }
.lien-he-title { margin: 0; font: var(--w-bold) clamp(38px, 5.2vw, 68px)/1.04 var(--font-display); letter-spacing: -.025em; color: var(--fg-1); }
.lien-he-title__line { display: block; overflow: hidden; padding-bottom: .08em; }
.lien-he-title__line > span { display: block; }
.lien-he-title__line + .lien-he-title__line > span { color: var(--tkt-blue-600); white-space: nowrap; font-size: min(1em, 9cqi); }
.lien-he-lede { margin: 0; max-width: 40ch; font: var(--w-book) 18px/1.5 var(--font-body); color: var(--fg-2); }
.lien-he-quick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); width: 100%; }
.lien-he-quick .contact-tile__value { font-size: min(17px, 4.2cqi); }
.lien-he-quick .contact-tile--dark .contact-tile__value { font-size: 22px; }

/* Form */
.lien-he-fp { position: relative; gap: var(--s-5); padding: var(--s-5); }
@media (min-width: 600px) { .lien-he-fp { padding: var(--s-7); } }
.lien-he-fp__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.lien-he-form { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; }
.lien-he-form .form-panel__grid { gap: var(--s-3); }
.lien-he-form .field-box__label [aria-hidden="true"] { color: var(--tkt-orange-700); }
.lien-he-form .field-box input::placeholder, .lien-he-form .field-box textarea::placeholder { color: var(--fg-4); }
.lien-he-form .field-box.field-area { height: auto; justify-content: flex-start; padding: var(--s-3) 14px; border-radius: var(--r-12); }
.lien-he-form .field-box.field-area textarea { min-height: 104px; resize: vertical; }
.lien-he-intent { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.lien-he-intent legend, .lien-he-mini { padding: 0; margin: 0 0 var(--s-2); font: var(--w-bold) var(--t-caption)/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-caption); font-feature-settings: normal; }
.lien-he-field-head { display: flex; align-items: center; gap: var(--s-1); }
/* ⓘ: bong bóng chỉ hiện khi rê chuột / focus */
.lien-he-form .info-tip__body { opacity: 0; visibility: hidden; pointer-events: none; text-transform: none; letter-spacing: 0; font-weight: var(--w-medium);
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2) var(--ease-out); }
.lien-he-form .info-tip:hover .info-tip__body, .lien-he-form .info-tip:focus-within .info-tip__body { opacity: 1; visibility: visible; }
.lien-he-form .progress-meter { margin-left: auto; }
.lien-he-form__foot { display: flex; flex-direction: column; gap: var(--s-2); }
.lien-he-draft { margin: 0; font: var(--w-medium) 12px/1.4 var(--font-body); color: var(--fg-caption); text-align: center; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.lien-he-draft.is-on { opacity: 1; }
.lien-he-success { display: none; position: absolute; inset: 0; z-index: var(--z-raised); flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-7); border-radius: var(--r-20); background: var(--bg-pure); text-align: center; }
.lien-he-success.is-on { display: flex; }
.lien-he-success__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--semantic-success-bg); color: var(--semantic-success); }
.lien-he-success__icon svg { width: 28px; height: 28px; }

/* Cơ sở */
.lien-he-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.lien-he-near { display: inline-flex; align-items: center; gap: var(--s-2); }
.lien-he-near svg { flex: none; width: 16px; height: 16px; }
.loc-panel__actions .btn svg { flex: none; width: 16px; height: 16px; }

/* FAQ + kênh */
.lien-he-help__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .lien-he-help__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); } }
.lien-he-help__side { display: flex; flex-direction: column; gap: var(--s-5); }
.lien-he-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lien-he-social .btn-icon svg { width: 18px; height: 18px; }
.lien-he-faq { --i: 1; }
.lien-he-faq .faq-block__answer strong { color: var(--fg-1); }

/* Mobile: vùng chạm ≥ 44px, ô nhập 16px (không zoom iOS), khoảng cách gọn */
@media (max-width: 599px) {
  .lien-he-hero { padding-top: var(--s-6); padding-bottom: var(--s-5); }
  .lien-he-hero__grid { gap: var(--s-6); }
  .lien-he-hero__info { gap: var(--s-4); }
  .lien-he-lede { font-size: 16px; }
  .lien-he-quick .contact-tile { min-height: 60px; padding: var(--s-2) var(--s-3); gap: var(--s-3); }
  .lien-he-quick .contact-tile__value { font-size: min(15px, 4.2cqi); }
  .lien-he-quick .contact-tile--dark .contact-tile__value { font-size: 20px; }
  .lien-he-quick .btn-copy { width: 60px; }
  .lien-he-fp { padding: var(--s-4); border-radius: var(--r-20); }
  .lien-he-sec-head { align-items: center; }
  .lien-he-near { --btn-h: 44px; }
  .loc-panel__actions .btn-icon { width: 48px; }
}

/* Vào khung: mờ → rõ, trồi 24px, một lần; tiêu đề mở từ trên xuống. JS chỉ bật khi không giảm chuyển động. */
.lien-he-js .lien-he-reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.lien-he-js .lien-he-reveal.is-in { opacity: 1; transform: none; }
.lien-he-js .lien-he-title__line > span { transform: translateY(-105%); transition: transform 900ms var(--ease-out); }
.lien-he-js .lien-he-title__line + .lien-he-title__line > span { transition-delay: 120ms; }
.lien-he-js .lien-he-title.is-in .lien-he-title__line > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lien-he-draft, .lien-he-form .info-tip__body { transition: none; }
}