/*
 * Trang danh mục năng lực 3D — [lsk_3d_catalog].
 *
 * Ba cột trên máy tính: sản phẩm + bộ phận | viewer | thông số.
 *
 * Cột trái gánh HAI danh sách chứ không chỉ danh sách sản phẩm. Đó là quyết định có chủ
 * ý (docs/adr/0004): dải sản phẩm hiện mới có hai mục, một cột dọc chỉ hai dòng sẽ trống
 * hoác. Gộp thêm danh sách Bộ phận thì cột luôn đầy, và công cụ ẩn/hiện nằm ngay trước
 * mắt thay vì giấu sau một nút.
 */

/*
 * NỀN NẰM Ở TỪNG THẺ, KHÔNG Ở KHỐI BAO NGOÀI.
 *
 * Bản trước đặt nền cho cả khối để không ăn theo theme. Cách đó ra kết quả ổn định thật,
 * nhưng kèm padding và bo góc — và chính padding đó làm lưới cột lệch hẳn so với
 * [lsk_3d_configurators] khi hai khối nằm chung một trang. Nay nền do hai cột bên và các
 * thẻ con tự mang (--lsk-cat-panel), nên vẫn không phụ thuộc theme mà cạnh thì trùng khớp.
 *
 * Bảng màu SÁNG, đồng bộ với [lsk_3d_configurators]: chữ tối trên thẻ trắng, đúng cả khi
 * theme nền trắng. Khung 3D thì lấy nền từ Catalog Settings → Stage, cùng một màu với nền
 * Sketchfab của configurator.
 */
.lsk-cat {
    /* Giá trị dự phòng. Trang thật in đè bằng bảng màu trong 3D Labs → Catalog Settings. */
    --lsk-cat-bg: #f2f5f8;
    --lsk-cat-panel: #ffffff;
    --lsk-cat-text: #1e1e1e;
    --lsk-cat-muted: #5a6169;
    --lsk-cat-accent: #116d96;
    --lsk-cat-vien: #e1e4e8;
    /* Nền sau vật thể 3D. three.js sơn canvas bằng đúng màu này; biến ở đây chỉ để lúc
       chưa nạp xong model thì ô trống không loé lên một màu khác. */
    --lsk-cat-stage: #91c03e;
    /* Bo góc của MỌI thẻ trong hai khối. Cùng một con số ở catalog.css và configurator.css
       thì hai khối cạnh nhau mới ra cùng một bộ. Trước đây: thẻ 12px, khung 3D 18px, còn
       configurator 10px — ba con số cho một trang. */
    --lsk-cat-bo: 10px;

    /* Các mảng phụ, tách thành biến để lật tông chỉ còn là đổi giá trị ở một chỗ. */
    --lsk-cat-o-nhap: #fff;
    --lsk-cat-o-trong: #eef1f4;
    --lsk-cat-noi: #f7f9fa;
    --lsk-cat-di-qua: #f0f6fa;
    --lsk-cat-dang-chon: #e8f4fa;
    --lsk-cat-vien-chon: #116d96;
    --lsk-cat-vien-manh: #b9c2cb;

    display: grid;
    /*
     * ⚠️ BA SỐ NÀY PHẢI GIỐNG HỆT .lsk-cfg.has-products trong configurator.css.
     *
     * Hai khối nằm chồng nhau trên cùng một trang. Đo trên trang thật khi chúng còn lệch:
     * catalog 260/572/320 gap 12, configurator 220/620/320 gap 20 — mép trái cột giữa
     * lệch 44px, mép phải cột trái lệch 52px. Không cạnh nào trùng nhau ngoài mép ngoài
     * cùng, và mắt đọc ra hai thành phần của hai trang khác nhau.
     *
     * Catalog theo configurator chứ không ngược lại: khung nhúng Sketchfab không co giãn
     * tự do được như canvas three.js, nên bên nào cứng hơn thì bên đó đặt luật.
     */
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    /*
     * minmax(0, 1fr) là mấu chốt, không phải trang trí.
     *
     * Hàng của lưới mặc định là `auto`, tức tự co theo nội dung — nên dù .lsk-cat có
     * chiều cao xác định, hàng vẫn phồng theo cột nào dài nhất rồi TRÀN ra ngoài. Đo được:
     * đặt khối cao 520px thì cột trái vẫn cao 669px, và max-height: 100% trên cột không
     * cứu được vì 100% đang tính theo cái hàng đã phồng.
     *
     * minmax(0, 1fr) ép hàng đúng bằng chiều cao còn lại. Số 0 ở cận dưới cho phép hàng
     * nhỏ hơn nội dung — thiếu nó thì `1fr` vẫn lấy min-content làm sàn và mọi thứ y như cũ.
     */
    grid-template-rows: minmax(0, 1fr);
    box-sizing: border-box;
    gap: 20px;
    /* stretch chứ không phải start: ba cột phải cao bằng nhau thì viewer mới lấp đầy
       chiều cao còn lại. Để start thì ô lưới co theo nội dung và viewer tụt về min-height. */
    align-items: stretch;
    /*
     * KHÔNG padding, KHÔNG nền bao ngoài.
     *
     * Lớp bọc cũ (padding 12, nền --lsk-cat-bg, bo 16) chính là nguồn của lệch: nó đẩy
     * nội dung vào 12px và ăn mất 24px bề ngang, nên lưới ba cột chia ra khác configurator
     * dù cùng bề rộng khối. Bỏ nó thì mọi cạnh của hai khối trùng nhau đúng từng pixel.
     *
     * --lsk-cat-bg vẫn còn dùng: nó là màu CHỮ của nút chính (.lsk-cat-btn.is-primary),
     * in đè từ Catalog Settings. Bỏ nền không làm biến đó thành vô dụng.
     */
    color: var(--lsk-cat-text);
    font-size: 15px;
    line-height: 1.55;
}

