/* Trang danh mục: thẻ danh mục con, ảnh hướng dẫn từng bước, nội dung HTML */

/* Thẻ danh mục con: viền gradient xanh, ruột trắng, icon tròn đè mép trái */
.CategoryListChildren {
    padding: 16px 0 24px;
}

/* 1fr: mọi thẻ cao bằng thẻ có tên dài nhất, không còn hàng cao hàng thấp */
.box-category-children {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 30px 44px;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 18px;
}

/* Ruột trắng phải giãn theo thẻ, nếu không thẻ bị kéo cao sẽ lộ dải viền xanh dày */
.item-box-children {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 4px;
    border-radius: 999px;
    background: var(--brand-gradient);
    box-shadow: 0 6px 16px rgba(10, 70, 30, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.item-box-children:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(10, 70, 30, 0.3);
}

.image-avatar {
    position: absolute;
    top: 50%;
    left: -18px;
    z-index: 1;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 50%;
    transform: translateY(-50%);
}

.avatar-category {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title-chidden-category {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 16px 24px 16px 66px;
    border-radius: 999px;
    background: linear-gradient(268deg, #fff 5%, #dedede 102%);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.title-chidden-category .box {
    margin: 0;
    color: var(--brand);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

/* Ảnh từng bước: --cols chỉ đặt trên container, item tự kế thừa theo breakpoint.
   Các biến --cols-* do CategoryContent tính sẵn: không vượt số ảnh và chia hàng cân đối. */
#Category_Page {
    container: step-area / inline-size;
}

.box-image-list {
    --cols-fit: var(--cols-pc, 4);
    --cols: var(--cols-fit);
    --gap-x: 28px;
    --gap-y: 32px;
    --step-img-max-h: 565px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-y) var(--gap-x);
    margin: 0 auto;
    padding-bottom: 16px;
}

.item.item-image-list {
    display: flex;
    flex-direction: column;
    width: calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
    max-width: 100%;
    /* Cho ảnh bên trong tính chiều cao theo bề rộng cột (đơn vị cqi) */
    container-type: inline-size;
}

/* Khung hẹp thì giảm số cột để mỗi cột còn ≥ 185px, ngưỡng = N × 185 + (N - 1) × gap 28 */
@container step-area (width < 1676px) {
    .box-image-list {
        --cols-fit: var(--cols-max7);
    }
}

@container step-area (width < 1463px) {
    .box-image-list {
        --cols-fit: var(--cols-max6);
    }
}

@container step-area (width < 1250px) {
    .box-image-list {
        --cols-fit: var(--cols-max5);
    }
}

@container step-area (width < 1037px) {
    .box-image-list {
        --cols-fit: var(--cols-max4);
    }
}

@container step-area (width < 824px) {
    .box-image-list {
        --cols-fit: var(--cols-max3);
    }
}

@container step-area (width < 611px) {
    .box-image-list {
        --cols-fit: var(--cols-max2);
    }
}

/* Ảnh cùng hàng khác tỉ lệ (350x650, 314x650...) nên co theo bề rộng sẽ cao thấp khác nhau.
   Khung cao cố định = tỉ lệ thấp nhất của nhóm × bề rộng cột: mọi ảnh cao bằng nhau và chỗ được
   giữ sẵn trước khi ảnh tải xong. 1.85 là tỉ lệ ảnh điện thoại thấp nhất hiện có, dùng khi API thiếu kích thước. */
.box-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(var(--step-img-max-h), calc(var(--step-ratio, 1.85) * 100cqi));
}

/* Bề rộng tính từ thuộc tính width/height nên skeleton có đúng dáng ảnh ngay từ đầu */
.box-image img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(10, 60, 25, 0.18));
    transition: transform 0.3s ease;
}

.box-image .skeleton-img:not(.is-loaded) {
    border-radius: 18px;
}

.box-image:hover img {
    transform: translateY(-4px) scale(1.02);
}

/* flex: 1 để chú thích trong cùng 1 hàng cao bằng nhau */
.frame-step {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    margin-top: 14px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid rgba(12, 145, 66, 0.25);
    background: var(--frame-step-bg, #fff);
    color: var(--frame-step-color, var(--ink));
    box-shadow: var(--shadow-soft);
}

/* Admin có thể đặt tới 6 cột nên chữ nhỏ hơn HI88 một chút */
.text-step {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    overflow-wrap: break-word;
}

/* Nội dung HTML soạn từ admin */
.content-category {
    margin-top: 24px;
    padding: 20px 24px;
    overflow-x: auto;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
}

.content-category img {
    height: auto;
}

@media (max-width: 1024px) {
    .box-image-list {
        --cols: min(var(--cols-fit), var(--cols-ipad, 3));
        --gap-x: 18px;
        --gap-y: 26px;
    }
}

/* Mobile: 1 ảnh mỗi hàng như thiết kế gốc của QQ88 */
@media (max-width: 768px) {
    .box-category-children {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-left: 16px;
    }

    .image-avatar {
        left: -14px;
        width: 64px;
        height: 64px;
    }

    .title-chidden-category {
        padding: 14px 18px 14px 56px;
    }

    .title-chidden-category .box {
        font-size: 15px;
    }

    .box-image-list {
        --cols: 1;
        --gap-y: 28px;
        --step-img-max-h: 70vh;
    }

    .box-image:hover img {
        transform: none;
    }

    .frame-step {
        width: min(100%, 420px);
        min-height: 0;
        margin: 12px auto 0;
    }

    .text-step {
        font-size: 14px;
    }

    .content-category {
        padding: 16px;
        font-size: 15px;
    }
}