/* ========== NPT Product Table ========== */
.npt-table-wrap{font-family:'Inter',-apple-system,sans-serif;margin:20px 0}

/* Toolbar */
.npt-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.npt-search-input{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #e0e0e0;border-radius:10px;padding:10px 16px;flex:1;min-width:200px;transition:border-color .2s}
.npt-search-input:focus-within{border-color:#004d40}
.npt-search-input span{font-size:16px;flex-shrink:0}
.npt-filter{border:none;outline:none;font-size:14px;width:100%;font-family:inherit}
.npt-btn-add-selected{background:#004d40;color:#fff;border:none;padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s}
.npt-btn-add-selected:hover:not(:disabled){background:#00695c;transform:translateY(-1px)}
.npt-btn-add-selected:disabled{opacity:.4;cursor:not-allowed}

/* Desktop Table */
.npt-product-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff}
.npt-product-table thead th{background:#004d40;color:#fff;padding:12px 14px;font-size:13px;font-weight:600;text-align:left;white-space:nowrap;user-select:none}
.npt-sortable{cursor:pointer}
.npt-sortable:hover{background:#00695c}
.npt-sort-icon{font-size:11px;opacity:.6}
.npt-product-table tbody tr{transition:background .15s}
.npt-product-table tbody tr:hover{background:#e8f5e9}
.npt-product-table tbody td{padding:12px 14px;border-bottom:1px solid #f0f0f0;vertical-align:middle;font-size:14px}
.npt-thumb{width:70px;height:auto;border-radius:6px;display:block}
.npt-td-name a{color:#004d40;font-weight:600;text-decoration:none;transition:color .2s}
.npt-td-name a:hover{color:#00796b;text-decoration:underline}
.npt-td-price{font-weight:700;color:#e65100;font-size:15px;white-space:nowrap}
.npt-td-price del{color:#bbb;font-weight:400;font-size:12px}
.npt-td-price ins{text-decoration:none}
.npt-type-badge{display:inline-block;background:#e3f2fd;color:#1565c0;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.npt-in-stock{color:#2e7d32;font-weight:700;font-size:13px}
.npt-out-stock{color:#c62828;font-weight:700;font-size:13px}
.npt-add-btn{background:#004d40;color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
.npt-add-btn:hover{background:#00695c;transform:translateY(-1px)}
.npt-add-btn.added{background:#2e7d32;pointer-events:none}
.npt-unavailable{color:#9e9e9e;font-size:12px}
.npt-col-check{width:60px;text-align:center}
.npt-td-check{text-align:center}
.npt-item-check,.npt-check-all{width:18px;height:18px;accent-color:#004d40;cursor:pointer}
.npt-check-all-label{display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer}
.npt-empty{text-align:center;padding:40px;color:#888;font-size:15px}

/* Quantity input */
.npt-qty-input{width:56px;padding:6px 4px;border:2px solid #e0e0e0;border-radius:8px;text-align:center;font-size:14px;font-weight:600;font-family:inherit;transition:border-color .2s;color:#222 !important;background:#fff !important;-webkit-text-fill-color:#222 !important;caret-color:#222}
.npt-qty-input:focus{border-color:#004d40;outline:none;color:#222 !important;background:#fff !important}
.npt-qty-input::-webkit-outer-spin-button,.npt-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.npt-qty-input[type=number]{-moz-appearance:textfield}
.npt-col-qty{width:70px;text-align:center}
.npt-td-qty{text-align:center}

/* Hide mobile on desktop */
.npt-mobile-list{display:none}

/* ========== MOBILE ========== */
@media(max-width:768px){
    .npt-product-table{display:none}
    .npt-mobile-list{display:flex;flex-direction:column;gap:12px}

    .npt-mobile-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:box-shadow .2s}
    .npt-mobile-card:active{box-shadow:0 2px 12px rgba(0,0,0,.1)}
    .npt-mc-top{display:flex;gap:14px;padding:14px}
    .npt-mc-img{flex-shrink:0;width:80px}
    .npt-mc-img img{width:80px;height:auto;border-radius:8px;display:block}
    .npt-mc-info{flex:1;min-width:0}
    .npt-mc-name{display:block;font-weight:600;font-size:14px;color:#004d40;text-decoration:none;margin-bottom:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .npt-mc-price{font-weight:700;color:#e65100;font-size:16px;margin-bottom:6px}
    .npt-mc-price del{color:#bbb;font-weight:400;font-size:12px}
    .npt-mc-price ins{text-decoration:none}
    .npt-mc-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .npt-mc-btn{display:flex;flex:1;padding:12px;border-radius:0 0 12px 0;font-size:14px;align-items:center;justify-content:center;gap:6px;min-height:48px}
    .npt-mc-bottom{display:flex;align-items:stretch;border-top:1px solid #e0e0e0}
    .npt-mc-bottom .npt-qty-input{border:none;border-right:1px solid #e0e0e0;border-radius:0 0 0 12px;padding:12px 4px;width:64px;font-size:16px;text-align:center;font-weight:700;-webkit-appearance:none;-moz-appearance:textfield;background:#f8f8f8 !important;flex-shrink:0;min-height:48px;color:#222 !important;-webkit-text-fill-color:#222 !important;caret-color:#222}
    .npt-mc-bottom .npt-qty-input:focus{background:#e8f5e9 !important;outline:none;color:#222 !important}

    .npt-toolbar{flex-direction:column}
    .npt-search-input{width:100%}
    .npt-btn-add-selected{width:100%;text-align:center}
}

/* Toast */
.npt-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#004d40;color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:600;z-index:99999;box-shadow:0 4px 20px rgba(0,0,0,.2);animation:nptFadeIn .3s}
@keyframes nptFadeIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ========== NNGX Mobile: bổ sung ========== */
.npt-search-input{cursor:text;margin:0}
.npt-filter{background:transparent;-webkit-appearance:none;appearance:none;padding:0;margin:0;box-shadow:none}
.npt-count{font-size:13px;color:#666;white-space:nowrap}
.npt-col-var{min-width:170px}
.npt-var-select{width:100%;min-width:150px;height:38px;padding:0 30px 0 10px;border:2px solid #e0e0e0;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;font-size:13.5px;font-weight:600;color:#222;-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit}
.npt-var-select:focus{outline:none;border-color:#004d40}
.npt-var-none{color:#bbb}
.npt-td-price .price,.npt-mc-price .price{color:inherit;font-size:inherit}
.npt-row.npt-flash td{animation:nptFlash .6s}
@keyframes nptFlash{from{background:#fff8e1}to{background:transparent}}
.npt-mc-var{margin-top:8px}
.npt-mc-var .npt-var-select{width:100%;height:42px;font-size:14px}
.npt-toast.is-error{background:#c62828}
@media(max-width:768px){.npt-count{align-self:flex-start}}
.npt-table-wrap,.npt-table-wrap *,.npt-table-wrap *::before,.npt-table-wrap *::after{box-sizing:border-box}
.npt-td-stock span{white-space:nowrap}