@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--primary-blue: #1e3a8a; 
    --secondary-blue: #2563eb; 
    --bg-color: #f8fafc; 
    --white: #ffffff;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --transition: all 0.3s ease;}
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif;}
body{background-color: var(--bg-color); color: var(--text-dark); line-height: 1.6; padding-bottom: 70px;}
@media (min-width: 769px){
  body{padding-bottom: 0;}
}
a{text-decoration: none; color: inherit; transition: var(--transition);}
ul{list-style: none;}
.container{width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px;}
.bannerSwiper{margin-top: 15px; margin-bottom: 0 !important; border-radius: var(--radius-md); overflow: hidden;}
.section-title{font-size: 1.2rem; font-weight: 800; color: var(--primary-blue);}
.product-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
@media (min-width: 768px){
  .product-grid{grid-template-columns: repeat(4, 1fr); gap: 20px;}
}
.product-card{width: 100%; height: 100%; 
    background: var(--white); 
    border-radius: var(--radius-sm); 
    border: 1px solid var(--border-color); 
    display: flex; flex-direction: column; position: relative;
    transition: 0.3s;}
.product-card:hover{border-color: var(--secondary-blue); box-shadow: 0 4px 15px rgba(0,0,0,0.08);}
.sale-badge{position: absolute; top: -1px; right: -1px; 
    background: #008c09; color: white; padding: 4px 10px; 
    font-size: 0.7rem; font-weight: 700; border-radius: 0 6px 0 10px; z-index: 2;}
