/* Chi tiết sản phẩm (Lâm Thanh Bình). @media đặt trong responsive.css */
.detail-info .name { color: var(--color-main); border-bottom: 1px solid var(--color-line);}
.detail-info .desc { color: #6c6f71;}
.detail-info .price { color: var(--color-main); border-bottom: 1px solid var(--color-line);}
.btn-zalo { min-width: 288px; border-radius: 30px; background: var(--color-zalo);}
.btn-zalo:hover { color: #fff; opacity: .9;}
.gallery-pro-detail .slider-products .item { padding: 0;}
/* ảnh con 134×104 xếp ngang dưới ảnh lớn 592×465: 4 ảnh/hàng, khe ~18px (list kéo ra -9px để 2 mép khớp ảnh lớn) */
.gallery-pro-detail .slider-product-thumbs .slick-list { margin: 0 -9px;}
.gallery-pro-detail .slider-product-thumbs .item { padding: 0 9px;}
.gallery-pro-detail .slider-products .slick-arrow:hover { background: var(--color-main); color: #fff;}
.detail-box { background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .1);}
.detail-box .title,.thongso-box .title { color: var(--color-main);}
.detail-box .wrap-toc { background: var(--color-gold); border: 0; margin: 0; padding: 0;}
.detail-box .toc-head { min-height: 40px;}
.detail-box .toc-head svg { fill: none;} /* toc.css tô fill cho mọi svg trong .toc-head → chevron mở thành tam giác đặc; Figma 84:2960 là nét chữ V mảnh */
/* Khoảng cách danh sách mục lục đặt ở CSS, KHÔNG dùng utility mt-0/px-4/py-2 trên ul: utility có !important nên jQuery slideToggle không co được padding/margin → co hết chiều cao rồi mới bật display:none, nhìn giật */
.detail-box .toc-list { margin: 0; padding: 8px 24px;}
/* Bấm Mục lục: goToByScroll (core) cuộn heading lên sát mép trên → bị thanh menu bám (#header.is-stuck .header-nav, cao 59px) che mất. Nới hộp heading lên 80px (padding bù margin âm, layout không đổi) để cuộn dừng chừa chỗ cho menu */
#toc-content :is(h1, h2, h3, h4)[id] { padding-top: 80px; margin-top: -80px; pointer-events: none;}
.detail-box #noidung { max-height: 820px; padding-bottom: 70px;}
.detail-box #noidung.show-full-content { padding-bottom: 70px;}
.detail-box .hide-content { background: linear-gradient(transparent, #fff 60%);}
/* Thông số kỹ thuật — Figma 84:2986 (khung kem bo 10, bóng) > 90:6681 (thẻ trắng bo 8) > 90:6792 (hàng: nhãn 136 + cách 30 + giá trị, kẻ vàng mảnh). Cao theo nội dung (không h-100), bám khi cuộn */
.thongso-box { position: sticky; top: 80px; background: var(--color-cream-dark); border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .1);}
.thongso-content { background: #fff; border-radius: 8px;}
.thongso-content table { width: 100%!important; border:0;border-collapse: collapse;}    
.thongso-content td,.thongso-content th { padding: 28px 0 16px; border-bottom: 1px solid var(--color-gold); color: #6c6f71; vertical-align: top;}
.thongso-content tr:first-child td,.thongso-content tr:first-child th { padding-top: 0;}
.thongso-content tr:last-child td,.thongso-content tr:last-child th { padding-bottom: 0; border-bottom: 0;}
.thongso-content td:first-child,.thongso-content th:first-child { width: 166px; padding-right: 30px; font-weight: 600; color: var(--color-main);}