/* =============================================================================
   THANG MÁY TÂM AN — GIAO DIỆN LANDING PAGE QUẢNG CÁO
   Bản thiết kế lại 08/2026.

   Vì sao bỏ nền tối:
   Khách của Tâm An là chủ nhà 40–60 tuổi đang xây hoặc sửa nhà, phần lớn đọc
   trên điện thoại giữa ban ngày. Nền đen chữ trắng khó đọc ngoài nắng và mang
   cảm giác công nghệ/giải trí. Sản phẩm này sống trong giếng trời đầy nắng của
   một ngôi nhà — nền vôi đá sáng hợp với nó hơn, và cho phép đảo ngược: thẻ
   form màu xanh đen nổi hẳn lên giữa trang sáng, thành điểm hút mắt đầu tiên.
   Cam thương hiệu #FF6500 giữ nguyên nhưng chỉ dùng cho hành động.
   ========================================================================== */

/* Biến màu kế thừa từ style.css. Trang giải pháp bọc trong .lp-page.theme-*
   nên chỉ cần đổi lớp là cả trang đổi sắc. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--paper); color:var(--body-text);
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  padding-bottom:74px;
}
img{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* =========================================================================
   THANH ĐẦU TRANG — cố ý không có menu điều hướng
   ========================================================================= */
.lp-top{background:var(--shaft);border-bottom:1px solid var(--rule-dark);position:sticky;top:0;z-index:80}
.lp-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.lp-brand{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--on-dark);text-decoration:none;display:flex;align-items:baseline;gap:8px}
.lp-brand span{color:var(--accent-hi);font-size:10.5px;letter-spacing:.2em;font-weight:700}
.lp-top-call{text-decoration:none;text-align:right;line-height:1.25}
.lp-top-call b{font-family:var(--font-mono);font-weight:700;font-size:18px;color:var(--on-dark);letter-spacing:-.03em;display:block}
.lp-top-call small{font-size:10.5px;font-weight:600;color:var(--on-dark-2);letter-spacing:.14em;text-transform:uppercase}

/* =========================================================================
   HERO — nền sáng, thẻ form xanh đen nổi bật bên phải
   ========================================================================= */
.lp-hero{
  background:var(--shaft);color:var(--on-dark-2);
  position:relative;overflow:hidden;isolation:isolate;
}
/* Ảnh công trình thật làm nền, phủ lớp tối để chữ đọc được.
   Ảnh quan trọng hơn hiệu ứng — khách cần thấy sản phẩm ngay dòng đầu. */
.lp-hero-photo{position:absolute;inset:0;z-index:-2}
.lp-hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.42}
.lp-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(105deg, rgba(11,13,16,.96) 0%, rgba(11,13,16,.86) 42%, rgba(11,13,16,.5) 100%),
    linear-gradient(to bottom, rgba(11,13,16,.4) 0%, transparent 30%, rgba(11,13,16,.7) 100%);
}
/* Vệt sáng màu chủ đề, rất nhẹ, chỉ để phân biệt trang */
.lp-hero::after{
  content:"";position:absolute;top:-20%;right:-6%;width:48%;aspect-ratio:1/1;z-index:-1;
  background:radial-gradient(circle, var(--accent) 0%, transparent 64%);
  opacity:.16;pointer-events:none;
}
.lp-hero{border-bottom:0}

.lp-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:start;padding:60px 0 66px;position:relative;z-index:2}

.lp-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-hi);margin-bottom:22px;
}
.lp-eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}

.lp-hero h1{
  font-family:var(--font-display);font-weight:800;color:var(--on-dark);
  font-size:clamp(31px,4.4vw,52px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance;
}

.lp-price-line{
  margin-top:28px;padding:18px 0;
  border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.lp-price-line .lbl{font-size:13px;color:var(--on-dark-2);font-weight:600}
.lp-price-line b{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(31px,3.8vw,44px);
  color:var(--accent-hi);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
}
.lp-price-line .vat{font-size:13px;color:var(--on-dark-2)}

.lp-hero p.lead{margin-top:20px;font-size:17px;max-width:560px;color:var(--on-dark-2)}

.lp-hero-points{list-style:none;margin-top:24px;display:grid;gap:12px}
.lp-hero-points li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;color:var(--on-dark);align-items:start}
.lp-hero-points li::before{
  content:"";width:9px;height:9px;margin-top:8px;background:var(--accent);
  clip-path:polygon(0 0,100% 50%,0 100%);
}

/* =========================================================================
   THẺ FORM — xanh đen, điểm hút mắt duy nhất trên nền sáng
   ========================================================================= */
.lp-form-card{
  background:var(--white);color:var(--body-text);
  border-radius:var(--r-lg);padding:32px 30px 28px;
  border-top:4px solid var(--accent);
  box-shadow:0 4px 10px rgba(0,0,0,.14), 0 36px 80px -30px rgba(0,0,0,.7);
  position:sticky;top:92px;
}
.lp-form-card h2{font-family:var(--font-display);font-size:23px;font-weight:800;color:var(--ink);line-height:1.2;letter-spacing:-.025em}
.lp-form-card .sub{font-size:14px;margin-top:9px;margin-bottom:20px}

.lp-input,.lp-select{
  width:100%;padding:14px 15px;margin-bottom:10px;border-radius:var(--r);
  border:1px solid var(--rule);background:var(--white);
  color:var(--ink);font-family:var(--font-body);font-size:16px;
  transition:border-color .15s ease,background .15s ease;
}
.lp-input::placeholder{color:#9AA3AB}
.lp-input:focus,.lp-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lp-select option{background:var(--white);color:var(--ink)}

.lp-submit{
  width:100%;padding:17px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--accent);color:var(--accent-on);
  font-family:var(--font-display);font-weight:800;font-size:16.5px;letter-spacing:-.01em;
  transition:background .15s ease;margin-top:4px;
}
.lp-submit:hover{background:var(--accent-hi)}
.lp-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}

