/* Trang giới thiệu NBK Click Shield: dùng chung khung với LiBrowser (librowser.css) rồi bổ sung phần riêng */
@import url('librowser.css');

/* Giao diện minh họa trong hero (dựng bằng HTML, không dùng ảnh) */
.csl-shot{background:#fff}
.csl-app{padding:16px 16px 18px;background:#f7f2ec;color:#2b1a12;font-size:12px}
.csl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.csl-kpis div{background:#fff;border:1px solid #eadfd3;border-radius:10px;padding:10px 10px 9px}
.csl-kpis b{display:block;font-size:22px;line-height:1.1;font-weight:800}
.csl-kpis span{display:block;margin-top:3px;font-size:10.5px;color:#7a6657;line-height:1.3}
.csl-kpis .bad b{color:#c0392b}.csl-kpis .mid b{color:#d68910}
.csl-row2{display:grid;grid-template-columns:1fr 1.1fr;gap:8px;margin-top:8px}
.csl-box{background:#fff;border:1px solid #eadfd3;border-radius:10px;padding:10px 12px}
.csl-box h4{margin:0 0 6px;font-size:12px;font-weight:800}
.csl-box p{display:flex;align-items:center;gap:8px;margin:0;padding:6px 0;border-top:1px solid #f1e8de;font-size:11.5px}
.csl-box p:first-of-type{border-top:0}
.csl-box p span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csl-box p b{font-weight:800}
.csl-box code{flex:1;font-size:11.5px}
.csl-box em{font-style:normal;font-weight:800;font-size:10.5px;border-radius:99px;padding:2px 8px;color:#fff}
.csl-box em.r{background:#c0392b}.csl-box em.m{background:#d68910}
.csl-box u{text-decoration:none;font-size:10.5px;font-weight:700;border:1px solid #e2711a;color:#e2711a;border-radius:7px;padding:2px 8px}
@media (max-width:640px){.csl-kpis{grid-template-columns:repeat(2,1fr)}.csl-row2{grid-template-columns:1fr}}

/* Mục quyền Google Ads */
.csl-perm{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 30px;box-shadow:0 8px 28px rgba(43,26,18,.05)}
.csl-perm p{line-height:1.75;margin:0 0 16px}.csl-perm p:last-child{margin-bottom:0}
.csl-perm code{font-size:13px;word-break:break-all}
.csl-perm ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:14px}
.csl-perm li{display:flex;gap:12px;align-items:flex-start;line-height:1.7}
.csl-perm li>span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;margin-top:1px}
.csl-perm .ok{background:#e4f5ea;color:#157347}.csl-perm .no{background:#fbe5e1;color:#b3261e}

/* Bảng giá chỉ có 2 thẻ */
.csl-plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin:0 auto}
.csl-plans.csl-n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.csl-plans.csl-n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
@media (max-width:1100px){.csl-plans.csl-n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.csl-plans,.csl-plans.csl-n3,.csl-plans.csl-n4{grid-template-columns:1fr;max-width:480px}}

/* Cửa sổ đăng ký dùng thử */
.csl-modal{max-width:460px}
.csl-form{display:grid;gap:14px}
.csl-form label{display:block;margin:0}
.csl-form label>span{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--ink,#2b1a12)}
.csl-form input[type=email],.csl-form input[type=tel],.csl-form input[type=text],.csl-form input[type=password]{display:block;width:100%;box-sizing:border-box;height:46px;padding:0 14px;border:1px solid #d9cabb;border-radius:12px;background:#fff;font:inherit;font-size:15px;color:#2b1a12}
.csl-form input:focus{outline:0;border-color:#e2711a;box-shadow:0 0 0 3px rgba(226,113,26,.18)}
.csl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.csl-two{grid-template-columns:1fr}}
.csl-form .csl-agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.csl-form .csl-agree input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:#e2711a}
.csl-form .csl-agree span{display:inline;font-weight:400;margin:0}
.csl-msg{min-height:20px;margin:0;font-weight:600;font-size:14px;line-height:1.5}
.csl-alt{margin:14px 0 0;text-align:center}

/* Giá nằm trên một dòng: số tiền lớn + "/tháng" cùng hàng, không xuống dòng */
.csl-plans .lbp-price{flex-wrap:nowrap;white-space:nowrap;align-items:baseline;gap:6px}
.csl-plans .lbp-price span{font-size:15px;font-weight:600}
.csl-plans.csl-n3 .lbp-price strong{font-size:38px}
.csl-plans.csl-n4 .lbp-plan{padding-left:22px;padding-right:22px}
.csl-plans.csl-n4 .lbp-price strong{font-size:31px}
@media (max-width:1100px){.csl-plans.csl-n4 .lbp-price strong{font-size:40px}.csl-plans.csl-n4 .lbp-plan{padding-left:28px;padding-right:28px}}
@media (max-width:420px){.csl-plans .lbp-price strong{font-size:34px!important}}
.csl-plans .lbp-plan li strong{color:var(--ink);font-weight:800}
/* Mọi thẻ giá cùng độ cao phần đầu (thẻ có nhãn "Miễn phí"/"Phổ biến" và thẻ không nhãn thẳng hàng) */
.csl-plans .lbp-plan,.csl-plans .lbp-plan:has(.lbp-badge){padding-top:48px}
.csl-plans .lbp-plan h3{min-height:0;margin:0}
.csl-plans .lbp-plan .lbp-price{margin-top:14px}
@media (max-width:820px){.csl-plans .lbp-plan,.csl-plans .lbp-plan:has(.lbp-badge){padding-top:46px}}
/* Dấu tick trong thẻ giá: xanh lá, nền tròn nhạt */
.csl-plans .lbp-plan li svg{flex:none;width:18px;height:18px;margin-top:1px;padding:3px;border-radius:50%;background:#dff5ea;color:#0a7a50;stroke-width:3}
.csl-plans .lbp-plan li{align-items:flex-start;gap:10px}
.csl-plans .lbp-plan li.g{font-weight:800;color:#0a7a50}
.csl-plans .lbp-plan li b{font-weight:700;color:var(--ink)}
@media (min-width:1101px){.csl-plans.csl-n4 .lbp-plan{padding-left:20px;padding-right:20px}.csl-plans.csl-n4 .lbp-plan li{font-size:13.5px;gap:8px}.csl-plans.csl-n4 .lbp-plan li svg{width:17px;height:17px}}