/* ===== LIÊN HỆ Ở HAI DẢI TRỐNG — CHỈ trang chủ (27/09/2026, Nam duyệt phương án B trên canvas Claude Design) =====
   Khách tìm thấy DESOU trên mạng cần liên hệ thuận nhất, nhưng trang không được giống web bán hàng giật bấm:
   liên hệ đặt như ghi chú lề của một cuốn sách kiến trúc, không nút to, không bong bóng chat, không nhấp nháy.
   · Dải PHẢI "Bắt đầu cùng DESOU" (≥1280px): vạch sáng đồng + 3 lối — bản vẽ · xem ánh sáng thật · hỏi nhanh.
       1280–1759px: bản gọn, cột nội dung chừa chỗ bên phải  ·  ≥1760px: bản đủ, nằm trong dải trống tự nhiên.
   · Dải TRÁI (≥1760px): ghi chú lề ở vài phần then chốt, nối bằng đoạn kẻ vào chấm vàng của chương.
   · Dưới 1280px: thanh mảnh dưới đáy "Nhắn Zalo | Gọi".
   Dải phải + thanh dưới hiện SAU màn đầu, ẩn khi tới chân trang (chân trang đã có đủ liên hệ) — js/lien-he.js.
   Mốc 1280 / 1760 phải khớp nhau giữa các khối dưới đây — lưới tools/thu-lien-he-trang-chu.mjs canh. */

:root{--lh-w:268px;--lh-khe:56px;}
.lh-rail,.lh-le,.lh-bar{display:none;}
.lh-gon{display:none;}
/* không để một chữ rơi một mình xuống dòng (dải hẹp dần từ 268 xuống ~200px quanh mốc 1760) */
.lh-t{text-wrap:balance;}
.lh-d,.lh-le-t{text-wrap:pretty;}

/* ---------- chữ + nét dùng chung ---------- */
.lh-a{color:var(--copper-2);text-decoration:none;font-size:13px;font-weight:400;border-bottom:1px solid rgba(218,179,106,.35);padding-bottom:2px;transition:color .3s,border-color .3s;}
.lh-a:hover,.lh-a:focus-visible{color:var(--warm);border-color:rgba(240,217,168,.8);}
.lh-a:focus-visible{outline:1px solid var(--copper);outline-offset:4px;}

/* ---------- DẢI PHẢI ---------- */
@media (min-width:1280px){
  .lh-rail{display:block;position:fixed;z-index:50;top:50%;width:var(--lh-w);
    opacity:0;visibility:hidden;transform:translate(14px,-50%);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility .7s;}
  .lh-rail.lh-hien{opacity:1;visibility:visible;transform:translate(0,-50%);}
  .lh-k{display:flex;align-items:center;gap:12px;margin:0 0 30px;font-size:10.5px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:var(--copper);}
  .lh-k::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(192,150,63,.55),rgba(192,150,63,0));}
  .lh-list{list-style:none;margin:0;padding:0 0 0 36px;position:relative;display:flex;flex-direction:column;gap:38px;}
  /* vạch sáng đồng — cùng tinh thần đường sáng của các chương */
  .lh-list::before{content:"";position:absolute;left:8px;top:-8px;bottom:-14px;width:1px;
    background:linear-gradient(rgba(218,179,106,0),rgba(218,179,106,.85) 16%,rgba(218,179,106,.85) 84%,rgba(218,179,106,0));}
  .lh-i{position:relative;display:flex;flex-direction:column;gap:8px;}
  /* quầng sáng sau ký hiệu đèn — chỉ bật khi lối này hợp với phần đang đọc */
  .lh-i::before{content:"";position:absolute;left:-58px;top:-20px;width:60px;height:60px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(240,217,168,.32),rgba(240,217,168,0) 70%);opacity:0;transition:opacity .6s;}
  /* ký hiệu đèn âm trần trên bản vẽ chiếu sáng: vòng tròn + chữ thập */
  .lh-mk{position:absolute;left:-36px;top:2px;width:17px;height:17px;overflow:visible;}
  .lh-mk circle{fill:var(--void-2);stroke:var(--copper);stroke-width:1;transition:fill .6s,stroke .6s;}
  .lh-mk path{fill:none;stroke:var(--copper);stroke-width:.7;opacity:.75;transition:stroke .6s,opacity .6s;}
  .lh-t{display:flex;align-items:baseline;gap:10px;margin:0;font-size:15px;font-weight:500;color:var(--cream);transition:color .6s;}
  .lh-t em{font-family:'Newsreader',serif;font-style:italic;font-weight:300;font-size:16px;color:rgba(218,179,106,.75);transition:color .6s;}
  .lh-d{margin:0;font-size:12.5px;line-height:1.65;color:var(--dim);transition:color .6s;}
  .lh-so{margin:0;font-family:'Newsreader',serif;font-weight:300;font-size:24px;letter-spacing:.5px;color:var(--warm);}
  .lh-cap{display:flex;gap:22px;margin:0;}
  .lh-i>.lh-a{align-self:flex-start;}
  /* lối SÁNG */
  .lh-i.lh-sang::before{opacity:1;}
  .lh-i.lh-sang .lh-mk circle{fill:var(--warm);stroke:var(--warm);}
  .lh-i.lh-sang .lh-mk path{stroke:var(--void-2);opacity:.6;}
  .lh-i.lh-sang .lh-t,.lh-i.lh-sang .lh-t em{color:var(--warm);}
  .lh-i.lh-sang .lh-d{color:#cfd6cf;}
  .lh-i.lh-sang .lh-a{color:var(--warm);border-color:rgba(240,217,168,.7);}

  /* Công trình + Kiến thức cùng cột 1080px với các chương — để dải phải không đè ảnh */
  .projects .pj-head,.projects .pj-lead,.projects .pj-grid,.projects .pj-press{padding-left:0;padding-right:0;}
  .know-head,.know-grid,.know-all{max-width:1080px;}
}