.lp-or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--muted);font-size:10.5px;letter-spacing:.16em;font-weight:600}
.lp-or::before,.lp-or::after{content:"";height:1px;flex:1;background:var(--rule)}
.lp-quick{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lp-quick a{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px;border-radius:var(--r);text-decoration:none;font-weight:700;font-size:14.5px;border:1px solid var(--rule);color:var(--ink);background:var(--white);transition:background .15s ease}
.lp-quick a:hover{background:var(--stone)}
.lp-quick .zalo{background:#0068FF;border-color:#0068FF;color:#fff}
.lp-quick .zalo:hover{background:#0057D6}

.lp-alert{background:#FBE9E7;border-left:3px solid var(--no);color:#7F1D1D;padding:12px 14px;border-radius:var(--r);font-size:14px;margin-bottom:15px}

/* =========================================================================
   DẢI PHÁP LÝ — kẻ mảnh, không phải hộp
   ========================================================================= */
.lp-trust{background:var(--paper);border-bottom:1px solid var(--rule);border-top:3px solid var(--accent)}
.lp-trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.lp-trust-grid div{padding:22px 26px 22px 0;border-right:1px solid var(--rule)}
.lp-trust-grid div:not(:first-child){padding-left:26px}
.lp-trust-grid div:last-child{border-right:0;padding-right:0}
.lp-trust-grid strong{display:block;font-family:var(--font-display);color:var(--ink);font-size:16px;font-weight:800;margin-bottom:4px;letter-spacing:-.02em}
.lp-trust-grid span{font-size:13px;color:var(--muted);line-height:1.45;display:block}

/* =========================================================================
   DẢI ẢNH CÔNG TRÌNH
   ========================================================================= */
.lp-band{position:relative;background:var(--shaft-2);overflow:hidden}
.lp-band img{width:100%;height:clamp(190px,26vw,330px);object-fit:cover}
.lp-band figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:36px 24px 16px;
  background:linear-gradient(to top,rgba(14,26,36,.86),transparent);
  color:var(--on-dark);font-size:13.5px;font-weight:600;
}
.lp-band figcaption span{max-width:1152px;margin:0 auto;display:block}

/* =========================================================================
   KHỐI CHUNG
   ========================================================================= */
.lp-sec{padding:64px 0}
.lp-sec.tight{padding-top:0}
.lp-sec.alt{background:var(--stone);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lp-sec-head{max-width:760px;margin-bottom:36px}
.lp-sec-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.lp-sec-head .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
.lp-sec-head h2{font-family:var(--font-display);font-size:clamp(26px,3.3vw,38px);color:var(--ink);font-weight:800;line-height:1.12;letter-spacing:-.032em;text-wrap:balance}
.lp-sec-head p{margin-top:13px;font-size:16.5px}

/* =========================================================================
   NGÃ RẼ CÔNG NGHỆ — điểm nhấn chính của trang.
   Hai cột đối diện, cột tiêu chí nằm giữa như sống lưng của bảng so sánh.
   ========================================================================= */
.fork{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.fork-head,.fork-row,.fork-foot{display:grid;grid-template-columns:1fr 180px 1fr}
.fork-head > div{padding:24px 26px}
.fork-name{font-family:var(--font-display);font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1.2}
.fork-tagline{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.fork .a{background:var(--stone)}
.fork .b{background:var(--accent-soft)}
.fork .mid{border-left:1px solid var(--rule);border-right:1px solid var(--rule);background:var(--paper)}

.fork-row{border-top:1px solid var(--rule)}
.fork-row > div{padding:15px 26px;font-size:15px;display:flex;align-items:center;color:var(--ink)}
.fork-row .a{justify-content:flex-end;text-align:right}
.fork-row .mid{
  justify-content:center;text-align:center;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.fork-row .num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.03em}

.fork-foot{border-top:1px solid var(--rule)}
.fork-foot > div{padding:22px 26px}
.fork-foot .a{text-align:right}
.fork-foot strong{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px;font-weight:700}
.fork-foot p{font-size:15px;color:var(--ink);line-height:1.5}

/* Bảng chọn nhanh theo số điểm dừng */
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.pick-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 18px}
.pick-card .n{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.045em;line-height:1}
.pick-card .n small{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;display:block;margin-top:5px}
.pick-card .rec{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--ink);font-weight:700;line-height:1.4}
.pick-card .why{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;font-weight:400}

/* =========================================================================
   BẢNG GIÁ — dựng như một tờ báo giá kỹ thuật
   ========================================================================= */
.lp-price-group{margin-bottom:40px}
.lp-price-group:last-child{margin-bottom:0}
.lp-price-group h3{
  font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:5px;display:flex;align-items:center;gap:12px;
}
.lp-price-group h3::after{content:"";height:1px;background:var(--rule);flex:1}
.lp-price-group .gsub{font-size:14px;color:var(--muted);margin-bottom:16px}

.lp-price-table{width:100%;border-collapse:collapse;background:var(--paper)}
.lp-price-table th,.lp-price-table td{padding:15px 14px;text-align:center;border-bottom:1px solid var(--rule)}
.lp-price-table thead th{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  color:var(--muted);border-bottom:1px solid var(--ink);padding-bottom:10px;
}
.lp-price-table tbody th{text-align:left;color:var(--ink);font-weight:700;font-size:15.5px;max-width:300px;letter-spacing:-.01em}
.lp-price-table tbody th small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.45;letter-spacing:0}
.lp-price-table td{font-family:var(--font-mono);font-weight:700;font-size:15.5px;color:var(--ink);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.lp-price-table tr.best th,.lp-price-table tr.best td{background:var(--accent-soft)}
.lp-price-table tr.best th{box-shadow:inset 3px 0 0 var(--accent)}
.lp-badge{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:#fff;border:1px solid var(--accent);
  padding:2px 7px;border-radius:100px;margin-left:9px;vertical-align:2px;
}
.lp-price-foot{margin-top:18px;font-size:14.5px;color:var(--muted)}
.lp-price-foot a{color:var(--accent-ink);font-weight:700}

/* =========================================================================
   MẪU THANG MÁY
   ========================================================================= */
.lp-products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lp-prod{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s ease,transform .22s ease}
.lp-prod:hover{box-shadow:0 16px 36px -20px rgba(14,26,36,.35);transform:translateY(-2px)}
.lp-prod-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone-hi)}
.lp-prod-img img{width:100%;height:100%;object-fit:cover}
.lp-prod-tag{position:absolute;top:12px;left:12px;background:var(--paper);color:var(--ink);padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;border:1px solid var(--rule)}
.lp-prod-body{padding:19px 19px 20px;display:flex;flex-direction:column;flex-grow:1}
.lp-prod-body h3{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink);line-height:1.26;letter-spacing:-.025em;margin-bottom:14px}

.lp-prod-spec{margin-bottom:16px;font-size:13.5px}
.lp-prod-spec>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule)}
.lp-prod-spec>div:first-child{border-top:1px solid var(--rule)}
.lp-prod-spec dt{color:var(--muted);flex:none}
.lp-prod-spec dd{font-family:var(--font-mono);font-weight:700;color:var(--ink);text-align:right;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lp-prod-desc{font-size:14.5px;line-height:1.55;margin-bottom:16px}

.lp-prod-act{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}
.lp-prod-act a{display:flex;align-items:center;justify-content:center;padding:12px 8px;border-radius:var(--r);text-decoration:none;font-weight:700;font-size:13.5px;text-align:center;transition:background .15s ease}
.lp-prod-act .ghost{background:transparent;border:1px solid var(--rule);color:var(--ink)}
.lp-prod-act .ghost:hover{background:var(--stone)}
.lp-prod-act .main{background:var(--accent);color:var(--accent-on)}
.lp-prod-act .main:hover{background:var(--accent-hi)}

/* =========================================================================
   GỒM / KHÔNG GỒM
   ========================================================================= */
.lp-two{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.lp-box{padding:28px;background:var(--paper)}
.lp-box + .lp-box{border-left:1px solid var(--rule);background:var(--stone)}
.lp-box h3{font-family:var(--font-display);font-size:17px;color:var(--ink);margin-bottom:16px;font-weight:800;letter-spacing:-.02em}
.lp-box ul{list-style:none;display:grid;gap:11px}
.lp-box li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15px;line-height:1.5;color:var(--ink)}
.lp-box li::before{font-weight:800;line-height:1.45}
.lp-box.yes li::before{content:"✓";color:var(--ok)}
.lp-box.no li::before{content:"✕";color:var(--no);font-size:13px;line-height:1.6}
.lp-box .after{margin-top:16px;font-size:14px;color:var(--muted);line-height:1.55}

/* =========================================================================
   QUY TRÌNH — dòng thời gian ngang có trục
   ========================================================================= */
.lp-steps{display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s}
.lp-step{padding:0 22px 0 0;position:relative}
.lp-step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-ink);
  display:block;margin-bottom:16px;
}
.lp-step::after{content:"";position:absolute;top:25px;left:0;right:0;height:1px;background:var(--rule)}
.lp-step:last-child::after{background:linear-gradient(to right,var(--rule) 34%,transparent)}
.lp-step h4{font-family:var(--font-display);font-size:16px;color:var(--ink);margin:0 0 7px;font-weight:800;letter-spacing:-.02em;padding-top:20px;position:relative}
.lp-step h4::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--accent);border-radius:50%}
.lp-step p{font-size:14.5px;line-height:1.5}

