| <!DOCTYPE html> |
| <html lang="vi"> |
| <head> |
| <script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"661b9191e7b0ab12bceb66f3","VAISTUDIO":"HF_TOKEN_REDACTED","REBUILD_TRIGGER":"v2025-excel-fix-final-fee-rows"}};</script> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>V.AI STUDIO | Niềm tin khách hàng là tài sản của chúng tôi</title> |
| <meta name="description" content="V.AI STUDIO — 8000+ sản phẩm thiết bị nhà bếp & điện máy."> |
| <meta property="og:type" content="website"> |
| <meta property="og:site_name" content="V.AI STUDIO"> |
| <meta property="og:image" content="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_main.png"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
| <style> |
| *{margin:0;padding:0;box-sizing:border-box} |
| :root{--p:#003f62;--pl:#005a8c;--a:#db9815;--al:#f0b840;--d:#0f172a;--l:#f8fafc;--g:#64748b;--gl:#e2e8f0;--w:#fff;--r:14px;--t:all .25s ease} |
| body{font-family:'Inter',system-ui,sans-serif;color:var(--d);background:var(--l);overflow-x:hidden} |
| .container{max-width:1360px;margin:0 auto;padding:0 20px} |
| .topbar{background:var(--p);color:#fff;padding:6px 0;font-size:.72rem} |
| .topbar .container{display:flex;justify-content:center;gap:28px} |
| .topbar-item{display:flex;align-items:center;gap:6px} |
| .topbar-item i{color:var(--a)} |
| .header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.06)} |
| .header .container{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:14px} |
| .logo{display:flex;align-items:center;gap:10px;cursor:pointer} |
| .logo-name{font-size:1.3rem;font-weight:900;color:var(--p)}.logo-name span{color:var(--a)}.logo-sub{font-size:.55rem;color:var(--g);letter-spacing:2px;text-transform:uppercase} |
| .search-box{flex:1;max-width:480px;position:relative} |
| .search-box input{width:100%;padding:9px 14px 9px 38px;border:2px solid var(--gl);border-radius:10px;font-size:.85rem;outline:none} |
| .search-box>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--g)} |
| .nav-icons{display:flex;gap:6px} |
| .nav-icons a{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--p);background:rgba(0,63,98,.05);font-size:.85rem} |
| .hamburger{display:none} |
| .hero{background:linear-gradient(135deg,var(--p),var(--pl),#0077b6);padding:40px 0;text-align:center} |
| .hero h1{font-size:2.2rem;color:#fff;font-weight:900;margin-bottom:10px}.hero h1 span{color:var(--al)} |
| .hero p{color:rgba(255,255,255,.75);font-size:.9rem} |
| .main{display:flex;gap:22px;padding:28px 0} |
| .sidebar{width:260px;flex-shrink:0} |
| .content{flex:1} |
| .sb-card{background:#fff;border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,0,0,.06)} |
| .sb-card h3{font-size:.8rem;font-weight:700;color:var(--d);margin-bottom:12px;display:flex;align-items:center;gap:7px} |
| .sb-card h3 i{color:var(--a);font-size:.75rem} |
| .cat-list{list-style:none} |
| .cat-item{padding:8px 10px;border-radius:9px;cursor:pointer;transition:var(--t);font-size:.78rem;display:flex;align-items:center;gap:9px;color:var(--d)} |
| .cat-item:hover{background:rgba(0,63,98,.04)} |
| .cat-item.active{background:var(--p);color:#fff} |
| .pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} |
| .pc{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:var(--t);cursor:pointer} |
| .pc:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)} |
| .pi{height:200px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center} |
| .pi img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease;padding:6px} |
| .pc:hover .pi img{transform:scale(1.05)} |
| .pb{padding:14px} |
| .pn{font-size:.82rem;font-weight:600;color:var(--d);line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} |
| .pp{font-size:1rem;font-weight:800;color:var(--p)} |
| .toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} |
| .result-count{font-size:.82rem;color:var(--g)}.result-count strong{color:var(--d)} |
| .sort-select{padding:7px 12px;border:2px solid var(--gl);border-radius:9px;font-size:.78rem;background:#fff;cursor:pointer;outline:none} |
| .view-btns{display:flex;gap:3px} |
| .view-btn{width:32px;height:32px;border:2px solid var(--gl);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;color:var(--g);font-size:.75rem} |
| .view-btn.active{border-color:var(--p);color:var(--p);background:rgba(0,63,98,.04)} |
| .pagination{display:flex;justify-content:center;gap:5px;margin-top:26px} |
| .pgb{width:36px;height:36px;border:2px solid var(--gl);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;font-size:.82rem;font-weight:600} |
| .pgb:hover{border-color:var(--p);color:var(--p)} |
| .pgb.active{background:var(--p);color:#fff;border-color:var(--p)} |
| #detailView{display:none;min-height:80vh}#detailView.show{display:block}#listView.hide{display:none} |
| .detail-back{display:inline-flex;align-items:center;gap:8px;color:var(--p);font-weight:600;font-size:.85rem;cursor:pointer;padding:8px 0;margin-bottom:20px} |
| .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;background:#fff;border-radius:20px;padding:32px;box-shadow:0 2px 16px rgba(0,0,0,.06)} |
| .gallery-carousel{position:relative;border-radius:16px;background:#f8fafc;margin-bottom:10px;overflow:hidden} |
| .gallery-slide{min-width:100%;display:flex;align-items:center;justify-content:center;max-height:75vh} |
| .gallery-slide img{width:100%;height:auto;max-height:75vh;object-fit:contain} |
| .detail-sku{font-size:.72rem;color:var(--g);margin-bottom:6px;font-weight:500} |
| .detail-cat{display:inline-flex;align-items:center;gap:6px;background:rgba(0,63,98,.06);color:var(--p);padding:5px 14px;border-radius:50px;font-size:.72rem;font-weight:700;margin-bottom:14px} |
| .detail-name{font-size:1.6rem;font-weight:800;color:var(--d);line-height:1.3;margin-bottom:16px} |
| .detail-price{font-size:1.8rem;font-weight:900;color:var(--p);margin-bottom:20px} |
| .add-cart-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--a);color:#fff;border-radius:12px;font-weight:700;font-size:.88rem;cursor:pointer;border:none;font-family:inherit} |
| .add-cart-btn:hover{background:var(--al)} |
| /* CART */ |
| .cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200} |
| .cart-drawer{position:fixed;top:0;right:0;width:400px;height:100vh;background:#fff;z-index:201;display:flex;flex-direction:column;box-shadow:-4px 0 30px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .35s} |
| .cart-drawer.open{transform:translateX(0)} |
| .cart-header{padding:20px;border-bottom:2px solid var(--gl);display:flex;align-items:center;justify-content:space-between} |
| .cart-close{width:34px;height:34px;border:none;background:var(--gl);border-radius:9px;cursor:pointer;font-size:.9rem} |
| .cart-items{flex:1;overflow-y:auto;padding:16px} |
| .cart-item{display:flex;gap:12px;padding:12px;background:var(--l);border-radius:12px;margin-bottom:10px} |
| .cart-item-img{width:70px;height:70px;object-fit:contain;border-radius:8px;background:#fff;flex-shrink:0} |
| .cart-item-name{font-size:.8rem;font-weight:600;color:var(--d)} |
| .cart-item-price{font-size:.88rem;font-weight:800;color:var(--p);margin-top:4px} |
| .cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:6px} |
| .qty-btn{width:26px;height:26px;border:1px solid var(--gl);border-radius:6px;background:#fff;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center} |
| .qty-val{font-size:.82rem;font-weight:700;min-width:20px;text-align:center} |
| .cart-item-del{background:none;border:none;color:#dc3545;cursor:pointer;font-size:.85rem;margin-left:auto} |
| .cart-footer{padding:14px;border-top:2px solid var(--gl)} |
| .cart-total{display:flex;justify-content:space-between;font-size:.92rem;font-weight:800;color:var(--d)} |
| .cart-checkout-btn{width:100%;padding:14px;background:var(--a);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.92rem;cursor:pointer;margin-top:10px} |
| /* QUOTE MODAL */ |
| .quote-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;align-items:center;justify-content:center;padding:16px} |
| .quote-overlay.open{display:flex} |
| .quote-modal{background:#fff;border-radius:20px;max-width:960px;width:100%;max-height:92vh;overflow-y:auto;padding:0} |
| .quote-head{background:linear-gradient(135deg,var(--p),#0077b6);color:#fff;padding:24px 28px;border-radius:20px 20px 0 0} |
| .quote-head h2{font-size:1.2rem;font-weight:800;margin-bottom:4px} |
| .quote-head p{font-size:.8rem;opacity:.75} |
| .quote-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:none;background:rgba(255,255,255,.15);border-radius:9px;cursor:pointer;color:#fff;font-size:.9rem;display:flex;align-items:center;justify-content:center} |
| .quote-body{padding:24px 28px} |
| .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} |
| .quote-field label{display:block;font-size:.76rem;font-weight:600;color:var(--g);margin-bottom:4px} |
| .quote-field input{width:100%;padding:9px 12px;border:1.5px solid var(--gl);border-radius:8px;font-size:.84rem;outline:none} |
| .quote-table{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:8px} |
| .quote-table th{background:var(--p);color:#fff;padding:8px 6px;font-weight:600;text-align:center} |
| .quote-table td{padding:8px 6px;border-bottom:1px solid var(--gl);vertical-align:middle} |
| .quote-table .qt-img{width:72px;height:72px;object-fit:contain;border-radius:6px;background:var(--l);border:1px solid var(--gl)} |
| .quote-table .qt-name{font-weight:600;color:var(--d)} |
| .quote-table .qt-price{text-align:right;white-space:nowrap} |
| .quote-table .qt-disc{width:80px;padding:5px 6px;border:1.5px solid var(--gl);border-radius:6px;font-size:.78rem;text-align:right;outline:none} |
| .quote-table .qt-note{width:100%;padding:5px 6px;border:1.5px solid var(--gl);border-radius:6px;font-size:.78rem;outline:none} |
| .quote-total-row td{font-weight:800;font-size:.88rem;color:var(--p);border-top:2px solid var(--p)} |
| .quote-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center} |
| .quote-btn{padding:12px 24px;border:none;border-radius:10px;font-weight:700;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:8px} |
| .quote-btn-excel{background:#217346;color:#fff}.quote-btn-excel:hover{background:#1a5c38} |
| .quote-btn-pdf{background:#dc3545;color:#fff}.quote-btn-pdf:hover{background:#b02a37} |
| .quote-btn-print{background:var(--p);color:#fff}.quote-btn-print:hover{background:var(--pl)} |
| .footer{background:var(--d);color:rgba(255,255,255,.65);padding:44px 0 20px;margin-top:36px} |
| .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px} |
| .footer h4{color:#fff;font-size:.78rem;font-weight:700;margin-bottom:14px;text-transform:uppercase} |
| .footer-links{list-style:none}.footer-links li{margin-bottom:7px}.footer-links a{color:rgba(255,255,255,.5);font-size:.78rem}.footer-links a:hover{color:var(--a)} |
| @media(max-width:1024px){.sidebar{width:230px}.pg{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}} |
| @media(max-width:768px){.sidebar{display:none}.pg{grid-template-columns:repeat(2,1fr);gap:10px}.pi{height:150px}.pb{padding:10px}.pn{font-size:.75rem}.pp{font-size:.88rem}.detail-grid{grid-template-columns:1fr;padding:16px}.quote-modal{border-radius:12px}.cart-drawer{width:100%;max-width:100%}} |
| </style> |
| </head> |
| <body> |
| <div class="topbar"><div class="container"><div class="topbar-item"><i class="fas fa-truck-fast"></i> Miễn phí vận chuyển</div><div class="topbar-item"><i class="fas fa-shield-halved"></i> Bảo hành chính hãng</div><div class="topbar-item"><i class="fas fa-headset"></i> Hỗ trợ 24/7</div></div></div> |
| <header class="header"><div class="container"> |
| <div class="logo" onclick="goHome()"><img src="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_main.png" alt="V.AI STUDIO" style="height:44px;object-fit:contain"><div><div class="logo-name">V.AI <span>STUDIO</span></div><div class="logo-sub">Niềm tin khách hàng là tài sản của chúng tôi</div></div></div> |
| <div class="search-box"><i class="fas fa-search"></i><input type="text" id="q" placeholder="Tìm sản phẩm..." oninput="doSearch()"></div> |
| <div class="nav-icons"><a href="https://bot.zaloplatforms.com/bots/4013442364902370344" target="_blank" style="background:#0068FF;color:#fff"><i class="fas fa-comment-dots"></i></a><a href="#" onclick="openCart();return false" class="cart-badge"><i class="fas fa-shopping-cart"></i><span class="cart-num" id="cartNum" style="display:none">0</span></a></div> |
| </div></header> |
| <section class="hero"><div class="container"><img src="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_main.png" alt="V.AI STUDIO" style="height:80px;object-fit:contain;margin-bottom:12px"><h1>V.AI <span>STUDIO</span></h1><p>Thiết bị nhà bếp & khóa thông minh — Malloca, Eurogold, Grob, Canzy & Demax</p></div></section> |
| <div class="container"><div id="page-products" class="page-section active"><div id="listView"><div class="main"><aside class="sidebar" id="sidebar"><div class="sb-card"><h3><i class="fas fa-building"></i> Thương Hiệu</h3><div class="pr" id="br"></div></div><div class="sb-card"><h3><i class="fas fa-layer-group"></i> Danh Mục</h3><ul class="cat-list" id="cl"></ul></div></aside><main class="content"><div class="toolbar"><span class="result-count" id="rc"></span><div style="display:flex;gap:7px;align-items:center"><select class="sort-select" id="ss" onchange="doSort()"><option value="default">Mặc định</option><option value="pa">Giá: Thấp → Cao</option><option value="pd">Giá: Cao → Thấp</option></select><div class="view-btns"><button class="view-btn active" onclick="setV('g')"><i class="fas fa-th-large"></i></button><button class="view-btn" onclick="setV('l')"><i class="fas fa-list"></i></button></div></div></div><div class="pg" id="grid"></div><div class="pagination" id="pag"></div></main></div></div><div id="detailView"></div></div> |
| |
| <div class="cart-overlay" id="cartOverlay" onclick="if(event.target===this)closeCart()"><div class="cart-drawer" id="cartDrawer"><div class="cart-header"><h3 style="margin:0"><i class="fas fa-shopping-cart"></i> Giỏ hàng</h3><button class="cart-close" onclick="closeCart()">✕</button></div><div class="cart-items" id="cartItems"></div><div class="cart-footer"><div class="cart-total"><span>Tổng cộng</span><strong id="cartTotal">0đ</strong></div><button class="cart-checkout-btn" onclick="openCheckout()"><i class="fas fa-file-invoice"></i> Lập báo giá</button></div></div></div> |
| |
| <div class="quote-overlay" id="quoteOverlay"><div class="quote-modal"><div class="quote-head"><button class="quote-close" onclick="closeQuote()">✕</button><h2>BẢNG BÁO GIÁ</h2><div style="font-size:11px;margin-top:8px">Khách hàng: <span id="quoteCustomerName"></span></div></div><div class="quote-body"><table class="quote-table" id="quoteTable"><thead><tr><th>STT</th><th>Hình</th><th>Tên SP</th><th>Mã SP</th><th>SL</th><th>Đơn giá</th><th>CK</th><th>Thành tiền</th><th>Ghi chú</th></tr></thead><tbody></tbody></table><div id="quoteExtra" style="margin-top:10px;padding:10px;background:#f0fdf4;border-radius:6px;font-size:11px;display:none"><div><span>+ Phí giao hàng: <b id="feeGH"></b></span></div><div><span>+ Phí lắp đặt: <b id="feeLD"></b></span></div></div><div style="margin-top:10px;padding:10px 14px;background:#003f62;border-radius:6px;display:flex;justify-content:space-between;align-items:center"><span style="color:#fff;font-weight:800">TỔNG CỘNG</span><span style="color:#f0b840;font-weight:900;font-size:15px" id="quoteGrandTotal">0đ</span></div><div style="margin-top:6px;padding:6px 12px;background:#f0fdf4;font-size:12px;display:none" id="quoteDepositRow"><span>Đặt cọc: <b id="quoteDeposit">0đ</b></span> | <span>Còn lại: <b style="color:#dc2626" id="quoteRemaining">0đ</b></span></div><div id="quoteNotes" style="margin-top:8px;padding:6px 10px;background:#fef3c7;border-radius:6px;font-size:11px;color:#92400e;display:none"><b>Ghi chú:</b> <span id="quoteNotesText"></span></div><div class="quote-actions"><button class="quote-btn quote-btn-excel" onclick="exportExcel()"><i class="fas fa-file-excel"></i> Xuất Excel</button><button class="quote-btn quote-btn-pdf" onclick="exportPDF()"><i class="fas fa-file-pdf"></i> PDF</button><button class="quote-btn quote-btn-print" style="background:#64748b" onclick="window.print()"><i class="fas fa-print"></i> In</button></div></div></div></div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
|
|
| |
| <script src="qr-payment-v1043-FIXED.js"></script> |
| <script src="order-store.js"></script> |
|
|
| <script>console.log('[VAI] App loaded - Excel fix ready v1043');</script> |
| </body> |
| </html> |
