/*
 * Landing "bảng tra cứu" (directory) — dùng cho trang chủ có class .lskx
 *
 * Dành cho site có kho dữ liệu phân loại lớn: taxonomy ngành nghề, địa điểm…
 * Trang chủ đóng vai trò mục lục tra cứu thay vì trang giới thiệu.
 * Cố ý khác ba landing kia:
 *   .lssk  biên tập, chữ rất lớn      .lskt  catalogue, hàng kẻ ngang
 *   .lskd  nền tối, dẫn bằng video    .lskx  dày đặc, dạng chip + số liệu
 *
 * Khối .lskx-index do shortcode [lssk_tax_index] sinh ra (inc/home-blocks.php),
 * nên style của nó nằm ngoài .lskx để dùng lại được ở trang khác.
 */

.lskx{--t:#0e6e63;--t2:#0a544b;--ink:#101a18;--bg:#f7faf9;--line:rgba(14,110,99,.18);--muted:rgba(16,26,24,.66);background:#fff;color:var(--ink)}
.lskx *{box-sizing:border-box}
.lskx section{padding:clamp(48px,5.5vw,84px) 22px}
.lskx .wrap{max-width:1200px;margin:0 auto}
.lskx .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--t);font-weight:800;margin:0 0 16px}
.lskx h1{margin:0;font-size:clamp(30px,3.8vw,54px);line-height:1.08;letter-spacing:-.025em;font-weight:800;max-width:20ch}
.lskx h2{margin:0;font-size:clamp(24px,2.8vw,38px);line-height:1.14;letter-spacing:-.02em;font-weight:800;max-width:24ch}
.lskx h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.lskx p{margin:0;color:var(--muted);font-size:16px;line-height:1.8}
.lskx .lead{margin-top:18px;max-width:60ch}
.lskx .btn{display:inline-block;padding:14px 28px;background:var(--t);color:#fff;font-weight:700;font-size:15px;text-decoration:none;border:1px solid var(--t);margin:22px 10px 0 0;border-radius:4px}
.lskx .btn:hover{background:var(--t2);border-color:var(--t2);color:#fff}
.lskx .btn.ghost{background:transparent;color:var(--t2);border-color:var(--line)}
.lskx .btn.ghost:hover{background:var(--t);color:#fff;border-color:var(--t)}

/* dải số liệu */
.lskx .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.lskx .fact{background:#fff;padding:24px 20px}
.lskx .fact b{display:block;font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--t)}
.lskx .fact span{display:block;margin-top:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.lskx .tint{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* hai thẻ công cụ */
.lskx .tools{display:grid;grid-template-columns:1fr;gap:18px;margin-top:32px}
.lskx .tool{border:1px solid var(--line);border-radius:6px;padding:28px;background:#fff}
.lskx .tool:hover{border-color:var(--t)}
.lskx .tool .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--t);font-weight:800;margin-bottom:14px}
.lskx .tool .go{display:inline-block;margin-top:18px;font-weight:800;color:var(--t);text-decoration:none}
.lskx .tool .go:hover{color:var(--t2)}

/* ── Khối do [lssk_tax_index] sinh ra ───────────── */
.lskx-index{max-width:1200px;margin:0 auto;padding:clamp(44px,5vw,76px) 22px}
.lskx-head h2{margin:0 0 10px;font-size:clamp(24px,2.8vw,38px);line-height:1.14;letter-spacing:-.02em;font-weight:800;color:#101a18}
.lskx-head p{margin:0 0 26px;color:rgba(16,26,24,.66);font-size:16px;line-height:1.8;max-width:60ch}
.lskx-chips{display:flex;flex-wrap:wrap;gap:10px}
.lskx-chip{display:inline-flex;align-items:baseline;gap:9px;padding:10px 15px;border:1px solid rgba(14,110,99,.18);border-radius:999px;text-decoration:none;color:#101a18;font-size:15px;font-weight:600;line-height:1;background:#fff;transition:background .15s,border-color .15s,color .15s}
.lskx-chip:hover{background:#0e6e63;border-color:#0e6e63;color:#fff}
.lskx-name{white-space:nowrap}
.lskx-num{font-size:12px;font-weight:800;color:#0e6e63;letter-spacing:.02em}
.lskx-chip:hover .lskx-num{color:rgba(255,255,255,.92)}

@media(min-width:880px){
    .lskx .facts{grid-template-columns:repeat(4,1fr)}
    .lskx .tools{grid-template-columns:1fr 1fr;gap:22px}
}

/* ── Khối nhúng do [lssk_embed] sinh ra ─────────── */
.lskx .media{margin-top:30px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#0b1211}
.lskx .media .lssk-embed{display:block}
.lskx .duo-media{display:grid;grid-template-columns:1fr;gap:22px;margin-top:30px}
.lskx .duo-media > div{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#0b1211}
.lskx .cap{padding:16px 18px;background:#fff;border-top:1px solid var(--line)}
.lskx .cap b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px}
.lskx .cap span{font-size:13.5px;color:var(--muted)}
@media(min-width:880px){ .lskx .duo-media{grid-template-columns:1fr 1fr} }

/* bare = bỏ khung: dùng khi [lssk_embed bare="1"] */
.lskx .media:has(.lssk-embed--bare){border:0;border-radius:0;background:transparent}
.lskx .duo-media > div:has(.lssk-embed--bare){border:0;border-radius:0;background:transparent}
.lskx .duo-media > div:has(.lssk-embed--bare) .cap{border-top:0;padding-left:0;padding-right:0}
/* cách bám class trực tiếp — chạy trên mọi trình duyệt, không phụ thuộc :has() */
.lskx .media.bare{border:0;border-radius:0;background:transparent}
.lskx .duo-media > div.bare{border:0;border-radius:0;background:transparent}
.lskx .duo-media > div.bare .cap{border-top:0;padding-left:0;padding-right:0}