/* =========================================================================
   NỘI DUNG RIÊNG (soạn bằng CKEditor)
   ========================================================================= */
.lp-body{max-width:760px;font-size:17px}
.lp-body h2{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);color:var(--ink);font-weight:800;line-height:1.14;letter-spacing:-.03em;margin:40px 0 16px}
.lp-body h2:first-child{margin-top:0}
.lp-body h3{font-family:var(--font-display);font-size:19.5px;color:var(--ink);font-weight:800;margin:28px 0 9px;letter-spacing:-.02em}
.lp-body p{margin-bottom:16px}
.lp-body ul,.lp-body ol{margin:0 0 18px 20px;display:grid;gap:9px}
.lp-body li{line-height:1.6;padding-left:4px}
.lp-body li::marker{color:var(--accent)}
.lp-body strong{color:var(--ink);font-weight:600}
.lp-body img{border-radius:var(--r-lg);margin:22px 0;border:1px solid var(--rule)}
.lp-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.lp-body th,.lp-body td{border-bottom:1px solid var(--rule);padding:12px 14px;text-align:left}
.lp-body th{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.lp-body blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:22px 0;color:var(--ink);font-size:17.5px}

/* =========================================================================
   FAQ — danh sách kẻ mảnh, không phải hộp xếp chồng
   ========================================================================= */