/*
 * ⚠️ VÌ SAO CÁC LUẬT MÀU Ở ĐÂY DÙNG !important
 *
 * Theme đặt màu chữ bằng luật rất mạnh. Đo trên site thật:
 *
 *     body:not(.home) #main h1, … #main h3, … { color: rgb(20,43,35) }
 *
 * Độ ưu tiên (1,1,2) — có selector ID. Không luật nào viết bằng class thắng nổi, kể cả
 * :where() hay nhân đôi class. Hậu quả: tiêu đề và nhãn bị nhuộm xanh đen rồi chìm nghỉm
 * trên nền tối.
 *
 * Khối này là một ứng dụng nhúng, không phải nội dung bài viết — màu chữ toàn cục của
 * theme không có việc gì bên trong nó. Nên !important ở đây là đúng phạm vi, không phải
 * cách chữa cháy.
 *
 * Vẫn giữ được phân cấp màu: giữa các khai báo !important thì ĐỘ ƯU TIÊN vẫn quyết định,
 * nên .lsk-cat .lsk-cat-block-title (0,2,0) thắng .lsk-cat :where(...) (0,1,0).
 */
.lsk-cat :where(h2, h3, p, li, td, th, strong, em, span, button, label, a) {
    color: inherit !important;
}

/*
 * ⚠️ LỚP PHỦ CỦA VIEWER PHẢI ĐƯỢC CHỪA RA khỏi luật quét ngay trên.
 *
 * Tiêu đề model, ba nút công cụ và nhãn "3D Lab" nằm TRÊN mặt 3D, không nằm trên thẻ
 * trắng — chúng vốn là chữ sáng. Luật quét bắt chúng inherit --lsk-cat-text (chữ tối) nên
 * thành tối trên nền tối. Đo được: nút công cụ 1,08 và tiêu đề 1,07, dưới ngưỡng 4,5 rất xa.
 *
 * Bình thường không thấy vì style.css để lớp phủ ở opacity 0.02, nhưng RÊ CHUỘT vào khung
 * là nó hiện đủ — tức là hỏng thật, chỉ khó gặp.
 *
 * (0,2,0) thắng (0,1,0) của luật quét, và giữa các !important thì độ ưu tiên vẫn quyết định.
 */
