/*
 * Landing "catalogue kỹ thuật" — dùng cho trang chủ dạng Page có class .lskt
 *
 * Vì sao CSS nằm ở đây chứ không nằm trong nội dung trang:
 * một số site bật lọc kses (tài khoản không có quyền unfiltered_html) nên thẻ
 * <style> dán vào trang bị xoá sạch lúc lưu. Đặt trong theme thì kses không đụng.
 * Chỉ nạp khi nội dung trang chủ thực sự có class .lskt — xem inc/home-blocks.php.
 */

.lskt{--g:#7a9c59;--g2:#4d6b33;--ink:#14200c;--line:rgba(20,32,12,.16);--muted:rgba(20,32,12,.62);background:#fff;color:var(--ink)}
.lskt *{box-sizing:border-box}
.lskt section{padding:clamp(52px,6vw,88px) 22px}
.lskt .wrap{max-width:1200px;margin:0 auto}

.lskt .lbl{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);font-weight:700;margin:0 0 26px}
.lskt .lbl::before{content:"";width:34px;height:1px;background:var(--g);flex:0 0 auto}
.lskt h1{margin:0;font-size:clamp(34px,4.4vw,62px);line-height:1.1;letter-spacing:-.025em;font-weight:700;max-width:16ch;color:var(--ink)}
.lskt h2{margin:0;font-size:clamp(30px,3.6vw,52px);line-height:1.14;letter-spacing:-.02em;font-weight:700;color:var(--ink);max-width:20ch}
.lskt h3{margin:0 0 8px;font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.lskt h3 a{color:inherit;text-decoration:none}
.lskt h3 a:hover{color:var(--g2)}
.lskt p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.8}

.lskt .btn{display:inline-block;padding:14px 28px;background:var(--g);color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;margin:22px 10px 0 0;border:1px solid var(--g);text-decoration:none}
.lskt .btn:hover{background:var(--g2);border-color:var(--g2);color:#fff}
.lskt .btn.ghost{background:transparent;color:var(--g2);border-color:var(--line)}
.lskt .btn.ghost:hover{background:var(--g);color:#fff;border-color:var(--g)}
.lskt .btn.light{background:#fff;color:var(--g2);border-color:#fff}

/* ── HERO ───────────────────────────────────────── */
.lskt .hero{border-bottom:1px solid var(--line)}
.lskt .hero p{margin-top:22px;max-width:52ch}
.lskt .strip{display:grid;grid-template-columns:1fr;gap:2px;margin-top:44px}
.lskt .strip div{aspect-ratio:4/3;overflow:hidden}
.lskt .strip img{width:100%;height:100%;object-fit:cover;display:block}

/* ── BẢNG CHỈ MỤC DANH MỤC ──────────────────────── */
.lskt .idx{border-top:1px solid var(--line);margin-top:38px}
.lskt .row{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:background .15s}
.lskt .row:hover{background:#f4f8f0}
.lskt .row .n{font-size:13px;font-weight:700;color:var(--g);letter-spacing:.14em}
.lskt .row .th{width:100%;max-width:150px;aspect-ratio:4/3;overflow:hidden;background:#eef4e9}
.lskt .row .th img{width:100%;height:100%;object-fit:cover;display:block}
.lskt .row .qty{font-size:13px;color:var(--muted);letter-spacing:.06em;white-space:nowrap}
.lskt .row .go a{display:inline-grid;place-items:center;width:44px;height:44px;font-size:20px;color:var(--g);font-weight:700;text-decoration:none;border:1px solid var(--line)}
.lskt .row:hover .go a{background:var(--g);color:#fff;border-color:var(--g)}

/* ── QUY TRÌNH ĐÁNH SỐ ──────────────────────────── */
.lskt .steps{margin-top:38px;border-top:1px solid var(--line)}
.lskt .step{display:grid;grid-template-columns:1fr;gap:10px;padding:26px 0;border-bottom:1px solid var(--line)}
.lskt .step .big{font-size:clamp(38px,4vw,58px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--g);letter-spacing:-.04em}

/* ── KHỐI XANH ĐẶC ──────────────────────────────── */
.lskt .solid{background:var(--g);color:#fff}
.lskt .solid h1,.lskt .solid h2,.lskt .solid h3{color:#fff}
.lskt .solid p{color:rgba(255,255,255,.88)}
.lskt .solid .lbl{color:rgba(255,255,255,.85)}
.lskt .solid .lbl::before{background:rgba(255,255,255,.7)}
.lskt .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.25);margin-top:38px}
.lskt .stat{background:var(--g);padding:26px 20px}
.lskt .stat b{display:block;font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.lskt .stat p{margin-top:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85)}

/* ── DỊCH VỤ: HÀNG SO LE ────────────────────────── */
.lskt .bands{margin-top:34px;border-top:1px solid var(--line)}
.lskt .band{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line)}
.lskt .band .pic{aspect-ratio:16/9;overflow:hidden;background:#eef4e9}
.lskt .band .pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ── TESTIMONIAL ────────────────────────────────── */
.lskt .quote{border:1px solid var(--line);padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:1fr;gap:26px;align-items:center;margin-top:34px}
.lskt .quote img{width:110px;height:110px;object-fit:cover;display:block}
.lskt .quote .say{font-size:clamp(18px,2vw,25px);line-height:1.55;color:var(--ink);font-weight:600;letter-spacing:-.015em}
.lskt .quote .who{margin-top:16px;font-weight:700;color:var(--g2);font-size:14px;letter-spacing:.06em;text-transform:uppercase}

@media(min-width:880px){
    .lskt .hero{padding-top:clamp(60px,7vw,110px)}
    .lskt .strip{grid-template-columns:repeat(3,1fr)}
    .lskt .row{grid-template-columns:64px 150px 1fr 130px 60px;gap:28px}
    .lskt .step{grid-template-columns:120px 1fr 1.1fr;gap:34px;align-items:start}
    .lskt .stats{grid-template-columns:repeat(4,1fr)}
    .lskt .band{grid-template-columns:1fr 1fr;gap:54px}
    .lskt .band.flip .pic{order:2}
    .lskt .quote{grid-template-columns:150px 1fr;gap:44px}
}