.lp-faq{max-width:900px;border-top:1px solid var(--rule)}
.lp-faq details{border-bottom:1px solid var(--rule)}
.lp-faq summary{
  padding:20px 44px 20px 0;cursor:pointer;color:var(--ink);font-weight:600;font-size:17px;
  list-style:none;position:relative;line-height:1.4;letter-spacing:-.01em;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.lp-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.lp-faq details[open] summary{color:var(--accent-ink)}
.lp-faq p{padding:0 60px 22px 0;font-size:16px;max-width:70ch}

/* =========================================================================
   CTA CUỐI + CHÂN TRANG — nền xanh đen khép lại trang
   ========================================================================= */
.lp-cta-end{background:var(--shaft);padding:64px 0;text-align:center;color:var(--on-dark-2)}
.lp-cta-end h2{font-family:var(--font-display);font-size:clamp(26px,3.2vw,36px);color:var(--on-dark);font-weight:800;line-height:1.14;letter-spacing:-.032em;text-wrap:balance}
.lp-cta-end p{margin:16px auto 28px;max-width:620px;font-size:16.5px}
.lp-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lp-btn-main{background:var(--accent);color:var(--accent-on);padding:16px 34px;border-radius:var(--r);text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:16.5px;letter-spacing:-.01em;transition:background .15s ease}
.lp-btn-main:hover{background:var(--accent-hi)}
.lp-btn-ghost{background:transparent;border:1px solid var(--rule-dark);color:var(--on-dark);padding:16px 34px;border-radius:var(--r);text-decoration:none;font-weight:700;font-size:16.5px;transition:background .15s ease}
.lp-btn-ghost:hover{background:rgba(255,255,255,.07)}

.lp-foot{background:var(--shaft);padding:0 0 40px;font-size:13.5px;color:var(--on-dark-2);line-height:1.75}
.lp-foot .lp-wrap{border-top:1px solid var(--rule-dark);padding-top:30px}
.lp-foot strong{color:var(--on-dark);font-family:var(--font-display);font-weight:800;letter-spacing:-.01em}
.lp-foot a{color:var(--on-dark-2)}
.lp-foot-links{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
.lp-foot-links a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--rule-dark);padding-bottom:2px}

/* =========================================================================
   THANH GỌI DÍNH ĐÁY (mobile)
   ========================================================================= */
.lp-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;grid-template-columns:1fr 1fr;background:var(--shaft);box-shadow:0 -6px 24px rgba(14,26,36,.22)}
.lp-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 8px;text-decoration:none;font-weight:700;font-size:15.5px}
.lp-bar .call{background:var(--accent);color:var(--accent-on)}
.lp-bar .zalo{background:#0068FF;color:#fff}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .lp-hero-grid{grid-template-columns:1fr;gap:34px;padding:38px 0 46px}
  .lp-form-card{position:static}
  .lp-trust-grid{grid-template-columns:1fr 1fr}
  .lp-trust-grid div{border-right:0;border-bottom:1px solid var(--rule);padding:18px 0}
  .lp-trust-grid div:nth-child(odd){padding-right:22px;border-right:1px solid var(--rule)}
  .lp-trust-grid div:nth-child(even){padding-left:22px}
  .lp-trust-grid div:nth-last-child(-n+2){border-bottom:0}
  .lp-products{grid-template-columns:repeat(2,1fr)}
  .lp-steps{grid-template-columns:1fr 1fr;gap:28px 0}
  .pick{grid-template-columns:1fr 1fr}
  .lp-two{grid-template-columns:1fr}
  .lp-box + .lp-box{border-left:0;border-top:1px solid var(--rule)}
}

/* Ngã rẽ công nghệ trên tablet/mobile: hai cột tách thành hai thẻ xếp dọc */
@media (max-width:860px){
  .fork{border:0;border-radius:0;display:grid;grid-template-columns:1fr;gap:20px;overflow:visible}
  .fork-head,.fork-row,.fork-foot{display:contents}
  .fork .mid{display:none}
  .fork-col{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
  .fork-col > header{padding:20px}
  .fork-col.a > header{background:var(--stone)}
  .fork-col.b > header{background:var(--accent-soft)}
  .fork-col dl{margin:0}
  .fork-col dl > div{display:flex;justify-content:space-between;gap:16px;padding:13px 20px;border-top:1px solid var(--rule);font-size:14.5px;align-items:baseline}
  .fork-col dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;flex:none}
  .fork-col dd{color:var(--ink);text-align:right}
  .fork-col dd.num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.03em}
  .fork-col > footer{padding:18px 20px;border-top:1px solid var(--rule)}
  .fork-col.a > footer{background:var(--stone)}
  .fork-col.b > footer{background:var(--accent-soft)}
  .fork-col > footer strong{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px;font-weight:700}
  .fork-col > footer p{font-size:14.5px;color:var(--ink);line-height:1.5}
}

