/* ═══════════════════════════════════════════════════════════════════════════
   LineProTrack — Trang mời "Truy cập theo lời mời" (Kế hoạch 56 · B1)

   Nạp SAU landing.css và chỉ THÊM lớp mới (tiền tố hi-): cùng màu, chữ, nút, khung
   mục, hỏi đáp, hộp thoại với trang chính thức, nhưng không sửa landing.css (QĐ10).
   Tinh thần: chững chạc như trang dịch vụ doanh nghiệp — nền sáng, ảnh thật, ít chữ;
   không quầng sáng, không chữ chuyển màu, không dải màu quảng cáo.
   Trang chính thức không có chế độ tối ⇒ trang này cũng không.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Thanh trên: không menu ⇒ cụm nút dồn sang phải; nút Đăng nhập luôn hiện
   (landing.css ẩn .hdr__login dưới 880 px vì ở đó có menu gập — trang này không có). */
.hi-hdr .hdr__actions{margin-left:auto}
.hi-hdr__login{height:38px}

/* Tiêu đề mục: cân dòng, tránh một chữ mồ côi ở dòng cuối */
.hi .sec__title{text-wrap:balance}

/* ── Mở đầu ─────────────────────────────────────────────────────────────── */
.hi-hero{
  padding:72px 0 88px;
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border-bottom:1px solid var(--line-2);
}
.hi-hero__grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center;
}
.hi-badge{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px;
  border-radius:999px; background:var(--brand-w); border:1px solid #cfe0f7; color:var(--brand-d);
  font-size:13.5px; font-weight:600; letter-spacing:.01em;
}
.hi-badge svg{width:17px; height:17px; flex:none}
.hi-h1{
  margin-top:22px; font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(30px, 3vw, 42px); line-height:1.15; letter-spacing:-.028em; text-wrap:balance;
}
.hi-lead{margin-top:20px; max-width:46ch; font-size:17.5px; line-height:1.62; color:var(--ink-2)}
.hi-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hi-note{margin-top:18px; font-size:14px; line-height:1.6; color:var(--ink-3)}
.hi-note a{color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.hi-note a:hover{color:var(--brand-h)}

.hi-shot{margin:0}
.hi-shot__frame{
  border-radius:16px; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--sh-3), 0 0 0 8px rgba(16,24,40,.025);
}
.hi-shot__bar{
  display:flex; align-items:center; gap:6px; height:34px; padding:0 14px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.hi-shot__bar i{width:9px; height:9px; border-radius:50%; background:#d3dae5}
.hi-shot__bar span{
  margin:0 auto; padding:2px 14px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.hi-shot__img{width:100%; height:auto}
.hi-shot__cap{margin-top:14px; text-align:center; font-size:13px; color:var(--ink-3)}

/* ── Giúp được gì — 6 thẻ, ảnh màn thật phóng 1,25 lần, bỏ thanh bên trái của app ── */
.hi-feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.hi-feat{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.hi-feat__fig{
  position:relative; aspect-ratio:16 / 10; overflow:hidden;
  background:var(--surface-3); border-bottom:1px solid var(--line);
}
.hi-feat__fig img{width:125%; max-width:none; height:auto; margin-left:-17.5%}
.hi-feat__fig--right img{width:190%; margin-left:-90%}   /* thẻ Trợ lý: phóng vào khung chat bên phải màn */
.hi-feat__body{padding:20px 22px 24px}
.hi-feat h3{font-family:var(--display); font-size:18.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.hi-feat p{margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--ink-2)}

/* ── Biểu tượng tròn dùng chung ─────────────────────────────────────────── */
.hi-ic{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:12px; background:var(--brand-w); color:var(--brand);
}
.hi-ic svg{width:22px; height:22px}

/* ── Quy mô ─────────────────────────────────────────────────────────────── */
.hi-scale{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.hi-scale li{
  display:grid; grid-template-columns:42px 1fr; column-gap:16px; row-gap:4px; align-items:start;
  padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
}
.hi-scale .hi-ic{grid-row:1 / span 2}
.hi-scale b{font-size:16px; font-weight:650; color:var(--ink); line-height:1.4}
.hi-scale li > span:last-child{font-size:14.5px; line-height:1.55; color:var(--ink-2)}

/* ── Dữ liệu của bạn ────────────────────────────────────────────────────── */
.hi-data{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.hi-dcard{
  display:flex; flex-direction:column; padding:26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.hi-dcard h3{margin-top:16px; font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.hi-dcard p{margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--ink-2)}
.hi-more{
  margin-top:auto; padding-top:16px; align-self:flex-start;
  font-size:14px; font-weight:600; color:var(--brand);
}
.hi-more::after{content:" →"}
.hi-more:hover{color:var(--brand-h); text-decoration:underline; text-underline-offset:3px}

/* ── Bắt đầu thế nào ────────────────────────────────────────────────────── */
.hi-start{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:start}
.hi-steps{display:grid; gap:26px; counter-reset:none}
.hi-steps li{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start}
.hi-steps__n{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff; font-family:var(--display); font-size:18px; font-weight:700;
}
.hi-steps b{display:block; padding-top:2px; font-family:var(--display); font-size:18.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.hi-steps li span:not(.hi-steps__n){display:block; margin-top:4px; font-size:15px; line-height:1.6; color:var(--ink-2)}
.hi-zalo{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin-top:36px; padding:18px 20px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
}
.hi-zalo p{font-size:15px; font-weight:600; color:var(--ink)}

.hi-form{
  padding:32px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
}
.hi-form__title{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin-bottom:18px}
.hi-form .fgrid{margin-top:0}
.hi-form form .btn--block{margin-top:20px}
.hi-form__fine{margin-top:14px; font-size:13px; line-height:1.55; color:var(--ink-3)}
.hi-form__fine a, .hi-check a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
.hi-done{text-align:center; padding:12px 0}
.hi-done .hi-form__title{margin-bottom:8px}
.hi-done p{font-size:15px; line-height:1.6; color:var(--ink-2)}
.hi-done .btn{margin-top:22px}
#hiFormStep[hidden], .hi-done[hidden]{display:none !important}

/* Ô đồng ý trong hộp xin link bản mẫu (thay style nội tuyến của trang chính thức) */
.hi-check{flex-direction:row; align-items:flex-start; gap:10px}
.hi-check input{width:auto; margin-top:4px; flex-shrink:0}
.hi-check > span{font-size:14px; font-weight:400; color:var(--ink-2)}

/* Nút bản mẫu ẩn khi hệ thống chưa mở bản mẫu — [hidden] phải thắng display của .btn */
[data-app-link="demo"][hidden]{display:none !important}

/* ── Chân trang ─────────────────────────────────────────────────────────── */
.hi-ftr{padding:52px 0 28px}
.hi-ftr__top{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:28px}
.hi-ftr__about p{margin-top:14px; max-width:40ch; font-size:14.5px; line-height:1.6; color:var(--ink-2)}
.hi-ftr__links{display:flex; flex-wrap:wrap; gap:10px 28px; padding-top:6px}
.hi-ftr__links a{font-size:14.5px; color:var(--ink-2); transition:color .18s}
.hi-ftr__links a:hover{color:var(--brand)}
.hi-ftr .ftr__bot{margin-top:36px}
.hi-ftr__mail{color:var(--brand); font-weight:500}
.hi-ftr__mail:hover{color:var(--brand-h)}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .hi-hero{padding:56px 0 72px}
  .hi-hero__grid{grid-template-columns:1fr; gap:44px}
  .hi-hero__text{max-width:680px}
  .hi-feats, .hi-data, .hi-scale{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hi-start{grid-template-columns:1fr; gap:40px}
  .hi-start__side{max-width:640px}
}
@media (max-width:720px){
  .hi-hero{padding:40px 0 56px}
  .hi-lead{font-size:16px}
  .hi-cta{flex-direction:column; gap:10px}
  .hi-cta .btn{width:100%}
  .hi-feats, .hi-data, .hi-scale{grid-template-columns:1fr}
  .hi-form{padding:24px 18px}
  .hi-zalo{flex-direction:column; align-items:stretch; text-align:center}
  .hi-zalo .btn{width:100%}
  .hi-ftr__links{gap:10px 22px}
}
@media (max-width:420px){
  .hi-hdr .hdr__inner{gap:12px}
  .hi-hdr .hdr__actions{gap:6px}
  .hi-hdr .logo__word{font-size:17px}
  .hi-hdr .lang__btn{padding:0 6px}
  .hi-hdr .lang__btn .ic--chev{display:none}
  .hi-hdr__login{padding:0 11px; font-size:13.5px}
}