:root{
  --bg:#030409;--panel:#0a0e17;--panel2:#101521;--red:#ff132d;--red2:#ff4054;--darkred:#61000c;--text:#fff;--muted:#b8c0d6;--line:rgba(255,19,45,.48);--line2:rgba(255,255,255,.08);--green:#31ff90;--yellow:#ffd166;
}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif;scroll-behavior:smooth}body{min-height:100vh;overflow-x:hidden}.site-bg{position:fixed;inset:0;z-index:-3;background:#020308}.site-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,3,8,.7),rgba(2,3,8,.45),rgba(2,3,8,.86)),linear-gradient(180deg,rgba(2,3,8,.25),#020308 88%),var(--site-bg-url,url(assets/home/video-placeholder-bg.jpg)) center top/cover no-repeat;opacity:.9}.site-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 18%,rgba(255,19,45,.34),transparent 22%),radial-gradient(circle at 75% 5%,rgba(255,19,45,.26),transparent 18%),linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);background-size:auto,auto,52px 52px,52px 52px;opacity:.75}.site-header{height:78px;display:grid;grid-template-columns:320px 1fr 270px;align-items:center;padding:0 4vw;border-bottom:1px solid rgba(255,19,45,.5);background:rgba(4,6,12,.78);backdrop-filter:blur(16px);position:sticky;top:0;z-index:50;box-shadow:0 0 32px rgba(255,19,45,.12),0 16px 30px rgba(0,0,0,.35)}.site-header:before,.site-header:after{content:"";position:absolute;bottom:-1px;height:34px;border-bottom:1px solid rgba(255,19,45,.5);pointer-events:none}.site-header:before{left:0;width:29%;clip-path:polygon(0 0,86% 0,100% 100%,0 100%);background:linear-gradient(90deg,rgba(255,19,45,.14),transparent)}.site-header:after{right:0;width:29%;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);background:linear-gradient(270deg,rgba(255,19,45,.14),transparent)}.brand{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;font-size:24px;font-weight:1000;letter-spacing:.2px}.brand img{width:70px;height:46px;object-fit:contain;filter:drop-shadow(0 0 17px rgba(255,19,45,.7))}.brand b{color:var(--red);text-shadow:0 0 18px rgba(255,19,45,.75)}.nav{display:flex;justify-content:center;gap:38px;align-items:center}.nav a{color:#e5e8f4;text-decoration:none;font-size:15px;font-weight:800;position:relative;padding:28px 0}.nav a:hover,.nav a.active{color:var(--red);text-shadow:0 0 18px rgba(255,19,45,.7)}.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:3px;background:var(--red);box-shadow:0 0 18px rgba(255,19,45,.9)}.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px}.icon-btn,.account-btn{height:46px;color:#fff;text-decoration:none;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:rgba(11,14,23,.72);font-weight:900;position:relative;box-shadow:inset 0 0 24px rgba(255,19,45,.06)}.icon-btn{width:58px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.account-btn{padding:0 28px;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}#cart-count{position:absolute;right:4px;top:2px;display:grid;place-items:center;min-width:18px;height:18px;background:var(--red);border-radius:50%;font-size:10px}.cart-icon{font-size:22px}.hero-v8{min-height:calc(100vh - 78px);display:grid;grid-template-columns:minmax(420px,.86fr) minmax(520px,1.14fr);gap:58px;align-items:center;padding:68px 4vw 44px}.hero-left{position:relative;z-index:1}.hero-emblem{width:250px;max-width:38vw;display:block;margin:0 0 -24px 122px;opacity:.86;filter:drop-shadow(0 0 40px rgba(255,19,45,.85))}.eyebrow{color:var(--red2);text-transform:uppercase;letter-spacing:4px;font-size:13px;font-weight:1000;margin:0 0 14px;text-shadow:0 0 15px rgba(255,19,45,.65)}.hero-left h1,.page-head h1{font-size:clamp(54px,6.6vw,96px);line-height:.88;margin:0 0 22px;letter-spacing:-3px;text-shadow:0 0 34px rgba(255,19,45,.35)}.hero-left h1 span{display:inline-block;color:var(--red2);text-shadow:0 0 26px rgba(255,19,45,.65)}.lead,.page-head p{color:var(--muted);font-size:18px;line-height:1.65;max-width:720px;margin:0}.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:1px solid var(--line);background:rgba(9,13,22,.74);color:#fff;text-decoration:none;font-weight:1000;cursor:pointer;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:.16s}.btn.primary{background:linear-gradient(90deg,#a60314,#ff132d);box-shadow:0 0 28px rgba(255,19,45,.35)}.btn.ghost{background:rgba(6,8,14,.72)}.btn.danger{background:#310912}.btn.full{width:100%}.btn:hover{filter:brightness(1.16);transform:translateY(-1px)}.mini-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;max-width:760px}.mini-benefits article{display:flex;gap:12px;align-items:center}.mini-benefits b{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,19,45,.1);border-radius:50%;box-shadow:0 0 20px rgba(255,19,45,.18)}.mini-benefits span{font-weight:900;color:#eef1fb}.mini-benefits small{display:block;color:var(--muted);font-weight:500;margin-top:4px}.cyber-frame,.cyber-panel,.panel-box{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,20,31,.84),rgba(5,8,15,.9));box-shadow:inset 0 0 48px rgba(255,19,45,.06),0 0 38px rgba(255,19,45,.08)}.cyber-frame:before,.cyber-panel:before,.panel-box:before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(135deg,var(--red) 0 18px,transparent 19px) top left/90px 90px no-repeat,linear-gradient(315deg,var(--red) 0 18px,transparent 19px) bottom right/90px 90px no-repeat;opacity:.65}.cyber-frame:after,.cyber-panel:after,.panel-box:after{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(255,19,45,.26);clip-path:polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%,0 30px)}.video-shell{padding:24px 24px 72px;clip-path:polygon(7% 0,100% 0,100% 82%,92% 100%,0 100%,0 18%)}.video-preview{position:relative;z-index:2;display:grid;place-items:center;align-content:center;gap:14px;min-height:420px;aspect-ratio:16/9;text-decoration:none;color:#fff;overflow:hidden;background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.62)),url(assets/home/video-placeholder-bg.jpg) center/cover no-repeat}.video-preview:before{content:"";position:absolute;inset:0;border:1px solid rgba(255,19,45,.6);box-shadow:inset 0 0 50px rgba(255,19,45,.14)}.video-preview:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(255,19,45,.06) 10px);pointer-events:none}.video-play{position:relative;z-index:3;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(90deg,#a30313,#ff132d);font-size:38px;padding-left:7px;box-shadow:0 0 42px rgba(255,19,45,.58)}.video-preview b{position:relative;z-index:3;font-size:28px;text-shadow:0 0 22px rgba(255,19,45,.7)}.video-preview small{position:relative;z-index:3;color:var(--muted)}.video-controls{position:absolute;left:50px;right:50px;bottom:22px;height:38px;display:grid;grid-template-columns:26px 90px 1fr 28px 28px 28px;gap:18px;align-items:center;color:#dfe4f7;z-index:4}.video-controls i{height:5px;background:linear-gradient(90deg,var(--red) 0 18%,rgba(255,255,255,.13) 18% 100%);border-radius:10px}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 4vw 54px}.feature-cards article{position:relative;min-height:160px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,20,31,.78),rgba(5,8,15,.9));padding:28px 26px 24px 178px;box-shadow:0 0 32px rgba(255,19,45,.07)}.feature-cards article:before{content:"";position:absolute;inset:0;clip-path:polygon(10% 0,100% 0,100% 87%,97% 100%,0 100%,0 13%);border:1px solid rgba(255,19,45,.34);pointer-events:none}.feature-cards article>b{position:absolute;left:32px;top:50%;transform:translateY(-50%);width:78px;height:78px;display:grid;place-items:center;border:1px solid rgba(255,19,45,.45);background:rgba(255,19,45,.09);font-size:28px;color:var(--red);font-weight:1000;text-shadow:0 0 22px rgba(255,19,45,.65);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}.feature-icon{position:absolute;left:105px;top:50%;transform:translateY(-50%);width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:rgba(255,255,255,.05);font-size:26px}.feature-cards h3{margin:0 0 12px;font-size:18px;line-height:1.35}.feature-cards p{margin:0;color:var(--muted);line-height:1.5}.trust-strip{margin:14px 4vw 70px;padding:26px 48px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border:1px solid var(--line);background:rgba(8,11,19,.76);clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);box-shadow:0 0 44px rgba(255,19,45,.08)}.trust-strip article{display:flex;flex-direction:column;align-items:center;text-align:center;border-right:1px solid rgba(255,19,45,.22)}.trust-strip article:last-child{border-right:0}.trust-strip b{font-size:30px;color:var(--red2);text-shadow:0 0 20px rgba(255,19,45,.7)}.trust-strip span{color:var(--muted);margin-top:6px}.section-head,.page-head{padding:58px 4vw 28px}.section-head h2{font-size:42px;margin:0;text-shadow:0 0 22px rgba(255,19,45,.32)}.page-head{background:linear-gradient(180deg,rgba(3,4,9,.64),rgba(3,4,9,.18));border-bottom:1px solid rgba(255,19,45,.22)}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:0 4vw 80px}.product-card{overflow:hidden}.product-image-wrap,.detail-image-wrap{position:relative;overflow:hidden;background:#05070d}.product-card img{width:100%;height:280px;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.06);transition:.25s}.product-card:hover img{transform:scale(1.035)}.product-card.is-out img{filter:grayscale(.55) brightness(.78)}.stock-badge{position:absolute;right:16px;top:16px;z-index:2;padding:8px 12px;background:#5b0b12;color:#fff;border:1px solid rgba(255,19,45,.7);font-weight:1000;letter-spacing:1px}.stock-badge.ok{background:#062718;border-color:rgba(49,255,144,.6);color:var(--green)}.stock-badge.detail{left:18px;right:auto}.product-card .inner{padding:26px}.product-card h2,.checkout-card h2,.auth-card h2{margin:0 0 12px}.product-card p,.hint{color:var(--muted);line-height:1.55}.price{color:var(--green);font-weight:1000;text-shadow:0 0 12px rgba(49,255,144,.2)}.is-out .price{color:var(--red2)}.detail-card{margin:48px 4vw 84px;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;padding:26px}.detail-card img{width:100%;height:100%;min-height:480px;object-fit:cover;border:1px solid var(--line2)}.detail-card h1{font-size:52px;margin:0 0 16px}.detail-info{position:relative;z-index:2}.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:18px}.plan{min-height:110px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);cursor:pointer}.plan:hover,.plan.selected{border-color:var(--green);box-shadow:0 0 18px rgba(49,255,144,.2)}.plan b{font-size:25px}.plan .price{font-size:22px;margin-top:8px}.buy-panel{margin-top:18px;display:grid;grid-template-columns:360px;gap:14px}.qty-box{width:100%;display:grid;grid-template-columns:1fr 48px 80px 48px;gap:8px;align-items:center}.qty-box span{font-weight:1000;color:var(--muted)}.qty-btn{width:48px;height:48px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-size:22px;font-weight:1000;cursor:pointer}#detail-qty{height:48px;text-align:center;margin:0}.add-cart-btn{width:360px;min-height:66px;font-size:17px}.notice-box{margin-top:20px;padding:18px;border:1px solid rgba(255,19,45,.38);background:rgba(255,19,45,.08);color:var(--muted);line-height:1.6}.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:24px;padding:40px 4vw 80px}.cart-items{display:grid;gap:16px}.cart-item{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px}.cart-product-main{display:flex;align-items:center;gap:16px}.cart-thumb{width:130px;height:74px;object-fit:cover;border:1px solid rgba(255,19,45,.32)}.cart-price-actions{display:flex;align-items:center;gap:14px;white-space:nowrap}.cart-qty{display:flex;align-items:center;gap:8px}.cart-qty span{min-width:32px;text-align:center;font-weight:1000;color:var(--green)}.checkout-card,.auth-card{padding:26px}.total-row{display:flex;justify-content:space-between;margin:22px 0;font-size:20px}.single-auth{width:min(640px,90vw);margin:44px auto 88px}.profile-layout{width:min(980px,90vw);margin:44px auto 88px}.auth-links{display:flex;justify-content:space-between;gap:14px;margin:0 0 16px}.auth-links.center{justify-content:center;margin-top:16px}.auth-links a{color:var(--red2);text-decoration:none;font-weight:1000}.form-result{color:var(--green);min-height:22px}input{width:100%;height:52px;border:1px solid rgba(255,255,255,.13);background:#05070d;color:#fff;padding:0 15px;margin-bottom:13px;border-radius:0}input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(255,19,45,.12)}.profile-info{color:var(--muted)}.license-list{display:grid;gap:10px}.license-row{display:flex;justify-content:space-between;gap:10px;padding:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.license-row .active{color:var(--green)}.license-row .expired{color:var(--red2)}.placeholder-section{padding:24px 4vw 90px}.panel-box{padding:26px}.footer{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;padding:28px 4vw;border-top:1px solid rgba(255,19,45,.3);background:rgba(3,4,9,.82);color:var(--muted)}.footer b{color:#fff}
@media(max-width:1280px){.site-header{grid-template-columns:280px 1fr 240px}.hero-v8{grid-template-columns:1fr;gap:40px}.hero-right{max-width:900px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-cards{grid-template-columns:1fr}.feature-cards article{padding-left:178px}.mini-benefits{grid-template-columns:1fr}}
@media(max-width:900px){.site-header{height:auto;grid-template-columns:1fr;padding:16px 5vw;gap:14px}.nav{justify-content:flex-start;gap:18px;flex-wrap:wrap}.header-actions{justify-content:flex-start}.hero-v8{grid-template-columns:1fr;min-height:auto;padding:44px 5vw}.hero-emblem{margin-left:0}.hero-left h1{font-size:52px}.video-shell{padding:16px 16px 64px}.video-preview{min-height:260px}.feature-cards,.product-grid,.cart-layout,.detail-card,.trust-strip{grid-template-columns:1fr}.trust-strip{clip-path:none}.trust-strip article{border-right:0;border-bottom:1px solid rgba(255,19,45,.18);padding-bottom:12px}.cart-item,.cart-price-actions{align-items:flex-start;flex-direction:column}.buy-panel,.add-cart-btn{width:100%;grid-template-columns:1fr}.qty-box{grid-template-columns:1fr 48px 80px 48px}.section-head,.page-head,.product-grid,.cart-layout,.placeholder-section,.feature-cards{padding-left:5vw;padding-right:5vw}}

/* ===== V9 overrides ===== */
.site-bg:before{
  background:
    linear-gradient(90deg,rgba(3,4,9,.96),rgba(3,4,9,.82),rgba(3,4,9,.96)),
    url(assets/brand/background.png) center center/min(58vw,880px) auto no-repeat,
    radial-gradient(circle at 50% 36%,rgba(255,19,45,.2),transparent 34%),
    #030409 !important;
  opacity:.95 !important;
}
.site-bg:after{opacity:.45}
.hero-v8{padding-top:70px}
.hero-actions .btn.ghost{display:none!important}
.trust-strip{display:none!important}
.video-shell.video-rectangle{
  position:relative;
  width:100%;
  padding:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(15,20,31,.82),rgba(5,8,15,.92));
  box-shadow:inset 0 0 48px rgba(255,19,45,.06),0 0 38px rgba(255,19,45,.08);
  clip-path:none!important;
  overflow:hidden;
}
.video-shell.video-rectangle:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,19,45,.42);
  pointer-events:none;
  z-index:2;
}
.video-shell.video-rectangle:after{
  content:"";
  position:absolute;
  inset:18px;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(255,19,45,.035) 10px);
  pointer-events:none;
  z-index:3;
}
.video-embed{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  min-height:430px;
  border:0;
  background:#05070d;
}
.video-frame-overlay{display:none!important}
.video-controls,.video-preview{display:none!important}
.hero-right .cyber-frame:before,.hero-right .cyber-frame:after{display:none!important}
@media(max-width:900px){
  .site-bg:before{background-size:92vw auto,auto,auto!important}
  .video-embed{min-height:260px}
}


/* ===== V10 overrides ===== */

/* Brand background under all content */
.site-bg{
  background:#030409 !important;
}
.site-bg:before{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,19,45,.22),transparent 38%),
    linear-gradient(90deg,rgba(3,4,9,.96),rgba(3,4,9,.78),rgba(3,4,9,.96)),
    url("assets/brand/background.png") center 46vh / min(72vw,1120px) auto no-repeat !important;
  opacity:1 !important;
}
.site-bg:after{
  background:
    radial-gradient(circle at 20% 18%,rgba(255,19,45,.28),transparent 24%),
    radial-gradient(circle at 80% 8%,rgba(255,19,45,.18),transparent 22%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) !important;
  background-size:auto,auto,52px 52px,52px 52px !important;
  opacity:.42 !important;
}

/* Make clickable buttons red */
.icon-btn,
.account-btn,
.btn.ghost,
.btn.primary,
.product-card.is-out .btn{
  background:linear-gradient(90deg,#a60314,#ff132d) !important;
  color:#fff !important;
  border-color:rgba(255,19,45,.82) !important;
  box-shadow:0 0 24px rgba(255,19,45,.28), inset 0 0 20px rgba(255,255,255,.035) !important;
}
.icon-btn:hover,.account-btn:hover,.btn:hover{
  filter:brightness(1.18);
}

/* Common panel frame: same visual language as Sign In */
.cyber-frame,
.cyber-panel,
.panel-box,
.checkout-card,
.auth-card,
.cart-item,
.product-card,
.detail-card,
.feature-cards article{
  clip-path:none !important;
  border:1px solid rgba(255,19,45,.52) !important;
  background:linear-gradient(180deg,rgba(15,20,31,.86),rgba(5,8,15,.94)) !important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.06),0 0 38px rgba(255,19,45,.08) !important;
}
.cyber-frame:before,
.cyber-panel:before,
.panel-box:before,
.checkout-card:before,
.auth-card:before,
.cart-item:before,
.product-card:before,
.detail-card:before,
.feature-cards article:before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg,var(--red) 0 20px,transparent 21px) top left/100px 100px no-repeat,
    linear-gradient(315deg,var(--red) 0 20px,transparent 21px) bottom right/100px 100px no-repeat !important;
  opacity:.78 !important;
  border:0 !important;
}
.cyber-frame:after,
.cyber-panel:after,
.panel-box:after,
.checkout-card:after,
.auth-card:after,
.cart-item:after,
.product-card:after,
.detail-card:after,
.feature-cards article:after{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  pointer-events:none !important;
  border:1px solid rgba(255,19,45,.25) !important;
  clip-path:none !important;
  background:none !important;
}

/* Video: rectangular and same panel frame */
.hero-right{
  position:relative;
  z-index:1;
}
.video-shell.video-inline-card{
  position:relative;
  padding:24px 24px 70px !important;
  border:1px solid rgba(255,19,45,.52);
  background:linear-gradient(180deg,rgba(15,20,31,.86),rgba(5,8,15,.94));
  box-shadow:inset 0 0 48px rgba(255,19,45,.06),0 0 38px rgba(255,19,45,.08);
  clip-path:none !important;
  cursor:pointer;
  overflow:hidden;
}
.video-shell.video-inline-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(135deg,var(--red) 0 20px,transparent 21px) top left/110px 110px no-repeat,
    linear-gradient(315deg,var(--red) 0 20px,transparent 21px) bottom right/110px 110px no-repeat;
  pointer-events:none;
  opacity:.8;
}
.video-shell.video-inline-card:after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,19,45,.32);
  pointer-events:none;
}
.video-preview-fixed{
  position:relative;
  z-index:2;
  aspect-ratio:16/9;
  min-height:420px;
  overflow:hidden;
  border:1px solid rgba(255,19,45,.5);
  background:#05070d;
}
.video-preview-fixed img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.video-dark{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.62));
}
.video-preview-fixed:after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(255,19,45,.055) 10px);
  pointer-events:none;
}
.video-play{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  width:86px;
  height:86px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(90deg,#a30313,#ff132d);
  box-shadow:0 0 44px rgba(255,19,45,.55);
  font-size:36px;
  padding-left:6px;
  z-index:3;
}
.video-title{
  position:absolute;
  left:24px;
  right:24px;
  bottom:58px;
  z-index:3;
  text-align:center;
}
.video-title b{
  display:block;
  font-size:28px;
  text-shadow:0 0 20px rgba(255,19,45,.72);
}
.video-title span{
  display:block;
  color:var(--muted);
  margin-top:8px;
}
.video-controls-fake{
  position:absolute;
  left:48px;
  right:48px;
  bottom:22px;
  z-index:4;
  height:36px;
  display:grid;
  grid-template-columns:26px 92px 1fr 28px 28px 28px;
  gap:18px;
  align-items:center;
  color:#dfe4f7;
}
.video-controls-fake i{
  height:5px;
  border-radius:10px;
  background:linear-gradient(90deg,var(--red) 0 18%,rgba(255,255,255,.16) 18% 100%);
}
.video-embed,
.video-frame-overlay{
  display:none !important;
}

/* Video modal stays on same website */
.video-modal[hidden]{display:none!important}
.video-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:5vw;
}
.video-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
}
.video-modal-panel{
  position:relative;
  width:min(960px,92vw);
  aspect-ratio:16/9;
  border:1px solid rgba(255,19,45,.7);
  background:#05070d;
  box-shadow:0 0 60px rgba(255,19,45,.25);
}
.video-modal-panel iframe{
  width:100%;
  height:100%;
  border:0;
  background:#05070d;
}
.video-modal-close{
  position:absolute;
  right:-18px;
  top:-18px;
  z-index:2;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,19,45,.75);
  background:linear-gradient(90deg,#a60314,#ff132d);
  color:#fff;
  font-size:28px;
  font-weight:900;
  cursor:pointer;
}
body.modal-open{overflow:hidden}

/* Feature cards: circular number, no extra icon, centered content */
.feature-cards article{
  min-height:156px !important;
  padding:28px 28px 24px 124px !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.feature-cards article>b{
  left:34px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:66px !important;
  height:66px !important;
  border-radius:50% !important;
  clip-path:none !important;
  background:rgba(255,19,45,.14) !important;
  border:1px solid rgba(255,19,45,.6) !important;
}
.feature-icon{display:none!important}

/* Product/card panels should preserve inner image clipping */
.product-image-wrap img{position:relative;z-index:1}
.product-card .inner,.detail-info,.cart-product-main,.cart-price-actions,.checkout-card > *, .auth-card > *{position:relative;z-index:2}

@media(max-width:900px){
  .site-bg:before{
    background-size:105vw auto !important;
    background-position:center 38vh !important;
  }
  .video-preview-fixed{min-height:260px}
  .video-controls-fake{left:28px;right:28px;grid-template-columns:24px 84px 1fr 24px}
  .video-controls-fake span:nth-last-child(-n+2){display:none}
  .feature-cards article{padding-left:104px!important}
}


/* ===== V11 direct home video fix ===== */
.video-shell.video-direct-card{
  position:relative!important;
  padding:18px!important;
  clip-path:none!important;
  border:1px solid var(--line)!important;
  background:linear-gradient(180deg,rgba(15,20,31,.86),rgba(5,8,15,.94))!important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.08),0 0 38px rgba(255,19,45,.09)!important;
}
.video-shell.video-direct-card:before{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  pointer-events:none!important;
  background:linear-gradient(135deg,var(--red) 0 18px,transparent 19px) top left/90px 90px no-repeat,linear-gradient(315deg,var(--red) 0 18px,transparent 19px) bottom right/90px 90px no-repeat!important;
  opacity:.75!important;
}
.video-shell.video-direct-card:after{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  pointer-events:none!important;
  border:1px solid rgba(255,19,45,.28)!important;
  clip-path:polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%,0 30px)!important;
}
.video-direct-wrap{
  position:relative;
  z-index:2;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#05070d;
  border:1px solid rgba(255,19,45,.58);
  box-shadow:inset 0 0 42px rgba(255,19,45,.12);
}
.video-direct-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#05070d;
}
.video-direct-caption{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  min-height:54px;
  padding:14px 16px 0;
  color:#fff;
}
.video-direct-caption b{font-size:18px;text-shadow:0 0 14px rgba(255,19,45,.65)}
.video-direct-caption span{color:var(--muted);font-size:13px;text-align:right}
.video-modal{display:none!important}
@media(max-width:900px){
  .video-direct-caption{display:block}.video-direct-caption span{display:block;text-align:left;margin-top:5px}
}

/* ===== V12 final front polish ===== */
/* Use user's brand background as the real full-page background under all UI */
.site-bg{
  position:fixed!important;
  inset:0!important;
  z-index:-10!important;
  background:
    linear-gradient(90deg,rgba(3,4,9,.92),rgba(3,4,9,.72),rgba(3,4,9,.92)),
    linear-gradient(180deg,rgba(3,4,9,.15),rgba(3,4,9,.86) 82%,#030409 100%),
    url("assets/brand/background.png") center center/cover no-repeat!important;
}
.site-bg:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,19,45,.12),transparent 40%),
    radial-gradient(circle at 18% 28%,rgba(255,19,45,.18),transparent 22%)!important;
  opacity:1!important;
}
.site-bg:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px)!important;
  background-size:52px 52px,52px 52px!important;
  opacity:.55!important;
}

/* Center the 01/02/03 feature cards and make the frame stable */
.feature-cards{
  align-items:stretch!important;
}
.feature-cards article{
  min-height:148px!important;
  padding:24px 34px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:24px!important;
  overflow:hidden!important;
  text-align:left!important;
}
.feature-cards article:before{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  pointer-events:none!important;
  background:
    linear-gradient(135deg,var(--red) 0 18px,transparent 19px) top left/90px 90px no-repeat,
    linear-gradient(315deg,var(--red) 0 18px,transparent 19px) bottom right/90px 90px no-repeat!important;
  opacity:.78!important;
  border:0!important;
}
.feature-cards article:after{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  pointer-events:none!important;
  border:1px solid rgba(255,19,45,.24)!important;
  background:none!important;
  clip-path:none!important;
}
.feature-cards article>b{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  flex:0 0 70px!important;
  width:70px!important;
  height:70px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  clip-path:none!important;
  background:radial-gradient(circle,rgba(255,19,45,.22),rgba(255,19,45,.08))!important;
  border:1px solid rgba(255,19,45,.72)!important;
  color:var(--red2)!important;
  font-size:26px!important;
  line-height:1!important;
  z-index:2!important;
}
.feature-cards article h3,
.feature-cards article p{
  position:relative!important;
  z-index:2!important;
}
.feature-cards article h3{
  margin:0 0 8px!important;
}
.feature-cards article p{
  margin:0!important;
}
.feature-cards article > div,
.feature-cards article h3 + p{
  text-align:left!important;
}

/* Make video panel use the same double-frame behavior as other panels, without corner-cut shape */
.video-shell.video-direct-card{
  overflow:hidden!important;
  border:1px solid rgba(255,19,45,.52)!important;
  background:linear-gradient(180deg,rgba(15,20,31,.86),rgba(5,8,15,.94))!important;
}
.video-shell.video-direct-card:before{
  background:
    linear-gradient(135deg,var(--red) 0 18px,transparent 19px) top left/90px 90px no-repeat,
    linear-gradient(315deg,var(--red) 0 18px,transparent 19px) bottom right/90px 90px no-repeat!important;
}
.video-shell.video-direct-card:after{
  inset:10px!important;
  border:1px solid rgba(255,19,45,.28)!important;
  clip-path:none!important;
}

@media(max-width:900px){
  .feature-cards article{
    justify-content:flex-start!important;
    gap:18px!important;
    padding:22px 24px!important;
  }
}

/* ===== V13 fixes: visible background + stable feature cards ===== */
html, body{
  background:
    linear-gradient(90deg,rgba(3,4,9,.68),rgba(3,4,9,.48),rgba(3,4,9,.78)),
    linear-gradient(180deg,rgba(3,4,9,.08),rgba(3,4,9,.80) 72%,#030409 100%),
    url("assets/brand/background.png") center top/cover fixed no-repeat !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,19,45,.12),transparent 38%),
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:auto,52px 52px,52px 52px;
}
.site-bg{
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(3,4,9,.70),rgba(3,4,9,.50),rgba(3,4,9,.82)),
    linear-gradient(180deg,rgba(3,4,9,.05),rgba(3,4,9,.82) 76%,#030409 100%),
    url("assets/brand/background.png") center top/cover fixed no-repeat !important;
  opacity:1 !important;
}
.site-bg:before{display:none !important;}
.site-bg:after{opacity:.25 !important;}
.site-header, main, .footer{position:relative;z-index:2;}

/* Feature cards: proper two-column layout, centered vertically */
.feature-cards article{
  position:relative !important;
  min-height:150px !important;
  padding:26px 34px !important;
  display:grid !important;
  grid-template-columns:76px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:26px !important;
  row-gap:8px !important;
  align-content:center !important;
  align-items:center !important;
  justify-content:initial !important;
  text-align:left !important;
  overflow:hidden !important;
  border:1px solid rgba(255,19,45,.55) !important;
  background:linear-gradient(180deg,rgba(15,20,31,.84),rgba(5,8,15,.92)) !important;
  box-shadow:inset 0 0 40px rgba(255,19,45,.06),0 0 28px rgba(255,19,45,.07) !important;
}
.feature-cards article:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg,var(--red) 0 18px,transparent 19px) top left/90px 90px no-repeat,
    linear-gradient(315deg,var(--red) 0 18px,transparent 19px) bottom right/90px 90px no-repeat !important;
  opacity:.9 !important;
  border:0 !important;
  clip-path:none !important;
}
.feature-cards article:after{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  pointer-events:none !important;
  border:1px solid rgba(255,19,45,.24) !important;
  background:none !important;
  clip-path:none !important;
}
.feature-cards article>b{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:68px !important;
  height:68px !important;
  min-width:68px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  clip-path:none !important;
  background:radial-gradient(circle,rgba(255,19,45,.24),rgba(255,19,45,.08)) !important;
  border:1px solid rgba(255,19,45,.72) !important;
  color:var(--red2) !important;
  font-size:26px !important;
  line-height:1 !important;
  z-index:2 !important;
  justify-self:center !important;
  align-self:center !important;
}
.feature-cards article h3{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:end !important;
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  font-size:18px !important;
  line-height:1.3 !important;
}
.feature-cards article p{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  color:var(--muted) !important;
  line-height:1.5 !important;
}

@media(max-width:900px){
  .feature-cards article{
    grid-template-columns:64px minmax(0,1fr) !important;
    padding:22px 24px !important;
    column-gap:18px !important;
  }
  .feature-cards article>b{width:58px !important;height:58px !important;min-width:58px !important;font-size:22px !important;}
}


/* Phase 2 order/payment/account data */
.order-summary p{margin:0 0 10px;color:var(--muted)}
.order-status{display:inline-block;padding:4px 10px;border:1px solid var(--line);color:#fff;text-transform:uppercase;font-weight:900;background:rgba(255,19,45,.12)}
.order-status.pending{color:var(--yellow)}
.order-status.paid,.order-status.completed{color:var(--green)}
.order-status.cancelled{color:var(--red2)}
.order-items{display:grid;gap:10px;margin-top:16px}
.order-link{text-decoration:none;color:var(--text)}
.payment-note p{margin:0 0 12px;color:var(--muted)}
.copy-code{padding:14px;border:1px dashed rgba(255,19,45,.72);background:rgba(255,19,45,.08);font-weight:1000;color:#fff;letter-spacing:1px;margin:8px 0 16px;word-break:break-all}
.btn:disabled{opacity:.62;cursor:not-allowed;transform:none;filter:grayscale(.35)}

/* =========================
   Phase Payment UI
   ========================= */
.payment-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.payment-method-card{
  border:1px solid rgba(255,19,45,.42);
  background:linear-gradient(180deg,rgba(17,21,32,.92),rgba(6,8,14,.95));
  padding:18px;
  min-height:330px;
  position:relative;
}
.payment-method-card:before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  border-top:18px solid var(--red);
  border-right:18px solid transparent;
}
.payment-method-card:after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  border-bottom:18px solid var(--red);
  border-left:18px solid transparent;
}
.payment-method-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.payment-method-head b{
  font-size:18px;
}
.payment-method-head span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.qr-box{
  height:160px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(0,0,0,.24);
  margin-bottom:14px;
}
.qr-img{
  width:150px;
  height:150px;
  object-fit:contain;
}
.qr-empty{
  width:145px;
  height:145px;
  display:grid;
  place-items:center;
  text-align:center;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,19,45,.32);
  background:rgba(255,19,45,.06);
  font-weight:900;
}
.qr-empty small{
  display:block;
  color:var(--muted);
  font-weight:600;
  margin-top:5px;
}
.bank-info p{
  margin:8px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
}
.bank-info p span{
  color:var(--muted);
}
.bank-info p b{
  color:#fff;
  text-align:right;
}
.copy-code{
  width:100%;
  text-align:center;
  padding:12px;
  border:1px solid rgba(255,19,45,.45);
  background:rgba(255,19,45,.08);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  word-break:break-word;
}
.paypal-box{
  min-height:246px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  text-align:center;
}
.paypal-box p{
  color:var(--muted);
  line-height:1.5;
  margin:0;
}

/* PayPal redirect checkout: no popup/iframe SDK. The button only creates the
   server-side Order and navigates the browser to PayPal's payer-action URL. */
.paypal-redirect-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.paypal-redirect-btn{
  width:min(100%,300px);
  min-height:46px;
  padding:11px 22px;
  border:0;
  border-radius:5px;
  background:#ffc439;
  color:#111820;
  font:800 17px/1.15 Arial,Helvetica,sans-serif;
  cursor:pointer;
  text-align:center;
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
.paypal-redirect-btn strong{
  color:#003087;
  font-weight:900;
  font-style:italic;
}
.paypal-redirect-btn:hover:not(:disabled){
  filter:brightness(.97);
}
.paypal-redirect-btn:disabled{
  opacity:.65;
  cursor:wait;
}
@media(max-width:1100px){
  .paypal-redirect-wrap{justify-content:center}
  .paypal-redirect-btn{margin-left:auto;margin-right:auto}
}
.btn.disabled,
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.4);
}
.payment-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}
.order-status{
  color:var(--red2);
  text-transform:uppercase;
  font-weight:1000;
}
.order-status.completed,
.order-status.paid{
  color:var(--green);
}
@media(max-width:1100px){
  .payment-grid{grid-template-columns:1fr}
  .payment-actions{grid-template-columns:1fr}
}

/* Phase: purchased keys instead of auto-active license */
.key-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.key-row small{
  display:block;
  margin-top:6px;
  color:var(--muted);
}
.key-row .copy-code{
  max-width:360px;
  margin:0;
}
.fast-support-note{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(255,19,45,.45);
  background:rgba(255,19,45,.08);
  color:#fff;
  font-weight:800;
  line-height:1.55;
}
.order-status.ACCEPTED,
.order-status.PAID,
.order-status.accepted,
.order-status.paid{
  color:var(--green);
}
.order-status.DENIED,
.order-status.denied{
  color:var(--red2);
}
.order-status.EXPIRED,
.order-status.expired{
  color:#aab1c1;
}
@media(max-width:900px){
  .key-row{align-items:flex-start;flex-direction:column}
  .key-row .copy-code{max-width:100%}
}