@media (max-width:640px){
  body{font-size:16px;padding-bottom:70px}
  .lp-wrap{padding:0 18px}
  .lp-sec{padding:44px 0}
  .lp-top-call small{display:none}
  .lp-bar{display:grid}
  .lp-hero-points{display:none}          /* đẩy form lên trong màn hình đầu */
  .lp-form-card{padding:24px 20px}
  .lp-steps{grid-template-columns:1fr;gap:0}
  .lp-step{padding:0 0 22px}
  .lp-step::after{display:none}
  .lp-step h4{padding-top:0;padding-left:20px}
  .lp-step h4::before{top:7px}
  .lp-step p{padding-left:20px}
  .pick{grid-template-columns:1fr;gap:10px}
  .lp-faq summary{font-size:16px;padding-right:36px}
  .lp-faq p{padding-right:0}
  .lp-body{font-size:16.5px}

  /* Bảng giá đổi thành thẻ dọc */
  .lp-price-table thead{display:none}
  .lp-price-table,.lp-price-table tbody,.lp-price-table tr,.lp-price-table th,.lp-price-table td{display:block;width:100%}
  .lp-price-table tr{border:1px solid var(--rule);border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden}
  .lp-price-table tbody th{padding:16px 16px 11px;border-bottom:1px solid var(--rule)}
  .lp-price-table td{display:flex;justify-content:space-between;align-items:baseline;text-align:right;padding:11px 16px;border-bottom:1px solid var(--rule)}
  .lp-price-table tr td:last-child{border-bottom:0}
  .lp-price-table td::before{content:attr(data-label);font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--muted);letter-spacing:0}

  /* Thẻ sản phẩm nằm ngang, bỏ nút phụ để chỉ còn một lối đi */
  .lp-products{grid-template-columns:1fr;gap:14px}
  .lp-prod{flex-direction:row}
  .lp-prod-img{aspect-ratio:1/1;width:38%;flex:none}
  .lp-prod-tag{display:none}
  .lp-prod-body{padding:15px}
  .lp-prod-body h3{font-size:15.5px;margin-bottom:11px}
  .lp-prod-spec{font-size:12.5px;margin-bottom:13px}
  .lp-prod-spec>div{padding:5px 0}
  .lp-prod-act{grid-template-columns:1fr}
  .lp-prod-act .ghost{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* =============================================================================
   KHỐI TRƯNG BÀY MẪU — mẫu đầu tiên lớn, các mẫu sau xếp lưới
   ========================================================================== */
.showcase-hero{
  display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:22px;
}
.showcase-hero .sh-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--stone-hi)}
.showcase-hero .sh-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.showcase-hero:hover .sh-img img{transform:scale(1.03)}
.sh-count{
  position:absolute;left:14px;bottom:14px;background:rgba(14,26,36,.86);color:var(--on-dark);
  padding:6px 13px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.01em;
}
.lp-prod .sh-count{left:auto;right:12px;bottom:12px;padding:4px 10px;font-size:11px}
.showcase-hero .sh-body{padding:32px 30px;display:flex;flex-direction:column}
.showcase-hero h3{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--ink);line-height:1.18;letter-spacing:-.028em;margin-bottom:10px}
.sh-lead{font-size:15.5px;color:var(--body-text);margin-bottom:20px;line-height:1.55}
.showcase-hero .product-cat-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--rule);
  padding:4px 11px;border-radius:100px;margin-bottom:13px;align-self:flex-start;
}
.showcase-hero .lp-prod-spec{margin-bottom:20px}
.showcase-hero .lp-prod-act{margin-top:0}
.sh-strip{display:flex;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.sh-strip img{width:74px;height:60px;object-fit:cover;border-radius:var(--r);border:1px solid var(--rule);flex:none}

@media (max-width:900px){
  .showcase-hero{grid-template-columns:1fr}
  .showcase-hero .sh-img{aspect-ratio:16/10}
  .showcase-hero .sh-body{padding:24px 22px}
  .showcase-hero h3{font-size:21px}
}
@media (max-width:640px){
  .sh-strip img{width:62px;height:50px}
  .showcase-hero .lp-prod-act{grid-template-columns:1fr}
  .showcase-hero .lp-prod-act .ghost{display:none}
}


/* =============================================================================
   NHẬN DẠNG RIÊNG CHO TỪNG TRANG GIẢI PHÁP
   Ngoài sắc màu, mỗi chủ đề còn đổi hoa văn nền hero để nhìn là phân biệt
   được ngay, không cần đọc tiêu đề.
   ========================================================================== */

/* Bảng giá — lưới ô vuông, gợi bảng tính */
.theme-ember .lp-hero::before{background-size:64px 64px}

/* Nhà cải tạo — vạch ngang chồng tầng, gợi mặt cắt công trình */
.theme-azure .lp-hero::before{
  background-image:linear-gradient(to bottom, var(--rule-dark) 1px, transparent 1px);
  background-size:100% 44px;
}

/* Nhà ống hẹp — sọc chéo hẹp, gợi không gian thu gọn */
.theme-jade .lp-hero::before{
  background-image:repeating-linear-gradient(45deg, var(--rule-dark) 0 1px, transparent 1px 22px);
  background-size:auto;
}

/* Hai chủ đề dự phòng cho các trang giải pháp thêm về sau */
.theme-violet .lp-hero::before{
  background-image:radial-gradient(var(--rule-dark) 1.2px, transparent 1.2px);
  background-size:26px 26px;
}
.theme-crimson .lp-hero::before{
  background-image:
    linear-gradient(to right, var(--rule-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-dark) 1px, transparent 1px);
  background-size:34px 34px;
}

/* Nhãn chủ đề nhỏ cạnh logo: cho biết đang ở trang giải pháp nào */
.lp-tag{
  display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:4px 11px;
  border:1px solid var(--accent);border-radius:100px;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-hi);white-space:nowrap;
}
@media (max-width:640px){ .lp-tag{display:none} }

/* Dải số liệu và tiêu đề khối lấy sắc chủ đề */
.lp-sec-head .eyebrow{color:var(--accent-ink)}
.lp-sec-head .eyebrow::before{background:var(--accent)}
.lp-price-table tr.best th{box-shadow:inset 3px 0 0 var(--accent)}
.lp-badge{color:var(--accent-ink);border-color:var(--accent)}
.fork .b{background:var(--accent-soft)}
.fork-foot strong{color:var(--accent-ink)}
.lp-faq summary::after{border-color:var(--accent)}
.lp-faq details[open] summary{color:var(--accent-ink)}
.lp-body li::marker{color:var(--accent)}
.lp-body blockquote{border-left-color:var(--accent)}
.lp-cta-end{border-top:3px solid var(--accent)}

/* =============================================================================
   HÌNH MINH HOẠ VECTOR
   Hình kế thừa currentColor nên tự đổi theo nền sáng/tối của khối chứa nó.
   ========================================================================== */
.ta-figbox{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:26px 22px;color:var(--ink);overflow:hidden;
}
.ta-figbox.wide{padding:30px 26px}
.lp-sec.alt .ta-figbox{background:var(--paper)}
.ta-fig{width:100%;height:auto;display:block}
.ta-fig-title{font-family:var(--font-display);font-size:13.5px;font-weight:800;fill:currentColor;letter-spacing:-.01em}
.ta-fig-tag{font-family:var(--font-body);font-size:9.5px;font-weight:700;fill:currentColor;letter-spacing:.09em;opacity:.72}
.ta-fig-dim{font-family:var(--font-mono);font-size:12.5px;font-weight:700;fill:currentColor;letter-spacing:-.03em}
.ta-fig-note{font-family:var(--font-body);font-size:11.5px;fill:currentColor;opacity:.66}
.ta-fig-eq{font-family:var(--font-display);font-size:26px;font-weight:700;fill:currentColor;opacity:.4}