.lsk-cat .lsk-lab-viewer :where(h2, h3, p, span, strong, button, label, a) {
    color: rgba(255, 255, 255, 0.9) !important;
}

.lsk-cat .lsk-lab-viewer :where(.lsk-lab-hint, .lsk-lab-info-description, .lsk-lab-loading-text) {
    color: var(--lsk-lab-muted, rgba(255, 255, 255, 0.68)) !important;
}

/*
 * Nút AR là NGOẠI LỆ của luật chữ sáng ngay trên: nền của nó là màu nhấn rất sáng
 * (#00b4ff), nên style.css cố ý cho nó chữ gần đen. Quét chữ trắng lên đó thì tương phản
 * rơi xuống 2,34 — tệ hơn cả trước khi sửa. Đo lại sau khi trả về #04121c: 7,0.
 *
 * (0,3,0) thắng (0,2,0), nên chỉ cần thêm một tầng class là đủ, không cần :not().
 */
.lsk-cat .lsk-lab-viewer .lsk-lab-ar-btn,
.lsk-cat .lsk-lab-viewer .lsk-lab-ar-btn:hover {
    color: #04121c !important;
}

.lsk-cat a { text-decoration: none; }

/*
 * GỌN TRONG MỘT MÀN HÌNH.
 *
 * Vấn đề thật: danh sách Bộ phận dài ngắn tuỳ sản phẩm, và cột phải dài theo số dòng
 * thông số. Cột nào dài nhất sẽ kéo cả khối cao lên, đẩy viewer ra khỏi tầm nhìn — mà
 * viewer chính là thứ người xem cần nhìn khi bấm vào bất cứ nút nào ở hai cột bên.
 *
 * Cách chữa: khoá chiều cao cả khối theo chiều cao cửa sổ, rồi cho HAI CỘT BÊN tự cuộn
 * bên trong. Cuộn nội bộ giữ viewer đứng yên; cuộn cả trang thì không.
 */
.lsk-cat {
    /*
     * Chiều cao XÁC ĐỊNH, không phải max-height.
     *
     * max-height chỉ đặt trần; ô lưới vẫn co theo nội dung nên viewer tụt về min-height.
     * Phải có chiều cao thật thì phần còn lại sau thanh mặt cắt mới thuộc về viewer.
     *
     * clamp giữ hai đầu: màn hình thấp thì tối thiểu 540px để viewer còn dùng được, màn
     * hình rất cao thì dừng ở 880px thay vì kéo dài lê thê. Trừ 110px cho thanh điều
     * hướng của theme phía trên.
     */
    height: clamp(540px, calc(100vh - 110px), 880px);
}

.lsk-cat .lsk-cat-side,
.lsk-cat .lsk-cat-info {
    background: var(--lsk-cat-panel);
    border: 1px solid var(--lsk-cat-vien);
    border-radius: var(--lsk-cat-bo);
    padding: 12px;
    max-height: 100%;
    overscroll-behavior: contain;
}

.lsk-cat .lsk-cat-info { overflow-y: auto; }

/*
 * HAI VÙNG CUỘN RIÊNG cho Sản phẩm và Bộ phận.
 *
 * Trước đây cả cột trái là MỘT vùng cuộn chung. Hậu quả đo được trên site thật: danh sách
 * Sản phẩm đẩy danh sách Bộ phận xuống tận y = 874 trong khi cột chỉ cao 754px — các ô
 * tích nằm ngoài mép, người dùng báo "bấm không được". Chúng không hỏng, chỉ là không với
 * tới được.
 *
 * Tách ra thì mỗi danh sách cuộn trong phần của nó, và HAI TIÊU ĐỀ luôn đứng yên nên
 * người xem luôn biết mình đang ở đâu. Cột ngoài không cuộn nữa (overflow: hidden).
 */