.product-img{width: 100%; aspect-ratio: 4/3; object-fit: contain; 
    padding: 15px; border-bottom: 1px solid #f8fafc;}
.btn-buy{margin: 0 10px 10px; 
    background: var(--primary-blue); color: white; 
    border-radius: 4px; padding: 8px; font-size: 0.85rem; 
    display: flex; justify-content: center; align-items: center; gap: 6px; font-weight: 600; border: none; cursor: pointer;}
.btn-buy svg{width: 16px !important; height: 16px !important;}
.product-card:hover .btn-buy{background: var(--secondary-blue);}
html, body, a, button, input, select, textarea, [role="button"]{-webkit-tap-highlight-color: transparent !important;}
button:focus, button:focus-visible, a:focus, a:focus-visible, .btn:focus, .btn:focus-visible, input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible, [role="button"]:focus, [role="button"]:focus-visible{outline: none !important;
    box-shadow: none !important;}
*{-webkit-tap-highlight-color: transparent !important;}
a, button, input, select, textarea, [role="button"]{-webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;}
select:focus, select:active, button:focus, button:active, a:focus, a:active{outline: none !important;
    box-shadow: none !important;}
html, body{max-width:100%;overflow-x:hidden;}
body{background:#0b0f17 !important;color:#e5e7eb !important;padding-top:70px;}
.container{max-width:1200px;width:100%;}
.auth-card, .pay-card{background:#111827 !important;color:#e5e7eb !important;border-color:#273244 !important;}
.auth-wrapper{background:transparent !important;}
.form-control{background:#0b1220 !important;color:#f8fafc !important;border-color:#334155 !important;}
.password-rules{background:#0f172a !important;border-color:#334155 !important;}
.strength-meter{background:#263244 !important;}
.auth-footer, .rule-item{color:#94a3b8 !important;}
.alert-danger{background:#2a1217 !important;color:#fca5a5 !important;border-color:#5b2028 !important;}
.alert-success{background:#0d2a20 !important;color:#86efac !important;border-color:#14532d !important;}
.product-card{background:#111827 !important;color:#e5e7eb !important;border-color:#273244 !important;}
.google-btn{background:#111827 !important;color:#f8fafc !important;border-color:#334155 !important;}
input, textarea, select{color:#f8fafc;}
input::placeholder, textarea::placeholder{color:#64748b !important;}
section, main, .content{max-width:100%;}
html, body{background:#ffffff !important; color:#1e293b !important;}
body{background-color:#ffffff !important;}
.auth-card, .pay-card, .product-card, .google-btn, .password-rules{background:#ffffff !important; color:#1e293b !important; border-color:#e2e8f0 !important;}
.form-control, input, textarea, select{background:#ffffff !important; color:#1e293b !important; border-color:#cbd5e1 !important;}
input::placeholder, textarea::placeholder{color:#94a3b8 !important;}
.auth-footer, .rule-item{color:#64748b !important;}
section, main, .content, .container{background-color:transparent !important;}
:root{--primary-blue:#008c09 !important;
  --secondary-blue:#008c09 !important;
  --bg-color:#f4f5f7 !important;
  --text-dark:#263142 !important;
  --text-muted:#6b7280 !important;
  --border-color:#d7dee8 !important;}
html, body{background:#f4f5f7 !important;color:#263142 !important;}
.bannerSwiper{box-shadow:0 3px 12px rgba(0,0,0,.10) !important;border-color:#d9dee5 !important;}
.filter-container{justify-content:center !important;gap:12px !important;}
.filter-btn{background:#fff !important;color:#263142 !important;border:2px solid #d3dbe6 !important;
  border-radius:34px !important;padding:13px 28px !important;font-size:18px !important;font-weight:800 !important;
  box-shadow:0 3px 8px rgba(30,41,59,.10) !important;}
.filter-btn.active{background:#008c09 !important;color:#fff !important;border-color:#008c09 !important;box-shadow:0 8px 20px rgba(0,140,9,.24) !important;}
.product-card{background:#fff !important;color:#263142 !important;border:1px solid #e1e5eb !important;
  border-radius:22px !important;box-shadow:0 3px 12px rgba(15,23,42,.12) !important;padding:7px !important;}
.image-container{background:#fff !important;border-color:#e5e7eb !important;border-radius:18px !important;aspect-ratio:1/1 !important;}
.product-title-text{color:#394150 !important;background:#f1f2f4 !important;border:1px solid #e0e3e7 !important;border-radius:13px !important;padding:10px 7px !important;text-align:center !important;}
.product-subtitle{color:#6b7280 !important;}
.price-box, .price-box span.amount{color:#008c09 !important;}
.btn-demo{background:#6366ea !important;color:#fff !important;border:1px solid #6366ea !important;box-shadow:none !important;}
.btn-buy{background:#008c09 !important;color:#fff !important;border:1px solid #008c09 !important;box-shadow:none !important;}
.btn-buy:hover{background:#008c09 !important;box-shadow:none !important;}
.sale-badge{background:#008c09 !important;}
.kopa-footer-section{background:#fff !important;color:#64748b !important;border-top-color:#e5e7eb !important;box-shadow:none !important;}
@media(max-width:600px){
  .filter-btn{padding:12px 25px !important;font-size:17px !important;}
  .filter-container{flex-wrap:wrap !important;}
}
:root{--green:#008c09;--green2:#008c09;--page:#f4f5f7;--ink:#263142;--muted:#6b7280;--line:#d7dee8}
html, body{background:var(--page)!important;color:var(--ink)!important;min-height:100%;}
body{padding-top:82px!important;overflow-x:hidden!important;font-family:Arial,Helvetica,sans-serif!important;}
.header-inner{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:12px!important}
.header-home-btn{width:64px!important;height:64px!important;border-radius:50%!important;background:#008c09!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;border:0!important;box-shadow:0 4px 12px rgba(0,0,0,.10)!important;flex:none!important}
.header-home-btn{justify-self:start!important}
.auth-container, .auth-card, .dark-card, .wallet-card, .pay-card, .mykey-card, .product-card, .order-card, .gateway-card{background:#fff!important;color:var(--ink)!important;border-color:#e1e5eb!important;box-shadow:0 4px 14px rgba(15,23,42,.08)!important}
.form-control, input, textarea, select{background:#fff!important;color:var(--ink)!important;border-color:#cfd7e3!important}
input::placeholder, textarea::placeholder{color:#94a3b8!important}
.auth-footer, .rule-item{color:var(--muted)!important}
.mykey-product, .section-title, .page-title, .orders-wrapper h1, .orders-wrapper h2{color:var(--ink)!important}
.mykey-package, .mykey-row{background:#f8fafc!important;color:var(--ink)!important;border-color:#e0e5ec!important}
.status-completed{background:#dcfce7!important;color:#007a09!important}
.logo-preview{background:#fff!important;border-color:#dbe3ec!important}
.product-image-wrapper{background:#fff!important}
.product-image-wrapper img{background:#fff!important}
.copy-key, .order-copy-key{background:#008c09!important;border-color:#008c09!important;color:#fff!important}
.wallet-result{background:transparent!important;color:var(--ink)!important}
.wallet-card{background:#fff!important;color:var(--ink)!important;border-color:#e1e5eb!important;box-shadow:0 6px 18px rgba(15,23,42,.08)!important}
.qty-btn{background:#f1f3f6!important;color:var(--ink)!important;border-color:#d7dee8!important}
.qty-btn:hover{background:#e9edf2!important}
.price, .amount{color:#008c09!important}
.btn-buy, .btn-buy-premium, .btn-action.btn-buy, .btn-primary{background:#008c09!important;color:#fff!important;border-color:#008c09!important}
.btn-demo{background:#6366ea!important;color:#fff!important;border-color:#6366ea!important}
body, .auth-container, .form-control, .dark-card, .wallet-card{background-color:var(--page)!important}
.auth-container, .dark-card, .wallet-card{background:#fff!important}
.wallet-title, .wallet-msg, .result-actions, .result-actions a{color:var(--ink)!important}
.delivered-key-value{background:#f8fafc!important;color:#166534!important;border-color:#d7dee8!important}
.home-link{background:#fff!important;color:var(--ink)!important;border-color:#d7dee8!important}
.mykey-link{background:#008c09!important;color:#fff!important}
.kopa-footer-section{background:#fff!important;color:#64748b!important;border-top:1px solid #e5e7eb!important;box-shadow:none!important}
@media(max-width:600px){
  body{padding-top:122px!important}
  .header-home-btn{width:64px!important;height:64px!important}
}
@media(max-width:768px){
  body{padding-top:66px!important;}
}
.main-header .header-actions .action-icon, .main-header .header-actions .action-icon svg{color:#1e293b !important;
  stroke:currentColor !important;
  opacity:1 !important;
  visibility:visible !important;}
@media(max-width:768px){
  .main-container{padding-top:10px !important;}
}
.direct-hamb-drawer{background:#f3f6fa!important;color:#253044!important;padding:0 20px 24px!important;border-left:1px solid #dfe5ec!important;box-shadow:-10px 0 28px rgba(15,23,42,.16)!important;}
.direct-hamb-close{position:absolute;right:14px;top:18px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:31px;line-height:38px;cursor:pointer;}
.direct-hamb-avatar{width:94px;height:94px;margin:8px auto 16px;border-radius:50%;background:#fff;color:#008c09;border:4px solid rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;}
.direct-hamb-icon{width:28px!important;color:#008c09!important;font-size:23px!important;font-weight:900!important;text-align:center!important;flex:none!important;}
.direct-hamb-avatar-form{margin:0 auto;width:max-content;}
.direct-hamb-avatar{position:relative;overflow:visible;cursor:pointer!important;}
.main-container{padding-top:70px!important;}
@media(max-width:600px){
  .main-container{padding-top:70px!important;}
}
button:focus, a:focus, input:focus, select:focus, textarea:focus, button:active, a:active, input:active, select:active, textarea:active{outline:none!important;
  -webkit-tap-highlight-color:transparent!important;}
*:focus{outline:none!important;}
html, body, button, a, input, select, textarea{-webkit-tap-highlight-color:transparent!important;}
.main-container{padding-top:70px!important;
  margin-top:0!important;}
@media(max-width:600px){
  .main-container{padding-top:70px!important;}
}
*, *::before, *::after{-webkit-tap-highlight-color:transparent!important;}
a, button, input, select, textarea, [role="button"]{-webkit-tap-highlight-color:transparent!important;
  outline:0!important;}
a:focus, a:active, button:focus, button:active, input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active, [role="button"]:focus, [role="button"]:active{outline:0!important;
  box-shadow:none!important;}
body{padding-top:60px!important;}
.auth-container{width:calc(100% - 28px)!important;max-width:640px!important;box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;}
@media(max-width:600px){
  .auth-container{width:calc(100% - 28px)!important;max-width:640px!important;margin-left:auto!important;margin-right:auto!important;}
}
.auth-wrapper .auth-card .form-control{width:100%!important; height:68px!important; min-height:68px!important;
  box-sizing:border-box!important; padding:0 16px!important;
  border:2px solid #a9c9f3!important; border-radius:10px!important;
  font-size:1.05rem!important;}
@media(max-width:600px){
  .auth-wrapper .auth-card .form-control{height:48px!important; min-height:48px!important; padding:0 12px!important;
    border-width:1.5px!important; border-radius:8px!important; font-size:.92rem!important;}
}
html, body{width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  overscroll-behavior: none !important;}
#app-scroll-container{position: fixed !important;
  top: 0.5px !important;
  right: 0 !important;
  bottom: 0.5px !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain !important;
  scrollbar-gutter: stable;
  box-sizing: border-box !important;}
@media (max-width:600px){
  #app-scroll-container{top:60px!important;
    bottom:72px!important;
    padding-bottom:10px!important;
    box-sizing:border-box!important;}
  .main-container{padding-top:10px!important;
    margin-top:0!important;}
  .bannerSwiper{margin-top:0!important;
    margin-bottom:20px!important;
    height:180px!important;
    min-height:180px!important;}
  .bannerSwiper .swiper-wrapper, .bannerSwiper .swiper-slide{height:180px!important;
    min-height:180px!important;}
  .bannerSwiper .swiper-slide{display:block!important;}
  .bannerSwiper .swiper-slide img{width:100%!important;
    height:180px!important;
    min-height:180px!important;
    object-fit:cover!important;
    display:block!important;}
  .home-activity{margin-bottom:8px!important;}
}
@media(max-width:600px){
  #app-scroll-container{top:0!important;
    bottom:72px!important;
    height:calc(100dvh - 72px)!important;
    min-height:0!important;
    max-height:none!important;
    padding-bottom:10px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;}
  .main-container{padding-top:70px!important;margin-top:0!important;}
  .bannerSwiper{margin-top:0!important;}
  .home-activity{margin-bottom:10px!important;}
  .hx-bottom-item.nav-loading{color:#008c09!important;}
}
.hx-inner-page #app-scroll-container{padding-top:60px!important;
  box-sizing:border-box!important;}
.hx-inner-page{background:#f4f5f7!important;color:#263142!important;}
@media(max-width:600px){
  .hx-inner-page #app-scroll-container{top:0!important;
    bottom:72px!important;
    height:calc(100dvh - 72px)!important;
    padding-top:60px!important;
    padding-bottom:84px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;}
}
html{font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;}
body{min-width: 320px;}
button, input, select, textarea{font-family: inherit;}
@media (max-width: 768px){
  .container{padding-left: 15px !important; padding-right: 15px !important;}
  .section-title{font-size: 1.2rem !important;}
  .btn-buy{font-size: .85rem !important; padding: 8px !important;}
}
@media (max-width:600px){
  .main-container{padding-top:10px!important;}
  .addmoney-wrap{margin-top:10px!important;}
  .orders-wrapper{margin-top:10px!important;}
}
.product-card{padding:0!important;}
.image-container{border:0!important;border-radius:18px 18px 0 0!important;margin-bottom:7px!important;}
.product-title-text{border:0!important;background:transparent!important;border-radius:0!important;}
@media(max-width:600px){
  .product-card{padding:0!important;}
  .image-container{border:0!important;border-radius:17px 17px 0 0!important;}
}
@media (max-width:600px){
  .main-container{padding-top:20px!important;margin-top:0!important;}
  .bannerSwiper{margin-top:0!important;}
  .image-container{margin-bottom:0!important;}
}
.image-container{margin-bottom:0!important;}
.product-title-text, .product-title-premium{background: #f1f2f4 !important;
    border: 1px solid #e0e3e7 !important;
    border-radius: 13px !important;
    padding: 10px 7px !important;
    text-align: center !important;
    box-sizing: border-box !important;}
.product-title-premium{height: auto !important;
    min-height: 44px !important;
    margin: 0 0 12px 0 !important;}
@media (max-width: 600px){
  .product-title-premium, .product-info-box > .btn-demo, .product-info-box > .btn-buy-premium, .product-price-box{width: calc(100% - 12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;}
  .product-price-box{justify-content: center !important;}
}
@media (max-width:600px){
  .filter-container{margin-top:10px!important;
    margin-bottom:10px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;}
  .filter-container::before, .filter-container::after{content:none!important;display:none!important;border:0!important;box-shadow:none!important;}
  body:has(.auth-container), body:has(.auth-wrapper){padding-top:76px!important;}
  .auth-container, .auth-wrapper{width:calc(100% - 28px)!important;
    max-width:none!important;
    margin:10px auto 28px!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;}
  .auth-container > *, .auth-wrapper .auth-card{box-sizing:border-box!important;}
  .auth-container .auth-container, .auth-wrapper .auth-card{width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;}
}
#app-scroll-container{top:0!important;
  padding-top:0!important;}
.hx-inner-page #app-scroll-container{top:0!important;
  padding-top:0!important;}
#app-scroll-container, .hx-inner-page #app-scroll-container{top:0!important;
  padding-top:0!important;}
@media(max-width:600px){
  #app-scroll-container, .hx-inner-page #app-scroll-container{top:0!important;
    padding-top:0!important;
    height:calc(100dvh - 72px)!important;
    bottom:72px!important;}
  .main-container, .hx-inner-page .main-container{padding-top:0!important;
    margin-top:0!important;}
}
#app-scroll-container, .hx-inner-page #app-scroll-container, .hx-home-page #app-scroll-container{position:fixed!important;
  top:60px!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding-top:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;}
@media(max-width:600px){
  #app-scroll-container, .hx-inner-page #app-scroll-container, .hx-home-page #app-scroll-container{top:60px!important;
    bottom:72px!important;
    height:auto!important;
    padding-top:0!important;}
  .main-container, .hx-inner-page .main-container, .hx-home-page .main-container{padding-top:10px!important;
    margin-top:0!important;}
}
@media(max-width:600px){
  body{background:#f7faff!important}
  .main-container{background:linear-gradient(to bottom,#fff 0,#fff 95px,#f7faff 190px)!important;padding-top:20px!important;margin-top:0!important}
  .bannerSwiper{margin-top:0!important;position:relative!important;z-index:1!important}
}
@media(max-width:600px){
  body{background:#f4f5f7 !important;}
  .main-container{background:transparent !important; background-image:none !important; padding-top:20px !important; margin-top:0 !important;}
  .bannerSwiper{margin-top:0 !important; position:relative !important; z-index:1 !important;}
}
.main-header .container, .main-header .header-inner{width: 100% !important;
  height: 60px !important; min-height: 60px !important; max-height: 60px !important;
  margin: 0 !important; padding: 0 18px !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 0 !important;}
.main-header .header-left-slot{position: relative !important; left: auto !important; top: auto !important;
  width: 42px !important; min-width: 42px !important; max-width: 42px !important;
  height: 60px !important; min-height: 60px !important; max-height: 60px !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  flex: 0 0 42px !important;}
.main-header .header-logo{position: absolute !important; left: 50% !important; top: 50% !important;
  transform: translate(-50%,-50%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 150px) !important;
  margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important;
  border-radius: 22px !important; line-height: 1 !important;
  background: #008c09 !important; color: #fff !important;
  box-shadow: none !important; white-space: nowrap !important;}
.main-header .header-actions{position: relative !important; margin: 0 !important; padding: 0 !important;
  height: 60px !important; min-height: 60px !important; max-height: 60px !important;
  display: flex !important; align-items: center !important; justify-content: flex-end !important;
  gap: 0 !important; flex: 0 0 42px !important;}
<style id="LOGIN-10PX-GAP">

.login-page .login-container, .login-page .auth-container, .login-page .login-card, .login-container, .auth-container, .login-card{margin-left:10px !important; margin-right:10px !important; width:auto !important; max-width:none !important; box-sizing:border-box !important;}