/* bản GỌN 1280–1759px: cột nội dung chừa chỗ bên phải cho dải */
@media (min-width:1280px) and (max-width:1759.98px){
  :root{--lh-w:196px;}
  .lh-rail{right:5vw;}
  #product,#kien-thuc{padding-right:calc(5vw + var(--lh-w) + 44px);}
  .projects{padding-left:5vw;padding-right:calc(5vw + var(--lh-w) + 44px);}
  .lh-dai{display:none;}
  .lh-gon{display:inline;}
  .lh-k{margin-bottom:26px;font-size:10px;letter-spacing:2.2px;}
  .lh-list{padding-left:30px;gap:30px;}
  .lh-list::before{left:7px;top:-8px;bottom:-12px;}
  .lh-i{gap:6px;}
  .lh-i::before{left:-51px;}
  .lh-mk{left:-30px;width:15px;height:15px;}
  .lh-t{font-size:14px;gap:6px;}
  .lh-t em{font-size:14px;}
  .lh-d{font-size:12px;line-height:1.55;}
  .lh-so{font-size:19px;letter-spacing:0;}
  .lh-cap{gap:16px;}
  .lh-a{font-size:12.5px;}
}

/* bản ĐỦ ≥1760px: dải nằm trong khoảng trống tự nhiên bên phải cột 1080px */
@media (min-width:1760px){
  .lh-rail{left:calc(50% + 540px + var(--lh-khe));width:min(var(--lh-w),calc(50% - 596px - 4vw));}
  .projects{padding-left:calc(50% - 540px);padding-right:calc(50% - 540px);}
}

/* màn thấp: bỏ dòng mô tả để dải không chạm thanh đầu trang */
@media (min-width:1280px) and (max-height:720px){
  .lh-d{display:none;}
  .lh-list{gap:24px;}
}

/* ---------- DẢI TRÁI: ghi chú lề (≥1760px) ---------- */
@media (min-width:1760px){
  .lh-le{display:flex;flex-direction:column;gap:14px;position:absolute;width:236px;text-align:right;z-index:3;}
  .lh-le-k{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;margin:0;font-family:'Newsreader',serif;font-size:14px;color:var(--copper);}
  .lh-le-k em{font-style:italic;font-weight:300;}
  .lh-le-k span{font-weight:200;letter-spacing:1px;}
  .lh-le-t{margin:0;font-family:'Newsreader',serif;font-style:italic;font-weight:300;font-size:19px;line-height:1.45;color:var(--cream);}
  .lh-le .lh-a{align-self:flex-end;}
  /* đoạn kẻ nối ghi chú vào mốc */
  .lh-le::after{content:"";position:absolute;left:calc(100% + 14px);top:18px;width:42px;height:1px;
    background:linear-gradient(90deg,rgba(218,179,106,.2),rgba(218,179,106,.8));}
  /* chương 01: đoạn kẻ chạm đúng chấm vàng của đường sáng (chấm ở left:-55px, rộng 11px) */
  #product .chap>.lh-le{right:calc(100% + 111px);top:0;}
  /* Công trình: không có đường sáng ⇒ đoạn kẻ kết bằng một chấm nhỏ trước "§ Công trình" */
  /*   (dải trái chỗ này hẹp hơn chương 01 ~80px ⇒ ghi chú co theo màn, đo 1760px vẫn cách mép ≥30px) */
  .pj-head{position:relative;}
  .pj-head>.lh-le{right:calc(100% + 83px);top:22px;width:min(236px,calc(50vw - 660px));}
  .pj-head>.lh-le::after{width:36px;}
  .pj-head>.lh-le::before{content:"";position:absolute;left:calc(100% + 50px);top:15px;width:7px;height:7px;border-radius:50%;
    background:var(--copper-2);box-shadow:0 0 12px 3px rgba(218,179,106,.4);}
}

/* ---------- THANH DƯỚI ĐÁY (<1280px) ---------- */
@media (max-width:1279.98px){
  .lh-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:rgba(34,51,47,.97);padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(110%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility .45s;}
  .lh-bar.lh-hien{transform:none;visibility:visible;}
  .lh-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,rgba(218,179,106,0),rgba(240,217,168,.95) 50%,rgba(218,179,106,0));}
  .lh-bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-size:14px;font-weight:500;letter-spacing:.4px;color:var(--cream);text-decoration:none;}
  .lh-bar a+a{border-left:1px solid rgba(192,150,63,.25);}
  .lh-bar a span{font-family:'Newsreader',serif;font-weight:300;font-size:16px;color:var(--warm);}
  .lh-bar a:active{background:rgba(240,217,168,.06);}
}
@media (max-width:359.98px){.lh-bar a span{display:none;}}