/* TiziShop · 02-products.css */
/* Hiệu ứng chuyển động mượt cho Popup */
        .modal-enter {
            animation: modalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes modalPop {
            0% {
                opacity: 0;
                transform: scale(0.92) translateY(15px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        /* Ô sản phẩm theo kiểu mô tả game / sản phẩm số, tông sáng hợp TiziShop */
        .product-card {
            background: linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
            border: 1px solid #dddff7;
            border-radius: 22px;
            box-shadow: 0 10px 24px -18px rgba(79,70,229,.32);
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }
        .product-card:hover {
            transform: translateY(-4px);
            border-color: #c7d2fe;
            box-shadow: 0 16px 34px -18px rgba(99,102,241,.34);
        }
        /* Ảnh Sản Phẩm rộng toàn bộ đầu thẻ sản phẩm, chỉ có trạng thái ở góc phải. */
        .product-demo-image {
            width: 100%;
            aspect-ratio: 16 / 10;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg,#e7eaff 0%,#f2eaff 50%,#fdebf7 100%);
            border-bottom: 1px solid #e7e8fb;
        }
        .product-demo-image > img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-demo-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 72% 25%,#f3d8fe 0%,transparent 38%),
                        radial-gradient(circle at 19% 78%,#c9dbff 0%,transparent 43%),
                        linear-gradient(135deg,#e8eaff,#f6e9ff);
        }
        .product-demo-placeholder > i {
            font-size: 46px;
            color: #9e90ed;
            opacity: .55;
        }
        .product-stock-badge {
            position: absolute;
            z-index: 2;
            top: 9px;
            right: 9px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border: 1px solid rgba(167,243,208,.95);
            border-radius: 999px;
            background: transparent;
            box-shadow: none;
            color: #047857;
            font-size: 9px;
            font-weight: 700;
            line-height: 1.1;
            white-space: nowrap;
            backdrop-filter: blur(1.5px);
            -webkit-backdrop-filter: blur(1.5px);
        }
        .product-stock-badge.is-out {
            background: transparent;
            border-color: rgba(254,205,211,.95);
            color: #be123c;
        }
        .product-stock-badge .dot {
            width: 5px;
            height: 5px;
            background: currentColor;
            border-radius: 50%;
        }
                #adminOrderDetailItems .admin-delivery-value { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
        .admin-view-order-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 11px; border-radius:10px; border:1px solid #c7d2fe; color:#4f46e5; background:#eef2ff; font-size:12px; font-weight:700; white-space:nowrap; }
        .admin-view-order-btn:hover { background:#e0e7ff; }
        .admin-order-complete {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: 1px solid #86efac;
            border-radius: 999px;
            background: #dcfce7;
            color: #166534;
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            white-space: nowrap;
        }
        .admin-order-complete i { font-size: 12px; }
        .admin-demo-preview {
            position: relative;
            max-width: 340px;
            width: 100%;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            border: 1px dashed #c7d2fe;
            border-radius: 16px;
            background: linear-gradient(135deg,#eef2ff,#fae8ff);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .admin-demo-preview img { width:100%;height:100%;object-fit:cover;display:block; }
        @media (max-width: 639px) { #productGrid { gap: 12px; } }
        .product-check {
            display:flex;
            align-items:flex-start;
            gap:8px;
            color:#1f2937;
            font-size:11px;
            line-height:1.45;
        }
        .product-check i { color:#10b981; margin-top:2px; }
        @media (max-width: 639px) {
            #productGrid { gap: 12px; }
            .product-card-hero { padding: 12px; }
            .product-card-thumb { width:54px; height:54px; }
        }

        /* Gói thời hạn: giao diện sáng đồng bộ với TiziShop */
        .duration-btn {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 112px;
            padding: 13px 12px;
            border: 1.5px solid #dce2f6;
            border-radius: 16px;
            background: linear-gradient(145deg, #ffffff 0%, #f5f4ff 100%);
            box-shadow: 0 4px 14px -11px rgba(79,70,229,.32);
            text-align: center;
            transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
        }
        .duration-btn:hover:not(:disabled) {
            border-color: #9188f7;
            background: linear-gradient(145deg, #f8f8ff, #efeaff);
            transform: translateY(-2px);
            box-shadow: 0 9px 20px -14px rgba(79,70,229,.38);
        }
        .duration-btn .duration-name {
            font-size: 13px;
            font-weight: 700;
            line-height: 1.25;
            color: #334155;
        }
        .duration-btn .duration-price {
            font-size: 17px;
            font-weight: 800;
            line-height: 1.25;
            color: #5b43e6;
        }
        .duration-btn .duration-stock {
            font-size: 11px;
            font-weight: 650;
            color: #059669;
        }
        .duration-btn .duration-check {
            display: none;
            position: absolute;
            top: 8px;
            right: 8px;
            width: 21px;
            height: 21px;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #ffffff;
            color: #5848e8;
            box-shadow: 0 2px 7px rgba(49,46,129,.18);
            font-size: 11px;
        }
        .duration-btn.is-active,
        .duration-btn.is-active:hover:not(:disabled) {
            border-color: #5145e7;
            background: linear-gradient(125deg, #5145e7 0%, #7247e8 100%);
            box-shadow: 0 8px 20px -12px rgba(79,70,229,.62);
            transform: none;
        }
        .duration-btn.is-active .duration-name,
        .duration-btn.is-active .duration-price { color: #ffffff; }
        .duration-btn.is-active .duration-stock { color: #dcfce7; }
        .duration-btn.is-active .duration-check { display: flex; }
        .duration-btn:disabled { opacity: .5; cursor: not-allowed; background:#f1f5f9; }
        .duration-btn:disabled .duration-stock { color: #be123c; }
        .duration-btn:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
        @media (max-width: 440px) {
            .duration-btn { min-height: 105px; padding: 11px 6px; }
            .duration-btn .duration-price { font-size: 15px; }
        }
        /* Nút bấm nổi bật */
        .btn-glow:hover {
            box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.5);
        }

        /* Hiển thị thông tin giao hàng ngay sau khi mua */
        #orderDeliveryModal { z-index: 90; }
        #orderDeliveryModal .delivery-result { box-shadow: 0 28px 80px rgba(39,35,89,.28); }
        #orderDeliveryModal .delivery-code { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
        .delivery-inventory-editor { background: linear-gradient(125deg,#f8faff,#f7f2ff); border:1px solid #e0e7ff; }