.crafting-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mặc định 1 cột trên mobile */
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .crafting-layout-grid {
        /* 2 cột trên desktop: 1/3 cho danh sách, 2/3 cho chi tiết */
        grid-template-columns: 1fr 2fr; 
    }
}

.crafting-recipe-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 60vh; /* Giới hạn chiều cao và cho phép cuộn */
    overflow-y: auto;
    padding-right: 0.5rem; /* Khoảng trống cho thanh cuộn */
}

.crafting-recipe-item.active-recipe {
    border-color: var(--color-primary-cyan);
    background-color: var(--color-primary-cyan-transparent);
}

.crafting-details-pane {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
}
/* Thêm vào main.css (hoặc file CSS của 'shop-screen') */

.marketplace-layout {
    display: grid;
    grid-template-columns: 1fr; /* 1 cột trên mobile */
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
}

@media (min-width: 1024px) {
    .marketplace-layout {
        /* [SỬA] Cột 1 (Quản lý) | Cột 2 (Nội dung chính) */
        grid-template-columns: 300px 1fr; 
    }
}

.marketplace-my-actions {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    height: fit-content; /* Chỉ cao bằng nội dung */
}

.marketplace-main-content {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    max-height: 70vh; /* Giới hạn chiều cao */
    display: flex;
    flex-direction: column;
}

/* Định dạng 2 tab con (Sub-tabs) */
.sub-tab-nav {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.sub-tab-btn {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}
.sub-tab-btn i {
    margin-right: 0.5rem;
}

.sub-tab-btn.active {
    color: var(--color-primary-cyan);
}

.sub-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Nằm đè lên border-bottom của nav */
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary-cyan);
    box-shadow: 0 0 10px var(--color-primary-cyan);
}

.sub-tab-content {
    display: none;
    flex-grow: 1;
    overflow-y: auto;
}
.sub-tab-content.active {
    display: block;
}
/* [THÊM VÀO CUỐI] file main.css */

/* CSS cho danh sách vật phẩm trên Chợ */
.market-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.market-item-card {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr auto; /* Tên/Người bán | Giá/Số lượng */
    gap: 1rem;
    align-items: center;
}