.lsk-cat .lsk-cat-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* auto chứ không hidden: hidden thì trên màn hình rất thấp phần dưới bị CẮT MẤT và
       không cách nào với tới. Có hai vùng cuộn bên trong rồi nên cột ngoài gần như không
       bao giờ phải cuộn — đây chỉ là lưới an toàn. */
    overflow-y: auto;
}

.lsk-cat .lsk-cat-block {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/*
 * SẢN PHẨM được ưu tiên chiều cao, BỘ PHẬN bị giới hạn.
 *
 * Bản trước làm ngược: Bộ phận lấy phần còn lại, Sản phẩm bị chặn ở 42%. Sai thứ tự ưu
 * tiên — Sản phẩm là thứ khách bấm liên tục để so sánh, còn Bộ phận là công cụ thỉnh
 * thoảng mới mở ra nhìn vào trong. Nay Bộ phận chặn ở 34% và tự cuộn trong phần đó.
 *
 * ⚠️ min-height là BẮT BUỘC ở cả hai. Không có nó thì trên màn hình thấp, flex co khối
 * về gần bằng không — đo được 16px, tức chỉ còn cái tiêu đề, danh sách biến mất hoàn toàn.
 */
.lsk-cat .lsk-cat-products-block { flex: 1 1 auto; min-height: 120px; }
.lsk-cat .lsk-cat-parts-block { flex: 0 1 auto; max-height: 34%; min-height: 92px; }

.lsk-cat .lsk-cat-products,
.lsk-cat .lsk-cat-parts {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

/* Thanh cuộn mảnh, theo tông của khối — thanh cuộn mặc định của trình duyệt trên nền tối
   trông như một vệt sáng cắt ngang. */
.lsk-cat .lsk-cat-products,
.lsk-cat .lsk-cat-parts,
.lsk-cat .lsk-cat-info {
    scrollbar-width: thin;
    scrollbar-color: var(--lsk-cat-vien) transparent;
}

.lsk-cat .lsk-cat-products::-webkit-scrollbar,
.lsk-cat .lsk-cat-parts::-webkit-scrollbar,
.lsk-cat .lsk-cat-info::-webkit-scrollbar { width: 8px; }

.lsk-cat .lsk-cat-products::-webkit-scrollbar-thumb,
.lsk-cat .lsk-cat-parts::-webkit-scrollbar-thumb,
.lsk-cat .lsk-cat-info::-webkit-scrollbar-thumb {
    background: var(--lsk-cat-vien);
    border-radius: 4px;
}

/* ── Ô tìm kiếm ─────────────────────────────────────────────────────────────────── */

.lsk-cat .lsk-cat-search {
    width: 100%;
    margin-bottom: 8px;
    padding: 7px 10px;
    border: 1px solid var(--lsk-cat-vien);
    border-radius: 8px;
    background: var(--lsk-cat-o-nhap);
    color: var(--lsk-cat-text) !important;
    font-size: 13px;
}

.lsk-cat .lsk-cat-search::placeholder { color: var(--lsk-cat-muted); }
.lsk-cat .lsk-cat-search:focus { outline: none; border-color: var(--lsk-cat-accent); }

.lsk-cat .lsk-cat-khong-thay {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--lsk-cat-muted) !important;
}

.lsk-cat .lsk-cat-block-title {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lsk-cat-muted) !important;
}

.lsk-cat .lsk-cat-hint {
    margin: -4px 0 10px;
    font-size: 12.5px;
    color: var(--lsk-cat-muted) !important;
}

/* ── Danh sách sản phẩm ─────────────────────────────────────────────────────────── */

.lsk-cat-products { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }

