Add Catalogue, Contact, Cart + QR Napas VIB payment

index.html

@@ -212,6 +212,106 @@ img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
 }
 
 .fade{opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}.fade.vis{opacity:1;transform:none}
+
+/* ===== NAV TABS ===== */
+.nav-tabs{display:flex;gap:2px;margin-left:16px}
+.nav-tab{padding:8px 14px;border-radius:9px;font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--t);color:var(--g);position:relative}
+.nav-tab:hover{color:var(--p);background:rgba(0,63,98,.04)}
+.nav-tab.active{color:var(--p);background:rgba(0,63,98,.08)}
+
+/* ===== CART BADGE ===== */
+.cart-badge{position:relative}
+.cart-num{position:absolute;top:-4px;right:-4px;background:var(--a);color:#fff;font-size:.55rem;font-weight:800;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
+
+/* ===== PAGE SECTIONS ===== */
+.page-section{display:none;padding:28px 0;min-height:60vh}
+.page-section.active{display:block}
+
+/* ===== CATALOGUE ===== */
+.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:24px}
+.cat-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:var(--t);cursor:pointer;border:2px solid transparent}
+.cat-card:hover{border-color:var(--p);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
+.cat-card img{width:100%;height:200px;object-fit:cover}
+.cat-card-body{padding:16px;text-align:center}
+.cat-card-body h3{font-size:.95rem;font-weight:700;color:var(--d);margin-bottom:6px}
+.cat-card-body p{font-size:.78rem;color:var(--g)}
+.cat-iframe-wrap{margin-top:20px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.06)}
+.cat-iframe-wrap iframe{width:100%;height:80vh;border:none}
+.cat-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:16px}
+
+/* ===== CONTACT ===== */
+.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:24px}
+.contact-card{background:#fff;border-radius:var(--r);padding:28px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
+.contact-card h3{font-size:1.1rem;font-weight:700;color:var(--d);margin-bottom:20px;display:flex;align-items:center;gap:10px}
+.contact-card h3 i{color:var(--a)}
+.contact-info{list-style:none}
+.contact-info li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--gl);font-size:.88rem;color:var(--d)}
+.contact-info li:last-child{border:none}
+.contact-info li i{color:var(--p);width:20px;text-align:center;margin-top:3px}
+.form-group{margin-bottom:16px}
+.form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--d);margin-bottom:6px}
+.form-input{width:100%;padding:10px 14px;border:2px solid var(--gl);border-radius:10px;font-size:.85rem;font-family:inherit;outline:none;transition:var(--t)}
+.form-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(0,63,98,.08)}
+textarea.form-input{height:120px;resize:vertical}
+.form-btn{padding:12px 28px;background:var(--p);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;transition:var(--t);width:100%}
+.form-btn:hover{background:var(--pl)}
+.map-wrap{margin-top:20px;border-radius:12px;overflow:hidden;height:280px}
+.map-wrap iframe{width:100%;height:100%;border:none}
+
+/* ===== CART DRAWER ===== */
+.cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;backdrop-filter:blur(3px)}
+.cart-overlay.open{display:block}
+.cart-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:90vw;height:100vh;background:#fff;z-index:201;transition:right .35s ease;display:flex;flex-direction:column;box-shadow:-4px 0 30px rgba(0,0,0,.15)}
+.cart-drawer.open{right:0}
+.cart-header{padding:20px;border-bottom:2px solid var(--gl);display:flex;align-items:center;justify-content:space-between}
+.cart-header h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px}
+.cart-header h3 i{color:var(--a)}
+.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-info{flex:1;min-width:0}
+.cart-item-name{font-size:.8rem;font-weight:600;color:var(--d);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.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;padding:4px}
+.cart-empty{text-align:center;padding:40px;color:var(--g)}
+.cart-empty i{font-size:2.5rem;opacity:.3;display:block;margin-bottom:12px}
+.cart-footer{padding:16px 20px;border-top:2px solid var(--gl);background:#fff}
+.cart-total{display:flex;justify-content:space-between;font-size:1rem;font-weight:800;color:var(--d);margin-bottom:14px}
+.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;font-family:inherit;transition:var(--t);display:flex;align-items:center;justify-content:center;gap:8px}
+.cart-checkout-btn:hover{background:var(--al);transform:translateY(-1px)}
+
+/* ===== CHECKOUT MODAL ===== */
+.checkout-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
+.checkout-overlay.open{display:flex}
+.checkout-modal{background:#fff;border-radius:20px;max-width:550px;width:100%;max-height:92vh;overflow-y:auto;padding:32px;position:relative}
+.checkout-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:none;background:var(--gl);border-radius:9px;cursor:pointer;font-size:.9rem}
+.checkout-title{font-size:1.3rem;font-weight:800;color:var(--d);margin-bottom:4px}
+.checkout-sub{font-size:.82rem;color:var(--g);margin-bottom:24px}
+.checkout-summary{background:var(--l);border-radius:12px;padding:16px;margin-bottom:20px}
+.checkout-summary-item{display:flex;justify-content:space-between;font-size:.82rem;padding:4px 0;color:var(--d)}
+.checkout-summary-item.total{font-weight:800;font-size:1rem;color:var(--p);border-top:2px solid var(--gl);padding-top:10px;margin-top:8px}
+.qr-section{text-align:center;background:var(--l);border-radius:16px;padding:24px;margin:20px 0}
+.qr-section img{max-width:260px;margin:0 auto 16px;border-radius:12px;border:3px solid var(--gl)}
+.qr-bank-info{font-size:.82rem;color:var(--d);line-height:1.8}
+.qr-bank-info strong{color:var(--p)}
+.copy-btn{display:inline-flex;align-items:center;gap:4px;background:var(--p);color:#fff;border:none;padding:4px 10px;border-radius:6px;font-size:.7rem;cursor:pointer;font-family:inherit;margin-left:6px}
+.checkout-note{font-size:.78rem;color:var(--g);text-align:center;margin-top:16px;line-height:1.6}
+.checkout-done-btn{width:100%;padding:14px;background:var(--p);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.92rem;cursor:pointer;font-family:inherit;margin-top:16px}
+
+/* ADD TO CART BTN (in detail) */
+.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;transition:var(--t);border:none;cursor:pointer;font-family:inherit}
+.add-cart-btn:hover{background:var(--al);transform:translateY(-2px);box-shadow:0 8px 20px rgba(219,152,21,.3)}
+
+@media(max-width:768px){
+.nav-tabs{display:none}
+.contact-grid{grid-template-columns:1fr}
+.cart-drawer{width:100%;max-width:100%}
+}
+
 </style>
 </head>
 <body>