.market-item-card .item-details {
    display: flex;
    flex-direction: column;
}
.market-item-card .item-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-text-primary);
}
.market-item-card .item-seller {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.market-item-card .item-pricing {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.market-item-card .item-price-per {
    font-weight: bold;
    color: var(--color-primary-cyan);
}
.market-item-card .item-quantity {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.market-item-card .buy-market-item-btn {
    grid-column: 1 / -1; /* Nút Mua chiếm toàn bộ chiều rộng */
}

/* CSS cho Modal "Đăng bán từ Kho" */
.market-inventory-list {
    width: 100%;
    padding-right: 0.5rem;
}
.market-inventory-item {
    display: grid;
    /* Chia 3 cột: Tên (40%), Info (40%), Nút (20%) */
    grid-template-columns: 2fr 2fr 100px; 
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    background-color: rgba(0, 0, 0, 0.2);
}
.market-inventory-item:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Hiệu ứng hover nhẹ */
}
/* Cột 1: Tên vật phẩm */
.market-inventory-item .col-name {
    font-weight: bold;
    color: var(--color-text-primary);
    font-size: 1rem;
    /* Xử lý nếu tên quá dài thì hiện dấu ... */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
/* Cột 2: Thông tin số lượng */
.market-inventory-item .col-info {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Tăng khoảng cách giữa Kho và Ký gửi */
}
/* Cột 3: Nút hành động */
.market-inventory-item .col-action {
    text-align: right;
}
/* Responsive cho Mobile (Màn hình nhỏ) */
@media (max-width: 640px) {
    .market-inventory-item {
        /* Trên mobile chuyển thành 2 dòng */
        grid-template-columns: 1fr auto; 
        gap: 0.5rem;
    }
    
    .market-inventory-item .col-name {
        grid-column: 1 / -1; /* Tên chiếm hết dòng trên */
        border-bottom: 1px dashed rgba(255,255,255,0.1);
        padding-bottom: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    .market-inventory-item .col-info {
        justify-content: flex-start; /* Info căn trái */
        grid-column: 1 / 2; /* Info chiếm cột 1 */
    }

    .market-inventory-item .col-action {
        grid-column: 2 / 3; /* Nút chiếm cột 2 */
        text-align: right;
    }
}

/* Khối mới để chứa Tên và Mô tả (Khối này sẽ chiếm không gian) */
.item-card-name-desc {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa Tên và Mô tả */
    margin: 0.75rem 0;
}

/* Định dạng cho Mô tả */
.item-card-desc {
    font-size: 0.8rem; /* 13px */
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
    
    /* Giới hạn 3 dòng text, sau đó thêm "..." */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* (Tùy chọn) Ghi đè lại header (nếu bạn dùng file CSS cũ) */
.item-card-header {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* ====================================== */
/* == STYLES CHO TAB CHẾ TẠO (MỚI) == */
/* ====================================== */

/* Kiểu cho tiêu đề (H3) trong danh sách công thức */
.crafting-recipe-list h3 {
    font-family: var(--font-title); /* Giả sử bạn có biến --font-title */
    color: var(--color-primary-cyan);
    font-size: 1.125rem; /* 18px */
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    margin-top: 0.5rem; /* Thêm khoảng cách cho tiêu đề thứ 2 */
}

/* Bỏ lề trên cho tiêu đề đầu tiên */
.crafting-recipe-list h3:first-child {
    margin-top: 0;
}

/* Kiểu cho ô hiển thị chi phí nâng cấp */
#upgrade-cost-display {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.875rem; /* 14px */
    min-height: 1.25rem; /* 20px (giữ chiều cao ổn định) */
    margin-top: 0.5rem;
}
/* [THÊM VÀO] */
/* Áp dụng cho danh sách item trong Cửa Hàng Hệ Thống */
#subtab-npc-shop .item-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* Áp dụng grid cho Cửa Hàng Hệ Thống */
#subtab-npc-shop .item-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Grid tự động co dãn */
    gap: 1rem;
    width: 100%;
    max-width: 1400px; /* Giới hạn chiều rộng tổng */
    margin: 0 auto;
}

/* Áp dụng cho container chứa nội dung các Tab trong Station */
.station-content.active {
    /* Cho phép hiển thị full chiều cao và cuộn nếu tràn */
    height: 100%;
    overflow-y: auto;
    
    /* QUAN TRỌNG: Đẩy nội dung lên 80px để tránh thanh Nav Bar (60px) */
    padding-bottom: 80px !important; 
    
    /* Giúp cuộn mượt trên mobile */
    -webkit-overflow-scrolling: touch;
}

/* Riêng cho Tab Quy Đổi (Exchange) */
#station-tab-exchange {
    display: none; /* Mặc định ẩn */
}

/* 1. Container cha: Biến thành khung Flex để căn giữa cái Card */
#station-tab-exchange.active {
    display: flex !important;     /* Kích hoạt Flexbox */
    flex-direction: column;
    justify-content: center;      /* Căn giữa theo chiều dọc */
    align-items: center;          /* Căn giữa theo chiều ngang */
    
    height: 100%;                 /* Chiếm toàn bộ chiều cao màn hình */
    overflow: hidden;             /* CẤM cuộn màn hình ngoài */
    
    /* Trừ hao khoảng trống bên dưới cho thanh Nav Bar (để không bị che) */
    padding-bottom: 70px !important; 
}
/* 2. Cái Card nội dung bên trong (Khung có viền) */
/* Target trực tiếp vào div con của tab */
#station-tab-exchange > div {
    /* Kích thước */
    width: 90% !important;        /* Chiếm 90% bề ngang mobile */
    max-width: 450px !important;  /* Không quá to trên PC */

    /* Giới hạn chiều cao: Tối đa 80% màn hình để luôn nhìn thấy đầu đuôi */
    max-height: 80vh !important; 
    
    /* QUAN TRỌNG: Chỉ hiện thanh cuộn BÊN TRONG khung này khi tràn */
    overflow-y: auto !important;

    /* Thẩm mỹ & Căn chỉnh */
    margin: 0 auto !important;    /* Căn giữa */
    background-color: rgba(17, 24, 39, 0.9) !important; /* Nền tối hơn chút để dễ đọc */
    backdrop-filter: blur(10px);  /* Làm mờ nền sau lưng */
}

/* 3. Tùy chỉnh thanh cuộn nhỏ gọn cho cái Card này */
#station-tab-exchange > div::-webkit-scrollbar {
    width: 4px; /* Thanh cuộn mảnh */
}
#station-tab-exchange > div::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}
#station-tab-exchange > div::-webkit-scrollbar-thumb {
    background: var(--color-primary-cyan);
    border-radius: 2px;
}