/* Giao diện trang chủ và các trang ngành. Chỉ áp dụng khi <body class="lp">; bảng điều khiển vẫn dùng style.css. */
body.lp{
  --bg:#fbfdfc;--surface:#fff;--ink:#0d2b28;--muted:#4f6663;--line:#d9e6e2;
  --brand:#0f766e;--brand-ink:#fff;--brand-soft:#e4f3ef;
  --deep:#06332f;--deep-2:#0a4640;--gold:#ffb627;--gold-ink:#3a2600;--paper:#fffdf5;
  --shadow:0 1px 2px rgba(6,51,47,.08),0 14px 40px rgba(6,51,47,.10);
  color-scheme:light;
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;
}
.lp h1,.lp h2,.lp h3{letter-spacing:-.02em;line-height:1.15;font-weight:800}
.lp a{color:var(--brand)}
.lp :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

/* thanh đầu */
.lp header.top{background:rgba(251,253,252,.92);border-bottom:1px solid var(--line)}
.lp .logo{font-weight:800}
.lp .logo i{background:var(--deep);border-radius:9px}
.lp .logo i::after{border-color:var(--gold);}
.lp nav.links a.l{color:var(--muted);font-weight:500}
.lp nav.links a.l:hover{color:var(--ink)}
.lp .btn{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.lp .btn.ghost{background:transparent;color:var(--brand)}
.lp .btn.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.lp .btn.gold:hover{filter:brightness(1.05)}
.lp .btn.line{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.lp .btn.big{min-height:52px;padding:12px 26px;font-size:17px}

/* phần mở đầu */
.hero-deep{background:radial-gradient(1200px 500px at 85% -10%,#0d5b53 0,transparent 60%),var(--deep);color:#e9f5f2;padding:56px 0 72px;overflow:hidden}
.hero-deep .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-deep .grid{grid-template-columns:1fr;gap:36px}}
.hero-deep h1{font-size:clamp(34px,5.4vw,58px);margin:0 0 18px;color:#fff}
.hero-deep .lead{font-size:clamp(17px,2vw,20px);color:#bfdcd6;max-width:34em;margin:0 0 28px}
.hero-deep .row{display:flex;flex-wrap:wrap;gap:12px}
.hero-deep .fine{margin:16px 0 0;color:#8fb8b0;font-size:14px}

/* cảnh bảng giá và tin nhắn */
.scene{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:560px){.scene{grid-template-columns:1fr}}
.board{background:var(--paper);color:#2b2410;border-radius:14px;padding:18px 18px 14px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(-1.2deg);font-size:14.5px}
@media(max-width:560px){.board{transform:none}}
.board h3{margin:0 0 2px;font-size:15px;color:#2b2410}
.board .sub{margin:0 0 10px;color:#7a6b3c;font-size:12.5px}
.board ul{list-style:none;margin:0;padding:0}
.board li{display:flex;justify-content:space-between;gap:10px;padding:5px 6px;margin:0 -6px;border-bottom:1px dashed #e3d9b4;border-radius:5px}
.board li b{font-weight:700;white-space:nowrap}
.board li.hit{animation:hit 1s .6s both}
@keyframes hit{from{background:transparent}to{background:var(--gold)}}
.phone{background:#f1f6f4;color:var(--ink);border-radius:22px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(1.2deg);min-height:250px}
@media(max-width:560px){.phone{transform:none}}
.phone .pbar{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-weight:700;font-size:14px}
.phone .pbar i{width:26px;height:26px;border-radius:50%;background:var(--deep);display:inline-block}
.m{max-width:88%;padding:8px 12px;border-radius:14px;margin:0 0 8px;font-size:14.5px;line-height:1.5}
.m.c{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.m.b{background:var(--brand);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.m.t1{animation:pop .35s .2s both}
.m.t2{animation:pop .35s 1.5s both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scene .note{grid-column:1/-1;margin:2px 0 0;color:#8fb8b0;font-size:13px;text-align:center}
@media(prefers-reduced-motion:reduce){.board li.hit{animation:none;background:var(--gold)}.m.t1,.m.t2{animation:none}}

/* các phần */
.lp .band{padding:72px 0}
.lp .band.alt{background:#f0f7f5}
.lp .band h2{font-size:clamp(26px,3.6vw,38px);margin:0 0 10px}
.lp .band .sub{color:var(--muted);max-width:40em;margin:0 0 30px;font-size:17px}

/* dùng thử trực tiếp */
.demo-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:start}
@media(max-width:900px){.demo-wrap{grid-template-columns:1fr}}
.demo-wrap .card{box-shadow:var(--shadow);border-radius:18px;padding:22px}
.lp .chat{border-radius:14px}
.lp .bub.u{background:var(--brand);color:#fff}

/* ba bước */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
@media(max-width:800px){.flow{grid-template-columns:1fr}}
.flow .st{padding:0 28px 0 0;position:relative}
.flow .st+.st{padding-left:28px;border-left:2px solid var(--line)}
@media(max-width:800px){.flow .st{padding:0 0 24px 0}.flow .st+.st{padding:24px 0 0;border-left:0;border-top:2px solid var(--line)}}
.flow .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--deep);color:var(--gold);font-weight:800;margin-bottom:12px}
.flow h3{font-size:20px;margin:0 0 6px}
.flow p{margin:0;color:var(--muted)}

/* trợ lý không bịa */
.honest{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.honest{grid-template-columns:1fr}}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rules li{padding-left:34px;position:relative}
.rules li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;background:var(--brand-soft);border:2px solid var(--brand)}
.rules li::after{content:"";position:absolute;left:6px;top:9px;width:8px;height:4px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.rules b{display:block}
.rules span{color:var(--muted)}
.lp .phone.light{transform:none;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line)}

/* ngành */
.lp .chips{gap:10px}
.lp .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;font-size:15px;border-radius:12px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s,transform .15s}
.lp a.chip:hover{border-color:var(--brand);transform:translateY(-2px)}
.lp .chip .ic{font-size:18px;line-height:1}
.lp .chip.vn{border-color:var(--line);color:var(--ink)}

/* bảng giá */
.lp .plans{gap:18px;align-items:stretch}
.lp .plan{border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:6px}
.lp .plan h3{font-size:18px;margin:0}
.lp .plan .price{font-size:34px;font-weight:800;letter-spacing:-.02em}
.lp .plan .price small{font-size:15px;font-weight:500;color:var(--muted)}
.lp .plan ul{padding-left:18px;color:var(--muted);flex:1}
.lp .plan.hot{background:var(--deep);color:#e9f5f2;border-color:var(--deep);box-shadow:0 18px 40px rgba(6,51,47,.3)}
.lp .plan.hot .price small,.lp .plan.hot ul{color:#a9cdc6}
.lp .plan.hot .btn{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

/* hỏi đáp */
.lp details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:0 0 10px}
.lp details summary{cursor:pointer;font-weight:700;list-style:none}
.lp details summary::-webkit-details-marker{display:none}
.lp details summary::after{content:"+";float:right;font-size:22px;line-height:1;color:var(--brand)}
.lp details[open] summary::after{content:"–"}
.lp details p{margin:10px 0 0;color:var(--muted)}

/* lời kêu gọi cuối */
.cta-end{background:var(--deep);color:#e9f5f2;text-align:center;padding:68px 0}
.cta-end h2{color:#fff;font-size:clamp(26px,3.8vw,40px);margin:0 0 10px}
.cta-end p{color:#a9cdc6;margin:0 0 26px}

.lp footer{padding:28px 0 40px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.lp footer nav a{margin-right:4px}

/* khung hỏi thử gọn hơn */
.lp .demo-wrap .msgs{min-height:180px;max-height:340px;height:auto}
.lp .demo-wrap .chat{height:auto}

/* điện thoại: thanh đầu gọn, chỉ giữ logo và nút */
.lp .logo span{white-space:nowrap}
@media(max-width:640px){
  .lp nav.links a.l{display:none}
  .lp header.top .wrap{gap:8px}
  .lp .btn.small{white-space:nowrap;padding:6px 12px}
  .hero-deep{padding:36px 0 52px}
  .lp .band{padding:52px 0}
}

/* so sánh giá và máy tính hoà vốn */
.vs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;margin-bottom:14px}
@media(max-width:900px){.vs{grid-template-columns:1fr}}
.vs-c{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.vs-c h3{font-size:18px;margin:0 0 6px}
.vs-p{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.vs-p small{font-size:14px;font-weight:500;color:var(--muted)}
.vs-c ul{margin:14px 0 0;padding-left:18px;color:var(--muted)}
.vs-c li{margin:0 0 6px}
.vs-c.hot{background:var(--deep);border-color:var(--deep);color:#e9f5f2;box-shadow:0 18px 40px rgba(6,51,47,.3)}
.vs-c.hot h3{color:#fff}.vs-c.hot .vs-p small,.vs-c.hot ul{color:#a9cdc6}.vs-c.hot .vs-p{color:var(--gold)}
.roi{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
@media(max-width:900px){.roi{grid-template-columns:1fr}}
.roi input{max-width:260px}
.roi-out{box-shadow:var(--shadow);border-radius:18px;padding:26px}
.roi-big{font-size:clamp(32px,5vw,46px);font-weight:800;letter-spacing:-.02em;color:var(--brand);margin:4px 0 10px;word-break:break-word}

/* bài viết */
.post{max-width:740px;padding-top:36px;padding-bottom:60px}
.post h1{font-size:clamp(28px,4.4vw,40px);margin:0 0 8px}
.post h2{font-size:clamp(21px,2.8vw,26px);margin:34px 0 8px}
.post p,.post li{font-size:17px}
.post ul,.post ol{padding-left:22px}
.post li{margin:0 0 6px}
.post-meta{color:var(--muted);font-size:14px;margin:0 0 18px}
.post-lead{font-size:19px;color:var(--muted);margin:0 0 8px}
.post-code{background:#0d2b28;color:#e9f5f2;border-radius:12px;padding:16px 18px;overflow:auto;font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.post-box{margin:22px 0;background:var(--brand-soft);border-color:#b7dfd6}
.post-cta{margin:34px 0;text-align:center;padding:26px}
.post-list{list-style:none;padding:0;display:grid;gap:14px}
.post-list li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.post-list a{text-decoration:none;font-size:18px}
.post-list span{display:block;color:var(--muted);font-size:15px;margin-top:4px}