/* ============================================================
   TechViet Computer — Full Premium CSS
   GearVN Layout + TechViet Branding
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Brand */
  --red: #e30019;
  --red-hover: #c7001a;
  --red-light: #fff0f0;
  --blue: #1a73e8;
  --cyan: #00b8d4;
  --purple: #7c3aed;
  --green: #16a34a;
  --orange: #f97316;
  --gold: #f59e0b;

  /* Neutral */
  --bg: #f3f4f6;
  --bg-white: #ffffff;
  --bg-dark: #1a1a2e;
  --bg-darker: #111;
  --text: #1f2937;
  --text-2: #6b7280;
  --text-3: #9ca3af;
  --border: #e5e7eb;
  --border-hover: #d1d5db;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.15);
  --font: 'Inter',system-ui,-apple-system,sans-serif;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:var(--text)}
ul{list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.container{max-width:1220px;margin:0 auto;padding:0 16px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:10px 22px;font-weight:600;font-size:.88rem;border-radius:var(--radius);transition:all .2s;white-space:nowrap}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(227,0,25,.25)}
.btn-primary:hover{background:var(--red-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(227,0,25,.35)}
.btn-cyan{background:var(--cyan);color:#fff}
.btn-purple{background:var(--purple);color:#fff}
.btn-outline-dark{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-outline-dark:hover{border-color:var(--red);color:var(--red)}
.btn-ghost{color:var(--text-2);padding:8px}
.btn-ghost:hover{color:var(--text)}
.btn-lg{padding:13px 28px;font-size:.95rem}
.btn-full{width:100%}

/* ===== TOP BAR ===== */
.topbar{background:var(--bg-darker);color:#d1d5db;font-size:.78rem;padding:7px 0}
.topbar-inner{display:flex;justify-content:space-between;align-items:center}
.tb-left,.tb-right{display:flex;align-items:center;gap:4px}
.tb-sep{margin:0 6px;color:#555}
.tb-link{color:#d1d5db;transition:color .15s}.tb-link:hover{color:var(--red)}
.tb-item b{color:#fff}

/* ===== HEADER ===== */
.header{background:var(--red);color:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(227,0,25,.35)}
.header-inner{display:flex;align-items:center;gap:20px;padding:12px 16px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-box{width:42px;height:42px;background:#fff;color:var(--red);font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.logo-box-w{background:var(--red);color:#fff}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.lt-main{font-weight:900;font-size:20px;letter-spacing:.5px}
.lt-sub{font-size:9px;letter-spacing:2.5px;opacity:.75;font-weight:400}

/* Search */
.search-wrap{flex:1;max-width:520px;position:relative}
.search-bar{display:flex;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.search-bar input{flex:1;padding:11px 16px;border:none;outline:none;font-size:.88rem;color:var(--text)}
.search-bar input::placeholder{color:var(--text-3)}
.s-btn{padding:0 16px;color:var(--text-2);background:#f9fafb;border-left:1px solid var(--border);transition:all .15s}
.s-btn:hover{background:var(--red);color:#fff}
.search-dd{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:none;z-index:50;max-height:300px;overflow-y:auto}
.search-dd.show{display:block}
.sd-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .12s;border-bottom:1px solid #f5f5f5}
.sd-item:hover{background:var(--red-light)}
.sd-item img{width:44px;height:44px;object-fit:contain;border-radius:6px;background:#f9fafb}
.sd-name{font-size:.85rem;font-weight:600}.sd-price{font-size:.82rem;color:var(--red);font-weight:700}

/* Header Actions */
.hdr-actions{display:flex;gap:16px;flex-shrink:0}
.hdr-act{display:flex;align-items:center;gap:8px;padding:6px;border-radius:var(--radius);transition:background .15s}
.hdr-act:hover{background:rgba(255,255,255,.15)}
.ha-icon{font-size:24px;position:relative;line-height:1}
.ha-text{font-size:12px;line-height:1.3;text-align:left;display:none}
.ha-badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;background:#ffb400;color:#000;font-size:10px;font-weight:800;border-radius:9px;display:flex;align-items:center;justify-content:center}
.ha-ping{position:absolute;top:-2px;right:-2px;width:9px;height:9px;background:#00e5ff;border-radius:50%;border:2px solid var(--red);animation:ha-ping 2s infinite}
@keyframes ha-ping{0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.6)}50%{box-shadow:0 0 0 6px rgba(0,229,255,0)}}

/* Sub Navigation */
.subnav{background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.subnav-inner{display:flex;align-items:center;gap:0}
.sn-cat-btn{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--bg-darker);color:#fff;font-weight:700;font-size:.85rem;white-space:nowrap;border-radius:0}
.sn-links{display:flex;gap:0}
.sn-links a{padding:12px 16px;font-size:.85rem;font-weight:500;color:var(--text);transition:all .15s;white-space:nowrap;border-bottom:2px solid transparent}
.sn-links a:hover{color:var(--red);background:var(--red-light);border-bottom-color:var(--red)}

/* ===== HERO SECTION ===== */
.hero-section{padding:16px 0}
.hero-grid{display:grid;grid-template-columns:230px 1fr 230px;gap:12px}

/* Category Menu */
.cat-menu{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.cat-menu ul{display:flex;flex-direction:column}
.cat-menu li{border-bottom:1px solid #f5f5f5}
.cat-menu li:last-child{border-bottom:none}
.cat-menu a{display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:.85rem;font-weight:500;color:var(--text);transition:all .15s}
.cat-menu a:hover{color:var(--red);background:var(--red-light);padding-left:18px}
.cm-ic{font-size:15px;width:22px;text-align:center}
.cm-arrow{margin-left:auto;font-size:11px;color:var(--text-3)}
.cm-promo{background:linear-gradient(90deg,#fff8e1,#fff3e0)}
.cm-promo a{color:#e65100;font-weight:700}

/* Hero Slider */
.hero-slider{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.slider-slides{position:relative;height:100%;min-height:340px}
.s-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:40px 50px;opacity:0;transition:opacity .5s ease;pointer-events:none}
.s-slide.active{opacity:1;pointer-events:auto}
.s-content{max-width:55%;position:relative;z-index:2}
.s-badge{display:inline-block;padding:5px 14px;background:rgba(227,0,25,.9);color:#fff;font-size:.75rem;font-weight:700;border-radius:100px;margin-bottom:16px;letter-spacing:.04em}
.s-badge-cyan{background:rgba(0,184,212,.9)}.s-badge-purple{background:rgba(124,58,237,.9)}
.s-content h2{font-size:clamp(1.4rem,2.5vw,2.2rem);font-weight:900;color:#fff;line-height:1.15;margin-bottom:12px}
.s-highlight{color:#ff6b6b}.s-highlight-cyan{color:#00e5ff}.s-highlight-purple{color:#c084fc}
.s-content p{font-size:.9rem;color:rgba(255,255,255,.75);margin-bottom:20px}
.s-img{position:absolute;right:30px;bottom:10px;max-height:85%;max-width:45%;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));z-index:1}

.sl-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:rgba(0,0,0,.45);color:#fff;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;z-index:5;backdrop-filter:blur(4px);transition:all .2s}
.sl-arrow:hover{background:var(--red)}
.sl-prev{left:10px}.sl-next{right:10px}
.sl-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.sl-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:all .2s}
.sl-dot.active{background:#fff;width:22px;border-radius:4px}

/* Hero Promos */
.hero-promos{display:flex;flex-direction:column;gap:10px}
.hp-card{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--radius);padding:16px 14px;box-shadow:var(--shadow);border:1px solid var(--border);transition:all .2s;flex:1}
.hp-card:hover{border-color:var(--red);box-shadow:var(--shadow-md);transform:translateX(-2px)}
.hp-icon{font-size:28px;flex-shrink:0}
.hp-info h4{font-size:.78rem;font-weight:800;letter-spacing:.04em;color:var(--text);margin-bottom:2px}
.hp-info p{font-size:.75rem;color:var(--text-2)}
.hp-wmb{border-left:3px solid var(--red)}
.hp-club{border-left:3px solid var(--purple)}
.hp-gift{border-left:3px solid var(--gold)}

/* ===== TRUST BAR ===== */
.trust-bar{background:#fff;padding:18px 0;margin:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-inner{display:flex;justify-content:space-between;gap:10px}
.trust-item{display:flex;align-items:center;gap:10px}
.ti-ic{font-size:24px}
.trust-item div{line-height:1.3}
.trust-item b{font-size:.82rem;display:block;color:var(--text)}
.trust-item span{font-size:.72rem;color:var(--text-2)}

/* ===== SECTION HEADERS ===== */
.sec-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border-radius:var(--radius) var(--radius) 0 0;border-bottom:3px solid var(--red)}
.sec-header h2{font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.sh-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sh-more{font-size:.85rem;color:var(--red);font-weight:600;transition:transform .15s}
.sh-more:hover{transform:translateX(3px)}

.sh-red{border-bottom-color:var(--red)}.sh-red h2{color:var(--red)}
.sh-blue{border-bottom-color:var(--blue)}.sh-blue h2{color:var(--blue)}
.sh-green{border-bottom-color:var(--green)}.sh-green h2{color:var(--green)}
.sh-purple{border-bottom-color:var(--purple)}.sh-purple h2{color:var(--purple)}
.sh-orange{border-bottom-color:var(--orange)}.sh-orange h2{color:var(--orange)}

.sh-icon{font-size:1.3rem;animation:flash-pulse 1.5s infinite}
@keyframes flash-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.sh-countdown{display:flex;align-items:center;gap:4px;font-size:.82rem;font-weight:600}
.sh-cd-label{color:var(--text-2);margin-right:4px;font-weight:400}
.cd-box{background:var(--bg-darker);color:#fff;padding:3px 7px;border-radius:4px;font-size:.82rem;font-weight:800;min-width:28px;text-align:center}
.cd-sep{font-weight:800;color:var(--text-2)}

.sh-tabs{display:flex;gap:4px}
.shtab{padding:6px 14px;font-size:.82rem;font-weight:500;color:var(--text-2);border-radius:100px;border:1px solid var(--border);transition:all .15s}
.shtab:hover{border-color:var(--blue);color:var(--blue)}
.shtab.active{background:var(--blue);color:#fff;border-color:var(--blue)}

.sec-title-center{text-align:center;margin-bottom:36px}
.stc-tag{display:inline-block;padding:5px 14px;background:var(--red-light);border:1px solid rgba(227,0,25,.2);color:var(--red);font-size:.72rem;font-weight:700;border-radius:100px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.sec-title-center h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;margin-bottom:10px}
.sec-title-center p{color:var(--text-2);max-width:500px;margin:0 auto}
.tc-red{color:var(--red)}.tc-purple{color:var(--purple)}

/* ===== PRODUCT SECTIONS ===== */
.product-section{margin-bottom:24px}
.p-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:#fff;padding:16px;border-radius:0 0 var(--radius) var(--radius)}

/* ===== PRODUCT CARDS ===== */
.pc{background:#fff;border:1px solid #f0f0f0;border-radius:var(--radius);padding:14px;transition:all .25s;position:relative;display:flex;flex-direction:column;cursor:pointer}
.pc:hover{border-color:var(--red);box-shadow:var(--shadow-hover);transform:translateY(-4px);z-index:2}
.pc-badge{position:absolute;top:8px;left:-1px;padding:3px 10px;font-size:.68rem;font-weight:700;color:#fff;border-radius:0 4px 4px 0;z-index:2}
.badge-hot{background:var(--red)}.badge-new{background:var(--blue)}.badge-sale{background:var(--orange)}.badge-best{background:var(--purple)}.badge-vip{background:#111}
.pc-img-wrap{position:relative;margin-bottom:12px;padding:10px;background:#fafafa;border-radius:6px;overflow:hidden}
.pc-img{width:100%;height:140px;object-fit:contain;transition:transform .4s}
.pc:hover .pc-img{transform:scale(1.06)}
.pc-quick{position:absolute;bottom:6px;right:6px;padding:5px 10px;background:rgba(0,0,0,.75);color:#fff;font-size:.7rem;font-weight:600;border-radius:4px;opacity:0;transform:translateY(4px);transition:all .2s}
.pc:hover .pc-quick{opacity:1;transform:translateY(0)}
.pc-cat{font-size:.68rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.pc-name{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:40px;line-height:1.25;transition:color .15s}
.pc:hover .pc-name{color:var(--red)}
.pc-rating{display:flex;align-items:center;gap:4px;font-size:.72rem;margin-bottom:8px}
.pc-stars{color:var(--gold);letter-spacing:1px;font-size:.78rem}
.pc-rvw{color:var(--text-3)}
.pc-sold{color:var(--text-3);margin-left:auto;font-size:.68rem}
.pc-prices{margin-bottom:6px}
.pc-price{font-size:1.05rem;font-weight:800;color:var(--red);display:block}
.pc-old{font-size:.78rem;color:var(--text-3);text-decoration:line-through;margin-right:6px}
.pc-disc{font-size:.68rem;font-weight:700;color:var(--red);background:var(--red-light);padding:1px 6px;border-radius:3px}
.pc-installment{font-size:.72rem;color:var(--text-2);margin-bottom:12px}
.pc-actions{display:flex;gap:6px;margin-top:auto}
.btn-cart{flex:1;padding:8px;background:var(--red);color:#fff;font-weight:700;font-size:.78rem;border-radius:6px;transition:all .15s;box-shadow:0 2px 6px rgba(227,0,25,.2)}
.btn-cart:hover{background:var(--red-hover);box-shadow:0 4px 12px rgba(227,0,25,.35)}
.btn-fav{width:34px;height:34px;background:#f5f5f5;border:1px solid var(--border);border-radius:6px;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.btn-fav:hover{border-color:var(--red);color:var(--red);background:var(--red-light)}
.btn-fav.liked{color:var(--red);border-color:var(--red);background:var(--red-light)}

/* ===== WMB SECTION ===== */
.wmb-section{padding:48px 0;background:#fff;margin-bottom:24px}
.wmb-banner{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;padding:40px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:var(--radius-lg);color:#fff;position:relative;overflow:hidden}
.wmb-banner::before{content:'';position:absolute;right:0;top:0;width:50%;height:100%;background:radial-gradient(circle at 80% 50%,rgba(124,58,237,.1),transparent 60%);pointer-events:none}
.wmb-tag{display:inline-block;padding:5px 14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:100px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;color:rgba(255,255,255,.7)}
.wmb-left h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;margin-bottom:14px}
.wmb-left p{color:rgba(255,255,255,.7);margin-bottom:20px;line-height:1.7}
.wmb-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.ws{display:flex;align-items:flex-start;gap:12px;color:rgba(255,255,255,.8);font-size:.88rem;line-height:1.5}
.ws-n{min-width:28px;height:28px;background:rgba(0,229,255,.15);border:1px solid rgba(0,229,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;color:#00e5ff;flex-shrink:0}
.wmb-calc{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:16px;margin-bottom:24px}
.wc-title{font-size:.75rem;font-weight:700;color:#00e5ff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.wc-row{display:flex;justify-content:space-between;padding:5px 0;font-size:.85rem;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.06)}
.wc-row:last-child{border-bottom:none}
.wc-cyan span:last-child{color:#00e5ff;font-weight:600}
.wc-highlight{color:#fff !important;font-weight:700}
.wc-highlight span{color:#fff}

.wmb-right{display:flex;justify-content:center;align-items:center}
.wmb-visual{position:relative;width:240px;height:240px}
.wmb-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;background:radial-gradient(circle,rgba(0,229,255,.2),rgba(0,100,255,.1));border:2px solid rgba(0,229,255,.4);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(0,229,255,.2);z-index:3}
.wc-icon{font-size:1.4rem}.wc-pct{font-size:.85rem;font-weight:900;color:#00e5ff}.wc-lbl{font-size:.5rem;color:rgba(255,255,255,.5)}
.wmb-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px dashed rgba(0,229,255,.15);transform:translate(-50%,-50%)}
.r1{width:150px;height:150px;animation:spin 8s linear infinite}
.r2{width:200px;height:200px;animation:spin 13s linear infinite reverse;border-color:rgba(124,58,237,.15)}
.r3{width:240px;height:240px;animation:spin 20s linear infinite;border-style:dotted;border-color:rgba(245,158,11,.1)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ===== CLUB ===== */
.club-section{padding:48px 0;background:#fff;margin-bottom:24px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 22px;display:flex;flex-direction:column;position:relative;transition:all .25s}
.plan:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.plan-featured{border-color:var(--red);box-shadow:0 0 0 1px var(--red),var(--shadow-md)}
.plan-featured::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--purple));border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.plan-ribbon{position:absolute;top:12px;right:12px;padding:4px 10px;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;border-radius:100px}
.plan-hdr{margin-bottom:20px}
.plan-name{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:8px}
.plan-price{font-size:1.8rem;font-weight:900;color:var(--text)}
.plan-price small{font-size:.82rem;font-weight:500;color:var(--text-2)}
.plan-save{font-size:.78rem;color:var(--red);margin-top:4px;font-weight:600}
.plan-list{flex:1;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.plan-list li{font-size:.85rem;color:var(--text-2);line-height:1.4}

/* ===== TESTIMONIALS ===== */
.testi-section{padding:48px 0;background:var(--bg);margin-bottom:24px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tc{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:all .2s}
.tc:hover{border-color:var(--red);box-shadow:var(--shadow-md)}
.tc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tc-avatar{width:42px;height:42px;background:linear-gradient(135deg,var(--red),var(--purple));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem}
.tc-name{font-weight:700;font-size:.9rem}.tc-role{font-size:.72rem;color:var(--text-3)}
.tc-stars{color:var(--gold);font-size:.85rem;letter-spacing:1px;margin-bottom:10px}
.tc-text{font-size:.85rem;color:var(--text-2);line-height:1.7;font-style:italic}

/* ===== SIMULATOR ===== */
.sim-section{padding:48px 0;background:#fff;margin-bottom:24px}
.sim-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:24px}
.sim-panel{background:#fafafa;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:22px}
.sim-group label{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:8px}
.sg-val{color:var(--red);font-weight:700}
.sim-slider{-webkit-appearance:none;width:100%;height:6px;background:#e5e7eb;border-radius:3px;outline:none;cursor:pointer}
.sim-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--red);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(227,0,25,.4)}
.sg-range{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-3);margin-top:4px}
.sim-results{display:flex;flex-direction:column;gap:16px}
.sim-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sk{background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:border-color .2s}
.sk:hover{border-color:var(--red)}
.sk-big{grid-column:1/-1;background:var(--red-light);border-color:rgba(227,0,25,.2)}
.sk-lbl{font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.sk-val{font-size:1.3rem;font-weight:800;color:var(--red)}.sk-big .sk-val{font-size:1.6rem}
.sk-note{font-size:.72rem;color:var(--text-2);margin-top:2px}
.sim-chart{background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.sch-title{font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:14px}
.sch-bars{display:flex;align-items:flex-end;gap:12px;height:140px}
.sb-w{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.sb{width:100%;background:linear-gradient(to top,var(--red),rgba(227,0,25,.4));border-radius:4px 4px 0 0;transition:height .5s;min-height:4px}
.sb-lbl{font-size:.72rem;color:var(--text-2);font-weight:600}
.sb-val{font-size:.68rem;color:var(--red);font-weight:700}

/* ===== NEWSLETTER ===== */
.nl-section{padding:32px 0;margin-bottom:24px}
.nl-box{background:var(--red);border-radius:var(--radius-lg);padding:36px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#fff}
.nl-text h3{font-size:1.2rem;font-weight:800;margin-bottom:6px}
.nl-text p{font-size:.88rem;opacity:.85}
.nl-form{display:flex;gap:8px;flex:1;max-width:400px}
.nl-form input{flex:1;padding:11px 16px;border:none;border-radius:var(--radius);font-size:.88rem;outline:none}
.nl-form .btn-primary{background:#fff;color:var(--red);font-weight:700}
.nl-form .btn-primary:hover{background:#f0f0f0}

/* ===== CONTACT ===== */
.contact-section{padding:48px 0;background:#fff;margin-bottom:24px}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:36px}
.cg-info{display:flex;flex-direction:column;gap:14px}
.ci-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s}
.ci-card:hover{border-color:var(--red)}
.ci-ic{font-size:1.3rem;margin-top:2px}
.ci-card div{font-size:.85rem;color:var(--text-2);line-height:1.5}
.ci-card b{color:var(--text)}
.cg-form{background:#fafafa;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:14px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cg-form input,.cg-form select,.cg-form textarea{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);outline:none;font-size:.88rem;transition:border-color .15s;background:#fff}
.cg-form input::placeholder,.cg-form textarea::placeholder{color:var(--text-3)}
.cg-form input:focus,.cg-form select:focus,.cg-form textarea:focus{border-color:var(--red)}

/* ===== FOOTER ===== */
.footer{background:var(--bg-darker);color:#9ca3af;padding:48px 0 0}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px}
.ft-brand p{font-size:.82rem;line-height:1.7;margin-top:16px;max-width:280px}
.ft-socials{display:flex;gap:8px;margin-top:14px}
.ft-socials a{width:34px;height:34px;background:#222;border:1px solid #333;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;transition:all .15s;color:#aaa}
.ft-socials a:hover{border-color:var(--red);color:var(--red);background:rgba(227,0,25,.1)}
.ft-col h4{color:#fff;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.ft-col a{display:block;font-size:.82rem;padding:3px 0;transition:color .12s}
.ft-col a:hover{color:var(--red)}
.footer-pay{border-top:1px solid #222;padding:16px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.78rem}
.fp-icons{display:flex;gap:8px;flex-wrap:wrap}
.fp-icons span{padding:4px 10px;background:#222;border:1px solid #333;border-radius:4px;font-size:.72rem;font-weight:600;color:#aaa}
.footer-bot{border-top:1px solid #222;padding:16px 0;text-align:center;font-size:.75rem}

/* ===== CART DRAWER ===== */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:300;width:420px;max-width:95vw;background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s;box-shadow:-4px 0 20px rgba(0,0,0,.1)}
.drawer.show{transform:translateX(0)}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
.dr-head h3{font-size:1rem;font-weight:700}
.dr-close{width:32px;height:32px;border:1px solid var(--border);border-radius:6px;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:all .15s}
.dr-close:hover{border-color:var(--red);color:var(--red)}
.dr-body{flex:1;overflow-y:auto;padding:14px}
.dr-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:60px 20px;color:var(--text-3)}
.dr-empty span{font-size:3rem;opacity:.3}
.dr-foot{padding:16px 18px;border-top:1px solid var(--border);background:#fafafa;display:flex;flex-direction:column;gap:10px}
.df-row{display:flex;justify-content:space-between;font-weight:700}
.df-total{font-size:1.2rem;color:var(--red)}
.df-save{display:flex;justify-content:space-between;font-size:.82rem;color:var(--green)}
.dr-item{display:flex;gap:12px;padding:12px;border:1px solid #f0f0f0;border-radius:var(--radius);margin-bottom:8px;align-items:center}
.dri-img{width:50px;height:50px;object-fit:contain;border-radius:6px;background:#fafafa;flex-shrink:0}
.dri-info{flex:1;min-width:0}
.dri-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dri-price{font-size:.85rem;font-weight:700;color:var(--red)}
.dri-qty{display:flex;align-items:center;gap:4px;margin-top:4px}
.dri-qty button{width:22px;height:22px;background:#f0f0f0;border:1px solid var(--border);border-radius:4px;font-size:.78rem;display:flex;align-items:center;justify-content:center;transition:all .1s}
.dri-qty button:hover{border-color:var(--red);color:var(--red)}
.dri-qty span{font-size:.82rem;font-weight:600;min-width:18px;text-align:center}
.dri-rm{width:26px;height:26px;border:1px solid var(--border);border-radius:6px;font-size:.75rem;color:var(--text-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}
.dri-rm:hover{border-color:var(--red);color:var(--red);background:var(--red-light)}

/* ===== MODALS ===== */
.modal{position:fixed;top:50%;left:50%;z-index:400;transform:translate(-50%,-50%) scale(.93);width:92%;max-width:500px;max-height:90vh;overflow-y:auto;background:#fff;border-radius:var(--radius-lg);padding:32px;opacity:0;pointer-events:none;transition:all .25s;box-shadow:var(--shadow-lg)}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-lg{max-width:780px}.modal-sm{max-width:400px;text-align:center}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:1px solid var(--border);border-radius:6px;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--text-3);transition:all .15s;z-index:2;background:#fff}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal h2{font-size:1.4rem;font-weight:900;margin-bottom:12px}
.modal p{color:var(--text-2);margin-bottom:14px;line-height:1.6}

/* Giveaway */
.gw-badge{display:inline-block;padding:5px 14px;background:#f3e5f5;border:1px solid rgba(124,58,237,.2);color:var(--purple);font-size:.72rem;font-weight:700;border-radius:100px;margin-bottom:12px;letter-spacing:.04em}
.gw-sub{font-size:.88rem;color:var(--text-2);margin-bottom:20px}
.gw-ways{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.gw-way{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--text-2);transition:border-color .15s}
.gw-way:hover{border-color:var(--red)}
.gw-best{background:var(--red-light);border-color:rgba(227,0,25,.2)}
.gw-t{min-width:65px;font-weight:700;color:var(--red);font-size:.78rem}
.gw-form{display:flex;flex-direction:column;gap:10px}
.gw-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gw-form input{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);outline:none;font-size:.88rem}
.gw-form input::placeholder{color:var(--text-3)}
.gw-form input:focus{border-color:var(--red)}

/* Downsell */
.ds-opts{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.ds-opt{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s}
.ds-opt:hover{border-color:var(--red);background:var(--red-light)}
.ds-ic{font-size:1.6rem;flex-shrink:0}.ds-opt b{display:block;margin-bottom:4px}
.ds-opt p{font-size:.82rem;color:var(--text-2);margin:0;line-height:1.5}

/* Quick View */
#pv-body{display:grid;grid-template-columns:1fr 1.2fr;gap:28px}
.pv-img{width:100%;border-radius:var(--radius);background:#fafafa}
.pv-info h3{font-size:1.3rem;font-weight:800;margin-bottom:6px}
.pv-info .pc-rating{margin-bottom:12px}
.pv-specs{background:#fafafa;padding:14px;border-radius:var(--radius);font-size:.85rem;color:var(--text-2);margin-bottom:14px;line-height:1.6}
.pv-price{font-size:1.5rem;font-weight:900;color:var(--red);margin-bottom:4px}
.pv-inst{font-size:.82rem;color:var(--text-2);margin-bottom:20px}
.pv-btns{display:flex;gap:8px}

/* Success */
.ok-check{width:64px;height:64px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;margin:0 auto 16px;box-shadow:0 4px 20px rgba(227,0,25,.35)}

/* ===== SOCIAL PROOF ===== */
.social-proof{position:fixed;bottom:80px;left:20px;z-index:80;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);opacity:0;transform:translateX(-120%);transition:all .4s}
.social-proof.show{opacity:1;transform:translateX(0)}
.sp-avatar{width:34px;height:34px;background:linear-gradient(135deg,var(--red),var(--purple));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#fff;flex-shrink:0}
.sp-text{font-size:.78rem;color:var(--text-2);line-height:1.3}
.sp-text b{color:var(--text)}

/* ===== TOAST ===== */
#toast-el{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);background:var(--bg-darker);color:#fff;padding:12px 24px;border-radius:30px;font-size:.88rem;transition:bottom .35s;z-index:999;white-space:nowrap;box-shadow:var(--shadow-lg)}
#toast-el.show{bottom:28px}

/* ===== BACK TO TOP ===== */
.back-top{position:fixed;bottom:24px;right:24px;z-index:80;width:40px;height:40px;background:var(--red);color:#fff;border-radius:50%;font-size:1rem;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all .3s;box-shadow:0 2px 10px rgba(227,0,25,.3)}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{transform:translateY(-3px);box-shadow:0 4px 16px rgba(227,0,25,.4)}

/* ===== PRODUCT STOCK BAR (FOMO) ===== */
.pc-stock{margin-bottom:8px}
.pc-stock-bar{height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;position:relative}
.pc-stock-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#e30019,#ff6b6b);transition:width 1s ease;position:relative}
.pc-stock-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:stock-shine 2s infinite}
@keyframes stock-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.pc-stock-text{display:flex;justify-content:space-between;font-size:.68rem;margin-top:3px}
.pc-stock-left{color:var(--red);font-weight:700}
.pc-stock-sold{color:var(--text-3)}
.pc-low-stock .pc-stock-left{animation:blink-text 1s infinite}
@keyframes blink-text{0%,100%{opacity:1}50%{opacity:.4}}

/* Enhanced hover glow */
.pc:hover{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 8px 32px rgba(227,0,25,.18);transform:translateY(-6px);z-index:2}

/* Compare button */
.btn-compare{width:34px;height:34px;background:#f5f5f5;border:1px solid var(--border);border-radius:6px;font-size:.78rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.btn-compare:hover{border-color:var(--blue);color:var(--blue);background:#eff6ff}
.btn-compare.selected{color:#fff;background:var(--blue);border-color:var(--blue)}

/* Installment label enhanced */
.pc-installment{font-size:.72rem;color:#fff;background:linear-gradient(90deg,#16a34a,#22c55e);padding:4px 8px;border-radius:4px;margin-bottom:10px;text-align:center;font-weight:600}

/* ===== COMPARE FLOATING BAR ===== */
.compare-float{position:fixed;bottom:0;left:0;right:0;z-index:150;background:#fff;border-top:2px solid var(--blue);box-shadow:0 -4px 20px rgba(0,0,0,.12);padding:14px 0;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.compare-float.show{transform:translateY(0)}
.compare-inner{display:flex;align-items:center;gap:16px}
.compare-items{display:flex;gap:10px;flex:1}
.cmp-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius);min-width:180px;position:relative}
.cmp-item img{width:36px;height:36px;object-fit:contain;border-radius:4px}
.cmp-item-name{font-size:.78rem;font-weight:600;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-item-rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:var(--red);color:#fff;border-radius:50%;font-size:.6rem;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid #fff}
.compare-btn{padding:10px 24px;background:var(--blue);color:#fff;font-weight:700;font-size:.85rem;border-radius:var(--radius);transition:all .2s;white-space:nowrap}
.compare-btn:hover{background:#1557b0;transform:translateY(-1px)}
.compare-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ===== STATS SECTION (Why TechViet) ===== */
.stats-section{padding:48px 0;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);position:relative;overflow:hidden;margin-bottom:24px}
.stats-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.stats-title{text-align:center;color:#fff;margin-bottom:40px}
.stats-title h2{font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:900;margin-bottom:10px}
.stats-title p{color:rgba(255,255,255,.6);font-size:.92rem}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:28px 20px;text-align:center;transition:all .3s;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--purple));opacity:0;transition:opacity .3s}
.stat-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.stat-card:hover::before{opacity:1}
.stat-icon{font-size:2.2rem;margin-bottom:12px;display:block}
.stat-number{font-size:2.4rem;font-weight:900;color:#fff;line-height:1;margin-bottom:6px;display:block}
.stat-suffix{font-size:1rem;font-weight:700;color:var(--red)}
.stat-label{font-size:.82rem;color:rgba(255,255,255,.5);font-weight:500}

/* ===== ZALO FLOATING BUTTON ===== */
.zalo-float{position:fixed;bottom:80px;right:24px;z-index:90;width:56px;height:56px;background:#0068ff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;font-weight:900;box-shadow:0 4px 16px rgba(0,104,255,.4);transition:all .3s;text-decoration:none;cursor:pointer}
.zalo-float:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 6px 24px rgba(0,104,255,.5)}
.zalo-float::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(0,104,255,.3);animation:zalo-pulse 2s infinite}
@keyframes zalo-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:0}}
.zalo-tooltip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#fff;color:var(--text);padding:8px 14px;border-radius:var(--radius);font-size:.78rem;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:all .25s}
.zalo-tooltip::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:#fff}
.zalo-float:hover .zalo-tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)}

/* ===== TESTIMONIALS ENHANCED ===== */
.tc-verified{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;color:#16a34a;font-weight:600;margin-top:2px}
.tc-verified-icon{width:14px;height:14px;background:#16a34a;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:800}
.tc-product{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-3)}
.tc-product img{width:32px;height:32px;object-fit:contain;border-radius:4px;background:#f9fafb}
.tc-product-name{font-weight:600;color:var(--text-2)}
.tc-date{font-size:.68rem;color:var(--text-3);margin-left:auto}

/* ===== RECENTLY VIEWED ===== */
.rv-section{padding:24px 0;margin-bottom:24px}
.rv-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rv-header h3{font-size:.92rem;font-weight:700;color:var(--text)}
.rv-clear{font-size:.78rem;color:var(--text-3);cursor:pointer;transition:color .15s}
.rv-clear:hover{color:var(--red)}
.rv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}

/* ===== STICKY BUY BAR ===== */
.sticky-buy{position:fixed;top:0;left:0;right:0;z-index:95;background:#fff;border-bottom:1px solid var(--border);padding:8px 0;box-shadow:var(--shadow-md);transform:translateY(-100%);transition:transform .3s;display:flex;align-items:center}
.sticky-buy.show{transform:translateY(0)}
.sticky-buy-inner{display:flex;align-items:center;gap:16px}
.sb-img{width:36px;height:36px;object-fit:contain;border-radius:6px;background:#f9fafb}
.sb-name{font-size:.85rem;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-price{font-size:1rem;font-weight:800;color:var(--red);white-space:nowrap}

/* ===== FLYING CART ANIMATION ===== */
.fly-item{position:fixed;z-index:9999;width:40px;height:40px;border-radius:50%;pointer-events:none;transition:all .7s cubic-bezier(.2,.6,.3,1);opacity:1}
.fly-item.fly{opacity:0;transform:scale(.2)!important}

/* ===== LOGO HOVER ===== */
.logo:hover .logo-box{transform:rotate(-8deg) scale(1.08);transition:transform .3s}
.logo .logo-box{transition:transform .3s}

/* ===== FLIP COUNTDOWN ===== */
.cd-box{position:relative;perspective:100px;overflow:hidden}
.cd-flip{animation:cd-flip .6s ease-in-out}
@keyframes cd-flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg);opacity:.5}100%{transform:rotateX(0);opacity:1}}

/* ===== SECTION REVEAL ANIMATION ===== */
.section-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.section-reveal.revealed{opacity:1;transform:translateY(0)}

/* ===== FLASH SALE TODAY BADGE ===== */
.flash-today{display:flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(227,0,25,.08);border-radius:100px;font-size:.78rem;color:var(--red);font-weight:700}
.flash-today-fire{animation:fire-pulse 1s infinite alternate}
@keyframes fire-pulse{0%{transform:scale(1)}100%{transform:scale(1.2)}}

/* ===== ENHANCED BADGE ANIMATION ===== */
.badge-hot{background:var(--red);animation:badge-glow 2s infinite}
@keyframes badge-glow{0%,100%{box-shadow:0 0 4px rgba(227,0,25,.3)}50%{box-shadow:0 0 12px rgba(227,0,25,.6)}}

/* ===== PARTICLE BG (Hero) ===== */
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particle{position:absolute;width:3px;height:3px;background:rgba(255,255,255,.15);border-radius:50%;animation:particle-float linear infinite}
@keyframes particle-float{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-350px) translateX(50px);opacity:0}}

/* ============================================================
   PHASE 2 — PREMIUM UPGRADES
   ============================================================ */

/* ===== A1. DARK MODE ===== */
[data-theme="dark"]{--bg:#0d0d1a;--bg-white:#161625;--text:#e5e7eb;--text-2:#9ca3af;--text-3:#6b7280;--border:#2a2a3e;--border-hover:#3a3a4e;--red-light:rgba(227,0,25,.12);--shadow:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 12px rgba(0,0,0,.3);--shadow-lg:0 8px 30px rgba(0,0,0,.4);--shadow-hover:0 8px 24px rgba(0,0,0,.45)}
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] .topbar{background:#080810}
[data-theme="dark"] .header{box-shadow:0 2px 12px rgba(0,0,0,.5)}
[data-theme="dark"] .subnav{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .subnav .sn-links a{color:var(--text-2)}
[data-theme="dark"] .cat-menu{background:var(--bg-white)}
[data-theme="dark"] .cat-menu a{color:var(--text-2)}
[data-theme="dark"] .cat-menu li{border-color:var(--border)}
[data-theme="dark"] .hp-card{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .trust-bar{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .sec-header{background:var(--bg-white)}
[data-theme="dark"] .p-grid{background:var(--bg-white)}
[data-theme="dark"] .pc{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .pc-img-wrap{background:#1a1a2e}
[data-theme="dark"] .pc-name{color:var(--text)}
[data-theme="dark"] .pc-stock-bar{background:#2a2a3e}
[data-theme="dark"] .btn-fav,.btn-compare{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .wmb-section{background:var(--bg-white)}
[data-theme="dark"] .club-section{background:var(--bg-white)}
[data-theme="dark"] .plan{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .plan-featured{border-color:var(--red)}
[data-theme="dark"] .tc{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .sim-section{background:var(--bg-white)}
[data-theme="dark"] .sim-panel{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .sk{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .sim-chart{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .nl-section .nl-box{background:var(--red)}
[data-theme="dark"] .contact-section{background:var(--bg-white)}
[data-theme="dark"] .cg-form{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .cg-form input,[data-theme="dark"] .cg-form select,[data-theme="dark"] .cg-form textarea{background:#0d0d1a;border-color:var(--border);color:var(--text)}
[data-theme="dark"] .ci-card{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .footer{background:#080810}
[data-theme="dark"] .modal{background:var(--bg-white);color:var(--text)}
[data-theme="dark"] .modal-close{background:var(--bg-white);border-color:var(--border);color:var(--text-2)}
[data-theme="dark"] .drawer{background:var(--bg-white)}
[data-theme="dark"] .dr-head{border-color:var(--border)}
[data-theme="dark"] .dr-foot{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .dr-item{border-color:var(--border)}
[data-theme="dark"] .search-bar{background:var(--bg-white)}
[data-theme="dark"] .search-bar input{background:var(--bg-white);color:var(--text)}
[data-theme="dark"] .s-btn{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .search-dd{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .sd-item{border-color:var(--border)}
[data-theme="dark"] .sd-item:hover{background:rgba(227,0,25,.1)}
[data-theme="dark"] .gw-form input{background:#0d0d1a;border-color:var(--border);color:var(--text)}
[data-theme="dark"] .gw-way{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .ds-opt{border-color:var(--border)}
[data-theme="dark"] .ds-opt:hover{background:rgba(227,0,25,.1)}
[data-theme="dark"] .brands-section{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] .rv-section{background:transparent}
[data-theme="dark"] .compare-float{background:var(--bg-white);border-color:var(--blue)}
[data-theme="dark"] .cmp-item{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .social-proof{background:var(--bg-white);border-color:var(--border)}
[data-theme="dark"] #toast-el{background:var(--bg-white);color:var(--text)}

.dm-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1rem;transition:all .25s;cursor:pointer;border:none;flex-shrink:0}
.dm-toggle:hover{background:rgba(255,255,255,.25);transform:rotate(20deg)}

/* ===== A2. TOPBAR MARQUEE ===== */
.topbar-marquee{overflow:hidden;white-space:nowrap;position:relative}
.marquee-track{display:inline-flex;gap:40px;animation:marquee-scroll 30s linear infinite;will-change:transform}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:#d1d5db;white-space:nowrap}
.marquee-item b{color:#fff}
.marquee-sep{color:#333;margin:0 10px}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== A3. MEGA MENU ===== */
.mega-menu{position:absolute;top:100%;left:0;width:680px;background:#fff;border:1px solid var(--border);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr 1fr;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s;z-index:60;overflow:hidden}
.mega-menu.show{opacity:1;visibility:visible;transform:translateY(0)}
[data-theme="dark"] .mega-menu{background:var(--bg-white);border-color:var(--border)}
.mm-col{padding:20px}
.mm-col:first-child{border-right:1px solid var(--border)}
[data-theme="dark"] .mm-col:first-child{border-color:var(--border)}
.mm-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:12px}
.mm-list a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius);font-size:.85rem;font-weight:500;color:var(--text);transition:all .15s}
.mm-list a:hover{background:var(--red-light);color:var(--red);padding-left:16px}
.mm-list .mm-ic{font-size:1rem;width:22px;text-align:center}
.mm-featured{display:flex;flex-direction:column;gap:12px}
.mm-feat-card{display:flex;gap:12px;padding:12px;background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);transition:all .15s;cursor:pointer}
[data-theme="dark"] .mm-feat-card{background:#1a1a2e;border-color:var(--border)}
.mm-feat-card:hover{border-color:var(--red);box-shadow:var(--shadow-md)}
.mm-feat-card img{width:60px;height:60px;object-fit:contain;border-radius:6px}
.mm-feat-info{flex:1}
.mm-feat-name{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:3px}
.mm-feat-price{font-size:.85rem;font-weight:800;color:var(--red)}
.mm-feat-old{font-size:.72rem;color:var(--text-3);text-decoration:line-through;margin-left:6px}
.sn-cat-wrap{position:relative}

/* ===== A4. BRAND PARTNERS ===== */
.brands-section{padding:28px 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:24px;overflow:hidden}
.brands-label{text-align:center;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:16px}
.brands-track-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.brands-track{display:flex;gap:48px;animation:brands-scroll 25s linear infinite;width:max-content}
.brands-track:hover{animation-play-state:paused}
.brand-logo{display:flex;align-items:center;justify-content:center;min-width:100px;height:40px;font-size:1rem;font-weight:800;color:var(--text-3);letter-spacing:.04em;opacity:.5;filter:grayscale(100%);transition:all .3s;cursor:pointer;white-space:nowrap;user-select:none}
.brand-logo:hover{opacity:1;filter:grayscale(0%);color:var(--text);transform:scale(1.08)}
@keyframes brands-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== B1. FREE SHIPPING BAR ===== */
.ship-bar{padding:10px 14px;background:#f0fdf4;border:1px solid rgba(22,163,74,.15);border-radius:var(--radius);margin-bottom:10px}
[data-theme="dark"] .ship-bar{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.2)}
.ship-text{font-size:.78rem;color:var(--green);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.ship-progress{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}
[data-theme="dark"] .ship-progress{background:#2a2a3e}
.ship-fill{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:3px;transition:width .5s ease}
.ship-done{color:var(--green);font-weight:700}

/* ===== B2. QUICK VIEW GALLERY ===== */
.pv-gallery{display:flex;flex-direction:column;gap:10px}
.pv-main-img{width:100%;border-radius:var(--radius);background:#fafafa;cursor:zoom-in;position:relative;overflow:hidden}
[data-theme="dark"] .pv-main-img{background:#1a1a2e}
.pv-thumbs{display:flex;gap:6px}
.pv-thumb{width:52px;height:52px;border:2px solid var(--border);border-radius:6px;cursor:pointer;object-fit:contain;background:#fafafa;transition:all .15s;padding:3px}
[data-theme="dark"] .pv-thumb{background:#1a1a2e;border-color:var(--border)}
.pv-thumb:hover,.pv-thumb.active{border-color:var(--red)}
.pv-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px}
.pv-tab{padding:8px 16px;font-size:.82rem;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all .15s}
.pv-tab:hover{color:var(--text)}
.pv-tab.active{color:var(--red);border-bottom-color:var(--red)}
.pv-tab-content{display:none}
.pv-tab-content.active{display:block}
.pv-spec-table{width:100%;font-size:.82rem;border-collapse:collapse}
.pv-spec-table tr:nth-child(even){background:#fafafa}
[data-theme="dark"] .pv-spec-table tr:nth-child(even){background:#1a1a2e}
.pv-spec-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
.pv-spec-table td:first-child{font-weight:600;color:var(--text);width:35%;white-space:nowrap}
.pv-spec-table td:last-child{color:var(--text-2)}
.pv-review{padding:12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}
.pv-review-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pv-review-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--purple));color:#fff;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700}
.pv-review-name{font-size:.78rem;font-weight:700}
.pv-review-stars{font-size:.72rem;color:var(--gold)}
.pv-review-date{font-size:.68rem;color:var(--text-3);margin-left:auto}
.pv-review-text{font-size:.78rem;color:var(--text-2);line-height:1.5}

/* ===== B3. SKELETON LOADER ===== */
.skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:16px}
.skeleton-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px}
.skeleton-el{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:4px}
[data-theme="dark"] .skeleton-el{background:linear-gradient(90deg,#1a1a2e 25%,#222240 50%,#1a1a2e 75%);background-size:200% 100%}
.skeleton-img{height:140px;border-radius:6px}
.skeleton-line{height:12px}
.skeleton-line-sm{height:10px;width:60%}
.skeleton-price{height:16px;width:50%}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== B4. SCROLL PROGRESS ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;z-index:9999;background:linear-gradient(90deg,var(--red),var(--purple),var(--cyan));transition:width .1s linear;border-radius:0 2px 2px 0;pointer-events:none}

/* ===== B5. NOTIFICATION BELL ===== */
.notif-wrap{position:relative}
.notif-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.1rem;transition:all .2s;position:relative;cursor:pointer;border:none}
.notif-btn:hover{background:rgba(255,255,255,.25)}
.notif-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;background:#ffb400;color:#000;font-size:.6rem;font-weight:800;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--red)}
.notif-dd{position:absolute;top:calc(100% + 10px);right:0;width:300px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s;z-index:60;overflow:hidden}
.notif-dd.show{opacity:1;visibility:visible;transform:translateY(0)}
[data-theme="dark"] .notif-dd{background:var(--bg-white);border-color:var(--border)}
.notif-dd-head{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.82rem;font-weight:700;color:var(--text);display:flex;justify-content:space-between;align-items:center}
.notif-dd-head small{font-size:.72rem;color:var(--red);cursor:pointer;font-weight:600}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .12s;cursor:pointer}
.notif-item:hover{background:var(--red-light)}
.notif-item:last-child{border-bottom:none}
.ni-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.ni-icon-red{background:rgba(227,0,25,.1)}
.ni-icon-purple{background:rgba(124,58,237,.1)}
.ni-icon-green{background:rgba(22,163,74,.1)}
.ni-text{flex:1}
.ni-title{font-size:.78rem;font-weight:600;color:var(--text);margin-bottom:2px}
.ni-time{font-size:.68rem;color:var(--text-3)}
.ni-dot{width:8px;height:8px;background:var(--red);border-radius:50%;flex-shrink:0;margin-top:4px}

/* ===== C1. BREADCRUMB ===== */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-3);margin-bottom:12px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-3);transition:color .15s}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb span{color:var(--text-2);font-weight:500}
.bc-sep{color:var(--text-3);font-size:.65rem}

/* ===== C2. FOOTER MAP & CERTS ===== */
.footer-map{margin-top:16px;border-radius:var(--radius);overflow:hidden;border:1px solid #222;height:180px}
.footer-map iframe{width:100%;height:100%;border:none;filter:grayscale(80%);transition:filter .3s}
.footer-map:hover iframe{filter:grayscale(20%)}
.footer-certs{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.cert-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#1a1a2e;border:1px solid #2a2a3e;border-radius:var(--radius);font-size:.72rem;color:#aaa;font-weight:600;transition:border-color .15s}
.cert-badge:hover{border-color:var(--red)}
.cert-icon{font-size:1rem}

/* ===== C3. COOKIE CONSENT ===== */
.cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:180;background:#fff;border-top:1px solid var(--border);padding:16px 0;box-shadow:0 -4px 16px rgba(0,0,0,.08);transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cookie-bar.show{transform:translateY(0)}
[data-theme="dark"] .cookie-bar{background:var(--bg-white);border-color:var(--border)}
.cookie-inner{display:flex;align-items:center;gap:16px}
.cookie-text{flex:1;font-size:.82rem;color:var(--text-2);line-height:1.5}
.cookie-text b{color:var(--text)}
.cookie-btns{display:flex;gap:8px;flex-shrink:0}
.cookie-accept{padding:8px 20px;background:var(--red);color:#fff;font-weight:700;font-size:.82rem;border-radius:var(--radius);transition:all .2s;border:none;cursor:pointer}
.cookie-accept:hover{background:var(--red-hover)}
.cookie-more{padding:8px 16px;background:transparent;border:1px solid var(--border);color:var(--text-2);font-size:.82rem;border-radius:var(--radius);cursor:pointer;transition:all .15s}
.cookie-more:hover{border-color:var(--red);color:var(--red)}

/* ===== C4. IMAGE ZOOM ===== */
.img-zoom-wrap{position:relative;overflow:hidden;cursor:zoom-in}
.img-zoom-wrap img{transition:transform .3s}
.img-zoom-lens{display:none;position:absolute;width:120px;height:120px;border:2px solid rgba(227,0,25,.4);border-radius:50%;pointer-events:none;z-index:5;backdrop-filter:blur(0.5px);box-shadow:0 0 0 2000px rgba(0,0,0,.15)}

/* ============================================================
   SPECS KNOWLEDGE GRAPH
   ============================================================ */
.specsg-section{padding:48px 0;background:#fff;margin-bottom:24px;overflow:hidden}
[data-theme="dark"] .specsg-section{background:var(--bg-white)}
.specsg-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start}

/* --- Graph Canvas --- */
.specsg-canvas{position:relative;background:linear-gradient(135deg,#0d0d1a 0%,#111827 100%);border-radius:var(--radius-lg);padding:32px 24px;min-height:380px;overflow:hidden;border:1px solid #1e293b}
.specsg-canvas::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,229,255,.04) 0%,transparent 70%);pointer-events:none}
.specsg-canvas-title{text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.35);margin-bottom:20px}

/* SVG Connections */
.specsg-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.specsg-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:8 4;opacity:.7;transition:stroke .5s,opacity .5s}
.specsg-line.status-good{stroke:#22c55e;opacity:.8}
.specsg-line.status-warn{stroke:#f59e0b;opacity:.9}
.specsg-line.status-bad{stroke:#ef4444;opacity:1}
.specsg-line.active{animation:sg-dash-move 1.2s linear infinite}
.specsg-line.status-warn.active{animation:sg-dash-move .8s linear infinite}
.specsg-line.status-bad.active{animation:sg-dash-move .4s linear infinite}
@keyframes sg-dash-move{to{stroke-dashoffset:-24}}

/* Glow pulse on lines */
.specsg-line-glow{fill:none;stroke-width:6;stroke-linecap:round;opacity:0;filter:blur(4px);transition:stroke .5s,opacity .5s}
.specsg-line-glow.status-good{stroke:#22c55e;opacity:.25}
.specsg-line-glow.status-warn{stroke:#f59e0b;opacity:.3}
.specsg-line-glow.status-bad{stroke:#ef4444;opacity:.4}

/* Nodes */
.specsg-nodes{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 20px}
.specsg-node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);cursor:default;transition:all .3s;position:relative}
.specsg-node:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.specsg-node-icon{font-size:1.6rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:50%;transition:all .3s}
.specsg-node-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4)}
.specsg-node-value{font-size:.78rem;font-weight:700;color:#fff;text-align:center;line-height:1.3;min-height:36px;display:flex;align-items:center}
.specsg-node.glow-green .specsg-node-icon{box-shadow:0 0 16px rgba(34,197,94,.4);border:1px solid rgba(34,197,94,.3)}
.specsg-node.glow-yellow .specsg-node-icon{box-shadow:0 0 16px rgba(245,158,11,.4);border:1px solid rgba(245,158,11,.3)}
.specsg-node.glow-red .specsg-node-icon{box-shadow:0 0 16px rgba(239,68,68,.5);border:1px solid rgba(239,68,68,.4)}

/* --- Analysis Panel --- */
.specsg-panel{display:flex;flex-direction:column;gap:18px}

/* Chip Selectors */
.specsg-group{display:flex;flex-direction:column;gap:8px}
.specsg-group-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.specsg-chips{display:flex;flex-wrap:wrap;gap:6px}
.specsg-chip{padding:6px 14px;background:#f5f5f5;border:1.5px solid var(--border);border-radius:100px;font-size:.78rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .2s;white-space:nowrap}
.specsg-chip:hover{border-color:var(--red);color:var(--red)}
.specsg-chip.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 2px 8px rgba(227,0,25,.25)}
[data-theme="dark"] .specsg-chip{background:#1a1a2e;border-color:var(--border);color:var(--text-2)}
[data-theme="dark"] .specsg-chip:hover{border-color:var(--red);color:var(--red)}
[data-theme="dark"] .specsg-chip.active{background:var(--red);color:#fff}

/* Bottleneck Meter */
.specsg-meter{background:#f9fafb;border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:border-color .3s}
[data-theme="dark"] .specsg-meter{background:#1a1a2e;border-color:var(--border)}
.specsg-meter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.specsg-meter-title{font-size:.82rem;font-weight:700;color:var(--text)}
.specsg-meter-pct{font-size:1.1rem;font-weight:900;transition:color .3s}
.specsg-meter-pct.good{color:#22c55e}
.specsg-meter-pct.warn{color:#f59e0b}
.specsg-meter-pct.bad{color:#ef4444}
.specsg-meter-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}
[data-theme="dark"] .specsg-meter-bar{background:#2a2a3e}
.specsg-meter-fill{height:100%;border-radius:4px;transition:width .6s ease,background .5s}
.specsg-meter-fill.good{background:linear-gradient(90deg,#22c55e,#4ade80)}
.specsg-meter-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.specsg-meter-fill.bad{background:linear-gradient(90deg,#ef4444,#f87171)}

/* Verdict Box */
.specsg-verdict{background:#f0fdf4;border:1px solid rgba(34,197,94,.2);border-radius:var(--radius);padding:14px 16px;font-size:.82rem;line-height:1.6;color:var(--text-2);transition:all .3s}
.specsg-verdict.warn{background:#fffbeb;border-color:rgba(245,158,11,.2)}
.specsg-verdict.bad{background:#fef2f2;border-color:rgba(239,68,68,.2)}
[data-theme="dark"] .specsg-verdict{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.15)}
[data-theme="dark"] .specsg-verdict.warn{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.15)}
[data-theme="dark"] .specsg-verdict.bad{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.15)}
.specsg-verdict-icon{font-size:1rem;margin-right:6px}
.specsg-verdict b{color:var(--text)}

/* Recommended Product */
.specsg-recommend{display:flex;gap:12px;padding:14px;background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s}
.specsg-recommend:hover{border-color:var(--red);box-shadow:var(--shadow-md)}
[data-theme="dark"] .specsg-recommend{background:#1a1a2e;border-color:var(--border)}
.specsg-recommend img{width:56px;height:56px;object-fit:contain;border-radius:6px;flex-shrink:0}
.specsg-recommend-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.specsg-recommend-name{font-size:.82rem;font-weight:700;color:var(--text)}
.specsg-recommend-specs{font-size:.72rem;color:var(--text-3)}
.specsg-recommend-price{font-size:.88rem;font-weight:800;color:var(--red)}
.specsg-recommend-tag{font-size:.65rem;font-weight:700;color:#fff;background:var(--green);padding:2px 8px;border-radius:100px;align-self:flex-start}

/* ===== RESPONSIVE PHASE 2 ===== */
@media(max-width:1100px){.hero-grid{grid-template-columns:1fr}.cat-menu,.hero-promos{display:none}.sim-layout{grid-template-columns:1fr}.wmb-banner{grid-template-columns:1fr}.wmb-right{display:none}.contact-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.compare-items{flex-wrap:wrap}.rv-grid{grid-template-columns:repeat(3,1fr)}.mega-menu{width:500px}.footer-map{height:140px}.specsg-layout{grid-template-columns:1fr}}
@media(max-width:768px){.ha-text{display:none !important}.p-grid,.skeleton-grid{grid-template-columns:repeat(2,1fr)}.plan-grid,.testi-grid{grid-template-columns:1fr}.sim-kpis{grid-template-columns:1fr}.sk-big{grid-column:1}.footer-top{grid-template-columns:1fr}.nl-box{flex-direction:column;text-align:center}.nl-form{max-width:100%;width:100%}.sh-countdown{display:none}.sh-tabs{display:none}.tb-right{display:none}.subnav{overflow-x:auto}.sn-links{overflow-x:auto;-webkit-overflow-scrolling:touch}#pv-body{grid-template-columns:1fr}.cf-row{grid-template-columns:1fr}.gw-row{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.rv-grid{grid-template-columns:repeat(2,1fr)}.compare-float{display:none}.zalo-float{width:48px;height:48px;bottom:70px;right:16px}.mega-menu{width:90vw;grid-template-columns:1fr}.mm-col:first-child{border-right:none;border-bottom:1px solid var(--border)}.notif-dd{right:-60px;width:280px}.cookie-inner{flex-direction:column;text-align:center}.cookie-btns{width:100%}.cookie-accept,.cookie-more{flex:1}.dm-toggle{width:32px;height:32px;font-size:.85rem}.flash-today{display:none}.specsg-nodes{grid-template-columns:1fr 1fr}.specsg-canvas{min-height:320px}}
@media(max-width:480px){.p-grid,.skeleton-grid{grid-template-columns:1fr 1fr;gap:6px;padding:10px}.pc{padding:10px}.pc-img{height:100px}.trust-inner{flex-wrap:wrap;justify-content:center;gap:16px}.stats-grid{grid-template-columns:1fr}.stat-number{font-size:1.8rem}.pv-thumbs{flex-wrap:wrap}.footer-certs{flex-direction:column}.specsg-nodes{grid-template-columns:1fr 1fr;gap:10px}.specsg-node{padding:10px 6px}.specsg-node-icon{width:36px;height:36px;font-size:1.2rem}}


/* ============================================================
   AI SHOPPING AGENT
   ============================================================ */
.ai-agent-fab{position:fixed;bottom:160px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#a855f7);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1100;box-shadow:0 4px 20px #ff6b6b66;transition:transform .2s,box-shadow .2s}
.ai-agent-fab:hover,.ai-agent-fab.active{transform:scale(1.1);box-shadow:0 6px 28px #a855f766}
.ai-fab-icon{font-size:1.5rem;line-height:1}
.ai-fab-pulse{position:absolute;inset:-4px;border-radius:50%;border:2px solid #ff6b6b;animation:ai-pulse 2s infinite;opacity:.6}
@keyframes ai-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:0}}
.ai-fab-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#ff6b6b;color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.ai-agent-panel{position:fixed;bottom:228px;right:24px;width:360px;max-height:520px;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 40px #0004;z-index:1100;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(20px) scale(.95);transition:all .3s}
.ai-agent-panel.show{opacity:1;pointer-events:all;transform:none}
.ai-agent-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#ff6b6b22,#a855f722);border-radius:16px 16px 0 0}
.ai-agent-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#a855f7);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.ai-agent-name{font-weight:700;font-size:.9rem;color:var(--text)}
.ai-agent-status{font-size:.72rem;color:#4ade80;display:flex;align-items:center;gap:4px}
.ai-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:ai-pulse 1.5s infinite}
.ai-agent-close{margin-left:auto;background:none;border:none;color:var(--text-2);cursor:pointer;font-size:1.1rem;line-height:1;padding:2px 6px}
.ai-agent-body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.ai-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:.84rem;line-height:1.5;animation:ai-msg-in .25s ease}
@keyframes ai-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-msg-bot{background:var(--bg-2,#f9fafb);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}
[data-theme=dark] .ai-msg-bot{background:#1e293b}
.ai-msg-user{background:linear-gradient(135deg,#ff6b6b,#a855f7);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.ai-choices{display:flex;flex-wrap:wrap;gap:6px;padding-left:0}
.ai-choice-btn{background:var(--bg);border:1.5px solid var(--border);border-radius:20px;padding:6px 14px;font-size:.78rem;cursor:pointer;color:var(--text);transition:all .15s}
.ai-choice-btn:hover{border-color:#ff6b6b;color:#ff6b6b}
.ai-choice-btn.selected{background:linear-gradient(135deg,#ff6b6b,#a855f7);color:#fff;border-color:transparent}
.ai-choice-btn:disabled{opacity:.5;cursor:default}
.ai-results{display:flex;flex-direction:column;gap:8px;width:100%}
.ai-result-card{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer;transition:box-shadow .15s}
.ai-result-card:hover{box-shadow:0 2px 12px #ff6b6b33}
.ai-result-card img{width:44px;height:44px;object-fit:contain;border-radius:6px;flex-shrink:0}
.ai-result-info{flex:1;min-width:0}
.ai-result-name{font-size:.78rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-result-spec{font-size:.68rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-result-price{font-size:.82rem;font-weight:700;color:var(--red)}
.ai-result-disc{background:#ff6b6b;color:#fff;border-radius:4px;padding:1px 5px;font-size:.65rem;margin-left:4px}
.ai-result-cart{background:var(--red);color:#fff;border:none;border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:.9rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.ai-result-cart:hover{transform:scale(1.12)}
.ai-agent-input-wrap{display:none;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
.ai-agent-input{flex:1;border:1.5px solid var(--border);border-radius:20px;padding:7px 14px;font-size:.82rem;background:var(--bg);color:var(--text);outline:none}
.ai-agent-input:focus{border-color:#a855f7}
.ai-send-btn{background:linear-gradient(135deg,#ff6b6b,#a855f7);color:#fff;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center}

/* ============================================================
   ISOMETRIC PC BUILDER
   ============================================================ */
.iso-section{padding:80px 0;background:linear-gradient(180deg,var(--bg) 0%,#0a0a1a 100%)}
[data-theme=dark] .iso-section{background:linear-gradient(180deg,#0a0a1a 0%,#000 100%)}
.iso-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:40px}
/* Isometric Case */
.iso-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.iso-case{width:300px;height:380px;position:relative;transform:rotateX(20deg) rotateY(-20deg) rotateZ(0deg);transform-style:preserve-3d;cursor:pointer;filter:drop-shadow(0 20px 40px #a855f755)}
.iso-body{width:220px;height:320px;position:relative;transform-style:preserve-3d;margin:0 auto}
.iso-face{position:absolute;background:var(--card)}
.iso-top{width:220px;height:60px;top:0;left:0;background:linear-gradient(135deg,#1e293b,#0f172a);transform:rotateX(90deg);transform-origin:top;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}
[data-theme=dark] .iso-top{background:linear-gradient(135deg,#1e293b,#0f172a)}
.iso-left{width:30px;height:320px;top:0;right:-30px;background:linear-gradient(180deg,#1a1a2e,#16213e);transform:skewY(-5deg)}
.iso-right{width:220px;height:320px;top:0;left:0;background:linear-gradient(135deg,#0d1117,#161b22);border:1px solid #30363d;border-radius:4px;overflow:hidden;position:relative}
.iso-mesh{position:absolute;top:10px;right:10px;width:60px;height:120px;background:repeating-linear-gradient(0deg,#30363d,#30363d 1px,transparent 1px,transparent 6px),repeating-linear-gradient(90deg,#30363d,#30363d 1px,transparent 1px,transparent 6px);opacity:.4;border-radius:4px}
/* Hotspots */
.iso-hotspot{position:absolute;width:52px;height:52px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:2px solid #4ade80;background:#0a0a1466;transition:all .2s;z-index:2}
.iso-hotspot:hover,.iso-hotspot.active{transform:scale(1.15);background:#0a0a1488;box-shadow:0 0 20px var(--hs-color,#4ade80)}
.iso-hs-icon{font-size:1.1rem;line-height:1}
.iso-hs-label{font-size:.55rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.05em}
.iso-hs-cpu{top:50px;left:30px;--hs-color:#4ade80}
.iso-hs-gpu{top:130px;left:70px;--hs-color:#22d3ee}
.iso-hs-ram{top:50px;right:30px;--hs-color:#f59e0b}
.iso-hs-ssd{bottom:100px;left:25px;--hs-color:#4ade80}
.iso-hs-psu{bottom:30px;left:60px;--hs-color:#22d3ee}
.iso-hs-cool{top:20px;left:90px;--hs-color:#a78bfa}
@keyframes iso-flash{0%,100%{opacity:1}50%{opacity:.3;transform:scale(1.3)}}
.iso-flash{animation:iso-flash .6s ease}
/* Flow SVG */
.iso-flow-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.iso-flow-path{fill:none;stroke:url(#flow-grad);stroke-width:1.5;stroke-dasharray:8 6;stroke-linecap:round;opacity:.5;transition:opacity .3s}
.iso-flow-path.flow-active{opacity:1;stroke-width:2.5}
/* RGB glow */
.iso-rgb-glow{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:280px;height:80px;border-radius:50%;filter:blur(20px);transition:background .5s;pointer-events:none}
/* Legend */
.iso-legend{display:flex;gap:16px;font-size:.75rem;font-weight:600}
.iso-lg-good{color:#4ade80}
.iso-lg-warn{color:#f59e0b}
.iso-lg-bad{color:#ff4444}
/* Panel */
.iso-panel{display:flex;flex-direction:column;gap:16px}
.iso-component-selector{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.iso-selector-title{font-size:.85rem;font-weight:700;color:var(--text-2);margin-bottom:12px}
.iso-chips-wrap{display:flex;flex-direction:column;gap:8px}
.iso-option-chip{background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .2s}
.iso-option-chip:hover,.iso-option-chip.active{border-color:#a855f7;background:#a855f711}
.iso-opt-name{font-size:.82rem;font-weight:600;color:var(--text)}
.iso-opt-price{font-size:.75rem;color:var(--red);margin:2px 0}
.iso-opt-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.iso-opt-fill{height:100%;border-radius:2px;transition:width .4s}
/* Build Summary */
.iso-build-summary{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.iso-summary-title{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:10px}
.iso-sum-item{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-2);padding:4px 0;border-bottom:1px solid #f5f5f522}
.iso-sum-item small{display:block;font-size:.68rem;opacity:.7}
.iso-summary-price{display:flex;justify-content:space-between;font-size:.9rem;font-weight:700;color:var(--text);margin-top:10px;padding-top:8px;border-top:2px solid var(--border)}
.iso-total-price{color:var(--red);font-size:1rem}
.iso-perf-bar-wrap{margin-top:10px}
.iso-perf-label{font-size:.78rem;font-weight:600;color:var(--text);margin-bottom:6px}
.iso-perf-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.iso-perf-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#4ade80,#22d3ee,#a855f7);transition:width .5s}
.iso-add-cart-btn{margin-top:12px}
@media(max-width:900px){.iso-layout{grid-template-columns:1fr}.iso-canvas-wrap{order:2}.iso-case{transform:rotateX(15deg) rotateY(-15deg);width:260px;height:340px}.iso-body{width:190px;height:280px}}
@media(max-width:600px){.ai-agent-panel{width:calc(100vw - 32px);right:16px}.ai-agent-fab{right:16px;bottom:140px}}

/* ============================================================
   PRICE DROP ALERT BUTTON
   ============================================================ */
.btn-alert{background:none;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.btn-alert:hover{border-color:#f59e0b;background:#f59e0b22}
.btn-alert.alert-on{background:#f59e0b22;border-color:#f59e0b;animation:bell-ring .5s ease}
@keyframes bell-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-20deg)}40%{transform:rotate(20deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}}
.notif-price-drop .ni-title b{color:var(--text)}

/* ============================================================
   SMART KNOWLEDGE GRAPH SEARCH
   ============================================================ */
.sg-search-wrap{background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid #334155;border-radius:12px;padding:16px;margin-bottom:16px}
.sg-search-label{font-size:.75rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.sg-search-bar{display:flex;align-items:center;gap:6px;background:#0f172a;border:1.5px solid #334155;border-radius:8px;padding:4px 4px 4px 12px;transition:border-color .2s}
.sg-search-bar:focus-within{border-color:#a855f7}
.sg-search-input{flex:1;background:none;border:none;outline:none;color:#e2e8f0;font-size:.84rem;padding:6px 0}
.sg-search-input::placeholder{color:#64748b}
.sg-search-clear{background:none;border:none;color:#64748b;cursor:pointer;padding:4px 8px;font-size:.9rem}
.sg-search-clear:hover{color:#e2e8f0}
.sg-search-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sg-sugg{background:#1e293b;border:1px solid #334155;border-radius:20px;padding:4px 12px;font-size:.72rem;color:#94a3b8;cursor:pointer;transition:all .15s;white-space:nowrap}
.sg-sugg:hover{border-color:#a855f7;color:#a855f7;background:#a855f711}
.sg-search-result{margin-top:12px}
.sg-answer{display:flex;gap:10px;background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px}
.sg-answer-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px}
.sg-answer-title{font-size:.84rem;font-weight:700;color:#e2e8f0;margin-bottom:4px}
.sg-answer-text{font-size:.78rem;color:#94a3b8;line-height:1.6}
.sg-answer-text b{color:#22d3ee}
.sg-answer-action{margin-top:8px;background:linear-gradient(135deg,#a855f7,#22d3ee);color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:.75rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.sg-answer-action:hover{opacity:.85}
/* Node + line highlight states */
.specsg-node.sg-highlight{transform:scale(1.12);box-shadow:0 0 0 3px #a855f7,0 0 20px #a855f766!important;z-index:5}
.specsg-line.sg-highlight-line{stroke:#a855f7!important;stroke-width:3!important;filter:drop-shadow(0 0 6px #a855f7)!important;opacity:1!important}

/* ============================================================
   AI AGENT MEMORY — returning user chips
   ============================================================ */
.ai-mem-chip{display:inline-flex;align-items:center;gap:4px;background:#a855f722;border:1px solid #a855f755;border-radius:12px;padding:3px 10px;font-size:.72rem;color:#a855f7;margin-bottom:8px}

/* ============================================================
   SEMANTIC SEARCH
   ============================================================ */
.sd-semantic .sd-match{font-size:.65rem;color:#a855f7;letter-spacing:.05em;margin-top:2px;font-family:monospace}
.sd-semantic:hover .sd-match{color:#22d3ee}

/* ============================================================
   MULTI-STEP RESEARCH AGENT
   ============================================================ */
.ai-research-steps{display:flex;flex-direction:column;gap:6px;width:100%;padding:4px 0}
.ai-step{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;font-size:.78rem;transition:all .3s}
.ai-step-loading{background:#1e293b;color:#94a3b8;border:1px solid #334155}
.ai-step-done{background:#052e16;color:#4ade80;border:1px solid #166534}
.ai-step-icon{font-size:1rem;flex-shrink:0}
.ai-step-label{flex:1}
.ai-step-spinner{width:14px;height:14px;border:2px solid #334155;border-top-color:#a855f7;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.ai-step-done .ai-step-spinner{display:none}
.ai-step-done .ai-step-label::after{content:' ✓';font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}
/* Compare table */
.ai-compare-table{width:100%;margin-top:8px}
.ai-compare-title{font-size:.8rem;font-weight:700;color:#94a3b8;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #1e293b}
.ai-compare-grid{display:grid;gap:8px}
.ai-compare-col{background:#0f172a;border:1px solid #1e293b;border-radius:10px;padding:10px;position:relative;transition:border-color .2s}
.ai-compare-col:hover{border-color:#334155}
.ai-compare-best{border-color:#a855f755;background:#0f172a}
.ai-best-badge{background:linear-gradient(135deg,#a855f7,#22d3ee);color:#fff;font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:10px;text-align:center;margin-bottom:6px}
.ai-compare-col img{width:100%;height:70px;object-fit:contain;cursor:pointer;border-radius:6px}
.ai-compare-name{font-size:.72rem;font-weight:600;color:#e2e8f0;margin:6px 0 2px;line-height:1.3}
.ai-compare-price{font-size:.82rem;font-weight:700;color:#f43f5e}
.ai-compare-rating{font-size:.7rem;color:#f59e0b;margin:2px 0}
.ai-compare-specs{display:flex;flex-direction:column;gap:2px;margin:4px 0}
.ai-compare-specs span{font-size:.65rem;color:#64748b;background:#1e293b;padding:1px 6px;border-radius:4px}
.ai-compare-pros,.ai-compare-cons{font-size:.68rem;margin-top:6px;line-height:1.8}
.ai-compare-pros b{color:#4ade80}
.ai-compare-cons b{color:#f59e0b}
.ai-compare-pros div,.ai-compare-cons div{color:#94a3b8;padding-left:4px}
.ai-research-conclusion{background:#0f172a;border:1px solid #1e293b;border-left:3px solid #a855f7;border-radius:8px;padding:10px 14px;font-size:.78rem;color:#94a3b8;margin-top:10px;line-height:1.6}
.ai-research-conclusion b{color:#e2e8f0}

/* ============================================================
   LIVE SOCIAL PROOF ENGINE
   ============================================================ */
.live-badge{position:absolute;top:8px;left:8px;background:#00000099;backdrop-filter:blur(4px);border:1px solid #ffffff22;border-radius:20px;padding:3px 9px;font-size:.67rem;color:#fff;display:flex;align-items:center;gap:4px;z-index:3;transition:all .3s}
.live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:live-pulse 1.5s infinite;flex-shrink:0}
.live-dot-green{background:#22d3ee}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.live-count{font-weight:700;color:#4ade80}
.live-cart-flash{background:#052e1699;border-color:#4ade8055;color:#4ade80}

/* ============================================================
   VOICE SHOPPING ASSISTANT
   ============================================================ */
.ai-voice-btn{background:none;border:1.5px solid #334155;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.ai-voice-btn:hover{border-color:#a855f7;background:#a855f722}
.ai-voice-btn.listening{background:linear-gradient(135deg,#ff6b6b,#a855f7);border-color:transparent;animation:voice-pulse .8s ease infinite alternate;color:#fff}
@keyframes voice-pulse{from{box-shadow:0 0 0 0 #ff6b6b55}to{box-shadow:0 0 0 8px transparent}}

/* ============================================================
   FPS BENCHMARK SIMULATOR
   ============================================================ */
.iso-fps-wrap{grid-column:1/-1;margin-top:16px}
.iso-fps-panel{background:linear-gradient(135deg,#0d1117,#161b22);border:1px solid #30363d;border-radius:12px;padding:16px;overflow:hidden}
.fps-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #21262d}
.fps-title{font-size:.85rem;font-weight:700;color:#e6edf3}
.fps-config{font-size:.72rem;color:#8b949e;background:#161b22;padding:3px 10px;border-radius:20px;border:1px solid #30363d}
.fps-rows{display:flex;flex-direction:column;gap:8px}
.fps-row{display:grid;grid-template-columns:160px 1fr 70px 90px;align-items:center;gap:8px}
.fps-game{display:flex;flex-direction:column}
.fps-game span{font-size:.78rem;font-weight:600;color:#e6edf3}
.fps-game small{font-size:.65rem;color:#8b949e}
.fps-bar-wrap{height:8px}
.fps-bar-bg{height:100%;background:#21262d;border-radius:4px;overflow:hidden}
.fps-bar-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.fps-val{font-size:.82rem;font-weight:700;text-align:right;font-family:monospace}
.fps-perf{font-size:.7rem;color:#8b949e;text-align:right}
.fps-note{font-size:.65rem;color:#484f58;margin-top:10px;text-align:center}
@media(max-width:600px){.fps-row{grid-template-columns:120px 1fr 55px}.fps-perf{display:none}}

/* ============================================================
   LIVING COMPATIBILITY GRAPH
   ============================================================ */
.living-graph-section{padding:80px 0;background:linear-gradient(180deg,#050d1a 0%,#0a0a1a 100%)}
.living-graph-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-top:32px;align-items:start}
.cg-canvas-wrap{position:relative}
.cg-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.72rem;font-weight:600;margin-bottom:10px}
.compat-svg{width:100%;height:480px;background:#050d1a;border:1px solid #1e293b;border-radius:12px;display:block}
.cg-edge{stroke:#1e293b;stroke-width:1;transition:all .3s}
.cg-edge-active{stroke:#a855f7;stroke-width:2;opacity:.8}
.cg-node{transition:r .3s,opacity .3s}
.cg-label{fill:#e2e8f0;font-size:10px;font-weight:600;pointer-events:none;text-shadow:0 1px 3px #000}
.cg-info-panel{background:#0d1117;border:1px solid #1e293b;border-radius:12px;padding:16px;min-height:200px}
.cg-info-hint{color:#4b5563;font-size:.82rem;text-align:center;padding:40px 10px;line-height:1.6}
.cg-selected-card{display:flex;gap:10px;cursor:pointer;padding:10px;background:#161b22;border-radius:10px;margin-bottom:12px;transition:background .2s}
.cg-selected-card:hover{background:#1e293b}
.cg-selected-card img{width:56px;height:56px;object-fit:contain;border-radius:6px}
.cg-sel-name{font-size:.8rem;font-weight:600;color:#e6edf3;line-height:1.3}
.cg-sel-price{font-size:.82rem;font-weight:700;color:#f43f5e;margin-top:2px}
.cg-sel-rating{font-size:.72rem;color:#f59e0b}
.cg-compat-title{font-size:.75rem;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.cg-compat-list{display:flex;flex-direction:column;gap:6px}
.cg-compat-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#161b22;border-radius:8px;cursor:pointer;transition:background .15s;font-size:.75rem;color:#c9d1d9}
.cg-compat-item:hover{background:#1e293b;color:#e6edf3}
.cg-compat-item img{width:28px;height:28px;object-fit:contain;border-radius:4px}
@media(max-width:900px){.living-graph-layout{grid-template-columns:1fr}.compat-svg{height:360px}}

/* ============================================================
   PERSISTENT AI PERSONA "MINH"
   ============================================================ */
.minh-avatar{display:grid;grid-template-columns:repeat(8,6px);grid-template-rows:repeat(6,6px);gap:1px;flex-shrink:0}
.minh-px{border-radius:1px}
.minh-badge{background:linear-gradient(135deg,#a855f7,#22d3ee);color:#fff;font-size:.55rem;padding:1px 5px;border-radius:6px;margin-left:4px;font-weight:700;vertical-align:middle}
.minh-visit-count{font-size:.7rem;color:#4b5563;margin-left:auto;margin-right:6px}

/* ============================================================
   AMBIENT BEHAVIORAL INTELLIGENCE
   ============================================================ */
.ambient-overlay{position:fixed;bottom:24px;left:24px;z-index:1200;opacity:0;transform:translateY(20px) scale(.95);transition:all .4s cubic-bezier(.4,0,.2,1);pointer-events:none}
.ambient-overlay.show{opacity:1;transform:none;pointer-events:all}
.ambient-card{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid #334155;border-radius:16px;padding:16px 18px;box-shadow:0 20px 60px #000a,0 0 0 1px #a855f711;max-width:340px}
.ambient-avatar{font-size:2rem;flex-shrink:0;filter:drop-shadow(0 0 8px #a855f755)}
.ambient-title{font-size:.88rem;font-weight:700;color:#e2e8f0;margin-bottom:4px}
.ambient-msg{font-size:.78rem;color:#94a3b8;line-height:1.6;margin-bottom:10px}
.ambient-msg b{color:#22d3ee}
.ambient-actions{display:flex;flex-wrap:wrap;gap:6px}
.ambient-btn{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:5px 12px;font-size:.74rem;color:#94a3b8;cursor:pointer;transition:all .15s}
.ambient-btn:hover{border-color:#64748b;color:#e2e8f0}
.ambient-btn-primary{background:linear-gradient(135deg,#a855f7,#22d3ee);border-color:transparent;color:#fff;font-weight:600}
.ambient-btn-primary:hover{opacity:.9;color:#fff}
@media(max-width:480px){.ambient-overlay{left:12px;right:12px;bottom:80px}.ambient-card{max-width:100%}}