/* =============================================================================
   TEMPLATE 2 · NHÀ CẢI TẠO — hero một cột giữa trang
   ========================================================================== */
.lp-hero-center{position:relative;z-index:2;text-align:center;padding:66px 0 60px;max-width:840px;margin:0 auto}
.lp-hero-center.narrow{max-width:760px;padding-bottom:40px}
.lp-hero-center h1{font-size:clamp(32px,4.6vw,54px)}
.lp-hero-center .lead{margin:20px auto 0;font-size:17.5px;color:var(--on-dark-2);max-width:640px}
.lp-hero-center .lp-hero-act{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.lp-hero-chips{list-style:none;display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.lp-hero-chips li{
  font-size:13.5px;font-weight:600;color:var(--on-dark);
  border:1px solid var(--rule-dark);border-radius:100px;padding:8px 16px;background:rgba(255,255,255,.05);
}

.tpl-opt3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.tpl-opt3 article{padding:28px 26px;border-right:1px solid var(--rule)}
.tpl-opt3 article:last-child{border-right:0}
.tpl-opt3 .n{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:var(--accent);color:var(--accent-on);font-family:var(--font-mono);font-weight:700;
  font-size:14px;border-radius:2px;margin-bottom:16px;
}
.tpl-opt3 h3{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.026em;margin-bottom:10px}
.tpl-opt3 p{font-size:15px;line-height:1.6}
.tpl-opt3 dl{margin-top:18px;border-top:1px solid var(--rule)}
.tpl-opt3 dl > div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.tpl-opt3 dl > div:last-child{border-bottom:0}
.tpl-opt3 dt{color:var(--muted)}
.tpl-opt3 dd{color:var(--ink);font-weight:600}
.tpl-opt3 dd.num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.03em}

/* Dải form nền tối, dùng ở template cải tạo và công nghệ */
.tpl-formband{background:var(--shaft);color:var(--on-dark-2);padding:62px 0;border-top:3px solid var(--accent)}
.tpl-formband-in{display:grid;grid-template-columns:1fr .86fr;gap:52px;align-items:center}
.tpl-formband h2{font-family:var(--font-display);font-size:clamp(25px,3vw,35px);color:var(--on-dark);font-weight:800;letter-spacing:-.034em;line-height:1.14}
.tpl-formband > .lp-wrap > div > p{margin-top:14px;font-size:16.5px;max-width:520px}
.tpl-formband .hp-cta-list{margin-top:24px;display:grid;gap:11px;list-style:none}
.tpl-formband .hp-cta-list li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;color:var(--on-dark)}
.tpl-formband .hp-cta-list li::before{content:"";width:9px;height:9px;margin-top:8px;background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%)}
.tpl-formband .lp-form-card{position:static}

/* =============================================================================
   TEMPLATE 3 · NHÀ ỐNG — hero đảo chiều, form bên trái
   ========================================================================== */
.lp-hero-grid.reverse{grid-template-columns:.92fr 1.08fr}
.tpl-load{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tpl-load article{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 24px;position:relative}
.tpl-load article.best{border-color:var(--accent);border-width:2px;padding:25px 23px}
.tpl-load .pin{
  position:absolute;top:-11px;left:22px;background:var(--accent);color:var(--accent-on);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:100px;
}
.tpl-load b.num{
  display:block;font-family:var(--font-mono);font-size:34px;font-weight:700;color:var(--ink);
  letter-spacing:-.055em;line-height:1;
}
.tpl-load b.num i{font-family:var(--font-body);font-style:normal;font-size:15px;font-weight:600;color:var(--accent-ink);margin-left:3px;letter-spacing:0}
.tpl-load h3{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:8px 0 16px}
.tpl-load dl{border-top:1px solid var(--rule);margin-bottom:14px}
.tpl-load dl > div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.tpl-load dt{color:var(--muted)}
.tpl-load dd.num{font-family:var(--font-mono);font-weight:700;color:var(--ink);letter-spacing:-.03em}
.tpl-load p{font-size:14.5px;line-height:1.55}

/* =============================================================================
   TEMPLATE 4 · CÔNG NGHỆ — hero có mặt cắt nguyên lý bên phải
   ========================================================================== */
.tpl-cn-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding:56px 0 60px;position:relative;z-index:2}
.tpl-cn-fig{background:rgba(255,255,255,.05);border:1px solid var(--rule-dark);border-radius:var(--r-lg);padding:20px;color:var(--on-dark)}
.tpl-cn-hero .lp-hero-act{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.tpl-cn-spec{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid var(--rule);border-top:2px solid var(--ink);border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--white);
}
.tpl-cn-spec > div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:15px 20px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.tpl-cn-spec > div:nth-child(2n){border-right:0}
.tpl-cn-spec dt{color:var(--muted);font-size:14px}
.tpl-cn-spec dd{color:var(--ink);font-size:15px;text-align:right;font-weight:600}
.tpl-cn-spec dd.num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.035em}
.tpl-cn-spec.compact{grid-template-columns:1fr;border-top-color:var(--accent)}
.tpl-cn-spec.compact > div{border-right:0}
.tpl-cn-best{margin-top:20px;font-size:16px;color:var(--ink);max-width:760px}
.tpl-cn-alt{display:grid;grid-template-columns:1fr .82fr;gap:48px;align-items:start}
.tpl-cn-alt h2{font-family:var(--font-display);font-size:clamp(23px,2.8vw,31px);color:var(--ink);letter-spacing:-.032em;margin:12px 0 14px}
.tpl-cn-alt .eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink);display:block}
.tpl-cn-alt p{font-size:16px;margin-bottom:12px}
.tpl-cn-alt p.muted{color:var(--muted);font-size:15px}