@@ -226,9 +326,13 @@ img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
 <header class="header"><div class="container">
 <div class="logo" onclick="goHome()"><div class="logo-box">M</div><div><div class="logo-name">MALL<span>OCA</span></div><div class="logo-sub">Smart Kitchen &bull; Smart Life</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... (bếp từ, máy hút mùi, chậu rửa...)" oninput="doSearch()"><span class="search-count" id="sc"></span></div>
+<div class="nav-tabs">
+<div class="nav-tab active" data-page="products" onclick="showPage('products')"><i class="fas fa-th-large"></i> Sản Phẩm</div>
+<div class="nav-tab" data-page="catalogue" onclick="showPage('catalogue')"><i class="fas fa-book-open"></i> Catalogue</div>
+<div class="nav-tab" data-page="contact" onclick="showPage('contact')"><i class="fas fa-envelope"></i> Liên Hệ</div>
+</div>
 <div class="nav-icons">
-<a href="https://malloca.com/catalogue" target="_blank" title="Catalogue"><i class="fas fa-book-open"></i></a>
-<a href="https://malloca.com/he-thong-showroom" target="_blank" title="Showroom"><i class="fas fa-location-dot"></i></a>
+<a href="#" onclick="openCart();return false" title="Giỏ hàng" class="cart-badge"><i class="fas fa-shopping-cart"></i><span class="cart-num" id="cartNum" style="display:none">0</span></a>
 </div>
 <button class="hamburger" onclick="document.getElementById('msb').classList.toggle('open')"><span></span><span></span><span></span></button>
 </div></header>
