/* =========================================================================
   EXPAND / COLLAPSE SYSTEM - CSS
   -------------------------------------------------------------------------
   CSS cho hệ thống "Xem thêm / Thu gọn" áp dụng cho 5 section:
     1. Mô tả sản phẩm       → .description-wrapper             (500px)
     2. Thông số kỹ thuật    → .description-wrapper.specs-limit-800 (800px)
     3. Mô tả danh mục       → .cat-description-wrapper         (500px)
     4. Đánh giá sản phẩm    → .reviews-wrapper-limited         (630px)
     5. Mực in & chi phí     → .section-content-limited         (450px)

   Nguyên lý:
     - max-height giới hạn + gradient fade ở cuối báo hiệu "còn nội dung"
     - Thêm class .expanded (qua JS) → mở rộng + ẩn gradient

   PHP tương ứng: functions.php
     - toannhan_enqueue_expand_collapse_assets()

   Lịch sử:
     - 2026-04-17: Tách ra đây từ CSS inline trong functions.php (dòng ~960-1092).
       Mục đích: tận dụng browser cache, giảm HTML document size ~4KB/request,
       dễ maintain hơn (syntax highlighting CSS, không phải string PHP).
   ========================================================================= */

/* === 1) Mô tả sản phẩm === */
.description-wrapper {
    position: relative;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding-bottom: 60px;
}
.description-wrapper.specs-limit-800 {
    max-height: 800px;
}
.description-wrapper.expanded {
    max-height: 99999px;
}
.description-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 105px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.625), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.description-wrapper.expanded::after {
    opacity: 0;
}
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--additional_information {
    position: relative !important;
    padding-bottom: 50px !important;
}
.toggle-description-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: #0066cc;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    z-index: 99;
}
.toggle-description-btn i {
    margin-left: 6px;
    font-size: 0.9em;
}

/* === 2) Mô tả danh mục === */
.cat-description-wrapper {
    position: relative;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding-bottom: 50px;
}
.cat-description-wrapper.expanded {
    max-height: 42000px;
}
.cat-description-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 105px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.625), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cat-description-wrapper.expanded::after {
    opacity: 0;
}
.toggle-catdesc-btn {
    position: absolute;
    bottom: 23px;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: #cc0000;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
}
.toggle-catdesc-btn i {
    margin-left: 6px;
    font-size: 0.9em;
}
.woo_cat_sec_description.clearbox {
    padding: 0 10px 0 10px;
}

/* === 3) Đánh giá sản phẩm === */
.reviews-wrapper-limited {
    position: relative;
    max-height: 630px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    margin-bottom: 40px;
}
.reviews-wrapper-limited.expanded {
    max-height: 5000px;
}
.reviews-wrapper-limited::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 105px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.625), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.reviews-wrapper-limited.expanded::after {
    opacity: 0;
}
.toggle-reviews-btn {
    display: block;
    margin: -35px auto 0;
    background: none;
    border: none;
    color: #0066cc;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    z-index: 1;
}
.toggle-reviews-btn i {
    margin-left: 6px;
    font-size: 0.9em;
}

/* === 4) Mực in và chi phí vận hành === */
.section-content-limited {
    position: relative;
    max-height: 450px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.section-content-limited.expanded {
    max-height: 99999px;
}
.section-content-limited::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 105px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.625), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.section-content-limited.expanded::after {
    opacity: 0;
}