:root{--bg:#0b0f17;--card:#141a26;--card2:#1b2332;--line:#263149;--tx:#e8edf6;--mut:#8b97ad;--acc:#ee4d2d;--acc2:#ff7a45;--gold:#ffc53d;--ok:#3ddc97}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.top{position:sticky;top:0;z-index:20;background:rgba(11,15,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;gap:16px;align-items:center;padding:12px 16px}
.brand{font-weight:800;font-size:1.2rem;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.brand small{color:var(--mut);font-weight:400;font-size:.75rem;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.search{flex:1;background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:10px;padding:10px 14px;font-size:.95rem}
.search:focus{outline:2px solid var(--acc)}
.hero{margin:22px 0 14px;padding:26px;border-radius:16px;background:linear-gradient(135deg,#1c2540,#3a1a14);border:1px solid var(--line)}
.hero h1{margin:0 0 6px;font-size:1.7rem}
.hero p{margin:0;color:var(--mut)}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.chip{background:var(--card);border:1px solid var(--line);color:var(--tx);padding:7px 14px;border-radius:999px;cursor:pointer;font-size:.88rem}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.sel{margin-left:auto;background:var(--card);border:1px solid var(--line);color:var(--tx);padding:8px 12px;border-radius:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-3px);border-color:var(--acc)}
.thumb{position:relative;aspect-ratio:1;background:#0d121c}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}
.tag{position:absolute;top:10px;left:10px;background:var(--acc);color:#fff;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:6px}
.stk{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.65);font-size:.72rem;padding:3px 8px;border-radius:6px}
.cb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cb h3{margin:0;font-size:.95rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
.price{color:var(--acc2);font-weight:800;font-size:1.25rem}
.meta{display:flex;justify-content:space-between;color:var(--mut);font-size:.8rem}
.star{color:var(--gold)}
.btn{display:inline-block;text-align:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:800;border:0;border-radius:10px;padding:11px 16px;cursor:pointer;font-size:.95rem}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--card2);border:1px solid var(--line);font-weight:600}
.card .btn{margin-top:auto}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.empty{padding:60px;text-align:center;color:var(--mut)}
/* chi tiết */
.back{display:inline-block;margin:18px 0;color:var(--mut)}
.det{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;margin-bottom:30px}
.main-img{background:#0d121c;border:1px solid var(--line);border-radius:14px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.main-img img,.main-img video{width:100%;height:100%;object-fit:contain}
.ths{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.ths img,.ths .vth{width:70px;height:70px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;background:#0d121c;flex:none}
.ths .vth{display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.ths .on{border-color:var(--acc)}
.info h1{font-size:1.45rem;line-height:1.3;margin:0 0 10px}
.big{font-size:2rem;font-weight:800;color:var(--acc2);margin:10px 0}
.pill{display:inline-block;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-size:.82rem;margin:0 6px 6px 0;color:var(--mut)}
.pill b{color:var(--tx)}
.buy{display:flex;gap:10px;margin:18px 0}
.buy .btn{flex:1;padding:15px;font-size:1.05rem}
.note{color:var(--mut);font-size:.82rem}
.sec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}
.sec h2{margin:0 0 14px;font-size:1.15rem}
table.sp{width:100%;border-collapse:collapse}
table.sp td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.sp td:first-child{width:32%;color:var(--mut)}
.rv{padding:14px 0;border-bottom:1px solid var(--line)}
.rv:last-child{border:0}
.rv .u{font-weight:600}
.rv .d{color:var(--mut);font-size:.8rem}
.rv p{margin:6px 0}
.reply{background:var(--card2);border-left:3px solid var(--acc);padding:8px 12px;border-radius:6px;font-size:.88rem;margin-top:6px}
.sum{display:flex;gap:16px;align-items:center;margin-bottom:10px}
.sum .n{font-size:2.2rem;font-weight:800;color:var(--gold)}
.foot{border-top:1px solid var(--line);padding:22px 0;color:var(--mut);font-size:.85rem;text-align:center}
.sticky{display:none}
@media(max-width:800px){
 .det{grid-template-columns:1fr}
 .brand small{display:none}
 .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:10px 14px;gap:12px;align-items:center;z-index:30}
 .sticky .price{flex:none}.sticky .btn{flex:1}
 body.pd{padding-bottom:70px}
}
.rmedia{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.rmedia img,.rmedia video{width:110px;height:110px;object-fit:cover;border-radius:8px;background:#000}.rmedia video{width:160px}
/* chat popup */
#chatBtn{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:0;border-radius:999px;padding:12px 18px;font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45)}
#chatBtn span{font-size:.9rem}
#chatBtn[hidden],#chatPanel[hidden]{display:none}
#chatPanel{position:fixed;right:18px;bottom:18px;z-index:61;width:350px;max-width:calc(100vw - 24px);height:480px;max-height:calc(100vh - 36px);background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.6);overflow:hidden}
.ch-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.ch-head small{display:block;font-size:.72rem;opacity:.9}
.ch-head button{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer}
#chatMsgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.cm{max-width:86%;padding:8px 12px;border-radius:12px;font-size:.9rem;line-height:1.45;word-break:break-word}
.cm.bot{background:var(--card2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
.cm.user{background:var(--acc);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.cm.typing{opacity:.6;font-style:italic}
.cm a{color:#7fb2ff}.cm.user a{color:#fff}
#chatChips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
#chatChips button{background:var(--card2);border:1px solid var(--line);color:var(--tx);border-radius:999px;padding:5px 11px;font-size:.78rem;cursor:pointer}
#chatForm{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
#chatForm input{flex:1;background:#0d121c;border:1px solid var(--line);color:var(--tx);border-radius:8px;padding:9px 10px;font:inherit;font-size:.9rem}
#chatForm button{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:0 14px;font-weight:700;cursor:pointer}
@media(max-width:800px){#chatBtn{bottom:78px}#chatPanel{right:8px;bottom:8px;height:70vh}}
/* nut Facebook / Zalo noi */
#floatc{position:fixed;right:18px;bottom:18px;z-index:59;display:flex;flex-direction:column;gap:10px;align-items:center}
#floatc.has-chat{bottom:78px}
body.chat-open #floatc{display:none}
#floatc .fl{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;box-shadow:0 5px 16px rgba(0,0,0,.45);transition:transform .15s}
#floatc .fl:hover{transform:scale(1.1)}
#floatc .fb{background:#1877f2}
#floatc .zl{background:#0068ff;font-size:.72rem;letter-spacing:-.2px}
@media(max-width:800px){#floatc{bottom:78px}#floatc.has-chat{bottom:138px}}
.brand .logo{width:36px;height:36px;border-radius:9px;align-self:center}
.pnote{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:10px;background:rgba(255,197,61,.1);border:1px dashed rgba(255,197,61,.55);color:#ffd666;font-size:.88rem;font-weight:600;line-height:1.4}.hero .pnote{margin-top:14px}
.btn.shp{display:inline-flex;align-items:center;justify-content:center;gap:7px}.shp-ic{width:20px;height:20px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}.buy .btn.shp{gap:10px}.buy .shp-ic{width:26px;height:26px}
.card .btn.shp{white-space:nowrap;padding:11px 8px;gap:6px;font-size:.92rem}.card .btn.shp .shp-ic{width:19px;height:19px}.card .btn.ghost{white-space:nowrap}
.shp-ic{filter:none!important;border-radius:7px}.card .btn.shp .shp-ic{width:23px;height:23px}.buy .shp-ic{width:30px;height:30px}.sticky .shp-ic{width:26px;height:26px}