/*
 * Bổ sung cho trang sản phẩm đơn (single-san-pham.php):
 *   .lssk-sp-shortdesc          mô tả ngắn đầu buy-box, giống bố cục WooCommerce
 *   .lssk-sp-spec-grid          lưới ảnh — tab riêng "Hình ảnh sản phẩm"
 *   .lssk-sp-spec-model__frame  khung nhúng — tab riêng "Mô hình 3D"
 *
 * Hai khối sau là TAB RIÊNG, không nằm trong tab Thông số kỹ thuật.
 */

.lssk-sp-shortdesc{
    margin:14px 0 18px;
    padding:14px 16px;
    background:#f6f9f4;
    border-left:3px solid var(--c-accent,#82b735);
    border-radius:6px;
}
.lssk-sp-shortdesc p{margin:0 0 8px;font-size:15.5px;line-height:1.75}
.lssk-sp-shortdesc p:last-child{margin-bottom:0}

.lssk-sp-spec-media{margin-top:34px}
.lssk-sp-tab-panel > .lssk-sp-spec-grid,
.lssk-sp-tab-panel > .lssk-sp-spec-model__frame{margin-top:4px}
.lssk-sp-spec-media__title{
    display:flex;align-items:center;gap:10px;
    margin:0 0 16px;font-size:19px;font-weight:700;
}
.lssk-sp-spec-media__title i{color:var(--c-accent,#82b735)}

.lssk-sp-spec-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:12px;
}
.lssk-sp-spec-grid a{
    display:block;border:1px solid #e2e9df;border-radius:8px;overflow:hidden;
    transition:border-color .15s;
}
.lssk-sp-spec-grid a:hover{border-color:var(--c-accent,#82b735)}
.lssk-sp-spec-grid img{
    width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
}

.lssk-sp-spec-model__frame{
    border:1px solid #e2e9df;border-radius:10px;overflow:hidden;background:#0b1211;
}
.lssk-sp-spec-model__frame iframe{display:block;width:100%;border:0}

/* Ô ảnh trong tab "Hình ảnh sản phẩm" — bấm mở lightbox của theme */
.lssk-sp-spec-grid a{position:relative}
.lssk-sp-spec-item{cursor:zoom-in}
.lssk-sp-spec-zoom{
    position:absolute;right:8px;bottom:8px;
    width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;
    background:rgba(16,34,25,.62);color:#fff;font-size:13px;
    opacity:0;transition:opacity .15s;pointer-events:none;
}
.lssk-sp-spec-item:hover .lssk-sp-spec-zoom{opacity:1}

/* ── Bảng thông số soạn tự do (ô ACF `catalogue`) ──────────────────────
   Người biên tập dán bảng vào trình soạn thảo nên markup không có class.
   Style phải bám theo thẻ, và không được dùng <style> trong nội dung vì
   kses sẽ xoá. Bảng rộng thì cuộn ngang trong khung, không đẩy vỡ trang. */
.lssk-sp-specs-free{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    font-size:15px;
    line-height:1.7;
}
.lssk-sp-specs-free > *:first-child{margin-top:0}
.lssk-sp-specs-free > *:last-child{margin-bottom:0}
.lssk-sp-specs-free table{
    width:100%;
    min-width:520px;
    border-collapse:collapse;
    font-size:14.5px;
    margin:0 0 14px;
}
.lssk-sp-specs-free th,
.lssk-sp-specs-free td{
    padding:9px 12px;
    border:1px solid var(--c-border,#e2e9df);
    vertical-align:top;
    text-align:left;
}
.lssk-sp-specs-free thead th,
.lssk-sp-specs-free tr:first-child th{
    background:#f2f7ee;
    font-weight:700;
    white-space:nowrap;
}
.lssk-sp-specs-free tbody tr:nth-child(even) td{background:#fafcf8}
.lssk-sp-specs-free tbody tr:hover td{background:#f0faf5}
/* Cột đầu là tên chỉ tiêu — giữ đậm dù người dán dùng <td> thay vì <th> */
.lssk-sp-specs-free tbody td:first-child{font-weight:600}
.lssk-sp-specs-free ul,
.lssk-sp-specs-free ol{margin:0 0 14px;padding-left:22px}
.lssk-sp-specs-free li{margin-bottom:6px}
.lssk-sp-specs-free img{max-width:100%;height:auto}

@media (max-width:640px){
    .lssk-sp-specs-free{font-size:14.5px}
    .lssk-sp-specs-free table{min-width:460px}
}

/* ── Trang sản phẩm: 2 cột nội dung | sidebar (giống trang bài viết) ──
   .lssk-content-layout đã lo phần khung 1fr | 300px và các mốc responsive.
   Ở đây chỉ xử lý hệ quả: cột nội dung hẹp đi ~350px nên lưới trong nó
   (gallery | buy-box) phải xuống hàng sớm hơn, nếu không buy-box bị bóp.
   Dùng !important vì luật gốc trong style.min.css cũng đang !important. */
.lssk-sp-content-layout .lssk-sp-single-layout{margin-bottom:40px}

@media (max-width:1200px){
    .lssk-sp-content-layout .lssk-sp-single-layout{
        grid-template-columns:1fr !important;
        gap:28px !important;
    }
    /* Hết chia cột thì bỏ dính, nếu không gallery treo lơ lửng giữa trang */
    .lssk-sp-content-layout .lssk-sp-single__gallery{position:static}
}