@@ -245,7 +349,7 @@ img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
 
 <div class="container">
 <!-- LIST VIEW -->
-<div id="listView">
+<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-layer-group"></i> Danh Mục</h3><ul class="cat-list" id="cl"></ul></div>
@@ -265,17 +369,90 @@ img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
 </div>
 </div>
 
+</div><!-- /page-products -->
 <!-- DETAIL VIEW -->
 <div id="detailView"></div>
+
+<!-- CATALOGUE PAGE -->
+<div class="page-section" id="page-catalogue">
+<div class="section-header" style="text-align:center;margin-bottom:10px">
+<h2 style="font-size:1.8rem;font-weight:800;color:var(--d)"><i class="fas fa-book-open" style="color:var(--a);margin-right:10px"></i>Catalogue <span style="color:var(--a)">Malloca</span></h2>
+<p style="color:var(--g);font-size:.9rem;max-width:500px;margin:10px auto 0">Xem catalogue sản phẩm trực tuyến — Bếp, Máy hút, Lò nướng, Chậu vòi và Bảng giá</p>
+</div>
+<div class="cat-grid" id="cat-list-page"></div>
+<div id="cat-viewer" style="display:none"></div>
+</div>
+
+<!-- CONTACT PAGE -->
+<div class="page-section" id="page-contact">
+<div class="section-header" style="text-align:center;margin-bottom:10px">
+<h2 style="font-size:1.8rem;font-weight:800;color:var(--d)"><i class="fas fa-envelope" style="color:var(--a);margin-right:10px"></i>Liên Hệ <span style="color:var(--a)">Malloca</span></h2>
+<p style="color:var(--g);font-size:.9rem;max-width:500px;margin:10px auto 0">Liên hệ trực tiếp hoặc gửi tin nhắn — chúng tôi sẵn sàng hỗ trợ bạn</p>
+</div>
+<div class="contact-grid">
+<div class="contact-card">
+<h3><i class="fas fa-building"></i> Thông Tin Liên Hệ</h3>
+<ul class="contact-info">
+<li><i class="fas fa-map-marker-alt"></i><div><strong>Showroom Hà Nội</strong><br>10 Chương Dương Độ, Hoàn Kiếm, Hà Nội</div></li>
+<li><i class="fas fa-phone"></i><div><strong>Hotline</strong><br><a href="tel:18001212" style="color:var(--p);font-weight:700">1800 1212</a> (Miễn phí)</div></li>
+<li><i class="fas fa-envelope"></i><div><strong>Email</strong><br><a href="mailto:info@malloca.com" style="color:var(--p)">info@malloca.com</a></div></li>
+<li><i class="fas fa-clock"></i><div><strong>Giờ làm việc</strong><br>Thứ 2 - Thứ 7: 8:00 - 17:30<br>Chủ nhật: 9:00 - 12:00</div></li>
+<li><i class="fas fa-globe"></i><div><strong>Website</strong><br><a href="https://malloca.com" target="_blank" style="color:var(--p)">malloca.com</a></div></li>
+</ul>
+<div style="display:flex;gap:8px;margin-top:16px">
+<a href="https://www.facebook.com/CongTyMalloca" target="_blank" style="padding:10px 16px;background:var(--p);color:#fff;border-radius:10px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fab fa-facebook-f"></i> Facebook</a>
+<a href="https://www.youtube.com/@mallocakitchenware" target="_blank" style="padding:10px 16px;background:#dc3545;color:#fff;border-radius:10px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fab fa-youtube"></i> YouTube</a>
+<a href="https://www.tiktok.com/@mallocavietnam" target="_blank" style="padding:10px 16px;background:#000;color:#fff;border-radius:10px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fab fa-tiktok"></i> TikTok</a>
+</div>
+</div>
+<div class="contact-card">
+<h3><i class="fas fa-paper-plane"></i> Gửi Tin Nhắn</h3>
+<form onsubmit="submitContact(event)">
+<div class="form-group"><label>Họ tên *</label><input class="form-input" id="ctName" placeholder="Nhập họ tên" required></div>
+<div class="form-group"><label>Email *</label><input class="form-input" id="ctEmail" type="email" placeholder="email@example.com" required></div>
+<div class="form-group"><label>Số điện thoại</label><input class="form-input" id="ctPhone" placeholder="Nhập SĐT"></div>
+<div class="form-group"><label>Nội dung *</label><textarea class="form-input" id="ctMsg" placeholder="Nhập nội dung liên hệ..." required></textarea></div>
+<button type="submit" class="form-btn"><i class="fas fa-paper-plane"></i> Gửi Tin Nhắn</button>
+</form>
+</div>
+</div>
+</div>
+
 </div>
 
 <!-- MOBILE SIDEBAR -->
 <div class="msb" id="msb">