/* =============================================================================
   TEMPLATE 5 · KHU VỰC — hero băng ngang, thân hai cột
   ========================================================================== */
.tpl-kv-stats{
  display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2;
  background:var(--paper);border-radius:var(--r-lg);overflow:hidden;margin-bottom:-38px;box-shadow:var(--shadow-lg);
}
.tpl-kv-stats > div{padding:22px 24px;border-right:1px solid var(--rule)}
.tpl-kv-stats > div:last-child{border-right:0}
.tpl-kv-stats b.num{display:block;font-family:var(--font-mono);font-size:27px;font-weight:700;color:var(--ink);letter-spacing:-.055em;line-height:1}
.tpl-kv-stats b.num i{font-family:var(--font-body);font-style:normal;font-size:13px;font-weight:600;color:var(--accent-ink);margin-left:3px;letter-spacing:0}
.tpl-kv-stats span{display:block;font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.42}

.tpl-kv-body{display:grid;grid-template-columns:1fr 360px;gap:52px;align-items:start;padding:76px 0 60px}
.tpl-kv-body > main{min-width:0}
.tpl-kv-h{font-family:var(--font-display);font-size:clamp(22px,2.7vw,30px);color:var(--ink);font-weight:800;letter-spacing:-.032em;margin:48px 0 22px;padding-bottom:13px;border-bottom:2px solid var(--ink)}
.tpl-kv-h:first-child{margin-top:0}
.tpl-kv-area{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:26px 28px;margin-bottom:34px}
.tpl-kv-area h2{font-family:var(--font-display);font-size:19px;color:var(--ink);letter-spacing:-.026em;margin-bottom:14px}
.tpl-kv-area ul{list-style:none;display:grid;gap:10px}
.tpl-kv-area li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15.5px;color:var(--ink)}
.tpl-kv-area li::before{content:"";width:8px;height:8px;margin-top:8px;background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%)}
.tpl-kv-side{display:grid;gap:20px;position:sticky;top:96px}
.tpl-kv-side .lp-form-card{position:static}
.tpl-kv-office{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px}
.tpl-kv-office h3{font-family:var(--font-display);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:15px;padding-bottom:11px;border-bottom:1px solid var(--rule)}
.tpl-kv-office p{font-size:14.5px;line-height:1.55;margin-bottom:8px}
.tpl-kv-office a{display:block;margin-top:12px;font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent-ink);letter-spacing:-.045em}

/* Thẻ form đặt trên nền tối */
.lp-form-card.on-dark{border-top-color:var(--accent)}

@media (max-width:1000px){
  .tpl-opt3{grid-template-columns:1fr}
  .tpl-opt3 article{border-right:0;border-bottom:1px solid var(--rule)}
  .tpl-opt3 article:last-child{border-bottom:0}
  .tpl-formband-in{grid-template-columns:1fr;gap:34px}
  .tpl-load{grid-template-columns:1fr}
  .tpl-cn-hero{grid-template-columns:1fr;gap:32px}
  .tpl-cn-alt{grid-template-columns:1fr;gap:28px}
  .tpl-kv-stats{grid-template-columns:1fr 1fr;margin-bottom:-24px}
  .tpl-kv-stats > div:nth-child(2n){border-right:0}
  .tpl-kv-stats > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .tpl-kv-body{grid-template-columns:1fr;gap:36px;padding-top:60px}
  .tpl-kv-side{position:static}
  .lp-hero-grid.reverse{grid-template-columns:1fr}
  .lp-hero-grid.reverse .lp-form-card{order:2}
}
@media (max-width:640px){
  .ta-figbox{padding:16px 12px;overflow-x:auto}
  .ta-fig{min-width:560px}
  .lp-hero-center{padding:42px 0 40px}
  .lp-hero-center .lp-hero-act a{width:100%}
  .tpl-cn-spec{grid-template-columns:1fr}
  .tpl-cn-spec > div{border-right:0}
  .tpl-kv-stats{grid-template-columns:1fr}
  .tpl-kv-stats > div{border-right:0;border-bottom:1px solid var(--rule)}
  .tpl-formband{padding:44px 0}
}

/* Sắc thái riêng cho phần đầu từng template — ngoài màu và bố cục,
   độ đậm của lớp phủ và vị trí vầng sáng cũng khác nhau. */
.tpl-banggia::after{top:-16%;right:-4%;width:44%;opacity:.22}
.tpl-caitao::after{top:-30%;right:auto;left:50%;transform:translateX(-50%);width:70%;opacity:.16}
.tpl-nhaong::after{top:-10%;right:auto;left:-8%;width:38%;opacity:.2}
.tpl-congnghe::after{top:-24%;right:8%;width:52%;opacity:.24}
.tpl-khuvuc::after{top:-34%;right:auto;left:50%;transform:translateX(-50%);width:86%;opacity:.14}

/* =============================================================================
   TINH CHỈNH 08/2026 — mềm hoá và thêm chiều sâu
   ========================================================================== */
.lp-hero-grid{padding:76px 0 84px}
.lp-hero h1{font-weight:700;letter-spacing:-.028em;line-height:1.06}
.lp-hero p.lead{font-size:18px;line-height:1.65}
.lp-price-line b{color:var(--accent-hi);text-shadow:0 2px 18px rgba(0,0,0,.35)}

