V.AISTUDIOv2

Running

File size: 139,251 Bytes

<!DOCTYPE html>
<html lang="vi">
<head>
<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 — 2134 sản phẩm thiết bị nhà bếp & khóa thông minh Malloca, Eurogold, Grob, Canzy & Demax chính hãng. Niềm tin khách hàng là tài sản của chúng tôi.">
<link rel="icon" href="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<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)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--p);border-radius:3px}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
.container{max-width:1360px;margin:0 auto;padding:0 20px}

/* TOPBAR */
.topbar{background:var(--p);color:#fff;padding:6px 0;font-size:.72rem}
.topbar .container{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.topbar-item{display:flex;align-items:center;gap:6px}
.topbar-item i{color:var(--a);font-size:.65rem}

/* HEADER */
.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;flex-shrink:0;cursor:pointer}
.logo-box{width:40px;height:40px;background:var(--p);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1rem}
.logo-name{font-size:1.3rem;font-weight:900;color:var(--p);letter-spacing:1.5px}
.logo-name span{color:var(--a)}
.logo-sub{font-size:.55rem;color:var(--g);letter-spacing:2px;text-transform:uppercase}

/* SEARCH */
.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;font-family:inherit;background:#fff;transition:var(--t);outline:none}
.search-box input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(0,63,98,.08)}
.search-box>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--g);font-size:.85rem}
.search-count{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.68rem;color:var(--g);background:var(--l);padding:2px 7px;border-radius:6px}

.nav-icons{display:flex;gap:6px;flex-shrink:0}
.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);transition:var(--t);font-size:.85rem}
.nav-icons a:hover{background:var(--p);color:#fff}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:20px;height:2px;background:var(--p);margin:4px 0}

/* HERO */
.hero{background:linear-gradient(135deg,var(--p),var(--pl),#0077b6);padding:40px 0;text-align:center;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;top:-40%;right:-15%;width:500px;height:500px;background:radial-gradient(circle,rgba(219,152,21,.1),transparent 70%);border-radius:50%}
.hero .container{position:relative;z-index:2}
.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;max-width:550px;margin:0 auto 20px;line-height:1.5}
.hero-stats{display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
.hero-stat{color:#fff;text-align:center}.hero-stat strong{display:block;font-size:1.6rem;font-weight:900}.hero-stat span{font-size:.7rem;opacity:.7}

/* LAYOUT */
.main{display:flex;gap:22px;padding:28px 0}
.sidebar{width:260px;flex-shrink:0;position:sticky;top:76px;height:fit-content}
.content{flex:1;min-width:0}

/* SIDEBAR */
.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;font-weight:500;display:flex;align-items:center;gap:9px;color:var(--d);margin-bottom:1px}
.cat-item:hover{background:rgba(0,63,98,.04);color:var(--p)}
.cat-item.active{background:var(--p);color:#fff}
.cat-count{margin-left:auto;font-size:.65rem;opacity:.6;background:rgba(0,0,0,.05);padding:2px 7px;border-radius:20px}
.cat-item.active .cat-count{background:rgba(255,255,255,.2)}
.cat-item i{width:18px;text-align:center;font-size:.8rem}
.cat-sub{font-size:.72rem;padding:5px 10px 5px 18px;opacity:.85}
.cat-sub:hover{opacity:1}
.pr{display:flex;flex-direction:column;gap:3px}
.pr-item{padding:7px 10px;border-radius:8px;cursor:pointer;font-size:.76rem;transition:var(--t);display:flex;align-items:center;gap:7px}
.pr-item:hover{background:rgba(0,63,98,.04)}
.pr-item.active{background:var(--p);color:#fff}
.pr-dot{width:7px;height:7px;border-radius:50%;border:2px solid var(--gl)}
.pr-item.active .pr-dot{border-color:#fff;background:#fff}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.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;font-family:inherit;background:#fff;cursor:pointer;outline:none;font-weight:500}
.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);transition:var(--t);font-size:.75rem}
.view-btn.active{border-color:var(--p);color:var(--p);background:rgba(0,63,98,.04)}

/* GRID */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pg.lv{grid-template-columns:1fr}
.pg.lv .pc{display:flex}.pg.lv .pc .pi{width:180px;height:140px;flex-shrink:0}.pg.lv .pc .pb{flex:1}

/* CARD */
.pc{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:var(--t);cursor:pointer;border:2px solid transparent}
.pc:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:var(--p)}
.pi{height:200px;overflow:hidden;position:relative;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)}
.pi-badge{position:absolute;top:8px;left:8px;background:var(--p);color:#fff;padding:3px 8px;border-radius:5px;font-size:.6rem;font-weight:700}
.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;min-height:2.2em}
.pp{font-size:1rem;font-weight:800;color:var(--p)}
.pf{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.pf i{color:var(--a);font-size:.8rem}

/* PAGINATION */
.pagination{display:flex;justify-content:center;gap:5px;margin-top:26px;flex-wrap:wrap}
.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;transition:var(--t)}
.pgb:hover{border-color:var(--p);color:var(--p)}
.pgb.active{background:var(--p);color:#fff;border-color:var(--p)}
.pgb:disabled{opacity:.3;cursor:default}
#catTabs{display:flex;gap:6px;padding:4px 0 12px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#catTabs::-webkit-scrollbar{display:none}
#catTabs .ctab{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:2px solid var(--gl);border-radius:50px;cursor:pointer;background:#fff;font-size:.78rem;font-weight:600;transition:var(--t);white-space:nowrap;flex-shrink:0;color:var(--d);line-height:1}
#catTabs .ctab:hover{border-color:var(--p);color:var(--p);background:rgba(0,63,98,.03)}
#catTabs .ctab.active{background:var(--p);color:#fff;border-color:var(--p)}
#catTabs .ctab i{font-size:.7rem}
#catTabs .ctab .cnt{font-size:.6rem;opacity:.65;margin-left:2px}
#catTabs .ctab.active .cnt{opacity:.8}
@media(max-width:768px){#catTabs .ctab{padding:7px 12px;font-size:.7rem}}
.pg-dots{display:flex;align-items:center;font-size:.8rem;color:var(--g);padding:0 4px}

/* ========== DETAIL VIEW ========== */
#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;transition:var(--t)}
.detail-back:hover{color:var(--a)}

.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 */
.gallery{position:relative}
.gallery-main{width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#f8fafc;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.gallery-main img{max-width:90%;max-height:90%;object-fit:contain;transition:opacity .3s}
.gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.gallery-thumbs::-webkit-scrollbar{height:4px}
.gallery-thumb{width:72px;height:72px;border-radius:10px;overflow:hidden;border:2px solid var(--gl);cursor:pointer;flex-shrink:0;transition:var(--t);background:#f8fafc}
.gallery-thumb.active{border-color:var(--p)}
.gallery-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}

/* Info */
.detail-info{}
.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}
.detail-summary{font-size:.88rem;color:var(--g);line-height:1.7;margin-bottom:24px;white-space:pre-line}
.detail-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.detail-badge{display:flex;align-items:center;gap:6px;background:rgba(0,63,98,.04);padding:8px 14px;border-radius:10px;font-size:.78rem;font-weight:500;color:var(--d)}
.detail-badge i{color:var(--a);font-size:.75rem}
.detail-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--p);color:#fff;border-radius:12px;font-weight:700;font-size:.88rem;transition:var(--t);border:none;cursor:pointer;font-family:inherit}
.detail-btn:hover{background:var(--pl);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,63,98,.25)}
.detail-btn-outline{background:transparent;border:2px solid var(--p);color:var(--p)}
.detail-btn-outline:hover{background:var(--p);color:#fff}

/* TABS */
.dtabs{margin-top:30px;background:#fff;border-radius:20px;padding:0;box-shadow:0 2px 16px rgba(0,0,0,.06);overflow:hidden}
.dtab-headers{display:flex;border-bottom:2px solid var(--gl);overflow-x:auto}
.dtab-h{padding:16px 28px;font-size:.85rem;font-weight:600;color:var(--g);cursor:pointer;transition:var(--t);border-bottom:3px solid transparent;white-space:nowrap;flex-shrink:0}
.dtab-h:hover{color:var(--p)}
.dtab-h.active{color:var(--p);border-color:var(--a);background:rgba(0,63,98,.02)}
.dtab-body{padding:28px}
.dtab-content{display:none}
.dtab-content.active{display:block}

/* Specs table */
.specs-table{width:100%;border-collapse:collapse}
.specs-table tr:nth-child(even){background:#f8fafc}
.specs-table td{padding:11px 16px;font-size:.84rem;border-bottom:1px solid var(--gl)}
.specs-table td:first-child{font-weight:600;color:var(--d);width:40%;background:rgba(0,63,98,.02)}
.specs-table td:last-child{color:var(--g)}

/* Features list */
.feat-list{list-style:none;columns:2;column-gap:24px}
.feat-item{padding:8px 0;font-size:.84rem;color:var(--d);display:flex;align-items:flex-start;gap:8px;break-inside:avoid}
.feat-item i{color:var(--a);margin-top:3px;font-size:.7rem;flex-shrink:0}

/* Description */
.desc-text{font-size:.88rem;color:var(--d);line-height:1.8;white-space:pre-line}

/* Video */
.video-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:16px;overflow:hidden}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

/* Empty */
.empty{text-align:center;padding:50px 20px;color:var(--g)}
.empty i{font-size:2.5rem;opacity:.3;margin-bottom:14px;display:block}
.empty h3{font-size:1rem;font-weight:700;color:var(--d);margin-bottom:6px}
.reset-btn{margin-top:14px;padding:9px 22px;background:var(--p);color:#fff;border:none;border-radius:9px;cursor:pointer;font-weight:600;font-size:.82rem;font-family:inherit}

/* MOBILE SIDEBAR */
.msb{display:none;position:fixed;inset:0;background:#fff;z-index:150;overflow-y:auto;padding:18px;flex-direction:column}
.msb.open{display:flex}
.msb-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.msb-close{width:34px;height:34px;border:none;background:var(--gl);border-radius:9px;cursor:pointer;font-size:.95rem}

/* FOOTER */
.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;letter-spacing:1px}
.footer-links{list-style:none}.footer-links li{margin-bottom:7px}
.footer-links a{color:rgba(255,255,255,.5);font-size:.78rem;transition:var(--t)}.footer-links a:hover{color:var(--a)}
.footer-brand p{font-size:.78rem;line-height:1.6;margin:8px 0 14px}
.social-links{display:flex;gap:7px}
.social-links a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);transition:var(--t);font-size:.8rem}
.social-links a:hover{background:var(--a);color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:16px;text-align:center;font-size:.7rem}

/* RESPONSIVE */
@media(max-width:1024px){.sidebar{width:230px}.pg{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.detail-grid{grid-template-columns:1fr;gap:24px}.feat-list{columns:1}}
@media(max-width:768px){
.sidebar{display:none}.hamburger{display:block}
.hero h1{font-size:1.6rem}.hero-stats{gap:20px}.hero-stat strong{font-size:1.2rem}
.search-box{max-width:none;order:3;flex-basis:100%}.header .container{flex-wrap:wrap}
.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:20px}.detail-name{font-size:1.2rem}.detail-price{font-size:1.4rem}
.dtab-h{padding:12px 18px;font-size:.8rem}
.footer-grid{grid-template-columns:1fr 1fr}
.gallery-thumb{width:56px;height:56px}
}

.fade{opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}.fade.vis{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ===== 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:0;width:400px;max-width:90vw;height:100vh;height:100dvh;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 ease;visibility:hidden}
.cart-drawer.open{transform:translateX(0);visibility:visible}
.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;min-height:0}
.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:10px 14px;border-top:2px solid var(--gl);background:#fff;flex-shrink:0;max-height:none}
.cart-footer-btns{display:flex;gap:6px;margin-top:6px}
.cart-footer-btns .cart-checkout-btn{flex:1;padding:10px 6px;font-size:.78rem;border-radius:10px}
.cart-total{display:flex;justify-content:space-between;font-size:.92rem;font-weight:800;color:var(--d);margin-bottom:0}
.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%;height:100vh;height:100dvh}
.cart-footer{padding:8px 12px}
.cart-footer-btns .cart-checkout-btn{padding:10px 4px;font-size:.76rem;gap:4px}
.cart-total{font-size:.88rem}
}