.lsk-cat-product {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.lsk-cat-product:hover { background: var(--lsk-cat-di-qua); }

.lsk-cat-product.is-active {
    background: var(--lsk-cat-dang-chon);
    border-color: var(--lsk-cat-vien-chon);
}

.lsk-cat-thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 7px;
    background-color: transparent;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.lsk-cat-product-text { display: flex; flex-direction: column; min-width: 0; }
.lsk-cat .lsk-cat-product-text strong { font-size: 14px; font-weight: 600; }
.lsk-cat .lsk-cat-product-text em {
    font-size: 12px;
    font-style: normal;
    color: var(--lsk-cat-muted) !important;
}

/* ── Bộ phận ────────────────────────────────────────────────────────────────────── */

.lsk-cat-parts { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }

.lsk-cat-parts label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.lsk-cat-parts label:hover { background: var(--lsk-cat-di-qua); }
.lsk-cat-parts input { margin: 0; accent-color: var(--lsk-cat-accent); }

.lsk-cat .lsk-cat-parts-reset {
    margin-top: 10px;
    padding: 6px 12px;
    border: 1px solid var(--lsk-cat-vien);
    border-radius: 8px;
    background: transparent;
    color: var(--lsk-cat-muted) !important;
    font-size: 12.5px;
    cursor: pointer;
}

.lsk-cat .lsk-cat-parts-reset:hover {
    border-color: var(--lsk-cat-vien-manh);
    color: var(--lsk-cat-text) !important;
}

/* ── Mặt cắt ────────────────────────────────────────────────────────────────────────
 *
 * Thanh này nằm NGAY DƯỚI viewer, không nằm trong cột trái. Cột trái còn gánh danh sách
 * Bộ phận, mà danh sách đó dài ngắn tuỳ sản phẩm — model nhiều vật liệu sẽ đẩy thanh
 * trượt xuống tận đáy, xa hẳn vật thể mà nó đang cắt. Kéo thanh trượt là thao tác phải
 * nhìn kết quả ngay, nên nó phải ở cạnh vật thể.
 */

/*
 * flex-wrap là bắt buộc, không phải để cho đẹp.
 *
 * Cột giữa chỉ rộng khoảng 590px trên khung 1240px của theme. Nhãn + bốn nút trục đã ăn
 * hơn 450px, thanh trượt lại có min-width — cộng lại vượt quá bề rộng và TRÀN RA NGOÀI
 * thẻ. Cho xuống dòng thì thanh trượt tự chiếm trọn hàng dưới.
 */
.lsk-cat .lsk-cat-section-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid var(--lsk-cat-vien);
    border-radius: 10px;
    background: var(--lsk-cat-panel);
}

.lsk-cat .lsk-cat-section-bar[hidden] { display: none; }

.lsk-cat .lsk-cat-section-label {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lsk-cat-muted) !important;
}

.lsk-cat-axis { display: flex; flex: 0 1 auto; gap: 4px; }

.lsk-cat .lsk-cat-axis button {
    padding: 6px 10px;
    white-space: nowrap;
    border: 1px solid var(--lsk-cat-vien);
    border-radius: 7px;
    background: transparent;
    color: var(--lsk-cat-muted) !important;
    font-size: 12px;
    cursor: pointer;
}

.lsk-cat .lsk-cat-axis button.is-active {
    background: var(--lsk-cat-dang-chon);
    border-color: var(--lsk-cat-vien-chon);
    color: var(--lsk-cat-text) !important;
}

/* flex-basis 100% đẩy thanh trượt xuống hàng riêng khi hàng trên đã chật, thay vì chen
   vào rồi tràn. Còn chỗ thì nó nằm cùng hàng nhờ flex-shrink. */
.lsk-cat-slider { flex: 1 1 200px; min-width: 0; accent-color: var(--lsk-cat-accent); }
.lsk-cat-slider:disabled { opacity: 0.4; }

.lsk-cat .lsk-cat-xoay {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--lsk-cat-vien);
    border-radius: 7px;
    background: transparent;
    color: var(--lsk-cat-muted) !important;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.lsk-cat .lsk-cat-xoay.is-active {
    background: var(--lsk-cat-dang-chon);
    border-color: var(--lsk-cat-vien-chon);
    color: var(--lsk-cat-text) !important;
}