/* ===== Account + Delta Force product variant phase ===== */
.account-profile-layout{
  display:grid;
  gap:18px;
}
.profile-logout-area{
  margin-top:0;
}
.profile-logout-area .btn{
  min-height:58px;
}
.variant-select-card .detail-info{
  align-self:center;
}
.variant-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.variant-card{
  position:relative;
  display:flex;
  min-height:180px;
  flex-direction:column;
  gap:12px;
  padding:22px;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,19,45,.52);
  background:linear-gradient(180deg,rgba(15,20,31,.86),rgba(5,8,15,.94));
  box-shadow:inset 0 0 36px rgba(255,19,45,.05);
  overflow:hidden;
}
.variant-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  border-top:22px solid var(--red);
  border-right:22px solid transparent;
}
.variant-card b{
  color:#fff;
  font-size:20px;
}
.variant-card span{
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}
.variant-card small{
  margin-top:auto;
  color:var(--green);
  font-weight:1000;
  font-size:18px;
}
.variant-card:hover{
  border-color:var(--red2);
  box-shadow:0 0 28px rgba(255,19,45,.24), inset 0 0 36px rgba(255,19,45,.08);
  transform:translateY(-2px);
}
.back-variants{
  display:inline-flex;
  margin:8px 0 18px;
  color:var(--red2);
  font-weight:1000;
  text-decoration:none;
}
.fast-support-note{
  margin:20px 0 0;
  padding:16px 18px;
  border:1px solid rgba(255,19,45,.45);
  background:rgba(255,19,45,.08);
  color:#fff;
}
@media(max-width:1100px){
  .variant-grid{grid-template-columns:1fr;}
}

.account-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.btn.compact{
  width:auto;
  min-width:180px;
  min-height:48px;
  padding:0 22px;
}
.time-line{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.time-line b{
  color:#dce4f5;
}
.order-time-row,
.key-time-row{
  align-items:flex-start;
}
.key-time-row > div,
.order-time-row > div{
  min-width:0;
}
@media(max-width:800px){
  .account-topline{flex-direction:column;}
  .btn.compact{width:100%;}
}


/* ===== compact change password form ===== */
#change-password-form{
  width:min(640px,90vw);
  margin:0 auto;
  padding:28px 32px 24px!important;
}
#change-password-form h2{
  margin-bottom:22px!important;
}
#change-password-form input{
  height:52px;
  margin-bottom:14px;
}
.change-password-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  margin-top:14px;
  margin-bottom:8px;
}
.change-password-actions .btn,
.change-password-actions .btn:first-child{
  width:180px!important;
  min-width:180px!important;
  min-height:52px;
  padding:0 18px;
}
@media(max-width:640px){
  .change-password-actions{flex-direction:column;align-items:stretch}
  .change-password-actions .btn{width:100%!important;min-width:100%!important}
}


/* ===== VFT FIX: center compact change password buttons ===== */
#change-password-form.panel-box{
  width:min(560px,90vw)!important;
  margin:0 auto!important;
  padding:30px 30px 20px!important;
}
#change-password-form h2{
  margin:0 0 20px!important;
}
#change-password-form input{
  height:52px!important;
  margin-bottom:14px!important;
}
#change-password-form .change-password-actions{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:18px!important;
  margin:14px auto 0!important;
}
#change-password-form .change-password-actions button.btn{
  flex:0 0 190px!important;
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
  min-height:54px!important;
  height:54px!important;
  padding:0 16px!important;
  text-align:center!important;
}
#change-password-result:empty{
  display:none!important;
}
@media(max-width:560px){
  #change-password-form .change-password-actions{
    flex-direction:column!important;
    gap:12px!important;
  }
  #change-password-form .change-password-actions button.btn{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
  }
}


/* ===== VFT FINAL FIX 2026-06-24: change password centered compact buttons ===== */
.single-auth:has(#change-password-form){
  width:min(720px,92vw)!important;
  margin:44px auto 88px!important;
}
#change-password-form.panel-box{
  width:100%!important;
  max-width:680px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:34px 34px 42px!important;
}
#change-password-form.panel-box input{
  display:block!important;
  width:100%!important;
  height:52px!important;
  margin:0 0 14px!important;
}
#change-password-form .change-password-actions{
  display:flex!important;
  flex-direction:row!important;
  justify-content:center!important;
  align-items:center!important;
  gap:18px!important;
  width:100%!important;
  margin:26px auto 0!important;
  padding:0!important;
}
#change-password-form .change-password-actions .btn{
  flex:0 0 190px!important;
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  padding:0 18px!important;
  text-align:center!important;
}
#change-password-form .change-password-actions .btn.ghost{
  background:linear-gradient(90deg,#a60314,#ff132d)!important;
  border-color:var(--line)!important;
}
@media(max-width:560px){
  #change-password-form .change-password-actions{flex-direction:column!important;}
  #change-password-form .change-password-actions .btn{width:100%!important;max-width:100%!important;flex:0 0 auto!important;}
}

/* Phase 2 fulfilment/license display */
.key-row.download-new{border-color:rgba(0,255,136,.75);box-shadow:0 0 0 1px rgba(0,255,136,.12) inset;background:rgba(0,255,136,.045)}
.copy-code[disabled]{opacity:.55;cursor:not-allowed}
.download-link-btn{text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.key-row small.ok{color:#00ff88;font-weight:900}

/* Phase 4 license card fix: key copy + dynamic download */
.purchased-license-list{
  gap:14px;
}
.license-card{
  min-height:92px;
  align-items:center;
  border-color:rgba(255,19,45,.34);
  background:linear-gradient(180deg,rgba(15,20,31,.72),rgba(5,8,15,.86));
  box-shadow:inset 0 0 28px rgba(255,19,45,.035);
}
.license-card:hover{
  border-color:rgba(255,19,45,.78);
  box-shadow:0 0 0 1px rgba(255,19,45,.18) inset,0 0 24px rgba(255,19,45,.08);
}
.license-card-info{
  min-width:0;
  flex:1 1 auto;
}
.license-card-info b{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.license-action{
  width:360px;
  max-width:42vw;
  min-height:54px;
  margin:0!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-decoration:none;
  overflow:hidden;
  white-space:nowrap;
}
.license-action-type{
  color:var(--muted);
  font-size:11px;
  line-height:1;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.license-action-label{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
  padding:0 6px;
}
.key-card .license-action:hover,
.download-card .license-action:hover{
  border-color:var(--green);
  color:var(--green);
  box-shadow:0 0 22px rgba(49,255,144,.12);
}
.download-card .license-action-label{
  color:var(--green);
}
.pending-key-card .license-action-label{
  color:var(--muted);
}
@media(max-width:760px){
  .license-card{align-items:flex-start;flex-direction:column;}
  .license-action{width:100%;max-width:100%;}
  .license-card-info b{white-space:normal;}
}


/* PHASE 6: Steam-style previews, dynamic settings, private download */
.video-steam-card{padding:24px 24px 72px;clip-path:polygon(7% 0,100% 0,100% 82%,92% 100%,0 100%,0 18%)}
.steam-preview{position:relative;z-index:2;display:block;width:100%;min-height:420px;aspect-ratio:16/9;border:1px solid rgba(255,19,45,.55);background:#05070d;color:#fff;overflow:hidden;cursor:pointer;padding:0;text-align:left;box-shadow:inset 0 0 50px rgba(255,19,45,.1)}
.steam-preview.no-video{cursor:default}
.steam-preview img{width:100%;height:100%;min-height:inherit;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.08) brightness(.78);transition:.2s}
.steam-preview:hover img{transform:scale(1.025);filter:saturate(1.1) contrast(1.08) brightness(.92)}
.steam-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.66)),repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(255,19,45,.055) 10px);pointer-events:none}
.steam-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(90deg,#a30313,#ff132d);font-size:38px;padding-left:6px;box-shadow:0 0 42px rgba(255,19,45,.58);transition:.16s}
.steam-preview:hover .steam-play{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 58px rgba(255,19,45,.85)}
.steam-preview-title{position:absolute;left:24px;right:24px;bottom:20px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.steam-preview-title b{font-size:22px;text-shadow:0 0 20px rgba(255,19,45,.7)}
.steam-preview-title span{color:var(--muted);font-weight:800;text-align:right}
.video-modal-vft[hidden]{display:none!important}.video-modal-vft{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}.video-modal-backdrop-vft{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}.video-modal-panel-vft{position:relative;z-index:2;width:min(1120px,92vw);aspect-ratio:16/9;border:1px solid var(--line);background:#000;box-shadow:0 0 80px rgba(255,19,45,.28)}.video-modal-panel-vft iframe{width:100%;height:100%;border:0}.video-modal-close-vft{position:absolute;right:-18px;top:-18px;width:42px;height:42px;border:1px solid var(--line);background:#ff132d;color:#fff;font-size:28px;font-weight:1000;cursor:pointer;border-radius:50%;z-index:3}.product-media-wrap .steam-preview{min-height:480px;height:100%}.product-meta-line{margin:12px 0;color:var(--green);font-weight:900}.product-changelog{white-space:normal}.license-action-stack{width:360px;max-width:42vw;display:grid;gap:10px}.license-action-stack .license-action{width:100%;max-width:100%}.license-download-small{min-height:46px;font-size:13px}.license-download-small .license-action-label{color:var(--green)}
@media(max-width:760px){.steam-preview{min-height:260px}.steam-preview-title{display:block}.steam-preview-title span{display:block;text-align:left;margin-top:6px}.license-action-stack{width:100%;max-width:100%}}

/* Phase 6 test 2: inline Steam video + compact hero video */
.video-shell.video-steam-card.no-caption{padding:24px;clip-path:polygon(7% 0,100% 0,100% 90%,94% 100%,0 100%,0 10%)}
.video-shell.video-steam-card.has-caption{padding:24px 24px 72px}
.steam-preview.playing{cursor:default;background:#000}
.steam-preview.playing:after,.steam-preview.playing .steam-play,.steam-preview.playing img,.steam-preview.playing .steam-preview-title{display:none!important}
.steam-inline-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:4}
.no-download-btn{cursor:pointer;opacity:.85}.no-download-btn .license-action-label{color:#ffd66b!important}


/* Phase 6 hotfix: home preview video must always be visible and play inline */
.hero-right#hero-video{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  align-self:center !important;
}
.home-video-live{
  position:relative !important;
  width:100% !important;
  padding:24px !important;
  border:1px solid rgba(255,19,45,.62) !important;
  background:linear-gradient(180deg,rgba(15,20,31,.82),rgba(5,8,15,.96)) !important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.08),0 0 38px rgba(255,19,45,.08) !important;
  clip-path:polygon(4% 0,100% 0,100% 90%,94% 100%,0 100%,0 10%) !important;
  overflow:hidden !important;
}
.home-video-live:before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg,var(--red) 0 24px,transparent 25px) top left/120px 120px no-repeat,
    linear-gradient(315deg,var(--red) 0 24px,transparent 25px) bottom right/120px 120px no-repeat !important;
  opacity:.82 !important;
  z-index:3 !important;
}
.home-video-live:after{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  border:1px solid rgba(255,19,45,.32) !important;
  pointer-events:none !important;
  z-index:4 !important;
}
.home-video-live-media{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:420px !important;
  border:1px solid rgba(255,19,45,.58) !important;
  background:#05070d !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
}
.home-video-live-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:inherit !important;
  object-fit:cover !important;
  filter:saturate(1.08) contrast(1.08) brightness(.72) !important;
  transition:.2s !important;
}
.home-video-live-media:hover img{
  transform:scale(1.02) !important;
  filter:saturate(1.12) contrast(1.08) brightness(.88) !important;
}
.home-video-live-shade{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.52)),
    repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(255,19,45,.055) 10px) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.home-video-live-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:5 !important;
  width:96px !important;
  height:96px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(90deg,#a30313,#ff132d) !important;
  color:#fff !important;
  font-size:42px !important;
  line-height:1 !important;
  padding-left:8px !important;
  box-shadow:0 0 54px rgba(255,19,45,.72) !important;
}
.home-video-live-media iframe{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#000 !important;
  z-index:6 !important;
}
.home-video-live-media.playing{
  cursor:default !important;
}
@media(max-width:900px){
  .home-video-live{padding:14px !important;}
  .home-video-live-media{min-height:240px !important;}
}

/* FINAL FIX: home video keeps the original rectangular frame and plays inline. */
.hero-v8{align-items:center;}
.hero-right#hero-video{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  align-self:center !important;
}
.home-video-live{
  position:relative !important;
  width:100% !important;
  padding:24px !important;
  border:1px solid rgba(255,19,45,.62) !important;
  background:linear-gradient(180deg,rgba(15,20,31,.82),rgba(5,8,15,.96)) !important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.08),0 0 38px rgba(255,19,45,.08) !important;
  clip-path:none !important;
  overflow:visible !important;
}
.home-video-live:before{
  display:none !important;
  content:none !important;
}
.home-video-live:after{
  content:"" !important;
  position:absolute !important;
  inset:12px !important;
  border:1px solid rgba(255,19,45,.34) !important;
  pointer-events:none !important;
  z-index:5 !important;
}
.home-video-live-media{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:420px !important;
  border:1px solid rgba(255,19,45,.58) !important;
  background:#000 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  clip-path:none !important;
}
.home-video-live-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:inherit !important;
  object-fit:cover !important;
  filter:saturate(1.08) contrast(1.08) brightness(.72) !important;
  transition:.2s !important;
}
.home-video-live-media:hover img{
  transform:scale(1.02) !important;
  filter:saturate(1.12) contrast(1.08) brightness(.88) !important;
}
.home-video-live-shade{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.52)),repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(255,19,45,.055) 10px) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.home-video-live-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:4 !important;
  width:96px !important;
  height:96px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(90deg,#a30313,#ff132d) !important;
  color:#fff !important;
  font-size:42px !important;
  line-height:1 !important;
  padding-left:8px !important;
  box-shadow:0 0 54px rgba(255,19,45,.72) !important;
}
.home-video-live-media iframe{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#000 !important;
  z-index:6 !important;
}
.home-video-live-media.playing{
  cursor:default !important;
}
.home-video-live-media.playing img,
.home-video-live-media.playing .home-video-live-shade,
.home-video-live-media.playing .home-video-live-play{
  display:none !important;
}
@media(max-width:900px){
  .home-video-live{padding:14px !important;}
  .home-video-live-media{min-height:240px !important;}
}