/* ===== AI CHATBOX ===== */
.chat-fab{position:fixed;bottom:24px;right:24px;z-index:180;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--p),#0077b6);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,63,98,.4);display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:var(--t)}
.chat-fab:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,63,98,.5)}
.chat-fab-label{position:fixed;bottom:32px;right:90px;z-index:180;background:var(--p);color:#fff;padding:6px 14px;border-radius:8px;font-size:.75rem;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15);pointer-events:none;opacity:0;transition:opacity .3s}
.chat-fab:hover+.chat-fab-label{opacity:1}
.chat-overlay2{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:190;backdrop-filter:blur(2px)}
.chat-overlay2.open{display:block}
.chatbox{position:fixed;bottom:0;right:0;width:400px;max-width:100vw;height:560px;max-height:calc(100vh - 48px);background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.18);z-index:200;display:none;flex-direction:column;overflow:hidden}
.chatbox.open{display:flex}
.chat-head{background:linear-gradient(135deg,var(--p),#0077b6);color:#fff;padding:14px 16px;padding-top:max(14px, env(safe-area-inset-top, 14px));display:flex;align-items:center;gap:12px;flex-shrink:0}
.chat-head-avatar{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.chat-head-info h4{font-size:.9rem;font-weight:700}.chat-head-info span{font-size:.68rem;opacity:.75}
.chat-close{margin-left:auto;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;background:rgba(255,255,255,.25);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:var(--t)}
.chat-close:hover{background:rgba(255,255,255,.4)}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f8fafc}
.chat-msg{max-width:88%;padding:11px 15px;border-radius:16px;font-size:.84rem;line-height:1.55;word-wrap:break-word}
.chat-msg.bot{background:#fff;color:var(--d);align-self:flex-start;border:1px solid var(--gl);border-bottom-left-radius:4px}
.chat-msg.user{background:var(--p);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg a{color:var(--a);font-weight:600;text-decoration:underline}
.chat-msg.bot a{color:var(--p)}
.chat-typing{display:flex;gap:4px;padding:11px 15px;align-self:flex-start;background:#fff;border-radius:16px;border:1px solid var(--gl);border-bottom-left-radius:4px}
.chat-typing span{width:7px;height:7px;background:var(--g);border-radius:50%;animation:blink 1.4s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.chat-sug{padding:6px 12px;background:#fff;border:1.5px solid var(--gl);border-radius:20px;font-size:.75rem;font-weight:500;color:var(--p);cursor:pointer;transition:var(--t);white-space:nowrap}
.chat-sug:hover{border-color:var(--p);background:rgba(0,63,98,.04)}
.chat-foot{padding:10px 14px;padding-bottom:max(10px, env(safe-area-inset-bottom, 10px));border-top:1.5px solid var(--gl);display:flex;gap:8px;background:#fff;flex-shrink:0}
.chat-input{flex:1;padding:10px 14px;border:1.5px solid var(--gl);border-radius:12px;font-size:.85rem;font-family:inherit;outline:none;resize:none;max-height:80px;transition:var(--t)}
.chat-input:focus{border-color:var(--p)}
.chat-send{width:40px;height:40px;border-radius:10px;background:var(--p);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:var(--t);flex-shrink:0}
.chat-send:hover{background:var(--pl)}
.chat-send:disabled{opacity:.4;cursor:default}

/* ===== SHARE POPOVER ===== */
.share-popover-overlay{display:none;position:fixed;inset:0;z-index:240;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.share-popover-overlay.open{display:flex;align-items:center;justify-content:center}
.share-popover{background:#fff;border-radius:18px;padding:24px;box-shadow:0 8px 40px rgba(0,0,0,.18);max-width:340px;width:calc(100vw - 40px)}
.share-popover h4{font-size:.92rem;font-weight:700;color:var(--d);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.share-popover h4 i{color:var(--a)}
.share-close-btn{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;background:var(--gl);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.share-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.share-app{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:var(--t);padding:8px;border-radius:12px}
.share-app:hover{background:var(--l)}
.share-app-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff}
.share-app span{font-size:.65rem;font-weight:600;color:var(--g)}
.share-link-box{display:flex;gap:6px}
.share-link-input{flex:1;padding:9px 10px;border:1.5px solid var(--gl);border-radius:8px;font-size:.76rem;font-family:inherit;outline:none;background:var(--l);color:var(--d)}
.share-link-copy{padding:9px 14px;background:var(--p);color:#fff;border:none;border-radius:8px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:var(--t)}
.share-link-copy:hover{background:var(--pl)}

@media(max-width:768px){
.chatbox{bottom:0;right:0;width:100%;max-width:100%;height:100%;max-height:100vh;max-height:100dvh;border-radius:0;padding-top:0}
.chatbox .chat-head{padding-top:max(14px, env(safe-area-inset-top, 14px))}
.chat-fab{bottom:16px;right:16px;width:50px;height:50px;font-size:1.2rem}
.chat-fab-label{display:none}
}

/* ===== QUOTATION 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;backdrop-filter:blur(4px)}
.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;position:relative}
.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-section{margin-bottom:20px}
.quote-section h3{font-size:.88rem;font-weight:700;color:var(--d);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.quote-section h3 i{color:var(--a);font-size:.8rem}
.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;font-family:inherit;outline:none}
.quote-field input:focus{border-color:var(--p)}
.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;white-space:nowrap}
.quote-table td{padding:8px 6px;border-bottom:1px solid var(--gl);vertical-align:middle}
.quote-table .qt-img{width:40px;height:40px;object-fit:contain;border-radius:4px;background:var(--l)}
.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;font-family:inherit;outline:none}
.quote-table .qt-disc:focus{border-color:var(--p)}
.quote-table .qt-note{width:100%;padding:5px 6px;border:1.5px solid var(--gl);border-radius:6px;font-size:.78rem;font-family:inherit;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;font-family:inherit;display:flex;align-items:center;gap:8px;transition:var(--t)}
.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)}
@media(max-width:768px){.quote-grid{grid-template-columns:1fr}.quote-modal{border-radius:12px}.quote-table{font-size:.7rem}}

</style>
<!-- Libraries for quotation export -->
<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>
</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 class="topbar-item"><i class="fas fa-rotate-left"></i> Đổi trả 30 ngày</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_200.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 Malloca, Eurogold, Grob, Canzy & Demax..." 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="#" onclick="toggleChat();return false" title="Tư Vấn AI" style="background:linear-gradient(135deg,var(--p),#0077b6);color:#fff"><i class="fas fa-robot"></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>

<section class="hero"><div class="container">
<img src="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_600.png" alt="V.AI STUDIO" style="height:80px;object-fit:contain;margin-bottom:12px">
<h1>V.AI <span>STUDIO</span></h1>
<p style="font-size:1rem;font-style:italic;color:rgba(255,255,255,.9);margin-bottom:6px">❝ Niềm tin khách hàng là tài sản của chúng tôi ❞</p>
<p>Thiết bị nhà bếp & khóa thông minh — Malloca, Eurogold, Grob, Canzy & Demax</p>
<div class="hero-stats" id="heroStats">
<div class="hero-stat"><strong id="statTotal">1979</strong><span>Sản phẩm</span></div>
<div class="hero-stat"><strong id="statCats">17</strong><span>Danh mục</span></div>
<div class="hero-stat"><strong>3</strong><span>Thương hiệu</span></div>
<div class="hero-stat"><strong>100%</strong><span>Dữ liệu thật</span></div>
</div>
</div></section>

<div class="container">
<!-- LIST VIEW -->
<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>
<div class="sb-card"><h3><i class="fas fa-tag"></i> Khoảng Giá</h3><div class="pr" id="pr"></div></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><option value="na">Tên: A → Z</option></select>
<div class="view-btns"><button class="view-btn active" id="gb" onclick="setV('g')"><i class="fas fa-th-large"></i></button><button class="view-btn" id="lb" 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>
<div id="catSearchResults"></div>
</main>
</div>
</div>

<div id="detailView"></div>
</div><!-- /page-products -->

<!-- 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)">Sản phẩm</span></h2>
<p style="color:var(--g);font-size:.9rem;max-width:550px;margin:10px auto 0">10 bộ catalogue — tìm kiếm theo văn bản trong ảnh</p>
<div style="max-width:480px;margin:16px auto 0;position:relative">
<i class="fas fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--g);font-size:.85rem"></i>
<input type="text" id="catSearch" placeholder="Tìm trong catalogue... (tên SP, mã SP, thông số...)" oninput="searchCatalogue()" style="width:100%;padding:10px 14px 10px 40px;border:2px solid var(--gl);border-radius:12px;font-size:.85rem;font-family:inherit;outline:none">
<span id="catSearchCount" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.68rem;color:var(--g);background:var(--l);padding:2px 7px;border-radius:6px"></span>
</div>
</div>
<!-- Tab selector -->
<div id="catTabs"></div>
<!-- Catalogue content renders here -->
<div id="catContent"></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-comment-dots"></i><div><strong>Zalo tư vấn</strong><br><a href="https://zalo.me/0981873395" target="_blank" style="color:var(--p);font-weight:700">0981 873 395</a> · <a href="https://zalo.me/0918258385" target="_blank" style="color:var(--p);font-weight:700">0918 258 385</a></div></li>
<li><i class="fas fa-qrcode"></i><div><strong>QR Kết bạn Zalo</strong><br><img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://zalo.me/0981873395" alt="QR Zalo 0981873395" style="width:120px;border-radius:8px;margin-top:6px;border:2px solid var(--gl)"><br><span style="font-size:.72rem;color:var(--g)">Quét mã để kết bạn Zalo</span></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-robot"></i><div><strong>Tư Vấn AI</strong><br><a href="javascript:void(0)" onclick="toggleChat()" style="color:var(--p);font-weight:700">Chat ngay →</a></div></li>
</ul>
<div style="display:flex;gap:8px;margin-top:16px">
<a href="https://zalo.me/0981873395" target="_blank" style="padding:10px 16px;background:#0068FF;color:#fff;border-radius:10px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fas fa-comment-dots"></i> Zalo 1</a>
<a href="https://zalo.me/0918258385" target="_blank" style="padding:10px 16px;background:#0068FF;color:#fff;border-radius:10px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fas fa-comment-dots"></i> Zalo 2</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"><img src="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_200.png" alt="V.AI STUDIO" style="height:36px;object-fit:contain"><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-building"></i> Thương Hiệu</h3><div class="pr" id="brm"></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>
<div class="cart-footer-btns">
<button class="cart-checkout-btn" onclick="openCheckout()"><i class="fas fa-qrcode"></i> Thanh toán</button>
<button class="cart-checkout-btn" onclick="openQuotation()" style="background:var(--p)"><i class="fas fa-file-invoice"></i> Báo giá</button>
</div>
</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>

<!-- QUOTATION MODAL -->
<div class="quote-overlay" id="quoteOverlay" onclick="if(event.target===this)closeQuotation()">
<div class="quote-modal">
<button class="quote-close" onclick="closeQuotation()"><i class="fas fa-times"></i></button>
<div class="quote-head">
<h2><i class="fas fa-file-invoice" style="margin-right:8px"></i>Lập Báo Giá</h2>
<p>Điền thông tin khách hàng và chiết khấu để xuất báo giá</p>
</div>
<div class="quote-body">

<div class="quote-section">
<h3><i class="fas fa-user"></i> Thông tin khách hàng</h3>
<div class="quote-grid">
<div class="quote-field"><label>Họ tên khách hàng</label><input id="qcName" placeholder="Nhập họ tên"></div>
<div class="quote-field"><label>Số điện thoại</label><input id="qcPhone" placeholder="Nhập SĐT"></div>
<div class="quote-field"><label>Email</label><input id="qcEmail" placeholder="Nhập email"></div>
<div class="quote-field"><label>Địa chỉ</label><input id="qcAddr" placeholder="Nhập địa chỉ"></div>
<div class="quote-field"><label>Công ty / Dự án</label><input id="qcCompany" placeholder="Nhập tên công ty (nếu có)"></div>
<div class="quote-field"><label>Ngày báo giá</label><input id="qcDate" type="date"></div>
</div>
<div style="margin-top:12px;padding:12px 14px;background:var(--l);border-radius:10px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
<i class="fas fa-lock" id="qcLockIcon" style="color:var(--g);font-size:.85rem"></i>
<input id="qcAccessCode" type="password" placeholder="Nhập mã truy cập..." style="width:160px;padding:7px 10px;border:1.5px solid var(--gl);border-radius:8px;font-size:.8rem;font-family:inherit;outline:none;background:#fff" oninput="checkQuoteAccess()">
<span id="qcAccessStatus" style="font-size:.72rem;font-weight:600;color:var(--g)">🔒</span>
</div>
<div id="aiPromptBox" style="display:none">
<div style="display:flex;gap:8px">
<textarea id="qcAiPrompt" placeholder="Nhập yêu cầu chiết khấu... Ví dụ: Giảm 15% tất cả sản phẩm, hoặc: SP1 giảm 2 triệu, SP2 giảm 10%..." style="flex:1;padding:8px 10px;border:1.5px solid var(--p);border-radius:8px;font-size:.82rem;font-family:inherit;outline:none;resize:none;height:48px;background:#fff"></textarea>
<button onclick="applyAiDiscount()" style="padding:8px 16px;background:var(--p);color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;display:flex;align-items:center;gap:6px" id="aiDiscBtn"><i class="fas fa-robot"></i> Áp dụng</button>
</div>
<div id="aiDiscStatus" style="font-size:.72rem;color:var(--g);margin-top:4px"></div>
</div>
</div>
</div>

<div class="quote-section">
<h3><i class="fas fa-list-check"></i> Chi tiết sản phẩm</h3>
<div style="overflow-x:auto">
<table class="quote-table" id="quoteTable">
<thead><tr>
<th>STT</th><th>Hình ảnh</th><th style="text-align:left">Tên sản phẩm</th><th>Mã SP</th><th>Thông tin</th><th>SL</th><th>Đơn giá</th><th>Đơn giá CK</th><th>Thành tiền</th><th>Ghi chú</th>
</tr></thead>
<tbody id="quoteTableBody"></tbody>
<tfoot><tr class="quote-total-row"><td colspan="8" style="text-align:right;padding-right:12px">TỔNG CỘNG:</td><td class="qt-price" id="quoteTotalCell">0đ</td><td></td></tr></tfoot>
</table>
</div>
</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> Xuất PDF</button>
<button class="quote-btn quote-btn-print" onclick="printQuotation()"><i class="fas fa-print"></i> In báo giá</button>
</div>
</div>
</div>
</div>

<footer class="footer"><div class="container">
<div class="footer-grid">
<div class="footer-brand"><img src="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_200.png" alt="V.AI STUDIO" style="height:50px;object-fit:contain;margin-bottom:8px;filter:brightness(10)"><div class="logo-name" style="color:#fff;font-size:1.1rem">V.AI <span style="color:var(--a)">STUDIO</span></div><p style="font-style:italic;opacity:.85;margin-bottom:4px">❝ Niềm tin khách hàng là tài sản của chúng tôi ❞</p><p>Thiết bị nhà bếp & khóa thông minh — Malloca, Eurogold, Grob, Canzy & Demax.</p>
<div class="social-links"><a href="https://zalo.me/0981873395" target="_blank" title="Zalo"><i class="fas fa-comment-dots"></i></a><a href="https://zalo.me/0918258385" target="_blank" title="Zalo 2"><i class="fas fa-comments"></i></a></div></div>
<div><h4>Thiết Bị Nhà Bếp</h4><ul class="footer-links"><li><a href="javascript:void(0)" onclick="setCat('may-hut-khoi-khu-mui')">Máy hút khói khử mùi</a></li><li><a href="javascript:void(0)" onclick="setCat('bep-dien-tu-bep-gas')">Bếp điện từ, bếp gas</a></li><li><a href="javascript:void(0)" onclick="setCat('lo-nuong')">Lò nướng, lò hấp</a></li><li><a href="javascript:void(0)" onclick="setCat('chau-rua-chen')">Chậu rửa chén</a></li><li><a href="javascript:void(0)" onclick="setCat('voi-rua-chen')">Vòi rửa chén</a></li></ul></div>
<div><h4>Thêm</h4><ul class="footer-links"><li><a href="javascript:void(0)" onclick="setCat('tu-lanh-tu-ruou')">Tủ lạnh, tủ rượu</a></li><li><a href="javascript:void(0)" onclick="setCat('may-rua-chen-may-say-chen')">Máy rửa chén</a></li><li><a href="javascript:void(0)" onclick="setCat('thiet-bi-gia-dung-nho')">Gia dụng nhỏ</a></li><li><a href="javascript:void(0)" onclick="showPage('catalogue')">Catalogue</a></li><li><a href="javascript:void(0)" onclick="toggleChat()">🤖 Tư Vấn AI</a></li></ul></div>
<div><h4>Hỗ Trợ</h4><ul class="footer-links"><li><a href="javascript:void(0)" onclick="toggleChat()">Tư vấn sản phẩm</a></li><li><a href="javascript:void(0)" onclick="showPage('contact')">Liên hệ</a></li><li><a href="https://zalo.me/0981873395" target="_blank">Zalo: 0981 873 395</a></li><li><a href="javascript:void(0)" onclick="showPage('catalogue')">Xem catalogue</a></li><li><a href="javascript:void(0)" onclick="goHome()">Trang chủ</a></li></ul></div>
</div>
<div class="footer-bottom"><p>&copy; 2025 V.AI STUDIO &bull; Thiết bị nhà bếp & khóa thông minh — Malloca, Eurogold, Grob, Canzy & Demax</p></div>
</div></footer>

<script>
let D=[],S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:'g',brand:'all'};
const PP=24;
const PRICES=[
{l:'Tất cả',min:0,max:1e15},{l:'Dưới 5 triệu',min:0,max:5e6},{l:'5-15 triệu',min:5e6,max:15e6},
{l:'15-30 triệu',min:15e6,max:3e7},{l:'30-50 triệu',min:3e7,max:5e7},{l:'Trên 50 triệu',min:5e7,max:1e15}
];

fetch('products_with_slugs.json').then(r=>{if(!r.ok)throw new Error('HTTP '+r.status);return r.json()}).then(d=>{D=d.map(p=>{let o={name:p.n,link:p.l,image:p.i,price:p.p,priceNum:p.pn,cat:p.c,catSlug:p.cs,catIcon:p.ci,subCat:p.sub_c||'',subCatSlug:p.sub_cs||'',images:p.imgs||[],summary:p.sum||'',desc:p.desc||'',specs:p.specs||{},feats:p.feats||[],sku:p.sku||'',video:p.vid||'',model:p.mod||'',slug:p.slug||'',brand:p.brand||( p.n.includes('| Demax |')?'Demax':p.n.includes('| Canzy |')?'Canzy':p.n.includes('| Grob |')?'Grob':p.n.includes('| Eurogold |')||p.n.startsWith('Eurogold |')?'Eurogold':'Malloca')};o._idx=buildSearchIndex(o);return o});init()}).catch(e=>{document.getElementById('grid').innerHTML='<div class="empty" style="grid-column:1/-1"><i class="fas fa-exclamation-triangle"></i><h3>Lỗi tải dữ liệu</h3><p>'+e.message+'</p><button class="reset-btn" onclick="location.reload()">Tải lại</button></div>'});

function nVN(s){return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').replace(/đ/g,'d').replace(/Đ/g,'d')}

// Synonym map (normalized, no diacritics)
const SYN={'ke':['gia'],'gia':['ke'],'bat':['chen'],'chen':['bat'],'xoong':['noi'],'noi':['xoong'],'dao':['thot'],'thot':['dao'],'ray':['truot'],'truot':['ray'],'khoa':['lock'],'lock':['khoa'],'bon':['chau'],'chau':['bon'],'ro':['gia','ke']};

function smartSearch(query,text){
// 1. Exact substring (fastest path)
if(text.includes(query))return true;
// 2. Split into words, ALL must match (any order)
let words=query.split(/\s+/).filter(w=>w);
if(!words.length)return true;
let matched=0;
for(let w of words){
if(text.includes(w)){matched++;continue;}
// Try synonym
let hit=false;
if(SYN[w]){for(let s of SYN[w]){if(text.includes(s)){hit=true;break;}}}
if(hit){matched++;continue;}
}
// All words must match
return matched===words.length;
}
function buildSearchIndex(p){
// Only index product-specific content, NOT generic category names
let parts=[p.name,p.sku,p.model,p.brand,p.price];
if(p.feats&&p.feats.length)parts.push(p.feats.join(' '));
if(p.specs){Object.entries(p.specs).forEach(([k,v])=>{parts.push(k);parts.push(String(v))})}
// AI semantic keywords based on product name
let n=p.name.toLowerCase();
if(n.includes('giá bát')||n.includes('kệ bát'))parts.push('ke bat gia bat ro bat dia chen');
if(n.includes('gia vị')||n.includes('chai lọ'))parts.push('ke gia vi chai lo');
if(n.includes('xoong')||n.includes('nồi'))parts.push('xoong noi chao');
if(n.includes('dao thớt'))parts.push('ke dao thot');
if(n.includes('tẩy rửa'))parts.push('ke tay rua gia chai lo nuoc rua');
if(n.includes('nâng hạ'))parts.push('nang ha len xuong');
if(n.includes('cảm ứng'))parts.push('cam ung dien thong minh');
if(n.includes('mâm xoay'))parts.push('mam xoay goc lien hoan');
if(n.includes('liên hoàn'))parts.push('lien hoan goc mam xoay');
if(n.includes('tủ kho')||n.includes('đồ khô'))parts.push('tu kho ke do kho');
if(n.includes('khay chia'))parts.push('khay chia thia nia muong dia ngan keo');
if(n.includes('thùng gạo'))parts.push('thung gao hop dung gao');
if(n.includes('thùng rác'))parts.push('thung rac');
if(n.includes('hút mùi'))parts.push('hut mui hut khoi khu mui');
if(n.includes('bếp từ'))parts.push('bep tu bep dien tu');
if(n.includes('bếp gas'))parts.push('bep gas');
if(n.includes('khóa'))parts.push('khoa cua thong minh van tay face id');
if(n.includes('chậu rửa'))parts.push('chau rua bon rua');
if(n.includes('vòi rửa'))parts.push('voi rua nong lanh');
if(n.includes('lò nướng'))parts.push('lo nuong');
if(n.includes('lò vi'))parts.push('lo vi song');
if(n.includes('máy rửa'))parts.push('may rua bat chen');
if(n.includes('trang sức'))parts.push('trang suc ngan keo');
if(n.includes('giày'))parts.push('giay ke de giay');
if(n.includes('gương'))parts.push('guong xoay');
if(n.includes('ray')||n.includes('bản lề'))parts.push('ray truot ban le giam chan');
if(n.includes('lò nướng'))parts.push('lo nuong am tu nong');
if(n.includes('lò vi'))parts.push('lo vi song am tu');
if(n.includes('tủ áo')||n.includes('quần áo'))parts.push('tu ao phu kien tu quan ao');
if(n.includes('trang sức'))parts.push('trang suc ngan keo de do');
if(n.includes('giày'))parts.push('giay ke de giay tu ao');
if(n.includes('gương'))parts.push('guong xoay tu ao thong minh');
if(n.includes('máy rửa'))parts.push('may rua bat chen doc lap am tu');
return nVN(parts.join(' '));
}

// init() is defined at the end of the script with routing logic

function buildCats(){
let cats={};
let subs={};
D.forEach(p=>{
if(!cats[p.catSlug])cats[p.catSlug]={n:p.cat,i:p.catIcon,c:0,hasSub:false};
cats[p.catSlug].c++;
if(p.subCatSlug){
cats[p.catSlug].hasSub=true;
if(!subs[p.subCatSlug])subs[p.subCatSlug]={n:p.subCat,parent:p.catSlug,c:0};
subs[p.subCatSlug].c++;
}
});
let h=`<li class="cat-item active" data-s="all" onclick="setCat('all')"><i class="fas fa-border-all"></i>Tất cả<span class="cat-count">${D.length}</span></li>`;
Object.entries(cats).forEach(([s,c])=>{
h+=`<li class="cat-item" data-s="${s}" onclick="setCat('${s}')"><i class="fas ${c.i}"></i>${c.n}<span class="cat-count">${c.c}</span></li>`;
if(c.hasSub){
let subList=Object.entries(subs).filter(([sk,sv])=>sv.parent===s).sort((a,b)=>b[1].c-a[1].c);
subList.forEach(([sk,sv])=>{
h+=`<li class="cat-item cat-sub" data-s="${sk}" onclick="setCat('${sk}')"><span style="margin-left:12px;font-size:.7rem;opacity:.5">└</span>${sv.n}<span class="cat-count">${sv.c}</span></li>`;
});
}
});
document.getElementById('cl').innerHTML=h;document.getElementById('clm').innerHTML=h;
}

function buildPrices(){
let h='';PRICES.forEach((p,i)=>{h+=`<div class="pr-item${i===0?' active':''}" data-i="${i}" onclick="setPrice(${p.min},${p.max},${i})"><span class="pr-dot"></span>${p.l}</div>`});
document.getElementById('pr').innerHTML=h;document.getElementById('prm').innerHTML=h;
}
function buildBrands(){
let brands={};D.forEach(p=>{brands[p.brand]=(brands[p.brand]||0)+1});
let h=`<div class="pr-item active" data-b="all" onclick="setBrand('all')"><span class="pr-dot"></span>Tất cả (${D.length})</div>`;
Object.entries(brands).sort((a,b)=>b[1]-a[1]).forEach(([b,c])=>{h+=`<div class="pr-item" data-b="${b}" onclick="setBrand('${b}')"><span class="pr-dot"></span>${b} (${c})</div>`});
document.getElementById('br').innerHTML=h;document.getElementById('brm').innerHTML=h;
document.getElementById('statTotal').textContent=D.length;
let cats={};D.forEach(p=>{cats[p.catSlug]=1});document.getElementById('statCats').textContent=Object.keys(cats).length;
}



function getF(){
let r=D;
if(S.brand!=='all')r=r.filter(p=>p.brand===S.brand);
if(S.cat!=='all')r=r.filter(p=>p.catSlug===S.cat||p.subCatSlug===S.cat);
if(S.q){let q=nVN(S.q);r=r.filter(p=>smartSearch(q,p._idx))}
if(S.pmin>0||S.pmax<1e15)r=r.filter(p=>p.priceNum>=S.pmin&&p.priceNum<=S.pmax);
if(S.sort==='pa')r.sort((a,b)=>a.priceNum-b.priceNum);
else if(S.sort==='pd')r.sort((a,b)=>b.priceNum-a.priceNum);
else if(S.sort==='na')r.sort((a,b)=>a.name.localeCompare(b.name,'vi'));
return r;
}

function render(){
let f=getF(),tp=Math.ceil(f.length/PP);if(S.pg>tp)S.pg=tp||1;
let s=(S.pg-1)*PP,items=f.slice(s,s+PP);
document.getElementById('rc').innerHTML=`<strong>${f.length}</strong> sản phẩm`;
document.getElementById('sc').textContent=S.q?f.length+' kết quả':'';
let g=document.getElementById('grid');
g.className='pg'+(S.view==='l'?' lv':'');
if(!items.length){g.innerHTML=`<div class="empty" style="grid-column:1/-1"><i class="fas fa-search"></i><h3>Không tìm thấy</h3><p>Thử thay đổi bộ lọc hoặc từ khóa</p><button class="reset-btn" onclick="resetAll()">Xóa bộ lọc</button></div>`;
}else{
g.innerHTML=items.map((p,i)=>{let idx=D.indexOf(p);let brandColor=p.brand==='Eurogold'?'#c8102e':p.brand==='Grob'?'#2e7d32':'var(--p)';let href='/san-pham/'+p.slug+'/index.html';return`<a class="pc fade" href="${href}" onclick="event.preventDefault();showDetail(${idx})" style="transition-delay:${Math.min(i*25,400)}ms;display:block"><div class="pi"><img src="${p.image}" alt="${p.name}" loading="lazy" onerror="this.style.display='none'"><span class="pi-badge"><i class="fas ${p.catIcon}"></i> ${p.cat}</span><span style="position:absolute;top:8px;right:8px;background:${brandColor};color:#fff;padding:3px 8px;border-radius:5px;font-size:.58rem;font-weight:700">${p.brand}</span></div><div class="pb"><div style="font-size:.65rem;font-weight:700;color:${brandColor};letter-spacing:.5px;margin-bottom:4px">${p.model||p.brand}</div><div class="pn">${p.name}</div><div class="pf"><span class="pp">${p.price||'Liên hệ'}</span><i class="fas fa-chevron-right"></i></div></div></a>`}).join('');
}
requestAnimationFrame(()=>document.querySelectorAll('.fade').forEach(e=>e.classList.add('vis')));
renderPag(tp);
}

function renderPag(tp){
if(tp<=1){document.getElementById('pag').innerHTML='';return}
let h=`<button class="pgb" onclick="goPg(${S.pg-1})"${S.pg===1?' disabled':''}><i class="fas fa-chevron-left"></i></button>`;
let pages=[];
if(tp<=7){for(let i=1;i<=tp;i++)pages.push(i)}
else{pages.push(1);if(S.pg>3)pages.push('.');for(let i=Math.max(2,S.pg-1);i<=Math.min(tp-1,S.pg+1);i++)pages.push(i);if(S.pg<tp-2)pages.push('.');pages.push(tp)}
pages.forEach(p=>{if(p==='.')h+=`<span class="pg-dots">...</span>`;else h+=`<button class="pgb${p===S.pg?' active':''}" onclick="goPg(${p})">${p}</button>`});
h+=`<button class="pgb" onclick="goPg(${S.pg+1})"${S.pg===tp?' disabled':''}><i class="fas fa-chevron-right"></i></button>`;
document.getElementById('pag').innerHTML=h;
}

// ===== DETAIL VIEW =====
let _skipHistory=false;
function showDetail(idx){
let p=D[idx];
// Update URL with SEO-friendly slug using History API
if(!_skipHistory){
let slugUrl='/san-pham/'+p.slug+'/index.html';
history.pushState({type:'product',idx:idx},'',slugUrl);
}
_skipHistory=false;
document.title=p.name+' | '+p.brand+' - Malloca';
document.getElementById('listView').style.display='none';
document.querySelector('.hero').style.display='none';
let dv=document.getElementById('detailView');
dv.classList.add('show');

// Build gallery images
let allImgs=p.images.length?p.images:[p.image];
let thumbs=allImgs.map((img,i)=>`<div class="gallery-thumb${i===0?' active':''}" onclick="switchImg(${i},'${img.replace(/'/g,"\\'")}')"><img src="${img}" alt="" loading="lazy"></div>`).join('');

// Specs table
let specsHtml='';
if(Object.keys(p.specs).length){
specsHtml='<table class="specs-table">'+Object.entries(p.specs).map(([k,v])=>`<tr><td>${k}</td><td>${v}</td></tr>`).join('')+'</table>';
}else{specsHtml='<p style="color:var(--g);font-size:.88rem">Chưa có thông số kỹ thuật chi tiết.</p>'}

// Features
let featsHtml='';
if(p.feats.length){featsHtml='<ul class="feat-list">'+p.feats.map(f=>`<li class="feat-item"><i class="fas fa-check-circle"></i><span>${f}</span></li>`).join('')+'</ul>'}
else{featsHtml='<p style="color:var(--g);font-size:.88rem">Chưa có danh sách tính năng.</p>'}

// Description
let descHtml=p.desc?`<div class="desc-text">${p.desc.replace(/\n/g,'<br>')}</div>`:'<p style="color:var(--g);font-size:.88rem">Chưa có mô tả chi tiết.</p>';

// Video
let videoHtml=p.video?`<div class="video-wrap"><iframe src="${p.video}" allowfullscreen loading="lazy"></iframe></div>`:'<p style="color:var(--g);font-size:.88rem">Chưa có video.</p>';

// Tab count for conditional display
let tabs=[
{id:'specs',label:'Thông Số Kỹ Thuật',icon:'fa-list-check',content:specsHtml},
{id:'feats',label:'Tính Năng',icon:'fa-star',content:featsHtml},
{id:'desc',label:'Mô Tả Chi Tiết',icon:'fa-file-lines',content:descHtml},
];
if(p.video)tabs.push({id:'video',label:'Video',icon:'fa-play',content:videoHtml});

let tabHeaders=tabs.map((t,i)=>`<div class="dtab-h${i===0?' active':''}" onclick="switchTab('${t.id}',this)"><i class="fas ${t.icon}"></i> ${t.label}</div>`).join('');
let tabContents=tabs.map((t,i)=>`<div class="dtab-content${i===0?' active':''}" id="tab-${t.id}">${t.content}</div>`).join('');

// Related products (same category, max 4)
let related=D.filter(r=>r.catSlug===p.catSlug&&r!==p).slice(0,4);
let relatedHtml='';
if(related.length){
relatedHtml=`<div style="margin-top:30px"><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:16px"><i class="fas fa-cubes" style="color:var(--a);margin-right:8px"></i>Sản phẩm liên quan</h3><div class="pg" style="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))">`;
relatedHtml+=related.map(r=>{let ri=D.indexOf(r);return`<a class="pc" href="/san-pham/${r.slug}/index.html" onclick="event.preventDefault();showDetail(${ri});window.scrollTo({top:0,behavior:'smooth'})" style="display:block"><div class="pi" style="height:160px"><img src="${r.image}" alt="${r.name}" loading="lazy"></div><div class="pb"><div class="pn">${r.name}</div><div class="pp">${r.price||'Liên hệ'}</div></div></a>`}).join('');
relatedHtml+='</div></div>';
}

dv.innerHTML=`
<div style="padding:28px 0">
<div class="detail-back" onclick="goBack()"><i class="fas fa-arrow-left"></i> Quay lại danh sách</div>
<div class="detail-grid">
<div class="gallery">
<div class="gallery-main"><img id="mainImg" src="${allImgs[0]}" alt="${p.name}"></div>
${allImgs.length>1?`<div class="gallery-thumbs">${thumbs}</div>`:''}
</div>
<div class="detail-info">
${p.sku?`<div class="detail-sku">SKU: ${p.sku} &bull; Model: ${p.model}</div>`:''}
<div class="detail-cat"><i class="fas ${p.catIcon}"></i> ${p.cat}</div>
<h1 class="detail-name">${p.name}</h1>
<div style="font-size:.95rem;font-weight:800;color:${p.brand==='Eurogold'?'#c8102e':p.brand==='Grob'?'#2e7d32':'var(--a)'};letter-spacing:1px;margin-bottom:12px">${p.model?p.model+' | ':''} ${p.brand}</div>
<div class="detail-price">${p.price||'Liên hệ'}</div>
${p.summary?`<div class="detail-summary">${p.summary}</div>`:''}
<div class="detail-badges">
<div class="detail-badge"><i class="fas fa-check-circle"></i> Chính hãng ${p.brand}</div>
<div class="detail-badge"><i class="fas fa-shield-halved"></i> Bảo hành điện tử</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">
<button class="add-cart-btn" onclick="event.stopPropagation();addToCart(${idx})"><i class="fas fa-cart-plus"></i> Thêm vào giỏ</button>
<button class="detail-btn detail-btn-outline" onclick="event.stopPropagation();toggleChat()"><i class="fas fa-robot"></i> Tư Vấn AI</button>
<button class="detail-btn detail-btn-outline" onclick="event.stopPropagation();shareProduct('${p.slug}','${p.name.replace(/'/g,"\\'")}')" title="Chia sẻ sản phẩm"><i class="fas fa-share-alt"></i> Chia sẻ</button>
</div>
</div>
</div>
<div class="dtabs">
<div class="dtab-headers">${tabHeaders}</div>
<div class="dtab-body">${tabContents}</div>
</div>
${relatedHtml}
</div>`;
window.scrollTo({top:0,behavior:'smooth'});
}

function goBack(){
document.getElementById('detailView').classList.remove('show');
document.getElementById('detailView').innerHTML='';
document.getElementById('listView').style.display='';
document.querySelector('.hero').style.display='';
document.title='V.AI STUDIO | Niềm tin khách hàng là tài sản của chúng tôi';
history.pushState({type:'list'},'','/');
}

function goHome(){
history.pushState({type:'list'},'','/');
goBack();resetAll();
}

function switchImg(i,src){
document.getElementById('mainImg').src=src;
document.querySelectorAll('.gallery-thumb').forEach((t,j)=>t.classList.toggle('active',j===i));
}

function switchTab(id,el){
document.querySelectorAll('.dtab-h').forEach(h=>h.classList.remove('active'));
document.querySelectorAll('.dtab-content').forEach(c=>c.classList.remove('active'));
el.classList.add('active');
document.getElementById('tab-'+id).classList.add('active');
}

// ===== ACTIONS =====
function setCat(s){S.cat=s;S.pg=1;updActive('.cat-item','data-s',s);goBackToList();updateHash();render();closeMsb()}
function setPrice(min,max,i){S.pmin=min;S.pmax=max;S.pg=1;document.querySelectorAll('.pr-item[data-i]').forEach((e,j)=>e.classList.toggle('active',j===i));goBackToList();updateHash();render();closeMsb()}
function setBrand(b){S.brand=b;S.pg=1;document.querySelectorAll('[data-b]').forEach(e=>e.classList.toggle('active',e.getAttribute('data-b')===b));goBackToList();updateHash();render();closeMsb()}
function goBackToList(){document.getElementById('listView').style.display='';document.getElementById('detailView').classList.remove('show');document.getElementById('detailView').innerHTML='';document.querySelector('.hero').style.display='';}
function doSearch(){S.q=document.getElementById('q').value.trim();S.pg=1;updateHash();render();renderMainCatSearch()}
function doSort(){S.sort=document.getElementById('ss').value;S.pg=1;updateHash();render()}
function setV(v){S.view=v;document.getElementById('gb').classList.toggle('active',v==='g');document.getElementById('lb').classList.toggle('active',v==='l');updateHash();render()}
function goPg(p){let f=getF(),tp=Math.ceil(f.length/PP);if(p<1||p>tp)return;S.pg=p;updateHash();render();document.querySelector('.toolbar').scrollIntoView({behavior:'smooth',block:'start'})}
function resetAll(){S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:S.view,brand:'all'};document.getElementById('q').value='';document.getElementById('ss').value='default';updActive('.cat-item','data-s','all');document.querySelectorAll('.pr-item[data-i]').forEach((e,i)=>e.classList.toggle('active',i===0));document.querySelectorAll('[data-b]').forEach(e=>e.classList.toggle('active',e.getAttribute('data-b')==='all'));history.replaceState({type:'list'},'','/');render();let csr=document.getElementById('catSearchResults');if(csr)csr.innerHTML='';}
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 (all pages rendered as images, loaded from catalogues.json) =====
let CAT_LIST=[];
let catLoaded=false;
let activeCat=0;
const CAT_PER_PAGE=12;
let catPage=1;

function loadCatalogueData(){
return Promise.all([
fetch('catalogues.json').then(r=>r.json()),
fetch('catalogue_ocr.json').then(r=>r.json()).catch(()=>[])
]).then(([data,ocr])=>{
CAT_LIST=data;
window._catOcr=ocr;
initCatTabs();
loadCatalogue(0);
catLoaded=true;
});
}

function initCatTabs(){
let tabs=document.getElementById('catTabs');
if(!tabs||!CAT_LIST.length)return;
const icons={'bep':'fa-fire','may-hut':'fa-wind','lo':'fa-temperature-high','chau':'fa-sink','khac':'fa-box','gia':'fa-tags','master':'fa-layer-group','grob':'fa-cogs','canzy':'fa-kitchen-set','demax':'fa-lock'};
tabs.innerHTML=CAT_LIST.map((c,i)=>{
let slug=c.slug||'';
let icon='fa-book-open';
for(let k in icons){if(slug.includes(k)){icon=icons[k];break;}}
let pCount=c.pages?c.pages.length:0;
return `<div class="ctab${i===0?' active':''}" onclick="loadCatalogue(${i})"><i class="fas ${icon}"></i>${c.name||'Catalogue '+(i+1)}<span class="cnt">${pCount}</span></div>`;
}).join('');
}

function loadCatalogue(idx){
activeCat=idx;
let c=CAT_LIST[idx];
if(!c)return;
// Update active tab
let tabBtns=document.querySelectorAll('#catTabs .ctab');
tabBtns.forEach((b,i)=>b.classList.toggle('active',i===idx));
let content=document.getElementById('catContent');
if(!content)return;
let pages=c.pages||[];
let totalPages=pages.length;
let pageHtml=`<div style="text-align:center;margin-bottom:16px">
<div style="font-size:.85rem;color:var(--g)">${c.desc||c.name||''} — <strong>${totalPages}</strong> trang</div>
</div>`;
pageHtml+=`<div style="display:flex;flex-direction:column;gap:16px;align-items:center">`;
pageHtml+=pages.map((pg,i)=>{
// pg can be a URL string or an object with .file
let imgSrc=typeof pg==='string'?pg:(pg.file?'grob_img/'+pg.file:pg.image||pg.url||'');
let label='Trang '+(i+1);
return `<div style="width:100%;max-width:900px"><img src="${imgSrc}" alt="${label}" style="width:100%;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.1)" loading="lazy"><div style="text-align:center;font-size:.75rem;color:var(--g);margin-top:6px">${label}</div></div>`;
}).join('');
pageHtml+=`</div>`;
content.innerHTML=pageHtml;
window.scrollTo({top:0,behavior:'smooth'});
}

function searchCatalogue(){
let q=document.getElementById('catSearch').value.trim();
if(!q){loadCatalogue(activeCat);document.getElementById('catSearchCount').textContent='';return}
let nq=nVN(q);
let results=[];
CAT_LIST.forEach((c,ci)=>{
let ocrTexts=(window._catOcr&&window._catOcr[ci])?window._catOcr[ci].texts||[]:[];
(c.pages||[]).forEach((pg,pi)=>{
let ocrText=ocrTexts[pi]||'';
let text=nVN(ocrText+' '+(c.name||''));
if(smartSearch(nq,text)){
let imgSrc=typeof pg==='string'?pg:(pg.file?'grob_img/'+pg.file:'');
results.push({cat:c.name||'Catalogue',imgSrc:imgSrc,pageNum:pi+1});
}
});
});
document.getElementById('catSearchCount').textContent=results.length+' kết quả';
let content=document.getElementById('catContent');
if(!results.length){content.innerHTML='<div class="empty" style="padding:40px"><i class="fas fa-search"></i><h3>Không tìm thấy trong catalogue</h3></div>';return}
content.innerHTML=`<div style="display:flex;flex-direction:column;gap:16px;align-items:center">`+results.map(r=>`<div style="width:100%;max-width:900px"><div style="font-size:.8rem;color:var(--p);font-weight:700;margin-bottom:6px">${r.cat} — Trang ${r.pageNum}</div><img src="${r.imgSrc}" alt="Trang ${r.pageNum}" style="width:100%;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.1)" loading="lazy"></div>`).join('')+`</div>`;
}

function renderMainCatSearch(){
let q=document.getElementById('q').value.trim();
let csr=document.getElementById('catSearchResults');
if(!csr)return;
if(!q){csr.innerHTML='';return}
let nq=nVN(q);
let results=[];
CAT_LIST.forEach((c,ci)=>{
let ocrTexts=(window._catOcr&&window._catOcr[ci])?window._catOcr[ci].texts||[]:[];
(c.pages||[]).forEach((pg,pi)=>{
let ocrText=ocrTexts[pi]||'';
let text=nVN(ocrText+' '+(c.name||''));
if(smartSearch(nq,text)){
let imgSrc=typeof pg==='string'?pg:(pg.file?'grob_img/'+pg.file:'');
results.push({cat:c.name||'Catalogue',imgSrc:imgSrc,pageNum:pi+1});
}
});
});
if(!results.length){csr.innerHTML='';return}
let searchVal=document.getElementById('q').value.replace(/'/g,"\\'");
csr.innerHTML=`<div style="margin-top:24px;padding-top:24px;border-top:2px solid var(--gl)"><h3 style="font-size:1rem;font-weight:700;margin-bottom:12px"><i class="fas fa-book-open" style="color:var(--a);margin-right:8px"></i>Kết quả trong Catalogue (${results.length})</h3><div style="display:flex;flex-wrap:wrap;gap:12px">`+results.slice(0,6).map(r=>`<div style="width:200px;cursor:pointer" onclick="showPage('catalogue');document.getElementById('catSearch').value='${searchVal}';searchCatalogue();"><img src="${r.imgSrc}" style="width:100%;border-radius:8px;border:2px solid var(--gl)" loading="lazy"><div style="font-size:.7rem;color:var(--g);margin-top:4px">${r.cat} — Trang ${r.pageNum}</div></div>`).join('')+`</div></div>`;
}

function showPage(page){
document.querySelectorAll('.page-section').forEach(el=>el.classList.remove('active'));
document.querySelectorAll('.nav-tab').forEach(el=>el.classList.toggle('active',el.dataset.page===page));
let el=document.getElementById('page-'+page);
if(el){el.classList.add('active');}
if(page==='catalogue'&&!catLoaded){loadCatalogueData();}
if(page==='catalogue'){history.pushState({type:'page',page:'catalogue'},'','/catalogue/index.html');}
else if(page==='contact'){history.pushState({type:'page',page:'contact'},'','/lien-he/index.html');}
else if(page==='products'){history.pushState({type:'list'},'','/');}
window.scrollTo({top:0,behavior:'smooth'});
}

function initCatalogue(){
// catalogue loads on demand
}


// ===== 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();
// Show brief toast notification instead of opening cart
let toast=document.createElement('div');
toast.style.cssText='position:fixed;bottom:24px;right:24px;background:var(--p);color:#fff;padding:12px 20px;border-radius:12px;font-size:.85rem;font-weight:600;z-index:999;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:fadeUp .3s ease';
toast.innerHTML='<i class="fas fa-check-circle"></i> Đã thêm vào giỏ hàng';
document.body.appendChild(toast);
setTimeout(()=>{toast.style.opacity='0';toast.style.transition='opacity .3s';setTimeout(()=>toast.remove(),300)},2000);
}

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>Zalo hỗ trợ: <a href="https://zalo.me/0981873395" target="_blank" style="color:var(--p)"><strong>0981 873 395</strong></a></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();
}

// ===== SEO URL ROUTING =====

// Parse current path on load (for SPA navigation within iframe)
function parseCurrentPath(){
let path=location.pathname;

// Product page: /san-pham/<slug>/
let prodMatch=path.match(/^\/san-pham\/([^\/]+)/);
if(prodMatch){
let slug=prodMatch[1];
if(slug==='index.html')slug=null; // skip if just /san-pham/index.html
let idx=slug?D.findIndex(p=>p.slug===slug):-1;
if(idx>=0){showDetailNoHistory(idx);return true;}
}

// Category page: /danh-muc/<slug>/
let catMatch=path.match(/^\/danh-muc\/([^\/]+)/);
if(catMatch){
let catSlug=catMatch[1];
S.cat=catSlug;
updActive('.cat-item','data-s',catSlug);
document.querySelectorAll('[data-b]').forEach(e=>e.classList.toggle('active',e.getAttribute('data-b')==='all'));
render();
return true;
}

// Catalogue page
if(path.startsWith('/catalogue')){showPage('catalogue');return true;}

// Contact page
if(path.startsWith('/lien-he')){showPage('contact');return true;}

return false;
}

// Also parse hash params (backward compatibility)
function parseUrlParams(){
let hash=location.hash.replace(/^#/,'');
if(!hash)return;
let params=new URLSearchParams(hash);

// Legacy hash page navigation
let pageParam=params.get('page');
if(pageParam&&pageParam!=='products'){
showPage(pageParam);
return;
}

// Legacy product hash (supports both index and slug)
let productParam=params.get('product');
if(productParam!==null){
let idx=parseInt(productParam);
if(!isNaN(idx)&&idx>=0&&idx<D.length){showDetailNoHistory(idx);return;}
// Try slug match
let slugIdx=D.findIndex(p=>p.slug===productParam);
if(slugIdx>=0){showDetailNoHistory(slugIdx);return;}
}

let q=params.get('q')||params.get('search')||'';
if(q){document.getElementById('q').value=q;S.q=q;S.pg=1;}
let cat=params.get('cat');
if(cat){S.cat=cat;updActive('.cat-item','data-s',cat);}
let brand=params.get('brand');
if(brand){S.brand=brand;document.querySelectorAll('[data-b]').forEach(e=>e.classList.toggle('active',e.getAttribute('data-b')===brand));}
let pgNum=params.get('pg');
if(pgNum){S.pg=parseInt(pgNum)||1;}
let sort=params.get('sort');
if(sort){S.sort=sort;document.getElementById('ss').value=sort;}
let p=params.get('p');
if(p==='list'){S.view='l';document.getElementById('gb').classList.remove('active');document.getElementById('lb').classList.add('active');}
}

// Update hash based on current list state (for filters)
function updateHash(){
let parts=[];
if(S.q)parts.push('q='+encodeURIComponent(S.q));
if(S.cat!=='all')parts.push('cat='+encodeURIComponent(S.cat));
if(S.brand!=='all')parts.push('brand='+encodeURIComponent(S.brand));
if(S.pg>1)parts.push('pg='+S.pg);
if(S.sort!=='default')parts.push('sort='+encodeURIComponent(S.sort));
if(S.view==='l')parts.push('p=list');
let hash=parts.length?'#'+parts.join('&'):'';
history.replaceState({type:'list'},'','/'+hash);
}

// Handle browser back/forward buttons
window.addEventListener('popstate',function(e){
let state=e.state;
if(state&&state.type==='product'&&typeof state.idx==='number'){
if(state.idx>=0&&state.idx<D.length){
let dv=document.getElementById('detailView');
if(!dv.classList.contains('show')){showDetailNoHistory(state.idx);}
}
}else{
// Go back to list view
document.getElementById('detailView').classList.remove('show');
document.getElementById('detailView').innerHTML='';
document.getElementById('listView').style.display='';
document.querySelector('.hero').style.display='';
document.title='V.AI STUDIO | Niềm tin khách hàng là tài sản của chúng tôi';
// Check if we need to show a specific page
let path=location.pathname;
if(path.startsWith('/catalogue')){showPage('catalogue');}
else if(path.startsWith('/lien-he')){showPage('contact');}
else{
document.querySelectorAll('.page-section').forEach(el=>el.classList.remove('active'));
let prodPage=document.getElementById('page-products');
if(prodPage)prodPage.classList.add('active');
document.querySelectorAll('.nav-tab').forEach(el=>el.classList.toggle('active',el.dataset.page==='products'));
parseUrlParams();
render();
}
}
});

// showDetail without pushing history (for popstate)
function showDetailNoHistory(idx){
_skipHistory=true;
showDetail(idx);
}

// ===== SHARE (Web Share API + Popover fallback) =====
let _shareData={title:'',text:'',url:''};

async function shareProduct(slug,name){
let url=location.origin+'/san-pham/'+slug+'/index.html';
let title=name||document.title;
let text=title+' - Malloca Thiết bị nhà bếp';
// Try native share first
if(navigator.share){
try{await navigator.share({title,text,url});return}catch(e){if(e.name==='AbortError')return}
}
// Fallback: show share popover
openSharePopover(url,title,text);
}

function shareCurrentPage(){
let url=location.origin+location.pathname;
let title=document.title;
let text=title;
if(navigator.share){
navigator.share({title,text,url}).catch(()=>{});
return;
}
openSharePopover(url,title,text);
}

function openSharePopover(url,title,text){
_shareData={title:title||'',text:text||'',url:url||location.href};
document.getElementById('shareLinkInput').value=_shareData.url;
document.getElementById('shareOverlay').classList.add('open');
}
function closeSharePopover(){document.getElementById('shareOverlay').classList.remove('open')}

function shareVia(platform){
let u=encodeURIComponent(_shareData.url);
let t=encodeURIComponent(_shareData.title);
let txt=encodeURIComponent(_shareData.text+' '+_shareData.url);
let win=null;
switch(platform){
case'facebook':win=window.open('https://www.facebook.com/sharer/sharer.php?u='+u,'_blank','width=600,height=400');break;
case'messenger':win=window.open('https://www.facebook.com/dialog/send?link='+u+'&redirect_uri='+u,'_blank');break;
case'zalo':win=window.open('https://zalo.me/share?url='+u,'_blank');break;
case'twitter':win=window.open('https://twitter.com/intent/tweet?text='+t+'&url='+u,'_blank','width=600,height=400');break;
case'telegram':win=window.open('https://t.me/share/url?url='+u+'&text='+t,'_blank');break;
case'whatsapp':win=window.open('https://wa.me/?text='+txt,'_blank');break;
case'email':window.location.href='mailto:?subject='+t+'&body='+txt;break;
case'copy':
if(navigator.clipboard){navigator.clipboard.writeText(_shareData.url).then(()=>showToast('Đã sao chép link!'))}
else{let ta=document.createElement('textarea');ta.value=_shareData.url;ta.style.cssText='position:fixed;top:-9999px';document.body.appendChild(ta);ta.select();document.execCommand('copy');document.body.removeChild(ta);showToast('Đã sao chép link!')}
break;
}
closeSharePopover();
}

function showToast(msg){
let old=document.querySelector('.share-toast');if(old)old.remove();
let t=document.createElement('div');t.className='share-toast';
t.style.cssText='position:fixed;bottom:24px;right:24px;background:#28a745;color:#fff;padding:12px 20px;border-radius:12px;font-size:.85rem;font-weight:600;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.2)';
t.innerHTML='<i class="fas fa-check-circle" style="margin-right:6px"></i>'+msg;
document.body.appendChild(t);
setTimeout(()=>{t.style.opacity='0';t.style.transition='opacity .3s';setTimeout(()=>t.remove(),300)},2500);
}

// ===== AI CHATBOX =====
let chatHistory=[];
let chatBusy=false;

function toggleChat(){
let box=document.getElementById('chatbox');
let ov=document.getElementById('chatOverlay2');
if(box.classList.contains('open')){closeChat()}
else{box.classList.add('open');ov.classList.add('open');document.getElementById('chatInput').focus()}
}
function closeChat(){
document.getElementById('chatbox').classList.remove('open');
document.getElementById('chatOverlay2').classList.remove('open');
}

function sendSuggestion(el){
document.getElementById('chatInput').value=el.textContent;
document.getElementById('chatSuggestions').style.display='none';
sendChat();
}

function appendMsg(role,html){
let body=document.getElementById('chatBody');
let div=document.createElement('div');
div.className='chat-msg '+role;
div.innerHTML=html;
body.appendChild(div);
body.scrollTop=body.scrollHeight;
return div;
}

function showTyping(){
let body=document.getElementById('chatBody');
let div=document.createElement('div');
div.className='chat-typing';div.id='typingIndicator';
div.innerHTML='<span></span><span></span><span></span>';
body.appendChild(div);
body.scrollTop=body.scrollHeight;
}
function hideTyping(){let el=document.getElementById('typingIndicator');if(el)el.remove()}

// Search products locally
function searchProducts(query){
if(!D||!D.length)return[];
let q=nVN(query);
let words=q.split(/\s+/).filter(w=>w.length>1);
let scored=D.map((p,i)=>{
let idx=p._idx;
let score=0;
words.forEach(w=>{
if(idx.includes(w))score+=1;
if(p.name&&nVN(p.name).includes(w))score+=3;
if(p.cat&&nVN(p.cat).includes(w))score+=2;
});
return{p,score};
}).filter(x=>x.score>0).sort((a,b)=>b.score-a.score);
return scored.slice(0,8).map(x=>x.p);
}

// Format products for context
function productsToContext(products){
return products.map(p=>{
let specs='';
if(p.specs&&Object.keys(p.specs).length){specs=' | Thông số: '+Object.entries(p.specs).slice(0,5).map(([k,v])=>k+': '+v).join(', ')}
return '- '+p.name+' | Giá: '+(p.price||'Liên hệ')+' | Danh mục: '+p.cat+specs;
}).join('\n');
}

// Format bot response
function formatBotResponse(text,matchedProducts){
// Strip any raw URLs or markdown links — keep text only
text=text.replace(/\[([^\]]+)\]\([^)]+\)/g,'$1');
text=text.replace(/https?:\/\/[^\s<)]+/g,'');
text=text.replace(/\/san-pham\/[a-z0-9-]+\/index\.html/g,'');
// Bold
text=text.replace(/\*\*([^*]+)\*\*/g,'<strong>$1</strong>');
// Line breaks
text=text.replace(/\n/g,'<br>');
// Smart product cards: only show products MENTIONED in the AI response
if(matchedProducts&&matchedProducts.length>0){
let mentionedProducts=filterMentionedProducts(text,matchedProducts);
if(mentionedProducts.length>0){
let cards=mentionedProducts.slice(0,4).map(p=>{
let pidx=D.findIndex(d=>d.slug===p.slug);
let cartBtn=pidx>=0&&p.priceNum>0?'<button onclick="event.stopPropagation();addToCart('+pidx+');this.innerHTML=\'✅ Đã thêm\';this.disabled=true" style="padding:4px 10px;background:var(--a);color:#fff;border:none;border-radius:6px;font-size:.68rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:inherit"><i class="fas fa-cart-plus"></i> Thêm giỏ</button>':'';
return '<div style="display:flex;gap:10px;background:var(--l);border-radius:10px;padding:10px;margin-top:6px;border:1px solid var(--gl)">'
+'<a href="/san-pham/'+p.slug+'/index.html" style="flex-shrink:0;text-decoration:none"><img src="'+p.image+'" style="width:50px;height:50px;object-fit:contain;border-radius:6px;background:#fff" onerror="this.style.display=\'none\'"></a>'
+'<div style="flex:1;min-width:0"><a href="/san-pham/'+p.slug+'/index.html" style="text-decoration:none;color:inherit"><div style="font-size:.76rem;font-weight:600;color:var(--d);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">'+p.name+'</div>'
+'<div style="font-size:.8rem;font-weight:800;color:var(--p);margin-top:2px">'+(p.price||'Liên hệ')+'</div></a>'
+'<div style="display:flex;gap:6px;margin-top:6px;flex-wrap:wrap">'
+cartBtn
+'<a href="/san-pham/'+p.slug+'/index.html" style="padding:4px 10px;background:var(--p);color:#fff;border-radius:6px;font-size:.68rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:4px"><i class="fas fa-eye"></i> Xem</a>'
+'</div></div></div>';
}).join('');
text+='<div style="margin-top:10px;padding-top:10px;border-top:1px solid var(--gl)"><div style="font-size:.68rem;font-weight:700;color:var(--g);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px">👉 Sản phẩm được đề cập</div>'+cards+'</div>';
}
}
return text;
}

// Filter products that are actually mentioned in the AI response
function filterMentionedProducts(responseText,products){
if(!products||!products.length)return[];
let text=responseText.toLowerCase().replace(/<[^>]*>/g,' ');
let textClean=text.replace(/[^a-z0-9]/g,'');
let mentioned=[];
let scores=[];
for(let p of products){
let score=0;
// Check model code (strongest signal)
let model=(p.model||'').toLowerCase().replace(/[^a-z0-9]/g,'');
if(model.length>=4&&textClean.includes(model)){score+=10}
// Check significant name words (need >=3 matches for generic names)
let nameWords=p.name.toLowerCase().replace(/[|]/g,' ').split(/\s+/).filter(w=>w.length>3&&!['malloca','eurogold','grob','phụ','kiện'].includes(w));
let matchCount=nameWords.filter(w=>text.includes(w)).length;
if(matchCount>=3){score+=matchCount}
if(score>0)scores.push({p,score});
}
// Sort by score descending, take top matches
scores.sort((a,b)=>b.score-a.score);
return scores.slice(0,4).map(s=>s.p);
}

async function sendChat(){
if(chatBusy)return;
let input=document.getElementById('chatInput');
let msg=input.value.trim();
if(!msg)return;
input.value='';
input.style.height='auto';
document.getElementById('chatSuggestions').style.display='none';

// Show user message
appendMsg('user',msg.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>'));

// Handle cart/quote/checkout commands
let msgLower=nVN(msg);
if(msgLower.match(/bao gia|lap bao gia|len bao gia|xuat bao gia|in bao gia/)){
if(cart.length===0){
appendMsg('bot','Giỏ hàng đang trống. Anh/chị hãy chọn sản phẩm trước rồi em lên báo giá nhé! 😊<br><br>Anh/chị cần tìm sản phẩm gì ạ?');
chatBusy=false;return;
}
let total=cart.reduce((s,c)=>s+c.priceNum*c.qty,0);
let rows=cart.map((c,i)=>`<tr><td style="padding:8px;font-size:.78rem">${i+1}</td><td style="padding:8px;font-size:.78rem">${c.name}</td><td style="padding:8px;text-align:center;font-size:.78rem">${c.qty}</td><td style="padding:8px;text-align:right;font-size:.78rem;white-space:nowrap">${c.priceNum?c.priceNum.toLocaleString('vi-VN')+'đ':'Liên hệ'}</td><td style="padding:8px;text-align:right;font-size:.78rem;font-weight:700;white-space:nowrap">${(c.priceNum*c.qty).toLocaleString('vi-VN')}đ</td></tr>`).join('');
let quoteHtml=`<div style="background:var(--l);border-radius:12px;padding:14px;margin-top:8px">
<div style="font-weight:800;font-size:.9rem;color:var(--p);margin-bottom:10px">📋 BẢNG BÁO GIÁ</div>
<table style="width:100%;border-collapse:collapse;border:1px solid var(--gl);border-radius:8px;overflow:hidden">
<thead><tr style="background:var(--p);color:#fff"><th style="padding:8px;font-size:.72rem;text-align:left">STT</th><th style="padding:8px;font-size:.72rem;text-align:left">Sản phẩm</th><th style="padding:8px;font-size:.72rem;text-align:center">SL</th><th style="padding:8px;font-size:.72rem;text-align:right">Đơn giá</th><th style="padding:8px;font-size:.72rem;text-align:right">Thành tiền</th></tr></thead>
<tbody>${rows}</tbody>
<tfoot><tr style="background:rgba(0,63,98,.05)"><td colspan="4" style="padding:10px;font-weight:800;font-size:.85rem;text-align:right">TỔNG CỘNG:</td><td style="padding:10px;font-weight:900;font-size:.95rem;color:var(--p);text-align:right;white-space:nowrap">${total.toLocaleString('vi-VN')}đ</td></tr></tfoot>
</table>
<div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
<button onclick="viewQuoteInline(this)" style="padding:8px 14px;background:#fff;color:var(--p);border:2px solid var(--p);border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px"><i class="fas fa-eye"></i> Xem chi tiết</button>
<button onclick="openQuotation()" style="padding:8px 14px;background:var(--p);color:#fff;border:none;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px"><i class="fas fa-file-pdf"></i> PDF</button>
<button onclick="exportQuoteExcel()" style="padding:8px 14px;background:#217346;color:#fff;border:none;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px"><i class="fas fa-file-excel"></i> Excel</button>
<button onclick="openCheckout()" style="padding:8px 14px;background:var(--a);color:#fff;border:none;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px"><i class="fas fa-qrcode"></i> Thanh toán</button>
</div>
</div>`;
appendMsg('bot','Dạ, em lên bảng báo giá cho anh/chị ngay ạ! 📋'+quoteHtml);
chatBusy=false;return;
}

if(msgLower.match(/thanh toan|chuyen khoan|qr|quyet toan/)){
if(cart.length===0){
appendMsg('bot','Giỏ hàng đang trống ạ. Anh/chị chọn sản phẩm trước rồi em hỗ trợ thanh toán nhé! 😊');
chatBusy=false;return;
}
openCheckout();closeChat();
chatBusy=false;return;
}

if(msgLower.match(/^gio hang$|^xem gio$|^xem gio hang$/)){
if(cart.length===0){
appendMsg('bot','Giỏ hàng đang trống ạ. Anh/chị muốn tìm sản phẩm gì để em tư vấn? 😊');
}else{
let items=cart.map((c,i)=>`${i+1}. **${c.name}** x${c.qty} — ${c.priceNum?c.priceNum.toLocaleString('vi-VN')+'đ':'Liên hệ'}`).join('<br>');
let total=cart.reduce((s,c)=>s+c.priceNum*c.qty,0);
appendMsg('bot','🛒 Giỏ hàng hiện tại:<br>'+items+'<br><br><strong>Tổng: '+total.toLocaleString('vi-VN')+'đ</strong><br><br>Anh/chị có muốn em <strong>lên báo giá</strong> hoặc <strong>thanh toán</strong> không ạ?');
}
chatBusy=false;return;
}

// Search related products
let matchedProducts=searchProducts(msg);
let productContext=matchedProducts.length
  ? matchedProducts.map((p,i)=>{
    let specs='';
    if(p.specs&&Object.keys(p.specs).length){
      specs=Object.entries(p.specs).slice(0,8).map(([k,v])=>k+': '+v).join('; ');
    }
    let features=(p.feats&&p.feats.length)?p.feats.slice(0,4).join('; '):'';
    return `${i+1}. ${p.name}
   Giá: ${p.price||'Liên hệ'} | ${p.cat} | ${p.brand}
   ${specs?'Thông số: '+specs:''}
   ${features?'Tính năng: '+features:''}
   ${p.summary?'Mô tả: '+p.summary.substring(0,200):''}`;
  }).join('\n\n')
  : '';

// Prepare messages for AI
chatHistory.push({role:'user',content:msg});

let systemPrompt=`Bạn là V.AI STUDIO — chuyên gia tư vấn thiết bị nhà bếp & khóa thông minh, với nhiều năm kinh nghiệm.

CÁCH TRẢ LỜI:
- Nói chuyện tự nhiên: xưng "em", gọi khách "anh/chị"
- PHÂN TÍCH nhu cầu cụ thể trước (diện tích bếp, số người, ngân sách)
- Giải thích TẠI SAO sản phẩm phù hợp — đừng chỉ liệt kê
- KHÔNG chèn link URL. KHÔNG dùng markdown link
- Dùng **in đậm** cho tên SP, emoji vừa phải
- Kết thúc bằng câu hỏi mở

KHẢ NĂNG ĐẶC BIỆT — hướng dẫn khách dùng:
- Nếu khách muốn mua, hướng dẫn: "Anh/chị gõ **'thêm giỏ'** hoặc bấm nút 🛒 bên cạnh sản phẩm"
- Nếu khách muốn báo giá, hướng dẫn: "Anh/chị gõ **'báo giá'** để em lên bảng báo giá chi tiết"
- Nếu khách muốn thanh toán, hướng dẫn: "Anh/chị gõ **'thanh toán'** để chuyển khoản qua QR"
- Nếu khách muốn xem giỏ hàng: "Anh/chị gõ **'giỏ hàng'** để xem"

${cart.length>0?'GIỎHÀNG HIỆN TẠI ('+cart.length+' SP):\\n'+cart.map(c=>c.name+' x'+c.qty+' — '+(c.priceNum?c.priceNum.toLocaleString('vi-VN')+'đ':'Liên hệ')).join('\\n')+'\\nTổng: '+cart.reduce((s,c)=>s+c.priceNum*c.qty,0).toLocaleString('vi-VN')+'đ':'Giỏ hàng đang trống.'}

${productContext ? 'DỮ LIỆU SẢN PHẨM:\\n'+productContext : 'Không có SP khớp — tư vấn bằng kiến thức chuyên môn.'}

THÔNG TIN:
- 2256 sản phẩm, 5 thương hiệu: Malloca, Eurogold, Grob, Canzy, Demax
- Malloca: thiết bị bếp cao cấp châu Âu
- Eurogold: phụ kiện tủ bếp inox 304
- Grob: phụ kiện nhập khẩu
- Canzy: bếp từ, máy hút mùi
- Demax: khóa cửa thông minh Made in Malaysia
- Zalo tư vấn: 0981 873 395 (zalo.me/0981873395) hoặc 0918 258 385 (zalo.me/0918258385)`;

let messages=[{role:'system',content:systemPrompt}];
// Keep last 8 messages for context
let recent=chatHistory.slice(-8);
messages.push(...recent);

chatBusy=true;
document.getElementById('chatSend').disabled=true;
showTyping();

try{
// Auto-detect token from any variable name
let vars=window.huggingface?.variables||{};
let token=vars.HF_TOKEN||vars.VAISTUDIO||vars.AI_TOKEN||vars.TOKEN||'';
// Filter out non-token values
if(token&&!token.startsWith('hf_'))token='';

if(!token){
hideTyping();
// Smart local response without AI
let reply='';
if(matchedProducts.length>0){
reply='Tôi tìm thấy <strong>'+matchedProducts.length+' sản phẩm</strong> phù hợp với yêu cầu của bạn:';
}else{
reply='Tôi chưa tìm thấy sản phẩm cụ thể. Bạn có thể thử:<br>• Gõ tên sản phẩm (ví dụ: "bếp từ", "máy hút mùi")<br>• Gõ danh mục (ví dụ: "lò nướng", "chậu rửa")<br>• Gõ mã sản phẩm hoặc thương hiệu<br><br>💬 Hoặc nhắn Zalo <a href="https://zalo.me/0981873395" target="_blank" style="color:var(--p);font-weight:700">0981 873 395</a> để được tư vấn trực tiếp!';
}
appendMsg('bot',formatBotResponse(reply,matchedProducts));
chatHistory.push({role:'assistant',content:reply});
chatBusy=false;document.getElementById('chatSend').disabled=false;
return;
}

let resp=await fetch('https://router.huggingface.co/v1/chat/completions',{
method:'POST',
headers:{'Authorization':'Bearer '+token,'Content-Type':'application/json'},
body:JSON.stringify({
model:'meta-llama/Llama-3.3-70B-Instruct',
messages:messages,
max_tokens:500,
temperature:0.7,
top_p:0.9,
stream:true
})
});

hideTyping();

if(!resp.ok){
let err=await resp.text();
console.error('Chat API error:',resp.status,err);
appendMsg('bot',formatBotResponse('Xin lỗi, hệ thống AI đang bận. Đây là sản phẩm tôi tìm được cho anh/chị:',matchedProducts));
chatBusy=false;document.getElementById('chatSend').disabled=false;
return;
}

// Stream response — typewriter effect
let fullReply='';
let botDiv=appendMsg('bot','<span class="typing-cursor">▊</span>');
let reader=resp.body.getReader();
let decoder=new TextDecoder();
let buffer='';

while(true){
let {done,value}=await reader.read();
if(done)break;
buffer+=decoder.decode(value,{stream:true});
let lines=buffer.split('\n');
buffer=lines.pop();
for(let line of lines){
line=line.trim();
if(!line.startsWith('data: '))continue;
let data=line.slice(6);
if(data==='[DONE]')break;
try{
let j=JSON.parse(data);
let delta=j.choices?.[0]?.delta?.content;
if(delta){
fullReply+=delta;
botDiv.innerHTML=formatBotResponse(fullReply,null)+'<span class="typing-cursor" style="display:inline;animation:blink .8s step-end infinite;color:var(--p)">▊</span>';
document.getElementById('chatBody').scrollTop=document.getElementById('chatBody').scrollHeight;
}
}catch(e){}
}
}
// Remove cursor, add product cards
botDiv.innerHTML=formatBotResponse(fullReply,matchedProducts);
chatHistory.push({role:'assistant',content:fullReply});
document.getElementById('chatBody').scrollTop=document.getElementById('chatBody').scrollHeight;

}catch(e){
hideTyping();
console.error('Chat error:',e);
appendMsg('bot',formatBotResponse('Xin lỗi, đã có lỗi xảy ra. Đây là sản phẩm tôi tìm được cho anh/chị:',matchedProducts));
}

chatBusy=false;
document.getElementById('chatSend').disabled=false;
}

// Legacy compatibility
function copyProductLink(slug){shareProduct(slug)}
function copyCurrentLink(){shareCurrentPage()}
function fallbackCopy(text){
if(navigator.clipboard){navigator.clipboard.writeText(text).then(()=>showToast('Đã sao chép!'))}
else{let ta=document.createElement('textarea');ta.value=text;ta.style.cssText='position:fixed;top:-9999px';document.body.appendChild(ta);ta.select();document.execCommand('copy');document.body.removeChild(ta);showToast('Đã sao chép!')}
}

// ===== INLINE QUOTE VIEW + EXCEL EXPORT =====
function viewQuoteInline(btn){
let container=btn.closest('div').parentElement;
let existing=container.querySelector('.quote-inline-detail');
if(existing){existing.remove();return;}
let today=new Date().toLocaleDateString('vi-VN');
let total=cart.reduce((s,c)=>s+c.priceNum*c.qty,0);
let rows=cart.map((c,i)=>{
let unit=c.priceNum?c.priceNum.toLocaleString('vi-VN')+'đ':'Liên hệ';
let sub=(c.priceNum*c.qty).toLocaleString('vi-VN')+'đ';
return `<tr style="border-bottom:1px solid var(--gl)">
<td style="padding:10px 8px;font-size:.8rem;text-align:center;color:var(--g)">${i+1}</td>
<td style="padding:10px 8px"><div style="font-size:.8rem;font-weight:600">${c.name}</div></td>
<td style="padding:10px 8px;text-align:center;font-size:.8rem">${c.qty}</td>
<td style="padding:10px 8px;text-align:right;font-size:.8rem;white-space:nowrap">${unit}</td>
<td style="padding:10px 8px;text-align:right;font-size:.85rem;font-weight:700;color:var(--p);white-space:nowrap">${sub}</td>
</tr>`;}).join('');

let html=`<div class="quote-inline-detail" style="margin-top:12px;background:#fff;border-radius:12px;border:2px solid var(--p);overflow:hidden">
<div style="background:linear-gradient(135deg,var(--p),#0077b6);color:#fff;padding:16px 18px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px">
<img src="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_200.png" style="height:30px;filter:brightness(10)" onerror="this.style.display='none'">
<div style="font-weight:800;font-size:1rem">V.AI STUDIO</div>
</div>
<div style="font-size:.72rem;opacity:.8">Niềm tin khách hàng là tài sản của chúng tôi</div>
</div>
<div style="padding:16px 18px">
<div style="display:flex;justify-content:space-between;margin-bottom:12px">
<div><div style="font-size:.7rem;color:var(--g);text-transform:uppercase;letter-spacing:1px">Báo giá</div><div style="font-size:1.1rem;font-weight:800;color:var(--d)">BG-${Date.now().toString(36).toUpperCase()}</div></div>
<div style="text-align:right"><div style="font-size:.72rem;color:var(--g)">Ngày lập</div><div style="font-size:.85rem;font-weight:600">${today}</div></div>
</div>
<table style="width:100%;border-collapse:collapse">
<thead><tr style="background:var(--l)">
<th style="padding:8px;font-size:.7rem;text-align:center;color:var(--g);font-weight:700">STT</th>
<th style="padding:8px;font-size:.7rem;text-align:left;color:var(--g);font-weight:700">SẢN PHẨM</th>
<th style="padding:8px;font-size:.7rem;text-align:center;color:var(--g);font-weight:700">SL</th>
<th style="padding:8px;font-size:.7rem;text-align:right;color:var(--g);font-weight:700">ĐƠN GIÁ</th>
<th style="padding:8px;font-size:.7rem;text-align:right;color:var(--g);font-weight:700">THÀNH TIỀN</th>
</tr></thead>
<tbody>${rows}</tbody>
</table>
<div style="display:flex;justify-content:flex-end;padding:12px 8px;background:var(--l);border-radius:8px;margin-top:8px">
<div style="text-align:right"><div style="font-size:.72rem;color:var(--g)">TỔNG CỘNG</div><div style="font-size:1.2rem;font-weight:900;color:var(--p)">${total.toLocaleString('vi-VN')}đ</div></div>
</div>
<div style="margin-top:12px;padding-top:12px;border-top:1px dashed var(--gl);font-size:.72rem;color:var(--g);line-height:1.6">
💬 Zalo: <a href="https://zalo.me/0981873395" target="_blank" style="color:var(--p);font-weight:600">0981 873 395</a> · <a href="https://zalo.me/0918258385" target="_blank" style="color:var(--p);font-weight:600">0918 258 385</a><br>
💡 Giá trên đã bao gồm VAT · Miễn phí vận chuyển & lắp đặt
</div>
</div>
</div>`;
container.insertAdjacentHTML('beforeend',html);
document.getElementById('chatBody').scrollTop=document.getElementById('chatBody').scrollHeight;
}

function exportQuoteExcel(){
if(!cart.length)return;
let today=new Date().toLocaleDateString('vi-VN');
let total=cart.reduce((s,c)=>s+c.priceNum*c.qty,0);
// Build CSV with BOM for Excel UTF-8
let csv='\uFEFF';
csv+='BÁO GIÁ V.AI STUDIO\n';
csv+='Ngày: '+today+'\n\n';
csv+='STT,Mã SP,Sản phẩm,SL,Đơn giá,Thành tiền\n';
cart.forEach((c,i)=>{
let name=c.name.replace(/,/g,' -');
let p=D[c.idx];
let sku=p?p.sku||p.model:'';
csv+=(i+1)+','+sku+','+name+','+c.qty+','+(c.priceNum||0)+','+(c.priceNum*c.qty)+'\n';
});
csv+=',,,,,\n';
csv+=',,,,TỔNG CỘNG,'+total+'\n';
csv+='\n';
csv+='Zalo: 0981 873 395 | 0918 258 385\n';
csv+='Niềm tin khách hàng là tài sản của chúng tôi\n';
let blob=new Blob([csv],{type:'text/csv;charset=utf-8'});
let url=URL.createObjectURL(blob);
let a=document.createElement('a');
a.href=url;a.download='BaoGia_VAI_STUDIO_'+today.replace(/\//g,'-')+'.csv';
a.click();URL.revokeObjectURL(url);
showToast('Đã tải báo giá Excel!');
}

// ===== QUOTATION SYSTEM =====
function openQuotation(){
closeCart();
let overlay=document.getElementById('quoteOverlay');
overlay.classList.add('open');
document.body.style.overflow='hidden';
// Set default date
document.getElementById('qcDate').value=new Date().toISOString().split('T')[0];
// Build product table
renderQuoteTable();
}

function closeQuotation(){
document.getElementById('quoteOverlay').classList.remove('open');
document.body.style.overflow='';
}

let _quoteUnlocked=false;

function checkQuoteAccess(){
let code=document.getElementById('qcAccessCode').value;
let status=document.getElementById('qcAccessStatus');
let icon=document.getElementById('qcLockIcon');
let promptBox=document.getElementById('aiPromptBox');
if(code==='V.AISTUDIO'){
_quoteUnlocked=true;
status.textContent='🔓 Đã mở';
status.style.color='#28a745';
icon.className='fas fa-lock-open';icon.style.color='#28a745';
promptBox.style.display='block';
document.querySelectorAll('.qt-disc').forEach(el=>{el.disabled=false;el.style.background='#fff';el.style.cursor='text'});
}else{
_quoteUnlocked=false;
status.textContent='🔒';
status.style.color='var(--g)';
icon.className='fas fa-lock';icon.style.color='var(--g)';
promptBox.style.display='none';
document.querySelectorAll('.qt-disc').forEach(el=>{el.disabled=true;el.style.background='var(--l)';el.style.cursor='not-allowed'});
}
}

async function applyAiDiscount(){
let prompt=document.getElementById('qcAiPrompt').value.trim();
if(!prompt)return;
let btn=document.getElementById('aiDiscBtn');
let statusEl=document.getElementById('aiDiscStatus');
btn.disabled=true;btn.innerHTML='<i class="fas fa-spinner fa-spin"></i> Đang xử lý...';
statusEl.textContent='';

// Build product list for AI
let productList=cart.map((c,i)=>{
let product=D[c.idx]||{};
return `SP${i+1}: ${c.name} | Mã: ${product.model||''} | Đơn giá: ${c.priceNum}`;
}).join('\n');

let systemMsg=`Bạn là hệ thống tính chiết khấu. Người dùng sẽ yêu cầu giảm giá cho danh sách sản phẩm.

DANH SÁCH SẢN PHẨM HIỆN TẠI:
${productList}

NHIỆM VỤ: Trả về JSON array giá chiết khấu cho TỪNG sản phẩm. Format CHÍNH XÁC:
[số1, số2, số3, ...]
Trong đó mỗi số là giá chiết khấu (VNĐ, số nguyên) cho từng sản phẩm theo thứ tự.
CHỈ trả về JSON array, KHÔNG giải thích gì thêm.

Ví dụ: nếu có 3 SP giá 10000000, 5000000, 8000000 và user yêu cầu "giảm 10%":
[9000000, 4500000, 7200000]`;

try{
let vars=window.huggingface?.variables||{};
let token=vars.HF_TOKEN||vars.VAISTUDIO||'';
if(token&&!token.startsWith('hf_'))token='';
if(!token){statusEl.textContent='⚠️ Chưa có API token';btn.disabled=false;btn.innerHTML='<i class="fas fa-robot"></i> Áp dụng';return}

let resp=await fetch('https://router.huggingface.co/v1/chat/completions',{
method:'POST',
headers:{'Authorization':'Bearer '+token,'Content-Type':'application/json'},
body:JSON.stringify({model:'meta-llama/Llama-3.3-70B-Instruct',messages:[{role:'system',content:systemMsg},{role:'user',content:prompt}],max_tokens:200,temperature:0.1})
});
let data=await resp.json();
let reply=data.choices[0].message.content.trim();
// Parse JSON array from reply
let match=reply.match(/\[[\d,\s]+\]/);
if(match){
let prices=JSON.parse(match[0]);
if(prices.length===cart.length){
prices.forEach((p,i)=>{
let el=document.querySelector(`.qt-disc[data-idx="${i}"]`);
if(el){el.value=Math.round(p).toLocaleString('vi-VN');el.disabled=false;el.style.background='#fff';el.style.cursor='text'}
});
updateQuoteTotal();
statusEl.innerHTML='✅ Đã áp dụng chiết khấu cho '+prices.length+' sản phẩm';
statusEl.style.color='#28a745';
}else{statusEl.textContent='⚠️ Số SP không khớp ('+prices.length+' vs '+cart.length+')';statusEl.style.color='#dc3545'}
}else{statusEl.textContent='⚠️ AI: '+reply.substring(0,80);statusEl.style.color='#dc3545'}
}catch(e){statusEl.textContent='❌ Lỗi: '+e.message;statusEl.style.color='#dc3545'}
btn.disabled=false;btn.innerHTML='<i class="fas fa-robot"></i> Áp dụng';
}

function renderQuoteTable(){
let tbody=document.getElementById('quoteTableBody');
let locked=!_quoteUnlocked;
tbody.innerHTML=cart.map((c,i)=>{
let product=D[c.idx]||{};
let model=product.model||product.sku||'';
let specs='';
if(product.specs&&Object.keys(product.specs).length){
specs=Object.entries(product.specs).slice(0,3).map(([k,v])=>k+': '+v).join(', ');
}
let lineTotal=c.priceNum*c.qty;
let discStyle='width:80px;padding:5px 6px;border:1.5px solid var(--gl);border-radius:6px;font-size:.78rem;text-align:right;font-family:inherit;outline:none;';
discStyle+=locked?'background:var(--l);cursor:not-allowed':'background:#fff';
return `<tr>
<td style="text-align:center">${i+1}</td>
<td><img class="qt-img" src="${c.image}" alt="" crossorigin="anonymous" onerror="this.style.display='none'"></td>
<td class="qt-name">${c.name}</td>
<td style="text-align:center">${model}</td>
<td style="font-size:.72rem;color:var(--g);max-width:160px">${specs}</td>
<td style="text-align:center">${c.qty}</td>
<td class="qt-price">${c.priceNum>0?c.priceNum.toLocaleString('vi-VN')+'đ':'Liên hệ'}</td>
<td><input class="qt-disc" data-idx="${i}" value="${c.priceNum>0?c.priceNum.toLocaleString('vi-VN'):''}" oninput="updateQuoteTotal()" ${locked?'disabled':''} style="${discStyle}"></td>
<td class="qt-price qt-linetotal" data-idx="${i}">${lineTotal>0?lineTotal.toLocaleString('vi-VN')+'đ':''}</td>
<td><input class="qt-note" data-idx="${i}" placeholder="Ghi chú"></td>
</tr>`;
}).join('');
updateQuoteTotal();
}

function updateQuoteTotal(){
let total=0;
cart.forEach((c,i)=>{
let discInput=document.querySelector(`.qt-disc[data-idx="${i}"]`);
let discVal=discInput?parseInt(discInput.value.replace(/\D/g,''))||0:c.priceNum;
let lineTotal=discVal*c.qty;
let cell=document.querySelector(`.qt-linetotal[data-idx="${i}"]`);
if(cell)cell.textContent=lineTotal>0?lineTotal.toLocaleString('vi-VN')+'đ':'';
total+=lineTotal;
});
document.getElementById('quoteTotalCell').textContent=total.toLocaleString('vi-VN')+'đ';
}

function getQuoteData(){
let customer={
name:document.getElementById('qcName').value||'',
phone:document.getElementById('qcPhone').value||'',
email:document.getElementById('qcEmail').value||'',
addr:document.getElementById('qcAddr').value||'',
company:document.getElementById('qcCompany').value||'',
date:document.getElementById('qcDate').value||new Date().toISOString().split('T')[0]
};
let items=cart.map((c,i)=>{
let product=D[c.idx]||{};
let discInput=document.querySelector(`.qt-disc[data-idx="${i}"]`);
let noteInput=document.querySelector(`.qt-note[data-idx="${i}"]`);
let discPrice=discInput?parseInt(discInput.value.replace(/\D/g,''))||0:c.priceNum;
return{
stt:i+1, name:c.name, model:product.model||product.sku||'',
specs:product.specs?Object.entries(product.specs).slice(0,3).map(([k,v])=>k+': '+v).join(', '):'',
image:c.image, qty:c.qty, price:c.priceNum, discPrice:discPrice,
total:discPrice*c.qty, note:noteInput?noteInput.value:''
};
});
let grandTotal=items.reduce((s,it)=>s+it.total,0);
return{customer,items,grandTotal};
}

function fmtVND(n){return n>0?n.toLocaleString('vi-VN')+'đ':'Liên hệ'}

// ===== EXCEL EXPORT WITH FORMULAS =====
async function exportExcel(){
let qd=getQuoteData();
let wb=new ExcelJS.Workbook();
wb.creator='Malloca Vietnam';
let ws=wb.addWorksheet('Báo Giá');
ws.columns=[
{key:'stt',width:6},{key:'name',width:32},{key:'model',width:16},{key:'specs',width:28},
{key:'image',width:14},{key:'qty',width:8},{key:'price',width:16},{key:'disc',width:16},
{key:'total',width:18},{key:'note',width:18}
];
// Header
ws.mergeCells('A1','J1');
let h1=ws.getCell('A1');
h1.value='V.AI STUDIO - Niềm tin khách hàng là tài sản của chúng tôi';
h1.font={name:'Arial',bold:true,size:14,color:{argb:'FF003F62'}};
h1.alignment={horizontal:'center',vertical:'middle'};
h1.fill={type:'pattern',pattern:'solid',fgColor:{argb:'FFF0F7FF'}};
ws.getRow(1).height=30;
ws.mergeCells('A2','J2');
let h2=ws.getCell('A2');
h2.value='BÁO GIÁ SẢN PHẨM';
h2.font={name:'Arial',bold:true,size:16,color:{argb:'FFDB9815'}};
h2.alignment={horizontal:'center',vertical:'middle'};
ws.getRow(2).height=28;

// Customer info
let r=4;
let ci=[['Khách hàng:',qd.customer.name],['SĐT:',qd.customer.phone],['Email:',qd.customer.email],
['Địa chỉ:',qd.customer.addr],['Công ty:',qd.customer.company],['Ngày:',qd.customer.date]];
ci.forEach(pair=>{
ws.getCell('A'+r).value=pair[0];ws.getCell('A'+r).font={bold:true,size:10};
ws.getCell('B'+r).value=pair[1];ws.getCell('B'+r).font={size:10};
r++;
});
r++;
let headerR=r;

// Table header
let headers=['STT','Tên sản phẩm','Mã SP','Thông tin SP','Hình ảnh','SL','Đơn giá','Đơn giá CK','Thành tiền','Ghi chú'];
let headerRow=ws.getRow(r);
headers.forEach((h,i)=>{headerRow.getCell(i+1).value=h});
headerRow.height=26;
headerRow.eachCell(cell=>{
cell.font={bold:true,color:{argb:'FFFFFFFF'},name:'Arial',size:9};
cell.fill={type:'pattern',pattern:'solid',fgColor:{argb:'FF003F62'}};
cell.border={top:{style:'thin'},left:{style:'thin'},bottom:{style:'thin'},right:{style:'thin'}};
cell.alignment={horizontal:'center',vertical:'middle',wrapText:true};
});
r++;
let dataStartR=r;

// Data rows with FORMULAS
// Detect if AI applied a percentage discount
let discountPct=0;
if(qd.items.length>0&&qd.items[0].price>0){
let ratio=qd.items[0].discPrice/qd.items[0].price;
let allSameRatio=qd.items.every(it=>it.price===0||Math.abs(it.discPrice/it.price-ratio)<0.005);
if(allSameRatio&&ratio<1&&ratio>0)discountPct=Math.round(ratio*100);
}

qd.items.forEach((item,idx)=>{
let row=ws.getRow(r);
row.height=36;
// A: STT
let cA=row.getCell(1);cA.value=item.stt;
cA.alignment={horizontal:'center',vertical:'middle'};
cA.font={size:10};
// B: Tên SP
let cB=row.getCell(2);cB.value=item.name;
cB.alignment={vertical:'middle',wrapText:true};
cB.font={size:10,bold:true,color:{argb:'FF1A1A1A'}};
// C: Mã SP
let cC=row.getCell(3);cC.value=item.model;
cC.alignment={horizontal:'center',vertical:'middle'};
cC.font={size:9,color:{argb:'FF003F62'}};
// D: Thông tin
let cD=row.getCell(4);cD.value=item.specs;
cD.alignment={vertical:'middle',wrapText:true};
cD.font={size:8,color:{argb:'FF888888'}};
// E: Hình ảnh
row.getCell(5).value='';
row.getCell(5).alignment={horizontal:'center',vertical:'middle'};
// F: SL
let cF=row.getCell(6);cF.value=item.qty;
cF.alignment={horizontal:'center',vertical:'middle'};
cF.font={size:10,bold:true};
// G: Đơn giá
let cG=row.getCell(7);cG.value=item.price;
cG.numFmt='#,##0';
cG.alignment={horizontal:'right',vertical:'middle'};
cG.font={size:10};
// H: Đơn giá CK = FORMULA if %, else value
let cH=row.getCell(8);
if(discountPct>0&&discountPct<100){
cH.value={formula:`G${r}*${discountPct}%`};
}else{
cH.value=item.discPrice;
}
cH.numFmt='#,##0';
cH.alignment={horizontal:'right',vertical:'middle'};
if(item.discPrice<item.price){cH.font={size:10,color:{argb:'FFDC3545'},bold:true}}else{cH.font={size:10}}
// I: Thành tiền = H × F
let cI=row.getCell(9);
cI.value={formula:`H${r}*F${r}`};
cI.numFmt='#,##0';
cI.alignment={horizontal:'right',vertical:'middle'};
cI.font={size:10,bold:true,color:{argb:'FF003F62'}};
// J: Ghi chú
let cJ=row.getCell(10);cJ.value=item.note;
cJ.alignment={vertical:'middle',wrapText:true};
cJ.font={size:9};
// Borders + alternate colors
for(let c=1;c<=10;c++){
row.getCell(c).border={top:{style:'thin',color:{argb:'FFD0D5DD'}},left:{style:'thin',color:{argb:'FFD0D5DD'}},bottom:{style:'thin',color:{argb:'FFD0D5DD'}},right:{style:'thin',color:{argb:'FFD0D5DD'}}};
}
if(item.stt%2===0){for(let c=1;c<=10;c++){row.getCell(c).fill={type:'pattern',pattern:'solid',fgColor:{argb:'FFF8FAFC'}}}}
r++;
});
let dataEndR=r-1;

// ═══ SUMMARY SECTION ═══
let sumStyle={border:{top:{style:'thin',color:{argb:'FFD0D5DD'}},bottom:{style:'thin',color:{argb:'FFD0D5DD'}}}};

// TỔNG CỘNG
let tr=r;
ws.mergeCells(tr,1,tr,8);
ws.getCell('A'+tr).value='TỔNG CỘNG:';
ws.getCell('A'+tr).font={bold:true,size:11,color:{argb:'FF003F62'}};
ws.getCell('A'+tr).alignment={horizontal:'right',vertical:'middle'};
ws.getCell('I'+tr).value={formula:`SUM(I${dataStartR}:I${dataEndR})`};
ws.getCell('I'+tr).numFmt='#,##0';
ws.getCell('I'+tr).font={bold:true,size:12,color:{argb:'FF003F62'}};
ws.getCell('I'+tr).alignment={horizontal:'right',vertical:'middle'};
ws.getRow(tr).height=28;
for(let c=1;c<=10;c++){ws.getRow(tr).getCell(c).border={top:{style:'medium',color:{argb:'FF003F62'}},bottom:{style:'thin',color:{argb:'FFD0D5DD'}}};ws.getRow(tr).getCell(c).fill={type:'pattern',pattern:'solid',fgColor:{argb:'FFE8F0FE'}}}
r=tr+1;

// ĐẶT CỌC (30%)
ws.mergeCells(r,1,r,8);
ws.getCell('A'+r).value='Đặt cọc (30%):';
ws.getCell('A'+r).font={size:10,color:{argb:'FF555555'}};
ws.getCell('A'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getCell('I'+r).value={formula:`ROUND(I${tr}*30%,0)`};
ws.getCell('I'+r).numFmt='#,##0';
ws.getCell('I'+r).font={bold:true,size:10,color:{argb:'FFDB9815'}};
ws.getCell('I'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getRow(r).height=22;
r++;

// CÒN LẠI
ws.mergeCells(r,1,r,8);
ws.getCell('A'+r).value='Còn lại:';
ws.getCell('A'+r).font={size:10,color:{argb:'FF555555'}};
ws.getCell('A'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getCell('I'+r).value={formula:`I${tr}-I${r-1}`};
ws.getCell('I'+r).numFmt='#,##0';
ws.getCell('I'+r).font={size:10};
ws.getCell('I'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getRow(r).height=22;
r++;

// PHỤ PHÍ
ws.mergeCells(r,1,r,8);
ws.getCell('A'+r).value='Phụ phí (nếu có):';
ws.getCell('A'+r).font={size:10,color:{argb:'FF555555'}};
ws.getCell('A'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getCell('I'+r).value=0;
ws.getCell('I'+r).numFmt='#,##0';
ws.getCell('I'+r).font={size:10,italic:true};
ws.getCell('I'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getCell('I'+r).fill={type:'pattern',pattern:'solid',fgColor:{argb:'FFFFFFEE'}};
let surchargeR=r;
ws.getRow(r).height=22;
r++;

// TỔNG THANH TOÁN
ws.mergeCells(r,1,r,8);
ws.getCell('A'+r).value='TỔNG THANH TOÁN:';
ws.getCell('A'+r).font={bold:true,size:12,color:{argb:'FFFFFFFF'}};
ws.getCell('A'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getCell('A'+r).fill={type:'pattern',pattern:'solid',fgColor:{argb:'FF003F62'}};
ws.getCell('I'+r).value={formula:`I${tr}+I${surchargeR}`};
ws.getCell('I'+r).numFmt='#,##0';
ws.getCell('I'+r).font={bold:true,size:13,color:{argb:'FFFFFFFF'}};
ws.getCell('I'+r).alignment={horizontal:'right',vertical:'middle'};
ws.getCell('I'+r).fill={type:'pattern',pattern:'solid',fgColor:{argb:'FF003F62'}};
for(let c=1;c<=10;c++){ws.getRow(r).getCell(c).fill={type:'pattern',pattern:'solid',fgColor:{argb:'FF003F62'}}}
ws.getRow(r).height=30;
r+=2;

// Footer notes
ws.mergeCells(r,1,r,10);
ws.getCell('A'+r).value='📌 Báo giá có hiệu lực 30 ngày kể từ ngày lập. Giá đã bao gồm VAT.';
ws.getCell('A'+r).font={italic:true,size:9,color:{argb:'FF888888'}};
ws.getCell('A'+r).alignment={wrapText:true};
r++;
ws.mergeCells(r,1,r,10);
ws.getCell('A'+r).value='💬 Zalo: 0981 873 395 | 0918 258 385 | ✅ Miễn phí vận chuyển & lắp đặt';
ws.getCell('A'+r).font={italic:true,size:9,color:{argb:'FF888888'}};
ws.getCell('A'+r).alignment={wrapText:true};

// Save
let buf=await wb.xlsx.writeBuffer();
let blob=new Blob([buf],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
let url=URL.createObjectURL(blob);
let a=document.createElement('a');a.href=url;a.download='Bao-gia-Malloca-'+(qd.customer.name||'KH').replace(/\s+/g,'-')+'.xlsx';
a.click();URL.revokeObjectURL(url);
showToast('Đã xuất file Excel!');
}

// ===== PDF EXPORT (html2canvas for Vietnamese) =====
async function exportPDF(){
let qd=getQuoteData();
// Build a hidden HTML table for rendering
let div=document.createElement('div');
div.id='pdfRender';
div.style.cssText='position:fixed;top:-9999px;left:0;width:1100px;background:#fff;padding:40px;font-family:Inter,Arial,sans-serif';
let itemsHtml=qd.items.map(it=>`<tr style="border-bottom:1px solid #e2e8f0">
<td style="padding:10px 6px;text-align:center;font-size:13px">${it.stt}</td>
<td style="padding:10px 6px"><img src="${it.image}" style="width:45px;height:45px;object-fit:contain;border-radius:4px" crossorigin="anonymous" onerror="this.style.display='none'"></td>
<td style="padding:10px 6px;font-size:12px;font-weight:600">${it.name}</td>
<td style="padding:10px 6px;text-align:center;font-size:12px">${it.model}</td>
<td style="padding:10px 6px;font-size:11px;color:#64748b;max-width:180px">${it.specs}</td>
<td style="padding:10px 6px;text-align:center;font-size:13px">${it.qty}</td>
<td style="padding:10px 6px;text-align:right;font-size:12px">${fmtVND(it.price)}</td>
<td style="padding:10px 6px;text-align:right;font-size:12px;${it.discPrice<it.price?'color:#dc3545;font-weight:700':''}">${fmtVND(it.discPrice)}</td>
<td style="padding:10px 6px;text-align:right;font-size:13px;font-weight:700">${fmtVND(it.total)}</td>
<td style="padding:10px 6px;font-size:11px">${it.note}</td>
</tr>`).join('');

div.innerHTML=`
<div style="text-align:center;margin-bottom:20px">
<img src="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_200.png" alt="V.AI STUDIO" style="height:40px;object-fit:contain">
<div style="font-size:11px;color:#64748b;letter-spacing:3px">SMART KITCHEN &bull; SMART LIFE</div>
<div style="font-size:20px;font-weight:800;color:#db9815;margin-top:10px">BÁO GIÁ SẢN PHẨM</div>
</div>
<div style="display:flex;justify-content:space-between;margin-bottom:20px;font-size:12px;color:#0f172a">
<div><strong>Khách hàng:</strong> ${qd.customer.name}<br><strong>SĐT:</strong> ${qd.customer.phone}<br><strong>Email:</strong> ${qd.customer.email}<br><strong>Địa chỉ:</strong> ${qd.customer.addr}</div>
<div style="text-align:right"><strong>Công ty:</strong> ${qd.customer.company}<br><strong>Ngày:</strong> ${qd.customer.date}<br><strong>Zalo:</strong> <a href="https://zalo.me/0981873395" target="_blank">0981 873 395</a></div>
</div>
<table style="width:100%;border-collapse:collapse">
<thead><tr style="background:#003f62;color:#fff">
<th style="padding:10px 6px;font-size:11px">STT</th><th style="padding:10px 6px;font-size:11px">Hình ảnh</th><th style="padding:10px 6px;font-size:11px;text-align:left">Tên sản phẩm</th><th style="padding:10px 6px;font-size:11px">Mã SP</th><th style="padding:10px 6px;font-size:11px">Thông tin SP</th><th style="padding:10px 6px;font-size:11px">SL</th><th style="padding:10px 6px;font-size:11px">Đơn giá</th><th style="padding:10px 6px;font-size:11px">Đơn giá CK</th><th style="padding:10px 6px;font-size:11px">Thành tiền</th><th style="padding:10px 6px;font-size:11px">Ghi chú</th>
</tr></thead>
<tbody>${itemsHtml}</tbody>
<tfoot><tr style="border-top:3px solid #003f62">
<td colspan="8" style="padding:12px 6px;text-align:right;font-size:14px;font-weight:800;color:#003f62">TỔNG CỘNG:</td>
<td style="padding:12px 6px;text-align:right;font-size:15px;font-weight:900;color:#003f62">${fmtVND(qd.grandTotal)}</td><td></td>
</tr></tfoot>
</table>
<div style="margin-top:20px;font-size:11px;color:#64748b;font-style:italic">
Báo giá có hiệu lực 30 ngày kể từ ngày lập. | Miễn phí vận chuyển & lắp đặt | Bảo hành chính hãng.
</div>`;

document.body.appendChild(div);
// Wait for images and fonts
await new Promise(r=>setTimeout(r,500));

try{
let canvas=await html2canvas(div,{scale:2,useCORS:true,allowTaint:true,logging:false});
let imgData=canvas.toDataURL('image/jpeg',0.95);
let {jsPDF}=window.jspdf;
let pdf=new jsPDF({orientation:'landscape',unit:'mm',format:'a4'});
let pdfW=pdf.internal.pageSize.getWidth();
let pdfH=pdf.internal.pageSize.getHeight();
let imgW=canvas.width;let imgH=canvas.height;
let ratio=pdfW/imgW*2;// scale:2 correction
let totalH=imgH*ratio/2;
let pageH=pdfH-10;let y=5;let srcY=0;
let sliceH=pageH/ratio*2;
// Multi-page support
while(srcY<imgH){
if(srcY>0)pdf.addPage();
let clipCanvas=document.createElement('canvas');
clipCanvas.width=imgW;clipCanvas.height=Math.min(sliceH,imgH-srcY);
clipCanvas.getContext('2d').drawImage(canvas,0,srcY,imgW,clipCanvas.height,0,0,imgW,clipCanvas.height);
let sliceData=clipCanvas.toDataURL('image/jpeg',0.95);
let sliceRatio=pdfW/imgW;
pdf.addImage(sliceData,'JPEG',0,y,pdfW,clipCanvas.height*sliceRatio);
srcY+=sliceH;
}
pdf.save('Bao-gia-Malloca-'+(qd.customer.name||'KH').replace(/\s+/g,'-')+'.pdf');
showToast('Đã xuất file PDF!');
}catch(e){console.error('PDF error:',e);showToast('Lỗi xuất PDF. Vui lòng thử lại.')}
div.remove();
}

function printQuotation(){
exportPDF();// Reuse PDF then user can print from PDF viewer
}

// Init on load
function init(){buildCats();buildPrices();buildBrands();render();
// Try path-based routing first, then hash-based
if(!parseCurrentPath()){parseUrlParams();render();}
}

document.addEventListener('DOMContentLoaded',()=>{
initCatalogue();
updateCartBadge();
// Auto-open chat if ?chat=1
if(location.search.includes('chat=1')){setTimeout(()=>toggleChat(),500)}
});

</script>

<!-- ZALO + AI CHATBOX FAB -->
<a href="https://zalo.me/0981873395" target="_blank" title="Chat Zalo" style="position:fixed;bottom:90px;right:24px;z-index:180;width:50px;height:50px;border-radius:50%;background:#0068FF;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 4px 16px rgba(0,104,255,.4);text-decoration:none;transition:all .25s ease"><i class="fas fa-comment-dots"></i></a>
<button class="chat-fab" onclick="toggleChat()" title="Tư Vấn AI"><i class="fas fa-robot"></i></button>
<div class="chat-fab-label">Tư Vấn AI</div>
<div class="chat-overlay2" id="chatOverlay2" onclick="closeChat()"></div>
<div class="chatbox" id="chatbox">
<div class="chat-head">
<div class="chat-head-avatar"><i class="fas fa-robot"></i></div>
<div class="chat-head-info"><h4>Tư Vấn AI</h4><span>Trợ lý thiết bị nhà bếp thông minh</span></div>
<button class="chat-close" onclick="closeChat()" title="Đóng"><i class="fas fa-times"></i></button>
</div>
<div class="chat-body" id="chatBody">
<div class="chat-msg bot">Xin chào anh/chị! 👋 Em là <strong>Malloca AI</strong> — trợ lý tư vấn thiết bị nhà bếp.<br><br>Em có thể giúp anh/chị:<br>🔍 Tìm & so sánh sản phẩm phù hợp<br>💡 Tư vấn theo nhu cầu & ngân sách<br>📋 Giải đáp thông số kỹ thuật<br><br>Anh/chị cần tư vấn gì ạ?</div>
</div>
<div class="chat-suggestions" id="chatSuggestions">
<div class="chat-sug" onclick="sendSuggestion(this)">Tư vấn bếp từ cho gia đình</div>
<div class="chat-sug" onclick="sendSuggestion(this)">Máy hút mùi nào tốt?</div>
<div class="chat-sug" onclick="sendSuggestion(this)">Khóa cửa thông minh</div>
<div class="chat-sug" onclick="sendSuggestion(this)">📋 Lên báo giá</div>
<div class="chat-sug" onclick="sendSuggestion(this)">🛒 Giỏ hàng</div>
</div>
<div class="chat-foot">
<textarea class="chat-input" id="chatInput" placeholder="Nhập câu hỏi..." rows="1" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChat()}"></textarea>
<button class="chat-send" id="chatSend" onclick="sendChat()"><i class="fas fa-paper-plane"></i></button>
</div>
</div>

<!-- SHARE POPOVER -->
<div class="share-popover-overlay" id="shareOverlay" onclick="if(event.target===this)closeSharePopover()">
<div class="share-popover" style="position:relative">
<button class="share-close-btn" onclick="closeSharePopover()"><i class="fas fa-times"></i></button>
<h4><i class="fas fa-share-alt"></i> Chia sẻ</h4>
<div class="share-apps">
<div class="share-app" onclick="shareVia('facebook')"><div class="share-app-icon" style="background:#1877F2"><i class="fab fa-facebook-f"></i></div><span>Facebook</span></div>
<div class="share-app" onclick="shareVia('messenger')"><div class="share-app-icon" style="background:#0099FF"><i class="fab fa-facebook-messenger"></i></div><span>Messenger</span></div>
<div class="share-app" onclick="shareVia('zalo')"><div class="share-app-icon" style="background:#0068FF"><i class="fas fa-comment-dots"></i></div><span>Zalo</span></div>
<div class="share-app" onclick="shareVia('twitter')"><div class="share-app-icon" style="background:#000"><i class="fab fa-x-twitter"></i></div><span>X</span></div>
<div class="share-app" onclick="shareVia('telegram')"><div class="share-app-icon" style="background:#2AABEE"><i class="fab fa-telegram-plane"></i></div><span>Telegram</span></div>
<div class="share-app" onclick="shareVia('whatsapp')"><div class="share-app-icon" style="background:#25D366"><i class="fab fa-whatsapp"></i></div><span>WhatsApp</span></div>
<div class="share-app" onclick="shareVia('email')"><div class="share-app-icon" style="background:var(--g)"><i class="fas fa-envelope"></i></div><span>Email</span></div>
<div class="share-app" onclick="shareVia('copy')"><div class="share-app-icon" style="background:var(--p)"><i class="fas fa-link"></i></div><span>Copy link</span></div>
</div>
<div class="share-link-box">
<input class="share-link-input" id="shareLinkInput" readonly>
<button class="share-link-copy" onclick="shareVia('copy')"><i class="fas fa-copy"></i> Sao chép</button>
</div>
</div>
</div>
<script src="search-plus-boot.js"></script>
</body>
</html>