/* Trang bán hàng WebSEO — dùng chung cho phần mềm quản trị và cộng tác viên.
   Tự chứa, không đụng vào CSS của theme. */

.lp{--xanh:#1d4ed8;--xanh-nhat:#eff4ff;--muc:#0f172a;--nhat:#64748b;--vien:#e2e8f0;
    color:var(--muc);font-size:16px;line-height:1.7}
.lp *{box-sizing:border-box}
.lp-trong{max-width:1120px;margin:0 auto;padding:0 20px}

/* ── Mở đầu ─────────────────────────────────────────────────────────── */
.lp-hero{background:linear-gradient(135deg,#0b2a6f 0%,#1d4ed8 55%,#2563eb 100%);color:#fff;
    padding:64px 0 72px}
.lp-hero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.22;margin:0 0 16px;font-weight:800;color:#fff}
.lp-hero .lp-sub{font-size:clamp(16px,2vw,19px);opacity:.94;max-width:680px;margin:0 0 28px}
.lp-nhan{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
    padding:7px 15px;border-radius:99px;font-size:13.5px;font-weight:600;margin-bottom:18px}
.lp-hero-2{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media(max-width:880px){.lp-hero-2{grid-template-columns:1fr;gap:32px}}

.lp-nut{display:inline-flex;align-items:center;gap:8px;background:#f59e0b;color:#0f172a;
    padding:15px 30px;border-radius:11px;font-weight:800;text-decoration:none;font-size:16.5px;
    box-shadow:0 10px 26px rgba(245,158,11,.34);border:0;cursor:pointer}
.lp-nut:hover{background:#fbbf24;color:#0f172a;transform:translateY(-1px)}
.lp-nut-2{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;
    padding:15px 24px;border:1.5px solid rgba(255,255,255,.5);border-radius:11px;
    font-weight:700;text-decoration:none;font-size:16px}
.lp-nut-2:hover{background:rgba(255,255,255,.12);color:#fff}
.lp-cta-hang{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ── Khối chung ─────────────────────────────────────────────────────── */
.lp-khoi{padding:62px 0}
.lp-khoi.lp-xam{background:#f8fafc}
.lp-tieu{font-size:clamp(23px,3vw,33px);font-weight:800;margin:0 0 12px;line-height:1.3}
.lp-dan{color:var(--nhat);font-size:17px;max-width:720px;margin:0 0 34px}

.lp-luoi{display:grid;gap:20px}
.lp-3{grid-template-columns:repeat(3,1fr)}
.lp-2{grid-template-columns:repeat(2,1fr)}
.lp-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.lp-3,.lp-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lp-3,.lp-2,.lp-4{grid-template-columns:1fr}}

.lp-the{background:#fff;border:1px solid var(--vien);border-radius:14px;padding:24px}
.lp-the h3{font-size:17.5px;margin:0 0 9px;font-weight:700}
.lp-the p{margin:0;color:var(--nhat);font-size:15px}
.lp-the-so{width:38px;height:38px;border-radius:10px;background:var(--xanh-nhat);color:var(--xanh);
    display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:13px}

/* Đau đầu → cách giải */
.lp-doi{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--vien);
    border-radius:14px;overflow:hidden;background:#fff}
@media(max-width:760px){.lp-doi{grid-template-columns:1fr}}
.lp-doi>div{padding:26px}
.lp-doi .lp-xau{background:#fef2f2;border-right:1px solid var(--vien)}
.lp-doi h4{margin:0 0 14px;font-size:16px;font-weight:800}
.lp-doi ul{margin:0;padding-left:20px}
.lp-doi li{margin-bottom:9px;font-size:15px;color:#475569}

/* Danh sách tích */
.lp-tich{list-style:none;margin:0;padding:0}
.lp-tich li{position:relative;padding-left:29px;margin-bottom:11px;font-size:15.5px}
.lp-tich li:before{content:"✓";position:absolute;left:0;top:0;color:#0a7f4f;font-weight:800}

/* Bảng hoa hồng */
.lp-bang{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;
    border:1px solid var(--vien)}
.lp-bang th,.lp-bang td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--vien);font-size:15.5px}
.lp-bang th{background:#f1f5f9;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.3px}
.lp-bang tr:last-child td{border-bottom:0}
.lp-bang .lp-hh{font-weight:800;color:#0a7f4f;font-size:17px}

/* ── Biểu mẫu ───────────────────────────────────────────────────────── */
.lp-form-hop{background:#fff;border-radius:16px;padding:26px;box-shadow:0 18px 50px rgba(2,20,60,.18);
    border:1px solid rgba(255,255,255,.5)}
.lp-form-hop h3{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--muc)}
.lp-form-hop .lp-fs{color:var(--nhat);font-size:14px;margin:0 0 18px}
.lp-o{margin-bottom:13px}
.lp-o label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:#334155}
/* font-size PHẢI >= 16px: iPhone tự phóng to trang khi bấm vào ô nhập có chữ
   nhỏ hơn 16px, khách phải chụm tay thu nhỏ lại — mất khách ngay ở bước điền. */
.lp-o input,.lp-o select,.lp-o textarea{width:100%;padding:12px 13px;border:1px solid #cbd5e1;
    border-radius:9px;font-size:16px;font-family:inherit;background:#fff;color:var(--muc)}
.lp-o input:focus,.lp-o select:focus,.lp-o textarea:focus{outline:0;border-color:var(--xanh);
    box-shadow:0 0 0 3px rgba(29,78,216,.13)}
.lp-o textarea{min-height:84px;resize:vertical}
.lp-form-hop .lp-nut{width:100%;justify-content:center;margin-top:6px}
.lp-rieng{font-size:12.5px;color:var(--nhat);margin:12px 0 0;line-height:1.6}
.lp-an{position:absolute;left:-9999px}

.lp-bao{padding:13px 16px;border-radius:10px;margin-bottom:16px;font-size:14.5px;font-weight:600}
.lp-bao-ok{background:#dcfce7;color:#166534;border:1px solid #86efac}
.lp-bao-loi{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

/* Câu hỏi hay gặp */
.lp-hoi{background:#fff;border:1px solid var(--vien);border-radius:12px;margin-bottom:12px;padding:0}
.lp-hoi summary{padding:17px 20px;font-weight:700;cursor:pointer;font-size:16px;list-style:none}
.lp-hoi summary::-webkit-details-marker{display:none}
.lp-hoi summary:before{content:"+";float:right;color:var(--xanh);font-weight:800;font-size:19px}
.lp-hoi[open] summary:before{content:"−"}
.lp-hoi .lp-dap{padding:0 20px 18px;color:#475569;font-size:15.5px}

/* Dải chốt cuối */
.lp-chot{background:var(--muc);color:#fff;padding:56px 0;text-align:center}
.lp-chot h2{color:#fff;font-size:clamp(23px,3vw,32px);margin:0 0 12px;font-weight:800}
.lp-chot p{color:#cbd5e1;font-size:17px;max-width:620px;margin:0 auto 26px}


/* ── Minh hoạ ────────────────────────────────────────────────────────── */
.lp-hinh{width:100%;height:auto;display:block}
.lp-hinh-hop{margin-top:26px}
.lp-hinh-chu{font-size:13px;opacity:.72;margin:10px 0 0}
.lp-hinh-sang{background:#fff;border:1px solid var(--vien);border-radius:14px;padding:22px;margin-bottom:28px}
.lp-hinh-ts{max-width:900px;margin:0 auto}
@media(max-width:700px){.lp-hinh-sang{padding:12px}}

/* Biểu tượng trong ô */
.lp-the-so .lp-ic{width:21px;height:21px}
.lp-the-so{color:var(--xanh)}
.lp-the-buoc{font-size:16px}