/* ===== CỬA HÀNG BOT (30/09/2026) ===== */
.st-wrap{max-width:1180px;margin:0 auto;padding:0 .5rem 3rem}
.st-hero{position:relative;overflow:hidden;border-radius:20px;padding:2.2rem 2rem;margin-bottom:1.6rem;background:linear-gradient(135deg,#0b1220 0%,#111a2e 55%,#1a1408 100%);color:#fff;border:1px solid rgba(201,151,63,.28)}
.st-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 240px at 88% 0%,rgba(201,151,63,.28),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px);pointer-events:none}
.st-hero>*{position:relative}
.st-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E2B25A;margin-bottom:.6rem}
.st-hero h1{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;line-height:1.15;margin-bottom:.7rem}
.st-hero h1 span{background:linear-gradient(90deg,#E2B25A,#C9973F);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-hero p{color:rgba(255,255,255,.72);max-width:640px;font-size:.98rem;line-height:1.7}
.st-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1rem}
.st-trust span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.st-trust svg{width:14px;height:14px;color:#E2B25A}
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 1rem;flex-wrap:wrap}
.st-head h2{font-size:1.25rem;font-weight:800;color:var(--t1)}
.st-head small{color:var(--t3);font-size:.78rem}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.st-card{position:relative;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--card-bd);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.st-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(0,0,0,.35);border-color:rgba(201,151,63,.55)}
.st-av{position:relative;aspect-ratio:1/0.82;background:#0b1220;overflow:hidden}
.st-av svg{width:100%;height:100%;display:block}
.st-rank{position:absolute;top:10px;left:10px;z-index:2;font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:rgba(6,15,30,.72);color:#E2B25A;border:1px solid rgba(226,178,90,.45);backdrop-filter:blur(6px)}
.st-rank.r1{background:linear-gradient(135deg,#E2B25A,#C9973F);color:#1a1205;border-color:transparent}
.st-tag{position:absolute;top:10px;right:10px;z-index:2;font-size:.62rem;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(16,185,129,.16);color:#34d399;border:1px solid rgba(16,185,129,.35)}
.st-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1}
.st-name{font-size:1.08rem;font-weight:800;color:var(--t1);letter-spacing:.01em}
.st-sub{font-size:.76rem;color:var(--t3);margin-top:-6px;min-height:1.1em;line-height:1.4}
.st-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.st-stat{background:var(--bg3);border-radius:10px;padding:7px 4px;text-align:center}
.st-stat b{display:block;font-size:.88rem;font-weight:800;color:var(--t1)}
.st-stat b.up{color:#059669}.st-stat b.dn{color:#dc2626}
.st-stat i{display:block;font-style:normal;font-size:.6rem;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.st-buy{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.st-price b{font-size:1.45rem;font-weight:800;color:var(--t1);line-height:1}
.st-price small{display:block;font-size:.7rem;color:var(--t3);margin-top:3px}
.st-add{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:700;padding:9px 14px;border-radius:11px;background:linear-gradient(135deg,#1e293b,#0f172a);color:#fff;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.st-add:hover{box-shadow:0 8px 20px -8px rgba(201,151,63,.7);transform:translateY(-1px);background:linear-gradient(135deg,#C9973F,#A8791F);color:#1a1205}
.st-add.in{background:rgba(16,185,129,.14);color:#059669;box-shadow:none}
.st-add svg{width:15px;height:15px}
.st-soon{border-style:dashed;background:transparent;box-shadow:none}
.st-soon:hover{transform:none;box-shadow:none;border-color:var(--card-bd)}
.st-soon .st-av{background:linear-gradient(135deg,var(--bg3),var(--bg4));display:flex;align-items:center;justify-content:center;color:var(--t3)}
.st-soon .st-av svg{width:54px;height:54px;opacity:.55}
.st-note{margin-top:1.6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.st-note>div{background:var(--bg2);border:1px solid var(--card-bd);border-radius:14px;padding:1rem 1.15rem}
.st-note h3{font-size:.92rem;font-weight:800;color:var(--t1);margin-bottom:.4rem;display:flex;align-items:center;gap:7px}
.st-note p{font-size:.82rem;color:var(--t2);line-height:1.7;margin:0}
.st-warn{margin-top:1.2rem;font-size:.76rem;color:var(--t3);line-height:1.7}
.st-skel{height:340px;border-radius:18px;background:linear-gradient(100deg,var(--bg3) 30%,var(--bg4) 50%,var(--bg3) 70%);background-size:200% 100%;animation:stSk 1.3s linear infinite}
@keyframes stSk{to{background-position:-200% 0}}
/* giỏ hàng trên topbar */
.st-cartbtn{position:relative;width:auto;padding:0 12px;gap:7px;font-family:inherit;font-size:.78rem;font-weight:700;color:var(--t1)}
.st-cartbtn svg{width:16px;height:16px}
.st-cartbtn .n{min-width:18px;height:18px;border-radius:9px;background:linear-gradient(135deg,#C9973F,#A8791F);color:#1a1205;font-size:.66rem;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px}
.st-cartbtn .n.on{display:inline-flex}
.st-cartbtn.bump{animation:stBump .35s}
@keyframes stBump{40%{transform:scale(1.12)}}
/* ngăn kéo giỏ + hộp thanh toán */
.st-ov{position:fixed;inset:0;background:rgba(2,6,15,.62);z-index:1100;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:blur(3px)}
.st-ov.on{opacity:1;pointer-events:auto}
.st-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:1101;background:var(--bg2);border-left:1px solid var(--card-bd);box-shadow:-20px 0 60px rgba(0,0,0,.4);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.st-drawer.on{transform:none}
.st-dh{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--card-bd)}
.st-dh h3{font-size:1.02rem;font-weight:800;color:var(--t1)}
.st-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--card-bd);background:var(--bg3);color:var(--t2);cursor:pointer;font-size:14px}
.st-x:hover{color:var(--t1)}
.st-list{flex:1;overflow:auto;padding:.8rem 1.2rem}
.st-empty{text-align:center;color:var(--t3);padding:3rem 1rem;font-size:.88rem}
.st-empty svg{width:44px;height:44px;opacity:.4;margin-bottom:.7rem}
.st-li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--card-bd)}
.st-li .th{width:54px;height:46px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#0b1220}
.st-li .th svg{width:100%;height:100%;display:block}
.st-li .nm{flex:1;min-width:0}
.st-li .nm b{display:block;font-size:.88rem;color:var(--t1);font-weight:800}
.st-li .nm span{font-size:.72rem;color:var(--t3)}
.st-li .pr{font-weight:800;font-size:.9rem;color:var(--t1)}
.st-li button{border:0;background:transparent;color:var(--t3);cursor:pointer;font-size:16px;padding:4px 6px}
.st-li button:hover{color:#dc2626}
.st-df{padding:1rem 1.2rem 1.2rem;border-top:1px solid var(--card-bd);background:var(--bg2)}
.st-sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem;font-size:.85rem;color:var(--t2)}
.st-sum b{font-size:1.35rem;font-weight:800;color:var(--t1)}
.st-vnd{text-align:right;font-size:.74rem;color:var(--t3);margin-bottom:.8rem}
.st-agree{display:flex;gap:8px;align-items:flex-start;font-size:.74rem;color:var(--t2);line-height:1.55;margin-bottom:.8rem}
.st-agree input{margin-top:3px;accent-color:#C9973F}
.st-agree a{color:#A8791F;text-decoration:underline}
.st-pay{width:100%;border:0;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:800;padding:13px;border-radius:12px;background:linear-gradient(135deg,#E2B25A,#C9973F 55%,#A8791F);color:#1a1205;transition:box-shadow .2s,transform .15s}
.st-pay:hover{box-shadow:0 10px 26px -10px rgba(201,151,63,.9);transform:translateY(-1px)}
.st-pay:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.st-modal{position:fixed;left:50%;top:50%;z-index:1102;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;background:var(--bg2);border:1px solid var(--card-bd);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:all .24s;padding:1.4rem 1.3rem}
.st-modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.st-modal h3{font-size:1.1rem;font-weight:800;color:var(--t1);margin-bottom:.25rem}
.st-modal .sub{font-size:.8rem;color:var(--t3);margin-bottom:1rem}
.st-qr{text-align:center;margin-bottom:.9rem}
.st-qr .box{display:inline-block;background:#fff;padding:12px;border-radius:14px}
.st-qr img{width:196px;height:196px;display:block}
.st-qr .amt{font-size:1.25rem;font-weight:800;color:#059669;margin-top:8px}
.st-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--card-bd);font-size:.8rem;color:var(--t2)}
.st-row b{color:var(--t1);text-align:right;word-break:break-all}
.st-ref{margin-top:.7rem;padding:10px 12px;border-radius:10px;background:rgba(201,151,63,.12);border:1px solid rgba(201,151,63,.35);font-size:.78rem;color:var(--t2)}
.st-ref b{display:block;font-size:1.05rem;color:#A8791F;margin-top:2px}
.st-wait{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:.9rem;font-size:.78rem;color:var(--t3)}
.st-wait i{width:9px;height:9px;border-radius:50%;background:#C9973F;animation:stPulse 1.2s infinite}
@keyframes stPulse{50%{opacity:.25;transform:scale(.7)}}
.st-ok{text-align:center;padding:.6rem 0}
.st-ok .tick{width:64px;height:64px;border-radius:50%;margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,.15);color:#059669}
.st-ok .tick svg{width:32px;height:32px}
.st-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,20px);z-index:1200;background:#0f172a;color:#fff;font-size:.82rem;font-weight:600;padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:all .25s;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.st-toast.on{opacity:1;transform:translate(-50%,0)}
[data-theme=gray] .st-add,[data-theme=gray] .st-pay{background:#404040 !important;color:#fff !important}
@media (max-width:640px){.st-hero{padding:1.5rem 1.15rem;border-radius:16px}.st-grid{grid-template-columns:repeat(2,1fr);gap:10px}.st-body{padding:10px 11px 12px}.st-name{font-size:.95rem}.st-stats{gap:4px}.st-buy{flex-direction:column;align-items:stretch}.st-add{justify-content:center}.st-price b{font-size:1.2rem}.st-cartbtn span.t{display:none}}
@media (max-width:380px){.st-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.st-card,.st-drawer,.st-modal{transition:none}.st-skel,.st-wait i{animation:none}}
/* thuê / mua đứt + combo (30/09/2026) */
.st-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 1.2rem;padding:10px 12px;background:var(--bg2);border:1px solid var(--card-bd);border-radius:14px}
.st-seg{display:inline-flex;padding:3px;background:var(--bg3);border-radius:11px;gap:2px}
.st-seg button{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:700;padding:8px 16px;border-radius:9px;color:var(--t2);transition:all .18s}
.st-seg button.on{background:linear-gradient(135deg,#E2B25A,#C9973F);color:#1a1205;box-shadow:0 4px 12px -6px rgba(201,151,63,.9)}
.st-bar label{font-size:.78rem;color:var(--t2);display:flex;align-items:center;gap:8px}
.st-bar select{font-family:inherit;font-size:.8rem;font-weight:700;padding:7px 10px;border-radius:9px;border:1px solid var(--card-bd);background:var(--bg3);color:var(--t1)}
.st-bar .hint{margin-left:auto;font-size:.74rem;color:var(--t3)}
.st-price small.per{display:inline;color:var(--t3);font-weight:600;font-size:.72rem}
.st-combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:.5rem}
.st-combo{position:relative;overflow:hidden;border-radius:18px;padding:16px;color:#fff;background:linear-gradient(140deg,#0b1220,#152036 60%,#1c1608);border:1px solid rgba(201,151,63,.32);display:flex;flex-direction:column;gap:12px;transition:transform .22s,box-shadow .22s}
.st-combo:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.st-combo::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(201,151,63,.35),transparent 70%)}
.st-combo>*{position:relative}
.st-combo h3{font-size:1.1rem;font-weight:800}
.st-combo .badge{align-self:flex-start;font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:rgba(226,178,90,.16);color:#E2B25A;border:1px solid rgba(226,178,90,.4)}
.st-faces{display:flex;align-items:center}
.st-faces .f{width:46px;height:40px;border-radius:12px;overflow:hidden;border:2px solid #152036;margin-left:-10px;background:#0b1220}
.st-faces .f:first-child{margin-left:0}
.st-faces .f svg{width:100%;height:100%;display:block}
.st-combo .names{font-size:.76rem;color:rgba(255,255,255,.65);line-height:1.5}
.st-combo .pr b{font-size:1.6rem;font-weight:800}
.st-combo .pr small{color:rgba(255,255,255,.6);font-size:.74rem}
.st-combo .save{font-size:.72rem;color:#34d399;font-weight:700}
.st-combo .st-add{justify-content:center;background:linear-gradient(135deg,#E2B25A,#C9973F);color:#1a1205}
.st-combo .st-add.in{background:rgba(16,185,129,.2);color:#34d399}
.st-li .md{display:inline-block;font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:999px;margin-left:4px;background:rgba(201,151,63,.15);color:#A8791F}
.st-li .md.own{background:rgba(16,185,129,.14);color:#059669}
.st-months{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--t2);margin-bottom:.7rem}
.st-months select{font-family:inherit;font-size:.8rem;font-weight:700;padding:6px 9px;border-radius:9px;border:1px solid var(--card-bd);background:var(--bg3);color:var(--t1)}
.st-cmp{margin-top:1.4rem;overflow:auto;border:1px solid var(--card-bd);border-radius:14px;background:var(--bg2)}
.st-cmp table{width:100%;border-collapse:collapse;font-size:.82rem}
.st-cmp th,.st-cmp td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--card-bd);color:var(--t2)}
.st-cmp th{color:var(--t1);font-weight:800;background:var(--bg3)}
.st-cmp tr:last-child td{border-bottom:0}
.st-cmp td:first-child{color:var(--t1);font-weight:700;white-space:nowrap}
@media (max-width:640px){.st-bar .hint{margin-left:0;width:100%}.st-seg button{padding:8px 12px}}

/* ===== CỬA HÀNG v2 (30/09/2026 - đợt 2): hero tường đổ, hộp phần mềm, thẻ kiểu TGDĐ/FPT, trang chi tiết ===== */
.sw{max-width:1200px;margin:0 auto;padding:0 .5rem 3rem}
.sh{position:relative;display:grid;grid-template-columns:minmax(200px,.7fr) minmax(320px,1.5fr);align-items:stretch;min-height:250px;border-radius:22px;overflow:hidden;margin-bottom:1.6rem;background:linear-gradient(120deg,#060911 0%,#0d1526 55%,#16110a 100%);border:1px solid rgba(201,151,63,.24);color:#fff}
.sh-wall{position:relative;min-height:230px;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 30%,#000 62%)}
.sh-wall canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sh-text{position:relative;padding:1.7rem 2rem 1.7rem .4rem;display:flex;flex-direction:column;justify-content:center}
.sh-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#E2B25A;margin-bottom:.7rem}
.sh h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;line-height:1.14;letter-spacing:-.02em;margin-bottom:.8rem}
.sh h1 span{background:linear-gradient(90deg,#F3CE7A,#C9973F);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh p{color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.7;max-width:640px}
.sh-kinds{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:1rem;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.85)}
.sh-kinds span{display:inline-flex;align-items:center;gap:6px}
.sh-kinds span::before{content:"";width:5px;height:5px;border-radius:50%;background:#E2B25A}
.sh-kinds span.soon{color:rgba(255,255,255,.45)}
.sh-kinds span.soon::before{background:rgba(255,255,255,.3)}
/* các bước: icon lớn, không khung */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin:1.8rem 0 .4rem}
.step{display:flex;align-items:center;gap:14px;padding:.4rem 1.1rem;position:relative}
.step+.step::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--card-bd)}
.step svg{width:46px;height:46px;flex-shrink:0;color:#C9973F}
.step b{display:block;font-size:.92rem;font-weight:800;color:var(--t1)}
.step span{display:block;font-size:.76rem;color:var(--t3);line-height:1.5;margin-top:1px}
.sec{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2rem 0 1rem;flex-wrap:wrap}
.sec h2{font-size:1.3rem;font-weight:800;color:var(--t1);letter-spacing:-.01em}
.sec small{color:var(--t3);font-size:.78rem}
.sec-sub{color:var(--t2);font-size:.85rem;margin:-.6rem 0 1rem}
/* thẻ sản phẩm */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.pc{position:relative;display:flex;flex-direction:column;background:#0b1220;border:1px solid rgba(120,140,180,.18);border-radius:16px;overflow:hidden;color:#e5ebf7;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;text-decoration:none}
.pc:hover{transform:translateY(-4px);border-color:rgba(226,178,90,.6);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.pc-img{position:relative;display:block;aspect-ratio:1/0.98;background:radial-gradient(ellipse at 50% 38%,rgba(60,80,130,.28),transparent 68%),linear-gradient(180deg,#0d1424,#080d18);overflow:hidden}
.pc-img svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .35s ease}
.pc:hover .pc-img svg{transform:scale(1.045)}
.pc-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:.64rem;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:rgba(6,15,30,.72);color:#E2B25A;border:1px solid rgba(226,178,90,.45)}
.pc-badge.r1{background:linear-gradient(135deg,#E2B25A,#C9973F);color:#1a1205;border-color:transparent}
.pc-body{display:flex;flex-direction:column;gap:7px;padding:12px 14px 14px;flex:1}
.pc-name{font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:.01em}
.pc-desc{font-size:.76rem;color:#93a0ba;line-height:1.45;min-height:2.2em}
.pc-specs{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding:8px 0;border-top:1px solid rgba(120,140,180,.16);border-bottom:1px solid rgba(120,140,180,.16);font-size:.72rem}
.pc-specs div{display:flex;justify-content:space-between;gap:6px;color:#8b98b3}
.pc-specs b{color:#eaf0fb;font-weight:800}
.pc-specs b.up{color:#34d399}.pc-specs b.dn{color:#f87171}
.pc-price{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.pc-price b{font-size:1.4rem;font-weight:800;color:#F3CE7A;line-height:1}
.pc-price span{font-size:.76rem;color:#93a0ba;font-weight:600}
.pc-vnd{font-size:.7rem;color:#6b7893;margin-top:-4px}
.pc-act{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.pc-btn{flex:1;text-align:center;font-family:inherit;font-size:.78rem;font-weight:800;padding:9px 10px;border-radius:10px;border:1px solid #C9973F;background:transparent;color:#F3CE7A;cursor:pointer;text-decoration:none;transition:background .18s,color .18s}
.pc-btn:hover{background:#C9973F;color:#1a1205}
.pc-cart{width:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(120,140,180,.3);background:transparent;color:#cbd5e1;cursor:pointer;transition:all .18s}
.pc-cart svg{width:17px;height:17px}
.pc-cart:hover{border-color:#C9973F;color:#F3CE7A}
.pc-cart.in{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.5);color:#34d399}
/* combo: chữ trái, hộp phải */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cc{position:relative;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:6px;padding:16px 16px 16px 18px;border-radius:16px;background:#0b1220;border:1px solid rgba(120,140,180,.18);color:#e5ebf7;text-decoration:none;transition:transform .22s,border-color .22s,box-shadow .22s;overflow:hidden}
.cc:hover{transform:translateY(-4px);border-color:rgba(226,178,90,.6);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.cc h3{font-size:1.02rem;font-weight:800;color:#fff}
.cc .cn{font-size:.72rem;color:#93a0ba;margin:4px 0 8px;line-height:1.5}
.cc .cp{font-size:1.35rem;font-weight:800;color:#F3CE7A}
.cc .cp small{font-size:.74rem;color:#93a0ba;font-weight:600}
.cc .cs{font-size:.7rem;color:#34d399;font-weight:700;margin-top:2px}
.cc-art svg{width:100%;height:auto;display:block}
.cc-act{grid-column:1/-1;display:flex;gap:8px;margin-top:8px}
/* bảng thuê / mua đứt */
.cmpt{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:.4rem}
.cmpt th,.cmpt td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--card-bd);color:var(--t2);vertical-align:top}
.cmpt th{color:var(--t1);font-weight:800;font-size:.86rem}
.cmpt td:first-child{color:var(--t1);font-weight:700;white-space:nowrap;width:1%}
/* mục "có gì trong cửa hàng": icon lớn, không khung */
.kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 30px;margin-top:.4rem}
.kind{display:flex;gap:14px}
.kind svg{width:44px;height:44px;flex-shrink:0;color:#C9973F}
.kind b{display:block;font-size:.92rem;color:var(--t1);font-weight:800;margin-bottom:2px}
.kind span{display:block;font-size:.8rem;color:var(--t2);line-height:1.65}
.kind em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.06em;color:var(--t3);border:1px solid var(--card-bd);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
/* ===== trang chi tiết ===== */
.crumb{font-size:.78rem;color:var(--t3);margin:.2rem 0 1rem;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{color:var(--t2);text-decoration:none}.crumb a:hover{color:#A8791F}
.pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.pd-stage{position:relative;aspect-ratio:1/0.86;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,rgba(70,95,150,.32),transparent 68%),linear-gradient(180deg,#0e1526,#070b15);border:1px solid rgba(120,140,180,.2)}
.pd-stage svg{position:absolute;inset:0;width:100%;height:100%}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-th{width:84px;height:64px;border-radius:12px;overflow:hidden;cursor:pointer;background:#0b1220;border:2px solid transparent;opacity:.7;position:relative;padding:0;transition:all .18s;color:#cbd5e1;font-family:inherit;font-size:.62rem;font-weight:700}
.pd-th.on{border-color:#C9973F;opacity:1}
.pd-th:hover{opacity:1}
.pd-th svg{position:absolute;inset:0;width:100%;height:100%}
.pd-th span{position:absolute;left:0;right:0;bottom:0;padding:2px 0;text-align:center;background:rgba(0,0,0,.55)}
.pd h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--t1);letter-spacing:-.01em}
.pd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:.6rem 0 .9rem}
.pd-tags span{font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:var(--bg3);color:var(--t2)}
.pd-tags span.g{background:rgba(201,151,63,.16);color:#A8791F}
.pd-lead{color:var(--t2);font-size:.9rem;line-height:1.75;margin-bottom:1rem}
.pd-buy{padding:1.1rem 0;border-top:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd)}
.pd-price{display:flex;align-items:baseline;gap:8px;margin:.7rem 0 .2rem}
.pd-price b{font-size:2rem;font-weight:800;color:var(--t1);line-height:1}
.pd-price span{color:var(--t3);font-size:.85rem;font-weight:600}
.pd-vnd{font-size:.8rem;color:var(--t3);margin-bottom:.7rem}
.pd-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:.9rem}
.pd-cta button{font-family:inherit;font-weight:800;font-size:.9rem;border-radius:12px;padding:13px 10px;cursor:pointer;border:0}
.pd-cta .buy{background:linear-gradient(135deg,#F3CE7A,#C9973F 55%,#A8791F);color:#1a1205}
.pd-cta .add{background:transparent;border:1.5px solid #C9973F;color:#A8791F}
.pd-cta .buy:hover{box-shadow:0 10px 26px -10px rgba(201,151,63,.9)}
.pd-perks{list-style:none;margin:1rem 0 0;display:grid;gap:9px}
.pd-perks li{display:flex;gap:11px;align-items:flex-start;font-size:.82rem;color:var(--t2);line-height:1.55}
.pd-perks svg{width:20px;height:20px;flex-shrink:0;color:#C9973F;margin-top:1px}
.pd-sec{margin-top:2.4rem}
.pd-sec h2{font-size:1.2rem;font-weight:800;color:var(--t1);margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.pd-sec h2::before{content:"";width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg,#E2B25A,#A8791F)}
.spec{width:100%;border-collapse:collapse;font-size:.86rem}
.spec td{padding:11px 4px;border-bottom:1px solid var(--card-bd);color:var(--t2)}
.spec td:first-child{width:42%;color:var(--t3)}
.spec td:last-child{color:var(--t1);font-weight:700}
.spec td .up{color:#059669}.spec td .dn{color:#dc2626}
.spec-note{font-size:.74rem;color:var(--t3);margin-top:.7rem;line-height:1.65}
.hstep{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--card-bd)}
.hstep:last-child{border-bottom:0}
.hstep i{font-style:normal;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#E2B25A,#A8791F);color:#1a1205;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.hstep b{display:block;color:var(--t1);font-size:.92rem;margin-bottom:3px}
.hstep p{color:var(--t2);font-size:.84rem;line-height:1.75}
.faq details{border-bottom:1px solid var(--card-bd);padding:13px 2px}
.faq summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--t1);list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:"+";color:#C9973F;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--t2);font-size:.84rem;line-height:1.75;margin-top:8px}
.inc{display:grid;gap:0}
.inc a{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--card-bd);text-decoration:none;color:var(--t1)}
.inc a:hover b{color:#A8791F}
.inc .th{width:64px;height:54px;border-radius:10px;overflow:hidden;background:#0b1220;flex-shrink:0;position:relative}
.inc .th svg{position:absolute;inset:0;width:100%;height:100%}
.inc b{font-size:.9rem;font-weight:800}
.inc span{display:block;font-size:.74rem;color:var(--t3)}
.pd-bar{display:none}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:10px 0}.step:nth-child(3)::before{display:none}
  .pd{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sh{grid-template-columns:1fr;min-height:0}
  .sh-wall{position:absolute;inset:0;min-height:0;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 78%);mask-image:linear-gradient(180deg,#000 0,transparent 78%)}
  .sh-text{padding:1.6rem 1.2rem}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pc-body{padding:10px 10px 12px}.pc-name{font-size:.95rem}.pc-price b{font-size:1.15rem}.pc-specs{font-size:.68rem;gap:3px 8px}
  .cc{grid-template-columns:1fr}
  .cc-art{order:-1}
  .pd-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;gap:10px;align-items:center;padding:10px 14px;background:var(--bg2);border-top:1px solid var(--card-bd);box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  .pd-bar b{font-size:1.15rem;color:var(--t1);font-weight:800;line-height:1.1}
  .pd-bar small{display:block;font-size:.66rem;color:var(--t3);font-weight:600}
  .pd-bar button{margin-left:auto;font-family:inherit;font-weight:800;font-size:.85rem;padding:12px 22px;border-radius:11px;border:0;background:linear-gradient(135deg,#F3CE7A,#C9973F);color:#1a1205;cursor:pointer}
  .sw{padding-bottom:5rem}
}
@media (max-width:380px){.pgrid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step::before{display:none}}
@media (prefers-reduced-motion:reduce){.pc,.cc,.pc-img svg{transition:none}}


/* ===== v3 (30/09 - đợt 4): hero nền 3D full khung, theo giao diện sáng/tối/xám/nền 3D, bố cục gọn hơn ===== */
.sw{--pc-bg:#fff;--pc-bd:rgba(15,23,42,.12);--pc-t1:#0f172a;--pc-t2:#5b6980;--pc-t3:#8a97ad;--pc-line:rgba(15,23,42,.09);
  --pc-stage:radial-gradient(ellipse at 50% 40%,#ffffff,#e6ecf7 75%);--pc-gold:#A8791F;--pc-goldbtn:#A8791F;--pc-price:#8a5f10;--pc-up:#059669;--pc-dn:#dc2626;--pc-shadow:0 1px 3px rgba(15,23,42,.08)}
[data-theme=dark] .sw{--pc-bg:#0d1526;--pc-bd:rgba(120,140,180,.2);--pc-t1:#f1f5f9;--pc-t2:#9aa8c2;--pc-t3:#6b7893;--pc-line:rgba(120,140,180,.16);
  --pc-stage:radial-gradient(ellipse at 50% 38%,rgba(60,80,130,.32),transparent 70%),linear-gradient(180deg,#0d1424,#080d18);--pc-gold:#F3CE7A;--pc-goldbtn:#E2B25A;--pc-price:#F3CE7A;--pc-up:#34d399;--pc-dn:#f87171;--pc-shadow:none}
[data-theme=bg3d] .sw{--pc-bg:rgba(9,14,26,.68);--pc-bd:rgba(160,175,205,.2);--pc-t1:#f1f5f9;--pc-t2:#a3b0c8;--pc-t3:#75839b;--pc-line:rgba(160,175,205,.16);
  --pc-stage:radial-gradient(ellipse at 50% 38%,rgba(80,100,150,.26),transparent 70%),linear-gradient(180deg,rgba(13,20,36,.7),rgba(8,12,24,.7));--pc-gold:#F3CE7A;--pc-goldbtn:#E2B25A;--pc-price:#F3CE7A;--pc-up:#34d399;--pc-dn:#f87171;--pc-shadow:none}
[data-theme=gray] .sw{--pc-gold:#404040;--pc-goldbtn:#404040;--pc-price:#1a1a1a}
.pc,.cc{background:var(--pc-bg);border-color:var(--pc-bd);color:var(--pc-t1);box-shadow:var(--pc-shadow)}
.pc:hover,.cc:hover{border-color:var(--pc-goldbtn);box-shadow:0 12px 28px -16px rgba(15,23,42,.4)}
.pc-img{background:var(--pc-stage)}
.pc-name,.cc h3{color:var(--pc-t1)}
.pc-desc,.cc .cn{color:var(--pc-t2)}
.pc-specs{border-color:var(--pc-line)}
.pc-specs div{color:var(--pc-t3)}
.pc-specs b{color:var(--pc-t1)}
.pc-specs b.up{color:var(--pc-up)}.pc-specs b.dn{color:var(--pc-dn)}
.pc-price b,.cc .cp{color:var(--pc-price)}
.pc-price span,.pc-vnd,.cc .cp small{color:var(--pc-t3)}
.pc-btn{border-color:var(--pc-goldbtn);color:var(--pc-gold)}
.pc-btn:hover{background:var(--pc-goldbtn);color:#1a1205}
.pc-cart{border-color:var(--pc-bd);color:var(--pc-t2)}
.pc-cart:hover{border-color:var(--pc-goldbtn);color:var(--pc-gold)}
.pc-badge{background:var(--pc-bg);color:var(--pc-gold);border-color:var(--pc-goldbtn)}
.pc-badge.r1{background:linear-gradient(135deg,#E2B25A,#C9973F);color:#1a1205}
.cc .cs{color:var(--pc-up)}
.pd-stage{background:var(--pc-stage);border-color:var(--pc-bd);color:var(--pc-t1)}
.pd-th{background:var(--pc-bg);color:var(--pc-t1)}
.pd-th span{background:rgba(0,0,0,.55);color:#fff}
[data-theme=bg3d] .st-bar,[data-theme=bg3d] .st-drawer{background:rgba(9,14,26,.85)}

/* hero: canvas phủ CẢ khung, hoà vào nội dung */
.sh{display:block;position:relative;min-height:0;margin-bottom:.9rem;border-radius:16px;background:linear-gradient(120deg,#060911,#0d1526 60%,#16110a)}
.sh-cv{position:absolute;inset:0;width:100%;height:100%;opacity:.8;display:block}
.sh-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,9,17,.72) 0%,rgba(6,9,17,.5) 48%,rgba(6,9,17,.12) 100%)}
.sh-text{position:relative;padding:1rem 1.3rem 1.05rem;max-width:780px;display:block}
.sh-eyebrow{font-size:.6rem;margin-bottom:.35rem}
.sh h1{font-size:clamp(1.02rem,2.1vw,1.5rem);text-transform:uppercase;letter-spacing:.03em;line-height:1.2;margin-bottom:.45rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.sh h1 span{background:none;-webkit-text-fill-color:#E2B25A;color:#E2B25A}
.sh p{font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.82);max-width:640px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.sh-kinds{margin-top:.55rem;font-size:.68rem;gap:3px 12px}
.sh-ctl{position:absolute;right:10px;bottom:9px;z-index:2;display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sh-ctl button{border:1px solid rgba(255,255,255,.2);background:rgba(8,12,26,.6);backdrop-filter:blur(6px);color:#cbd5e1;font:700 .64rem 'Plus Jakarta Sans',system-ui,sans-serif;padding:5px 9px;border-radius:999px;cursor:pointer;transition:.15s}
.sh-ctl button:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.sh-ctl button.on{background:linear-gradient(135deg,#F3CE7A,#C9973F);color:#1b1406;border-color:transparent}
.sh-ctl .w{display:inline-flex;gap:3px}
.sh-ctl .w button{font-size:.8rem;padding:3px 7px;filter:grayscale(1);opacity:.7}
.sh-ctl .w button.on{filter:none;opacity:1;background:rgba(255,255,255,.2);color:#fff}
[data-theme=bg3d] .sh-cv,[data-theme=bg3d] .sh-ctl{display:none}
[data-theme=bg3d] .sh{background:rgba(6,9,17,.35)}

/* theme "Nền 3D" cho cửa hàng */
[data-theme=bg3d]{--sb-bg:rgba(6,9,18,.72);--bg:#04060d;--bg2:rgba(10,15,28,.66);--bg3:rgba(255,255,255,.06);--bg4:rgba(255,255,255,.12);--bd:rgba(255,255,255,.09);--bd2:rgba(226,178,90,.3);--t1:#F1F5F9;--t2:#a3b0c8;--t3:#75839b;--card-bd:rgba(255,255,255,.1);--sb-item:rgba(255,255,255,.6);--sb-hover:rgba(255,255,255,.08)}
[data-theme=bg3d] body{background:#04060d}
[data-theme=bg3d] .atv-topbar{background:rgba(6,9,18,.6)}
#atvnBg3d{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;opacity:.9}
#atvnBg3d #wall3d{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:none;mask-image:none}
#atvnBg3d .orb{display:none}

/* gọn hơn: chữ nhỏ, khoảng cách hẹp */
.sw{padding:0 .3rem 2rem}
.st-bar{margin:0 0 .7rem;padding:6px 10px;gap:8px;border-radius:12px}
.st-seg button{font-size:.72rem;padding:6px 12px}
.st-bar .hint{font-size:.68rem}
.sec{margin:1.05rem 0 .5rem;gap:8px}
.sec h2{font-size:1rem}
.sec small{font-size:.7rem}
.sec-sub{font-size:.76rem;margin:-.25rem 0 .6rem}
.pgrid{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px}
.pc{border-radius:13px}
.pc-img{aspect-ratio:1/0.86}
.pc-body{gap:5px;padding:9px 11px 11px}
.pc-name{font-size:.92rem}
.pc-desc{font-size:.68rem;min-height:2em;line-height:1.4}
.pc-specs{font-size:.64rem;padding:5px 0;gap:2px 10px}
.pc-price b{font-size:1.15rem}
.pc-price span{font-size:.68rem}
.pc-vnd{font-size:.62rem;margin-top:-3px}
.pc-btn{font-size:.7rem;padding:7px 8px;border-radius:8px}
.pc-cart{width:32px;flex:0 0 32px;border-radius:8px}
.pc-cart svg{width:15px;height:15px}
.pc-badge{font-size:.58rem;padding:3px 8px;top:8px;left:8px}
.cgrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.cc{padding:11px 12px 11px 14px;border-radius:13px}
.cc h3{font-size:.9rem}
.cc .cn{font-size:.66rem;margin:2px 0 5px}
.cc .cp{font-size:1.15rem}
.cc .cs{font-size:.64rem}
.steps{margin:.5rem 0 .2rem}
.step{padding:.25rem .8rem;gap:10px}
.step svg{width:34px;height:34px}
.step b{font-size:.8rem}.step span{font-size:.68rem}
.kinds{gap:12px 22px;margin-top:.2rem}
.kind{gap:10px}.kind svg{width:32px;height:32px}
.kind b{font-size:.8rem}.kind span{font-size:.72rem;line-height:1.55}
.cmpt{font-size:.72rem}.cmpt th,.cmpt td{padding:7px 10px}
.st-warn{font-size:.68rem;margin-top:1rem}
.crumb{font-size:.7rem;margin:0 0 .6rem}
.pd{gap:20px}
.pd h1{font-size:clamp(1.2rem,2.4vw,1.55rem)}
.pd-tags span{font-size:.6rem;padding:3px 8px}
.pd-lead{font-size:.8rem;line-height:1.65;margin-bottom:.7rem}
.pd-buy{padding:.8rem 0}
.pd-price b{font-size:1.55rem}
.pd-perks{gap:6px;margin-top:.7rem}.pd-perks li{font-size:.75rem}.pd-perks svg{width:17px;height:17px}
.pd-cta button{font-size:.82rem;padding:10px 8px}
.pd-sec{margin-top:1.4rem}
.pd-sec h2{font-size:1rem;margin-bottom:.6rem}
.spec{font-size:.78rem}.spec td{padding:7px 4px}
.spec-note{font-size:.68rem}
.hstep{padding:9px 0;gap:10px;grid-template-columns:32px 1fr}.hstep i{width:28px;height:28px;font-size:.8rem}.hstep b{font-size:.84rem}.hstep p{font-size:.76rem;line-height:1.6}
.faq summary{font-size:.82rem}.faq p{font-size:.76rem}.faq details{padding:9px 2px}
.pd-th{width:70px;height:54px}
@media (max-width:760px){
  .sh-text{padding:.85rem 1rem}.sh h1{font-size:1.02rem}
  .sh-ctl{position:relative;right:auto;bottom:auto;padding:0 1rem .7rem;justify-content:flex-start}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .cc{grid-template-columns:1fr}
}



#bgSwitch{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;gap:4px;padding:5px;border-radius:14px;
  background:rgba(8,12,26,.78);backdrop-filter:blur(12px);border:1px solid rgba(201,151,63,.28);box-shadow:0 12px 30px rgba(0,0,0,.5)}
#bgSwitch button{border:0;background:transparent;color:#94a3b8;font:600 12px 'Plus Jakarta Sans',system-ui,sans-serif;padding:8px 12px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}
#bgSwitch button:hover{color:#fff;background:rgba(255,255,255,.06)}
#bgSwitch button.on{color:#1b1406;background:linear-gradient(135deg,#F3CE7A,#C9973F)}
@media (max-width:560px){#bgSwitch{right:10px;bottom:10px}#bgSwitch button{padding:8px 10px}#bgSwitch button span{display:none}}

#bgWeather{position:fixed;right:16px;bottom:68px;z-index:60;display:none;gap:4px;padding:5px;border-radius:14px;
  background:rgba(8,12,26,.78);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.5)}
body.bg-garden #bgWeather{display:flex}
#bgWeather button{border:0;background:transparent;font-size:16px;padding:6px 10px;border-radius:10px;cursor:pointer;filter:grayscale(1);opacity:.65;transition:.15s}
#bgWeather button:hover{opacity:1;background:rgba(255,255,255,.06)}
#bgWeather button.on{opacity:1;background:rgba(255,255,255,.14)}
@media (max-width:560px){#bgWeather{right:10px;bottom:62px}}

#bgScene{position:fixed;right:16px;bottom:68px;z-index:60;display:none}
body.bg-space #bgScene{display:block}
#bgScene button{border:1px solid rgba(255,255,255,.16);background:rgba(8,12,26,.8);backdrop-filter:blur(12px);color:#e5e7eb;font:600 12px 'Plus Jakarta Sans',system-ui,sans-serif;padding:9px 14px;border-radius:14px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.5);max-width:calc(100vw - 32px)}
#bgScene button:hover{border-color:rgba(255,255,255,.4)}
#bgScene b{margin-left:6px;color:#94a3b8}
@media (max-width:560px){#bgScene{right:10px;bottom:62px}#bgScene button{font-size:11.5px;padding:8px 11px}}



/* Nền 3D: các nút chọn nền / thời tiết / cảnh / chất lượng gom vào một nút bánh răng, bấm mới mở (30/09/2026) */
#bgGear{position:fixed;right:14px;bottom:14px;z-index:900;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(8,12,26,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#cbd5e1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:.72;transition:opacity .2s,transform .3s,border-color .2s;box-shadow:0 8px 22px rgba(0,0,0,.4);padding:0}
#bgGear:hover,#bgGear.on{opacity:1;border-color:rgba(226,178,90,.7)}
#bgGear.on{transform:rotate(60deg)}
#bgGear svg{width:19px;height:19px}
#bgPanel{position:fixed;right:14px;bottom:60px;z-index:901;display:none;flex-direction:column;gap:8px;padding:10px;border-radius:16px;min-width:230px;max-width:calc(100vw - 28px);
  background:rgba(8,12,26,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(201,151,63,.32);box-shadow:0 18px 50px rgba(0,0,0,.6)}
#bgPanel.open{display:flex}
#bgPanel::before{content:"Nền 3D";font:800 11px 'Plus Jakarta Sans',Manrope,Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;padding:0 4px 2px}
#bgPanel #bgSwitch,#bgPanel #bgWeather,#bgPanel #bgScene{position:static !important;right:auto !important;bottom:auto !important;z-index:auto !important;
  box-shadow:none !important;background:transparent !important;border:0 !important;padding:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  flex-wrap:wrap;gap:4px}
#bgPanel #bgSwitch button span{display:inline !important}
#bgPanel #bgScene button{width:100%;max-width:none}
@media (max-width:560px){#bgGear{right:10px;bottom:10px}#bgPanel{right:10px;bottom:56px}}

.btn-login-nav{background:linear-gradient(135deg,#F3CE7A,#C9973F) !important;color:#1a1205 !important;box-shadow:none !important;font-weight:800}

/* ===== v4 (30/09 - đợt 5): hero theo giao diện; lưới bot lấp đầy hàng ===== */
.sh h1 .gold{color:#E2B25A;font-weight:inherit;-webkit-text-fill-color:#E2B25A}
[data-theme=light] .sh,[data-theme=gray] .sh{background:linear-gradient(120deg,#fbfcfe,#eaf0fa 60%,#f7f0e1);border:1px solid rgba(15,23,42,.12);color:#0f172a}
[data-theme=light] .sh-cv,[data-theme=gray] .sh-cv{filter:invert(1);opacity:.5}
[data-theme=light] .sh-scrim,[data-theme=gray] .sh-scrim{background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.08) 100%)}
[data-theme=light] .sh h1,[data-theme=gray] .sh h1{color:#0f172a;text-shadow:none}
[data-theme=light] .sh h1 .gold{color:#A8791F;-webkit-text-fill-color:#A8791F}
[data-theme=gray] .sh h1 .gold{color:#404040;-webkit-text-fill-color:#404040}
[data-theme=light] .sh p,[data-theme=gray] .sh p{color:#475569;text-shadow:none}
[data-theme=light] .sh-eyebrow{color:#A8791F}
[data-theme=gray] .sh-eyebrow{color:#525252}
[data-theme=light] .sh-kinds,[data-theme=gray] .sh-kinds{color:#334155}
[data-theme=light] .sh-kinds span::before{background:#C9973F}
[data-theme=light] .sh-kinds span.soon,[data-theme=gray] .sh-kinds span.soon{color:#94a3b8}
[data-theme=light] .sh-kinds span.soon::before,[data-theme=gray] .sh-kinds span.soon::before{background:#cbd5e1}
[data-theme=light] .sh-ctl button,[data-theme=gray] .sh-ctl button{background:rgba(255,255,255,.85);color:#475569;border-color:rgba(15,23,42,.15)}
[data-theme=light] .sh-ctl button:hover,[data-theme=gray] .sh-ctl button:hover{color:#0f172a;border-color:rgba(15,23,42,.35)}
[data-theme=light] .sh-ctl button.on{background:linear-gradient(135deg,#F3CE7A,#C9973F);color:#1b1406}
[data-theme=gray] .sh-ctl button.on{background:#404040;color:#fff}
[data-theme=light] .sh-ctl .w button.on,[data-theme=gray] .sh-ctl .w button.on{background:rgba(15,23,42,.12);color:#0f172a}

/* ===== v5 (30/09 - đợt 6): banner 3D cuối trang, phần cuối co lại ===== */
.sh-foot{margin:1.1rem 0 .5rem}
.sh-h{font-size:clamp(.95rem,1.8vw,1.25rem);text-transform:uppercase;letter-spacing:.03em;line-height:1.25;font-weight:800;margin:0 0 .4rem;color:inherit;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.sh-h .gold{color:#E2B25A;font-weight:inherit;-webkit-text-fill-color:#E2B25A}
[data-theme=light] .sh-h,[data-theme=gray] .sh-h{color:#0f172a;text-shadow:none}
[data-theme=light] .sh-h .gold{color:#A8791F;-webkit-text-fill-color:#A8791F}
[data-theme=gray] .sh-h .gold{color:#404040;-webkit-text-fill-color:#404040}
.sh-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:.7rem}
.sh-btns a{font-family:inherit;font-size:.72rem;font-weight:800;padding:8px 14px;border-radius:9px;text-decoration:none;border:1px solid rgba(255,255,255,.3);color:#e5ebf7;background:rgba(8,12,26,.45)}
.sh-btns a.main{background:linear-gradient(135deg,#F3CE7A,#C9973F);color:#1b1406;border-color:transparent}
.sh-btns a:hover{border-color:#E2B25A}
[data-theme=light] .sh-btns a,[data-theme=gray] .sh-btns a{color:#334155;border-color:rgba(15,23,42,.2);background:rgba(255,255,255,.7)}
[data-theme=light] .sh-btns a.main{color:#1b1406;background:linear-gradient(135deg,#F3CE7A,#C9973F)}
[data-theme=gray] .sh-btns a.main{background:#404040;color:#fff}
[data-theme=bg3d] .sh-foot .sh-ctl{display:none}
/* bảng thuê/mua và phần chân trang gọn lại */
.cmpt{table-layout:fixed;width:100%;max-width:100%}
.cmpt th:first-child,.cmpt td:first-child{width:150px;white-space:normal}
.cmpt td{line-height:1.5}
.kinds{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.atv-content>hr{max-width:1200px;margin:.8rem auto !important}
.atv-content>.interact-bar{max-width:1200px;margin:.6rem auto 0;padding:.55rem 1rem}
.atv-content>.interact-bar .btn-like{padding:5px 14px;font-size:.8rem}
.atv-content>.interact-bar .btn-share{width:30px;height:30px;font-size:.85rem}
.atv-content>footer{max-width:1200px;margin:.8rem auto 0;padding:.8rem 1rem;font-size:.8rem}
.atv-content>footer .footer-links a,.atv-content>footer .footer-copy{font-size:.72rem}
.atv-content>footer .footer-logo{font-size:.85rem}
.st-warn{margin:.8rem 0 0}

/* ===== v6: thẻ combo cùng khuôn với thẻ bot, ảnh cao cố định để mọi thẻ đều nhau ===== */
.pc-img{aspect-ratio:auto;height:176px}
.pc-img svg{padding:6px 0}
.pc-combo .pc-desc{font-weight:600}
.steps5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.steps5{grid-template-columns:repeat(3,1fr)}.steps5 .step:nth-child(4)::before{display:none}}
@media (max-width:760px){.steps5{grid-template-columns:repeat(2,1fr)}.steps5 .step:nth-child(odd)::before{display:none}.steps5 .step:nth-child(4)::before{display:block}.pc-img{height:150px}}
@media (max-width:380px){.steps5{grid-template-columns:1fr}}
.pc-desc{min-height:2.8em}

/* ===== v7: khu vực ảnh minh hoạ — biểu đồ và bảng chỉ số ===== */
.pd-stage{aspect-ratio:1/0.9;min-height:330px}
.pd-stage .ov{position:absolute;inset:0;padding:14px 16px;overflow:auto;color:var(--pc-t1)}
.kp{font-family:Inter,system-ui,sans-serif;color:var(--pc-t1)}
.kp-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:12px;border-bottom:1px solid var(--pc-line)}
.kp-k{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.kp-k>b{font-size:1.7rem;font-weight:800;line-height:1.15;color:var(--pc-t1)}
.kp-k>b.up{color:#10b981}.kp-k>b.dn{color:#ef4444}
.kp-k i{font-style:normal;font-size:.7rem;font-weight:700;color:var(--pc-t2);letter-spacing:.03em}
.kp-k small{font-size:.62rem;color:var(--pc-t3);line-height:1.35}
.kp-ring{height:86px;color:var(--pc-t1)}
.kp-bar{width:80%;height:6px;border-radius:99px;background:var(--pc-line);overflow:hidden;margin:3px 0}
.kp-bar u{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#10b981);text-decoration:none}
.kp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:6px}
.kp-r{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:7px 0;border-bottom:1px solid var(--pc-line);font-size:.72rem}
.kp-r span{color:var(--pc-t2)}
.kp-r b{color:var(--pc-t1);font-weight:800;font-size:.78rem;text-align:right}
.kp-r em{font-style:normal;font-weight:500;color:var(--pc-t3);font-size:.62rem;margin-left:3px}
.kp-r i{grid-column:1/-1;height:4px;border-radius:99px;background:var(--pc-line);overflow:hidden}
.kp-r i u{display:block;height:100%;border-radius:99px;text-decoration:none}
.kp-note{font-size:.6rem;color:var(--pc-t3);margin-top:8px;line-height:1.5}
@media (max-width:560px){.kp-grid{grid-template-columns:1fr}.kp-k>b{font-size:1.3rem}.pd-stage{min-height:360px}}
.pd-stage .ov svg{position:static;inset:auto;width:86px;height:86px;display:block;margin:0 auto}
.pd-stage .ov{display:flex;flex-direction:column;justify-content:center}
.kp-top{padding-bottom:16px}
.kp-r{padding:10px 0;font-size:.78rem}
.kp-r b{font-size:.86rem}
.kp-note{margin-top:12px}

/* ===== v8: nền 3D phủ cả màn hình ở mọi giao diện; hero/banner chỉ là khung trong suốt ===== */
#atvnBg3d{z-index:5;opacity:.6}
html[data-theme=light] #atvnBg3d,html[data-theme=gray] #atvnBg3d{filter:invert(1);mix-blend-mode:multiply;opacity:.32}
.sh-cv,.sh-ctl{display:none !important}
.sh,.sh-foot{background:linear-gradient(120deg,rgba(6,9,17,.5),rgba(13,21,38,.38) 60%,rgba(22,17,10,.34))}
[data-theme=light] .sh,[data-theme=gray] .sh{background:linear-gradient(120deg,rgba(255,255,255,.62),rgba(234,240,250,.42) 60%,rgba(247,240,225,.4))}
.sh-scrim{background:linear-gradient(90deg,rgba(6,9,17,.35) 0%,rgba(6,9,17,.15) 55%,transparent 100%)}
[data-theme=light] .sh-scrim,[data-theme=gray] .sh-scrim{background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 55%,transparent 100%)}
/* 2 nút mua bằng nhau: cùng độ rộng, cùng chiều cao */
.pd-cta{grid-template-columns:1fr 1fr;align-items:stretch;gap:10px}
.pd-cta button{box-sizing:border-box;height:44px;padding:0 10px;border:1.5px solid transparent;font-size:.86rem;line-height:1}
.pd-cta .add{border-color:#C9973F}