/*
  FILE TÙY CHỈNH NHANH
  - Viết CSS mới vào đây để ghi đè giao diện mặc định.
  - Không cần sửa style.css nếu chỉ đổi khoảng cách, font hoặc kích thước.

  Ví dụ đổi bo góc thẻ sản phẩm:
  .product-card { border-radius: 8px; }
*/

/* =========================================================
   AUTO FIT ẢNH PREVIEW SẢN PHẨM
   - Hỗ trợ ảnh vuông, ảnh ngang và ảnh chữ nhật dọc.
   - Luôn hiển thị đầy đủ ảnh, không cắt mất nội dung.
   ========================================================= */

.product-image {
    height: 240px;
    padding: 10px;
    box-sizing: border-box;
    background: #f3f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain !important;
    object-position: center center;
}

.detail-image {
    background: #f3f5f7;
    padding: 10px;
    box-sizing: border-box;
}

.detail-image img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain !important;
    object-position: center center;
}

@media (max-width: 760px) {
    .product-image {
        height: 190px;
        padding: 6px;
    }

    .detail-image {
        min-height: 300px;
        padding: 6px;
    }
}


/* =========================================================
   FIX VIETQR: HIỂN THỊ ĐỦ MÃ QR, KHÔNG BỊ CẮT
   ========================================================= */
.qr-box {
    height: 330px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-box img#topupQr {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    object-fit: contain !important;
    object-position: center center;
}

@media (max-width: 760px) {
    .qr-box {
        height: 300px;
        padding: 8px;
    }
}


/* =========================================================
   MENU ĐIỆN THOẠI
   - Ghim nút ☰ sát mép phải header.
   - Đưa Đăng nhập / Đăng ký / Quên mật khẩu vào menu.
   ========================================================= */
@media (max-width: 1080px) {
    .header-actions {
        margin-left: auto;
        flex: 0 0 auto;
    }

    .mobile-menu-button {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        border-radius: 10px;
        color: var(--text);
        cursor: pointer;
        line-height: 1;
    }

    .mobile-menu-button:hover,
    .mobile-menu-button:focus-visible {
        background: #f2f4f7;
        outline: none;
    }

    .mobile-menu.open {
        display: block;
    }
}

@media (max-width: 760px) {
    .header-inner {
        width: 100%;
    }

    .brand {
        min-width: 0;
    }

    .brand strong {
        white-space: nowrap;
    }

    .mobile-menu {
        max-height: calc(100vh - 68px);
        padding: 6px 14px 16px;
        overflow-y: auto;
        box-shadow: 0 12px 24px rgba(16, 24, 40, 0.10);
    }

    .mobile-menu a,
    .mobile-menu button {
        padding: 12px 8px;
        border-radius: 8px;
    }

    .mobile-menu a:hover,
    .mobile-menu button:hover,
    .mobile-menu a:focus-visible,
    .mobile-menu button:focus-visible {
        background: #f2f4f7;
        outline: none;
    }

    .mobile-auth-menu {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }

    .mobile-auth-menu button {
        color: var(--primary-dark);
    }
}


.contributor-summary{display:grid;gap:5px;margin:10px 0 14px;padding:12px 14px;border:1px solid #dcefe3;border-radius:10px;background:#f4fbf6;color:#334155;font-size:13px}
.contributor-summary small{font-weight:800;color:#0a8f3d;text-transform:uppercase;letter-spacing:.03em}
.contributor-summary span{display:flex;justify-content:space-between;gap:10px}
.contributor-summary.hidden{display:none}


/* Danh mục dạng treeview */
.category-tree{background:#fff;border:1px solid var(--border);border-radius:14px;padding:8px;display:grid;gap:2px}
.category-tree-node{min-width:0}
.category-tree-row{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center}
.category-tree-toggle{width:24px;height:38px;border:0;background:transparent;color:#667085;cursor:pointer;font-size:14px;padding:0}
.category-tree-toggle.empty{cursor:default}
.category-tree-label,.category-tree-child{width:100%;border:0;background:transparent;border-radius:9px;color:#344054;cursor:pointer;display:grid;align-items:center;text-align:left}
.category-tree-label{grid-template-columns:24px minmax(0,1fr) auto;gap:7px;padding:10px 8px}
.category-tree-child{grid-template-columns:22px minmax(0,1fr) auto;gap:7px;padding:9px 8px 9px 20px;font-size:13px}
.category-tree-label b,.category-tree-child b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-tree-label i,.category-tree-child i{font-style:normal;border-radius:999px;background:#f2f4f7;padding:1px 7px;font-size:12px}
.category-tree-label:hover,.category-tree-label.active,.category-tree-child:hover,.category-tree-child.active{background:var(--primary-soft);color:var(--primary-dark)}
.category-tree-label.active,.category-tree-child.active{font-weight:800}
.category-tree-children{margin-left:24px;border-left:1px solid #dfe6ee;padding-left:4px}
.category-tree-children.hidden{display:none}

@media(max-width:760px){
  .category-tree{max-height:320px;overflow:auto;margin-bottom:16px}
}