/* ── Sân khấu ───────────────────────────────────────────────────────────────────── */

/*
 * Sân khấu co giãn theo chiều cao còn lại, thanh mặt cắt bám đáy.
 *
 * ⚠️ height: 100% !important là BẮT BUỘC, không phải ẩu. Chiều cao viewer do admin đặt
 * và được in thành style="height: 620px" NGAY TRÊN THẺ. Kiểu nội tuyến thắng mọi file
 * CSS, nên chỉ !important mới đè được. Con số 620px vẫn đúng cho trang sản phẩm — ở đó
 * viewer đứng một mình; chỉ trong trang danh mục nó mới phải nhường chỗ cho hai cột bên.
 */
.lsk-cat .lsk-cat-stage {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
}

.lsk-cat .lsk-cat-pane {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    /* ⚠️ Biến --lsk-cat-stage KHÔNG liên quan tới class .lsk-cat-stage ở trên. Biến là màu
       nền 3D lấy từ Catalog Settings; class là cột giữa. Trùng chữ, khác việc. */
    background: var(--lsk-cat-stage);
    /*
     * ⚠️ BO GÓC PHẢI ĐI KÈM CÁI NỀN NGAY TRÊN, đừng tách hai dòng này ra.
     *
     * Ô này nằm NGAY DƯỚI khung 3D và trùng khít từng pixel. Sơn nền mà để góc vuông thì
     * bốn góc bo của khung 3D bị lấp lại — nhìn ra một hộp góc vuông. Thử bằng cách đổi nền
     * ô này sang đỏ: đỏ hiện đúng ở bốn góc.
     */
    border-radius: var(--lsk-cat-bo);
    overflow: hidden;
}

/*
 * Khung 3D theo bo góc CHUNG, không giữ 18px của style.css.
 *
 * 18px là cỡ dành cho trang sản phẩm, ở đó viewer đứng một mình. Trong trang danh mục nó
 * nằm cạnh configurator vốn bo 10px — hai khung 3D trên cùng một trang, hai kiểu bo góc.
 */
.lsk-cat .lsk-lab-viewer {
    border-radius: var(--lsk-cat-bo);
}

.lsk-cat .lsk-lab-wrapper,
.lsk-cat .lsk-lab-shell,
.lsk-cat .lsk-lab-stage {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.lsk-cat .lsk-lab-viewer {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 300px;
}

.lsk-cat-pane[hidden] { display: none; }

/* ── Cột phải ───────────────────────────────────────────────────────────────────── */

/* Cột phải bị nén lại: khoảng cách giữa các khối từ 18px xuống 10px, dòng bảng thông số
   từ 7px xuống 5px. Người dùng phản ánh phải kéo lên kéo xuống giữa Sản phẩm, Bộ phận và
   Điểm nổi bật — chúng ở quá xa nhau. */
.lsk-cat .lsk-cat-title { margin: 0 0 2px; font-size: 19px; line-height: 1.25; }
.lsk-cat .lsk-cat-variant {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--lsk-cat-accent) !important;
}
.lsk-cat .lsk-cat-desc { margin: 0 0 12px; font-size: 13.5px; }

.lsk-cat-specs { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }

.lsk-cat-specs th,
.lsk-cat-specs td {
    padding: 5px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--lsk-cat-vien);
}

/* Nhãn cố tình mờ hơn giá trị, để mắt bắt vào CON SỐ trước. Cả hai đều cần !important:
   luật reset ở đầu file cũng dùng !important, và giữa các khai báo !important thì độ ưu
   tiên mới quyết định — (0,2,0) ở đây thắng (0,1,0) của reset. */
.lsk-cat .lsk-cat-specs th {
    width: 42%;
    font-weight: 500;
    padding-right: 10px;
    color: var(--lsk-cat-muted) !important;
}
.lsk-cat .lsk-cat-specs td { color: var(--lsk-cat-text) !important; }

.lsk-cat-spots { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 3px; }