-<div class="msb-h"><h3 style="font-weight:700">Bộ lọc</h3><button class="msb-close" onclick="this.closest('.msb').classList.remove('open')"><i class="fas fa-times"></i></button></div>
+<div class="msb-h"><h3 style="font-weight:700">Menu</h3><button class="msb-close" onclick="this.closest('.msb').classList.remove('open')"><i class="fas fa-times"></i></button></div>
+<div style="display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:2px solid var(--gl)">
+<div style="padding:12px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem" onclick="closeMsb();showPage('products')"><i class="fas fa-th-large" style="margin-right:8px;color:var(--a)"></i> Sản Phẩm</div>
+<div style="padding:12px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem" onclick="closeMsb();showPage('catalogue')"><i class="fas fa-book-open" style="margin-right:8px;color:var(--a)"></i> Catalogue</div>
+<div style="padding:12px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem" onclick="closeMsb();showPage('contact')"><i class="fas fa-envelope" style="margin-right:8px;color:var(--a)"></i> Liên Hệ</div>
+<div style="padding:12px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem" onclick="closeMsb();openCart()"><i class="fas fa-shopping-cart" style="margin-right:8px;color:var(--a)"></i> Giỏ Hàng</div>
+</div>
 <div class="sb-card"><h3><i class="fas fa-layer-group"></i> Danh Mục</h3><ul class="cat-list" id="clm"></ul></div>
 <div class="sb-card"><h3><i class="fas fa-tag"></i> Khoảng Giá</h3><div class="pr" id="prm"></div></div>
 </div>
 
+
+<!-- CART DRAWER -->
+<div class="cart-overlay" id="cartOverlay" onclick="closeCart()"></div>
+<div class="cart-drawer" id="cartDrawer">
+<div class="cart-header"><h3><i class="fas fa-shopping-cart"></i> Giỏ Hàng</h3><button class="cart-close" onclick="closeCart()"><i class="fas fa-times"></i></button></div>
+<div class="cart-items" id="cartItems"></div>
+<div class="cart-footer" id="cartFooter" style="display:none">
+<div class="cart-total"><span>Tổng cộng:</span><span id="cartTotal">0đ</span></div>
+<button class="cart-checkout-btn" onclick="openCheckout()"><i class="fas fa-qrcode"></i> Thanh toán QR Banking</button>
+</div>
+</div>
+
+<!-- CHECKOUT MODAL -->
+<div class="checkout-overlay" id="checkoutOverlay" onclick="if(event.target===this)closeCheckout()">
+<div class="checkout-modal">
+<button class="checkout-close" onclick="closeCheckout()"><i class="fas fa-times"></i></button>
+<div id="checkoutContent"></div>
+</div>
+</div>
+
 <footer class="footer"><div class="container">
 <div class="footer-grid">
 <div class="footer-brand"><div class="logo-name" style="color:#fff;font-size:1.1rem">MALL<span style="color:var(--a)">OCA</span></div><p>363 sản phẩm với dữ liệu chi tiết đầy đủ — hình ảnh, thông số kỹ thuật, mô tả, tính năng — tích hợp trực tiếp từ malloca.com.</p>