/* Phase 7 manual payment countdown + invoice */
.order-countdown{display:inline-block;min-width:72px;text-align:center;border:1px solid rgba(255,214,107,.72);padding:4px 10px;color:#ffd66b;font-weight:1000;background:rgba(255,214,107,.08)}
.order-countdown.danger{border-color:#ff445a;color:#ff445a;background:rgba(255,68,90,.1)}
.invoice-card{border:1px solid rgba(0,255,136,.72);background:linear-gradient(135deg,rgba(0,255,136,.08),rgba(255,19,45,.04));padding:24px;box-shadow:0 0 42px rgba(0,255,136,.08)}
.invoice-head{display:flex;gap:16px;align-items:center;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:18px;margin-bottom:18px}.invoice-head img{width:64px;height:64px;object-fit:contain}.invoice-head h2{margin:0;color:#00ff88}.invoice-head p{margin:6px 0 0;color:#cbd5ea}.invoice-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.invoice-meta p{border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);padding:12px;margin:0}.invoice-meta span{display:block;color:#aeb7cc;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.invoice-meta b{display:block;color:#fff;margin-top:5px}.invoice-item{display:flex;justify-content:space-between;gap:18px;border-top:1px solid rgba(255,255,255,.1);padding:14px 0}.invoice-item small{display:block;color:#cbd5ea;margin-top:4px}.invoice-keys{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.invoice-key{border:1px solid rgba(255,19,45,.72);background:rgba(255,19,45,.08);color:#fff;font-family:Consolas,monospace;font-weight:900;padding:8px 10px;cursor:pointer}.thanks-line{margin-top:18px;color:#00ff88;font-weight:900}.success-box{border-color:rgba(0,255,136,.55)!important;color:#00ff88}.error-box{border-color:rgba(255,68,90,.75)!important;color:#ff8d9a}@media(max-width:760px){.invoice-meta{grid-template-columns:1fr}.invoice-item{display:block}.invoice-item strong{display:block;margin-top:10px}}


/* Phase 6 Customer Dashboard */
.customer-dash{width:min(1440px,calc(100% - 72px));margin:0 auto 60px}.customer-grid{display:grid;gap:18px;margin-bottom:18px}.customer-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-stat,.customer-panel{border:1px solid rgba(255,19,45,.55);background:linear-gradient(135deg,rgba(7,12,24,.88),rgba(12,17,31,.66));box-shadow:0 0 38px rgba(255,19,45,.08)}.customer-stat{padding:22px 24px}.customer-stat span{display:block;color:#aeb7cc;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900}.customer-stat b{display:block;color:#fff;font-size:30px;margin-top:8px}.customer-stat small{display:block;color:#cbd5ea;margin-top:6px}.customer-panel{padding:22px}.customer-panel h2{margin:0 0 16px}.customer-line{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none}.customer-line:last-child{border-bottom:0}.customer-line small{display:block;color:#aeb7cc;margin-top:5px}.customer-line.link-line:hover{color:#ff3148}.customer-badge{border:1px solid rgba(255,255,255,.18);padding:7px 10px;font-weight:1000;font-size:12px;white-space:nowrap}.customer-badge.ok{color:#00ff88;border-color:rgba(0,255,136,.55);background:rgba(0,255,136,.08)}.customer-badge.warn{color:#ffd66b;border-color:rgba(255,214,107,.55);background:rgba(255,214,107,.08)}.customer-badge.expired{color:#ff6b7d;border-color:rgba(255,68,90,.55);background:rgba(255,68,90,.08)}.customer-profile-form label{display:block;color:#cbd5ea;font-weight:900;margin-bottom:12px}.customer-profile-form input{width:100%;margin-top:8px}.customer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.customer-activity-item{border-bottom:1px solid rgba(255,255,255,.08);padding:12px 0}.customer-activity-item:last-child{border-bottom:0}.customer-activity-item small{display:block;color:#aeb7cc;margin-top:3px}.customer-activity-item p{margin:6px 0 0;color:#cbd5ea}.customer-help-item{border:1px solid rgba(255,19,45,.35);background:rgba(0,0,0,.18);padding:13px 14px;margin-bottom:10px}.customer-help-item summary{cursor:pointer;font-weight:1000;color:#fff}.customer-help-item div{margin-top:12px;color:#cbd5ea;line-height:1.6}.btn.compact{padding:10px 14px;font-size:12px}@media(max-width:900px){.customer-dash{width:calc(100% - 28px)}.customer-stats,.two-col{grid-template-columns:1fr}.customer-line{align-items:flex-start;flex-direction:column}.customer-actions{flex-direction:column}.customer-actions .btn{width:100%;text-align:center}}


/* Account Center navigation cleanup */
.site-header{grid-template-columns:320px 1fr 310px}
.account-menu{position:relative;display:flex;align-items:center;min-height:78px}
.account-menu:after{
  content:"";position:absolute;right:0;top:64px;width:230px;height:16px;
  display:none;z-index:79;
}
.account-dropdown{
  position:absolute;right:0;top:70px;width:230px;padding:10px;
  border:1px solid rgba(255,19,45,.55);
  background:rgba(5,8,16,.98);
  box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 28px rgba(255,19,45,.18);
  display:none;z-index:80;
}
.account-menu.open:after{display:block}
.account-menu.open .account-dropdown{display:block}
.account-btn{border:1px solid var(--line);font-family:inherit;font-size:15px;cursor:pointer}
.account-dropdown a,.account-dropdown button{
  width:100%;display:block;text-align:left;color:#9aa1af;text-decoration:none;
  border:0;background:transparent;padding:11px 12px;font-weight:900;font-family:inherit;cursor:pointer;
}
.account-dropdown a:hover,.account-dropdown button:hover,
.account-dropdown a:focus,.account-dropdown button:focus{color:#fff;background:rgba(255,19,45,.16);outline:none;text-shadow:0 0 14px rgba(255,255,255,.28)}
.account-page-head h1{font-size:clamp(42px,6vw,86px)}
.account-center-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.account-side{padding:18px;position:sticky;top:100px}
.account-side-title{color:#aeb7cc;font-weight:1000;letter-spacing:.16em;font-size:12px;margin-bottom:12px}
.account-side a,.account-side button{
  display:block;width:100%;text-align:left;text-decoration:none;color:#e7ecfa;
  border:1px solid rgba(255,19,45,.34);background:rgba(0,0,0,.18);
  padding:13px 14px;margin:8px 0;font-weight:1000;font-family:inherit;cursor:pointer;
}
.account-side a.active,.account-side a:hover,.account-side button:hover{
  color:#fff;background:linear-gradient(135deg,#c80018,#ff1832);border-color:#ff3148;
  box-shadow:0 0 24px rgba(255,19,45,.18);
}
.account-content{min-width:0}
.account-content-head{border:1px solid rgba(255,19,45,.55);background:linear-gradient(135deg,rgba(7,12,24,.88),rgba(12,17,31,.66));padding:22px;margin-bottom:18px}
.account-content-head h2{margin:0 0 8px;font-size:32px}.account-content-head p{margin:0;color:#cbd5ea}
.account-mini-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.account-license-only{width:100%}
.account-license-only #account-license-keys{margin-top:18px}
.customer-order-status.status-pending{color:#ffd66b!important;border-color:rgba(255,214,107,.75)!important;background:rgba(255,214,107,.08)!important}
.customer-order-status.status-accepted{color:#00ff88!important;border-color:rgba(0,255,136,.75)!important;background:rgba(0,255,136,.08)!important}
.customer-order-status.status-denied{color:#ff314f!important;border-color:rgba(255,49,79,.75)!important;background:rgba(255,49,79,.08)!important}
.customer-order-status.status-expired{color:#aeb7cc!important;border-color:rgba(156,163,175,.75)!important;background:rgba(156,163,175,.08)!important}
@media(max-width:980px){
  .site-header{grid-template-columns:1fr;gap:10px;height:auto;padding:14px 4vw}
  .nav{gap:18px;flex-wrap:wrap}
  .header-actions{justify-content:center}
  .account-center-layout{grid-template-columns:1fr}
  .account-side{position:static}
}


/* Hotfix 4: account login/dropdown state */

.account-menu.is-guest .account-dropdown,
.account-menu.is-guest:after{display:none!important}
.account-menu.is-guest .account-btn{cursor:pointer}
.account-dropdown a:hover,
.account-dropdown button:hover,
.account-dropdown a:focus,
.account-dropdown button:focus{
  color:#ffffff!important;
  background:rgba(255,19,45,.22)!important;
  text-shadow:0 0 14px rgba(255,255,255,.38)!important;
}
.account-dropdown a,
.account-dropdown button{transition:color .12s ease,background .12s ease,text-shadow .12s ease}


/* Phase 5 final hotfix: Account button không dùng popup nữa */
.account-menu.no-dropdown:after,
.account-menu.no-dropdown .account-dropdown,
.account-menu .account-dropdown{display:none!important}
.account-menu.open .account-dropdown{display:none!important}
.account-menu .account-btn{cursor:pointer}
.account-menu.is-guest .account-btn{background:linear-gradient(135deg,#c80018,#ff1832)}
.account-menu.is-logged .account-btn{background:linear-gradient(135deg,#c80018,#ff1832)}


/* Support Phase 2 - Knowledge Center public UI */
.quick-start-home{display:inline-flex!important}.support-kc-intro{position:relative;z-index:2;color:#dfe4f2;line-height:1.7;margin-bottom:18px}.support-kc-box{position:relative;z-index:2}.support-quick-panel,.support-section-block{border:1px solid rgba(255,19,45,.35);background:rgba(5,8,15,.62);padding:22px;margin:18px 0;box-shadow:inset 0 0 30px rgba(255,19,45,.05)}.support-section-title{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}.support-section-title>span{width:52px;height:52px;display:grid;place-items:center;background:linear-gradient(90deg,#a60314,#ff132d);font-weight:1000;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.support-section-title h2,.support-section-block h2{margin:0 0 6px;font-size:26px}.support-section-title p{margin:0;color:var(--muted);line-height:1.55}.support-quick-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.support-step-card,.support-category-card,.support-nav-btn,.support-article-head{font-family:inherit}.support-step-card{min-height:190px;border:1px solid rgba(255,31,55,.38);background:linear-gradient(180deg,rgba(15,20,31,.78),rgba(5,8,15,.9));color:#fff;text-align:left;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:10px;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}.support-step-card:hover,.support-category-card:hover,.support-nav-btn:hover{border-color:var(--green);box-shadow:0 0 22px rgba(49,255,144,.12);transform:translateY(-1px)}.support-step-card em{font-style:normal;color:var(--red2);font-size:24px;font-weight:1000}.support-step-card b{font-size:16px}.support-step-card span{color:var(--muted);font-size:13px;line-height:1.45;flex:1}.support-step-card strong{color:var(--green);font-size:13px}.support-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;margin-top:22px}.support-nav-panel{border:1px solid rgba(255,31,55,.28);background:rgba(5,8,15,.58);padding:14px;height:max-content;position:sticky;top:100px}.support-nav-btn{width:100%;min-height:48px;margin:0 0 10px;border:1px solid rgba(255,31,55,.32);background:rgba(10,14,24,.76);color:#fff;font-weight:1000;text-align:left;padding:0 14px;cursor:pointer}.support-nav-btn.active{background:linear-gradient(90deg,#a60314,#ff132d);box-shadow:0 0 20px rgba(255,19,45,.22)}.support-content-panel{min-width:0}.support-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}.support-category-card{min-height:104px;border:1px solid rgba(255,31,55,.32);background:rgba(10,14,24,.76);color:#fff;text-align:left;padding:14px;cursor:pointer;display:grid;gap:7px}.support-category-card span{color:var(--red2);font-size:24px;font-weight:1000}.support-category-card small{color:var(--muted)}.support-article{border-top:1px solid rgba(255,31,55,.24)}.support-article:first-child{border-top:0}.support-article-head{width:100%;background:transparent;border:0;color:#fff;text-align:left;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}.support-article-head small{display:block;color:var(--red2);text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:1000;margin-bottom:5px}.support-article-head b{font-size:18px}.support-article-head i{font-style:normal;color:var(--red);font-size:28px;transition:.16s}.support-article.open .support-article-head i{transform:rotate(90deg)}.support-article-content{padding:0 0 20px}.support-article-body{white-space:pre-wrap;color:#d9deea;line-height:1.75;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06);padding:16px}.support-video-btn{margin:0 0 12px}.support-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.support-tags span{border:1px solid rgba(255,31,55,.28);background:rgba(255,31,55,.08);padding:5px 9px;color:#cfd5e6;font-size:12px}.support-game,.support-product{border:1px solid rgba(255,31,55,.24);background:rgba(4,7,14,.52);margin:12px 0}.support-game>summary,.support-product>summary{cursor:pointer;padding:15px 16px;font-weight:1000;color:#fff;list-style:none}.support-game>summary::-webkit-details-marker,.support-product>summary::-webkit-details-marker{display:none}.support-game summary span,.support-product summary span{float:right;color:var(--muted);font-size:13px}.support-product-list{padding:0 16px 14px}.support-product{background:rgba(255,255,255,.025)}.support-product .support-article{padding:0 12px}@media(max-width:1100px){.support-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.support-layout{grid-template-columns:1fr}.support-nav-panel{position:static}.support-category-grid{grid-template-columns:1fr 1fr}}@media(max-width:720px){.support-quick-grid,.support-category-grid{grid-template-columns:1fr}.support-step-card{min-height:auto}.hero-actions{align-items:stretch}.hero-actions .btn{width:100%}}

/* Support Phase 2 FIX: old theme hides ghost buttons in hero with !important.
   Force only the Quick Start CTA to stay visible. */
.hero-actions .btn.quick-start-home,
.hero-actions a.quick-start-home,
.hero-actions .btn.ghost.quick-start-home{
  display:inline-flex!important;
}

/* Support Phase 3 - permission/download/changelog */
.support-article.is-locked .support-article-head{opacity:.9}
.support-article.is-locked .support-article-head b::after{content:"  🔒";color:#ff3154;font-size:.9em}
.support-locked-box{border:1px solid rgba(255,31,55,.65);background:rgba(255,31,55,.06);padding:18px 20px;margin:10px 0;color:#eef2ff}
.support-locked-box b{display:block;color:#fff;margin-bottom:8px;font-size:18px}
.support-locked-box p{margin:0 0 14px;color:#cfd5e6;line-height:1.6}
.support-lock-actions{display:flex;gap:10px;flex-wrap:wrap}
.support-release-box{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(0,255,170,.45);background:rgba(0,255,170,.06);padding:16px 18px;margin:10px 0 16px}
.support-release-box b{color:#00ffaa}
.support-release-box p{margin:8px 0 0;color:#cfd5e6;line-height:1.55}
.support-changelog-box{border-top:1px solid rgba(255,31,55,.35);margin-top:18px;padding-top:14px}
.support-changelog-box h3{margin:0 0 12px;color:#fff}
.support-changelog-item{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);padding:12px 14px;margin:8px 0}
.support-changelog-item b{color:#ffd45a}
.support-changelog-item p{margin:6px 0 0;color:#cfd5e6;line-height:1.55}
.customer-help-group{border:1px solid rgba(255,31,55,.35);padding:12px 14px;margin:12px 0;background:rgba(8,12,22,.58)}
.customer-help-group summary{cursor:pointer;font-weight:900;color:#fff}
@media(max-width:720px){.support-release-box{display:block}.support-release-box .btn{margin-top:12px}}

/* Support Phase 4 - Release Manager resources */
.support-resource-wrap{display:flex;flex-direction:column;gap:18px}
.support-resource-game{border:1px solid rgba(255,31,55,.35);background:rgba(6,10,20,.45);padding:18px}
.support-resource-game h3{margin:0 0 14px;font-size:20px;color:#fff}
.support-resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.support-resource-card{border:1px solid rgba(255,31,55,.55);background:rgba(8,12,24,.72);padding:16px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.support-resource-card.locked{opacity:.82;border-color:rgba(160,170,190,.35)}
.support-resource-head{display:flex;flex-direction:column;gap:4px}
.support-resource-head span{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#00ff9d;font-weight:900}
.support-resource-card.locked .support-resource-head span{color:#b9c0d4}
.support-resource-head b{font-size:17px;color:#fff}
.support-resource-head small{color:#aeb6cc;font-weight:800}
.support-resource-version{border-top:1px solid rgba(255,255,255,.08);padding-top:10px;color:#ccd3e6}
.support-resource-card p{margin:0;color:#ccd3e6;line-height:1.55}
.support-resource-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.support-resource-log{margin-top:10px;max-height:220px;overflow:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.support-resource-log div{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.support-resource-log b{display:block;color:#fff;margin-bottom:4px}
.support-resource-log span{display:block;color:#cfd5e6;line-height:1.45}

/* SUPPORT PHASE 7 - search, deep links and article actions */
.support-search-panel{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(360px,1.45fr) minmax(230px,.7fr);gap:14px;align-items:center;border:1px solid rgba(255,31,55,.35);background:rgba(5,8,15,.72);padding:18px;margin:0 0 18px;box-shadow:inset 0 0 24px rgba(255,19,45,.04)}
.support-search-first{position:relative;z-index:3}
.support-search-copy>b{display:block;color:#fff;font-size:17px;margin-bottom:4px}
.support-search-copy>span{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.support-search-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.support-search-panel input[type="text"],.support-search-panel #support-search-input{width:100%;height:50px;margin:0;border:1px solid rgba(255,31,55,.55);background:#080d19;color:#fff;padding:0 14px;font-family:inherit;font-weight:800;outline:none}
.support-search-panel input[type="text"]:focus,.support-search-panel #support-search-input:focus{border-color:var(--green);box-shadow:0 0 18px rgba(0,255,157,.12)}
.support-search-input-wrap .btn{min-height:50px;padding:0 18px}
.support-stock-toggle{min-height:58px;display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);cursor:pointer}
.support-stock-toggle input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:#ff1733}
.support-stock-toggle span{display:flex;flex-direction:column;gap:3px;min-width:0}
.support-stock-toggle b{margin:0;color:#fff;font-size:13px;line-height:1.25}
.support-stock-toggle small{color:var(--muted);font-size:11px;line-height:1.3}
.support-article-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.support-section-block .muted b{color:#fff}
@media(max-width:1100px){.support-search-panel{grid-template-columns:1fr 1.4fr}.support-stock-toggle{grid-column:1/-1}}
@media(max-width:900px){.support-search-panel,.support-search-input-wrap{grid-template-columns:1fr}.support-search-panel .btn{width:100%}.support-stock-toggle{grid-column:auto}}


/* ===== Support Phase 8.1 - Knowledge Card / Breadcrumb / Related ===== */
.support-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  color:#aeb7c9;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.support-breadcrumb span:last-child{color:#fff}
.support-breadcrumb i{color:#ff1f37;font-style:normal}

.support-knowledge-card{
  border:1px solid rgba(255,31,55,.55);
  background:linear-gradient(135deg, rgba(255,31,55,.10), rgba(6,10,20,.84));
  padding:16px;
  margin:0 0 16px;
  position:relative;
  overflow:hidden;
}
.support-knowledge-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  border-top:22px solid #ff1f37;
  border-right:22px solid transparent;
}
.support-knowledge-card.locked{border-color:rgba(170,180,200,.35);background:rgba(7,11,22,.78)}
.skc-top{display:flex;flex-direction:column;gap:4px;margin-left:8px}
.skc-top span{color:#00ff99;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em}
.support-knowledge-card.locked .skc-top span{color:#ffcc66}
.skc-top strong{font-size:18px;color:#fff}
.skc-top small{color:#aeb7c9;font-weight:800}
.skc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.skc-grid div{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  padding:10px 12px;
}
.skc-grid em{
  display:block;
  color:#8f99ad;
  font-style:normal;
  text-transform:uppercase;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:5px;
}
.skc-grid b{color:#fff;font-size:14px}
.support-knowledge-card p{
  color:#cfd5e6;
  line-height:1.55;
  margin:8px 0 0;
}
.skc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.support-related{
  margin:22px 0 4px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:16px;
}
.support-related h3{margin:0 0 12px;color:#fff;font-size:18px}
.support-related>div{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.support-related button{
  text-align:left;
  border:1px solid rgba(255,31,55,.38);
  background:rgba(9,14,28,.75);
  color:#fff;
  padding:13px 14px;
  cursor:pointer;
  font-family:inherit;
  transition:.16s ease;
}
.support-related button:hover{
  border-color:#ff1f37;
  transform:translateY(-1px);
  background:rgba(255,31,55,.10);
}
.support-related small{
  display:block;
  color:#aeb7c9;
  font-weight:800;
  margin-bottom:5px;
}
.support-related b{font-size:15px}

@media (max-width: 760px){
  .skc-grid{grid-template-columns:1fr}
  .support-related>div{grid-template-columns:1fr}
}


/* Phase 8 add-on: customer-only Zalo community card */
.customer-zalo-card{
  display:flex;
  align-items:center;
  gap:18px;
  margin:18px 0;
  padding:18px 20px;
  border:1px solid rgba(255,31,55,.65);
  background:linear-gradient(135deg,rgba(255,31,55,.12),rgba(6,10,22,.86));
  box-shadow:0 0 24px rgba(255,31,55,.08);
  position:relative;
  overflow:hidden;
}
.customer-zalo-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 20%,rgba(255,31,55,.20),transparent 34%);
  pointer-events:none;
}
.customer-zalo-card > *{position:relative;z-index:1}
.customer-zalo-icon{
  width:54px;
  height:54px;
  min-width:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  background:#ff1f37;
  color:#fff;
  font-weight:900;
  font-size:24px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.customer-zalo-body{flex:1;min-width:0}
.customer-zalo-body h3{margin:2px 0 8px;font-size:20px}
.customer-zalo-body p{margin:0;color:var(--muted);line-height:1.55}
.customer-zalo-body ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.customer-zalo-body li{
  color:#d7dbea;
  font-size:13px;
}
.customer-zalo-body li:before{
  content:"✓";
  color:#00ff88;
  margin-right:6px;
  font-weight:900;
}
.customer-zalo-card.slim{
  margin:14px 0 18px;
  padding:15px 16px;
}
.customer-zalo-card.slim .customer-zalo-icon{
  width:42px;
  height:42px;
  min-width:42px;
  font-size:18px;
}
.customer-zalo-card.slim .customer-zalo-body h3{font-size:17px}
.customer-zalo-card.slim .customer-zalo-body ul{display:none}
@media(max-width:760px){
  .customer-zalo-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .customer-zalo-card .btn{
    width:100%;
    justify-content:center;
  }
}

/* ===== Phase 4: Points checkout ===== */
.points-checkout-box{
  margin:16px 0;
  padding:14px;
  border:1px solid rgba(255,19,45,.34);
  background:rgba(255,255,255,.035);
}
.points-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:900;
  margin-bottom:12px;
  cursor:pointer;
}
.points-toggle input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#ff132d;
}
.points-mini-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:14px;
  margin:7px 0;
}
.points-mini-row b{color:#fff}
.points-mini-row.discount b{color:var(--green)}
.total-row.final{
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.total-row.final b{color:var(--green);text-shadow:0 0 12px rgba(49,255,144,.22)}


/* Phase 5 Reseller pricing/account UI */
.reseller-checkout-box,
.reseller-account-card,
.referral-points-card{
  border:1px solid rgba(255,49,79,.35);
  background:rgba(255,49,79,.06);
  border-radius:18px;
  padding:14px;
  margin:12px 0;
}
.reseller-mini-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.reseller-mini-head b{color:#fff;}
.reseller-mini-head span{color:#8cff9b;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.reseller-rate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;}
.reseller-rate-grid span{display:block;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;background:rgba(0,0,0,.25);}
.reseller-rate-grid b{display:block;font-size:24px;color:#8cff9b;}
.reseller-rate-grid small{display:block;color:#b8c0cc;margin-top:4px;}
.referral-points-card h3,.reseller-account-card h3{margin:2px 0 6px;}

.voucher-checkout-box{margin:14px 0;padding:14px;border:1px solid rgba(255,31,55,.28);background:rgba(255,255,255,.035)}
.voucher-label{display:block;margin-bottom:8px;color:#fff;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.voucher-row{display:flex;gap:8px;align-items:center}
.voucher-input{flex:1;min-width:0;height:44px;background:#070a10;border:1px solid rgba(255,31,55,.35);color:#fff;padding:0 12px;text-transform:uppercase}
.voucher-row .btn{width:auto;min-height:44px;padding:0 14px}
.voucher-status{margin-top:8px;color:#aeb7cc;font-size:12px;font-weight:800}
.voucher-status{line-height:1.5;overflow-wrap:anywhere}.voucher-label .small-muted{font-size:11px;text-transform:none}

/* Phase 10 - final order/account pricing sync */
.order-pricing-breakdown{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(255,31,55,.42);
  background:rgba(5,8,16,.62);
  display:grid;
  gap:8px;
}
.order-pricing-breakdown div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#cbd5e1;
}
.order-pricing-breakdown div.final{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:10px;
  color:#fff;
}
.order-pricing-breakdown b{color:#fff;}
.order-pricing-breakdown .final b{color:#ff1f37;font-size:18px;}
.order-pricing-breakdown.compact{margin:12px 0;}
.order-item-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.order-item-price small{text-decoration:line-through;color:#94a3b8;font-size:12px;}
.order-item-price b{color:#fff;}
.referral-points-card{display:flex;align-items:center;justify-content:space-between;gap:18px;}
@media (max-width: 760px){.referral-points-card{align-items:flex-start;flex-direction:column;}}


/* Phase 12 Referral Center */
.referral-card-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.referral-hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.referral-link-box{display:grid;gap:10px;margin:16px 0;padding:14px;border:1px solid rgba(255,31,55,.35);background:rgba(0,0,0,.18)}
.referral-link-box label{display:grid;gap:6px;color:#cbd5ea;font-weight:900}.referral-link-box input{width:100%;height:44px;background:#070a10;border:1px solid rgba(255,31,55,.35);color:#fff;padding:0 12px}.referral-copy-row{display:flex;gap:10px;flex-wrap:wrap}.referral-rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.referral-rules-grid article{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);padding:14px}.referral-rules-grid b{display:block;color:#00ff8c;font-size:22px}.referral-rules-grid span{display:block;color:#cbd5ea;margin-top:5px}.customer-table{width:100%;border-collapse:collapse;min-width:760px}.customer-table th,.customer-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}.customer-table th{color:#fff;text-transform:uppercase;font-size:12px}.good-text{color:#00ff8c}.bad-text{color:#ff445a}
@media(max-width:900px){.referral-hero-grid,.referral-rules-grid{grid-template-columns:1fr}.referral-card-actions{justify-content:flex-start}}

/* Cart responsive polish - push to stacked layout earlier to avoid cramped controls */
@media (max-width:1180px){
  .cart-layout{
    grid-template-columns:1fr !important;
    gap:26px;
  }
  .checkout-card{
    width:100%;
    max-width:none;
  }
  .cart-item{
    display:grid !important;
    grid-template-columns:1fr;
    justify-items:center;
    align-items:center;
    text-align:center;
    gap:18px;
    padding:22px 28px;
  }
  .cart-product-main{
    width:100%;
    justify-content:center;
    align-items:center;
  }
  .cart-price-actions{
    width:100%;
    justify-content:center;
    align-items:center !important;
    flex-direction:row !important;
    flex-wrap:wrap;
    gap:16px;
  }
  .cart-qty{
    justify-content:center;
  }
}

@media (max-width:640px){
  .cart-product-main{
    flex-direction:column;
    text-align:center;
  }
  .cart-thumb{
    width:min(210px,72vw);
    height:auto;
    aspect-ratio:16/9;
  }
  .cart-price-actions{
    flex-direction:column !important;
  }
}


/* License key unified display + state color */
.license-key-action{
  text-align:center !important;
}
.license-key-action .license-action-type{
  display:block !important;
  width:100% !important;
  color:var(--muted) !important;
  font-size:11px !important;
  line-height:1.15 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  margin-bottom:4px !important;
}
.license-key-action .license-action-label{
  display:block !important;
  width:100% !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:1000 !important;
  line-height:1.2 !important;
  letter-spacing:.8px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.license-key-action.key-state-expired .license-action-label{
  color:#ff4054 !important;
}
.license-key-action.key-state-ok .license-action-label,
.license-key-action.key-state-manual .license-action-label{
  color:#fff !important;
}


/* VForceTech UI Sync - Phase 3: panel/card correct corner geometry */


/* VForceTech UI Sync - Phase 3: panel/card correct corner geometry
   Outer frame: square top-left + bottom-right red corners, rounded top-right + bottom-left.
   Inner frame: rounded 4 corners. */
.panel-box,
.cyber-panel,
.cyber-frame,
.admin-card,
.update-card,
.setting-card,
.notif-card,
.revenue-detail-card,
.mini-card,
.help-public-preview .help-item,
.help-article-row,
.kc-node {
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(255,31,55,.72) !important;
  border-radius:0 14px 0 14px !important;
  background:linear-gradient(180deg,rgba(15,20,31,.74),rgba(5,8,15,.86)) !important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.06),0 0 38px rgba(255,19,45,.08) !important;
}

.panel-box::before,
.cyber-panel::before,
.cyber-frame::before,
.admin-card::before,
.update-card::before,
.setting-card::before,
.notif-card::before,
.revenue-detail-card::before,
.mini-card::before,
.help-public-preview .help-item::before,
.help-article-row::before,
.kc-node::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
linear-gradient(135deg,#ff1f37 0 20px,transparent 21px) top left/90px 90px no-repeat,
linear-gradient(315deg,#ff1f37 0 20px,transparent 21px) bottom right/90px 90px no-repeat !important;
  opacity:.85 !important;
  z-index:0 !important;
  border-radius:0 !important;
}

.panel-box::after,
.cyber-panel::after,
.cyber-frame::after,
.admin-card::after,
.update-card::after,
.setting-card::after,
.notif-card::after,
.revenue-detail-card::after,
.mini-card::after,
.help-public-preview .help-item::after,
.help-article-row::after,
.kc-node::after {
  content:"" !important;
  position:absolute !important;
  inset:12px !important;
  pointer-events:none !important;
  border:1px solid rgba(255,31,55,.26) !important;
  border-radius:10px !important;
  clip-path:none !important;
  background:none !important;
  z-index:0 !important;
}

.panel-box > *,
.cyber-panel > *,
.cyber-frame > *,
.admin-card > *,
.update-card > *,
.setting-card > *,
.notif-card > *,
.revenue-detail-card > *,
.mini-card > *,
.help-public-preview .help-item > *,
.help-article-row > *,
.kc-node > * {
  position:relative;
  z-index:1;
}


/* VForceTech UI Sync - Phase 4.1 global fix */

/* VForceTech UI Sync - Phase 4.1 fix
   - Giữ Phase 1 button: cắt góc trái trên + phải dưới, không bo tròn.
   - Đồng bộ form controls: input/select/textarea bo tròn thống nhất.
*/
button:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.license-key-reveal):not(.copy-license-key),
a.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.copy-license-key),
.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.copy-license-key),
button.ghost:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn),
.btn.ghost:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.copy-license-key),
.account-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,#e11d2e 0%,#b10f1e 100%) !important;
  color:#fff;
  font-weight:900 !important;
  cursor:pointer !important;
  min-height:44px !important;
  padding:0 20px !important;
  text-decoration:none !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px) !important;
  box-shadow:0 0 24px rgba(225,29,46,.22) !important;
}
button:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.license-key-reveal):not(.copy-license-key):hover,
a.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.copy-license-key):hover,
.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.copy-license-key):hover,
.account-btn:hover {
  filter:brightness(1.1);
  transform:translateY(-1px);
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.admin-input,
.admin-select,
.admin-textarea,
.secretbar input,
.toolbar input,
.toolbar select,
.help-form input,
.help-form textarea,
.kc-form input,
.kc-form select,
.kc-form textarea,
.setting-card input,
.setting-card select {
  border-radius:10px !important;
}
textarea,
.admin-textarea {
  border-radius:12px !important;
}


/* =========================================================
   VFORCETECH STORE UI SYNC - PHASE 7.1
   Store Design System base
   - Button: red, cut top-left + bottom-right.
   - Outer content frame: red corner triangles top-left + bottom-right,
     rounded top-right + bottom-left, with an inner rounded frame.
   - Inner content/card/badge/media blocks: rounded 4 corners only.
   ========================================================= */

:root{
  --vft-store-red:#ff132d;
  --vft-store-red-dark:#b10f1e;
  --vft-store-green:#31ff90;
  --vft-store-panel:rgba(7,10,18,.82);
  --vft-store-panel-2:rgba(5,8,15,.72);
  --vft-store-border:rgba(255,19,45,.72);
  --vft-store-border-soft:rgba(255,19,45,.28);
  --vft-btn-cut:14px;
  --vft-frame-radius:16px;
  --vft-inner-radius:12px;
}

/* ---------- PHASE 7.1 BUTTON BASE ----------
   Only real clickable actions become red cut buttons.
   License/download/status/badge/tag blocks are excluded and handled below. */
button:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.support-article-head):not(.support-nav-btn):not(.support-category-card):not(.support-step-card):not(.license-key-reveal):not(.copy-license-key),
a.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.license-action):not(.license-key-action):not(.license-download-small):not(.support-nav-btn):not(.copy-license-key),
.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.license-action):not(.license-key-action):not(.license-download-small):not(.support-nav-btn):not(.copy-license-key),
.account-btn,
.checkout-btn,
.cart-checkout-btn,
.hero-actions .btn,
.customer-actions .btn,
.voucher-row .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:46px !important;
  padding:0 22px !important;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  font-weight:1000 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  background:linear-gradient(90deg,var(--vft-store-red) 0%,var(--vft-store-red-dark) 100%) !important;
  clip-path:polygon(
    var(--vft-btn-cut) 0,
    100% 0,
    100% calc(100% - var(--vft-btn-cut)),
    calc(100% - var(--vft-btn-cut)) 100%,
    0 100%,
    0 var(--vft-btn-cut)
  ) !important;
  box-shadow:0 0 24px rgba(255,19,45,.24) !important;
  transition:filter .15s ease,transform .15s ease,box-shadow .15s ease !important;
}

button:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.filter-btn):not(.key-filter-btn):not(.support-article-head):not(.support-nav-btn):not(.support-category-card):not(.support-step-card):not(.license-key-reveal):not(.copy-license-key):hover,
a.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.license-action):not(.license-key-action):not(.license-download-small):not(.support-nav-btn):not(.copy-license-key):hover,
.btn:not(.tab):not(.tab-btn):not(.admin-tab-btn):not(.license-action):not(.license-key-action):not(.license-download-small):not(.support-nav-btn):not(.copy-license-key):hover,
.account-btn:hover,
.checkout-btn:hover,
.cart-checkout-btn:hover,
.hero-actions .btn:hover,
.customer-actions .btn:hover,
.voucher-row .btn:hover{
  filter:brightness(1.12) !important;
  transform:translateY(-1px);
  box-shadow:0 0 30px rgba(255,19,45,.36) !important;
}

button:disabled,
.btn:disabled,
.account-btn:disabled{
  opacity:.48 !important;
  cursor:not-allowed !important;
  filter:none !important;
  transform:none !important;
}

/* ---------- PHASE 7.1 OUTER CONTENT FRAME ----------
   Apply to large content wrappers only. This is the only style that has
   red corner triangles. */
.cyber-frame,
.cyber-panel,
.panel-box,
.customer-panel,
.account-content-head,
.support-quick-panel,
.support-section-block,
.cart-panel,
.checkout-panel,
.payment-panel,
.order-panel,
.product-detail-panel,
.product-info-panel,
.product-media-panel,
.reseller-card,
.affiliate-card,
.referral-card,
.news-panel,
.download-panel,
.license-panel{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid var(--vft-store-border) !important;
  border-radius:0 var(--vft-frame-radius) 0 var(--vft-frame-radius) !important;
  background:linear-gradient(180deg,rgba(15,20,31,.76),rgba(5,8,15,.88)) !important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.055),0 0 36px rgba(255,19,45,.08) !important;
  clip-path:none !important;
}

.cyber-frame::before,
.cyber-panel::before,
.panel-box::before,
.customer-panel::before,
.account-content-head::before,
.support-quick-panel::before,
.support-section-block::before,
.cart-panel::before,
.checkout-panel::before,
.payment-panel::before,
.order-panel::before,
.product-detail-panel::before,
.product-info-panel::before,
.product-media-panel::before,
.reseller-card::before,
.affiliate-card::before,
.referral-card::before,
.news-panel::before,
.download-panel::before,
.license-panel::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.9 !important;
  background:
    linear-gradient(135deg,var(--vft-store-red) 0 24px,transparent 25px) top left/110px 110px no-repeat,
    linear-gradient(315deg,var(--vft-store-red) 0 24px,transparent 25px) bottom right/110px 110px no-repeat !important;
}

.cyber-frame::after,
.cyber-panel::after,
.panel-box::after,
.customer-panel::after,
.account-content-head::after,
.support-quick-panel::after,
.support-section-block::after,
.cart-panel::after,
.checkout-panel::after,
.payment-panel::after,
.order-panel::after,
.product-detail-panel::after,
.product-info-panel::after,
.product-media-panel::after,
.reseller-card::after,
.affiliate-card::after,
.referral-card::after,
.news-panel::after,
.download-panel::after,
.license-panel::after{
  content:"" !important;
  position:absolute !important;
  inset:12px !important;
  pointer-events:none !important;
  z-index:0 !important;
  border:1px solid var(--vft-store-border-soft) !important;
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
  background:none !important;
}

.cyber-frame > *,
.cyber-panel > *,
.panel-box > *,
.customer-panel > *,
.account-content-head > *,
.support-quick-panel > *,
.support-section-block > *,
.cart-panel > *,
.checkout-panel > *,
.payment-panel > *,
.order-panel > *,
.product-detail-panel > *,
.product-info-panel > *,
.product-media-panel > *,
.reseller-card > *,
.affiliate-card > *,
.referral-card > *,
.news-panel > *,
.download-panel > *,
.license-panel > *{
  position:relative;
  z-index:1;
}

/* ---------- PHASE 7.1 INNER CONTENT/CARD BASE ----------
   No red triangles here. These are inner blocks shown inside the outer frame. */
.account-side a,
.account-side button,
.account-content-card,
.customer-line,
.customer-activity-item,
.customer-help-item,
.support-nav-panel,
.support-nav-btn,
.support-category-card,
.support-step-card,
.support-article-body,
.support-game,
.support-product,
.support-search-panel,
.product-card,
.product-image-wrap,
.detail-image-wrap,
.product-media-wrap,
.steam-preview,
.home-video-live-media,
.video-preview,
.video-modal-panel-vft,
.cart-item,
.cart-thumb,
.payment-method,
.order-item,
.news-item,
.download-item,
.license-item,
.kc-preview,
.customer-badge,
.customer-order-status,
.status-pill,
.badge,
.pill,
.tag,
.price-pill,
.time-pill,
.expire-pill,
.license-action,
.license-key-action,
.license-download-small,
.no-download-btn{
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
  overflow:hidden;
}

/* Account sidebar tabs are tab-like inner blocks, not red-cut buttons. */
.account-side a,
.account-side button,
.support-nav-btn{
  background:rgba(5,8,15,.58) !important;
  border:1px solid rgba(255,19,45,.36) !important;
  color:#e7ecfa !important;
}
.account-side a.active,
.account-side a:hover,
.account-side button:hover,
.support-nav-btn.active,
.support-nav-btn:hover{
  background:rgba(255,19,45,.18) !important;
  border-color:rgba(255,19,45,.78) !important;
  color:#fff !important;
  box-shadow:0 0 22px rgba(255,19,45,.14) !important;
}

/* Status/Time/Expire/Order state chips: keep current colors, just rounded. */
.customer-badge,
.customer-order-status,
.status-pill,
.badge,
.pill,
.tag,
.price-pill,
.time-pill,
.expire-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:28px !important;
  padding:6px 10px !important;
  white-space:nowrap !important;
}

/* License key and private download blocks must look like rounded info/link blocks, not red action buttons. */
.license-action,
.license-key-action,
.license-download-small,
.no-download-btn{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  padding:12px 16px !important;
  text-align:center !important;
  border:1px solid rgba(255,19,45,.55) !important;
  background:linear-gradient(180deg,rgba(16,10,20,.72),rgba(8,10,18,.82)) !important;
  box-shadow:inset 0 0 22px rgba(255,19,45,.055) !important;
  color:#fff !important;
  text-decoration:none !important;
  transform:none !important;
}
.license-action:hover,
.license-key-action:hover,
.license-download-small:hover,
.no-download-btn:hover{
  filter:brightness(1.08) !important;
  transform:none !important;
  border-color:rgba(49,255,144,.72) !important;
}

/* Product/media containment base. Detailed product tuning is Phase 7.4,
   but 7.1 prevents obvious overflow now. */
.product-image-wrap,
.detail-image-wrap,
.product-media-wrap,
.steam-preview,
.home-video-live-media,
.video-preview{
  max-width:100% !important;
  overflow:hidden !important;
}
.product-image-wrap img,
.detail-image-wrap img,
.product-media-wrap img,
.steam-preview img,
.home-video-live-media img,
.video-preview img,
.product-card img{
  display:block !important;
  max-width:100% !important;
  object-fit:cover !important;
}

/* Keep circular icon/video play controls circular, not affected by rounded card rules. */
.video-play,
.steam-play,
.home-video-live-play,
#cart-count,
.mini-benefits b,
.feature-icon{
  border-radius:50% !important;
  clip-path:none !important;
}

/* ================================
   VFORCETECH STORE UI - PHASE 7.2
   Account Center layout sync
   - Sidebar is tab-style, not outer panel frame.
   - Account content panels use outer frame only once.
   - Inner account rows/cards use rounded 4-corner cards.
   - Status/time/expire/order chips rounded, colors preserved.
   ================================ */

/* Account layout spacing */
.account-center-layout{
  display:grid !important;
  grid-template-columns:292px minmax(0,1fr) !important;
  gap:26px !important;
  align-items:start !important;
}
.account-content{
  min-width:0 !important;
}

/* Sidebar: remove panel-box outer triangle frame; only tab buttons remain */
.account-side,
.account-side.panel-box{
  position:sticky !important;
  top:104px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:visible !important;
  clip-path:none !important;
}
.account-side::before,
.account-side::after,
.account-side.panel-box::before,
.account-side.panel-box::after{
  display:none !important;
  content:none !important;
}
.account-side-title{
  display:none !important;
}

.account-side a,
.account-side button{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:62px !important;
  margin:0 0 10px !important;
  padding:0 22px !important;
  border:1px solid rgba(255,19,45,.46) !important;
  border-radius:12px !important;
  background:rgba(6,9,17,.62) !important;
  color:#e7ecfa !important;
  font-family:inherit !important;
  font-size:17px !important;
  font-weight:1000 !important;
  text-decoration:none !important;
  text-align:left !important;
  clip-path:none !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.035) !important;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,color .15s ease !important;
}
.account-side a.active,
.account-side a:hover{
  background:linear-gradient(90deg,rgba(255,19,45,.92),rgba(255,19,45,.72)) !important;
  border-color:rgba(255,19,45,.95) !important;
  color:#fff !important;
  box-shadow:0 0 28px rgba(255,19,45,.22),inset 0 0 18px rgba(255,255,255,.045) !important;
  transform:translateY(-1px);
}

/* Logout remains a real red cut button */
.account-side #customer-side-logout{
  justify-content:center !important;
  margin-top:18px !important;
  min-height:58px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,var(--vft-store-red) 0%,var(--vft-store-red-dark) 100%) !important;
  color:#fff !important;
  clip-path:polygon(
    var(--vft-btn-cut) 0,
    100% 0,
    100% calc(100% - var(--vft-btn-cut)),
    calc(100% - var(--vft-btn-cut)) 100%,
    0 100%,
    0 var(--vft-btn-cut)
  ) !important;
  box-shadow:0 0 24px rgba(255,19,45,.26) !important;
}
.account-side #customer-side-logout:hover{
  background:linear-gradient(90deg,var(--vft-store-red) 0%,var(--vft-store-red-dark) 100%) !important;
  filter:brightness(1.12) !important;
  transform:translateY(-1px) !important;
}

/* Account section title block follows outer panel geometry, content stays inside inner border */
.account-content-head{
  padding:34px 38px !important;
  margin-bottom:20px !important;
}
.account-content-head h2{
  margin:0 0 8px !important;
  font-size:34px !important;
  line-height:1.1 !important;
}
.account-content-head p:last-child{
  margin-bottom:0 !important;
}

/* Large account content panels: one outer frame only */
.customer-panel,
.reseller-account-card,
.referral-points-card,
.referral-center-panel,
.account-license-only{
  padding:34px 38px !important;
  border-radius:0 var(--vft-frame-radius) 0 var(--vft-frame-radius) !important;
}
.customer-panel h2,
.reseller-account-card h3,
.referral-points-card h3,
.referral-center-panel h2{
  margin-top:0 !important;
}

/* Inner account cards/rows: rounded four-corner cards, no red triangles */
.customer-stat,
.customer-line,
.key-row,
.customer-help-item,
.customer-help-group,
.customer-activity-item,
.referral-link-box,
.referral-rules-grid article,
.fast-support-note,
.notice-box,
.invoice-meta p,
.invoice-key{
  border-radius:12px !important;
  clip-path:none !important;
  overflow:hidden !important;
  background:rgba(5,8,15,.46) !important;
  border:1px solid rgba(255,19,45,.28) !important;
  box-shadow:inset 0 0 22px rgba(255,19,45,.035) !important;
}
.customer-stat::before,
.customer-stat::after,
.customer-line::before,
.customer-line::after,
.key-row::before,
.key-row::after,
.customer-help-item::before,
.customer-help-item::after,
.customer-help-group::before,
.customer-help-group::after,
.customer-activity-item::before,
.customer-activity-item::after,
.referral-link-box::before,
.referral-link-box::after,
.referral-rules-grid article::before,
.referral-rules-grid article::after{
  display:none !important;
  content:none !important;
}

.customer-stat{
  padding:22px 24px !important;
}
.customer-line{
  padding:16px 18px !important;
  margin:10px 0 !important;
  border-bottom:1px solid rgba(255,19,45,.28) !important;
}
.customer-line:last-child{
  border-bottom:1px solid rgba(255,19,45,.28) !important;
}
.customer-line.link-line:hover{
  color:#fff !important;
  border-color:rgba(255,19,45,.7) !important;
  background:rgba(255,19,45,.075) !important;
  box-shadow:0 0 22px rgba(255,19,45,.12) !important;
}
.customer-help-item,
.customer-help-group,
.customer-activity-item{
  padding:14px 16px !important;
  margin:10px 0 !important;
}
.referral-link-box{
  padding:18px !important;
  margin:16px 0 !important;
}
.referral-rules-grid article{
  padding:16px !important;
}

/* Status/expiration/order chips: preserve existing colors, only make them rounded and clean */
.customer-badge,
.customer-order-status,
.order-status,
.order-countdown,
.invoice-key,
.price-pill,
.time-pill,
.expire-pill,
.status-pill,
.badge,
.pill{
  border-radius:10px !important;
  clip-path:none !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.customer-badge,
.customer-order-status,
.order-status{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:8px 12px !important;
}
.order-countdown{
  min-height:40px !important;
  padding:8px 14px !important;
}

/* License/download info blocks in Account Center remain rounded blocks, not cut buttons */
.purchased-license-list .copy-code,
.key-row .copy-code,
.license-list .copy-code,
#account-license-keys .copy-code{
  border-radius:12px !important;
  clip-path:none !important;
  border:1px solid rgba(255,19,45,.55) !important;
  background:linear-gradient(180deg,rgba(16,10,20,.72),rgba(8,10,18,.84)) !important;
  box-shadow:inset 0 0 22px rgba(255,19,45,.055) !important;
}

/* Inputs inside account/settings/referral keep rounded inner-card language */
.customer-profile-form input,
.referral-link-box input{
  border-radius:10px !important;
  background:rgba(7,10,18,.76) !important;
  border:1px solid rgba(255,19,45,.4) !important;
}

@media(max-width:980px){
  .account-center-layout{
    grid-template-columns:1fr !important;
  }
  .account-side,
  .account-side.panel-box{
    position:static !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .account-side a,
  .account-side button{
    margin:0 !important;
  }
  .account-side #customer-side-logout{
    grid-column:1/-1 !important;
  }
}
@media(max-width:620px){
  .account-side,
  .account-side.panel-box{
    grid-template-columns:1fr !important;
  }
  .account-content-head,
  .customer-panel,
  .reseller-account-card,
  .referral-points-card,
  .referral-center-panel,
  .account-license-only{
    padding:30px 24px !important;
  }
}

/* ================================
   VFORCETECH STORE UI - PHASE 7.3
   License / Private Download block sync
   - These blocks are information/link cards, not red cut buttons.
   - Bigger vertical spacing so LICENSE KEY text is not squeezed.
   - Private Download content is vertically centered.
   ================================ */

.license-action-stack{
  width:390px !important;
  max-width:min(100%,46vw) !important;
  display:grid !important;
  gap:12px !important;
  align-content:center !important;
}

.license-action-stack .license-action,
.license-action,
.license-key-action,
.license-download-small,
.no-download-btn,
.purchased-license-list .copy-code,
.key-row .copy-code,
.license-list .copy-code,
#account-license-keys .copy-code{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:58px !important;
  padding:12px 18px !important;
  gap:7px !important;
  border-radius:12px !important;
  clip-path:none !important;
  border:1px solid rgba(255,19,45,.62) !important;
  background:linear-gradient(180deg,rgba(16,10,20,.72),rgba(8,10,18,.86)) !important;
  box-shadow:inset 0 0 22px rgba(255,19,45,.055) !important;
  text-align:center !important;
  text-decoration:none !important;
  transform:none !important;
  overflow:hidden !important;
}

.license-key-action,
.key-card .license-action,
.license-action-stack .license-key-action{
  min-height:64px !important;
  padding-top:13px !important;
  padding-bottom:13px !important;
}

.download-card .license-action,
.license-download-small,
.no-download-btn,
.license-action-stack .license-download-small{
  min-height:64px !important;
  padding-top:13px !important;
  padding-bottom:13px !important;
}

.license-action-type,
.license-key-action .license-action-type,
.license-action .license-action-type{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.15 !important;
  letter-spacing:2.6px !important;
  text-transform:uppercase !important;
  font-weight:1000 !important;
}

.license-action-label,
.license-key-action .license-action-label,
.license-action .license-action-label{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 8px !important;
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:1000 !important;
  letter-spacing:.8px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.download-card .license-action-label,
.license-download-small .license-action-label,
.no-download-btn .license-action-label{
  color:var(--green) !important;
  letter-spacing:1.2px !important;
}

.license-action:hover,
.license-key-action:hover,
.license-download-small:hover,
.no-download-btn:hover{
  filter:brightness(1.08) !important;
  transform:none !important;
  border-color:rgba(49,255,144,.72) !important;
  box-shadow:inset 0 0 24px rgba(49,255,144,.045),0 0 22px rgba(49,255,144,.10) !important;
}

@media(max-width:760px){
  .license-action-stack{
    width:100% !important;
    max-width:100% !important;
  }
  .license-action,
  .license-key-action,
  .license-download-small,
  .no-download-btn{
    min-height:62px !important;
  }
  .license-action-label,
  .license-key-action .license-action-label,
  .license-action .license-action-label{
    white-space:normal !important;
  }
}

/* ================================
   VFORCETECH STORE UI - PHASE 7.4
   Product Detail / Product Media containment
   - Media (image/video) stays inside the inner rounded content area.
   - Product detail media uses 4-corner rounded card style, not outer red-corner panel.
   - Prevents images, video previews, iframes and thumbnails from overflowing the inner frame.
   ================================ */

/* Product detail outer panel keeps Phase 7.1 frame, but gives content more breathing room
   so media never touches/overlaps the outer red corner frame. */
.detail-card.cyber-panel,
.detail-card.panel-box,
.detail-card.product-detail-panel{
  padding:38px !important;
  gap:30px !important;
  align-items:stretch !important;
}

/* Product media is an inner content card: rounded 4 corners only. No red corner triangles. */
.detail-card .detail-image-wrap,
.detail-card .product-media-wrap,
.detail-card .steam-preview,
.product-card .product-image-wrap,
.product-card .product-media-wrap{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
  border:1px solid rgba(255,19,45,.42) !important;
  background:rgba(5,8,15,.72) !important;
  box-shadow:inset 0 0 30px rgba(255,19,45,.055) !important;
}

/* Do not let inner media receive outer panel red triangle pseudo elements. */
.detail-card .detail-image-wrap::before,
.detail-card .detail-image-wrap::after,
.detail-card .product-media-wrap::before,
.detail-card .product-media-wrap::after,
.detail-card .steam-preview::before,
.product-card .product-image-wrap::before,
.product-card .product-image-wrap::after{
  display:none !important;
  content:none !important;
}

/* Product detail image/video sizing. */
.detail-card .detail-image-wrap,
.detail-card .product-media-wrap{
  align-self:stretch !important;
  min-height:0 !important;
  max-height:none !important;
}

.detail-card .detail-image-wrap > img,
.detail-card .product-media-wrap > img,
.detail-card .steam-preview > img,
.product-card .product-image-wrap > img,
.product-card img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
}

/* Static image detail needs a stable visual ratio without spilling outside the card. */
.detail-card .detail-image-wrap > img{
  aspect-ratio:16/10 !important;
  min-height:420px !important;
}

/* Video preview card inside product detail. */
.product-media-wrap .steam-preview,
.detail-image-wrap .steam-preview,
.detail-card .steam-preview{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:420px !important;
  aspect-ratio:16/10 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:var(--vft-inner-radius) !important;
  border:0 !important;
  background:#05070d !important;
}

.product-media-wrap .steam-preview > img,
.detail-image-wrap .steam-preview > img,
.detail-card .steam-preview > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Inline video iframe after click must remain clipped inside the preview card. */
.steam-inline-frame,
.product-media-wrap iframe,
.detail-image-wrap iframe,
.detail-card iframe{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:420px !important;
  border:0 !important;
  border-radius:var(--vft-inner-radius) !important;
  overflow:hidden !important;
}

/* Overlay/title/play button stay inside the rounded media card. */
.steam-preview-title{
  left:22px !important;
  right:22px !important;
  bottom:20px !important;
  max-width:calc(100% - 44px) !important;
}
.steam-preview-title b,
.steam-preview-title span{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.steam-play,
.stock-badge.detail{
  z-index:4 !important;
}
.stock-badge.detail{
  right:16px !important;
  top:16px !important;
  border-radius:10px !important;
}

/* Product cards on listing/home: image must stay inside image card, never leak into outer card border. */
.product-card{
  overflow:hidden !important;
}
.product-card .product-image-wrap{
  margin:0 !important;
  aspect-ratio:16/9 !important;
}
.product-card .product-image-wrap > img,
.product-card img{
  height:100% !important;
  min-height:0 !important;
}

/* Info side also behaves as an inner area; long text/changelog cannot overflow the outer frame. */
.detail-card .detail-info{
  min-width:0 !important;
  overflow:hidden !important;
  padding-right:2px !important;
}
.detail-card .lead,
.detail-card .notice-box,
.product-changelog{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}
.product-changelog{
  border-radius:var(--vft-inner-radius) !important;
}

@media(max-width:900px){
  .detail-card.cyber-panel,
  .detail-card.panel-box,
  .detail-card.product-detail-panel{
    padding:28px !important;
    gap:22px !important;
  }
  .detail-card .detail-image-wrap > img,
  .product-media-wrap .steam-preview,
  .detail-image-wrap .steam-preview,
  .detail-card .steam-preview,
  .steam-inline-frame,
  .product-media-wrap iframe,
  .detail-image-wrap iframe,
  .detail-card iframe{
    min-height:260px !important;
    aspect-ratio:16/9 !important;
  }
}


/* ================================
   VFORCETECH STORE UI - PHASE 7.5
   Global cleanup + Home product listing media containment
   - Home/store product cards now keep product image inside inner rounded frame.
   - Badges/time/status/price/pills get rounded 4 corners.
   - Product card outer frame keeps red corner triangles only once.
   - Inner product body/media stays rounded, no red triangle pseudo elements.
   ================================ */

/* HOME / STORE PRODUCT LISTING FIX
   Product cards are outer panels, but the image area inside must be a rounded 4-corner inner card. */
.product-grid .product-card{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid var(--vft-store-border) !important;
  border-radius:0 var(--vft-frame-radius) 0 var(--vft-frame-radius) !important;
  background:linear-gradient(180deg,rgba(15,20,31,.76),rgba(5,8,15,.88)) !important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.055),0 0 36px rgba(255,19,45,.08) !important;
  clip-path:none !important;
  padding:10px !important;
}

.product-grid .product-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.9 !important;
  background:
    linear-gradient(135deg,var(--vft-store-red) 0 24px,transparent 25px) top left/110px 110px no-repeat,
    linear-gradient(315deg,var(--vft-store-red) 0 24px,transparent 25px) bottom right/110px 110px no-repeat !important;
}

.product-grid .product-card::after{
  content:"" !important;
  position:absolute !important;
  inset:12px !important;
  pointer-events:none !important;
  z-index:0 !important;
  border:1px solid var(--vft-store-border-soft) !important;
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
  background:none !important;
}

.product-grid .product-card > *{
  position:relative !important;
  z-index:1 !important;
}

/* Image is inside the inner content area, not touching the outer red frame. */
.product-grid .product-card .product-image-wrap{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  margin:0 !important;
  border-radius:var(--vft-inner-radius) var(--vft-inner-radius) 0 0 !important;
  overflow:hidden !important;
  clip-path:none !important;
  border:1px solid rgba(255,19,45,.32) !important;
  background:rgba(5,8,15,.72) !important;
  box-shadow:inset 0 0 28px rgba(255,19,45,.05) !important;
}

.product-grid .product-card .product-image-wrap::before,
.product-grid .product-card .product-image-wrap::after{
  display:none !important;
  content:none !important;
}

.product-grid .product-card .product-image-wrap img,
.product-grid .product-card > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-width:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
}

/* Product body stays inside inner rounded area and does not touch the outer frame. */
.product-grid .product-card .inner{
  position:relative !important;
  z-index:1 !important;
  margin:0 !important;
  padding:26px 24px 22px !important;
  border-left:1px solid rgba(255,19,45,.32) !important;
  border-right:1px solid rgba(255,19,45,.32) !important;
  border-bottom:1px solid rgba(255,19,45,.32) !important;
  border-radius:0 0 var(--vft-inner-radius) var(--vft-inner-radius) !important;
  background:linear-gradient(180deg,rgba(8,12,22,.78),rgba(5,8,15,.88)) !important;
  overflow:hidden !important;
}

/* Product button remains Phase 7 red-cut, but sits inside body padding. */
.product-grid .product-card .btn{
  width:100% !important;
  margin-top:14px !important;
}

/* Stock badges are status chips, not sharp blocks. */
.stock-badge,
.stock-badge.ok,
.stock-badge.detail,
.product-grid .stock-badge{
  border-radius:10px !important;
  clip-path:none !important;
  overflow:hidden !important;
  min-height:36px !important;
  padding:8px 13px !important;
  border-width:1px !important;
  box-shadow:0 0 20px rgba(0,0,0,.22) !important;
}

/* Generic chip cleanup: only rounded four-corner blocks for state/time/price. */
.order-status,
.order-countdown,
.customer-badge,
.customer-order-status,
.admin-status,
.badge,
.pill,
.tag,
.price,
.price-pill,
.time-pill,
.expire-pill,
.status-pill,
.stock-badge,
.new-pill,
.order-meta-pill{
  border-radius:10px !important;
  clip-path:none !important;
}

/* Price text itself must not become a red button-like block. */
.price{
  display:inline-block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Inner cards/lists: no red corner triangles, just rounded. */
.customer-line,
.key-row,
.license-row,
.order-link,
.order-items > *,
.support-resource-card,
.support-resource-game,
.support-knowledge-card,
.support-related button,
.support-article-body,
.support-locked-box,
.support-release-box,
.support-changelog-item,
.voucher-checkout-box,
.points-checkout-box,
.reseller-checkout-box,
.reseller-account-card .reseller-rate-grid span,
.referral-rules-grid article,
.referral-link-box,
.payment-method-card,
.qr-box,
.qr-empty,
.bank-info,
.copy-code,
.invoice-card,
.invoice-meta p,
.invoice-key{
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
  overflow:hidden !important;
}

/* Remove accidental red-triangle pseudo elements from inner-only cards. */
.customer-line::before,.customer-line::after,
.key-row::before,.key-row::after,
.license-row::before,.license-row::after,
.order-link::before,.order-link::after,
.support-resource-card::before,.support-resource-card::after,
.support-resource-game::before,.support-resource-game::after,
.support-knowledge-card::before,.support-knowledge-card::after,
.support-article-body::before,.support-article-body::after,
.support-locked-box::before,.support-locked-box::after,
.support-release-box::before,.support-release-box::after,
.support-changelog-item::before,.support-changelog-item::after,
.voucher-checkout-box::before,.voucher-checkout-box::after,
.points-checkout-box::before,.points-checkout-box::after,
.reseller-checkout-box::before,.reseller-checkout-box::after,
.referral-link-box::before,.referral-link-box::after,
.payment-method-card::before,.payment-method-card::after,
.qr-box::before,.qr-box::after,
.qr-empty::before,.qr-empty::after,
.copy-code::before,.copy-code::after,
.invoice-card::before,.invoice-card::after,
.invoice-meta p::before,.invoice-meta p::after,
.invoice-key::before,.invoice-key::after{
  display:none !important;
  content:none !important;
}

/* Media global safety net. */
img,
video,
iframe{
  max-width:100%;
}
.product-image-wrap,
.detail-image-wrap,
.product-media-wrap,
.steam-preview,
.home-video-live-media,
.video-preview-fixed,
.video-direct-wrap,
.video-modal-panel,
.video-modal-panel-vft{
  overflow:hidden !important;
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
}
.product-image-wrap img,
.detail-image-wrap img,
.product-media-wrap img,
.steam-preview img,
.video-preview-fixed img,
.video-direct-wrap img,
.home-video-live-media img{
  display:block !important;
  max-width:100% !important;
  object-fit:cover !important;
}

/* Account / Store responsive cleanup */
@media(max-width:900px){
  .product-grid .product-card{
    padding:8px !important;
  }
  .product-grid .product-card .inner{
    padding:22px 18px 18px !important;
  }
  .product-grid .stock-badge{
    right:12px !important;
    top:12px !important;
  }
}

/* ================================
   VFORCETECH STORE UI - PHASE 7.6
   Final product/video polish
   1) Stock badges become compact chips at image corner.
   2) Product detail video/media is vertically centered and keeps image background visible.
   3) Home video preview removes red cut-button frame behind video.
   ================================ */

/* 1. Compact stock badge on product cards/detail media */
.stock-badge,
.stock-badge.ok,
.stock-badge.detail,
.product-grid .stock-badge,
.detail-card .stock-badge,
.product-media-wrap .stock-badge{
  position:absolute !important;
  left:auto !important;
  right:16px !important;
  top:16px !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;
  min-height:34px !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:7px 13px !important;
  border-radius:10px !important;
  clip-path:none !important;
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:.8px !important;
  white-space:nowrap !important;
  z-index:8 !important;
}
.product-grid .product-card .stock-badge{
  right:16px !important;
  top:16px !important;
}

/* 2. Product detail media: fill/center the left media column instead of sticking to top */
.detail-card.cyber-panel,
.detail-card.panel-box,
.detail-card.product-detail-panel{
  align-items:stretch !important;
}
.detail-card .detail-image-wrap,
.detail-card .product-media-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100% !important;
  height:100% !important;
  padding:18px !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.42)),
    rgba(5,8,15,.72) !important;
}
.detail-card .detail-image-wrap > img,
.detail-card .product-media-wrap > img{
  position:absolute !important;
  inset:18px !important;
  width:calc(100% - 36px) !important;
  height:calc(100% - 36px) !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:.34 !important;
  filter:saturate(1.05) contrast(1.08) brightness(.66) !important;
  border-radius:var(--vft-inner-radius) !important;
  z-index:1 !important;
}
.detail-card .product-media-wrap .steam-preview,
.detail-card .detail-image-wrap .steam-preview,
.detail-card .steam-preview{
  position:relative !important;
  z-index:3 !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  aspect-ratio:16/9 !important;
  align-self:center !important;
  margin:auto !important;
  border:1px solid rgba(255,19,45,.42) !important;
  border-radius:var(--vft-inner-radius) !important;
  box-shadow:0 0 34px rgba(0,0,0,.35), inset 0 0 26px rgba(255,19,45,.055) !important;
}
.detail-card .product-media-wrap .steam-preview > img,
.detail-card .detail-image-wrap .steam-preview > img,
.detail-card .steam-preview > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  filter:saturate(1.05) contrast(1.08) brightness(.78) !important;
  border-radius:0 !important;
}
.steam-inline-frame,
.product-media-wrap iframe,
.detail-image-wrap iframe,
.detail-card iframe{
  min-height:0 !important;
  aspect-ratio:16/9 !important;
  border-radius:var(--vft-inner-radius) !important;
}
.detail-card .steam-preview.playing{
  background:#000 !important;
}
.detail-card .steam-preview.playing iframe,
.detail-card .steam-preview.playing .steam-inline-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Fallback: when there is no video preview, keep image centered and full instead of faded background */
.detail-card .detail-image-wrap:not(:has(.steam-preview)) > img,
.detail-card .product-media-wrap:not(:has(.steam-preview)) > img{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  min-height:420px !important;
  opacity:1 !important;
  filter:saturate(1.05) contrast(1.08) brightness(.86) !important;
  z-index:2 !important;
}

/* 3. Home video preview: remove the red cut-button frame behind the video. */
.home-video-live,
.video-shell.video-direct-card,
.video-shell.video-steam-card,
.video-shell.video-inline-card{
  clip-path:none !important;
  border-radius:0 var(--vft-frame-radius) 0 var(--vft-frame-radius) !important;
  overflow:hidden !important;
}
.home-video-live::before,
.video-shell.video-direct-card::before,
.video-shell.video-steam-card::before,
.video-shell.video-inline-card::before{
  display:none !important;
  content:none !important;
  background:none !important;
}
.home-video-live::after,
.video-shell.video-direct-card::after,
.video-shell.video-steam-card::after,
.video-shell.video-inline-card::after{
  inset:12px !important;
  border:1px solid rgba(255,19,45,.30) !important;
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
  background:none !important;
}
.home-video-live-media,
.video-direct-wrap,
.steam-preview{
  border-radius:var(--vft-inner-radius) !important;
  clip-path:none !important;
}

@media(max-width:900px){
  .stock-badge,
  .stock-badge.ok,
  .stock-badge.detail,
  .product-grid .stock-badge{
    right:12px !important;
    top:12px !important;
    min-height:32px !important;
    padding:7px 11px !important;
    font-size:11px !important;
  }
  .detail-card .detail-image-wrap,
  .detail-card .product-media-wrap{
    min-height:320px !important;
    padding:14px !important;
  }
}

/* ================================
   VFORCETECH STORE UI - PHASE 7.8
   Targeted correction after 7.7
   1) License plans are inner rounded cards: black by default, red only when selected.
   2) Product media: product image fills whole left media area; video preview is centered;
      the frame follows the real 16:9 video size with a 5px frame allowance.
   3) Home video: remove accidental red button/cut background from video trigger,
      keep only the proper outer panel + inner rounded video frame.
   ================================ */

/* 1. License package cards are NOT action buttons */
.plans,
.detail-card .plans{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:13px !important;
}
.plans .plan,
.detail-card .plans .plan,
button.plan,
a.plan{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:92px !important;
  padding:16px 18px !important;
  border:1px solid rgba(255,19,45,.48) !important;
  border-radius:12px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(8,12,22,.86),rgba(5,8,15,.94)) !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.035) !important;
  color:#fff !important;
  text-align:center !important;
  cursor:pointer !important;
  overflow:hidden !important;
  transform:none !important;
}
.plans .plan::before,
.plans .plan::after,
button.plan::before,
button.plan::after,
a.plan::before,
a.plan::after{
  display:none !important;
  content:none !important;
}
.plans .plan:hover,
button.plan:hover,
a.plan:hover{
  border-color:rgba(49,255,144,.72) !important;
  box-shadow:0 0 22px rgba(49,255,144,.10), inset 0 0 24px rgba(255,19,45,.035) !important;
  filter:none !important;
  transform:none !important;
}
.plans .plan.selected,
.plans .plan.active,
button.plan.selected,
button.plan.active,
a.plan.selected,
a.plan.active{
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  border-color:rgba(255,19,45,.88) !important;
  box-shadow:0 0 24px rgba(255,19,45,.24), inset 0 0 18px rgba(255,255,255,.04) !important;
}
.plans .plan b,
button.plan b,
a.plan b{
  position:relative !important;
  z-index:1 !important;
  font-size:24px !important;
  line-height:1.1 !important;
}
.plans .plan .price,
button.plan .price,
a.plan .price{
  position:relative !important;
  z-index:1 !important;
  margin-top:10px !important;
  color:var(--green) !important;
  font-size:20px !important;
  font-weight:1000 !important;
}

/* 2. Product detail media: background product image fills the whole media column. */
.detail-card .detail-image-wrap,
.detail-card .product-media-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:640px !important;
  height:100% !important;
  padding:0 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#05070d !important;
}
.detail-card .detail-image-wrap > img,
.detail-card .product-media-wrap > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:.34 !important;
  filter:saturate(1.08) contrast(1.08) brightness(.60) !important;
  border:0 !important;
  border-radius:0 !important;
  z-index:1 !important;
}

/* If no video exists, show image normally. */
.detail-card .detail-image-wrap:not(:has(.steam-preview)) > img,
.detail-card .product-media-wrap:not(:has(.steam-preview)) > img{
  position:relative !important;
  opacity:1 !important;
  filter:saturate(1.05) contrast(1.08) brightness(.86) !important;
  z-index:2 !important;
}

/* The red frame follows the actual video preview size, with 5px frame padding around it. */
.detail-card .product-media-wrap .steam-preview,
.detail-card .detail-image-wrap .steam-preview,
.detail-card .steam-preview{
  position:relative !important;
  z-index:3 !important;
  width:calc(100% - 72px) !important;
  max-width:1180px !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16/9 !important;
  margin:auto !important;
  padding:5px !important;
  border:1px solid rgba(255,19,45,.62) !important;
  border-radius:12px !important;
  background:#020308 !important;
  box-shadow:0 0 32px rgba(0,0,0,.42), inset 0 0 22px rgba(255,19,45,.055) !important;
  overflow:hidden !important;
  clip-path:none !important;
  transform:none !important;
}
.detail-card .product-media-wrap .steam-preview > img,
.detail-card .detail-image-wrap .steam-preview > img,
.detail-card .steam-preview > img,
.detail-card .steam-preview iframe,
.detail-card .steam-preview .steam-inline-frame{
  position:absolute !important;
  left:5px !important;
  top:5px !important;
  width:calc(100% - 10px) !important;
  height:calc(100% - 10px) !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:8px !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  z-index:1 !important;
}
.detail-card .steam-preview .steam-play,
.detail-card .steam-preview .steam-preview-title{
  z-index:4 !important;
}

/* 3. Home video: the video trigger itself must not inherit red cut-button CSS. */
.home-video-live,
.video-shell.video-direct-card,
.video-shell.video-steam-card,
.video-shell.video-inline-card{
  position:relative !important;
  padding:24px !important;
  border:1px solid var(--vft-store-border) !important;
  border-radius:0 var(--vft-frame-radius) 0 var(--vft-frame-radius) !important;
  background:linear-gradient(180deg,rgba(15,20,31,.76),rgba(5,8,15,.88)) !important;
  box-shadow:inset 0 0 48px rgba(255,19,45,.055),0 0 36px rgba(255,19,45,.08) !important;
  clip-path:none !important;
  overflow:hidden !important;
}
.home-video-live::before,
.video-shell.video-direct-card::before,
.video-shell.video-steam-card::before,
.video-shell.video-inline-card::before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.9 !important;
  background:
    linear-gradient(135deg,var(--vft-store-red) 0 24px,transparent 25px) top left/110px 110px no-repeat,
    linear-gradient(315deg,var(--vft-store-red) 0 24px,transparent 25px) bottom right/110px 110px no-repeat !important;
}
.home-video-live::after,
.video-shell.video-direct-card::after,
.video-shell.video-steam-card::after,
.video-shell.video-inline-card::after{
  content:"" !important;
  position:absolute !important;
  inset:12px !important;
  pointer-events:none !important;
  z-index:0 !important;
  border:1px solid var(--vft-store-border-soft) !important;
  border-radius:var(--vft-inner-radius) !important;
  background:none !important;
  clip-path:none !important;
}
.home-video-live > *,
.video-shell.video-direct-card > *,
.video-shell.video-steam-card > *,
.video-shell.video-inline-card > *{
  position:relative !important;
  z-index:1 !important;
}
.home-video-live-media,
button.home-video-live-media,
.video-direct-wrap,
button.video-direct-wrap,
.video-shell.video-steam-card .steam-preview,
.video-shell.video-inline-card .steam-preview{
  display:block !important;
  width:calc(100% - 10px) !important;
  margin:5px auto !important;
  padding:0 !important;
  border:1px solid rgba(255,19,45,.42) !important;
  border-radius:12px !important;
  background:#000 !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.055) !important;
  clip-path:none !important;
  overflow:hidden !important;
  transform:none !important;
}
button.home-video-live-media,
button.video-direct-wrap,
.video-shell.video-steam-card button.steam-preview,
.video-shell.video-inline-card button.steam-preview{
  color:#fff !important;
  min-height:0 !important;
  cursor:pointer !important;
}
.home-video-live-media::before,
.home-video-live-media::after,
.video-direct-wrap::before,
.video-direct-wrap::after,
.video-shell.video-steam-card .steam-preview::before,
.video-shell.video-steam-card .steam-preview::after,
.video-shell.video-inline-card .steam-preview::before,
.video-shell.video-inline-card .steam-preview::after{
  display:none !important;
  content:none !important;
}

@media(max-width:900px){
  .plans,
  .detail-card .plans{
    grid-template-columns:1fr !important;
  }
  .detail-card .detail-image-wrap,
  .detail-card .product-media-wrap{
    min-height:320px !important;
  }
  .detail-card .product-media-wrap .steam-preview,
  .detail-card .detail-image-wrap .steam-preview,
  .detail-card .steam-preview{
    width:calc(100% - 28px) !important;
  }
  .home-video-live,
  .video-shell.video-direct-card,
  .video-shell.video-steam-card,
  .video-shell.video-inline-card{
    padding:16px !important;
  }
}

/* ================================
   VFORCETECH STORE UI - PHASE 7.9
   Correct product detail only
   1) Product media fills the existing left inner frame; video/image cover that frame.
      IN STOCK stays as a compact badge above the media.
   2) License plans are dark rounded cards by default; selected is red.
   ================================ */

/* Product detail left media: keep the existing large frame, but make the media fill it. */
.detail-card .detail-image-wrap,
.detail-card .product-media-wrap{
  position:relative !important;
  display:block !important;
  min-height:640px !important;
  height:100% !important;
  padding:0 !important;
  border:1px solid rgba(255,19,45,.42) !important;
  border-radius:12px !important;
  background:#05070d !important;
  overflow:hidden !important;
}

/* Main product image becomes full background of the whole media frame. */
.detail-card .detail-image-wrap > img,
.detail-card .product-media-wrap > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  filter:saturate(1.05) contrast(1.08) brightness(.72) !important;
  border:0 !important;
  border-radius:0 !important;
  z-index:1 !important;
}

/* Video preview covers the same frame area instead of becoming a small floating box. */
.detail-card .product-media-wrap .steam-preview,
.detail-card .detail-image-wrap .steam-preview,
.detail-card .steam-preview{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:12px !important;
  background:#05070d !important;
  box-shadow:none !important;
  overflow:hidden !important;
  clip-path:none !important;
  z-index:3 !important;
  aspect-ratio:auto !important;
}

.detail-card .product-media-wrap .steam-preview > img,
.detail-card .detail-image-wrap .steam-preview > img,
.detail-card .steam-preview > img,
.detail-card .steam-preview iframe,
.detail-card .steam-preview .steam-inline-frame{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  z-index:1 !important;
}

/* Keep video overlays above media. */
.detail-card .steam-preview .steam-play,
.detail-card .steam-preview .steam-preview-title{
  z-index:6 !important;
}

/* Stock badge stays compact and above video. */
.detail-card .stock-badge,
.detail-card .stock-badge.detail,
.detail-card .product-media-wrap .stock-badge,
.detail-card .detail-image-wrap .stock-badge{
  position:absolute !important;
  right:16px !important;
  top:16px !important;
  left:auto !important;
  z-index:10 !important;
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:7px 13px !important;
  border-radius:10px !important;
  clip-path:none !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* License packages: not red buttons by default. */
.detail-card .plans .plan,
.plans .plan,
button.plan,
a.plan{
  border:1px solid rgba(255,19,45,.48) !important;
  border-radius:12px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(8,12,22,.88),rgba(5,8,15,.96)) !important;
  color:#fff !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.035) !important;
  transform:none !important;
}
.detail-card .plans .plan::before,
.detail-card .plans .plan::after,
.plans .plan::before,
.plans .plan::after,
button.plan::before,
button.plan::after,
a.plan::before,
a.plan::after{
  display:none !important;
  content:none !important;
}
.detail-card .plans .plan:hover,
.plans .plan:hover,
button.plan:hover,
a.plan:hover{
  border-color:rgba(49,255,144,.72) !important;
  background:linear-gradient(180deg,rgba(8,12,22,.88),rgba(5,8,15,.96)) !important;
  box-shadow:0 0 22px rgba(49,255,144,.10), inset 0 0 24px rgba(255,19,45,.035) !important;
  filter:none !important;
  transform:none !important;
}
.detail-card .plans .plan.selected,
.detail-card .plans .plan.active,
.plans .plan.selected,
.plans .plan.active,
button.plan.selected,
button.plan.active,
a.plan.selected,
a.plan.active{
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  border-color:rgba(255,19,45,.9) !important;
  box-shadow:0 0 24px rgba(255,19,45,.24), inset 0 0 18px rgba(255,255,255,.04) !important;
}

@media(max-width:900px){
  .detail-card .detail-image-wrap,
  .detail-card .product-media-wrap{
    min-height:320px !important;
  }
}

/* =========================================================
   VFORCETECH STORE UI - PHASE 7.10
   FINAL license plan override
   Reason: global button rule has very high specificity, so plan cards
   need an even more specific selector to stop looking like red cut buttons.
   ========================================================= */
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:96px !important;
  padding:16px 18px !important;
  border:1px solid rgba(255,19,45,.48) !important;
  border-radius:12px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(8,12,22,.92),rgba(5,8,15,.98)) !important;
  color:#fff !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.035) !important;
  transform:none !important;
  filter:none !important;
  text-align:center !important;
  cursor:pointer !important;
  overflow:hidden !important;
}
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan::before,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan::after,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan::before,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan::after,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan::before,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan::after{
  display:none !important;
  content:none !important;
  background:none !important;
}
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan:hover,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan:hover,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan:hover{
  border-color:rgba(49,255,144,.72) !important;
  background:linear-gradient(180deg,rgba(8,12,22,.92),rgba(5,8,15,.98)) !important;
  box-shadow:0 0 22px rgba(49,255,144,.10), inset 0 0 24px rgba(255,19,45,.035) !important;
  transform:none !important;
  filter:none !important;
}
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan.selected,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan.active,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan.selected,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan.active,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan.selected,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan.active{
  border-color:rgba(255,19,45,.92) !important;
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  box-shadow:0 0 24px rgba(255,19,45,.24), inset 0 0 18px rgba(255,255,255,.04) !important;
}
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan b,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan b,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan b{
  font-size:24px !important;
  line-height:1.1 !important;
}
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans button.plan.plan.plan .price,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans a.plan.plan.plan .price,
html body main .detail-card.detail-card .detail-info.detail-info .plans.plans .plan.plan.plan .price{
  margin-top:10px !important;
  color:var(--green) !important;
  font-size:20px !important;
  font-weight:1000 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}


/* =========================================================
   VFORCETECH STORE UI - SUPPORT PHASE 1
   Support navigation/article tiles are inner rounded cards.
   They are NOT red cut action buttons by default.
   Active/selected/hover can turn red.
   Real action buttons like Copy link, Download, Login, Clear keep
   the existing red cut-button style.
   ========================================================= */

/* Support click-to-open tiles: black rounded by default */
html body .support-step-card,
html body button.support-step-card,
html body a.support-step-card,
html body .support-category-card,
html body button.support-category-card,
html body a.support-category-card,
html body .support-nav-btn,
html body button.support-nav-btn,
html body a.support-nav-btn,
html body .support-related button,
html body .support-game > summary,
html body .support-product > summary,
html body .support-article-head,
html body button.support-article-head,
html body .support-knowledge-card,
html body .support-resource-card,
html body .support-resource-game,
html body .support-changelog-item{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  border:1px solid rgba(255,31,55,.38) !important;
  border-radius:12px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(8,12,22,.88),rgba(5,8,15,.96)) !important;
  color:#fff !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.035) !important;
  text-decoration:none !important;
  overflow:hidden !important;
  transform:none !important;
}

/* Remove red triangle/cut pseudo-elements from inner support tiles */
html body .support-step-card::before,
html body .support-step-card::after,
html body .support-category-card::before,
html body .support-category-card::after,
html body .support-nav-btn::before,
html body .support-nav-btn::after,
html body .support-related button::before,
html body .support-related button::after,
html body .support-game > summary::before,
html body .support-game > summary::after,
html body .support-product > summary::before,
html body .support-product > summary::after,
html body .support-article-head::before,
html body .support-article-head::after,
html body .support-knowledge-card::before,
html body .support-knowledge-card::after,
html body .support-resource-card::before,
html body .support-resource-card::after,
html body .support-resource-game::before,
html body .support-resource-game::after,
html body .support-changelog-item::before,
html body .support-changelog-item::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* Support quick 1-7 cards keep their card layout, not button layout */
html body .support-step-card,
html body button.support-step-card,
html body a.support-step-card{
  min-height:150px !important;
  padding:16px 14px !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
html body .support-step-card em{
  color:rgba(255,255,255,.36) !important;
  font-size:22px !important;
  line-height:1 !important;
}
html body .support-step-card b{
  color:#fff !important;
  font-size:14px !important;
  line-height:1.25 !important;
}
html body .support-step-card span{
  color:#c5ccdc !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
html body .support-step-card strong{
  color:var(--green) !important;
  font-size:12px !important;
}

/* Category/support tiles are rounded black cards until active/selected */
html body .support-category-card,
html body button.support-category-card,
html body a.support-category-card{
  min-height:74px !important;
  padding:14px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
html body .support-category-card span{
  color:rgba(255,255,255,.28) !important;
}
html body .support-category-card b,
html body .support-category-card strong{
  color:#fff !important;
}
html body .support-category-card small{
  color:#c5ccdc !important;
}

/* Left nav tabs */
html body .support-nav-panel{
  border-radius:12px !important;
  background:rgba(5,8,15,.48) !important;
}
html body .support-nav-btn,
html body button.support-nav-btn,
html body a.support-nav-btn{
  min-height:48px !important;
  padding:0 16px !important;
  margin:0 0 10px !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Article/list rows: rounded black by default */
html body .support-article-head,
html body button.support-article-head{
  width:100% !important;
  min-height:58px !important;
  margin:8px 0 !important;
  padding:12px 18px !important;
  justify-content:center !important;
  text-align:center !important;
}
html body .support-article{
  border-top:0 !important;
}
html body .support-article-head small{
  color:rgba(255,255,255,.32) !important;
  margin-bottom:4px !important;
}
html body .support-article-head b{
  color:#fff !important;
}
html body .support-article-head i{
  color:#ff3148 !important;
}

/* Related/article cards */
html body .support-related button{
  min-height:54px !important;
  padding:12px 16px !important;
}

/* Active/open/selected/hover state can be red */
html body .support-step-card:hover,
html body .support-step-card.active,
html body .support-step-card.selected,
html body .support-category-card:hover,
html body .support-category-card.active,
html body .support-category-card.selected,
html body .support-nav-btn:hover,
html body .support-nav-btn.active,
html body .support-nav-btn.selected,
html body .support-related button:hover,
html body .support-related button.active,
html body .support-game[open] > summary,
html body .support-product[open] > summary,
html body .support-article.open .support-article-head,
html body .support-article-head:hover{
  border-color:rgba(255,31,55,.88) !important;
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  color:#fff !important;
  box-shadow:0 0 24px rgba(255,19,45,.22), inset 0 0 18px rgba(255,255,255,.04) !important;
  transform:none !important;
  filter:none !important;
}

/* Keep real support action buttons as red cut buttons */
html body .support-article-actions .btn,
html body .support-lock-actions .btn,
html body .support-resource-actions .btn,
html body .skc-actions .btn,
html body .support-video-btn,
html body button.support-video-btn,
html body a.support-video-btn,
html body .copy-link-btn,
html body .download-link-btn,
html body .support-download-btn,
html body .support-login-btn,
html body .support-clear-btn{
  border-radius:0 !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px) !important;
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  color:#fff !important;
  border:0 !important;
}

@media(max-width:720px){
  html body .support-step-card{min-height:auto !important;}
}

/* =========================================================
   VFORCETECH SUPPORT UI - REAL FINAL OVERRIDE
   Scope: Support / Knowledge Center only.
   - Article tabs, category tabs, quick-start steps, related articles:
     black rounded cards by default; red only on hover/active/open.
   - Real actions (.btn Copy link / Download / Login / Clear...) remain unchanged.
   ========================================================= */

/* Support navigation/category/article cards are NOT red cut buttons */
html body main .support-kc-box button.support-step-card,
html body main .support-kc-box button.support-category-card,
html body main .support-kc-box button.support-nav-btn,
html body main .support-kc-box button.support-article-head,
html body main .support-kc-box .support-related button,
html body main .support-kc-box .support-game > summary,
html body main .support-kc-box .support-product > summary,
html body main .support-section-block button.support-article-head,
html body main .support-section-block .support-related button,
html body main .support-quick-panel button.support-step-card,
html body main .support-category-grid button.support-category-card,
html body main .support-nav-panel button.support-nav-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:48px !important;
  padding:14px 16px !important;
  border:1px solid rgba(255,31,55,.42) !important;
  border-radius:12px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(8,12,22,.88),rgba(5,8,15,.96)) !important;
  color:#ffffff !important;
  box-shadow:inset 0 0 22px rgba(255,31,55,.035) !important;
  transform:none !important;
  filter:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
  text-align:left !important;
}

/* Remove fake red triangle/cut pseudo-elements from support navigation cards */
html body main .support-kc-box button.support-step-card::before,
html body main .support-kc-box button.support-step-card::after,
html body main .support-kc-box button.support-category-card::before,
html body main .support-kc-box button.support-category-card::after,
html body main .support-kc-box button.support-nav-btn::before,
html body main .support-kc-box button.support-nav-btn::after,
html body main .support-kc-box button.support-article-head::before,
html body main .support-kc-box button.support-article-head::after,
html body main .support-kc-box .support-related button::before,
html body main .support-kc-box .support-related button::after,
html body main .support-section-block button.support-article-head::before,
html body main .support-section-block button.support-article-head::after,
html body main .support-section-block .support-related button::before,
html body main .support-section-block .support-related button::after,
html body main .support-quick-panel button.support-step-card::before,
html body main .support-quick-panel button.support-step-card::after,
html body main .support-category-grid button.support-category-card::before,
html body main .support-category-grid button.support-category-card::after,
html body main .support-nav-panel button.support-nav-btn::before,
html body main .support-nav-panel button.support-nav-btn::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* Red only when the user points to it or it is the current/open item */
html body main .support-kc-box button.support-step-card:hover,
html body main .support-kc-box button.support-category-card:hover,
html body main .support-kc-box button.support-nav-btn:hover,
html body main .support-kc-box button.support-nav-btn.active,
html body main .support-kc-box button.support-article-head:hover,
html body main .support-kc-box .support-article.open > button.support-article-head,
html body main .support-kc-box .support-related button:hover,
html body main .support-kc-box .support-game > summary:hover,
html body main .support-kc-box .support-product > summary:hover,
html body main .support-section-block button.support-article-head:hover,
html body main .support-section-block .support-article.open > button.support-article-head,
html body main .support-section-block .support-related button:hover,
html body main .support-quick-panel button.support-step-card:hover,
html body main .support-category-grid button.support-category-card:hover,
html body main .support-nav-panel button.support-nav-btn:hover,
html body main .support-nav-panel button.support-nav-btn.active{
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  border-color:rgba(255,31,55,.92) !important;
  color:#fff !important;
  box-shadow:0 0 24px rgba(255,31,55,.24), inset 0 0 18px rgba(255,255,255,.04) !important;
  transform:none !important;
  filter:none !important;
}

/* Quick start 01-07 cards keep their internal vertical layout, but black by default */
html body main .support-quick-panel button.support-step-card,
html body main .support-kc-box button.support-step-card{
  min-height:150px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-align:center !important;
}
html body main .support-quick-panel button.support-step-card em,
html body main .support-kc-box button.support-step-card em{
  color:rgba(255,255,255,.34) !important;
  font-size:24px !important;
  line-height:1 !important;
}
html body main .support-quick-panel button.support-step-card b,
html body main .support-kc-box button.support-step-card b{
  color:#fff !important;
}
html body main .support-quick-panel button.support-step-card span,
html body main .support-kc-box button.support-step-card span{
  color:#cbd5e6 !important;
}
html body main .support-quick-panel button.support-step-card strong,
html body main .support-kc-box button.support-step-card strong{
  color:#31ff90 !important;
}

/* Category cards: black rounded grid cards by default */
html body main .support-category-grid button.support-category-card,
html body main .support-kc-box button.support-category-card{
  min-height:78px !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
}
html body main .support-category-grid button.support-category-card span,
html body main .support-kc-box button.support-category-card span{
  color:rgba(255,31,55,.55) !important;
  font-size:22px !important;
  line-height:1 !important;
}
html body main .support-category-grid button.support-category-card b,
html body main .support-kc-box button.support-category-card b{
  color:#fff !important;
}
html body main .support-category-grid button.support-category-card small,
html body main .support-kc-box button.support-category-card small{
  color:#aeb7cc !important;
}

/* Article rows and related rows: black rounded rows by default */
html body main .support-section-block button.support-article-head,
html body main .support-kc-box button.support-article-head,
html body main .support-section-block .support-related button,
html body main .support-kc-box .support-related button{
  width:100% !important;
  min-height:54px !important;
  margin:8px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}
html body main .support-section-block button.support-article-head small,
html body main .support-kc-box button.support-article-head small,
html body main .support-section-block .support-related button small,
html body main .support-kc-box .support-related button small{
  color:rgba(255,255,255,.32) !important;
}
html body main .support-section-block button.support-article-head b,
html body main .support-kc-box button.support-article-head b,
html body main .support-section-block .support-related button b,
html body main .support-kc-box .support-related button b{
  color:#fff !important;
}

/* Sidebar support nav: not button-cut */
html body main .support-nav-panel button.support-nav-btn{
  width:100% !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 0 10px !important;
}

/* Keep real action buttons untouched: Copy link / Download / Login / Clear etc. */
html body main .support-kc-box .btn,
html body main .support-section-block .btn,
html body main .support-quick-panel .btn,
html body main .support-lock-actions .btn,
html body main .support-article-actions .btn,
html body main .skc-actions .btn{
  border-radius:0 !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px) !important;
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  color:#fff !important;
}


/* =========================================================
   VFORCETECH SUPPORT UI - PHASE SUPPORT REAL PATCH 2
   URL scope: #/support
   Fix đúng các ô điều hướng/bài viết trong Support:
   - Mặc định: khung bo 4 góc, nền đen.
   - Hover/active/open/current: nền đỏ.
   - Button thật có class .btn vẫn giữ đỏ cắt góc.
   ========================================================= */

/* 1) Các ô click chuyển bài / danh mục / quick-step KHÔNG phải button đỏ cắt góc */
.support-step-card,
button.support-step-card,
a.support-step-card,
.support-category-card,
button.support-category-card,
a.support-category-card,
.support-nav-btn,
button.support-nav-btn,
a.support-nav-btn,
.support-article-head,
button.support-article-head,
a.support-article-head,
.support-related button,
.support-game > summary,
.support-product > summary,
.support-knowledge-card,
.skc-grid div,
.customer-help-group summary,
.customer-help-item summary {
  border:1px solid rgba(255,31,55,.42) !important;
  border-radius:12px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(8,12,22,.88),rgba(5,8,15,.96)) !important;
  color:#fff !important;
  box-shadow:inset 0 0 22px rgba(255,31,55,.035) !important;
  transform:none !important;
  filter:none !important;
}

/* 2) Xóa mọi góc cắt/tam giác/pseudo bị kế thừa */
.support-step-card::before,
.support-step-card::after,
.support-category-card::before,
.support-category-card::after,
.support-nav-btn::before,
.support-nav-btn::after,
.support-article-head::before,
.support-article-head::after,
.support-related button::before,
.support-related button::after,
.support-game > summary::before,
.support-game > summary::after,
.support-product > summary::before,
.support-product > summary::after,
.support-knowledge-card::before,
.support-knowledge-card::after,
.skc-grid div::before,
.skc-grid div::after,
.customer-help-group summary::before,
.customer-help-group summary::after,
.customer-help-item summary::before,
.customer-help-item summary::after {
  display:none !important;
  content:none !important;
  background:none !important;
  border:0 !important;
}

/* 3) Quick start 01-07: card đen bo 4 góc, căn giữa như card nội dung */
.support-quick-grid .support-step-card,
.support-quick-panel .support-step-card,
.support-kc-box .support-step-card {
  min-height:150px !important;
  padding:16px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-align:center !important;
}
.support-quick-grid .support-step-card em,
.support-quick-panel .support-step-card em,
.support-kc-box .support-step-card em {
  color:rgba(255,255,255,.34) !important;
}
.support-quick-grid .support-step-card strong,
.support-quick-panel .support-step-card strong,
.support-kc-box .support-step-card strong {
  color:#31ff90 !important;
}

/* 4) Danh mục hỗ trợ / sidebar tab */
.support-category-grid .support-category-card,
.support-nav-panel .support-nav-btn {
  min-height:54px !important;
  padding:12px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.support-category-grid .support-category-card span {
  color:rgba(255,31,55,.55) !important;
}

/* 5) Dòng bài viết mới nhất / bài liên quan: card đen bo 4 góc */
.support-article {
  border-top:0 !important;
}
.support-article .support-article-head,
.support-related button {
  width:100% !important;
  min-height:56px !important;
  margin:8px 0 !important;
  padding:12px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  text-align:left !important;
}
.support-article .support-article-head small,
.support-related button small {
  color:rgba(255,255,255,.34) !important;
}
.support-article .support-article-head b,
.support-related button b {
  color:#fff !important;
}

/* 6) Active/hover/open mới chuyển đỏ để biết đang chọn */
.support-step-card:hover,
.support-step-card.active,
.support-step-card.selected,
.support-category-card:hover,
.support-category-card.active,
.support-category-card.selected,
.support-nav-btn:hover,
.support-nav-btn.active,
.support-nav-btn.selected,
.support-article-head:hover,
.support-article.open > .support-article-head,
.support-related button:hover,
.support-game[open] > summary,
.support-product[open] > summary,
.customer-help-group[open] > summary,
.customer-help-item[open] > summary {
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  border-color:rgba(255,31,55,.92) !important;
  color:#fff !important;
  box-shadow:0 0 24px rgba(255,31,55,.24), inset 0 0 18px rgba(255,255,255,.04) !important;
}

/* 7) Những button thật vẫn giữ đúng kiểu đỏ cắt góc */
.support-kc-box .btn,
.support-section-block .btn,
.support-article-actions .btn,
.support-lock-actions .btn,
.support-resource-actions .btn,
.skc-actions .btn,
.support-video-btn,
a.support-video-btn,
button.support-video-btn,
.copy-link-btn,
.download-link-btn,
.support-download-btn,
.support-login-btn,
.support-clear-btn {
  border-radius:0 !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px) !important;
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  color:#fff !important;
  border:0 !important;
}

/* =========================================================
   VFORCETECH SUPPORT UI - FINAL SUPPORT TILE OVERRIDE
   Scope: chỉ các ô chuyển tab / chuyển bài trong #/support.
   Mặc định: nền tối bo 4 góc.
   Hover: đỏ nhạt.
   Active/Open/Selected: đỏ tươi.
   Các nút action thật (.btn: Copy link, Clear, Download, View Changelogs,
   Xem sản phẩm, Đăng nhập...) không bị đổi.
   ========================================================= */
#support-kc-box .support-nav-btn,
#support-kc-box .support-category-card,
#support-kc-box .support-step-card,
#support-kc-box .support-article-head,
#support-kc-box .support-related button,
#support-kc-box .support-game > summary,
#support-kc-box .support-product > summary,
.support-kc-box .support-nav-btn,
.support-kc-box .support-category-card,
.support-kc-box .support-step-card,
.support-kc-box .support-article-head,
.support-kc-box .support-related button,
.support-kc-box .support-game > summary,
.support-kc-box .support-product > summary,
.support-section-block .support-article-head,
.support-section-block .support-related button{
  border:1px solid rgba(255,31,55,.44) !important;
  border-radius:4px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(8,12,22,.92),rgba(4,7,14,.98)) !important;
  color:#fff !important;
  box-shadow:inset 0 0 22px rgba(255,31,55,.035) !important;
  transform:none !important;
  filter:none !important;
  overflow:hidden !important;
}

#support-kc-box .support-nav-btn::before,
#support-kc-box .support-nav-btn::after,
#support-kc-box .support-category-card::before,
#support-kc-box .support-category-card::after,
#support-kc-box .support-step-card::before,
#support-kc-box .support-step-card::after,
#support-kc-box .support-article-head::before,
#support-kc-box .support-article-head::after,
#support-kc-box .support-related button::before,
#support-kc-box .support-related button::after,
#support-kc-box .support-game > summary::before,
#support-kc-box .support-game > summary::after,
#support-kc-box .support-product > summary::before,
#support-kc-box .support-product > summary::after,
.support-kc-box .support-nav-btn::before,
.support-kc-box .support-nav-btn::after,
.support-kc-box .support-category-card::before,
.support-kc-box .support-category-card::after,
.support-kc-box .support-step-card::before,
.support-kc-box .support-step-card::after,
.support-kc-box .support-article-head::before,
.support-kc-box .support-article-head::after,
.support-kc-box .support-related button::before,
.support-kc-box .support-related button::after,
.support-kc-box .support-game > summary::before,
.support-kc-box .support-game > summary::after,
.support-kc-box .support-product > summary::before,
.support-kc-box .support-product > summary::after,
.support-section-block .support-article-head::before,
.support-section-block .support-article-head::after,
.support-section-block .support-related button::before,
.support-section-block .support-related button::after{
  display:none !important;
  content:none !important;
  background:none !important;
  border:0 !important;
}

#support-kc-box .support-step-card:hover,
#support-kc-box .support-category-card:hover,
#support-kc-box .support-nav-btn:hover,
#support-kc-box .support-article-head:hover,
#support-kc-box .support-related button:hover,
#support-kc-box .support-game > summary:hover,
#support-kc-box .support-product > summary:hover,
.support-kc-box .support-step-card:hover,
.support-kc-box .support-category-card:hover,
.support-kc-box .support-nav-btn:hover,
.support-kc-box .support-article-head:hover,
.support-kc-box .support-related button:hover,
.support-kc-box .support-game > summary:hover,
.support-kc-box .support-product > summary:hover,
.support-section-block .support-article-head:hover,
.support-section-block .support-related button:hover{
  background:linear-gradient(90deg,rgba(255,31,55,.34),rgba(165,10,25,.46)) !important;
  border-color:rgba(255,31,55,.72) !important;
  box-shadow:0 0 22px rgba(255,31,55,.14), inset 0 0 18px rgba(255,255,255,.035) !important;
  color:#fff !important;
}

#support-kc-box .support-nav-btn.active,
#support-kc-box .support-nav-btn.selected,
#support-kc-box .support-step-card.active,
#support-kc-box .support-step-card.selected,
#support-kc-box .support-category-card.active,
#support-kc-box .support-category-card.selected,
#support-kc-box .support-article.open > .support-article-head,
#support-kc-box .support-game[open] > summary,
#support-kc-box .support-product[open] > summary,
.support-kc-box .support-nav-btn.active,
.support-kc-box .support-nav-btn.selected,
.support-kc-box .support-step-card.active,
.support-kc-box .support-step-card.selected,
.support-kc-box .support-category-card.active,
.support-kc-box .support-category-card.selected,
.support-kc-box .support-article.open > .support-article-head,
.support-kc-box .support-game[open] > summary,
.support-kc-box .support-product[open] > summary,
.support-section-block .support-article.open > .support-article-head{
  background:linear-gradient(90deg,#ff132d 0%,#bd0d1f 100%) !important;
  border-color:rgba(255,31,55,.96) !important;
  box-shadow:0 0 24px rgba(255,31,55,.25), inset 0 0 18px rgba(255,255,255,.045) !important;
  color:#fff !important;
}

/* Bảo vệ các nút action thật trong Support: giữ style cũ, không thành card bo góc. */
#support-kc-box .btn,
.support-kc-box .btn,
.support-section-block .btn,
.support-article-actions .btn,
.support-lock-actions .btn,
.support-resource-actions .btn,
.skc-actions .btn,
#support-search-clear{
  border-radius:0 !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px) !important;
}

/* =========================================================
   VFORCETECH SUPPORT PATCH 3
   - Tăng khoảng cách trong các khung Support để chữ không sát viền.
   - Download & Changelog: desktop hiển thị dạng dòng ngang gọn;
     chỉ khi browser hẹp mới quay về card dọc như mobile/tablet.
   ========================================================= */

/* Khung lớn: nới padding + inner frame lùi vào sâu hơn */
html body main .support-section-block,
html body main .support-quick-panel{
  padding:34px 32px !important;
}
html body main .support-section-block::after,
html body main .support-quick-panel::after{
  inset:14px !important;
  border-radius:10px !important;
}
html body main .support-section-block > *,
html body main .support-quick-panel > *{
  position:relative !important;
  z-index:1 !important;
}
html body main .support-section-block h2,
html body main .support-quick-panel h2{
  margin-bottom:18px !important;
}
html body main .support-content-panel{
  min-width:0 !important;
}

/* Các ô bài viết / tab / danh mục: nới padding để chữ thoáng hơn */
#support-kc-box .support-article-head,
#support-kc-box .support-related button,
#support-kc-box .support-category-card,
#support-kc-box .support-nav-btn,
#support-kc-box .support-step-card,
#support-kc-box .support-game > summary,
#support-kc-box .support-product > summary,
.support-section-block .support-article-head,
.support-section-block .support-related button{
  padding:17px 20px !important;
}

/* Download & Changelog desktop: game title bên trái, mỗi product là 1 dòng ngang */
html body main .support-resource-wrap{
  display:grid !important;
  gap:16px !important;
}
html body main .support-resource-game{
  position:relative !important;
  display:grid !important;
  grid-template-columns:150px minmax(0,1fr) !important;
  gap:22px !important;
  align-items:center !important;
  padding:26px 28px !important;
  border:1px solid rgba(255,31,55,.36) !important;
  border-radius:10px !important;
  background:rgba(5,8,15,.42) !important;
  overflow:hidden !important;
}
html body main .support-resource-game h3{
  margin:0 !important;
  font-size:21px !important;
  line-height:1.25 !important;
  color:#fff !important;
}
html body main .support-resource-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  min-width:0 !important;
}
html body main .support-resource-card{
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(240px,1.05fr) minmax(170px,.8fr) minmax(240px,1fr) auto !important;
  gap:18px !important;
  align-items:center !important;
  padding:18px 20px !important;
  border:1px solid rgba(255,31,55,.42) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(8,12,22,.86),rgba(4,7,14,.96)) !important;
  box-shadow:inset 0 0 22px rgba(255,31,55,.035) !important;
}
html body main .support-resource-card.locked{
  opacity:1 !important;
  border-color:rgba(255,31,55,.30) !important;
}
html body main .support-resource-head,
html body main .support-resource-version,
html body main .support-resource-card p,
html body main .support-resource-actions{
  min-width:0 !important;
}
html body main .support-resource-head{
  gap:5px !important;
}
html body main .support-resource-head b,
html body main .support-resource-head small,
html body main .support-resource-card p{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body main .support-resource-head b{
  white-space:normal !important;
  line-height:1.25 !important;
}
html body main .support-resource-head small{
  white-space:nowrap !important;
}
html body main .support-resource-version{
  border-top:0 !important;
  padding-top:0 !important;
  white-space:nowrap !important;
  color:#cbd5e6 !important;
}
html body main .support-resource-card p{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  line-height:1.45 !important;
  margin:0 !important;
}
html body main .support-resource-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  margin:0 !important;
}
html body main .support-resource-actions .btn{
  min-width:132px !important;
  min-height:46px !important;
  white-space:nowrap !important;
}
html body main .support-resource-log{
  grid-column:1 / -1 !important;
  width:100% !important;
  margin-top:2px !important;
}

/* Trung bình: vẫn dạng dòng nhưng cho action xuống dòng nếu thiếu chỗ */
@media(max-width:1280px){
  html body main .support-resource-game{
    grid-template-columns:130px minmax(0,1fr) !important;
    padding:24px !important;
  }
  html body main .support-resource-card{
    grid-template-columns:minmax(220px,1fr) minmax(150px,.7fr) minmax(220px,1fr) !important;
  }
  html body main .support-resource-actions{
    grid-column:1 / -1 !important;
    justify-content:flex-start !important;
  }
}

/* Hẹp: quay về card dọc giống ảnh mobile/tablet */
@media(max-width:900px){
  html body main .support-section-block,
  html body main .support-quick-panel{
    padding:28px 22px !important;
  }
  html body main .support-resource-game{
    display:block !important;
    padding:20px !important;
  }
  html body main .support-resource-game h3{
    margin:0 0 14px !important;
  }
  html body main .support-resource-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:18px !important;
  }
  html body main .support-resource-version{
    border-top:1px solid rgba(255,255,255,.08) !important;
    padding-top:10px !important;
  }
  html body main .support-resource-card p{
    display:block !important;
  }
  html body main .support-resource-actions{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
}


/* =========================================================
   VFORCETECH SUPPORT PATCH 4
   Download & Changelog responsive reflow:
   - Không cắt title, release note hoặc button.
   - Khi khung bắt đầu chật: ghi chú xuống một hàng riêng.
   - Khi tiếp tục chật: nhóm button xuống hàng dưới.
   - Mobile: card dọc hoàn toàn, button co giãn đúng chiều rộng.
   ========================================================= */
html body main .support-resource-wrap{
  container-type:inline-size !important;
  container-name:support-download !important;
}
html body main .support-resource-head b,
html body main .support-resource-head small,
html body main .support-resource-card p{
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
html body main .support-resource-card p{
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  max-width:100% !important;
}
html body main .support-resource-actions{
  max-width:100% !important;
}
html body main .support-resource-actions .btn{
  max-width:100% !important;
}

/* Khung support thực tế hẹp hơn viewport vì còn sidebar.
   Dùng container query để xuống dòng theo đúng bề rộng khung, không theo browser. */
@container support-download (max-width:1100px){
  html body main .support-resource-game{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  html body main .support-resource-game h3{
    margin:0 0 4px !important;
  }
  html body main .support-resource-card{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:12px 18px !important;
    align-items:start !important;
  }
  html body main .support-resource-head{
    grid-column:1 !important;
  }
  html body main .support-resource-version{
    grid-column:2 !important;
    justify-self:end !important;
    align-self:center !important;
    white-space:nowrap !important;
  }
  html body main .support-resource-card > p{
    grid-column:1 / -1 !important;
    width:100% !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  html body main .support-resource-actions{
    grid-column:1 / -1 !important;
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
}

@container support-download (max-width:720px){
  html body main .support-resource-game{
    display:block !important;
    padding:20px !important;
  }
  html body main .support-resource-game h3{
    margin:0 0 14px !important;
  }
  html body main .support-resource-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:18px !important;
  }
  html body main .support-resource-version{
    width:100% !important;
    justify-self:stretch !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    padding-top:10px !important;
    white-space:normal !important;
  }
  html body main .support-resource-card > p{
    padding-top:0 !important;
    border-top:0 !important;
  }
  html body main .support-resource-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
  }
  html body main .support-resource-actions .btn{
    width:100% !important;
    min-width:0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

@container support-download (max-width:460px){
  html body main .support-resource-actions{
    grid-template-columns:1fr !important;
  }
}

/* Fallback cho browser chưa hỗ trợ container query. */
@media(max-width:1180px){
  html body main .support-resource-head b,
  html body main .support-resource-head small,
  html body main .support-resource-card p{
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
  }
  html body main .support-resource-card p{
    display:block !important;
    -webkit-line-clamp:unset !important;
  }
}
@media(max-width:900px){
  html body main .support-resource-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
  }
  html body main .support-resource-actions .btn{
    width:100% !important;
    min-width:0 !important;
  }
}
@media(max-width:520px){
  html body main .support-resource-actions{
    grid-template-columns:1fr !important;
  }
}

/* ===== VFT Referral / Reseller reward table polish ===== */
.referral-rules-grid{display:none!important;}
.reward-rate-panel{
  margin:18px 0 22px;
  border:1px solid rgba(255,31,55,.48);
  background:rgba(5,8,16,.52);
  border-radius:12px;
  overflow:hidden;
}
.reward-rate-toggle{
  width:100%!important;
  min-height:74px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:16px 20px!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:rgba(8,13,24,.82)!important;
  color:#fff!important;
  text-align:left!important;
  box-shadow:none!important;
}
.reward-rate-toggle:hover{
  background:rgba(255,31,55,.14)!important;
  filter:none!important;
  transform:none!important;
}
.reward-rate-toggle span{display:block;min-width:0;}
.reward-rate-toggle b{display:block;font-size:18px;line-height:1.25;}
.reward-rate-toggle small{display:block;color:var(--muted);font-size:13px;line-height:1.45;margin-top:5px;font-weight:800;}
.reward-rate-toggle i{font-style:normal;color:#ff3148;font-size:30px;line-height:1;transition:.16s;}
.reward-rate-panel.open .reward-rate-toggle i{transform:rotate(90deg);}
.reward-rate-body{
  border-top:1px solid rgba(255,31,55,.28);
  padding:16px 18px 18px;
}
.reward-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.reward-search-row input{
  height:48px!important;
  margin:0!important;
  border:1px solid rgba(255,31,55,.44)!important;
  background:#060a13!important;
  color:#fff!important;
  font-weight:800;
}
.reward-table-scroll{
  max-height:430px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(0,0,0,.18);
}
.reward-table{min-width:860px;}
.reward-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:#070b14;
  border-bottom:1px solid rgba(255,31,55,.32)!important;
}
.reward-table td{vertical-align:middle;}
.reward-table td small{
  display:block;
  color:#9ca6bb;
  font-size:12px;
  margin-top:4px;
  font-weight:800;
}
.reward-table tbody tr:hover{background:rgba(255,31,55,.08);}
.reseller-account-card .reward-rate-panel{margin-top:16px;margin-bottom:0;}
@media(max-width:760px){
  .reward-search-row{grid-template-columns:1fr;}
  .reward-search-row .btn{width:100%;}
  .reward-table-scroll{max-height:360px;}
}


/* ===== VFT final fix: referral/reseller reward title is a dark expandable header, not a red CTA ===== */
.referral-card .reward-rate-panel,
.reseller-account-card .reward-rate-panel,
.reward-rate-panel{
  border:1px solid rgba(255,31,55,.48) !important;
  background:rgba(5,8,16,.52) !important;
  border-radius:4px !important;
  overflow:hidden !important;
}
.referral-card .reward-rate-toggle,
.reseller-account-card .reward-rate-toggle,
.reward-rate-panel > .reward-rate-toggle,
button.reward-rate-toggle{
  width:100% !important;
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:14px 18px !important;
  border:1px solid rgba(255,31,55,.34) !important;
  border-radius:4px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(12,17,29,.92),rgba(5,8,16,.92)) !important;
  color:#fff !important;
  text-align:left !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.04) !important;
  transform:none !important;
  filter:none !important;
}
.referral-card .reward-rate-toggle:hover,
.reseller-account-card .reward-rate-toggle:hover,
.reward-rate-panel > .reward-rate-toggle:hover,
button.reward-rate-toggle:hover{
  background:rgba(255,31,55,.16) !important;
  border-color:rgba(255,31,55,.72) !important;
  box-shadow:0 0 22px rgba(255,19,45,.10), inset 0 0 24px rgba(255,19,45,.05) !important;
  transform:none !important;
  filter:none !important;
}
.reward-rate-panel.open > .reward-rate-toggle,
.reward-rate-panel.open button.reward-rate-toggle{
  background:linear-gradient(90deg,#e11d2e 0%,#b10f1e 100%) !important;
  border-color:rgba(255,31,55,.88) !important;
  box-shadow:0 0 24px rgba(255,19,45,.22) !important;
}
.reward-rate-toggle b{
  font-size:18px !important;
  line-height:1.25 !important;
}
.reward-rate-toggle small{
  display:none !important;
}
.reward-rate-toggle i{
  color:#ff4054 !important;
}
.reward-rate-panel.open .reward-rate-toggle i{
  color:#fff !important;
}

/* ===== VFT FINAL FIX: reward table header is NOT a red cut button =====
   Mục này bị global button style ép thành button đỏ cắt góc.
   Ép lại đúng style tile/tab: đóng = nền tối, hover = đỏ nhẹ, mở = đỏ tươi, không cắt góc. */
html body main .reward-rate-panel,
html body .customer-panel .reward-rate-panel,
html body .referral-card .reward-rate-panel,
html body .reseller-account-card .reward-rate-panel{
  margin:18px 0 22px !important;
  padding:0 !important;
  border:1px solid rgba(255,31,55,.46) !important;
  border-radius:4px !important;
  background:rgba(5,8,16,.52) !important;
  overflow:hidden !important;
  box-shadow:inset 0 0 30px rgba(255,19,45,.045) !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}
html body main .reward-rate-panel::before,
html body main .reward-rate-panel::after,
html body .customer-panel .reward-rate-panel::before,
html body .customer-panel .reward-rate-panel::after{
  display:none !important;
  content:none !important;
}
html body main button.reward-rate-toggle,
html body main .reward-rate-panel > button.reward-rate-toggle,
html body .customer-panel .reward-rate-panel > button.reward-rate-toggle,
html body .referral-card .reward-rate-panel > button.reward-rate-toggle,
html body .reseller-account-card .reward-rate-panel > button.reward-rate-toggle{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-height:58px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:14px 18px !important;
  margin:0 !important;
  border:1px solid rgba(255,31,55,.40) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,rgba(12,17,29,.94),rgba(5,8,16,.94)) !important;
  color:#fff !important;
  text-align:center !important;
  font-family:inherit !important;
  font-weight:1000 !important;
  cursor:pointer !important;
  box-shadow:inset 0 0 24px rgba(255,19,45,.045) !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  transform:none !important;
  filter:none !important;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease !important;
}
html body main button.reward-rate-toggle:hover,
html body main .reward-rate-panel > button.reward-rate-toggle:hover,
html body .customer-panel .reward-rate-panel > button.reward-rate-toggle:hover,
html body .referral-card .reward-rate-panel > button.reward-rate-toggle:hover,
html body .reseller-account-card .reward-rate-panel > button.reward-rate-toggle:hover{
  background:rgba(255,31,55,.16) !important;
  border-color:rgba(255,31,55,.72) !important;
  box-shadow:0 0 22px rgba(255,19,45,.10), inset 0 0 24px rgba(255,19,45,.055) !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  transform:none !important;
  filter:none !important;
}
html body main .reward-rate-panel.open > button.reward-rate-toggle,
html body .customer-panel .reward-rate-panel.open > button.reward-rate-toggle,
html body .referral-card .reward-rate-panel.open > button.reward-rate-toggle,
html body .reseller-account-card .reward-rate-panel.open > button.reward-rate-toggle{
  background:linear-gradient(90deg,#e11d2e 0%,#b10f1e 100%) !important;
  border-color:rgba(255,31,55,.88) !important;
  box-shadow:0 0 24px rgba(255,19,45,.22) !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}
html body main .reward-rate-toggle span,
html body main .reward-rate-toggle b{
  min-width:0 !important;
  text-align:center !important;
}
html body main .reward-rate-toggle b{
  display:inline !important;
  font-size:18px !important;
  line-height:1.25 !important;
}
html body main .reward-rate-toggle small{
  display:none !important;
}
html body main .reward-rate-toggle i{
  display:inline-block !important;
  margin-left:2px !important;
  color:#ff4054 !important;
  font-style:normal !important;
  font-size:24px !important;
  line-height:1 !important;
  transition:transform .16s ease,color .16s ease !important;
}
html body main .reward-rate-panel.open .reward-rate-toggle i{
  color:#fff !important;
  transform:rotate(90deg) !important;
}

/* ===== VFT FINAL OVERRIDE 2026-06-29: reward-rate header is a flat rounded title tile =====
   Closed: dark flat 4px radius, centered text.
   Hover: brighter dark tile.
   Open: red tile, then show table below via JS .open class. */
html body main section.reward-rate-panel,
html body main .customer-panel section.reward-rate-panel,
html body main .referral-center-panel section.reward-rate-panel,
html body main .reseller-account-card section.reward-rate-panel{
  margin:18px 0 22px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:4px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}
html body main section.reward-rate-panel::before,
html body main section.reward-rate-panel::after,
html body main .customer-panel section.reward-rate-panel::before,
html body main .customer-panel section.reward-rate-panel::after,
html body main .referral-center-panel section.reward-rate-panel::before,
html body main .referral-center-panel section.reward-rate-panel::after,
html body main .reseller-account-card section.reward-rate-panel::before,
html body main .reseller-account-card section.reward-rate-panel::after{
  display:none !important;
  content:none !important;
  background:none !important;
  border:0 !important;
}
html body main section.reward-rate-panel > button.reward-rate-toggle,
html body main .customer-panel section.reward-rate-panel > button.reward-rate-toggle,
html body main .referral-center-panel section.reward-rate-panel > button.reward-rate-toggle,
html body main .reseller-account-card section.reward-rate-panel > button.reward-rate-toggle,
html body button.reward-rate-toggle[data-reward-toggle]{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-height:54px !important;
  height:54px !important;
  margin:0 !important;
  padding:0 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:4px !important;
  background:#111827 !important;
  background-image:none !important;
  color:#ffffff !important;
  font-family:inherit !important;
  font-weight:1000 !important;
  text-align:center !important;
  cursor:pointer !important;
  box-shadow:inset 0 0 22px rgba(255,255,255,.025) !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  transform:none !important;
  filter:none !important;
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease !important;
}
html body main section.reward-rate-panel > button.reward-rate-toggle:hover,
html body main .customer-panel section.reward-rate-panel > button.reward-rate-toggle:hover,
html body main .referral-center-panel section.reward-rate-panel > button.reward-rate-toggle:hover,
html body main .reseller-account-card section.reward-rate-panel > button.reward-rate-toggle:hover,
html body button.reward-rate-toggle[data-reward-toggle]:hover{
  background:#1b2434 !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 0 24px rgba(255,255,255,.04),0 0 18px rgba(255,255,255,.035) !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  transform:none !important;
  filter:none !important;
}
html body main section.reward-rate-panel.open > button.reward-rate-toggle,
html body main .customer-panel section.reward-rate-panel.open > button.reward-rate-toggle,
html body main .referral-center-panel section.reward-rate-panel.open > button.reward-rate-toggle,
html body main .reseller-account-card section.reward-rate-panel.open > button.reward-rate-toggle{
  background:#e11d2e !important;
  background-image:none !important;
  border-color:#e11d2e !important;
  box-shadow:0 0 24px rgba(225,29,46,.22) !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}
html body main .reward-rate-toggle span,
html body main .reward-rate-toggle b,
html body button.reward-rate-toggle[data-reward-toggle] span,
html body button.reward-rate-toggle[data-reward-toggle] b{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  text-align:center !important;
  line-height:1.25 !important;
}
html body main .reward-rate-toggle b,
html body button.reward-rate-toggle[data-reward-toggle] b{
  font-size:18px !important;
  font-weight:1000 !important;
}
html body main .reward-rate-toggle small,
html body button.reward-rate-toggle[data-reward-toggle] small{
  display:none !important;
}
html body main .reward-rate-toggle i,
html body button.reward-rate-toggle[data-reward-toggle] i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  margin:0 0 0 2px !important;
  color:#ff4054 !important;
  font-style:normal !important;
  font-size:22px !important;
  line-height:1 !important;
  transition:transform .16s ease,color .16s ease !important;
}
html body main .reward-rate-panel.open .reward-rate-toggle i{
  color:#fff !important;
  transform:rotate(90deg) !important;
}
html body main section.reward-rate-panel > .reward-rate-body{
  margin-top:12px !important;
  border:1px solid rgba(255,31,55,.34) !important;
  border-radius:4px !important;
  background:rgba(5,8,16,.62) !important;
  overflow:hidden !important;
}


/* SUPPORT VIDEO EMBED - hiển thị video trực tiếp trong bài viết */
.support-video-embed{
  margin:0 0 16px;
  border:1px solid rgba(255,31,55,.42);
  background:rgba(5,8,15,.72);
  padding:10px;
  box-shadow:0 0 24px rgba(255,19,45,.08), inset 0 0 18px rgba(255,255,255,.03);
}
.support-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#050810;
}
.support-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.support-video-native{
  width:100%;
  display:block;
  background:#050810;
  aspect-ratio:16/9;
}
@supports not (aspect-ratio:16/9){
  .support-video-frame{height:0;padding-top:56.25%}
  .support-video-native{height:auto}
}

/* Phase 5 Reseller Key Inventory */
.reseller-key-panel{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,31,55,.22)}
.reseller-key-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.reseller-key-head h3{margin:4px 0 8px}
.reseller-key-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 14px}
.reseller-key-filter-row input,.reseller-key-filter-row select{min-width:240px}
.reseller-key-table-wrap{max-height:520px;overflow:auto;border:1px solid rgba(255,31,55,.24);border-radius:0 12px 0 12px;background:rgba(5,8,15,.24)}
.reseller-key-table-wrap table{width:100%;min-width:920px;border-collapse:collapse}
.reseller-key-table-wrap th{position:sticky;top:0;z-index:2;background:rgba(255,31,55,.14);color:#fff;text-align:left;padding:12px;border-bottom:1px solid rgba(255,31,55,.32);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.reseller-key-table-wrap td{padding:12px;border-bottom:1px solid rgba(255,255,255,.075);vertical-align:top;color:#dbe3f5}
.reseller-key-table-wrap td small{display:block;color:#aeb7cc;margin-top:4px}
.reseller-assign-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reseller-assign-row input{min-width:260px;flex:1 1 260px}
.reseller-assign-row .btn{flex:0 0 auto}
@media(max-width:760px){.reseller-key-head{display:block}.reseller-key-filter-row input,.reseller-key-filter-row select{width:100%;min-width:0}.reseller-assign-row input{width:100%;min-width:0}}

/* Phase 6 responsive status chips
   Status/time/license chips keep their rounded frame but move below content on narrow cards
   instead of shrinking until text is clipped. */
.customer-line{
  flex-wrap:wrap !important;
  align-items:flex-start !important;
}
.customer-line > div{
  min-width:0 !important;
  flex:1 1 180px !important;
}
.customer-line .customer-badge,
.customer-line .customer-order-status,
.customer-line .order-status,
.customer-line .order-countdown,
.customer-line .status-pill,
.customer-line .expire-pill,
.customer-line .time-pill{
  flex:0 0 auto !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:center !important;
  line-height:1.25 !important;
  word-break:keep-all !important;
}

@media(max-width:1280px){
  .two-col .customer-line,
  .customer-grid.two-col .customer-line{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }
  .two-col .customer-line .customer-badge,
  .two-col .customer-line .customer-order-status,
  .customer-grid.two-col .customer-line .customer-badge,
  .customer-grid.two-col .customer-line .customer-order-status{
    align-self:flex-start !important;
    width:auto !important;
  }
}

@media(max-width:760px){
  .customer-line .customer-badge,
  .customer-line .customer-order-status,
  .customer-line .order-status,
  .customer-line .order-countdown,
  .customer-line .status-pill,
  .customer-line .expire-pill,
  .customer-line .time-pill{
    width:100% !important;
    justify-content:center !important;
  }
}

/* ===== Phase 8 Reseller Account Center: collapsible license/inventory + responsive states ===== */
.account-collapse-btn{
  width:100% !important;
  min-height:58px !important;
  margin:16px 0 0 !important;
  padding:0 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:12px !important;
  background:rgba(7,11,20,.64) !important;
  color:#fff !important;
  font-weight:1000 !important;
  clip-path:none !important;
  box-shadow:inset 0 0 24px rgba(0,0,0,.16),0 0 18px rgba(255,31,55,.06) !important;
  cursor:pointer !important;
}
.account-collapse-btn:hover{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,31,55,.62) !important;
  transform:translateY(-1px);
}
.account-collapse-btn.active{
  background:rgba(225,29,46,.22) !important;
  border-color:rgba(255,31,55,.88) !important;
}
.account-collapse-btn b{font-size:24px;color:#00ff8c;line-height:1}
.account-toggle-panel{display:none;margin-top:14px;}
.account-toggle-panel.open{display:block;}
.reseller-license-page .purchased-license-list{margin-top:0;}

.reseller-key-panel{margin-top:0!important;padding-top:0!important;border-top:0!important;}
.reseller-key-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px;}
.reseller-key-head h3{margin:4px 0 8px;}
.reseller-key-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 14px;}
.reseller-key-filter-row input,.reseller-key-filter-row select{min-width:260px;flex:1 1 260px;}
.reseller-inventory-list{display:grid;gap:12px;max-height:620px;overflow:auto;padding-right:6px;}
.reseller-inventory-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 16px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(255,31,55,.24);
  border-radius:14px;
  background:rgba(5,8,15,.38);
}
.reseller-inventory-card.state-available{border-color:rgba(0,255,140,.42);}
.reseller-inventory-card.state-active{border-color:rgba(255,214,90,.50);}
.reseller-inventory-card.state-expired{border-color:rgba(255,31,55,.72);opacity:.86;}
.reseller-item-main{display:flex;align-items:center;gap:14px;min-width:0;}
.reseller-item-info{min-width:0;}
.reseller-item-info b{display:block;color:#fff;font-size:16px;line-height:1.3;}
.reseller-item-info small{display:block;color:#aeb7cc;margin-top:4px;line-height:1.35;}
.reseller-copy-chip{
  flex:0 0 auto;
  max-width:260px;
  min-height:44px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:10px !important;
  background:rgba(7,11,20,.78) !important;
  color:#fff !important;
  font-weight:1000 !important;
  clip-path:none !important;
  box-shadow:none !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reseller-copy-chip:hover{border-color:rgba(255,31,55,.78)!important;background:rgba(255,255,255,.10)!important;}
.reseller-copy-chip.state-available{border-color:rgba(0,255,140,.70)!important;color:#00ff8c!important;}
.reseller-copy-chip.state-active{border-color:rgba(255,214,90,.76)!important;color:#ffd66b!important;}
.reseller-copy-chip.state-expired{border-color:rgba(255,31,55,.82)!important;color:#ff5a6c!important;}
.reseller-state-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  white-space:nowrap;
}
.reseller-state-pill.state-available{border-color:rgba(0,255,140,.72);color:#00ff8c;background:rgba(0,255,140,.065);}
.reseller-state-pill.state-active{border-color:rgba(255,214,90,.74);color:#ffd66b;background:rgba(255,214,90,.07);}
.reseller-state-pill.state-expired{border-color:rgba(255,31,55,.82);color:#ff5a6c;background:rgba(255,31,55,.07);}
.reseller-assign-row{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.reseller-assign-row input{min-width:280px;flex:1 1 320px;}
.reseller-assign-row .btn{flex:0 0 auto;}
.reseller-confirm-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);}
.reseller-confirm-box{width:min(620px,calc(100vw - 32px));border:1px solid rgba(255,31,55,.72);border-radius:18px;background:rgba(7,10,18,.96);padding:26px;box-shadow:0 30px 120px rgba(0,0,0,.55);}
.reseller-confirm-box h3{margin:0 0 12px;color:#fff;font-size:24px;}
.reseller-confirm-box p{color:#cbd5ea;line-height:1.55;}
.reseller-confirm-email{margin:14px 0;padding:16px 18px;border:1px solid rgba(0,255,140,.65);border-radius:12px;background:rgba(0,255,140,.08);color:#00ff8c;font-size:24px;font-weight:1000;word-break:break-all;}
.reseller-confirm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
@media(max-width:820px){
  .reseller-inventory-card{grid-template-columns:1fr;}
  .reseller-item-main{display:block;}
  .reseller-copy-chip{width:100%;max-width:100%;margin-bottom:10px;}
  .reseller-item-state{justify-self:start;}
  .reseller-assign-row input,.reseller-assign-row .btn{width:100%;min-width:0;}
}


/* Phase fix: reseller filter select compact, not full-width giant combobox */
.reseller-key-filter-row{
  align-items:center !important;
}
.reseller-key-filter-row input#resellerKeySearch{
  flex:1 1 360px !important;
  min-width:280px !important;
}
.reseller-key-filter-row select#resellerKeyStatusFilter{
  flex:0 0 240px !important;
  width:240px !important;
  min-width:220px !important;
  max-width:260px !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 42px 0 14px !important;
  border-radius:10px !important;
}
@media(max-width:760px){
  .reseller-key-filter-row input#resellerKeySearch,
  .reseller-key-filter-row select#resellerKeyStatusFilter{
    flex:1 1 100% !important;
    width:100% !important;
    max-width:none !important;
  }
}

/* Phase: reseller download safety flow in paid order + private download confirmation */
.invoice-reseller-download-box{
  margin:18px 0 0;
  padding:18px;
  border:1px solid rgba(255,31,55,.46);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.invoice-reseller-download-box h3{margin:0 0 8px;color:#fff;font-size:20px;}
.invoice-reseller-download-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
  gap:14px;
  align-items:center;
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(5,8,15,.46);
}
.invoice-reseller-download-info b{display:block;color:#fff;font-weight:1000;}
.invoice-reseller-download-info small{display:block;margin-top:4px;color:#aeb7cc;}
.invoice-reseller-send-row{display:flex;gap:10px;align-items:center;}
.invoice-reseller-send-row input{flex:1 1 auto;min-width:0;}
.invoice-reseller-send-row .btn{flex:0 0 auto;}
.private-download-confirm-box{border-color:rgba(255,214,90,.82)!important;box-shadow:0 30px 120px rgba(0,0,0,.62),0 0 46px rgba(255,214,90,.12)!important;}
.private-download-confirm-box h3{color:#ffd66b!important;font-size:28px!important;letter-spacing:.02em;}
.private-download-warning-main{font-size:19px!important;color:#fff!important;font-weight:900;}
.private-download-warning-main b{color:#ff445a;}
@media(max-width:900px){
  .invoice-reseller-download-item{grid-template-columns:1fr;}
  .invoice-reseller-send-row{display:grid;grid-template-columns:1fr;}
  .invoice-reseller-send-row .btn{width:100%;}
}

/* Manual external key waiting payment flow */
.manual-key-waiting-box{
  margin:18px 0;
  padding:18px 20px;
  border:1px solid rgba(255,49,79,.8);
  background:rgba(255,49,79,.10);
  color:#e7edf8;
}
.manual-key-waiting-box h3{margin:0 0 8px;color:#ff314f;font-size:22px}
.manual-key-waiting-box p{margin:8px 0;color:#d6deef;line-height:1.55}
.manual-key-waiting-box ul{margin:10px 0 8px 20px;color:#fff;font-weight:800}
.invoice-meta b.wait{color:#ff314f}
.order-status.WAITING_KEY{color:#ff314f;border-color:#ff314f;background:rgba(255,49,79,.10)}


/* Future game catalog + homepage in-stock slider */
.home-product-slider{
  display:block;
  overflow:hidden;
  padding-left:4vw;
  padding-right:4vw;
}
.home-product-slider .home-product-track{
  display:flex;
  gap:26px;
  width:max-content;
  will-change:transform;
}
.home-product-slider .product-card{
  flex:0 0 calc((100vw - 8vw - 52px) / 3);
  max-width:calc((100vw - 8vw - 52px) / 3);
}
.home-product-slider:hover .home-product-track{
  animation:vft-home-products-slide 34s linear 5s infinite;
}
@keyframes vft-home-products-slide{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 13px))}
}
@media(max-width:980px){
  .home-product-slider .product-card{
    flex-basis:calc((100vw - 8vw - 26px) / 2);
    max-width:calc((100vw - 8vw - 26px) / 2);
  }
}
@media(max-width:620px){
  .home-product-slider .product-card{
    flex-basis:92vw;
    max-width:92vw;
  }
}

/* Account Center Support Ticket - Phase 2 */
.account-support-panel{overflow:hidden}
.account-support-chat-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:start;margin-top:14px}
.account-support-ticket-list,.account-support-ticket-main{min-width:0}
.support-ticket-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);border-radius:12px;margin-bottom:10px}
.support-ticket-list-head b{display:block;color:#fff}.support-ticket-list-head small{display:block;color:#9aa3b5;margin-top:3px;font-size:12px}.support-ticket-list-body{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow:auto;padding-right:4px}
.support-ticket-row{position:relative;width:100%;text-align:left;border:1px solid rgba(255,255,255,.08);background:rgba(10,12,18,.82);color:#dfe6f5;border-radius:12px;padding:12px 38px 12px 12px;cursor:pointer;transition:.18s ease;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.support-ticket-row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);transform:translateY(-1px)}.support-ticket-row.active{background:rgba(214,31,48,.18);border-color:rgba(255,55,75,.72)}.support-ticket-row.unread{border-color:rgba(255,190,64,.5)}
.support-ticket-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.support-ticket-row-top b{font-size:14px;color:#fff;line-height:1.3}.support-ticket-row-meta,.support-ticket-row-last{display:block;color:#9aa3b5;font-size:12px;line-height:1.35;margin-top:6px}.support-ticket-row-last{color:#c6cede;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-ticket-status{flex:0 0 auto;font-style:normal;font-size:11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 7px;color:#cfd6e8;background:rgba(255,255,255,.05)}.support-ticket-status.open{color:#7cf2aa;border-color:rgba(124,242,170,.45);background:rgba(31,162,88,.12)}.support-ticket-status.pending{color:#ffc95f;border-color:rgba(255,201,95,.45);background:rgba(255,178,35,.12)}.support-ticket-status.answered{color:#74bdff;border-color:rgba(116,189,255,.42);background:rgba(51,119,220,.12)}.support-ticket-status.closed{color:#a5adba;border-color:rgba(165,173,186,.32);background:rgba(120,130,145,.12)}
.support-ticket-unread{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#ff3148;color:#fff;font-size:12px;font-weight:800}.support-ticket-create-card,.support-ticket-thread-card{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2);border-radius:14px;padding:14px;margin-bottom:14px}.support-ticket-create-card h3,.support-ticket-thread-head h3{margin:0;color:#fff}.support-ticket-form label,.support-ticket-reply-form{display:block}.support-ticket-form-grid{display:grid;grid-template-columns:1fr 260px;gap:12px}.support-ticket-form input,.support-ticket-form select,.support-ticket-form textarea,.support-ticket-reply-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(7,9,14,.86);color:#fff;padding:11px 12px;outline:none}.support-ticket-form textarea,.support-ticket-reply-form textarea{resize:vertical;min-height:88px}.support-ticket-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}.support-ticket-thread-empty{padding:24px;text-align:center;color:#fff}.support-ticket-thread-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px;margin-bottom:12px}.support-ticket-thread-head p{margin:4px 0 0;color:#9aa3b5}.support-chat-thread{max-height:520px;overflow:auto;padding:4px 4px 12px;display:flex;flex-direction:column;gap:10px}.support-chat-message{display:flex}.support-chat-message.customer{justify-content:flex-end}.support-chat-message.admin,.support-chat-message.ai,.support-chat-message.system{justify-content:flex-start}.support-chat-bubble{max-width:min(680px,82%);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.055);color:#eaf0fb}.support-chat-message.customer .support-chat-bubble{background:rgba(214,31,48,.20);border-color:rgba(255,55,75,.45)}.support-chat-message.admin .support-chat-bubble{background:rgba(52,118,220,.16);border-color:rgba(90,153,255,.32)}.support-chat-message.ai .support-chat-bubble{background:rgba(55,190,120,.13);border-color:rgba(88,220,150,.28)}.support-chat-bubble b{display:block;margin-bottom:5px;color:#fff}.support-chat-bubble p{margin:0;line-height:1.45}.support-chat-bubble small{display:block;color:#9aa3b5;margin-top:6px}.support-ticket-reply-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:12px}
@media(max-width:900px){.account-support-chat-layout{grid-template-columns:1fr}.support-ticket-form-grid{grid-template-columns:1fr}.support-ticket-reply-form{grid-template-columns:1fr}.support-chat-bubble{max-width:94%}}

/* Phase 7 - Product Reviews */
.product-rating{display:inline-flex;align-items:center;gap:6px;margin:4px 0 10px;color:#cfd5e6;font-weight:800;font-size:13px;letter-spacing:.2px}
.product-rating b{color:#00ff99;text-shadow:0 0 12px rgba(0,255,153,.2)}
.product-rating.muted{color:#8f98aa;font-weight:700}
.product-sales-count{display:flex;align-items:center;gap:5px;margin:-4px 0 10px;color:#aeb7c9;font-weight:800;font-size:13px;letter-spacing:.15px}
.product-sales-count b{color:#00ff99;font-weight:1000;text-shadow:0 0 12px rgba(0,255,153,.16)}
.variant-card .product-rating{margin:0;color:#8f98aa;line-height:1.25;font-size:12px}
.variant-card .product-rating b{color:#00ff99}
.variant-card .product-sales-count{margin:-6px 0 0;color:#aeb7c9;line-height:1.25;font-size:12px}
.variant-card .product-sales-count b{color:#00ff99}
.product-review-panel{margin-top:24px;padding:26px;border:1px solid rgba(255,31,55,.45);background:rgba(5,8,16,.72)}
.review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid rgba(255,31,55,.22);padding-bottom:16px;margin-bottom:18px}
.review-head h2{margin:4px 0 8px;font-size:28px}
.review-score-line{color:#cfd5e6;font-weight:800}
.review-stars{letter-spacing:2px;color:#00ff99;font-weight:900;text-shadow:0 0 10px rgba(0,255,153,.18)}
.review-form-wrap{margin:16px 0 22px}
.product-review-form{display:grid;gap:12px;max-width:760px;padding:18px;border:1px solid rgba(255,31,55,.35);border-radius:14px;background:rgba(0,0,0,.22)}
.product-review-form label{font-weight:900;color:#fff;letter-spacing:.3px}
.product-review-form input,.product-review-form textarea,.product-review-form select{width:100%;border:1px solid rgba(255,31,55,.48);border-radius:12px;background:rgba(2,6,14,.8);color:#fff;padding:13px 14px;font-weight:800;outline:none}
.product-review-form textarea{resize:vertical;min-height:110px;line-height:1.5}
.review-reward-note{padding:12px 14px;border:1px solid rgba(0,255,153,.35);border-radius:12px;background:rgba(0,255,153,.08);color:#00ff99;font-weight:900}
.review-login-note{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.review-list{display:grid;gap:14px}
.review-item{padding:16px;border:1px solid rgba(255,31,55,.22);border-radius:14px;background:rgba(0,0,0,.2)}
.review-item-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.review-item h3{margin:8px 0;color:#fff;font-size:18px}
.review-item p{margin:8px 0;color:#cfd5e6;line-height:1.55}
.review-item small{color:#8f98aa;font-weight:700}
@media (max-width: 720px){.product-review-panel{padding:18px}.review-head{display:block}.review-login-note{align-items:flex-start}.review-login-note .btn{width:100%}}

/* Account Orders Review UI */
.account-orders-panel .account-order-list{display:grid;gap:18px;margin-top:18px;}
.account-order-card{border:1px solid rgba(255,31,55,.45);background:rgba(3,7,16,.72);padding:18px;position:relative;}
.account-order-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid rgba(255,31,55,.22);padding-bottom:12px;margin-bottom:12px;}
.account-order-head b{display:block;color:#fff;font-size:18px;}
.account-order-head small{display:block;color:#b9c2d4;margin-top:4px;}
.account-order-items{display:grid;gap:10px;}
.account-order-item{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);padding:12px 14px;}
.account-order-item b{display:block;color:#fff;}
.account-order-item small{display:block;color:#b9c2d4;margin-top:4px;}
.account-order-item-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.order-review-form-wrap{border:1px solid rgba(255,31,55,.35);background:rgba(255,31,55,.045);padding:14px;margin:0 0 8px 0;}
.order-review-form-wrap[hidden]{display:none!important;}
.order-review-form .customer-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.reviewed-line .review-stars{margin-left:4px;}
@media(max-width:760px){.account-order-head,.account-order-item{flex-direction:column;align-items:stretch}.account-order-item-actions{justify-content:flex-start}}

/* Phase 11 - Support chat bubble */
.support-bubble{position:fixed;right:24px;bottom:24px;z-index:9990;font-family:inherit}.support-bubble.hidden{display:none}.support-bubble-toggle{width:64px;height:64px;border:1px solid rgba(255,31,55,.75);background:linear-gradient(135deg,#ff1733,#9b0918);color:#fff;font-size:26px;font-weight:950;cursor:pointer;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);box-shadow:0 0 28px rgba(255,31,55,.34)}.support-bubble-panel{display:none;position:absolute;right:0;bottom:78px;width:min(390px,calc(100vw - 36px));height:min(560px,calc(100vh - 130px));border:1px solid rgba(255,31,55,.58);background:rgba(4,7,14,.96);box-shadow:0 0 40px rgba(0,0,0,.55),0 0 28px rgba(255,31,55,.16);overflow:hidden}.support-bubble.open .support-bubble-panel{display:grid;grid-template-rows:auto 1fr auto}.support-bubble-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 13px;border-bottom:1px solid rgba(255,31,55,.35);background:linear-gradient(90deg,rgba(255,23,51,.18),rgba(255,23,51,.04))}.support-bubble-head b{display:block;color:#fff;font-size:17px}.support-bubble-head small{display:block;color:#aeb7cc;line-height:1.35;margin-top:3px}.support-bubble-head button{border:1px solid rgba(255,255,255,.18);background:#0b101a;color:#fff;font-size:22px;width:34px;height:34px;cursor:pointer}.support-bubble-body{padding:14px;overflow:auto;display:grid;gap:10px;align-content:start}.support-bubble-msg{border:1px solid rgba(255,31,55,.22);background:rgba(255,255,255,.035);padding:10px 12px;line-height:1.45}.support-bubble-msg b{display:block;color:#fff;margin-bottom:4px}.support-bubble-msg p{margin:0;color:#cfd6e8}.support-bubble-msg small{display:block;margin-top:5px;color:#8c98ad}.support-bubble-msg.customer{margin-left:34px;border-color:rgba(255,31,55,.55);background:rgba(255,31,55,.12)}.support-bubble-msg.ai{margin-right:26px;border-color:rgba(0,255,140,.28);background:rgba(0,255,140,.055)}.support-bubble-msg.ai b{color:#00ff8c}.support-bubble-msg.system{border-color:rgba(255,214,107,.32);background:rgba(255,214,107,.045)}.support-bubble-foot{padding:12px;border-top:1px solid rgba(255,31,55,.35);display:grid;grid-template-columns:1fr auto;gap:9px}.support-bubble-foot textarea{width:100%;resize:none;border:1px solid rgba(255,31,55,.35);background:#050914;color:#fff;border-radius:6px;padding:10px;font-family:inherit}.support-bubble-foot button{min-height:46px}.support-bubble-login-actions{display:flex;justify-content:flex-start;margin:0 0 4px 0}@media(max-width:640px){.support-bubble{right:14px;bottom:14px}.support-bubble-toggle{width:56px;height:56px}.support-bubble-panel{right:-2px;bottom:68px;width:calc(100vw - 28px);height:min(560px,calc(100vh - 100px))}}


/* VFT Admin unified navigation and frame system */
.vft-admin-global-nav{
  width:min(1560px,calc(100% - 64px));
  margin:28px auto 0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  position:sticky;
  top:0;
  z-index:5000;
  padding:10px 0;
  background:linear-gradient(180deg,rgba(3,5,10,.97),rgba(3,5,10,.78));
  backdrop-filter:blur(8px);
}
.vft-admin-global-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  color:#fff;
  text-decoration:none;
  font-weight:950;
  letter-spacing:.01em;
  border:1px solid rgba(255,31,55,.40);
  border-radius:12px;
  background:rgba(10,14,24,.86);
  box-shadow:0 0 18px rgba(0,0,0,.18);
  transition:.16s ease;
}
.vft-admin-global-nav a:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.075);
  transform:translateY(-1px);
}
.vft-admin-global-nav a.active{
  background:linear-gradient(90deg,rgba(255,31,55,.96),rgba(180,10,26,.96));
  border-color:#ff1f37;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,31,55,.35) inset,0 0 26px rgba(255,31,55,.22);
}
.vft-admin-page main.wrap,
.vft-admin-page main.admin-chat-wrap,
.vft-admin-page main.cc-wrap,
.vft-admin-page main.admin-orders-wrap{
  margin-top:28px;
}
.vft-admin-modern .hero,
.vft-admin-modern .admin-chat-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin:18px 0 20px;
  padding:0 0 8px;
}
.vft-admin-modern .hero h1,
.vft-admin-modern .admin-chat-hero h1{
  font-size:44px!important;
  line-height:1!important;
  margin:0!important;
  color:#fff;
  letter-spacing:-.02em;
}
.vft-admin-modern .eyebrow,
.vft-admin-modern .admin-chat-eyebrow{
  letter-spacing:6px!important;
  color:#ff1f37!important;
  font-weight:950!important;
  font-size:12px!important;
  text-transform:uppercase!important;
}
.vft-admin-modern .hero p,
.vft-admin-modern .admin-chat-hero p{
  max-width:860px;
  margin:10px 0 0!important;
  color:#c2cadb!important;
  line-height:1.55!important;
}
/* Type 1: direct action buttons */
.vft-admin-modern .btn:not(.ghost):not(.admin-chat-tab),
.vft-admin-modern button.btn:not(.ghost):not(.admin-chat-tab),
.vft-admin-modern a.btn:not(.ghost):not(.admin-chat-tab){
  border:0!important;
  border-radius:0!important;
  min-height:46px;
  background:linear-gradient(90deg,#ff1733 0%,#bf0b1f 100%)!important;
  color:#fff!important;
  font-weight:950!important;
  padding:0 20px!important;
  text-decoration:none!important;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)!important;
  box-shadow:0 0 24px rgba(255,31,55,.22)!important;
}
/* Type 2: toggle / section / page tabs */
.vft-admin-modern .btn.ghost,
.vft-admin-modern a.btn.ghost,
.vft-admin-modern button.btn.ghost,
.vft-admin-modern .admin-chat-tab,
.vft-admin-modern .top-links a{
  clip-path:none!important;
  border-radius:12px!important;
  border:1px solid rgba(255,31,55,.42)!important;
  background:rgba(10,14,24,.88)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.vft-admin-modern .btn.ghost:hover,
.vft-admin-modern a.btn.ghost:hover,
.vft-admin-modern button.btn.ghost:hover,
.vft-admin-modern .admin-chat-tab:hover,
.vft-admin-modern .top-links a:hover{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.25)!important;
}
.vft-admin-modern .admin-chat-tab.active,
.vft-admin-modern .top-links a.active,
.vft-admin-modern .btn.ghost.active{
  background:linear-gradient(90deg,#ff1733,#b90c20)!important;
  border-color:#ff1f37!important;
}
/* Type 3: main content frame */
.vft-admin-modern .panel,
.vft-admin-modern .chat-panel{
  position:relative;
  border:1px solid rgba(255,31,55,.50)!important;
  background:rgba(5,8,15,.72)!important;
  border-radius:0 18px 0 18px!important;
  box-shadow:0 0 28px rgba(255,31,55,.08)!important;
  overflow:hidden;
}
.vft-admin-modern .panel::before,
.vft-admin-modern .chat-panel::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:-1px!important;
  width:0!important;
  height:0!important;
  border-top:36px solid #ff1733!important;
  border-right:36px solid transparent!important;
  pointer-events:none!important;
  z-index:0!important;
}
.vft-admin-modern .panel::after,
.vft-admin-modern .chat-panel::after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:0;
  height:0;
  border-bottom:36px solid #ff1733;
  border-left:36px solid transparent;
  pointer-events:none;
  z-index:0;
}
.vft-admin-modern .inner,
.vft-admin-modern .chat-panel-inner{
  position:relative;
  z-index:1;
  padding:24px;
}
/* Type 4: inner content boxes */
.vft-admin-modern .row,
.vft-admin-modern .review-card,
.vft-admin-modern .ticket-card,
.vft-admin-modern .switch-row,
.vft-admin-modern .result,
.vft-admin-modern .alert,
.vft-admin-modern .info-row,
.vft-admin-modern .ticket-empty,
.vft-admin-modern .ai-suggestion,
.vft-admin-modern .message-box,
.vft-admin-modern .admin-presence-pill{
  border:1px solid rgba(255,31,55,.28)!important;
  background:rgba(3,6,13,.46)!important;
  border-radius:12px!important;
}
.vft-admin-modern .row-title,
.vft-admin-modern h2,
.vft-admin-modern h3{
  color:#fff;
}
.vft-admin-modern .input,
.vft-admin-modern .select,
.vft-admin-modern .textarea,
.vft-admin-modern .admin-chat-input,
.vft-admin-modern .admin-chat-select,
.vft-admin-modern .admin-chat-textarea,
.vft-admin-modern .field input,
.vft-admin-modern .field select,
.vft-admin-modern .field textarea{
  border-radius:10px!important;
  background:#070a10!important;
  border:1px solid rgba(255,31,55,.42)!important;
  color:#fff!important;
}
@media(max-width:900px){
  .vft-admin-global-nav{width:calc(100% - 28px);margin-top:14px;position:relative;top:auto}
  .vft-admin-global-nav a{min-height:44px;padding:0 12px;font-size:13px}
  .vft-admin-modern .hero h1,.vft-admin-modern .admin-chat-hero h1{font-size:34px!important}
}

/* Account Center Support ticket create collapse fix */
.support-ticket-create-toggle-wrap{
  margin-bottom:14px;
  padding:14px;
  border:1px solid rgba(255,31,55,.22);
  border-radius:14px;
  background:rgba(0,0,0,.16);
}
.support-ticket-create-toggle-wrap .hint{
  margin:8px 0 0;
  color:#aeb7cc;
}
.support-ticket-toggle-btn{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:1px solid rgba(255,31,55,.45);
  border-radius:12px;
  background:rgba(8,12,20,.86);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.support-ticket-toggle-btn:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}
.support-ticket-toggle-btn.active{
  background:linear-gradient(90deg,#ff1733,#b90c20);
  border-color:#ff1f37;
  box-shadow:0 0 24px rgba(255,31,55,.18);
}
.support-ticket-create-card.is-collapsed{
  display:none!important;
}
.support-ticket-create-card{
  animation:vftTicketCreateIn .16s ease both;
}
@keyframes vftTicketCreateIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.support-ticket-thread-empty .hint{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

/* Revenue upgrade: renewal alerts, sales detail, bundles */
.detail-sales-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.detail-sales-card{border:1px solid rgba(255,31,55,.28);background:rgba(255,255,255,.035);padding:14px 15px;border-radius:12px}.detail-sales-card b{display:block;color:#fff;margin-bottom:6px}.detail-sales-card span{color:#cbd5ea;line-height:1.55;font-size:14px}.detail-compare-panel,.detail-bundle-panel{margin:18px 0}.detail-compare-panel h2,.detail-bundle-panel h2{margin:0 0 10px}.detail-compare-table{display:grid;gap:8px}.detail-compare-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045);color:#fff;cursor:pointer}.detail-compare-row:hover{border-color:rgba(0,255,136,.65);background:rgba(0,255,136,.06)}.detail-compare-row span{display:flex;flex-direction:column;gap:3px}.detail-compare-row small{color:#aeb7cc}.detail-compare-row strong{color:#00ff88;white-space:nowrap}.detail-compare-row em{color:#ffd66b;font-size:12px;font-style:normal;font-weight:900}.detail-bundle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-bundle-card{border:1px solid rgba(255,31,55,.45);background:rgba(7,10,18,.72);padding:16px;border-radius:14px}.detail-bundle-card b{display:block;color:#fff}.detail-bundle-card small{display:inline-block;color:#00ff88;font-weight:900;margin-top:4px}.detail-bundle-card p{color:#cbd5ea;line-height:1.5;min-height:44px}.bundle-price-line{display:flex;align-items:baseline;gap:10px;margin:8px 0 12px}.old-price{text-decoration:line-through;color:#7f899d!important}.bundle-price-line strong{color:#00ff88;font-size:20px}.renewal-alert-panel{margin-bottom:18px}.renewal-alert-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.renewal-alert-card{border:1px solid rgba(0,255,136,.35);background:rgba(0,255,136,.045);padding:16px;border-radius:14px}.renewal-alert-card.urgent{border-color:rgba(255,214,107,.75);background:rgba(255,214,107,.065)}.renewal-alert-card b{color:#fff}.renewal-alert-card small{display:block;color:#aeb7cc;margin-top:4px}.renewal-alert-card p{color:#d8deec;line-height:1.5}@media(max-width:900px){.detail-sales-grid,.detail-bundle-grid,.renewal-alert-list{grid-template-columns:1fr}}

/* Products catalog: compact searchable game list */
.product-catalog-panel{
  margin:0 4vw 80px !important;
  padding:22px !important;
  overflow:hidden !important;
  clip-path:none !important;
  border-radius:18px !important;
}
.product-catalog-panel > *{
  position:relative !important;
  z-index:1 !important;
}
.product-catalog-toolbar{
  display:grid !important;
  grid-template-columns:minmax(280px,1fr) auto !important;
  gap:16px !important;
  align-items:end !important;
  margin-bottom:14px !important;
}
.product-search-box{
  display:grid !important;
  gap:8px !important;
  color:#fff !important;
  font-weight:1000 !important;
  letter-spacing:.4px !important;
}
.product-search-box span{
  color:var(--red2) !important;
  text-transform:uppercase !important;
  font-size:12px !important;
  letter-spacing:2.5px !important;
}
.product-search-box input{
  margin:0 !important;
  height:56px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,31,55,.46) !important;
  background:rgba(3,6,13,.86) !important;
  box-shadow:inset 0 0 22px rgba(255,19,45,.045) !important;
}
.product-search-box input:focus{
  border-color:var(--green) !important;
  box-shadow:0 0 0 3px rgba(49,255,144,.12), inset 0 0 22px rgba(255,19,45,.045) !important;
}
.product-filter-box{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.product-filter-chip{
  min-height:44px !important;
  padding:0 15px !important;
  border:1px solid rgba(255,31,55,.38) !important;
  border-radius:13px !important;
  background:rgba(8,12,22,.82) !important;
  color:#dfe5f5 !important;
  font-weight:1000 !important;
  cursor:pointer !important;
  transition:.16s ease !important;
}
.product-filter-chip:hover{
  border-color:var(--green) !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
  box-shadow:0 0 20px rgba(49,255,144,.10) !important;
}
.product-filter-chip.active{
  border-color:rgba(255,31,55,.92) !important;
  background:linear-gradient(90deg,#a60314,#ff132d) !important;
  color:#fff !important;
  box-shadow:0 0 24px rgba(255,19,45,.25) !important;
}
.product-catalog-meta{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:wrap !important;
  margin:0 0 14px !important;
  color:#cfd5e6 !important;
  font-weight:800 !important;
}
.product-catalog-meta b{
  color:var(--green) !important;
  font-size:18px !important;
}
.product-catalog-scroll{
  max-height:2860px !important; /* desktop 3 cột x khoảng 5 hàng ~= 15 game */
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:10px !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(255,31,55,.8) rgba(255,255,255,.06) !important;
}
.product-catalog-scroll::-webkit-scrollbar{width:10px !important;}
.product-catalog-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06) !important;border-radius:20px !important;}
.product-catalog-scroll::-webkit-scrollbar-thumb{background:rgba(255,31,55,.82) !important;border-radius:20px !important;}
.product-catalog-scroll::-webkit-scrollbar-thumb:hover{background:rgba(49,255,144,.8) !important;}
.store-product-grid{
  padding:0 !important;
}
.product-empty-state{
  grid-column:1/-1 !important;
  min-height:220px !important;
  display:grid !important;
  place-items:center !important;
  align-content:center !important;
  text-align:center !important;
  gap:8px !important;
  border:1px dashed rgba(255,31,55,.42) !important;
  border-radius:16px !important;
  background:rgba(3,6,13,.58) !important;
  color:#dfe5f5 !important;
}
.product-empty-state b{font-size:22px !important;color:#fff !important;}
.product-empty-state p{margin:0 !important;color:var(--muted) !important;}
@media(max-width:1280px){
  .product-catalog-scroll{max-height:3650px !important;} /* 2 cột: giữ gần 15 game trong khung */
}
@media(max-width:900px){
  .product-catalog-panel{margin-left:5vw !important;margin-right:5vw !important;padding:16px !important;}
  .product-catalog-toolbar{grid-template-columns:1fr !important;align-items:stretch !important;}
  .product-filter-box{justify-content:flex-start !important;}
  .product-filter-chip{flex:1 1 130px !important;}
  .product-catalog-scroll{max-height:2350px !important;padding-right:6px !important;}
}

.product-catalog-panel::before,.product-catalog-panel::after{z-index:0 !important;}

.detail-compare-hint{margin:-4px 0 12px;color:#aeb7cc;font-size:14px;line-height:1.5}.detail-compare-table-wrap{overflow:auto;border:1px solid rgba(255,31,55,.28);border-radius:14px;background:rgba(7,10,18,.72)}.detail-compare-table-v2{width:100%;border-collapse:collapse;min-width:620px}.detail-compare-table-v2 th,.detail-compare-table-v2 td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}.detail-compare-table-v2 th{color:#f4f7fb;font-size:12px;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,31,55,.08)}.detail-compare-table-v2 tbody tr{transition:.18s ease}.detail-compare-table-v2 tbody tr:last-child td{border-bottom:0}.detail-compare-table-v2 b{display:block;color:#fff}.detail-compare-table-v2 small{display:block;color:#aeb7cc;margin-top:3px}.detail-compare-table-v2 strong{color:#fff;white-space:nowrap}.detail-compare-table-v2 .per-day{color:#00ff88}.detail-compare-table-v2 em{display:inline-flex;align-items:center;border:1px solid rgba(255,214,107,.45);background:rgba(255,214,107,.09);color:#ffd66b;border-radius:999px;padding:4px 8px;font-size:12px;font-style:normal;font-weight:900;white-space:nowrap}.detail-compare-table-v2 .muted{color:#7f899d;font-size:13px}.detail-compare-table-v2 .is-best{background:rgba(255,31,55,.045)}


/* Price comparison table: readonly, aligned columns */
.detail-compare-table-wrap{overflow:hidden;border:1px solid rgba(255,31,55,.35);border-radius:14px;background:rgba(7,10,18,.72)}
.detail-compare-table-v2{width:100%;min-width:0;border-collapse:separate;border-spacing:0;table-layout:fixed}
.detail-compare-table-v2 th,.detail-compare-table-v2 td{box-sizing:border-box;padding:16px 18px;text-align:left;vertical-align:middle;border-bottom:1px solid rgba(255,255,255,.08)}
.detail-compare-table-v2 th:nth-child(1),.detail-compare-table-v2 td:nth-child(1){width:34%}
.detail-compare-table-v2 th:nth-child(2),.detail-compare-table-v2 td:nth-child(2){width:18%;text-align:right}
.detail-compare-table-v2 th:nth-child(3),.detail-compare-table-v2 td:nth-child(3){width:22%;text-align:right}
.detail-compare-table-v2 th:nth-child(4),.detail-compare-table-v2 td:nth-child(4){width:26%;text-align:right}
.detail-compare-table-v2 th{color:#f4f7fb;font-size:12px;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,31,55,.08)}
.detail-compare-table-v2 tbody tr{display:table-row;background:rgba(255,255,255,.025)}
.detail-compare-table-v2 tbody tr:nth-child(even){background:rgba(255,255,255,.035)}
.detail-compare-table-v2 tbody tr:last-child td{border-bottom:0}
.detail-compare-table-v2 b{display:block;color:#fff}
.detail-compare-table-v2 small{display:block;color:#aeb7cc;margin-top:4px}
.detail-compare-table-v2 strong{color:#fff;white-space:nowrap}
.detail-compare-table-v2 .per-day{color:#00ff88}
.detail-compare-table-v2 em{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,214,107,.45);background:rgba(255,214,107,.09);color:#ffd66b;border-radius:999px;padding:4px 9px;font-size:12px;font-style:normal;font-weight:900;white-space:nowrap}
.detail-compare-table-v2 .muted{color:#7f899d;font-size:13px}
.detail-compare-table-v2 .is-best{background:rgba(255,31,55,.045)}
@media(max-width:720px){.detail-compare-table-wrap{overflow:auto}.detail-compare-table-v2{min-width:680px}}

/* Email verification account flow */
.email-verify-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-color:rgba(255,31,55,.9);
  background:linear-gradient(135deg,rgba(255,31,55,.12),rgba(5,8,14,.82));
}
.email-verify-alert h2{margin:0 0 8px}
.email-verify-alert .hint{margin:0;line-height:1.55}
.email-verify-alert-settings{margin:10px 0 18px;padding:16px 18px}
.email-verify-alert-settings h2{font-size:18px}
.verify-email-panel{max-width:980px}
.verify-email-code-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 18px}
.verify-email-layout .account-content{min-width:0}
@media(max-width:820px){.email-verify-alert{align-items:flex-start;flex-direction:column}.email-verify-alert .btn{width:100%;justify-content:center}}


/* VForceTech admin bundle editor upgrade */
.bundle-editor-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,2fr) minmax(180px,.9fr);gap:12px;align-items:end}.bundle-name-cell{grid-column:span 2}.bundle-image-cell{grid-column:span 2}.bundle-desc-cell{grid-column:1/-1}.bundle-items-editor{margin-top:18px;padding:16px;border:1px solid rgba(255,31,55,.32);border-radius:14px;background:rgba(3,6,14,.45)}.bundle-items-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.bundle-items-title h4{margin:0;color:#fff}.bundle-items-list{display:flex;flex-direction:column;gap:10px}.bundle-item-row{display:grid;grid-template-columns:95px minmax(150px,1fr) minmax(230px,1.4fr) minmax(150px,.8fr) minmax(110px,.55fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035)}.bundle-item-no{font-weight:900;color:#fff;padding-bottom:13px}.bundle-item-time-wrap.is-hidden{display:none}.bundle-item-lifetime{padding:0 0 9px}.bundle-item-lifetime b{display:block;min-height:44px;line-height:44px;padding:0 14px;border:1px solid rgba(255,31,55,.35);border-radius:10px;background:rgba(0,0,0,.25);color:#00ff88}.bundle-item-delete:disabled{opacity:.45;cursor:not-allowed}@media(max-width:980px){.bundle-editor-grid,.bundle-item-row{grid-template-columns:1fr}.bundle-name-cell,.bundle-image-cell,.bundle-desc-cell{grid-column:auto}.bundle-item-no{padding-bottom:0}}

/* Store bundle options inside product price area */
.detail-bundle-inline{margin:16px 0 18px}.detail-bundle-option{display:flex;flex-direction:column;gap:10px}.bundle-breakdown{overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(0,0,0,.18)}.bundle-breakdown table{width:100%;border-collapse:collapse;font-size:12px}.bundle-breakdown th,.bundle-breakdown td{padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;color:#d8deec}.bundle-breakdown th{color:#aeb7cc;text-transform:uppercase;letter-spacing:.04em}.bundle-breakdown td:nth-child(2),.bundle-breakdown td:nth-child(3),.bundle-breakdown td:nth-child(4),.bundle-breakdown tfoot td:last-child{text-align:right}.bundle-breakdown tfoot td{font-weight:900;color:#fff}.bundle-breakdown tfoot .save{color:#00ff88}.bundle-breakdown tfoot .final{color:#00ff88;font-size:15px}

/* VForceTech admin bundle editor compact alignment pass */
#bundle-form-section .bundle-editor-grid{
  grid-template-columns:245px minmax(420px,1fr) 220px;
  gap:14px 12px;
  align-items:end;
}
#bundle-form-section .bundle-name-cell{grid-column:2 / 4;}
#bundle-form-section .bundle-image-cell{grid-column:1 / 3;}
#bundle-form-section .bundle-desc-cell{grid-column:1 / -1;}
#bundle-form-section .bundle-editor-grid label,
#bundle-form-section .bundle-item-row label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  margin:0;
}
#bundle-form-section .label{
  margin:0;
  font-size:12px;
  line-height:1.1;
  letter-spacing:.045em;
}
#bundle-form-section .admin-input,
#bundle-form-section .admin-select{
  height:44px !important;
  min-height:44px !important;
  padding:0 13px !important;
  margin:0 !important;
  font-size:13px !important;
  border-radius:9px !important;
}
#bundle-form-section .admin-textarea{
  min-height:86px !important;
  padding:12px 13px !important;
  margin:0 !important;
  font-size:13px !important;
  border-radius:10px !important;
}
#bundle-form-section .bundle-items-editor{
  margin-top:18px;
  padding:14px 16px 16px;
}
#bundle-form-section .bundle-items-title{
  align-items:center;
  margin-bottom:14px;
}
#bundle-form-section .bundle-items-title h4{line-height:1.1;}
#bundle-form-section .bundle-items-title .hint{margin:8px 0 0;}
#bundle-form-section #bundle-add-item-btn{
  width:132px;
  min-width:132px;
  min-height:46px !important;
  height:46px;
  padding:0 15px !important;
}
#bundle-form-section .bundle-items-list{
  gap:10px;
}
#bundle-form-section .bundle-item-row{
  grid-template-columns:92px 174px 245px 150px 100px 96px;
  gap:10px;
  align-items:end;
  padding:10px 12px;
  min-height:86px;
}
#bundle-form-section .bundle-item-no{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:18px 0 0;
  font-size:14px;
  line-height:1.15;
  white-space:nowrap;
}
#bundle-form-section .bundle-item-lifetime{
  padding:0;
  margin:0;
}
#bundle-form-section .bundle-item-lifetime b{
  height:44px;
  min-height:44px;
  line-height:42px;
  padding:0 13px;
  border-radius:9px;
  font-size:13px;
}
#bundle-form-section .bundle-item-qty{
  text-align:left;
}
#bundle-form-section .bundle-item-delete{
  width:96px;
  min-width:96px;
  height:44px !important;
  min-height:44px !important;
  padding:0 14px !important;
  align-self:end;
}
#bundle-form-section .toolbar{
  margin-top:18px;
}
@media(max-width:1120px){
  #bundle-form-section .bundle-editor-grid{grid-template-columns:220px minmax(300px,1fr) 190px;}
  #bundle-form-section .bundle-item-row{grid-template-columns:86px 160px minmax(200px,1fr) 136px 92px 90px;}
}
@media(max-width:980px){
  #bundle-form-section .bundle-editor-grid,
  #bundle-form-section .bundle-item-row{grid-template-columns:1fr;}
  #bundle-form-section .bundle-name-cell,
  #bundle-form-section .bundle-image-cell,
  #bundle-form-section .bundle-desc-cell{grid-column:auto;}
  #bundle-form-section .bundle-item-no{padding:0;min-height:auto;}
  #bundle-form-section .bundle-item-delete,
  #bundle-form-section #bundle-add-item-btn{width:100%;min-width:0;}
}

/* VForceTech admin bundle editor vertical alignment fix */
#bundle-form-section .bundle-editor-grid > label{
  height:62px;
  min-height:62px;
  justify-content:flex-end;
}
#bundle-form-section .bundle-editor-grid > .bundle-desc-cell{
  height:auto;
  min-height:0;
}
#bundle-form-section .bundle-editor-grid > .bundle-image-cell{
  height:62px;
  min-height:62px;
}
#bundle-form-section .bundle-item-row{
  align-items:end;
}
#bundle-form-section .bundle-item-row > label{
  height:62px;
  min-height:62px;
  justify-content:flex-end;
}
#bundle-form-section .bundle-item-row .label{
  min-height:13px;
  display:block;
}
#bundle-form-section .bundle-item-no{
  height:44px;
  min-height:44px;
  padding:0;
  align-self:end;
  display:flex;
  align-items:center;
}
#bundle-form-section .bundle-item-lifetime{
  height:62px;
  min-height:62px;
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:flex-end;
}
#bundle-form-section .bundle-item-delete{
  align-self:end;
  margin:0;
}
@media(max-width:980px){
  #bundle-form-section .bundle-editor-grid > label,
  #bundle-form-section .bundle-editor-grid > .bundle-image-cell,
  #bundle-form-section .bundle-item-row > label,
  #bundle-form-section .bundle-item-lifetime{
    height:auto;
    min-height:0;
  }
  #bundle-form-section .bundle-item-no{
    height:auto;
    min-height:auto;
    align-self:auto;
  }
}

/* =========================================================
   CUSTOMER EXPERIENCE PHASE 3 / 4 / 5
   Checkout convenience, secure downloads and support utility
   ========================================================= */
.pending-order-resume{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 17px;margin-bottom:14px;border:1px solid rgba(255,31,55,.45);background:linear-gradient(135deg,rgba(255,31,55,.13),rgba(11,14,23,.72))}.pending-order-resume>div{display:grid;gap:4px}.pending-order-resume b{font-size:15px;color:#fff}.pending-order-resume span,.pending-order-resume small{color:#bdc5d6}.pending-order-resume-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.customer-download-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;border:1px solid rgba(255,31,55,.28);background:rgba(4,7,14,.65);padding:18px;margin-top:12px}.customer-download-main{display:grid;gap:7px;min-width:0}.customer-download-main>b{font-size:17px}.customer-download-main>small{color:#9ea8ba}.customer-download-main>p{margin:2px 0;color:#c8ceda;line-height:1.55}.download-checksum{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:5px;padding:9px 10px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025)}.download-checksum span{font-size:11px;color:#9ea8ba;font-weight:900}.download-checksum code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}.download-checksum button{border:1px solid rgba(255,31,55,.5);background:transparent;color:#fff;padding:6px 9px;cursor:pointer}.download-guide-links{display:flex;gap:12px;flex-wrap:wrap}.download-guide-links a{font-size:12px;color:#ff7686;text-decoration:none}.download-guide-links a:hover{text-decoration:underline}
.license-key-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.license-key-reveal{display:inline-flex;min-width:210px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:9px 11px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.28);font-family:Consolas,monospace;color:#fff}.license-key-reveal.is-revealed{border-color:rgba(0,255,140,.45);color:#b9ffde}
.support-ticket-sla{display:flex;align-items:center;gap:8px;margin-top:6px}.support-ticket-sla i{font-style:normal;font-size:10px;font-weight:950;text-transform:uppercase;padding:3px 7px;border:1px solid rgba(255,255,255,.16);color:#d7ddeb}.support-ticket-sla small{font-size:11px;color:#9fa9bc}.support-ticket-sla .priority-low{color:#aeb7cc}.support-ticket-sla .priority-normal{color:#7fd7ff;border-color:rgba(127,215,255,.4)}.support-ticket-sla .priority-high{color:#ffc66d;border-color:rgba(255,198,109,.45)}.support-ticket-sla .priority-urgent{color:#ff6478;border-color:rgba(255,49,75,.6)}
.support-ticket-suggestions{margin:12px 0;padding:14px;border:1px solid rgba(120,165,255,.42);background:rgba(120,165,255,.07)}.support-ticket-suggestions>b{display:block;color:#c6d7ff}.support-ticket-suggestions>p{margin:5px 0 10px;color:#aeb7cc}.support-ticket-suggestions>div{display:grid;gap:7px}.support-ticket-suggestions a{display:grid;gap:4px;padding:10px 11px;border:1px solid rgba(120,165,255,.25);background:rgba(0,0,0,.18);text-decoration:none}.support-ticket-suggestions a strong{color:#fff}.support-ticket-suggestions a small{color:#aeb7cc;line-height:1.45}.support-ticket-suggestions a:hover{border-color:#9dbbff}
.support-file-label{display:grid;gap:7px;padding:12px;border:1px dashed rgba(255,31,55,.38);background:rgba(255,31,55,.035)}.support-file-label input[type=file]{padding:8px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);color:#cdd4e2}.support-file-label small{color:#929db0;line-height:1.4}.support-file-label.compact{padding:8px;min-width:200px}.support-file-label.compact small{font-size:10px}
.support-message-attachments{display:grid;gap:7px;margin:9px 0}.support-attachment-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;max-width:460px;padding:8px 9px;border:1px solid rgba(120,165,255,.4);background:rgba(120,165,255,.08);color:#fff;text-align:left;cursor:pointer}.support-attachment-btn:hover{border-color:#9dbbff}.support-attachment-btn span{font-size:10px;font-weight:950;color:#9dbbff;text-transform:uppercase}.support-attachment-btn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-attachment-btn small{font-size:10px;color:#9ea8ba}.support-ticket-reply-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px) auto;gap:10px;align-items:end}
@media(max-width:760px){.pending-order-resume,.customer-download-card{grid-template-columns:1fr;display:grid}.download-checksum{grid-template-columns:1fr}.support-ticket-reply-form{grid-template-columns:1fr}.support-file-label.compact{min-width:0}}
.payment-method-card.payment-method-recent{border-color:rgba(255,19,45,.72);box-shadow:0 0 0 1px rgba(255,19,45,.10),0 0 24px rgba(255,19,45,.08)}.payment-method-card.payment-method-recent .payment-method-head:after{content:"Dùng gần đây";margin-left:auto;padding:3px 7px;border:1px solid rgba(255,19,45,.55);color:#ffd6dc;background:rgba(255,19,45,.10);font-size:10px;font-weight:950;text-transform:uppercase}


/* ===== Reseller product attribution + website reward points ===== */
.reseller-reward-summary{display:grid;gap:18px}
.reseller-reward-summary>div:first-child{display:grid;gap:10px}
.reseller-reward-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0}
.reseller-reward-mini-stats span{display:block;border:1px solid rgba(255,255,255,.11);background:rgba(0,0,0,.23);padding:12px}
.reseller-reward-mini-stats b{display:block;color:#8cff9b;font-size:20px}
.reseller-reward-mini-stats small{display:block;color:#aeb8cb;margin-top:4px}
.reseller-product-links-card{display:grid;gap:14px}
.reseller-product-links-card.compact{margin:18px 0}
.reseller-product-links-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.reseller-product-links-head h3{margin:3px 0 0}
.reseller-product-links-head>span{border:1px solid rgba(0,255,136,.35);background:rgba(0,255,136,.08);color:#8cff9b;padding:7px 10px;font-weight:900}
.reseller-product-link-list{display:grid;gap:9px}
.reseller-product-link-row{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(160px,1fr) minmax(130px,.8fr);gap:12px;align-items:center;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.2);padding:12px}
.reseller-product-link-row>div{display:grid;gap:3px;min-width:0}
.reseller-product-link-row span,.reseller-product-link-row small{color:#aeb8cb;font-size:12px}
.reseller-product-link-row b{overflow-wrap:anywhere}
.reseller-reward-rule-box{display:grid;gap:6px;border:1px solid rgba(0,255,136,.28);background:rgba(0,255,136,.06);padding:15px;margin:16px 0}
.reseller-reward-rule-box b{color:#8cff9b;text-transform:uppercase;letter-spacing:.08em}
.reseller-reward-rule-box span{font-size:18px;font-weight:900;color:#fff}
.reseller-reward-rule-box small{color:#b8c0cc}
.reseller-rewards-center .reward-rate-panel{margin:16px 0 22px}
.reseller-reward-rate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 22px}
.reseller-reward-rate-grid article{display:grid;gap:5px;border:1px solid rgba(255,255,255,.11);background:rgba(0,0,0,.22);padding:14px}
.reseller-reward-rate-grid span{color:#cbd5ea;font-weight:900}
.reseller-reward-rate-grid b{font-size:25px;color:#8cff9b}
.reseller-reward-rate-grid small{color:#aeb8cb}
@media(max-width:760px){
  .reseller-reward-mini-stats,.reseller-reward-rate-grid{grid-template-columns:1fr}
  .reseller-product-links-head{align-items:flex-start;flex-direction:column}
  .reseller-product-link-row{grid-template-columns:1fr}
}

/* ===== Reseller owner transfer history ===== */
.reseller-link-history-disclosure{margin-top:4px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.18)}
.reseller-link-history-disclosure>summary{cursor:pointer;padding:12px 14px;color:#cbd5ea;font-weight:900;list-style:none}
.reseller-link-history-disclosure>summary::-webkit-details-marker{display:none}
.reseller-link-history-disclosure>summary:after{content:"+";float:right;color:#8cff9b;font-size:18px;line-height:1}
.reseller-link-history-disclosure[open]>summary:after{content:"−"}
.reseller-link-history-disclosure .table-scroll{border-top:1px solid rgba(255,255,255,.08);padding:0 12px 12px}


/* Waiting-key automatic points refund */
.waiting-key-refund-box{margin:12px 0 4px;padding:13px 15px;border:1px solid rgba(255,49,79,.45);background:rgba(255,49,79,.07);font-size:13px;line-height:1.55}
.waiting-key-refund-box b{display:block;color:#fff;margin-bottom:4px}
.waiting-key-refund-box p{margin:0;color:#d7deec}
.waiting-key-refund-box small{display:block;margin-top:5px;color:#9ca8bb}
.waiting-key-refund-box.refunded{border-color:rgba(0,255,136,.48);background:rgba(0,255,136,.07)}
.waiting-key-refund-box.refunded b{color:#00ff88}
.waiting-key-refund-box.pending b{color:#ffd84d}


/* ===== PayPal currency clarity / checkout price layout ===== */
.paypal-checkout-desc{
  max-width:560px;
  margin:0 auto !important;
  text-align:center;
}
.paypal-price-breakdown{
  width:100%;
  display:grid;
  gap:0;
  margin:2px 0 0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  text-align:left;
}
.paypal-price-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.paypal-price-row:last-child{border-bottom:0}
.paypal-price-row span{
  color:#c5cddd;
  min-width:0;
}
.paypal-price-row span small{
  display:block;
  margin-top:2px;
  color:#8e9aaf;
  font-size:10px;
  font-weight:700;
}
.paypal-price-row b{
  color:#fff;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.paypal-price-total{
  margin-top:3px;
  padding-top:11px;
  border-top:1px solid rgba(255,49,76,.55);
  border-bottom:0;
}
.paypal-price-total span,
.paypal-price-total b{
  color:#fff;
  font-weight:950;
}
.paypal-price-total b{color:var(--green);text-shadow:0 0 12px rgba(49,255,144,.18)}
.paypal-fx-panel{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  border:1px solid rgba(108,173,255,.22);
  background:rgba(108,173,255,.055);
  text-align:left;
}
.paypal-fx-panel span{
  color:#aeb9cc;
  font-size:12px;
  font-weight:800;
}
.paypal-fx-panel b{
  color:#e9f1ff;
  text-align:right;
  white-space:nowrap;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.paypal-charge-total{
  width:100%;
  display:grid;
  place-items:center;
  gap:5px;
  padding:13px 12px;
  border:1px solid rgba(255,196,57,.40);
  background:rgba(255,196,57,.07);
}
.paypal-charge-total span{
  color:#ffc439;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
}
.paypal-charge-total strong{
  color:#fff;
  font-size:25px;
  line-height:1.05;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}
.paypal-fx-note{
  font-size:11px;
  line-height:1.45 !important;
}
.paypal-summary-note{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
@media(max-width:760px){
  .paypal-price-row{
    grid-template-columns:1fr;
    gap:3px;
    padding:9px 0;
  }
  .paypal-price-row b{text-align:left;white-space:normal}
  .paypal-fx-panel{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .paypal-fx-panel b{text-align:left;white-space:normal}
  .paypal-charge-total strong{font-size:23px}
}

/* Phase 6 - Featured Products + scheduled sales */
.featured-showcase{padding:0 4vw 58px;position:relative}.featured-showcase[hidden]{display:none!important}.featured-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 18px}.featured-head h2{margin:0;font-size:42px;text-shadow:0 0 22px rgba(255,19,45,.32)}.featured-head p:not(.eyebrow){margin:8px 0 0;color:var(--muted)}.featured-controls{display:flex;gap:10px}.featured-controls button{width:48px;height:48px;border:1px solid rgba(255,19,45,.55);background:rgba(8,11,18,.9);color:#fff;font-size:30px;cursor:pointer}.featured-controls button:hover{background:rgba(255,19,45,.18);border-color:var(--red)}.featured-viewport{overflow:hidden;padding:0}.featured-track{display:flex;width:100%;transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}.featured-slide{flex:0 0 100%;min-width:100%;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(320px,.62fr);min-height:430px;background:linear-gradient(135deg,rgba(16,19,29,.97),rgba(4,6,12,.98))}.featured-media{position:relative;display:block;overflow:hidden;min-height:430px}.featured-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 5.2s ease}.featured-slide:hover .featured-media img{transform:scale(1.035)}.featured-media-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.18) 65%,rgba(0,0,0,.62)),linear-gradient(180deg,transparent 65%,rgba(0,0,0,.5))}.featured-badges{position:absolute;left:20px;top:20px;display:flex;gap:9px;flex-wrap:wrap;z-index:2}.featured-badge{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;font-size:12px;font-weight:1000;letter-spacing:.06em;border:1px solid rgba(255,255,255,.17);box-shadow:0 0 24px rgba(0,0,0,.25)}.featured-badge.best{background:rgba(22,15,5,.94);border-color:rgba(255,199,73,.72);color:#ffd66b}.featured-badge.sale{background:linear-gradient(90deg,#a60314,#ff132d);border-color:#ff4058;color:#fff;box-shadow:0 0 24px rgba(255,19,45,.32)}.featured-copy{padding:42px 38px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}.featured-copy h2{font-size:38px;line-height:1.05;margin:0 0 16px}.featured-copy>p:not(.eyebrow){color:var(--muted);line-height:1.55;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.featured-stats{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 20px}.featured-stats span{display:flex;flex-direction:column;padding:10px 12px;border-left:2px solid rgba(255,19,45,.62);background:rgba(255,255,255,.025)}.featured-stats b{font-size:16px;color:#fff}.featured-stats small{color:var(--muted);margin-top:3px}.featured-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 22px}.featured-price del{color:#7d8497;font-size:18px}.featured-price strong{color:var(--green);font-size:34px;text-shadow:0 0 18px rgba(49,255,144,.22)}.featured-price small{color:#aeb7cc}.featured-view-btn{width:max-content;min-width:190px}.featured-dots{display:flex;justify-content:center;gap:10px;margin-top:14px}.featured-dot{min-width:40px;height:40px;padding:0 10px;border:1px solid rgba(255,19,45,.55);background:rgba(8,11,18,.96);color:#ffffff;font-size:15px;font-weight:1000;line-height:1;cursor:pointer;transition:.2s;display:inline-grid;place-items:center}.featured-dot:hover{border-color:var(--red);background:rgba(255,19,45,.16)}.featured-dot.active{background:var(--red);color:#fff;border-color:#ff4058;box-shadow:0 0 14px rgba(255,19,45,.45)}.sale-badge{position:absolute;left:16px;top:16px;z-index:3;display:inline-grid;place-items:center;min-width:62px;height:36px;padding:0 10px;background:linear-gradient(90deg,#ff1632,#b6071b);border:1px solid rgba(255,93,111,.9);color:#fff;font-weight:1000;letter-spacing:.04em;box-shadow:0 0 24px rgba(255,19,45,.35)}.detail-image-wrap .sale-badge{top:18px;left:auto;right:18px}.sale-price-line{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.sale-price-line del{color:#747d90;font-weight:700;text-shadow:none}.sale-price-line strong{color:var(--green);font-weight:1000}.sale-price-line em{font-style:normal;font-size:11px;padding:3px 6px;background:rgba(255,19,45,.17);border:1px solid rgba(255,19,45,.5);color:#ff8796}.plan .sale-price-line{justify-content:center}.plan .sale-price-line del{font-size:14px}.plan .sale-price-line strong{font-size:22px}
@media(max-width:1050px){.featured-slide{grid-template-columns:1fr}.featured-media{min-height:360px}.featured-copy{padding:30px}.featured-copy h2{font-size:34px}}
@media(max-width:700px){.featured-showcase{padding-left:5vw;padding-right:5vw}.featured-head{align-items:flex-start}.featured-head h2{font-size:32px}.featured-head p:not(.eyebrow){display:none}.featured-controls button{width:42px;height:42px}.featured-media{min-height:250px}.featured-copy{padding:24px 20px 28px}.featured-copy h2{font-size:28px}.featured-price strong{font-size:27px}.featured-stats{display:none}.featured-view-btn{width:100%}}

/* =========================================================
   ACCOUNT CENTER - LICENSE KEY VISUAL POLISH V2
   Keep these controls OUTSIDE the global red cut-button system.
   Hidden key : black / red outline, matching Private Download.
   Revealed   : solid red card.
   Copy key   : centered flat text action, no red polygon button.
   ========================================================= */
.license-action-stack .license-key-controls{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:7px !important;
  align-items:center !important;
}

button.license-key-reveal,
.license-action-stack button.license-key-reveal{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:64px !important;
  margin:0 !important;
  padding:13px 18px !important;
  gap:7px !important;
  border:1px solid rgba(255,19,45,.62) !important;
  border-radius:12px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(16,10,20,.72),rgba(8,10,18,.86)) !important;
  box-shadow:inset 0 0 22px rgba(255,19,45,.055) !important;
  color:#fff !important;
  text-align:center !important;
  transform:none !important;
  cursor:pointer !important;
  overflow:hidden !important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

button.license-key-reveal .license-action-type{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--muted) !important;
  font-family:inherit !important;
  font-size:12px !important;
  line-height:1.15 !important;
  letter-spacing:2.6px !important;
  text-transform:uppercase !important;
  font-weight:1000 !important;
}

button.license-key-reveal .license-action-label{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 8px !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:1000 !important;
  letter-spacing:.8px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:center !important;
}

button.license-key-reveal:hover:not(.is-revealed){
  filter:brightness(1.08) !important;
  border-color:rgba(255,19,45,.92) !important;
  background:linear-gradient(180deg,rgba(22,11,22,.82),rgba(9,10,18,.94)) !important;
  box-shadow:inset 0 0 25px rgba(255,19,45,.08),0 0 18px rgba(255,19,45,.08) !important;
  transform:none !important;
}

button.license-key-reveal.is-revealed{
  background:linear-gradient(90deg,#e11d2e 0%,#b10f1e 100%) !important;
  border-color:#ff3049 !important;
  box-shadow:0 0 22px rgba(255,19,45,.18),inset 0 0 18px rgba(255,255,255,.045) !important;
  color:#fff !important;
}
button.license-key-reveal.is-revealed .license-action-type,
button.license-key-reveal.is-revealed .license-action-label{
  color:#fff !important;
}
button.license-key-reveal.is-revealed:hover{
  filter:brightness(1.07) !important;
  transform:none !important;
}

/* Copy is deliberately a centered text action, not another red CTA block. */
button.copy-license-key,
.license-action-stack button.copy-license-key{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:30px !important;
  margin:0 !important;
  padding:2px 12px !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#f2f4fb !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  text-align:center !important;
  text-decoration:none !important;
  transform:none !important;
  cursor:pointer !important;
}
button.copy-license-key:hover,
.license-action-stack button.copy-license-key:hover{
  background:transparent !important;
  box-shadow:none !important;
  color:#ff4058 !important;
  filter:none !important;
  transform:none !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}
button.copy-license-key:disabled{
  color:var(--muted) !important;
  text-decoration:none !important;
}

@media(max-width:760px){
  button.license-key-reveal .license-action-label{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}



/* =========================================================
   ACCOUNT CENTER - LICENSE / RESELLER LAYOUT POLISH V3
   1) Keep LICENSE KEY + Copy + PRIVATE DOWNLOAD exactly the
      same width as the standalone Private Download action.
   2) Prevent the Account Center Copy-key styling from leaking
      into reseller inventory key chips.
   3) Use the reseller inventory card width efficiently.
   ========================================================= */

/* Desktop action column: same 360px width used by standalone Private Download. */
.key-row.license-card .license-action-stack{
  flex:0 0 360px !important;
  width:360px !important;
  max-width:360px !important;
  min-width:360px !important;
  justify-self:end !important;
}
.key-row.license-card .license-action-stack .license-key-controls,
.key-row.license-card .license-action-stack .license-key-reveal,
.key-row.license-card .license-action-stack .copy-license-key,
.key-row.license-card .license-action-stack .license-action,
.key-row.license-card .license-action-stack .license-download-small{
  width:360px !important;
  max-width:360px !important;
  min-width:360px !important;
}

/* Key card has the same visual height/presence as PRIVATE DOWNLOAD. */
.key-row.license-card .license-action-stack button.license-key-reveal{
  min-height:68px !important;
}
.key-row.license-card .license-action-stack button.copy-license-key{
  min-height:34px !important;
  padding:4px 12px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  box-shadow:none !important;
  color:#f3f5fb !important;
}
.key-row.license-card .license-action-stack button.copy-license-key:hover{
  background:transparent !important;
  color:#ff4058 !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Reseller inventory: neutralise generic copy-license-key rules. */
button.reseller-copy-chip.copy-license-key{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 270px !important;
  width:270px !important;
  max-width:270px !important;
  min-width:270px !important;
  min-height:52px !important;
  margin:0 !important;
  padding:10px 16px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:11px !important;
  clip-path:none !important;
  background:rgba(7,11,20,.82) !important;
  box-shadow:inset 0 0 16px rgba(255,255,255,.02) !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:1000 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
button.reseller-copy-chip.copy-license-key:hover{
  background:rgba(255,255,255,.075) !important;
  text-decoration:none !important;
  transform:none !important;
}
button.reseller-copy-chip.copy-license-key.state-available{
  border-color:rgba(0,255,140,.70) !important;
  color:#00ff8c !important;
}
button.reseller-copy-chip.copy-license-key.state-active{
  border-color:rgba(255,214,90,.76) !important;
  color:#ffd66b !important;
}
button.reseller-copy-chip.copy-license-key.state-expired{
  border-color:rgba(255,31,55,.82) !important;
  color:#ff5a6c !important;
}

/* Use the full reseller card as a useful horizontal information row. */
.reseller-inventory-card{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:16px 22px !important;
  align-items:center !important;
  padding:18px !important;
}
.reseller-item-main{
  display:grid !important;
  grid-template-columns:270px minmax(0,1fr) !important;
  gap:22px !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
}
.reseller-item-info{
  display:grid !important;
  gap:3px !important;
  min-width:0 !important;
}
.reseller-item-info b{
  font-size:17px !important;
  line-height:1.3 !important;
}
.reseller-item-info small{
  margin-top:0 !important;
  line-height:1.4 !important;
}
.reseller-item-state{
  justify-self:end !important;
  align-self:center !important;
}
.reseller-assign-row{
  grid-column:1/-1 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 180px !important;
  gap:12px !important;
  align-items:center !important;
  padding-top:2px !important;
}
.reseller-assign-row input{
  width:100% !important;
  min-width:0 !important;
}
.reseller-assign-row .btn{
  width:180px !important;
  min-width:180px !important;
  justify-self:end !important;
}

@media(max-width:980px){
  .key-row.license-card .license-action-stack,
  .key-row.license-card .license-action-stack .license-key-controls,
  .key-row.license-card .license-action-stack .license-key-reveal,
  .key-row.license-card .license-action-stack .copy-license-key,
  .key-row.license-card .license-action-stack .license-action,
  .key-row.license-card .license-action-stack .license-download-small{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex-basis:auto !important;
  }
  .reseller-inventory-card{
    grid-template-columns:1fr !important;
  }
  .reseller-item-state{
    justify-self:start !important;
  }
}
@media(max-width:720px){
  .reseller-item-main{
    grid-template-columns:1fr !important;
  }
  button.reseller-copy-chip.copy-license-key{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex-basis:auto !important;
  }
  .reseller-assign-row{
    grid-template-columns:1fr !important;
  }
  .reseller-assign-row .btn{
    width:100% !important;
    min-width:0 !important;
  }
}

/* Featured slide selector - final state override
   Global VForceTech button rules use !important red backgrounds, so the
   carousel selector needs an explicit higher-specificity state override. */
html body main #home-featured-dots.featured-dots button.featured-dot,
html body #home-featured-section #home-featured-dots button.featured-dot{
  width:46px !important;
  min-width:46px !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-grid !important;
  place-items:center !important;
  background:#05070d !important;
  color:#fff !important;
  border:1px solid rgba(255,19,45,.62) !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
html body main #home-featured-dots.featured-dots button.featured-dot:not(.active):hover,
html body #home-featured-section #home-featured-dots button.featured-dot:not(.active):hover{
  background:#0b0d13 !important;
  border-color:#ff4058 !important;
  box-shadow:0 0 12px rgba(255,19,45,.18) !important;
  filter:none !important;
  transform:none !important;
}
html body main #home-featured-dots.featured-dots button.featured-dot.active,
html body #home-featured-section #home-featured-dots button.featured-dot.active,
html body main #home-featured-dots.featured-dots button.featured-dot[aria-pressed="true"],
html body #home-featured-section #home-featured-dots button.featured-dot[aria-pressed="true"]{
  background:linear-gradient(90deg,#ff132d 0%,#b10f1e 100%) !important;
  color:#fff !important;
  border-color:#ff4058 !important;
  box-shadow:0 0 14px rgba(255,19,45,.42) !important;
}

/* ===== VForceTech password recovery flow ===== */
.forgot-auth-wrap{width:min(760px,92vw)}
.forgot-card{padding:30px 34px 28px}
.forgot-progress{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 28px}
.forgot-progress span{display:flex;align-items:center;gap:9px;min-height:48px;padding:9px 12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);color:#7f899d;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.forgot-progress span b{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border:1px solid rgba(255,255,255,.16);background:#090d16;color:#aeb7c8}
.forgot-progress span.active{border-color:rgba(255,31,55,.76);background:rgba(255,31,55,.12);color:#fff;box-shadow:0 0 22px rgba(255,31,55,.12)}
.forgot-progress span.active b{border-color:#ff1f37;background:#ff1f37;color:#fff}
.forgot-progress span.done{border-color:rgba(49,255,144,.35);color:#b9ffdb}
.forgot-progress span.done b{border-color:rgba(49,255,144,.7);color:#31ff90}
.forgot-step.hidden{display:none!important}
.forgot-step h2{margin-bottom:8px}
.forgot-step .hint{margin:0 0 18px}
.forgot-captcha-row{display:grid;grid-template-columns:minmax(230px,1fr) auto;gap:12px;align-items:stretch;margin:2px 0 13px}
#forgot-captcha-image{display:block;width:100%;height:66px;object-fit:contain;border:1px solid rgba(255,31,55,.5);background:#05070d}
.forgot-refresh-captcha{min-height:66px;padding:0 18px;white-space:nowrap}
.forgot-secondary-btn{margin-top:12px}
.forgot-spam-note{margin:16px 0 0;padding:13px 15px;border:1px solid rgba(255,197,64,.34);background:rgba(255,197,64,.06);color:#d9dfec;line-height:1.55;font-size:13px}
.forgot-spam-note b{color:#ffd66b}
.forgot-code-input{text-align:center;font-size:28px;font-weight:1000;letter-spacing:9px;padding-left:24px}
.forgot-card .form-result{margin:14px 0 0;line-height:1.5}
.forgot-card button:disabled,.forgot-card input:disabled{opacity:.62;cursor:not-allowed}
@media(max-width:700px){
  .forgot-card{padding:24px 20px}
  .forgot-progress{grid-template-columns:1fr;gap:7px}
  .forgot-progress span{min-height:42px}
  .forgot-captcha-row{grid-template-columns:1fr}
  .forgot-refresh-captcha{min-height:50px}
}

/* =========================================================
   VForceTech News Hub - automated official game news
   ========================================================= */
.news-hub{width:min(1440px,calc(100% - 48px));margin:0 auto 80px}.news-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 28px!important;margin-bottom:22px}.news-filter-bar>div:first-child{display:flex;flex-direction:column;gap:4px}.news-filter-bar b{font-size:20px;color:#fff}.news-filter-bar span{color:#aeb7ca}.news-filter-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.news-filter-btn{min-height:38px;padding:0 14px;border:1px solid rgba(255,31,55,.38);border-radius:10px;background:rgba(255,255,255,.045);color:#fff;font-weight:900;cursor:pointer}.news-filter-btn:hover,.news-filter-btn.active{background:linear-gradient(90deg,#ff1733,#b90c20);border-color:#ff1f37}.news-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.news-story-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgba(255,31,55,.42);border-radius:0 18px 0 18px;background:linear-gradient(180deg,rgba(15,20,31,.86),rgba(5,8,15,.94));box-shadow:inset 0 0 36px rgba(255,31,55,.04),0 0 28px rgba(255,31,55,.06);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.news-story-card:hover{transform:translateY(-3px);border-color:rgba(255,31,55,.78);box-shadow:0 0 34px rgba(255,31,55,.13)}.news-story-media{position:relative;display:block;aspect-ratio:16/8.6;overflow:hidden;background:#05070d}.news-story-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.news-story-card:hover .news-story-media img{transform:scale(1.035)}.news-story-game{position:absolute;left:14px;bottom:12px;padding:7px 11px;border:1px solid rgba(255,31,55,.72);background:rgba(3,5,10,.88);color:#fff;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.news-story-body{display:flex;flex:1;flex-direction:column;padding:20px}.news-story-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#aeb7ca;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.news-story-meta span{color:#ff8292;font-weight:950}.news-story-body h2{margin:12px 0 10px;font-size:22px;line-height:1.25}.news-story-body h2 a{color:#fff;text-decoration:none}.news-story-body p{margin:0 0 18px;color:#c8d0df;line-height:1.62;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.news-story-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}.news-story-foot small{color:#8e99ad;line-height:1.35}.news-story-foot a{color:#ff8292;text-decoration:none;font-weight:900;white-space:nowrap}.news-load-more-wrap{text-align:center;margin-top:24px}.news-loading,.news-empty-state{grid-column:1/-1;text-align:center;padding:44px!important}.news-empty-state h2{margin-top:0}.news-detail-page{width:min(1180px,calc(100% - 48px));margin:44px auto 90px}.news-breadcrumb{display:flex;gap:10px;align-items:center;margin-bottom:18px;color:#9da7ba}.news-breadcrumb a{color:#ff8292;text-decoration:none;font-weight:900}.news-detail-card{padding:0!important}.news-detail-cover{position:relative;aspect-ratio:16/7;overflow:hidden;background:#05070d}.news-detail-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,8,15,.94))}.news-detail-cover img{width:100%;height:100%;object-fit:cover;display:block}.news-detail-header{padding:34px 42px 16px}.news-detail-header h1{margin:14px 0 14px;font-size:clamp(34px,5vw,62px);line-height:1.06;letter-spacing:-.035em}.news-detail-header>p{max-width:920px;color:#ccd4e4;font-size:19px;line-height:1.58}.news-detail-source{margin-top:18px;color:#939eb2;font-size:13px}.news-detail-source b{color:#fff}.news-detail-content{padding:10px 42px 26px}.news-detail-content p{margin:0 0 22px;color:#e2e7f1;font-size:18px;line-height:1.8}.news-detail-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:24px 42px 38px;border-top:1px solid rgba(255,255,255,.08)}.news-related{margin-top:34px}.news-related>h2{font-size:30px}.news-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.news-related-grid .news-story-body p{display:none}.news-related-grid .news-story-card{display:grid;grid-template-columns:210px 1fr}.news-related-grid .news-story-media{aspect-ratio:auto;min-height:190px}.news-related-grid .news-story-body h2{font-size:18px}.news-page-head{width:min(1440px,calc(100% - 48px));margin-left:auto!important;margin-right:auto!important}
@media(max-width:1100px){.news-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.news-related-grid .news-story-card{grid-template-columns:1fr}.news-related-grid .news-story-media{aspect-ratio:16/8.6;min-height:0}}
@media(max-width:720px){.news-hub,.news-page-head,.news-detail-page{width:calc(100% - 28px)}.news-filter-bar{align-items:flex-start;flex-direction:column}.news-filter-actions{justify-content:flex-start}.news-article-grid,.news-related-grid{grid-template-columns:1fr}.news-detail-header,.news-detail-content,.news-detail-actions{padding-left:22px;padding-right:22px}.news-detail-header h1{font-size:34px}.news-detail-content p{font-size:16px}.news-story-foot{align-items:flex-start;flex-direction:column}}



/* DETAIL PAGE SECTION ALIGNMENT */
.detail-card,
.detail-section-shell{
  width:min(1720px,calc(100% - 8vw));
  margin-left:auto;
  margin-right:auto;
}
.detail-card{margin-top:48px;margin-bottom:26px}
.detail-section-shell{margin-bottom:26px}
.detail-section-shell:empty{display:none}
.detail-system-shell .system-requirements-panel,
.detail-review-shell .product-review-panel{
  margin-top:0;
}
.detail-system-shell .system-requirements-panel,
.detail-review-shell .product-review-panel,
.detail-card{
  padding-left:26px;
  padding-right:26px;
}
.detail-review-shell .product-review-panel{padding-top:26px;padding-bottom:26px}
@media(max-width:900px){
  .detail-card,
  .detail-section-shell{
    width:calc(100% - 10vw);
  }
  .detail-card{margin-top:34px;margin-bottom:20px}
  .detail-section-shell{margin-bottom:20px}
  .detail-system-shell .system-requirements-panel,
  .detail-review-shell .product-review-panel,
  .detail-card{
    padding-left:20px;
    padding-right:20px;
  }
}

/* PRODUCT SYSTEM REQUIREMENTS */
.system-requirements-panel{margin-top:22px;padding:24px;position:relative;overflow:hidden}.system-requirements-panel::before{content:"";position:absolute;left:0;top:0;width:64px;height:4px;background:#ff1733}.sysreq-toggle-shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;align-items:stretch}.sysreq-toggle-copy,.sysreq-toggle-side{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.sysreq-toggle-copy h2{margin:4px 0 8px}.sysreq-toggle-copy p:not(.eyebrow){margin:0;color:#aeb7cc;line-height:1.55}.sysreq-toggle-side{gap:12px;align-items:stretch}.sysreq-template{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border:1px solid rgba(0,255,136,.38);background:rgba(0,255,136,.055);color:#bfffe0;font-size:12px;font-weight:900;white-space:nowrap;align-self:flex-start}.sysreq-badges,.sysreq-mini-badges,.sysreq-feature-list,.sysreq-ai-tags{display:flex;gap:8px;flex-wrap:wrap}.sysreq-badges{margin:0}.sysreq-badges-compact{min-height:42px}.sysreq-badges span,.sysreq-mini-badges span,.sysreq-feature-list span,.sysreq-ai-tags span{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 9px;border:1px solid rgba(255,31,55,.42);background:rgba(255,31,55,.065);color:#fff;font-size:11px;font-weight:900;letter-spacing:.02em;text-align:center}.sysreq-mini-badges{margin:8px 0 3px}.sysreq-mini-badges span{min-height:25px;padding:3px 7px;font-size:10px;color:#dfe6f3}.sysreq-toggle-btn{width:100%;justify-content:space-between;gap:12px}.sysreq-toggle-btn .sysreq-toggle-icon{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:20px;font-weight:900;line-height:1}.sysreq-collapse-body{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,31,55,.22)}.sysreq-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}.sysreq-level{border:1px solid rgba(255,255,255,.10);background:rgba(4,8,16,.58);padding:18px;display:flex;flex-direction:column;min-height:100%}.sysreq-level-title{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid rgba(255,31,55,.24)}.sysreq-level-title span{font-size:18px;font-weight:950;color:#fff}.sysreq-level-title small{color:#aeb7cc;text-align:right}.sysreq-row{display:grid;grid-template-columns:minmax(132px,.42fr) 1fr;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);align-items:start}.sysreq-row:last-child{border-bottom:0}.sysreq-row>span{color:#9fa9bd;font-size:13px;font-weight:800}.sysreq-row>b{color:#f7f9ff;font-size:14px;font-weight:850;line-height:1.5}.sysreq-row b small{display:block;color:#9fa9bd;font-size:12px;font-weight:600;margin-top:3px}.sysreq-feature-list{margin-top:16px;justify-content:flex-start}.sysreq-feature-list span{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.035);color:#dce3ef}.sysreq-ai{margin-top:16px;display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:16px;padding:17px;border-left:3px solid #00ff88;background:rgba(0,255,136,.045);align-items:stretch}.sysreq-ai b{color:#bfffe0;letter-spacing:.06em}.sysreq-ai p{margin:6px 0 0;color:#c7d0df;line-height:1.55}.sysreq-ai-tags{align-content:flex-start}.sysreq-ai-tags span{border-color:rgba(0,255,136,.28);background:rgba(0,255,136,.045);color:#c8ffe0}.sysreq-notes{margin-top:16px;padding:16px;border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.025)}.sysreq-notes b{color:#fff}.sysreq-notes ul{margin:9px 0 0;padding-left:20px;color:#b8c2d4;line-height:1.6}.variant-card .sysreq-mini-badges{grid-column:1/-1}
@media(max-width:900px){.sysreq-toggle-shell,.sysreq-levels,.sysreq-ai{grid-template-columns:1fr}.sysreq-template{white-space:normal}.system-requirements-panel{padding:20px}.sysreq-row{grid-template-columns:1fr;gap:4px}.sysreq-toggle-btn{width:100%}}


/* =========================================================
   PRODUCT VARIANT SELECT - CENTERED MAX 5 COLUMN LAYOUT
   - Game artwork spans the full row above product variants.
   - Desktop rows use equal-size cards, up to five per row.
   - Incomplete rows remain centered.
   - Text, requirement badges and price occupy aligned slots.
   ========================================================= */
.variant-select-card.detail-card{
  grid-template-columns:1fr !important;
  align-items:stretch !important;
}
.variant-select-card .detail-image-wrap{
  grid-column:1/-1 !important;
  width:100% !important;
  height:clamp(320px,27vw,460px) !important;
  min-height:clamp(320px,27vw,460px) !important;
  max-height:460px !important;
}
.variant-select-card .detail-info{
  grid-column:1/-1 !important;
  width:100% !important;
  overflow:visible !important;
  padding:0 2px 4px !important;
}
.variant-select-card .detail-info > h2{
  margin-top:26px;
  margin-bottom:0;
}
.variant-select-card .variant-grid{
  --variant-columns:5;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:18px !important;
  width:100% !important;
  margin:22px auto 0 !important;
}
.variant-select-card .variant-card{
  flex:0 0 calc((100% - (var(--variant-columns) - 1) * 18px) / var(--variant-columns)) !important;
  width:calc((100% - (var(--variant-columns) - 1) * 18px) / var(--variant-columns)) !important;
  max-width:calc((100% - (var(--variant-columns) - 1) * 18px) / var(--variant-columns)) !important;
  height:520px !important;
  min-height:520px !important;
  display:grid !important;
  grid-template-rows:58px 24px 26px minmax(0,1fr) 92px 42px !important;
  align-content:stretch !important;
  gap:10px !important;
  padding:22px !important;
}
.variant-card-title{
  display:flex;
  align-items:flex-start;
  color:#fff;
  font-size:20px;
  line-height:1.28;
  font-weight:1000;
  overflow:hidden;
}
.variant-card-rating-slot,
.variant-card-sales-slot{
  min-height:0;
  overflow:hidden;
}
.variant-card-rating-slot .product-rating,
.variant-card-sales-slot .product-sales-count{
  margin:0 !important;
}
.variant-card-description{
  color:var(--muted);
  font-size:14px;
  line-height:1.58;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:9;
}
.variant-card-system-slot{
  display:flex;
  align-items:flex-start;
  overflow:hidden;
}
.variant-card-system-slot .sysreq-mini-badges{
  width:100%;
  margin:0 !important;
  align-content:flex-start;
}
.variant-card-price{
  display:flex;
  align-items:flex-end;
  color:var(--green);
  font-weight:1000;
  font-size:18px;
  line-height:1.25;
}
.variant-card-price .price{
  font-size:inherit;
}
@media(max-width:1599px) and (min-width:1351px){
  .variant-select-card .variant-grid{--variant-columns:4;}
}
@media(max-width:1350px) and (min-width:1101px){
  .variant-select-card .variant-grid{--variant-columns:3;}
}
@media(max-width:1100px){
  .variant-select-card .detail-image-wrap{
    height:clamp(260px,48vw,380px) !important;
    min-height:clamp(260px,48vw,380px) !important;
    max-height:380px !important;
  }
  .variant-select-card .variant-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .variant-select-card .variant-card{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    grid-template-rows:auto auto auto auto auto auto !important;
  }
  .variant-card-title{min-height:0;}
  .variant-card-description{
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
  }
  .variant-card-system-slot{min-height:0;overflow:visible;}
}
.variant-card-price,
.variant-card-price .price,
.variant-card-price .sale-price-line,
.variant-card-price .sale-price-line strong{
  color:var(--green) !important;
}
.variant-card-price .sale-price-line{
  width:100%;
  display:flex;
  align-items:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.variant-card-price .sale-price-line del{color:#8f98aa;font-size:12px}
.variant-card-price .sale-price-line em{color:#ffd36b;font-size:11px}

/* SUPPORT RESELLER RESEARCH ACCESS */
.support-research-note{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid rgba(0,255,153,.32);background:rgba(0,255,153,.055);color:#aaffd6;font-size:12px;font-weight:900;line-height:1.35}

/* SUPPORT STOCK PRIORITY */
.support-article.is-out-of-stock > .support-article-head{opacity:.68}
.support-article.is-out-of-stock > .support-article-head small{color:#9aa3b4}
.support-article.is-out-of-stock > .support-article-head b{color:#c8ceda}
.support-article.is-out-of-stock.open > .support-article-head,.support-article.is-out-of-stock > .support-article-head:hover{opacity:.92}

/* ===== VForceTech registration terms 2026-08-04 ===== */
.register-auth-wrap{width:min(680px,92vw)}
.register-card{padding:32px 28px 30px!important}
.register-card h2{margin-bottom:18px}
.register-card input:not([type="checkbox"]){height:52px;margin-bottom:13px}
.register-terms-title{
  width:100%;min-height:52px;margin:4px 0 12px;padding:0 16px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  border:1px solid rgba(255,19,45,.42);background:linear-gradient(90deg,rgba(255,19,45,.09),rgba(255,255,255,.025));
  color:#fff;cursor:pointer;text-align:left;position:relative;z-index:3
}
.register-terms-title span{font-weight:900;letter-spacing:.2px}
.register-terms-title:hover{border-color:rgba(255,19,45,.85);box-shadow:0 0 20px rgba(255,19,45,.15)}
.register-terms-consent{
  display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:11px;
  margin:0 0 18px;padding:14px 15px;border:1px solid rgba(255,255,255,.1);
  background:rgba(4,7,13,.72);color:#d9deeb;line-height:1.5;position:relative;z-index:3;cursor:pointer
}
.register-terms-consent input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;min-width:20px;
  margin:2px 0 0!important;padding:0!important;border:1px solid rgba(255,255,255,.32)!important;
  border-radius:3px;background:#05070d;display:grid;place-items:center;cursor:pointer
}
.register-terms-consent input[type="checkbox"]:checked{background:linear-gradient(135deg,#a60314,#ff132d);border-color:#ff4257!important;box-shadow:0 0 14px rgba(255,19,45,.38)}
.register-terms-consent input[type="checkbox"]:checked:after{content:"✓";color:#fff;font-size:14px;font-weight:1000;line-height:1}
.register-terms-consent input[type="checkbox"]:disabled{opacity:.42;cursor:not-allowed}
.register-submit:disabled,.btn:disabled{opacity:.44!important;filter:grayscale(.35)!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}
.register-card .form-result{margin:12px 0 0;line-height:1.45}

body.terms-modal-open{overflow:hidden}
.terms-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px}
.terms-modal[hidden]{display:none!important}
.terms-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(7px)}
.terms-modal-dialog{
  position:relative;z-index:1;width:min(960px,96vw);height:min(820px,92vh);display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;border:1px solid rgba(255,19,45,.72);background:linear-gradient(180deg,rgba(15,19,29,.99),rgba(4,7,13,.99));
  box-shadow:0 0 70px rgba(255,19,45,.24),inset 0 0 55px rgba(255,19,45,.045)
}
.terms-modal-dialog:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,var(--red) 0 24px,transparent 25px) top left/120px 120px no-repeat,linear-gradient(315deg,var(--red) 0 24px,transparent 25px) bottom right/120px 120px no-repeat;opacity:.9}
.terms-modal-header{position:relative;z-index:2;display:flex;justify-content:space-between;gap:22px;padding:25px 30px 22px;border-bottom:1px solid rgba(255,19,45,.32);background:linear-gradient(90deg,rgba(255,19,45,.1),transparent 55%)}
.terms-modal-kicker{display:block;margin-bottom:6px;color:var(--red2);font-size:12px;font-weight:1000;letter-spacing:2px}
.terms-modal-header h2{margin:0;font-size:27px;line-height:1.25;color:#fff}
.terms-modal-header p{margin:7px 0 0;color:var(--muted)}
.terms-modal-close{flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(255,19,45,.55);background:rgba(255,19,45,.1);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.terms-modal-close:hover{background:var(--red)}
.terms-modal-body{position:relative;z-index:2;overflow:auto;padding:30px 34px 42px;scrollbar-width:thin;scrollbar-color:var(--red) rgba(255,255,255,.06)}
.terms-modal-body::-webkit-scrollbar{width:10px}.terms-modal-body::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}.terms-modal-body::-webkit-scrollbar-thumb{background:#b50b20;border:2px solid #111520}
.terms-modal-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 28px;border-top:1px solid rgba(255,19,45,.3);background:rgba(3,5,10,.96)}
.terms-modal-footer small{color:var(--muted);line-height:1.45}.terms-modal-footer .btn{min-width:180px}
.terms-loading,.terms-load-error{min-height:300px;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;color:var(--muted)}
.terms-loading span{width:42px;height:42px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--red);border-radius:50%;animation:vftTermsSpin .85s linear infinite}
@keyframes vftTermsSpin{to{transform:rotate(360deg)}}
.terms-load-error b{color:#fff;font-size:18px}.terms-load-error p{margin:0 0 8px}

.policy-document{color:#dce2ef;line-height:1.72}
.policy-document h1{margin:0;text-align:center;font-size:30px;line-height:1.25;color:#fff;letter-spacing:.3px;text-shadow:0 0 20px rgba(255,19,45,.2)}
.policy-document h1+ h2{margin:7px 0 24px;padding:0;border:0;text-align:center;color:var(--red2);font-size:14px;letter-spacing:2.2px;text-transform:uppercase;background:none}
.policy-document h2{margin:30px 0 14px;padding:13px 15px;border-left:3px solid var(--red);background:linear-gradient(90deg,rgba(255,19,45,.11),transparent);color:#fff;font-size:19px;line-height:1.4}
.policy-document h3{margin:22px 0 10px;color:#fff;font-size:17px}
.policy-document .policy-intro{margin:0 0 22px;padding:18px 20px;border:1px solid rgba(49,255,144,.25);background:rgba(49,255,144,.055);color:#eef6f2;line-height:1.7}
.policy-document p{margin:0 0 13px;color:#cdd4e2}
.policy-document p strong{color:#fff}
.policy-document ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:9px}
.policy-document li{position:relative;padding-left:20px;color:#cdd4e2}.policy-document li:before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;background:var(--red);box-shadow:0 0 9px rgba(255,19,45,.55);transform:rotate(45deg)}
.support-policy-document{padding:24px!important;border:1px solid rgba(255,19,45,.18);background:rgba(4,7,13,.48)}
.support-policy-document h1{font-size:26px}.support-policy-document h2{font-size:18px}

@media(max-width:680px){
  .register-card{padding:27px 20px 26px!important}
  .register-terms-title{padding:12px 14px}
  .terms-modal{padding:0}
  .terms-modal-dialog{width:100vw;height:100dvh;border-left:0;border-right:0}
  .terms-modal-header{padding:20px 18px 17px}.terms-modal-header h2{font-size:22px}.terms-modal-header p{font-size:13px}
  .terms-modal-body{padding:23px 18px 35px}
  .terms-modal-footer{padding:14px 18px;flex-direction:column;align-items:stretch}.terms-modal-footer .btn{width:100%}
  .policy-document h1{font-size:24px}.policy-document h2{font-size:17px;margin-top:25px}
}


/* Renewal voucher countdown and policy state */
.renewal-voucher-warning{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:12px 0 14px;
  padding:12px 14px;
  border:1px solid rgba(255,214,107,.62);
  border-left:4px solid #ffd66b;
  border-radius:10px;
  background:rgba(255,214,107,.075);
  color:#eef2fb;
}
.renewal-voucher-warning b{color:#ffd66b!important;font-size:14px;line-height:1.4}
.renewal-voucher-warning span{color:#dce3f2;font-size:14px}
.renewal-voucher-warning strong{color:#fff;font-weight:900;font-variant-numeric:tabular-nums}
.renewal-voucher-warning small{color:#aeb7cc!important;line-height:1.45;margin:0!important}
.renewal-voucher-warning.expired{
  border-color:rgba(255,31,55,.68);
  border-left-color:#ff1f37;
  background:rgba(255,31,55,.075);
}
.renewal-voucher-warning.expired b{color:#ff7384!important}


/* =========================================================
   RENEWAL SHOP MODE V3
   One renewal entry point; product-specific voucher is attached only
   after the customer enters the store from Account Center.
   ========================================================= */
.renewal-shop-panel{margin-bottom:18px;padding:24px 28px!important}
.renewal-shop-entry{display:flex;align-items:center;justify-content:space-between;gap:28px}
.renewal-shop-entry-copy{min-width:0;max-width:760px}
.renewal-shop-entry-copy .eyebrow{margin:0 0 6px;color:#ff4d62;letter-spacing:3px;font-size:11px;font-weight:900}
.renewal-shop-entry-copy h2{margin:0 0 8px;color:#fff}
.renewal-shop-entry-copy p{margin:0;color:#cdd5e5;line-height:1.6}
.renewal-shop-entry-copy small{display:block;margin-top:8px;color:#8f9ab0}
.renewal-shop-open{flex:0 0 auto;min-width:190px;min-height:48px}
.renewal-expiry-list{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,214,107,.28);display:grid;gap:8px}
.renewal-expiry-title{color:#ffd66b;font-size:13px;font-weight:900;letter-spacing:.3px}
.renewal-expiry-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px;border:1px solid rgba(255,214,107,.32);border-radius:10px;background:rgba(255,214,107,.055)}
.renewal-expiry-row b{display:block;color:#fff;font-size:14px}
.renewal-expiry-row small{display:block;margin-top:2px;color:#aeb7cc}
.renewal-expiry-row strong{color:#ffd66b;font-variant-numeric:tabular-nums;white-space:nowrap}
.renewal-shop-mode-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px;padding:16px 18px;border-color:rgba(0,255,136,.46)!important;background:linear-gradient(90deg,rgba(0,255,136,.08),rgba(6,10,18,.96))!important}
.renewal-shop-mode-banner div{display:flex;flex-direction:column;gap:4px;min-width:0}
.renewal-shop-mode-banner b{color:#31ff90;font-size:15px}
.renewal-shop-mode-banner span{color:#cfd7e7;line-height:1.5}
.renewal-shop-mode-banner .btn{flex:0 0 auto;white-space:nowrap}
.cart-item .renewal-cart-tag{display:inline-flex;margin-top:5px;padding:3px 7px;border:1px solid rgba(0,255,136,.42);border-radius:999px;color:#31ff90;font-size:11px;font-weight:900}
@media(max-width:760px){
  .renewal-shop-panel{padding:20px!important}
  .renewal-shop-entry,.renewal-shop-mode-banner{align-items:stretch;flex-direction:column}
  .renewal-shop-open,.renewal-shop-mode-banner .btn{width:100%}
  .renewal-expiry-row{align-items:flex-start;flex-direction:column;gap:5px}
  .renewal-expiry-row strong{white-space:normal}
}

/* =========================================================
   DELTA FORCE - DAILY PASSWORD CAROUSEL V1
   Temporary framed artwork slots; map images can be added later
   through --delta-map-image without changing the carousel logic.
   ========================================================= */
.delta-daily-password{
  position:relative;
  width:100%;
  margin:30px 0 8px;
  padding:22px 18px 18px;
  overflow:hidden;
  border:1px solid rgba(255,31,55,.52);
  background:
    radial-gradient(circle at 50% -25%,rgba(255,31,55,.17),transparent 48%),
    linear-gradient(180deg,rgba(10,15,25,.94),rgba(4,7,13,.97));
  box-shadow:inset 0 0 42px rgba(255,31,55,.055),0 0 24px rgba(255,31,55,.08);
}
.delta-daily-password::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:74px;
  height:4px;
  background:var(--red);
  box-shadow:0 0 18px rgba(255,31,55,.7);
}
.delta-password-head{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:2px 8px 14px;
}
.delta-password-head .eyebrow{margin-bottom:5px}
.delta-password-head h2{
  margin:0 !important;
  color:#fff;
  font-size:clamp(24px,2vw,34px);
  line-height:1.1;
  text-transform:none;
  text-shadow:0 0 22px rgba(255,31,55,.24);
}
.delta-password-viewport{
  position:relative;
  z-index:2;
  width:100%;
  overflow:hidden;
  padding:10px 0 12px;
  touch-action:pan-y;
  user-select:none;
}
.delta-password-track{
  display:flex;
  align-items:stretch;
  width:100%;
  will-change:transform;
}
.delta-password-card{
  position:relative;
  flex:0 0 calc(33.333333% - 16px);
  height:188px;
  margin:0 8px;
  padding:24px 18px 20px;
  overflow:hidden;
  border:1px solid rgba(255,31,55,.42);
  border-radius:10px;
  background:rgba(7,11,18,.94);
  color:#fff;
  cursor:pointer;
  opacity:.56;
  transform:scale(.93);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease,box-shadow .35s ease;
  box-shadow:inset 0 0 30px rgba(255,31,55,.045);
}
.delta-password-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(3,6,12,.18),rgba(3,6,12,.91)),
    var(--delta-map-image,
      radial-gradient(circle at 75% 28%,rgba(255,31,55,.27),transparent 24%),
      radial-gradient(circle at 25% 70%,rgba(255,31,55,.13),transparent 27%),
      linear-gradient(135deg,#171d29,#070a11 63%));
  background-position:center;
  background-size:cover;
  filter:saturate(.82) contrast(1.05);
}
.delta-password-card::after{
  content:"";
  position:absolute;
  inset:9px;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;
  clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
}
.delta-password-card.active{
  z-index:4;
  opacity:1;
  transform:scale(1);
  border-color:rgba(49,255,144,.72);
  box-shadow:inset 0 0 36px rgba(49,255,144,.06),0 0 24px rgba(49,255,144,.16);
}
.delta-password-card:hover{opacity:.9;border-color:rgba(255,31,55,.78)}
.delta-password-card.active:hover{opacity:1;border-color:rgba(49,255,144,.92)}
.delta-password-art{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.delta-password-art::before,
.delta-password-art::after{
  content:"";
  position:absolute;
  width:42px;
  height:42px;
  border-color:rgba(255,31,55,.7);
  border-style:solid;
}
.delta-password-art::before{left:12px;top:12px;border-width:2px 0 0 2px}
.delta-password-art::after{right:12px;bottom:12px;border-width:0 2px 2px 0}
.delta-password-card.active .delta-password-art::before,
.delta-password-card.active .delta-password-art::after{border-color:rgba(49,255,144,.8)}
.delta-password-map,
.delta-password-code{
  position:relative;
  z-index:3;
  display:block;
  text-align:center;
}
.delta-password-map{
  margin-top:23px;
  color:#f4f7ff;
  font-size:clamp(17px,1.5vw,24px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:.02em;
  text-shadow:0 2px 12px #000;
}
.delta-password-code{
  width:max-content;
  min-width:104px;
  margin:17px auto 0;
  padding:7px 12px;
  color:var(--green);
  border:1px solid rgba(49,255,144,.28);
  background:rgba(0,10,7,.62);
  font-family:Consolas,"Courier New",monospace;
  font-size:clamp(28px,2.6vw,42px);
  line-height:1;
  letter-spacing:.09em;
  font-weight:1000;
  text-shadow:0 0 18px rgba(49,255,144,.52);
  cursor:copy;
  transition:.18s ease;
}
.delta-password-code:hover{border-color:rgba(49,255,144,.75);background:rgba(0,35,22,.72)}
.delta-password-code.copied{
  min-width:126px;
  color:#fff;
  font-family:inherit;
  font-size:14px;
  letter-spacing:.03em;
  padding-top:13px;
  padding-bottom:13px;
  background:rgba(49,255,144,.17);
}
.delta-password-code.is-loading{color:#858ea2;text-shadow:none;cursor:default}
.delta-password-dots{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  padding-top:4px;
}
.delta-password-dot{
  width:38px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,31,55,.48);
  border-radius:7px;
  background:rgba(255,31,55,.055);
  color:#bac2d2;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
  transition:.18s ease;
}
.delta-password-dot:hover{
  color:#fff;
  border-color:rgba(255,31,55,.9);
  background:rgba(255,31,55,.14);
}
.delta-password-dot.active{
  color:#04110c;
  border-color:var(--green);
  background:var(--green);
  box-shadow:0 0 16px rgba(49,255,144,.28);
}
@media(max-width:760px){
  .delta-daily-password{padding:20px 10px 16px;margin-top:24px}
  .delta-password-head{padding-left:10px;padding-right:10px}
  .delta-password-card{
    flex-basis:calc(100% - 20px);
    height:190px;
    margin:0 10px;
    opacity:.36;
    transform:scale(.94);
  }
  .delta-password-card.active{opacity:1;transform:scale(1)}
  .delta-password-dots{gap:6px}
  .delta-password-dot{width:34px;height:30px}
}

/* =========================================================
   VFORCETECH STORE UI - PHASE 7.11
   Product package selector: black by default, red only when selected,
   rounded rectangular cards instead of beveled / cut-corner shape.
   ========================================================= */
html body main .detail-card .detail-info .plans,
html body main #product-detail .plans{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

html body main .detail-card .detail-info .plans > .plan,
html body main #product-detail .plans > .plan,
html body main .detail-card .detail-info .plans > button.plan,
html body main #product-detail .plans > button.plan{
  appearance:none !important;
  -webkit-appearance:none !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:106px !important;
  padding:18px 16px !important;
  margin:0 !important;
  border:1px solid rgba(255,19,45,.42) !important;
  border-radius:14px !important;
  clip-path:none !important;
  background:linear-gradient(180deg,rgba(6,9,16,.98),rgba(10,14,24,.98)) !important;
  color:#ffffff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 22px rgba(255,19,45,.035) !important;
  text-align:center !important;
  overflow:hidden !important;
  transform:none !important;
  filter:none !important;
}

html body main .detail-card .detail-info .plans > .plan::before,
html body main .detail-card .detail-info .plans > .plan::after,
html body main #product-detail .plans > .plan::before,
html body main #product-detail .plans > .plan::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

html body main .detail-card .detail-info .plans > .plan:hover,
html body main #product-detail .plans > .plan:hover{
  border-color:rgba(255,19,45,.62) !important;
  background:linear-gradient(180deg,rgba(10,13,22,.98),rgba(14,18,28,.98)) !important;
  box-shadow:0 0 18px rgba(255,19,45,.10), inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 22px rgba(255,19,45,.04) !important;
}

html body main .detail-card .detail-info .plans > .plan.selected,
html body main .detail-card .detail-info .plans > .plan.active,
html body main #product-detail .plans > .plan.selected,
html body main #product-detail .plans > .plan.active{
  border-color:rgba(255,19,45,.96) !important;
  background:linear-gradient(180deg,#ff1b36 0%,#cf0d22 100%) !important;
  box-shadow:0 0 22px rgba(255,19,45,.26), inset 0 0 18px rgba(255,255,255,.06) !important;
}

html body main .detail-card .detail-info .plans > .plan b,
html body main #product-detail .plans > .plan b{
  margin:0 !important;
  font-size:24px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
  color:#ffffff !important;
}

html body main .detail-card .detail-info .plans > .plan .price,
html body main #product-detail .plans > .plan .price{
  margin-top:12px !important;
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:1000 !important;
  color:#38ff8e !important;
}

/* Quantity controls: same rounded-square language for visual consistency */
html body main .detail-card .detail-info .qty-box .qty-btn,
html body main #product-detail .qty-box .qty-btn,
html body main .detail-card .detail-info #detail-qty,
html body main #product-detail #detail-qty{
  border-radius:12px !important;
  clip-path:none !important;
}

html body main .detail-card .detail-info .qty-box .qty-btn,
html body main #product-detail .qty-box .qty-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(255,19,45,.42) !important;
  background:linear-gradient(180deg,rgba(6,9,16,.98),rgba(10,14,24,.98)) !important;
  color:#ffffff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 16px rgba(255,19,45,.03) !important;
}

html body main .detail-card .detail-info .qty-box .qty-btn:hover,
html body main #product-detail .qty-box .qty-btn:hover{
  border-color:rgba(255,19,45,.72) !important;
  background:linear-gradient(180deg,#ff1b36 0%,#cf0d22 100%) !important;
}

html body main .detail-card .detail-info #detail-qty,
html body main #product-detail #detail-qty{
  border:1px solid rgba(255,255,255,.12) !important;
  background:linear-gradient(180deg,rgba(6,9,16,.98),rgba(10,14,24,.98)) !important;
  color:#ffffff !important;
  margin:0 !important;
}

@media(max-width:900px){
  html body main .detail-card .detail-info .plans,
  html body main #product-detail .plans{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   VFORCETECH STORE UI - PHASE 7.12
   Quantity spinner cleanup + separate Add to cart / Check out flow.
   ========================================================= */

/* Remove the browser's built-in number arrows; external +/- buttons remain. */
html body main #product-detail #detail-qty,
html body main .detail-card .detail-info #detail-qty{
  appearance:textfield !important;
  -moz-appearance:textfield !important;
}
html body main #product-detail #detail-qty::-webkit-inner-spin-button,
html body main #product-detail #detail-qty::-webkit-outer-spin-button,
html body main .detail-card .detail-info #detail-qty::-webkit-inner-spin-button,
html body main .detail-card .detail-info #detail-qty::-webkit-outer-spin-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  margin:0 !important;
  display:none !important;
}

/* Product purchase controls. */
html body main #product-detail .buy-panel,
html body main .detail-card .detail-info .buy-panel{
  width:100% !important;
  max-width:560px !important;
  grid-template-columns:minmax(0,1fr) !important;
}
html body main #product-detail .detail-buy-actions,
html body main .detail-card .detail-info .detail-buy-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  width:100% !important;
}
html body main #product-detail .detail-buy-actions .btn,
html body main .detail-card .detail-info .detail-buy-actions .btn,
html body main #product-detail .add-cart-btn,
html body main #product-detail .checkout-now-btn{
  width:100% !important;
  min-width:0 !important;
  min-height:62px !important;
  padding:0 18px !important;
  margin:0 !important;
  font-size:15px !important;
  white-space:nowrap !important;
}
html body main #product-detail .add-cart-btn,
html body main .detail-card .detail-info .add-cart-btn{
  border-color:rgba(255,19,45,.92) !important;
  background:linear-gradient(90deg,#a60314 0%,#ff132d 100%) !important;
  box-shadow:0 0 28px rgba(255,19,45,.35) !important;
}
html body main #product-detail .add-cart-btn:hover,
html body main .detail-card .detail-info .add-cart-btn:hover{
  border-color:rgba(255,19,45,1) !important;
  background:linear-gradient(90deg,#b7081a 0%,#ff2740 100%) !important;
  box-shadow:0 0 30px rgba(255,19,45,.42) !important;
}
html body main #product-detail .checkout-now-btn,
html body main .detail-card .detail-info .checkout-now-btn{
  border-color:rgba(255,19,45,.92) !important;
  background:linear-gradient(90deg,#b1091c 0%,#ff1731 100%) !important;
  box-shadow:0 0 24px rgba(255,19,45,.25) !important;
}
html body main #product-detail .detail-buy-actions .btn:disabled,
html body main .detail-card .detail-info .detail-buy-actions .btn:disabled{
  cursor:not-allowed !important;
  opacity:.62 !important;
  transform:none !important;
  filter:none !important;
}

/* Non-blocking success message after Add to cart. */
.store-action-toast{
  position:fixed;
  top:96px;
  right:24px;
  z-index:10000;
  width:min(420px,calc(100vw - 32px));
  min-height:58px;
  display:flex;
  align-items:center;
  padding:15px 18px 15px 50px;
  border:1px solid rgba(49,255,144,.62);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(5,18,13,.98),rgba(3,10,9,.98));
  color:#effff6;
  box-shadow:0 16px 44px rgba(0,0,0,.46),0 0 24px rgba(49,255,144,.12),inset 0 0 20px rgba(49,255,144,.04);
  font-size:14px;
  font-weight:800;
  line-height:1.45;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-12px) translateX(18px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.store-action-toast::before{
  content:"✓";
  position:absolute;
  left:17px;
  top:50%;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(49,255,144,.65);
  border-radius:50%;
  color:#31ff90;
  background:rgba(49,255,144,.08);
  font-size:15px;
  font-weight:1000;
}
.store-action-toast.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) translateX(0);
}
.store-action-toast.error{
  border-color:rgba(255,19,45,.72);
  background:linear-gradient(180deg,rgba(28,7,12,.98),rgba(13,4,8,.98));
  box-shadow:0 16px 44px rgba(0,0,0,.46),0 0 24px rgba(255,19,45,.14),inset 0 0 20px rgba(255,19,45,.05);
}
.store-action-toast.error::before{
  content:"!";
  border-color:rgba(255,19,45,.72);
  color:#ff5b70;
  background:rgba(255,19,45,.10);
}

@media(max-width:640px){
  html body main #product-detail .detail-buy-actions,
  html body main .detail-card .detail-info .detail-buy-actions{
    grid-template-columns:1fr !important;
  }
  .store-action-toast{
    top:84px;
    right:16px;
    left:16px;
    width:auto;
  }
}