/* ============================================================ KQT — TRANG LIÊN HỆ (/lien-he/) Nguồn: lien-he.html + kqt-contact.css (bản thiết kế UX Builder trong zip "website KQT.COM (7).zip", Đợt 1 — 2026-09-10). Mọi selector SCOPE dưới body.kqt-lh — cùng quy ước body.kqt-about / body.kqt-svc đã dùng cho 2 trang trước, để không tràn CSS ra trang khác và không cần !important. .wrap / .btn / .btn--gold / .btn--block / .btn--sm và các biến --navy/--gold/--taupe-*/--radius-lg… đã có sẵn TOÀN CỤC ở kqt-chrome.css (nạp mọi trang không phải trang chủ) — KHÔNG định nghĩa lại ở đây. ⚠️ .section / .h2 / .section--cream / .section--navy CHỈ có định nghĩa thật trong assets/css/kqt.css — file đó KHÔNG BAO GIỜ được enqueue trên site thật (ghi trong bộ nhớ dự án, đã kiểm lại 2026-09-09/10 cho About/Service). Trang này dùng class chung "section"/"h2" trong các partial lh-*.php → phải tự định nghĩa lại ở đây, scoped body.kqt-lh, giống kqt-service.css đã làm cho .section--navy/.section--cream. ⚠️ .btn--ghost / .btn--ghost-light KHÔNG có trong kqt-chrome.css — tự định nghĩa 2 biến thể (nền sáng / nền tối) như About + Service, nếu không nút sẽ vô hình (không viền, không nền). ⚠️ NHÃN FIELD (.lh-f label) BẮT BUỘC text-transform:none — Quyết đã yêu cầu sửa 2 lần ở bản thiết kế gốc (PROMPT_CLAUDECODE_CONTACT.md §2). Theme không có rule global viết hoa label nhưng vẫn khai rõ ở đây để không ai vô tình thêm uppercase sau này. ⚠️ .lh-cta BẮT BUỘC nền var(--gold-tint), KHÔNG được đổi sang navy — footer site đã navy, nếu CTA cũng navy sẽ hoà lẫn mất ranh giới với footer ngay phía dưới (xem template-parts/sections/lh-cta.php). ============================================================ */ /* ---------- Fix nền xám dark-mode (cùng bệnh đã vá ở kqt-about.css / kqt-service.css: OS/trình duyệt Dark tự tô xám vùng không có nền khai rõ; color-scheme:light chặn heuristic đó). ---------- */ body.kqt-lh{ background:var(--white); color-scheme:light; } html:has(body.kqt-lh){ background:var(--white); color-scheme:light; } /* ---------- .btn--ghost / .btn--ghost-light ---------- */ body.kqt-lh .btn--ghost{ background:transparent; border:1px solid var(--navy); color:var(--navy); } body.kqt-lh .btn--ghost:hover{ background:var(--navy); color:var(--on-navy); } body.kqt-lh .btn--ghost-light, body.kqt-lh .lh-hero .btn--ghost, body.kqt-lh .lh-card--navy .btn--ghost{ background:transparent; border:1px solid rgba(244,241,233,.4); color:var(--on-navy); } body.kqt-lh .btn--ghost-light:hover, body.kqt-lh .lh-hero .btn--ghost:hover, body.kqt-lh .lh-card--navy .btn--ghost:hover{ background:rgba(244,241,233,.12); border-color:var(--gold-light); color:var(--on-navy); } /* ---------- breadcrumb (trang không nạp CSS category/product) ---------- */ body.kqt-lh .crumb{ padding:18px 0 4px; } body.kqt-lh .crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--taupe); } body.kqt-lh .crumb li{ display:flex; align-items:center; gap:8px; } body.kqt-lh .crumb li::after{ content:"›"; color:var(--gold); font-size:14px; } body.kqt-lh .crumb li:last-child::after{ display:none; } body.kqt-lh .crumb li[aria-current]{ color:var(--ink-2); font-weight:600; } body.kqt-lh .crumb a{ color:var(--taupe); transition:color .2s; } body.kqt-lh .crumb a:hover{ color:var(--gold-dark); } /* ---------- section / h2 / eyebrow dùng chung (tự định nghĩa vì kqt.css không được nạp — xem cảnh báo đầu file) ---------- */ body.kqt-lh .section{ padding-block:clamp(56px,7.4vw,96px); } body.kqt-lh .section--cream{ background:var(--cream); } body.kqt-lh .h2{ font-family:var(--serif); font-weight:700; line-height:1.18; color:var(--navy); } body.kqt-lh .lh-eyebrow{ font-family:var(--sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dark); display:inline-flex; align-items:center; } body.kqt-lh .lh-eyebrow--light{ color:var(--gold-light); } body.kqt-lh .lh-eyebrow--c{ justify-content:center; } body.kqt-lh .lh-head{ max-width:62ch; margin-inline:auto; text-align:center; } body.kqt-lh .lh-head--c{ margin-inline:auto; text-align:center; } body.kqt-lh .lh-head__lead{ margin-top:14px; font-size:var(--fs-lead); line-height:1.7; color:var(--ink-2); } /* ============ LH-1 · HERO ============ */ body.kqt-lh .lh-hero{ position:relative; background:var(--navy); overflow:hidden; } body.kqt-lh .lh-hero__bg{ position:absolute; inset:0; z-index:0; } body.kqt-lh .lh-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.32; } body.kqt-lh .lh-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,#0B1626 8%,rgba(11,22,38,.9) 46%,rgba(11,22,38,.46) 100%); } body.kqt-lh .lh-hero__in{ position:relative; z-index:2; padding-block:clamp(44px,5.8vw,78px); max-width:64ch; } body.kqt-lh .lh-hero h1{ font-family:var(--serif); font-size:var(--fs-h1-page); font-weight:800; line-height:1.1; color:var(--on-navy); letter-spacing:-.01em; margin:16px 0 16px; text-wrap:balance; } body.kqt-lh .lh-hero__lead{ font-size:var(--fs-lead); color:rgba(244,241,233,.84); line-height:1.62; } /* dải 4 kênh liên hệ nhanh */ body.kqt-lh .lh-chan{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; } body.kqt-lh .lh-chan__c{ display:flex; align-items:flex-start; gap:14px; padding:20px; background:rgba(255,255,255,.07); border:1px solid rgba(244,241,233,.18); border-radius:var(--radius-lg); transition:.26s var(--ease); } body.kqt-lh .lh-chan__c:hover{ border-color:var(--gold); background:rgba(255,255,255,.1); transform:translateY(-3px); } body.kqt-lh .lh-chan__ic{ width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.34); } body.kqt-lh .lh-chan__ic svg{ width:21px; height:21px; stroke:var(--gold-light); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } body.kqt-lh .lh-chan__t{ min-width:0; } body.kqt-lh .lh-chan__t b{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,233,.62); } body.kqt-lh .lh-chan__t small{ display:block; font-size:16.5px; font-weight:700; color:#fff; line-height:1.3; margin-top:5px; word-break:break-word; } /* ============ LH-2 · FORM + ASIDE ============ */ body.kqt-lh .lh-main{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px,3.6vw,48px); align-items:start; } body.kqt-lh .lh-f{ background:var(--white); padding:clamp(24px,2.8vw,38px); border:1px solid var(--taupe-15); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); } body.kqt-lh .lh-f__sub{ margin-top:8px; font-size:14px; color:var(--ink-3); line-height:1.6; } body.kqt-lh .lh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; } body.kqt-lh .lh-fd{ display:flex; flex-direction:column; } body.kqt-lh .lh-fd--full{ grid-column:1 / -1; } /* ⚠️ text-transform:none BẮT BUỘC — xem cảnh báo đầu file */ body.kqt-lh .lh-f label{ font-size:13px; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--ink-2); margin-bottom:8px; } body.kqt-lh .lh-f label em{ color:#B23B2E; font-style:normal; } body.kqt-lh .lh-f input, body.kqt-lh .lh-f select, body.kqt-lh .lh-f textarea{ height:48px; padding:0 15px; border:1px solid var(--taupe-20); background:var(--white); font-family:var(--sans); font-size:15px; color:var(--ink); border-radius:var(--radius); transition:border-color .2s; width:100%; } body.kqt-lh .lh-f textarea{ height:auto; min-height:112px; padding:13px 15px; resize:vertical; line-height:1.6; } body.kqt-lh .lh-f input:focus, body.kqt-lh .lh-f select:focus, body.kqt-lh .lh-f textarea:focus{ outline:0; border-color:var(--gold); } body.kqt-lh .lh-f input.is-err, body.kqt-lh .lh-f select.is-err, body.kqt-lh .lh-f textarea.is-err{ border-color:#B23B2E; } /* chip chủ đề */ body.kqt-lh .lh-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } body.kqt-lh .lh-chip{ position:relative; margin:0; } body.kqt-lh .lh-chip input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; } body.kqt-lh .lh-chip span{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; font-size:13.5px; font-weight:500; text-transform:none; letter-spacing:normal; border:1px solid var(--taupe-20); border-radius:999px; color:var(--ink-2); cursor:pointer; transition:.2s; user-select:none; } body.kqt-lh .lh-chip span::before{ content:""; width:13px; height:13px; border-radius:50%; border:1px solid var(--taupe-30); flex:none; transition:.2s; } body.kqt-lh .lh-chip input:checked + span{ border-color:var(--gold); background:var(--gold-tint); color:var(--navy); font-weight:600; } body.kqt-lh .lh-chip input:checked + span::before{ background:var(--gold-grad); border-color:transparent; } body.kqt-lh .lh-chip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; } body.kqt-lh .lh-f__foot{ margin-top:24px; } body.kqt-lh .lh-f__foot small{ display:block; margin-top:12px; font-size:12.5px; color:var(--ink-3); line-height:1.55; } body.kqt-lh .lh-f__ok{ display:none; margin-top:16px; padding:14px 17px; background:var(--gold-tint); border:1px solid rgba(154,116,42,.24); border-radius:var(--radius); font-size:14px; color:var(--navy); font-weight:600; } body.kqt-lh .lh-f__ok.is-on{ display:block; } body.kqt-lh .lh-f__err{ display:none; margin-top:16px; padding:14px 17px; background:#FBF0EE; border:1px solid rgba(154,62,49,.22); border-radius:var(--radius); font-size:14px; color:#9A3E31; font-weight:600; } body.kqt-lh .lh-f__err.is-on{ display:block; } /* cột phải — thông tin */ body.kqt-lh .lh-aside{ display:flex; flex-direction:column; gap:18px; } body.kqt-lh .lh-card{ background:var(--white); border:1px solid var(--taupe-15); border-radius:var(--radius-lg); padding:26px 24px; } body.kqt-lh .lh-card h3{ display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:17px; font-weight:700; color:var(--navy); margin-bottom:16px; } body.kqt-lh .lh-card h3 svg{ width:19px; height:19px; stroke:var(--gold-dark); fill:none; stroke-width:1.7; flex:none; box-sizing:content-box; padding:9px; border-radius:50%; background:var(--gold-tint); } body.kqt-lh .lh-lines{ list-style:none; display:grid; gap:13px; margin:0; padding:0; } body.kqt-lh .lh-lines li{ display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--ink-2); line-height:1.5; } body.kqt-lh .lh-lines svg{ width:17px; height:17px; stroke:var(--gold-dark); fill:none; stroke-width:1.7; flex:none; } body.kqt-lh .lh-lines a{ color:var(--navy); font-weight:600; transition:color .2s; } body.kqt-lh .lh-lines a:hover{ color:var(--gold-dark); } body.kqt-lh .lh-social{ display:flex; gap:10px; margin-top:16px; } body.kqt-lh .lh-social a{ height:38px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--taupe-20); font-size:13px; font-weight:600; color:var(--ink-2); transition:.22s; } body.kqt-lh .lh-social a:hover{ border-color:var(--gold); background:var(--gold-tint); color:var(--navy); } body.kqt-lh .lh-hours{ display:grid; gap:10px; } body.kqt-lh .lh-hours div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:14px; color:var(--ink-2); padding-bottom:10px; border-bottom:1px solid var(--taupe-10); } body.kqt-lh .lh-hours div:last-child{ border-bottom:0; padding-bottom:0; } body.kqt-lh .lh-hours b{ color:var(--navy); font-weight:700; white-space:nowrap; } body.kqt-lh .lh-card--navy{ background:var(--navy); border-color:transparent; } body.kqt-lh .lh-card--navy h3{ color:#fff; } body.kqt-lh .lh-card--navy h3 svg{ stroke:var(--gold-light); background:rgba(212,175,55,.14); } body.kqt-lh .lh-card--navy p{ font-size:14px; color:var(--on-navy-2); line-height:1.68; } body.kqt-lh .lh-card--navy .btn{ margin-top:18px; width:100%; } /* ============ LH-3 · SHOWROOM ============ */ body.kqt-lh .lh-rooms{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:38px; } body.kqt-lh .lh-room{ background:var(--white); border:1px solid var(--taupe-15); border-radius:var(--radius-lg); overflow:hidden; transition:.28s var(--ease); } body.kqt-lh .lh-room:hover{ box-shadow:var(--shadow-2); border-color:var(--taupe-20); transform:translateY(-3px); } body.kqt-lh .lh-room__media{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--cream-2),var(--cream)); } body.kqt-lh .lh-room__media img{ display:block; width:100%; height:100%; object-fit:cover; } body.kqt-lh .lh-room__badge{ position:absolute; left:16px; top:16px; z-index:2; padding:6px 14px; border-radius:999px; background:var(--gold-grad); color:#2A2008; white-space:nowrap; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } body.kqt-lh .lh-room__b{ padding:24px; } body.kqt-lh .lh-room__b h3{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--navy); margin-bottom:14px; } body.kqt-lh .lh-room__rows{ list-style:none; display:grid; gap:11px; margin:0; padding:0; } body.kqt-lh .lh-room__rows p{ display:flex; gap:11px; margin:0; font-size:14px; color:var(--ink-2); line-height:1.55; } body.kqt-lh .lh-room__rows svg{ width:17px; height:17px; stroke:var(--gold-dark); fill:none; stroke-width:1.7; flex:none; margin-top:2px; } body.kqt-lh .lh-room__map{ margin-top:20px; display:inline-flex; gap:8px; white-space:nowrap; } /* ⚠️ SVG mũi tên chỉ đường không có width/height/viewBox ràng buộc → trình duyệt render theo kích thước mặc định (thường ~300x150px), làm nút phình to, chữ dạt xuống 3 dòng (đúng lỗi Quyết chụp màn hình 2026-09-10). Phải tự định nghĩa kích thước icon trong nút — cùng bẫy các icon khác trong trang đã né được nhờ có class riêng (.lh-chan__ic svg, .lh-room__rows svg…), chỉ icon này nằm trực tiếp trong nên bị bỏ sót. */ body.kqt-lh .lh-room__map svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; flex:none; } /* ============ LH-4 · FAQ ============ */ body.kqt-lh .lh-faq{ max-width:860px; margin-inline:auto; margin-top:36px; } body.kqt-lh .lh-q{ border-bottom:1px solid var(--taupe-20); } /* ⚠️ text-transform:none BẮT BUỘC — thẻ