@@ -416,7 +593,8 @@ ${p.summary?`<div class="detail-summary">${p.summary}</div>`:''}
 <div class="detail-badge"><i class="fas fa-truck-fast"></i> Miễn phí lắp đặt</div>
 </div>
 <div style="display:flex;gap:10px;flex-wrap:wrap">
-<a href="${p.link}" target="_blank" class="detail-btn"><i class="fas fa-external-link-alt"></i> Xem trên malloca.com</a>
+<button class="add-cart-btn" onclick="event.stopPropagation();addToCart(${idx})"><i class="fas fa-cart-plus"></i> Thêm vào giỏ</button>
+<a href="${p.link}" target="_blank" class="detail-btn detail-btn-outline"><i class="fas fa-external-link-alt"></i> malloca.com</a>
 </div>
 </div>
 </div>
@@ -462,6 +640,214 @@ function resetAll(){S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:
 function updActive(sel,attr,val){document.querySelectorAll(sel).forEach(e=>e.classList.toggle('active',e.getAttribute(attr)===val))}
 function closeMsb(){document.getElementById('msb').classList.remove('open')}
 document.addEventListener('keydown',e=>{if(e.key==='Escape')goBack();if(e.key==='/'&&document.activeElement.tagName!=='INPUT'){e.preventDefault();document.getElementById('q').focus()}});
+
+// ===== CATALOGUE DATA =====
+const CATALOGUES=[
+{name:'Catalogue Bếp',img:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_1_1.jpg?1777012815229',url:'https://catalogue.malloca.com/catalogue-bep/page/1',desc:'Bếp từ, bếp gas, bếp kết hợp'},
+{name:'Catalogue Máy Hút',img:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_1_3.jpg?1777012815229',url:'https://catalogue.malloca.com/catalogue-may-hut/page/1',desc:'Máy hút khói khử mùi các loại'},
+{name:'Catalogue Lò Nướng & Vi Sóng',img:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_2_1.jpg?1777012815229',url:'https://catalogue.malloca.com/catalogue-lo/page/1',desc:'Lò nướng, lò hấp, lò vi sóng'},
+{name:'Catalogue Chậu & Vòi',img:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_2_2.jpg?1777012815229',url:'https://catalogue.malloca.com/catalogue-chau-voi-royol6p8w4z4/page/1',desc:'Chậu rửa chén, vòi rửa chén'},
+{name:'Catalogue Sản Phẩm Khác',img:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_2_3.jpg?1777012815229',url:'https://catalogue.malloca.com/catalogue-san-pham-khac/page/1',desc:'Tủ lạnh, tủ rượu, máy rửa chén...'},
+{name:'Bảng Giá',img:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_3_1.jpg?1777012815229',url:'https://catalogue.malloca.com/catalogue-bang-gia/page/1',desc:'Bảng giá sản phẩm Malloca'},
+{name:'Catalogue Master 2023',img:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_3_3.jpg?1777012815229',url:'https://catalogue.malloca.com/malloca_catalog_master/page/1',desc:'Tổng hợp toàn bộ sản phẩm'}
+];
+
+// ===== NAVIGATION =====
+let currentPage='products';
+
+function showPage(page){
+currentPage=page;
+document.querySelectorAll('.page-section').forEach(s=>s.classList.remove('active'));
+document.querySelectorAll('.nav-tab').forEach(t=>t.classList.remove('active'));
+let el=document.getElementById('page-'+page);
+if(el)el.classList.add('active');
+let tab=document.querySelector(`.nav-tab[data-page="${page}"]`);
+if(tab)tab.classList.add('active');
+if(page==='products'){
+document.getElementById('listView').style.display='';
+document.querySelector('.hero').style.display='';
+}else{
+document.getElementById('listView').style.display='none';
+document.getElementById('detailView').classList.remove('show');
+document.getElementById('detailView').innerHTML='';
+document.querySelector('.hero').style.display='none';
+}
+window.scrollTo({top:0,behavior:'smooth'});
+}
+
+function initCatalogue(){
+let catListEl=document.getElementById('cat-list-page');
+if(!catListEl)return;
+catListEl.innerHTML=CATALOGUES.map((c,i)=>`<div class="cat-card" onclick="openCatalogue(${i})"><img src="${c.img}" alt="${c.name}" loading="lazy"><div class="cat-card-body"><h3>${c.name}</h3><p>${c.desc}</p></div></div>`).join('');
+}
+
+function openCatalogue(i){
+let c=CATALOGUES[i];
+let el=document.getElementById('cat-viewer');
+let listEl=document.getElementById('cat-list-page');
+listEl.style.display='none';
+el.style.display='block';
+el.innerHTML=`<div class="cat-back" onclick="closeCatalogueViewer()"><i class="fas fa-arrow-left"></i> Quay lại danh sách catalogue</div><h3 style="font-size:1.2rem;font-weight:700;margin-bottom:16px">${c.name}</h3><div class="cat-iframe-wrap"><iframe src="${c.url}" loading="lazy" allowfullscreen></iframe></div>`;
+}
+
+function closeCatalogueViewer(){
+document.getElementById('cat-viewer').style.display='none';
+document.getElementById('cat-list-page').style.display='grid';
+}
+
+// ===== CART =====
+let cart=JSON.parse(localStorage.getItem('malloca_cart')||'[]');
+
+function updateCartBadge(){
+let n=cart.reduce((s,i)=>s+i.qty,0);
+let badge=document.getElementById('cartNum');
+if(badge){badge.textContent=n;badge.style.display=n>0?'flex':'none'}
+}
+
+function addToCart(idx){
+let p=D[idx];
+let exist=cart.find(c=>c.idx===idx);
+if(exist){exist.qty++}else{cart.push({idx,name:p.name,price:p.price,priceNum:p.priceNum,image:p.image,qty:1})}
+localStorage.setItem('malloca_cart',JSON.stringify(cart));
+updateCartBadge();
+openCart();
+}
+
+function removeFromCart(i){
+cart.splice(i,1);
+localStorage.setItem('malloca_cart',JSON.stringify(cart));
+updateCartBadge();renderCart();
+}
+
+function changeQty(i,delta){
+cart[i].qty+=delta;
+if(cart[i].qty<1)cart.splice(i,1);
+localStorage.setItem('malloca_cart',JSON.stringify(cart));
+updateCartBadge();renderCart();
+}
+
+function openCart(){
+document.getElementById('cartOverlay').classList.add('open');
+document.getElementById('cartDrawer').classList.add('open');
+document.body.style.overflow='hidden';
+renderCart();
+}
+
+function closeCart(){
+document.getElementById('cartOverlay').classList.remove('open');
+document.getElementById('cartDrawer').classList.remove('open');
+document.body.style.overflow='';
+}
+
+function renderCart(){
+let el=document.getElementById('cartItems');
+let footer=document.getElementById('cartFooter');
+if(!cart.length){
+el.innerHTML=`<div class="cart-empty"><i class="fas fa-shopping-bag"></i><h3>Giỏ hàng trống</h3><p style="font-size:.82rem">Thêm sản phẩm vào giỏ để đặt hàng</p></div>`;
+footer.style.display='none';
+return;
+}
+footer.style.display='block';
+el.innerHTML=cart.map((c,i)=>`<div class="cart-item"><img src="${c.image}" alt="${c.name}"><div class="cart-item-info"><div class="cart-item-name">${c.name}</div><div class="cart-item-price">${c.price}</div><div class="cart-item-qty"><button class="qty-btn" onclick="changeQty(${i},-1)">−</button><span class="qty-val">${c.qty}</span><button class="qty-btn" onclick="changeQty(${i},1)">+</button></div></div><button class="cart-item-del" onclick="removeFromCart(${i})"><i class="fas fa-trash"></i></button></div>`).join('');
+let total=cart.reduce((s,c)=>s+c.priceNum*c.qty,0);
+document.getElementById('cartTotal').textContent=total.toLocaleString('vi-VN')+'đ';
+}
+
+// ===== CHECKOUT =====
+function openCheckout(){
+closeCart();
+let overlay=document.getElementById('checkoutOverlay');
+overlay.classList.add('open');
+document.body.style.overflow='hidden';
+let total=cart.reduce((s,c)=>s+c.priceNum*c.qty,0);
+let totalStr=total.toLocaleString('vi-VN')+'đ';
+// Build order summary
+let itemsHtml=cart.map(c=>`<div class="checkout-summary-item"><span>${c.name} x${c.qty}</span><span style="font-weight:600">${(c.priceNum*c.qty).toLocaleString('vi-VN')}đ</span></div>`).join('');
+// Build QR URL (VietQR standard)
+let qrUrl=`https://img.vietqr.io/image/VIB-918258385-compact2.jpg?amount=${total}&addInfo=${encodeURIComponent('Thanh toan don hang Malloca')}&accountName=${encodeURIComponent('TRAN QUOC VUONG')}`;
+document.getElementById('checkoutContent').innerHTML=`
+<h2 class="checkout-title"><i class="fas fa-qrcode" style="color:var(--a)"></i> Thanh Toán Đơn Hàng</h2>
+<p class="checkout-sub">Quét mã QR để thanh toán qua ứng dụng ngân hàng</p>
+<div class="checkout-summary">${itemsHtml}<div class="checkout-summary-item total"><span>Tổng cộng</span><span>${totalStr}</span></div></div>
+<div class="form-group"><label>Họ tên người nhận *</label><input class="form-input" id="coName" placeholder="Nhập họ tên"></div>
+<div class="form-group"><label>Số điện thoại *</label><input class="form-input" id="coPhone" placeholder="Nhập SĐT"></div>
+<div class="form-group"><label>Địa chỉ giao hàng *</label><input class="form-input" id="coAddr" placeholder="Nhập địa chỉ đầy đủ"></div>
+<div class="form-group"><label>Ghi chú</label><textarea class="form-input" id="coNote" placeholder="Ghi chú đơn hàng (nếu có)" style="height:70px"></textarea></div>
+<div class="qr-section">
+<h3 style="font-size:1rem;font-weight:700;margin-bottom:14px"><i class="fas fa-university" style="color:var(--p);margin-right:6px"></i> Chuyển khoản ngân hàng</h3>
+<img src="${qrUrl}" alt="QR Thanh toán" onerror="this.parentElement.innerHTML+='<p style=color:red>Không tải được QR. Vui lòng chuyển khoản thủ công.</p>'">
+<div class="qr-bank-info">
+<strong>Ngân hàng:</strong> VIB - Ngân hàng TMCP Quốc Tế Việt Nam<br>
+<strong>Số TK:</strong> 918258385 <button class="copy-btn" onclick="copyText('918258385')"><i class="fas fa-copy"></i> Copy</button><br>
+<strong>Chủ TK:</strong> TRẦN QUỐC VƯƠNG<br>
+<strong>Số tiền:</strong> <span style="color:var(--p);font-weight:800">${totalStr}</span><br>
+<strong>Nội dung CK:</strong> Thanh toan don hang Malloca <button class="copy-btn" onclick="copyText('Thanh toan don hang Malloca')"><i class="fas fa-copy"></i> Copy</button>
+</div>
+</div>
+<button class="checkout-done-btn" onclick="confirmOrder()"><i class="fas fa-check-circle"></i> Xác nhận đã thanh toán</button>
+<p class="checkout-note">Đơn hàng sẽ được xử lý sau khi xác nhận thanh toán thành công.<br>Hotline hỗ trợ: <strong>1800 1212</strong></p>`;
+}
+
+function closeCheckout(){
+document.getElementById('checkoutOverlay').classList.remove('open');
+document.body.style.overflow='';
+}
+
+function copyText(text){
+navigator.clipboard.writeText(text).then(()=>{
+let btns=document.querySelectorAll('.copy-btn');
+btns.forEach(b=>{if(b.previousSibling&&b.previousSibling.textContent&&b.previousSibling.textContent.includes(text)){b.innerHTML='<i class="fas fa-check"></i> Đã copy';setTimeout(()=>{b.innerHTML='<i class="fas fa-copy"></i> Copy'},2000)}});
+});
+}
+
+function confirmOrder(){
+let name=document.getElementById('coName').value.trim();
+let phone=document.getElementById('coPhone').value.trim();
+let addr=document.getElementById('coAddr').value.trim();
+if(!name||!phone||!addr){alert('Vui lòng điền đầy đủ Họ tên, SĐT và Địa chỉ.');return}
+// Clear cart
+cart=[];localStorage.setItem('malloca_cart','[]');updateCartBadge();
+// Show success
+document.getElementById('checkoutContent').innerHTML=`
+<div style="text-align:center;padding:40px 0">
+<div style="width:80px;height:80px;background:rgba(40,167,69,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px"><i class="fas fa-check" style="font-size:2rem;color:#28a745"></i></div>
+<h2 style="font-size:1.4rem;font-weight:800;color:var(--d);margin-bottom:8px">Đặt hàng thành công!</h2>
+<p style="color:var(--g);font-size:.9rem;margin-bottom:24px">Cảm ơn bạn đã đặt hàng. Chúng tôi sẽ liên hệ xác nhận trong thời gian sớm nhất.</p>
+<div style="background:var(--l);border-radius:12px;padding:16px;text-align:left;font-size:.85rem;color:var(--d);line-height:1.8">
+<strong>Người nhận:</strong> ${name}<br>
+<strong>SĐT:</strong> ${phone}<br>
+<strong>Địa chỉ:</strong> ${addr}
+</div>
+<button class="checkout-done-btn" onclick="closeCheckout();showPage('products')" style="margin-top:20px"><i class="fas fa-home"></i> Về trang chủ</button>
+</div>`;
+}
+
+// Contact form
+function submitContact(e){
+e.preventDefault();
+let form=e.target;
+let name=form.querySelector('#ctName').value;
+let email=form.querySelector('#ctEmail').value;
+let msg=form.querySelector('#ctMsg').value;
+if(!name||!email||!msg){alert('Vui lòng điền đầy đủ thông tin.');return}
+form.innerHTML=`<div style="text-align:center;padding:30px"><i class="fas fa-check-circle" style="font-size:2.5rem;color:#28a745;margin-bottom:12px;display:block"></i><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:8px">Gửi thành công!</h3><p style="color:var(--g);font-size:.88rem">Cảm ơn bạn đã liên hệ. Chúng tôi sẽ phản hồi sớm nhất có thể.</p></div>`;
+}
+
+// Override goHome to also handle page nav
+let _origGoHome=goHome;
+goHome=function(){
+if(document.getElementById('detailView').classList.contains('show')){
+goBack();
+}
+showPage('products');resetAll();
+}
+
+// Init on load
+document.addEventListener('DOMContentLoaded',()=>{
+initCatalogue();
+updateCartBadge();
+});
+
 </script>
 </body>
 </html>