/* Thẻ và bảng: bo góc lớn hơn, bóng nhiều lớp */
.lp-form-card,.lp-box,.lp-two,.fork,.pick-card,.tpl-opt3,.tpl-load article,
.tpl-cn-spec,.tpl-kv-area,.tpl-kv-office,.ta-figbox,.lp-prod,.showcase-hero{
  border-radius:var(--r-lg);
}
.lp-two,.fork,.tpl-opt3,.tpl-cn-spec,.ta-figbox{box-shadow:var(--shadow-sm)}
.pick-card,.tpl-load article,.tpl-kv-area,.tpl-kv-office{box-shadow:var(--shadow-sm)}
.lp-price-table{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.lp-price-table thead th{background:var(--stone)}

/* Ảnh sản phẩm trên trang giải pháp: bo góc và phóng nhẹ khi rê chuột */
.lp-prod-img{border-radius:var(--r-lg) var(--r-lg) 0 0}
.lp-prod{box-shadow:var(--shadow-sm)}
.lp-prod:hover{box-shadow:var(--shadow-md)}

/* Nút */
.lp-submit,.lp-btn-main{border-radius:var(--r)}
.lp-quick a,.lp-btn-ghost,.lp-prod-act a{border-radius:var(--r)}
.lp-badge,.lp-hero-chips li,.lp-prod-tag,.lp-tag{border-radius:100px}

/* FAQ: thoáng hơn */
.lp-faq summary{font-size:17.5px;padding:22px 44px 22px 0;font-weight:600}
.lp-faq p{font-size:16.5px;line-height:1.7}

/* Khối cuối: nền tối có vệt sáng chủ đề */
.lp-cta-end{position:relative;overflow:hidden}
.lp-cta-end::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:70%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 62%);
  opacity:.14;pointer-events:none;
}
.lp-cta-end > *{position:relative;z-index:2}

@media (max-width:1000px){ .lp-hero-grid{padding:48px 0 56px} }

/* =============================================================================
   TĂNG TƯƠNG PHẢN CHO TRANG GIẢI PHÁP — 08/2026
   Khối .alt trước đây dùng xám nhạt, gần như không phân biệt được với nền
   trắng. Nay đổi thành nền tối để nhịp trang rõ ràng như trang chủ.
   ========================================================================== */
.lp-sec.alt{
  background:var(--shaft);color:var(--on-dark-2);
  border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);
}
.lp-sec.alt .lp-sec-head h2{color:var(--on-dark)}
.lp-sec.alt .lp-sec-head p{color:var(--on-dark-2)}
.lp-sec.alt .lp-sec-head .eyebrow{color:var(--accent-hi)}

.lp-sec.alt .lp-price-table{background:var(--shaft-2);border-color:var(--rule-dark)}
.lp-sec.alt .lp-price-table thead th{background:rgba(255,255,255,.05);color:var(--on-dark-2);border-bottom-color:var(--accent)}
.lp-sec.alt .lp-price-table th,.lp-sec.alt .lp-price-table td{border-bottom-color:var(--rule-dark)}
.lp-sec.alt .lp-price-table tbody th,.lp-sec.alt .lp-price-table td{color:var(--on-dark)}
.lp-sec.alt .lp-price-table tbody th small{color:var(--on-dark-2)}
.lp-sec.alt .lp-price-table tr.best th,.lp-sec.alt .lp-price-table tr.best td{background:rgba(255,77,0,.12)}
.lp-sec.alt .lp-price-table tr.best td{color:var(--accent-hi)}
.lp-sec.alt .lp-badge{background:transparent;color:var(--accent-hi);border-color:var(--accent)}
.lp-sec.alt .lp-price-group h3{color:var(--on-dark)}
.lp-sec.alt .lp-price-group h3::after{background:var(--rule-dark)}
.lp-sec.alt .lp-price-group .gsub,.lp-sec.alt .lp-price-foot{color:var(--on-dark-2)}
.lp-sec.alt .lp-price-foot a{color:var(--accent-hi)}

.lp-sec.alt .lp-prod{background:var(--shaft-2);border-color:var(--rule-dark);box-shadow:none}
.lp-sec.alt .lp-prod:hover{border-color:var(--accent)}
.lp-sec.alt .lp-prod-body h3{color:var(--on-dark)}
.lp-sec.alt .lp-prod-spec dt{color:var(--on-dark-2)}
.lp-sec.alt .lp-prod-spec dd{color:var(--on-dark)}
.lp-sec.alt .lp-prod-spec > div{border-bottom-color:var(--rule-dark)}
.lp-sec.alt .lp-prod-spec > div:first-child{border-top-color:var(--rule-dark)}
.lp-sec.alt .lp-prod-act .ghost{border-color:var(--rule-dark);color:var(--on-dark)}
.lp-sec.alt .lp-prod-tag{background:var(--shaft);color:var(--on-dark);border-color:var(--rule-dark)}

.lp-sec.alt .lp-body{color:var(--on-dark-2)}
.lp-sec.alt .lp-body h2,.lp-sec.alt .lp-body h3,.lp-sec.alt .lp-body strong{color:var(--on-dark)}
.lp-sec.alt .lp-body th{color:var(--on-dark);border-bottom-color:var(--accent)}
.lp-sec.alt .lp-body td{border-bottom-color:var(--rule-dark)}

.lp-sec.alt .ta-figbox{background:var(--shaft-2);border-color:var(--rule-dark);color:var(--on-dark)}
.lp-sec.alt .tpl-load article{background:var(--shaft-2);border-color:var(--rule-dark);box-shadow:none}
.lp-sec.alt .tpl-load b.num,.lp-sec.alt .tpl-load dd.num{color:var(--on-dark)}
.lp-sec.alt .tpl-load h3{color:var(--on-dark-2)}
.lp-sec.alt .tpl-load p{color:var(--on-dark-2)}
.lp-sec.alt .tpl-load dl,.lp-sec.alt .tpl-load dl > div{border-color:var(--rule-dark)}

/* Khối sáng: viền đậm hơn để không bị nhạt nhoà */
.lp-price-table thead th{background:var(--ink);color:#fff;border-bottom:0}
.fork-row .mid{background:var(--paper)}
.lp-trust{border-bottom:3px solid var(--accent)}

/* Dải ảnh công trình: có viền cam hai đầu như các khối tối khác */
.hp-strip{border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}