.lsk-cat-spot {
    display: block;
    width: 100%;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--lsk-cat-noi);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.lsk-cat-spot:hover { border-color: var(--lsk-cat-vien-chon); background: var(--lsk-cat-di-qua); }
.lsk-cat .lsk-cat-spot strong { display: block; font-size: 13.5px; font-weight: 600; }
.lsk-cat .lsk-cat-spot span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--lsk-cat-muted) !important;
}

.lsk-cat-actions { display: grid; gap: 6px; margin-bottom: 12px; }

.lsk-cat-btn {
    display: block;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

/* Nút chính lấy nền là màu nhấn, nên chữ phải là màu NỀN của khối để luôn tương phản —
   người quản trị đổi màu nhấn sang tông sáng thì chữ tự tối theo, không phải chỉnh thêm. */
.lsk-cat .lsk-cat-btn.is-primary {
    background: var(--lsk-cat-accent);
    color: var(--lsk-cat-bg) !important;
}
.lsk-cat .lsk-cat-btn.is-primary:hover { filter: brightness(1.12); }
.lsk-cat .lsk-cat-btn.is-ghost {
    border: 1px solid var(--lsk-cat-vien);
    color: var(--lsk-cat-muted) !important;
}
.lsk-cat .lsk-cat-btn.is-ghost:hover {
    border-color: var(--lsk-cat-vien-manh);
    color: var(--lsk-cat-text) !important;
}

.lsk-cat .lsk-cat-contact {
    padding-top: 10px;
    border-top: 1px solid var(--lsk-cat-vien);
    font-size: 13px;
}

.lsk-cat .lsk-cat-contact h3 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--lsk-cat-text) !important;
}
.lsk-cat .lsk-cat-contact p { margin: 0 0 6px; }

/* ── Máy tính bảng: bỏ cột phải xuống dưới ──────────────────────────────────────── */

@media (max-width: 1180px) {
    /* Cột phải rơi xuống hàng dưới, nên khối không còn gói gọn trong một màn hình được
       nữa — trả chiều cao về tự nhiên thay vì ép rồi sinh cuộn lồng nhau. */
    .lsk-cat {
        /* Vẫn 220px như cột trái của configurator — mốc gãy này configurator dùng chung. */
        grid-template-columns: 220px minmax(0, 1fr);
        height: auto;
    }

    .lsk-cat .lsk-cat-side,
    .lsk-cat .lsk-cat-info { max-height: none; overflow-y: visible; }

    .lsk-cat .lsk-lab-viewer { height: 560px !important; }
    .lsk-cat-info { grid-column: 1 / -1; }
}

/* ── Điện thoại: bản rút gọn ────────────────────────────────────────────────────────
 *
 * Gập một cột: dải sản phẩm cuộn ngang → viewer + AR → thông số.
 *
 * ẨN HẲN Bộ phận và Mặt cắt (ADR-0004 mục 7). Cả hai cần trỏ chính xác — ô tích nhỏ và
 * thanh trượt canh theo milimét — mà ngón tay trên màn hình nhỏ thì không. Việc điện
 * thoại làm tốt nhất là AR, nên nhường chỗ cho nó.
 */

@media (max-width: 900px) {
    .lsk-cat { grid-template-columns: minmax(0, 1fr); gap: 14px; height: auto; }
    .lsk-cat .lsk-lab-viewer { height: 62vh !important; min-height: 320px; }

    /* Tên lớp phải khớp với markup: thanh mặt cắt đã đổi từ .lsk-cat-section-block sang
       .lsk-cat-section-bar khi chuyển nó xuống dưới viewer. */
    .lsk-cat .lsk-cat-parts-block,
    .lsk-cat .lsk-cat-section-bar { display: none; }

    .lsk-cat-side { padding: 12px; }

    .lsk-cat-products {
        grid-auto-flow: column;
        grid-auto-columns: minmax(190px, 1fr);
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }

    .lsk-cat-products > li { scroll-snap-align: start; }
    .lsk-cat-product { height: 100%; }
}