/* KINGLUX - kl2/studio.css : nut «Xem mẫu thiết kế» + hop xem mau AZ-Studio (ban 018, 04/11/2026) - bien mau kl2.css */
.kl2-st-btn { margin-top: 10px; }
.kl2-st { position: fixed; inset: 0; z-index: 3100; display: none; align-items: center; justify-content: center; padding: 3vh 16px; box-sizing: border-box; }
.kl2-st.kl2-open { display: flex; }
.kl2-st-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); }
.kl2-st-box { position: relative; width: 100%; max-width: 1180px; max-height: 94vh; display: flex; flex-direction: column; background: var(--kl-panel); color: var(--kl-text);
    border: 1px solid var(--kl-line2); border-radius: var(--kl-r-lg); box-sizing: border-box; overflow: hidden; }
.kl2-st-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px 20px; border-bottom: 1px solid var(--kl-line); }
.kl2-st-top h2 { margin: 0; font: 800 17px var(--kl-font-h); color: var(--kl-text); }
.kl2-st-x { width: 40px; height: 40px; border: 0; background: transparent; color: var(--kl-muted); font-size: 26px; cursor: pointer; border-radius: 10px; }
.kl2-st-x:hover, .kl2-st-x:focus-visible { color: var(--kl-gold); outline: none; background: var(--kl-panel2); }
.kl2-st-body { padding: 16px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.kl2-st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.kl2-st-card { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--kl-panel2); border: 1px solid var(--kl-line2); border-radius: var(--kl-r);
    padding: 0 0 12px; color: var(--kl-text); cursor: pointer; overflow: hidden; }
.kl2-st-card:hover, .kl2-st-card:focus-visible { border-color: var(--kl-gold); outline: none; }
.kl2-st-card img, .kl2-st-noimg { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--kl-bg2); }
.kl2-st-card > span, .kl2-st-card > b { padding: 0 12px; }
.kl2-st-kind { color: var(--kl-gold); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.kl2-st-card b { font-size: 15px; line-height: 1.35; }
.kl2-st-sum { color: var(--kl-muted); font-size: 13px; }
.kl2-st-note { color: var(--kl-faint); font-size: 12px; font-style: italic; margin: 0; }
.kl2-st-back { align-self: flex-start; background: transparent; border: 1px solid var(--kl-line2); color: var(--kl-soft); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.kl2-st-back:hover { border-color: var(--kl-gold); color: var(--kl-gold); }
.kl2-st-frame { position: relative; width: 100%; height: 68vh; background: var(--kl-bg); border: 1px solid var(--kl-line); border-radius: var(--kl-r); overflow: hidden; }
.kl2-st-frame iframe, .kl2-st-frame video { width: 100%; height: 100%; border: 0; display: block; background: var(--kl-bg); }
.kl2-st-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.kl2-st-imgs img { width: 100%; border-radius: 10px; display: block; }
.kl2-st-files { display: flex; flex-wrap: wrap; gap: 8px; }
.kl2-st-dl { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--kl-gold); color: var(--kl-ink) !important; font-weight: 800; text-decoration: none; }
.kl2-st-dl:hover { background: var(--kl-gold2); }
html.kl2-st-lock, html.kl2-st-lock body { overflow: hidden; }
@media (max-width: 640px) {
    .kl2-st { padding: 0; }
    .kl2-st-box { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
    .kl2-st-body { padding: 12px; }
    .kl2-st-frame { height: calc(100dvh - 190px); }
}